(function($){
    "use strict";

    $.pixeEditorElementIcon = function(type){
        if( type.charAt(0) == '<' ) return type;

        switch(type){
            case 'view-settings':
                return '<svg width="13" height="11" viewBox="0 0 13 11" ><path d="M10.5043 10.9229C9.84066 10.9229 9.27972 10.6938 8.82143 10.2356C8.36326 9.77734 8.13417 9.2164 8.13417 8.55281C8.13417 7.8891 8.36326 7.32816 8.82143 6.86999C9.27972 6.41169 9.84066 6.18255 10.5043 6.18255C11.168 6.18255 11.7289 6.41169 12.1871 6.86999C12.6454 7.32816 12.8745 7.8891 12.8745 8.55281C12.8745 9.2164 12.6454 9.77734 12.1871 10.2356C11.7289 10.6938 11.168 10.9229 10.5043 10.9229ZM10.5035 9.86039C10.8646 9.86039 11.1729 9.73283 11.4286 9.47771C11.6842 9.22248 11.812 8.91441 11.812 8.55352C11.812 8.1925 11.6844 7.88414 11.4292 7.62843C11.174 7.37284 10.866 7.24505 10.505 7.24505C10.1439 7.24505 9.83565 7.37267 9.58006 7.6279C9.32446 7.88302 9.19667 8.19109 9.19667 8.5521C9.19667 8.91311 9.32423 9.22142 9.57935 9.47701C9.83458 9.7326 10.1426 9.86039 10.5035 9.86039ZM1.18701 9.08406V8.02156H6.58133V9.08406H1.18701ZM2.49477 4.82042C1.83106 4.82042 1.27012 4.59128 0.811949 4.13298C0.353658 3.67481 0.124512 3.11387 0.124512 2.45016C0.124512 1.78657 0.353658 1.22563 0.811949 0.767339C1.27012 0.309165 1.83106 0.0800781 2.49477 0.0800781C3.15836 0.0800781 3.7193 0.309165 4.1776 0.767339C4.63577 1.22563 4.86486 1.78657 4.86486 2.45016C4.86486 3.11387 4.63577 3.67481 4.1776 4.13298C3.7193 4.59128 3.15836 4.82042 2.49477 4.82042ZM2.49406 3.75792C2.85508 3.75792 3.16338 3.6303 3.41897 3.37507C3.67456 3.11995 3.80236 2.81188 3.80236 2.45087C3.80236 2.08986 3.6748 1.78155 3.41968 1.52596C3.16444 1.27037 2.85638 1.14258 2.49548 1.14258C2.13447 1.14258 1.82611 1.27014 1.5704 1.52526C1.31481 1.78049 1.18701 2.08856 1.18701 2.44945C1.18701 2.81047 1.31463 3.11883 1.56987 3.37454C1.82498 3.63013 2.13305 3.75792 2.49406 3.75792ZM6.4177 2.98141V1.91891H11.812V2.98141H6.4177Z" /></svg>' +
                       '<svg width="18" height="17" viewBox="0 0 18 17" ><path d="M14.4474 16.3161C13.4526 16.3161 12.6118 15.9727 11.925 15.2859C11.2382 14.599 10.8947 13.7583 10.8947 12.7635C10.8947 11.7688 11.2382 10.928 11.925 10.2411C12.6118 9.55431 13.4526 9.21089 14.4474 9.21089C15.4421 9.21089 16.2829 9.55431 16.9697 10.2411C17.6566 10.928 18 11.7688 18 12.7635C18 13.7583 17.6566 14.599 16.9697 15.2859C16.2829 15.9727 15.4421 16.3161 14.4474 16.3161ZM14.4474 14.4214C14.9053 14.4214 15.2961 14.2596 15.6197 13.9359C15.9434 13.6122 16.1053 13.2214 16.1053 12.7635C16.1053 12.3056 15.9434 11.9148 15.6197 11.5911C15.2961 11.2675 14.9053 11.1056 14.4474 11.1056C13.9895 11.1056 13.5987 11.2675 13.275 11.5911C12.9513 11.9148 12.7895 12.3056 12.7895 12.7635C12.7895 13.2214 12.9513 13.6122 13.275 13.9359C13.5987 14.2596 13.9895 14.4214 14.4474 14.4214ZM1.42105 13.7109V11.8161H9V13.7109H1.42105ZM3.55263 7.78983C2.55789 7.78983 1.71711 7.44641 1.03026 6.75957C0.343421 6.07273 0 5.23194 0 4.2372C0 3.24247 0.343421 2.40168 1.03026 1.71483C1.71711 1.02799 2.55789 0.68457 3.55263 0.68457C4.54737 0.68457 5.38816 1.02799 6.075 1.71483C6.76184 2.40168 7.10526 3.24247 7.10526 4.2372C7.10526 5.23194 6.76184 6.07273 6.075 6.75957C5.38816 7.44641 4.54737 7.78983 3.55263 7.78983ZM3.55263 5.8951C4.01053 5.8951 4.40132 5.73325 4.725 5.40957C5.04868 5.08589 5.21053 4.6951 5.21053 4.2372C5.21053 3.77931 5.04868 3.38852 4.725 3.06483C4.40132 2.74115 4.01053 2.57931 3.55263 2.57931C3.09474 2.57931 2.70395 2.74115 2.38026 3.06483C2.05658 3.38852 1.89474 3.77931 1.89474 4.2372C1.89474 4.6951 2.05658 5.08589 2.38026 5.40957C2.70395 5.73325 3.09474 5.8951 3.55263 5.8951ZM9 5.18457V3.28983H16.5789V5.18457H9Z" /></svg>';
            case 'view-popup':
                return '<svg width="18" height="19" viewBox="0 0 18 19" ><path d="M6.53731 18.5L6.1791 15.62C5.98507 15.545 5.80224 15.455 5.6306 15.35C5.45895 15.245 5.29104 15.1325 5.12687 15.0125L2.46269 16.1375L0 11.8625L2.30597 10.1075C2.29104 10.0025 2.28358 9.90125 2.28358 9.80375V9.19625C2.28358 9.09875 2.29104 8.9975 2.30597 8.8925L0 7.1375L2.46269 2.8625L5.12687 3.9875C5.29104 3.8675 5.46269 3.755 5.64179 3.65C5.8209 3.545 6 3.455 6.1791 3.38L6.53731 0.5H11.4627L11.8209 3.38C12.0149 3.455 12.1978 3.545 12.3694 3.65C12.541 3.755 12.709 3.8675 12.8731 3.9875L15.5373 2.8625L18 7.1375L15.694 8.8925C15.709 8.9975 15.7164 9.09875 15.7164 9.19625V9.80375C15.7164 9.90125 15.7015 10.0025 15.6716 10.1075L17.9776 11.8625L15.5149 16.1375L12.8731 15.0125C12.709 15.1325 12.5373 15.245 12.3582 15.35C12.1791 15.455 12 15.545 11.8209 15.62L11.4627 18.5H6.53731ZM8.10448 16.7H9.87313L10.1866 14.315C10.6493 14.195 11.0784 14.0187 11.4739 13.7862C11.8694 13.5537 12.2313 13.2725 12.5597 12.9425L14.7761 13.865L15.6493 12.335L13.7239 10.8725C13.7985 10.6625 13.8507 10.4412 13.8806 10.2087C13.9104 9.97625 13.9254 9.74 13.9254 9.5C13.9254 9.26 13.9104 9.02375 13.8806 8.79125C13.8507 8.55875 13.7985 8.3375 13.7239 8.1275L15.6493 6.665L14.7761 5.135L12.5597 6.08C12.2313 5.735 11.8694 5.44625 11.4739 5.21375C11.0784 4.98125 10.6493 4.805 10.1866 4.685L9.89552 2.3H8.12687L7.81343 4.685C7.35075 4.805 6.92164 4.98125 6.52612 5.21375C6.1306 5.44625 5.76866 5.7275 5.4403 6.0575L3.22388 5.135L2.35075 6.665L4.27612 8.105C4.20149 8.33 4.14925 8.555 4.1194 8.78C4.08955 9.005 4.07463 9.245 4.07463 9.5C4.07463 9.74 4.08955 9.9725 4.1194 10.1975C4.14925 10.4225 4.20149 10.6475 4.27612 10.8725L2.35075 12.335L3.22388 13.865L5.4403 12.92C5.76866 13.265 6.1306 13.5537 6.52612 13.7862C6.92164 14.0187 7.35075 14.195 7.81343 14.315L8.10448 16.7ZM9.04478 12.65C9.91045 12.65 10.6493 12.3425 11.2612 11.7275C11.8731 11.1125 12.1791 10.37 12.1791 9.5C12.1791 8.63 11.8731 7.8875 11.2612 7.2725C10.6493 6.6575 9.91045 6.35 9.04478 6.35C8.16418 6.35 7.42164 6.6575 6.81716 7.2725C6.21269 7.8875 5.91045 8.63 5.91045 9.5C5.91045 10.37 6.21269 11.1125 6.81716 11.7275C7.42164 12.3425 8.16418 12.65 9.04478 12.65Z" /></svg>';
            case 'view-color':
                return '<svg width="18" height="19" viewBox="0 0 18 19" ><path d="M9 18.5C7.77 18.5 6.6075 18.2638 5.5125 17.7912C4.4175 17.3187 3.46125 16.6737 2.64375 15.8562C1.82625 15.0387 1.18125 14.0825 0.70875 12.9875C0.23625 11.8925 0 10.73 0 9.5C0 8.255 0.24375 7.085 0.73125 5.99C1.21875 4.895 1.87875 3.9425 2.71125 3.1325C3.54375 2.3225 4.515 1.68125 5.625 1.20875C6.735 0.73625 7.92 0.5 9.18 0.5C10.38 0.5 11.5125 0.70625 12.5775 1.11875C13.6425 1.53125 14.5762 2.10125 15.3787 2.82875C16.1812 3.55625 16.8187 4.41875 17.2912 5.41625C17.7638 6.41375 18 7.49 18 8.645C18 10.37 17.475 11.6938 16.425 12.6163C15.375 13.5387 14.1 14 12.6 14H10.935C10.8 14 10.7063 14.0375 10.6538 14.1125C10.6013 14.1875 10.575 14.27 10.575 14.36C10.575 14.54 10.6875 14.7987 10.9125 15.1363C11.1375 15.4738 11.25 15.86 11.25 16.295C11.25 17.045 11.0437 17.6 10.6312 17.96C10.2188 18.32 9.675 18.5 9 18.5ZM4.05 10.4C4.44 10.4 4.7625 10.2725 5.0175 10.0175C5.2725 9.7625 5.4 9.44 5.4 9.05C5.4 8.66 5.2725 8.3375 5.0175 8.0825C4.7625 7.8275 4.44 7.7 4.05 7.7C3.66 7.7 3.3375 7.8275 3.0825 8.0825C2.8275 8.3375 2.7 8.66 2.7 9.05C2.7 9.44 2.8275 9.7625 3.0825 10.0175C3.3375 10.2725 3.66 10.4 4.05 10.4ZM6.75 6.8C7.14 6.8 7.4625 6.6725 7.7175 6.4175C7.9725 6.1625 8.1 5.84 8.1 5.45C8.1 5.06 7.9725 4.7375 7.7175 4.4825C7.4625 4.2275 7.14 4.1 6.75 4.1C6.36 4.1 6.0375 4.2275 5.7825 4.4825C5.5275 4.7375 5.4 5.06 5.4 5.45C5.4 5.84 5.5275 6.1625 5.7825 6.4175C6.0375 6.6725 6.36 6.8 6.75 6.8ZM11.25 6.8C11.64 6.8 11.9625 6.6725 12.2175 6.4175C12.4725 6.1625 12.6 5.84 12.6 5.45C12.6 5.06 12.4725 4.7375 12.2175 4.4825C11.9625 4.2275 11.64 4.1 11.25 4.1C10.86 4.1 10.5375 4.2275 10.2825 4.4825C10.0275 4.7375 9.9 5.06 9.9 5.45C9.9 5.84 10.0275 6.1625 10.2825 6.4175C10.5375 6.6725 10.86 6.8 11.25 6.8ZM13.95 10.4C14.34 10.4 14.6625 10.2725 14.9175 10.0175C15.1725 9.7625 15.3 9.44 15.3 9.05C15.3 8.66 15.1725 8.3375 14.9175 8.0825C14.6625 7.8275 14.34 7.7 13.95 7.7C13.56 7.7 13.2375 7.8275 12.9825 8.0825C12.7275 8.3375 12.6 8.66 12.6 9.05C12.6 9.44 12.7275 9.7625 12.9825 10.0175C13.2375 10.2725 13.56 10.4 13.95 10.4ZM9 16.7C9.135 16.7 9.24375 16.6625 9.32625 16.5875C9.40875 16.5125 9.45 16.415 9.45 16.295C9.45 16.085 9.3375 15.8375 9.1125 15.5525C8.8875 15.2675 8.775 14.84 8.775 14.27C8.775 13.64 8.9925 13.1375 9.4275 12.7625C9.8625 12.3875 10.395 12.2 11.025 12.2H12.6C13.59 12.2 14.4375 11.9113 15.1425 11.3337C15.8475 10.7563 16.2 9.86 16.2 8.645C16.2 6.83 15.5062 5.31875 14.1187 4.11125C12.7312 2.90375 11.085 2.3 9.18 2.3C7.14 2.3 5.4 2.9975 3.96 4.3925C2.52 5.7875 1.8 7.49 1.8 9.5C1.8 11.495 2.50125 13.1938 3.90375 14.5962C5.30625 15.9987 7.005 16.7 9 16.7Z" /></svg>';
            case 'view-overlay':
                return '<svg width="18" height="19" viewBox="0 0 18 19" ><path d="M4.5 15.5C4.91667 15.5 5.27083 15.3542 5.5625 15.0625C5.85417 14.7708 6 14.4167 6 14C6 13.5833 5.85417 13.2292 5.5625 12.9375C5.27083 12.6458 4.91667 12.5 4.5 12.5C4.08333 12.5 3.72917 12.6458 3.4375 12.9375C3.14583 13.2292 3 13.5833 3 14C3 14.4167 3.14583 14.7708 3.4375 15.0625C3.72917 15.3542 4.08333 15.5 4.5 15.5ZM4.5 6.5C4.91667 6.5 5.27083 6.35417 5.5625 6.0625C5.85417 5.77083 6 5.41667 6 5C6 4.58333 5.85417 4.22917 5.5625 3.9375C5.27083 3.64583 4.91667 3.5 4.5 3.5C4.08333 3.5 3.72917 3.64583 3.4375 3.9375C3.14583 4.22917 3 4.58333 3 5C3 5.41667 3.14583 5.77083 3.4375 6.0625C3.72917 6.35417 4.08333 6.5 4.5 6.5ZM4.5 11C4.91667 11 5.27083 10.8542 5.5625 10.5625C5.85417 10.2708 6 9.91667 6 9.5C6 9.08333 5.85417 8.72917 5.5625 8.4375C5.27083 8.14583 4.91667 8 4.5 8C4.08333 8 3.72917 8.14583 3.4375 8.4375C3.14583 8.72917 3 9.08333 3 9.5C3 9.91667 3.14583 10.2708 3.4375 10.5625C3.72917 10.8542 4.08333 11 4.5 11ZM13.5 15.5C13.9167 15.5 14.2708 15.3542 14.5625 15.0625C14.8542 14.7708 15 14.4167 15 14C15 13.5833 14.8542 13.2292 14.5625 12.9375C14.2708 12.6458 13.9167 12.5 13.5 12.5C13.0833 12.5 12.7292 12.6458 12.4375 12.9375C12.1458 13.2292 12 13.5833 12 14C12 14.4167 12.1458 14.7708 12.4375 15.0625C12.7292 15.3542 13.0833 15.5 13.5 15.5ZM13.5 6.5C13.9167 6.5 14.2708 6.35417 14.5625 6.0625C14.8542 5.77083 15 5.41667 15 5C15 4.58333 14.8542 4.22917 14.5625 3.9375C14.2708 3.64583 13.9167 3.5 13.5 3.5C13.0833 3.5 12.7292 3.64583 12.4375 3.9375C12.1458 4.22917 12 4.58333 12 5C12 5.41667 12.1458 5.77083 12.4375 6.0625C12.7292 6.35417 13.0833 6.5 13.5 6.5ZM2 18.5C1.45 18.5 0.979167 18.3042 0.5875 17.9125C0.195833 17.5208 0 17.05 0 16.5V2.5C0 1.95 0.195833 1.47917 0.5875 1.0875C0.979167 0.695833 1.45 0.5 2 0.5H16C16.55 0.5 17.0208 0.695833 17.4125 1.0875C17.8042 1.47917 18 1.95 18 2.5V16.5C18 17.05 17.8042 17.5208 17.4125 17.9125C17.0208 18.3042 16.55 18.5 16 18.5H2ZM2 16.5H16V2.5H2V16.5ZM13.5 11C13.9167 11 14.2708 10.8542 14.5625 10.5625C14.8542 10.2708 15 9.91667 15 9.5C15 9.08333 14.8542 8.72917 14.5625 8.4375C14.2708 8.14583 13.9167 8 13.5 8C13.0833 8 12.7292 8.14583 12.4375 8.4375C12.1458 8.72917 12 9.08333 12 9.5C12 9.91667 12.1458 10.2708 12.4375 10.5625C12.7292 10.8542 13.0833 11 13.5 11ZM9 6.5C9.41667 6.5 9.77083 6.35417 10.0625 6.0625C10.3542 5.77083 10.5 5.41667 10.5 5C10.5 4.58333 10.3542 4.22917 10.0625 3.9375C9.77083 3.64583 9.41667 3.5 9 3.5C8.58333 3.5 8.22917 3.64583 7.9375 3.9375C7.64583 4.22917 7.5 4.58333 7.5 5C7.5 5.41667 7.64583 5.77083 7.9375 6.0625C8.22917 6.35417 8.58333 6.5 9 6.5ZM9 15.5C9.41667 15.5 9.77083 15.3542 10.0625 15.0625C10.3542 14.7708 10.5 14.4167 10.5 14C10.5 13.5833 10.3542 13.2292 10.0625 12.9375C9.77083 12.6458 9.41667 12.5 9 12.5C8.58333 12.5 8.22917 12.6458 7.9375 12.9375C7.64583 13.2292 7.5 13.5833 7.5 14C7.5 14.4167 7.64583 14.7708 7.9375 15.0625C8.22917 15.3542 8.58333 15.5 9 15.5ZM9 11C9.41667 11 9.77083 10.8542 10.0625 10.5625C10.3542 10.2708 10.5 9.91667 10.5 9.5C10.5 9.08333 10.3542 8.72917 10.0625 8.4375C9.77083 8.14583 9.41667 8 9 8C8.58333 8 8.22917 8.14583 7.9375 8.4375C7.64583 8.72917 7.5 9.08333 7.5 9.5C7.5 9.91667 7.64583 10.2708 7.9375 10.5625C8.22917 10.8542 8.58333 11 9 11Z" /></svg>';
            case 'view-close-button':
                return '<svg width="18" height="19" viewBox="0 0 18 19" ><path d="M5.76 14L9 10.76L12.24 14L13.5 12.74L10.26 9.5L13.5 6.26L12.24 5L9 8.24L5.76 5L4.5 6.26L7.74 9.5L4.5 12.74L5.76 14ZM9 18.5C7.755 18.5 6.585 18.2638 5.49 17.7912C4.395 17.3187 3.4425 16.6775 2.6325 15.8675C1.8225 15.0575 1.18125 14.105 0.70875 13.01C0.23625 11.915 0 10.745 0 9.5C0 8.255 0.23625 7.085 0.70875 5.99C1.18125 4.895 1.8225 3.9425 2.6325 3.1325C3.4425 2.3225 4.395 1.68125 5.49 1.20875C6.585 0.73625 7.755 0.5 9 0.5C10.245 0.5 11.415 0.73625 12.51 1.20875C13.605 1.68125 14.5575 2.3225 15.3675 3.1325C16.1775 3.9425 16.8187 4.895 17.2912 5.99C17.7638 7.085 18 8.255 18 9.5C18 10.745 17.7638 11.915 17.2912 13.01C16.8187 14.105 16.1775 15.0575 15.3675 15.8675C14.5575 16.6775 13.605 17.3187 12.51 17.7912C11.415 18.2638 10.245 18.5 9 18.5ZM9 16.7C11.01 16.7 12.7125 16.0025 14.1075 14.6075C15.5025 13.2125 16.2 11.51 16.2 9.5C16.2 7.49 15.5025 5.7875 14.1075 4.3925C12.7125 2.9975 11.01 2.3 9 2.3C6.99 2.3 5.2875 2.9975 3.8925 4.3925C2.4975 5.7875 1.8 7.49 1.8 9.5C1.8 11.51 2.4975 13.2125 3.8925 14.6075C5.2875 16.0025 6.99 16.7 9 16.7Z" /></svg>';
            case 'view-trigger':
                return '<svg width="18" height="17" viewBox="0 0 18 17" ><path d="M2 16.5V9.5H0V7.5H6V9.5H4V16.5H2ZM2 5.5V0.5H4V5.5H2ZM6 5.5V3.5H8V0.5H10V3.5H12V5.5H6ZM8 16.5V7.5H10V16.5H8ZM14 16.5V13.5H12V11.5H18V13.5H16V16.5H14ZM14 9.5V0.5H16V9.5H14Z" /></svg>';
            case 'view-component':
                return '<svg width="16" height="15" viewBox="0 0 16 15" ><path d="M3 5.83333H10.5V3.33333H3V5.83333ZM2.16667 15C1.70833 15 1.31597 14.8368 0.989583 14.5104C0.663194 14.184 0.5 13.7917 0.5 13.3333V1.66667C0.5 1.20833 0.663194 0.815972 0.989583 0.489583C1.31597 0.163194 1.70833 0 2.16667 0H13.8333C14.2917 0 14.684 0.163194 15.0104 0.489583C15.3368 0.815972 15.5 1.20833 15.5 1.66667V13.3333C15.5 13.7917 15.3368 14.184 15.0104 14.5104C14.684 14.8368 14.2917 15 13.8333 15H2.16667ZM2.16667 13.3333H13.8333V1.66667H2.16667V13.3333Z" /></svg>';
            case 'view-layout':
                return '<svg width="16" height="17" viewBox="0 0 16 17" ><path d="M1.97222 16.25C1.49861 16.25 1.09317 16.0814 0.755903 15.7441C0.418634 15.4068 0.25 15.0014 0.25 14.5278V2.47222C0.25 1.99861 0.418634 1.59317 0.755903 1.2559C1.09317 0.918634 1.49861 0.75 1.97222 0.75H14.0278C14.5014 0.75 14.9068 0.918634 15.2441 1.2559C15.5814 1.59317 15.75 1.99861 15.75 2.47222V14.5278C15.75 15.0014 15.5814 15.4068 15.2441 15.7441C14.9068 16.0814 14.5014 16.25 14.0278 16.25H1.97222ZM1.97222 14.5278H7.13889V2.47222H1.97222V14.5278ZM8.86111 14.5278H14.0278V8.5H8.86111V14.5278ZM8.86111 6.77778H14.0278V2.47222H8.86111V6.77778Z" /></svg>';
            case 'view-transition':
                return '<svg width="18" height="19" viewBox="0 0 18 19" ><path d="M6.3 18.5C5.43 18.5 4.6125 18.335 3.8475 18.005C3.0825 17.675 2.415 17.225 1.845 16.655C1.275 16.085 0.825 15.4175 0.495 14.6525C0.165 13.8875 0 13.07 0 12.2C0 10.985 0.315 9.875 0.945 8.87C1.575 7.865 2.4 7.1 3.42 6.575C3.72 5.99 4.09125 5.47625 4.53375 5.03375C4.97625 4.59125 5.49 4.22 6.075 3.92C6.57 2.9 7.3275 2.075 8.3475 1.445C9.3675 0.815 10.485 0.5 11.7 0.5C12.57 0.5 13.3875 0.665 14.1525 0.995C14.9175 1.325 15.585 1.775 16.155 2.345C16.725 2.915 17.175 3.5825 17.505 4.3475C17.835 5.1125 18 5.93 18 6.8C18 8.075 17.685 9.2 17.055 10.175C16.425 11.15 15.6 11.9 14.58 12.425C14.28 13.01 13.9088 13.5238 13.4663 13.9663C13.0238 14.4088 12.51 14.78 11.925 15.08C11.4 16.1 10.635 16.925 9.63 17.555C8.625 18.185 7.515 18.5 6.3 18.5ZM6.3 16.7C6.795 16.7 7.27125 16.625 7.72875 16.475C8.18625 16.325 8.61 16.1 9 15.8C8.13 15.8 7.3125 15.635 6.5475 15.305C5.7825 14.975 5.115 14.525 4.545 13.955C3.975 13.385 3.525 12.7175 3.195 11.9525C2.865 11.1875 2.7 10.37 2.7 9.5C2.4 9.89 2.175 10.3138 2.025 10.7712C1.875 11.2288 1.8 11.705 1.8 12.2C1.8 12.83 1.92 13.415 2.16 13.955C2.4 14.495 2.7225 14.9675 3.1275 15.3725C3.5325 15.7775 4.005 16.1 4.545 16.34C5.085 16.58 5.67 16.7 6.3 16.7ZM9 14C9.495 14 9.97875 13.925 10.4513 13.775C10.9237 13.625 11.355 13.4 11.745 13.1C10.86 13.1 10.035 12.9312 9.27 12.5938C8.505 12.2562 7.8375 11.8025 7.2675 11.2325C6.6975 10.6625 6.24375 9.995 5.90625 9.23C5.56875 8.465 5.4 7.64 5.4 6.755C5.1 7.145 4.875 7.57625 4.725 8.04875C4.575 8.52125 4.5 9.005 4.5 9.5C4.5 10.13 4.61625 10.715 4.84875 11.255C5.08125 11.795 5.4075 12.2675 5.8275 12.6725C6.2325 13.0925 6.705 13.4187 7.245 13.6512C7.785 13.8837 8.37 14 9 14ZM11.7 11.3C11.97 11.3 12.2288 11.2775 12.4762 11.2325C12.7238 11.1875 12.975 11.12 13.23 11.03C13.56 10.13 13.6087 9.26375 13.3763 8.43125C13.1438 7.59875 12.7425 6.8975 12.1725 6.3275C11.6025 5.7575 10.9012 5.35625 10.0687 5.12375C9.23625 4.89125 8.37 4.94 7.47 5.27C7.38 5.525 7.3125 5.77625 7.2675 6.02375C7.2225 6.27125 7.2 6.53 7.2 6.8C7.2 7.43 7.31625 8.015 7.54875 8.555C7.78125 9.095 8.1075 9.5675 8.5275 9.9725C8.9325 10.3925 9.405 10.7188 9.945 10.9513C10.485 11.1838 11.07 11.3 11.7 11.3ZM15.3 9.545C15.6 9.155 15.825 8.72375 15.975 8.25125C16.125 7.77875 16.2 7.295 16.2 6.8C16.2 6.17 16.0837 5.585 15.8513 5.045C15.6188 4.505 15.2925 4.0325 14.8725 3.6275C14.4675 3.2075 13.995 2.88125 13.455 2.64875C12.915 2.41625 12.33 2.3 11.7 2.3C11.175 2.3 10.6838 2.375 10.2262 2.525C9.76875 2.675 9.345 2.9 8.955 3.2C9.84 3.2 10.665 3.36875 11.43 3.70625C12.195 4.04375 12.8625 4.4975 13.4325 5.0675C14.0025 5.6375 14.4562 6.305 14.7937 7.07C15.1312 7.835 15.3 8.66 15.3 9.545Z" /></svg>';
        }
    }

    // editor area
    $.pixeEditorArea = {

        emptyHtml: function(){
            var html  = '<div class="pixe-editor-empty" >';
            if( pixeData.type == 'template_part' ){
                html += '<div class="pixe-editor-empty-type" >';
                html += '<div class="pixe-title" >Template Part</div>';
                switch(pixeData.part){
                    case 'header': html += '<div class="pixe-text" >Header</div>'; break;
                    case 'footer': html += '<div class="pixe-text" >Footer</div>'; break;
                    case 'popup': html += '<div class="pixe-text" >Popup</div>'; break;
                    case 'synced_block': html += '<div class="pixe-text" >Synced Block</div>'; break;
                    case 'post_template': html += '<div class="pixe-text" >Post Template</div>'; break;
                    case 'taxonomy_template': html += '<div class="pixe-text" >Taxonomy Template</div>'; break;
                }
                html += '</div>';
            }
            html += '<div class="pixe-editor-empty-action" >';
            html += '<div class="pixe-action pixe-new-element" >' + $.pixeGetAdminIcon('plus') + '</div>';
            html += '<div class="pixe-action pixe-new-container" >' + $.pixeGetAdminIcon('layout') + '</div>';
            html += '</div>';
            html += '<div class="pixe-editor-empty-caption" >' + $.pixeGetAdminIcon('magic') + 'Ready for content</div>';
            html += '<div class="pixe-editor-empty-text" >Drop items here to start building</div>';
            if( (pixeData.part == 'post_template' || pixeData.part == 'taxonomy_template') && pixeData.templateLayout == 'custom' ){
                html += '<div class="pixe-editor-empty-description" >With the Custom Layout, you must use \'Query Column\' for each post to cover query items such as Featured Image, Post Title, Post Meta, etc.</div>';
            }else{
                html += '<div class="pixe-editor-empty-description" >Use + to add an element or container, or the <strong>library icon</strong> to browse prebuilt blocks and sites.</div>';
            }
            html += '</div>';

            return html;
        },

        noTheContent: function(){

            var html  = '<div class="pixe-editor-no-the-content" >';
            html += '<div class="pixe-admin-content" >';
            if( $(document.body).hasClass('post-type-archive-product') ){
                html += '<h3 class="pixe-admin-title" >Editing Unavailable</h3>';
                html += '<div class="pixe-admin-text" >Please note that this page is currently set as the <strong>Shop page</strong> in your WooCommerce settings. Therefore, it cannot be edited directly here. To modify its layout, create a <strong>WooCommerce Shop template</strong> in the <strong>PixeBuilder Templates</strong> section, then assign it under <strong>Assign Template → Archives → Shop (WooCommerce)</strong>. For more details, please refer to the documentation.</div>';
                html += '<a class="pixe-admin-button" href="#" >Edit Template</a>';
            }else{
                html += '<h3 class="pixe-admin-title" >Editing Unavailable</h3>';
                html += '<div class="pixe-admin-text" >This page\'s template doesn\'t include the "<strong>Post Content</strong>" item, so the page builder cannot be used here. Please add the "<strong>Post Content</strong>" item to the template first to enable editing.</div>';
                html += '<a class="pixe-admin-button" href="#" >Edit Template</a>';
            }
            html += '</div>';
            html += '</div>';

            var content = $(html);
            content.on('click', '.pixe-admin-button', function(){
                $.pixeEditor.setParentStatus({ event: 'template', action: 'edit' });
            });

            return content;
        },

        init: function(){
            var t = this;

            // init
            t.previewThumbnail = $(document.body).hasClass('pixe-preview-thumbnail');
            window.pixeEditor.addClass('pixe-active-editor');
            window.pixeEditor.wrap('<div class="pixe-active-editor-container"></div>');

            if( pixeData.type == 'template_part' || pixeData.type == 'template' ){

                // grayed out
                if( !t.previewThumbnail ){
                    t.templateSettings = $('<div class="pixe-editor-template-settings pixe-grayed-out" ></div>');
                    t.templateSettings.insertBefore(window.pixeEditor.closest('.pixe-template-container'));
                }

                if( pixeData.type == 'template' ){
                    t.templateEditor();
                }else{
                    switch(pixeData.part){
                        case 'header':
                            t.headerEditor();
                            break;
                        case 'footer':
                            t.footerEditor();
                            break;
                        case 'popup':
                            t.popupEditor();
                            break;
                        case 'synced_block':
                            t.syncedBlockEditor();
                            break;
                        case 'post_template':
                        case 'taxonomy_template':
                            pixeData.templateLayout = pixeData.editorSettings['layout'];

                            if( pixeData.templateLayout == 'grid' ){
                                t.postTemplateGridEditor();
                            }else if( pixeData.templateLayout == 'custom' ){
                                t.postTemplateCustomEditor();
                            }
                            break;
                    }
                }
            }

        },

        // template editor
        templateEditorPartSelector(type, editor){
            var t = this;
            var settings = pixeData.editorSettings;
            var partId = 0;
            var partObject;
            if( settings.template && settings.template[type] ){
                partId = settings.template[type];
            }
            
            var html  = '<div class="pixe-template-part-selector" >';
                html += '<div class="pixe-form-content" >';
            switch(type){
                case 'header':
                case 'tablet-header':
                case 'mobile-header':
                    var titleLabel = '', buttonLabel = '';
                    if( type == 'header' ){
                        titleLabel = 'Select Header';
                        buttonLabel = 'Edit Header';
                    }else if( type == 'tablet-header' ){
                        titleLabel = 'Select Tablet Header';
                        buttonLabel = 'Edit Tablet Header';
                    }else if( type == 'mobile-header' ){
                        titleLabel  = 'Select Mobile Header';
                        buttonLabel  = 'Edit Mobile Header';
                    }

                    html += '<label>' + titleLabel + '</label>';
                    html += $.pixeCombobox({
                        slug: type,
                        options: $.pixeComboboxOption.headerTemplate(),
                        width: 186,
                        value: partId
                    });
                    html += '<div class="pixe-edit-button" ><span class="pixe-svg-preset pixe-svg-edit-white" ></span>' + buttonLabel + '</div>';
                    partObject = pixeData.headerTemplate;
                    break;
                
                case 'footer':
                case 'tablet-footer':
                case 'mobile-footer':
                    var titleLabel = '', buttonLabel = '';
                    if( type == 'footer' ){
                        titleLabel = 'Select Footer';
                        buttonLabel = 'Edit Footer';
                    }else if( type == 'tablet-footer' ){
                        titleLabel = 'Select Tablet Footer';
                        buttonLabel = 'Edit Tablet Footer';
                    }else if( type == 'mobile-footer' ){
                        titleLabel  = 'Select Mobile Footer';
                        buttonLabel  = 'Edit Mobile Footer';
                    }

                    html += '<label>' + titleLabel + '</label>';
                    html += $.pixeCombobox({
                        slug: type,
                        options: $.pixeComboboxOption.footerTemplate(),
                        width: 186,
                        value: partId
                    });
                    html += '<div class="pixe-edit-button" ><span class="pixe-svg-preset pixe-svg-edit-white" ></span>' + buttonLabel + '</div>';
                    partObject = pixeData.footerTemplate;
                    break;
            }
            html += '</div>';
            html += '</div>';

            var partSelector = $(html);
            partSelector.appendTo(editor);

            // bind
            partSelector.pixeCombobox({
                onShow: function(){
                    partSelector.addClass('pixe-active');
                },
                onClose: function(){
                    partSelector.removeClass('pixe-active');
                }
            });
            partSelector.on('change', '.pixe-combobox', function(){
                var id = $(this).data('value');
                
                // create history action
                var actionHistory = new $.pixeEditHistory(pixeData.editorSettings, { type: 'object' });

                // set data
                if( id && !pixeData.editorSettings['template'] ){
                    pixeData.editorSettings['template'] = {};
                }
                $.pixeSetData(pixeData.editorSettings['template'], type, id);

                // add to history
                actionHistory.onChange('template', 'Template Component Edited', {
                    onChange: function(){ t.templateEditorPart(type); }
                });

                // switch template
                t.templateEditorPart(type);
            });
            partSelector.on('click', '.pixe-edit-button', function(){
                if( partObject ){
                    if( !partId ){
                        switch(type){
                            case 'header':
                            case 'tablet-header':
                            case 'mobile-header':
                                partId = pixeData.defaultHeader;
                                break;
                            case 'footer':
                            case 'tablet-footer':
                            case 'mobile-footer':
                                partId = pixeData.defaultFooter;
                                break;
                        }
                    }

                    for( var i in partObject ){
                        if( partObject[i].id == partId ){
                            window.open(partObject[i]['edit-url']);
                            break;
                        }
                    }
                }
            });
        },
        templateEditorPart: function(type){
            var t = this;
            var settings = pixeData.editorSettings;
            var partId = '';
            if( settings.template && settings.template[type] ){
                partId = settings.template[type];
            }

            var ajaxData = $.pixeGetAjaxData({
                action: 'pixe_get_template_part',
                type: type,
                id: partId
            });

            // render template data
            $.pixeAjax({
                ajaxData: ajaxData,
                onSuccess: function(data){
                    var content = $.pixeEditor.render(data.content, true, true);

                    switch(type){
                        case 'header':
                            t.header.empty();
                            if( content.length ){
                                t.header.append(content);
                                t.header.attr('data-header-id', partId);
                                t.headerEditorStyle(t.header, '[data-header-id="' + partId + '"]', data.settings);
                                t.templateEditorPartSelector(type, t.header);
                                t.templateEditorStyle();
                            }
                            
                            t.header.trigger('pixeload');
                            break;
                        case 'tablet-header':
                            t.headerTablet.empty().append(content);
                            t.headerTablet.attr('data-header-id', partId);
                            t.headerEditorStyle(t.headerTablet, '[data-header-id="' + partId + '"]', data.settings);
                            t.templateEditorPartSelector(type, t.headerTablet);
                            t.templateEditorStyle();
                            break;
                        case 'mobile-header':
                            t.headerMobile.empty().append(content);
                            t.headerMobile.attr('data-header-id', partId);
                            t.headerEditorStyle(t.headerMobile, '[data-header-id="' + partId + '"]', data.settings);
                            t.templateEditorPartSelector(type, t.headerMobile);
                            t.templateEditorStyle();
                            break;
                        case 'footer':
                            t.footer.empty().append(content);
                            t.footer.attr('data-footer-id', partId);
                            t.templateEditorPartSelector(type, t.footer);
                            t.templateEditorStyle();
                            break;
                        case 'tablet-footer':
                            t.footerTablet.empty().append(content);
                            t.footerTablet.attr('data-footer-id', partId);
                            t.templateEditorPartSelector(type, t.footerTablet);
                            t.templateEditorStyle();
                            break;
                        case 'mobile-footer':
                            t.footerMobile.empty().append(content);
                            t.footerMobile.attr('data-footer-id', partId);
                            t.templateEditorPartSelector(type, t.footerMobile);
                            t.templateEditorStyle();
                            break;
                    }
                }
            });
        },
        templateEditorStyle: function(){
            var t = this;
            var styleTag = window.pixeEditor.children('style');
            if( !styleTag.length ){ 
                styleTag = $('<style></style>');
                styleTag.appendTo(window.pixeEditor);
            }

            var css = '', tabletCss = '', mobileCss = '';
            var extraCss = { desktop: '', tablet: '', mobile: '' };
            var settings = pixeData.editorSettings;

            // layout
            css += $.pixeGetLayoutCss(settings.layout);

            // header device display
            var template = settings['template']? settings['template']: {};
            var resetSideHeader = '.pixe-template-content, .pixe-footer.pixe-style-fixed{ padding: 0; }';
            if( template['tablet-header'] ){
                extraCss.tablet += '.pixe-header-desktop{ display: none; } .pixe-header-tablet{ display: flex; }';
                extraCss.tablet += resetSideHeader;
                resetSideHeader = '';
            }
            if( template['mobile-header'] ){
                extraCss.mobile += '.pixe-header-desktop, .pixe-header-tablet{ display: none; } .pixe-header-mobile{ display: flex; }';
                extraCss.mobile += resetSideHeader;
            }

            // footer device display
            if( template['tablet-footer'] ){
                extraCss.tablet += '.pixe-footer-desktop{ display: none; } .pixe-footer-tablet{ display: flex; }';
            }
            if( template['mobile-footer'] ){
                extraCss.mobile += '.pixe-footer-desktop, .pixe-footer-tablet{ display: none; } .pixe-footer-mobile{ display: flex; }';
            }
            
            // add and set css
            $.pixeAddCss(window.pixeEditor, 'layout',  css);
            $.pixeAddCss(window.pixeEditor, 'layout',  tabletCss, 'tablet');
            $.pixeAddCss(window.pixeEditor, 'layout',  mobileCss, 'mobile');

            // render style
            var style = window.pixeEditor.data('style');
            $.pixeRenderCss(styleTag, style, extraCss);
            $(window).trigger('resizewidth');
        },
        templateEditor: function(){
            var t = this;

            t.header = $('<div class="pixe-editor pixe-header pixe-header-desktop" ></div>');
            t.headerTablet = $('<div class="pixe-editor pixe-header pixe-header-tablet" ></div>');
            t.headerMobile = $('<div class="pixe-editor pixe-header pixe-header-mobile" ></div>');
            t.footer = $('<div class="pixe-editor pixe-footer-desktop" ></div>');
            t.footerTablet = $('<div class="pixe-editor pixe-footer-tablet" ></div>');
            t.footerMobile = $('<div class="pixe-editor pixe-footer-mobile" ></div>');

            var activeEditor = window.pixeEditor.parent('.pixe-active-editor-container');

            t.header.insertBefore(activeEditor);
            t.headerTablet.insertBefore(activeEditor);
            t.headerMobile.insertBefore(activeEditor);
            t.footer.insertAfter(activeEditor);
            t.footerTablet.insertAfter(activeEditor);
            t.footerMobile.insertAfter(activeEditor);

            // init
            t.templateEditorPart('header');
            t.templateEditorPart('tablet-header');
            t.templateEditorPart('mobile-header');
            t.templateEditorPart('footer');
            t.templateEditorPart('tablet-footer');
            t.templateEditorPart('mobile-footer');
            t.templateEditorStyle();

            // settings & action
            if( !t.templateSettings ) return;
            t.templateSettings.append('<div class="pixe-action" data-action="component" >' + $.pixeEditorElementIcon('view-component') + '<span>Components</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="layout" >' + $.pixeEditorElementIcon('view-layout') + '<span>Layout Settings</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="transition" >' + $.pixeEditorElementIcon('view-transition') + '<span>Page Transition</span></div>');
            
            if( $.pixeStyleSelectorOption['template-admin-settings'] ){
                t.templateSettings.append('<div class="pixe-action" data-action="admin" >Admin Settings</div>');
            }
            
            // action
            t.templateSettings.on('click', '.pixe-action', function(){
                var button = $(this);
                var action = $(this).attr('data-action');
                var ssSlug, ssType, ssAction;

                // create history action
                var actionHistory = new $.pixeEditHistory(pixeData.editorSettings, { type: 'object' });
                
                if( action == 'component' ){
                    ssSlug = 'template';
                    ssType = 'template-component';
                    ssAction = 'Template Component Edited'
                }else if( action == 'layout' ){
                    ssSlug = 'layout';
                    ssType = 'template-layout';
                    ssAction = 'Template Layout Edited';
                }else if( action == 'transition' ){
                    ssSlug = 'transition';
                    ssType = 'page-transition';
                    ssAction = 'Template Transition Edited';
                }else if( action == 'admin' ){
                    ssSlug = 'admin';
                    ssType = 'template-admin-settings';
                }

                new $.pixeStyleSelector({
                    obj: pixeData.editorSettings,
                    slug: ssSlug,
                    type: ssType,
                    target: button,
                    onChange: function(value, subtype){

                        // add to history
                        actionHistory.onChange(ssSlug, ssAction, {
                            onChange: function(){
                                if( ssSlug == 'template' ){
                                    t.templateEditorPart(subtype);
                                }else{
                                    t.templateEditorStyle();
                                }
                            }
                        });

                        // render
                        if( ssSlug == 'template' ){
                            t.templateEditorPart(subtype);
                        }else{
                            t.templateEditorStyle();
                        }
                    }
                });
            });

            // header script
            t.header.on('load resize pixeload', function(){
                if( $(this).hasClass('pixe-bottom-header') ){
                    $(document.body).css({'padding-bottom': $(this).outerHeight()});
                }else{
                    $(document.body).css({'padding-bottom': ''});
                }
            });
        },

        // display style selector options
        getEditorSettings: function(settings){
            settings = $.extend({
                button: undefined,
                slug: '',
                type: '',
                label: '',
                onChange: undefined
            }, settings);

            var prevData = $.pixeClone(pixeData.editorSettings[settings.slug]);

            new $.pixeStyleSelector({
                obj: pixeData.editorSettings,
                slug: settings.slug,
                type: settings.type,
                target: settings.button,
                onChange: function(value, subtype){

                    // add to history
                    var action = $.pixeHistory.createAction(undefined, 'object', settings.slug, settings.label);
                    $.pixeHistory.setObjectActionStep(action, {
                        item: pixeData.editorSettings, 
                        slug: settings.slug,
                        value: prevData
                    }, true);
                    $.pixeHistory.setObjectActionStep(action, {
                        item: pixeData.editorSettings, 
                        slug: settings.slug,
                        value: value
                    });

                    // on change event
                    if( settings.onChange ){
                        settings.onChange(value, subtype);
                    }

                    // add history action
                    $.pixeHistory.addAction(action);

                    // update prev data
                    prevData = $.pixeClone(pixeData.editorSettings[settings.slug]);
                }
            });
        },

        // post template editor
        postTemplateGridColumn: function(queryColumn){
            var view = pixeData.editorSettings['view'];
            view = view? view: {};

            var col = parseInt(view['column']);
            col = col? col: 3;

            // remove old one
            window.pixeEditor.children('.pixe-preview-element').remove();

            // duplicate column
            if( col > 1 && view['column-simulation'] != 'no' ){
                var clone = queryColumn.clone(false);
                clone.addClass('pixe-preview-element');
                clone.find('.pixe-column').removeClass('pixe-empty').addClass('pixe-preview-element');
                clone.find('style, script').remove();
                clone.find('.pixe-column-toolbar, .pixe-column-area, .pixe-column-resize').remove();
                clone.find('.pixe-item-toolbar, .pixe-item-area, .pixe-item-padding-resize').remove();

                for( var i = 0; i < col - 1; i++ ){
                    window.pixeEditor.append(clone.clone());
                }
            }

        },
        postTemplateGridStyle: function(){
            var t = this;
            if( !t.style ){ 
                t.style = $('<style></style>'); 
                t.style.appendTo(document.body);
            }

            var css = '';
            var view = pixeData.editorSettings['view'];
            view = view? view: {};

            // view style
            css += $.pixeSetCss(':root', {
                '--pixe--body--background': $.pixeGetCss('background', view['background-color'], false),
                '--pixe--content--background': $.pixeGetCss('background', view['background-color'], false)
            });
            css += $.pixeSetCss('#pixe-editor', {
                'flex-wrap': 'nowrap',
                'padding': view['padding'],
                'gap': view['gap']? view['gap']: '30px'
            });
            css += '#pixe-editor > .pixe-column{ flex-shrink: 0; }';
            
            t.style.html(css);
        },
        postTemplateGridEditor: function(){
            var t = this;
            $.pixeEditorEvents.contentinit = true;
            $.pixeEditorEvents.contentchange = true;
            $.pixeEditorEvents.visualchange = true;

            // init
            var queryColumn;
            window.pixeEditor.on('contentinit contentchange visualchange', function(){
                queryColumn = window.pixeEditor.children().first();
                t.postTemplateGridStyle();
                t.postTemplateGridColumn(queryColumn);
            });

            // settings & action
            if( !t.templateSettings ) return;
            t.templateSettings.append('<div class="pixe-action" data-action="view" >' + $.pixeEditorElementIcon('view-settings') + '<span>View Settings</span></div>');
            if( $.pixeStyleSelectorOption['template-part-admin-settings'] ){
                t.templateSettings.append('<div class="pixe-action" data-action="admin" >Admin Settings</div>');
            }
            t.templateSettings.on('click', '.pixe-action', function(){
                var button = $(this);
                var action = $(this).attr('data-action');
                var ssSlug, ssType;

                if( action == 'view' ){
                    ssSlug = 'view';
                    ssType = 'post-template-view';
                }else if( action == 'admin' ){
                    ssSlug = 'admin';
                    ssType = 'template-part-admin-settings';
                }

                // check query column size
                if( !pixeData.editorSettings.view ){
                    pixeData.editorSettings.view = {};
                }
                pixeData.editorSettings.view.width = queryColumn.data('settings').width;
                
                // create history action
                var actionHistory = new $.pixeEditHistory(pixeData.editorSettings, { type: 'object' });
                var widthHistory = $.pixeDebounce(function(width){  
                    $.pixeColumn.setWidth(queryColumn, width);
                });

                new $.pixeStyleSelector({
                    obj: pixeData.editorSettings,
                    slug: ssSlug,
                    type: ssType,
                    target: button,
                    onChange: function(value, subtype){
                        if( subtype == 'width' ){
                            widthHistory(value['width']);
                        }else{
                            var displayText = ssSlug + ' | ' + subtype;

                            // add to history
                            actionHistory.onChange(ssSlug, displayText, {
                                onChange: function(){ 
                                    t.postTemplateGridStyle();
                                    if( ['column-simulation', 'column'].indexOf(subtype) >= 0 ){
                                        t.postTemplateGridColumn(queryColumn);
                                    }  
                                }
                            });
    
                            t.postTemplateGridStyle();
                            if( ['column-simulation', 'column'].indexOf(subtype) >= 0 ){
                                t.postTemplateGridColumn(queryColumn);
                            }
                        }
                    }   
                });
            });
        },
        postTemplateCustomStyle: function(){
            var t = this;
            var styleTag = window.pixeEditor.children('style');
            if( !styleTag.length ){ 
                styleTag = $('<style></style>');
                styleTag.appendTo(window.pixeEditor);
            }

            var css = '';
            var settings = pixeData.editorSettings;

            css += $.pixeGetLayoutCss(settings.view);

            // render style
            styleTag.empty().append(css);
        },
        postTemplateCustomEditor: function(){
            var t = this;

            t.postTemplateCustomStyle();

            // settings & action
            if( !t.templateSettings ) return;
            t.templateSettings.append('<div class="pixe-action" data-action="view" >' + $.pixeEditorElementIcon('view-settings') + '<span>View Settings</span></div>');
            if( $.pixeStyleSelectorOption['template-part-admin-settings'] ){
                t.templateSettings.append('<div class="pixe-action" data-action="admin" >Admin Settings</div>');
            }
            // event
            t.templateSettings.on('click', '.pixe-action', function(){
                var button = $(this);
                var action = $(this).attr('data-action');
                var ssSlug, ssType;

                if( action == 'view' ){
                    ssSlug = 'view';
                    ssType = 'template-view-settings';
                }else if( action == 'admin' ){
                    ssSlug = 'admin';
                    ssType = 'template-part-admin-settings';
                }
                
                // create history action
                var actionHistory = new $.pixeEditHistory(pixeData.editorSettings, { type: 'object' });

                new $.pixeStyleSelector({
                    obj: pixeData.editorSettings,
                    slug: ssSlug,
                    type: ssType,
                    target: button,
                    onChange: function(value, subtype){
                        var displayText = ssSlug + ' | ' + subtype;

                        // add to history
                        actionHistory.onChange(ssSlug, displayText, {
                            onChange: function(){ t.postTemplateCustomStyle(); }
                        });

                        // render style
                        t.postTemplateCustomStyle();
                    }
                });
            });

        },

        // header editor
        headerEditorStyle: function(editor, id, settings){
            var t = this;
            var styleTag = editor.children('style');
            if( !styleTag.length ){ 
                styleTag = $('<style></style>');
                styleTag.appendTo(editor);
            }

            var css = '';
            var extraCss = { desktop: '' };
            var isSticky = false;
            var isSideHeader = false;
            var isBottomHeader = false;

            editor.removeClass('pixe-transparent-header pixe-bottom-header pixe-side-header');

            if( settings && settings.header ){
                if( settings.header.position ){

                    // transparent
                    if( settings.header.position == 'top-transparent' ){
                        editor.addClass('pixe-transparent-header');
                        css += id + '{ position: absolute; top: 0; left: 0px; right: 0px; z-index: 100; background: transparent; }';
                        if( settings.header.mode ){
                            isSticky = true;
                        }
    
                    // bottom
                    }else if( settings.header.position == 'bottom' ){
                        editor.addClass('pixe-bottom-header');
                        css += id + '{ position: fixed;  bottom: 0; left: 0px; right: 0px; z-index: 100; }';
                        isBottomHeader = true;
    
                    // left
                    }else if( settings.header.position == 'left' ){
                        var width = settings.header['width']? settings.header['width']: '350px';
                        var bgColor = settings.header['background-color']? settings.header['background-color']: '#fff';
                        var alignContent = settings.header['align-content']? settings.header['align-content']: 'flex-start';

                        editor.addClass('pixe-side-header');
                        css += $.pixeSetCss(id + '.pixe-side-header', {
                            'width': width,
                            'padding': settings.header['padding'],
                            'background-color': bgColor,
                            'align-content': alignContent,
                            'custom': 'position: absolute; left: 0px; top: 0; z-index: 100;' + $.pixeGetBgImageCss(settings.header['background-image']),
                        });
                        css += $.pixeSetCss('.pixe-template-content, .pixe-footer.pixe-style-fixed', {
                            'padding-left': width 
                        });
                        if( !editor.hasClass('pixe-header-desktop') ){
                            extraCss.desktop += id + '.pixe-side-header{ position: relative; margin-left: 0px; }';
                            extraCss.desktop += '.pixe-template-content{ padding-left: 0px; }';
                        }
                        isSideHeader = true;
    
                    // right
                    }else if( settings.header.position == 'right' ){
                        var width = settings.header['width']? settings.header['width']: '350px';
                        var bgColor = settings.header['background-color']? settings.header['background-color']: '#fff';
                        var alignContent = settings.header['align-content']? settings.header['align-content']: 'flex-start';

                        editor.addClass('pixe-side-header');
                        css += $.pixeSetCss(id + '.pixe-side-header', {
                            'width': width,
                            'padding': settings.header['padding'],
                            'background-color': bgColor,
                            'align-content': alignContent,
                            'custom': 'position: absolute; right: 0px; top: 0; z-index: 100;' + $.pixeGetBgImageCss(settings.header['background-image']),
                        });
                        css += $.pixeSetCss('.pixe-template-content, .pixe-footer.pixe-style-fixed', {
                            'padding-right': width 
                        });
                        if( !editor.hasClass('pixe-header-desktop') ){
                            extraCss.desktop += id + '.pixe-side-header{ position: relative; margin-right: 0px; }';
                            extraCss.desktop += '.pixe-template-content{ padding-right: 0px; }';
                        }
                        isSideHeader = true;
                    }
                }else if( settings.header.mode ){
                    isSticky = true;
                }
            }

            // header dependency
            if( isSticky ){
                editor.addClass('pixe-with-sticky');
                $.pixeAddDependency(editor, 'sticky-header');
            }else{
                editor.removeClass('pixe-with-sticky');
                $.pixeAddDependency(editor, 'sticky-header', false);
            }
            if( isSideHeader ){
                $.pixeAddDependency(editor, 'side-header');
            }else{
                $.pixeAddDependency(editor, 'side-header', false);
            }
            if( isBottomHeader ){
                $.pixeAddDependency(editor, 'bottom-header');
            }else{
                $.pixeAddDependency(editor, 'bottom-header', false);
            }

            // add and set css
            $.pixeAddCss(editor, 'header',  css);

            // view settings
            if( pixeData.type == 'template_part' && pixeData.part == 'header' ){
                extraCss.desktop += $.pixeGetLayoutCss(settings.view);
            }

            // render style
            var style = editor.data('style');
            $.pixeRenderCss(styleTag, style, extraCss);
            $(window).trigger('resizewidth');
        },
        headerEditor: function(){
            var t = this;

            var id = '[data-header-id="' + pixeData.id + '"]';
            window.pixeEditor.addClass('pixe-header');
            window.pixeEditor.attr('data-header-id', pixeData.id);
            t.headerEditorStyle(window.pixeEditor, id, pixeData.editorSettings);

            // settings & action
            if( !t.templateSettings ) return;
            t.templateSettings.append('<div class="pixe-action" data-action="header" >' + $.pixeEditorElementIcon('view-layout') + '<span>Header Settings</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="view" >' + $.pixeEditorElementIcon('view-settings') + '<span>View Settings</span></div>');
            
            if( $.pixeStyleSelectorOption['template-part-admin-settings'] ){
                t.templateSettings.append('<div class="pixe-action" data-action="admin" >Admin Settings</div>');
            }

            // event
            t.templateSettings.on('click', '.pixe-action', function(){
                var button = $(this);
                var action = $(this).attr('data-action');
                var ssSlug, ssType;

                // create history action
                var actionHistory = new $.pixeEditHistory(pixeData.editorSettings, { type: 'object' });

                if( action == 'header' ){
                    ssSlug = 'header';
                    ssType = 'header-settings';
                }else if( action == 'view' ){
                    ssSlug = 'view';
                    ssType = 'template-view-settings';
                }else if( action == 'admin' ){
                    ssSlug = 'admin';
                    ssType = 'template-part-admin-settings';
                }

                new $.pixeStyleSelector({
                    obj: pixeData.editorSettings,
                    slug: ssSlug,
                    type: ssType,
                    target: button,
                    onChange: function(value, subtype){
                        var displayText = ssSlug + ' | ' + subtype;

                        // add to history
                        actionHistory.onChange(ssSlug, displayText, {
                            onChange: function(){ t.headerEditorStyle(window.pixeEditor, id, pixeData.editorSettings); }
                        });

                        // render style
                        t.headerEditorStyle(window.pixeEditor, id, pixeData.editorSettings);
                    }
                });
            });
        }, 

        // footer editor
        footerEditorStyle: function(){
            var t = this;
            var styleTag = window.pixeEditor.children('style');
            if( !styleTag.length ){ 
                styleTag = $('<style></style>');
                styleTag.appendTo(window.pixeEditor);
            }

            var css = '';
            var extraCss = { desktop: '' };
            var settings = pixeData.editorSettings;
            
            // fixed footer
            if( settings.footer && settings.footer.mode ){
                $.pixeAddDependency(window.pixeEditor, 'fixed-footer');
            }else{
                $.pixeAddDependency(window.pixeEditor, 'fixed-footer', false);
            }

            // add and set css
            $.pixeAddCss(window.pixeEditor, 'header',  css);

            // view settings
            extraCss.desktop += $.pixeGetLayoutCss(settings.view);

            // render style
            var style = window.pixeEditor.data('style');
            $.pixeRenderCss(styleTag, style, extraCss);
            $(window).trigger('resizewidth');

        },
        footerEditor: function(){
            var t = this;

            window.pixeEditor.attr('data-footer-id', pixeData.id);
            t.footerEditorStyle();

            // settings & action
            if( !t.templateSettings ) return;
            t.templateSettings.append('<div class="pixe-action" data-action="footer" >' + $.pixeEditorElementIcon('view-layout') + '<span>Footer Settings</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="view" >' + $.pixeEditorElementIcon('view-settings') + '<span>View Settings</span></div>');
            if( $.pixeStyleSelectorOption['template-part-admin-settings'] ){
                t.templateSettings.append('<div class="pixe-action" data-action="admin" >Admin Settings</div>');
            }

            // event
            t.templateSettings.on('click', '.pixe-action', function(){
                var button = $(this);
                var action = $(this).attr('data-action');
                var ssSlug, ssType;

                // create history action
                var actionHistory = new $.pixeEditHistory(pixeData.editorSettings, { type: 'object' });

                if( action == 'footer' ){
                    ssSlug = 'footer';
                    ssType = 'footer-settings';
                }else if( action == 'view' ){
                    ssSlug = 'view';
                    ssType = 'template-view-settings';
                }else if( action == 'admin' ){
                    ssSlug = 'admin';
                    ssType = 'template-part-admin-settings';
                }

                new $.pixeStyleSelector({
                    obj: pixeData.editorSettings,
                    slug: ssSlug,
                    type: ssType,
                    target: button,
                    onChange: function(value, subtype){
                        var displayText = ssSlug + ' | ' + subtype;

                        // add to history
                        actionHistory.onChange(ssSlug, displayText, { 
                            onChange: function(){ t.footerEditorStyle(); }
                        });

                        // render
                        t.footerEditorStyle();
                    }
                });

            });
        }, 

        // popup editor
        popupEditorStyle: function(id){
            var styleTag = window.pixeEditor.children('style');
            if( !styleTag.length ){ 
                styleTag = $('<style></style>');
                styleTag.appendTo(window.pixeEditor);
            }

            var extraCss = { desktop: '' };
            var settings = pixeData.editorSettings;

            // popup style
            var overlay = settings.overlay? settings.overlay: {};
            var background = settings.background? settings.background: {};
            var popup = settings.popup? settings.popup: {};
            var close = settings.close? settings.close: {};

            function getCss(device = ''){
                var ret = '';

                ret += $.pixeSetCss(id + ' .pixe-editor', {
                    'background': background[device + 'color'],
                    'border': background[device + 'border'],
                    'shadow': background[device + 'shadow'],
                    'mask': background[device + 'mask'],
                });
                ret += $.pixeSetCss(id + ' .pixe-editor:hover', {
                    'background': background[device + 'color-hover'],
                    'border': background[device + 'border-hover'],
                    'shadow': background[device + 'shadow-hover'],
                    'mask': background[device + 'mask-hover'],
                });

                // popup settings
                if( popup ){
                    var popupWidth, popupHeight;
                    if( popup[device + 'width-type'] == 'fit' ){
                        popupWidth = 'auto';
                    }else if( popup[device + 'width-type'] == 'full' ){
                        popupWidth = '100%';
                    }else if( popup[device + 'width-type'] == 'custom' ){
                        popupWidth = popup[device + 'width'];
                    }else if( !device ){
                        popupWidth = '420px';
                    }
                    if( popup[device + 'height-type'] == 'fit' ){
                        popupHeight = 'auto';
                    }else if( popup[device + 'height-type'] == 'full' ){
                        popupHeight = '100%';
                    }else if( popup[device + 'height-type'] == 'custom' ){
                        popupHeight = popup[device + 'height'];
                    }

                    ret += $.pixeSetCss(id + ' .pixe-editor', {
                        'height': popupHeight
                    });
                    ret += $.pixeSetCss(id + ' .pixe-popup-container', {
                        'padding': popup[device + 'margin'],
                        'width': popupWidth,
                        'height': popupHeight
                    });
                }
                ret += $.pixeSetCss(id + '.pixe-popup-wrap', {
                    'align-items': popup[device + 'v-align']? popup[device + 'v-align']: (device == ''? 'center': ''),
                    'justify-content': popup[device + 'h-align']? popup[device + 'h-align']: (device == ''? 'center': ''),
                    'background-color': overlay[device + 'color'],
                });
                ret += $.pixeSetCss(id + ' .pixe-popup-bg', {
                    'opacity': overlay[device + 'opacity'],
                    'background-image': overlay[device + 'image'],
                    'background-position': {
                        'position': overlay[device + 'position'],
                        'pos-x': overlay[device + 'pos-x'],
                        'pos-y': overlay[device + 'pos-y'],
                    },
                    'background-size': {
                        'size': overlay[device + 'size'],
                        'scale': overlay[device + 'scale'],
                    },
                    'background-repeat': overlay[device + 'repeat']
                });

                // close popup
                var iconCustom = '';
                if( close[device + 'v-align'] == 'top' ){
                    iconCustom += 'top: 0; bottom: auto;';
                }else if( close[device + 'v-align'] == 'center' ){
                    iconCustom += 'top: 50%; bottom: auto; transform: translateY(-50%);';
                }else if( close[device + 'v-align'] == 'bottom' ){
                    iconCustom += 'bottom: 0; top: auto;';
                }
                if( close[device + 'h-align'] == 'left' ){
                    iconCustom += 'left: 0; right: auto; ';
                }else if( close[device + 'h-align'] == 'center' ){
                    iconCustom += 'left: 50%; right: auto; transform: translateX(-50%);';
                }else if( close[device + 'h-align'] == 'right' ){
                    iconCustom += 'right: 0; left: auto; ';
                }

                ret += $.pixeSetCss(id + ' .pixe-close-popup', {
                    'width': close[device + 'icon-width'],
                    'height': close[device + 'icon-height'],
                    'margin': close[device + 'margin'],
                    'border-width': close[device + 'border-width'],
                    'border-radius': close[device + 'border-radius'],
                    'border-color': close[device + 'border-color'],
                    'background-color': close[device + 'background-color'],
                    'custom': iconCustom
                });
                ret += $.pixeSetCss(id + ' .pixe-close-popup .pixe-icon', {
                    'font-size': close[device + 'icon-size'],
                    'color': close[device + 'icon-color'],
                    'fill': close[device + 'icon-color'],
                });
                ret += $.pixeSetCss(id + ' .pixe-close-popup .pixe-icon.pixe-type-image, ' + id + ' .pixe-close-popup .pixe-icon.pixe-type-svg', {
                    'width': close[device + 'icon-size']
                });
                ret += $.pixeSetCss(id + ' .pixe-close-popup:hover', {
                    'border-color': close[device + 'border-color-hover'],
                    'background-color': close[device + 'background-color-hover'],
                });
                ret += $.pixeSetCss(id + ' .pixe-close-popup:hover .pixe-icon', {
                    'color': close[device + 'icon-color-hover'],
                    'fill': close[device + 'icon-color-hover'],
                });

                return ret;
            }

            var templateContainer = window.pixeEditor.closest('.pixe-template-container');

            // background image
            templateContainer.children('.pixe-popup-bg').remove();
            if( overlay['image'] || overlay['tablet-image'] || overlay['mobile-image'] ){
                templateContainer.prepend('<div class="pixe-popup-bg" ></div>');
            }

            // close button1
            window.pixeEditor.children('.pixe-close-popup').remove();
            templateContainer.children('.pixe-close-popup').remove();

            if( !close['enable'] ){
                var closeIcon = '';
                if( close['icon'] ){
                    closeIcon = $.pixeGetIcon(close['icon']);
                }else{
                    closeIcon = $.pixeGetIconPreset('close');
                }
                if( !close.position || close.position == 'inside' ){
                    window.pixeEditor.prepend('<div class="pixe-close-popup" >' + closeIcon + '</div>');
                }else{
                    templateContainer.prepend('<div class="pixe-close-popup" >' + closeIcon + '</div>');
                }
            }

            // add and set css
            $.pixeAddCss(window.pixeEditor, 'popup', getCss());
            $.pixeAddCss(window.pixeEditor, 'popup', getCss('tablet-'), 'tablet');
            $.pixeAddCss(window.pixeEditor, 'popup', getCss('mobile-'), 'mobile');

            // dependency
            $.pixeAddIconDependency(window.pixeEditor, [close['icon']]);

            // render style
            var style = window.pixeEditor.data('style');
            $.pixeRenderCss(styleTag, style, extraCss);
            $(window).trigger('resizewidth');

        },
        popupEditor: function(){
            var t = this;
            var id = '[data-popup-id="' + pixeData.id + '"]';

            window.pixeEditor.closest('.pixe-template-container').addClass('pixe-popup-wrap').attr('data-popup-id', pixeData.id);
            window.pixeEditor.closest('.pixe-active-editor-container').addClass('pixe-popup-container');
            t.popupEditorStyle(id);

            // settings & action
            if( !t.templateSettings ) return;
            t.templateSettings.append('<div class="pixe-action" data-action="popup" >' + $.pixeEditorElementIcon('view-popup') + '<span>Popup Settings</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="popup-bg" >' + $.pixeEditorElementIcon('view-color') + '<span>Popup BG Style</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="overlay" >' + $.pixeEditorElementIcon('view-overlay') + '<span>Overlay Style</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="close-button" >' + $.pixeEditorElementIcon('view-close-button') + '<span>Close Button</span></div>');
            t.templateSettings.append('<div class="pixe-action" data-action="trigger" >' + $.pixeEditorElementIcon('view-trigger') + '<span>Popup Triggers</span></div>');
            
            if( $.pixeStyleSelectorOption['template-part-admin-settings'] ){
                t.templateSettings.append('<div class="pixe-action" data-action="admin" >Admin Settings</div>');
            }

            // event
            t.templateSettings.on('click', '.pixe-action', function(){
                var button = $(this);
                var action = $(this).attr('data-action');
                var ssSlug, ssType;

                // create history action
                var actionHistory = new $.pixeEditHistory(pixeData.editorSettings, { type: 'object' });

                if( action == 'trigger' ){
                    ssSlug = 'trigger';

                    new $.pixePopupTrigger({
                        obj: pixeData.editorSettings,
                        slug: ssSlug,
                        onClose: function(value, subtype){
                            actionHistory.onChange(ssSlug, 'Edit Popup Trigger');
                        }
                    });

                }else{
                    if( action == 'popup' ){
                        ssSlug = 'popup';
                        ssType = 'popup-settings';
                    }else if( action == 'popup-bg' ){
                        ssSlug = 'background';
                        ssType = 'popup-background';
                    }else if( action == 'overlay' ){
                        ssSlug = 'overlay';
                        ssType = 'popup-overlay-background';
                    }else if( action == 'close-button' ){
                        ssSlug = 'close';
                        ssType = 'popup-close-button';
                    }else if( action == 'admin' ){
                        ssSlug = 'admin';
                        ssType = 'template-part-admin-settings';
                    }

                    new $.pixeStyleSelector({
                        obj: pixeData.editorSettings,
                        slug: ssSlug,
                        type: ssType,
                        target: button,
                        onChange: function(value, subtype){
                            var displayText = ssSlug + ' | ' + subtype;

                            // add to history
                            actionHistory.onChange(ssSlug, displayText, { 
                                onChange: function(){ t.popupEditorStyle(id); 
                            }});

                            // render
                            t.popupEditorStyle(id);
                        }
                    });
                }
            });

        },

        // synced block
        syncedBlockEditor: function(){
            // do nothing
        }
    }

    // template part view 
    $.pixeStyleSelectorOption['template-view-settings'] = {
        'title': 'View Settings',
        'options': {
            'page-margin': {
                'title': 'Page Margin',
                'type': 'margin'
            },
            'page-type': {
                'title': 'Page Type',
                'type': 'combobox',
                'options': {
                    '': 'Full Width',
                    'boxed': 'Boxed Width'
                },
                'with-default': false,
                'width': '1-1'
            },
            'boxed-width': {
                'title': 'Box Width',
                'type': 'range-input',
                'range': 'box-width',
                'width': '1-2',
                'condition': { 'page-type': 'boxed' }
            },
            'content-width': {
                'title': 'Content Width',
                'type': 'range-input',
                'range': 'content-width',
                'width': '1-2',
            },
            'area2': {
                'type': 'div',
                'class': 'pixe-sselector-options-area',
                'options': {
                    'body-background': {
                        'title': 'Body BG Color',
                        'type': 'colordisplay',
                        'width': '1-2'
                    },
                    'boxed-background': {
                        'title': 'Boxed BG Color',
                        'type': 'colordisplay',
                        'width': '1-2',
                        'condition': { 'page-type': 'boxed' }
                    },
                    'content-background': {
                        'title': 'Content BG Color',
                        'type': 'colordisplay',
                        'width': '1-2',
                        'condition': { 'page-type': '' }
                    },
                }
            },
            'overflow': {
                'title': 'Overflow',
                'type': 'combobox',
                'options': 'overflow',
                'width': '1-1',
            },
            'description': {
                'type': 'description',
                'description': 'Page Builder View Setting only applies to the backend for viewing purposes; it won\'t affect the frontend.'
            }
        }
    };

    // post template
    $.pixeStyleSelectorOption['post-template-view'] = {
        'title': 'View Settings',
        'options': {
            'padding': {
                'title': 'Padding',
                'type': 'padding'
            },
            'background-color': {
                'title': 'Background Color',
                'type': 'colordisplay',
                'width': '1-1'
            },
            'width': {
                'title': 'Card Width',
                'type': 'range-input',
                'range': 'width',
                'width': '1-1',
            },
            'column-simulation': {
                'title': 'Column Simulation',
                'type': 'checkbox',
                'default': 'yes',
                'width': '1-1'
            },
            'column': {
                'title': 'Column Number',
                'type': 'combobox',
                'options': {'1': '1', '2': '2', '3': '3', '4': '4', '5': '5', '6': '6'},
                'width': '1-2',
                'condition': { 'column-simulation': '' }
            },
            'gap': {
                'title': 'Column Gap',
                'type': 'range-input',
                'range': 'gap',
                'width': '1-2',
                'condition': { 'column-simulation': '' }
            },
            'description': {
                'type': 'description',
                'description': 'Page Builder View Setting only applies to the backend for viewing purposes; it won\'t affect the frontend.'
            }
        }
    };

    // footer template settings
    $.pixeStyleSelectorOption['footer-settings'] = {
        'title': 'Footer Settings',
        'options': {
            'mode': {
                'title': 'Footer Mode',
                'width': '1-1',
                'type': 'combobox',
                'options': {
                    '': 'Normal',
                    'locked': 'Bottom Locked',
                    'parallax-locked': 'Parallax Bottom Locked'
                },
                'description-bottom': 'Only display on the front end of the site.',
                'with-default': false
            }
        }
    };

    // header template settings
    $.pixeStyleSelectorOption['header-settings'] = {
        'title': 'Header Settings',
        'options': {
            'position': {
                'title': 'Header Position',
                'width': '1-1',
                'type': 'combobox',
                'options': {
                    '': 'Top - Solid',
                    'top-transparent': 'Top - Transparent',
                    'bottom': 'Bottom - Sticky',
                    'left': 'Left',
                    'right': 'Right'
                },
                'description-bottom': 'The "Transparent" and "Side Header" styles are only visible on the front end of the site.',
                'with-default': false
            },
            'mode': {
                'title': 'Header Mode',
                'width': '1-1',
                'type': 'combobox',
                'options': {
                    '': 'Normal',
                    'floating': 'Floating',
                    'sticky': 'Sticky'
                },
                'condition': { 'position': ['', 'top-transparent'] },
                'with-default': false
            },
            'background-color': {
                'title': 'Background Color',
                'type': 'colordisplay',
                'width': '1-2',
                'condition': { 'position': ['left', 'right'] }
            },
            'background-image': {
                'title': 'Background Image',
                'type': 'ssdisplay',
                'ss-type': 'css-bg-image',
                'ss-icon': 'pixe-svg-image',
                'width': '1-2',
                'condition': { 'position': ['left', 'right'] }
            },
            'align-content': {
                'title': 'Align Content',
                'type': 'combobox',
                'options': 'alignContent',
                'width': '1-1',
                'condition': { 'position': ['left', 'right'] }
            },
            'width': {
                'title': 'Header Width',
                'type': 'range-input',
                'range': 'background-width',
                'width': '1-2',
                'condition': { 'position': ['left', 'right'] }
            },
            'padding': {
                'title': 'Header Padding',
                'type': 'padding',
                'condition': { 'position': ['left', 'right'] }
            }
        }
    };
    $.pixeStyleSelectorOption['header-sticky-settings'] = {
        'title': 'Sticky Header Settings',
        'options': {
            'visibility': {
                'title': 'Sticky Visibility',
                'type': 'combobox',
                'options': {
                    '': 'Always Visible',
                    'hidden': 'Hidden in Sticky Mode'
                },
                'with-default': false,
                'width': '1-1'
            },
            'padding': {
                'title': 'Padding in Sticky Mode',
                'type': 'padding'
            },
            'styling': {
                'title': 'Sticky BG Style',
                'type': 'ssdisplay',
                'ss-type': 'inline-bg-style-filter2', 
                'ss-icon': 'pixe-svg-color',
                'width': '1-1' 
            }
        }
    };
    $.pixeStyleSelectorOption['header-float-settings'] = {
        'title': 'Float Header Settings',
        'options': {
            'visibility': {
                'title': 'Sticky Visibility',
                'type': 'combobox',
                'options': {
                    '': 'Always Visible',
                    'only': 'Hidden in Normal Mode',
                    'hidden': 'Hidden in Floating Mode'
                },
                'with-default': false,
                'width': '1-1'
            },
            'padding': {
                'title': 'Padding in Floating Mode',
                'type': 'padding'
            },
            'styling': {
                'title': 'Floating BG Style',
                'type': 'ssdisplay',
                'ss-type': 'inline-bg-style-filter2', 
                'ss-icon': 'pixe-svg-color',
                'width': '1-1' 
            }
        }
    };

    // template
    $.pixeStyleSelectorOption['template-component'] = {
        'title': 'Components',
        'options': {
            'header': {
                'title': 'Header',
                'type': 'template',
                'template-type': 'header',
                'width': '1-1'
            },
            'tablet-header': {
                'title': 'Tablet Header',
                'type': 'template',
                'template-type': 'header-mobile',
                'width': '1-1'
            },
            'mobile-header': {
                'title': 'Mobile Header',
                'type': 'template',
                'template-type': 'header-mobile',
                'width': '1-1'
            },
            'footer': {
                'title': 'Footer',
                'type': 'template',
                'template-type': 'footer',
                'width': '1-1'
            },
            'tablet-footer': {
                'title': 'Tablet Footer',
                'type': 'template',
                'template-type': 'footer',
                'width': '1-1'
            },
            'mobile-footer': {
                'title': 'Mobile Footer',
                'type': 'template',
                'template-type': 'footer',
                'width': '1-1'
            },
            'popup': {
                'title': 'Select Popup',
                'type': 'template',
                'template-type': 'popup',
                'width': '1-1'
            },
        }
    };
    $.pixeStyleSelectorOption['template-layout'] = {
        'title': 'Layout Settings',
        'options': {
            'page-margin': {
                'title': 'Page Margin',
                'type': 'margin'
            },
            'page-type': {
                'title': 'Page Type',
                'type': 'combobox',
                'options': {
                    '': 'Full Width',
                    'boxed': 'Boxed Width'
                },
                'with-default': false,
                'width': '1-1'
            },
            'boxed-width': {
                'title': 'Box Width',
                'type': 'range-input',
                'range': 'box-width',
                'width': '1-2',
                'condition': { 'page-type': 'boxed' }
            },
            'content-width': {
                'title': 'Content Width',
                'type': 'range-input',
                'range': 'content-width',
                'width': '1-2',
            },
            'area2': {
                'type': 'div',
                'class': 'pixe-sselector-options-area',
                'options': {
                    'body-background': {
                        'title': 'Body BG Color',
                        'type': 'colordisplay',
                        'width': '1-2'
                    },
                    'boxed-background': {
                        'title': 'Boxed BG Color',
                        'type': 'colordisplay',
                        'width': '1-2',
                        'condition': { 'page-type': 'boxed' }
                    },
                    'content-background': {
                        'title': 'Content BG Color',
                        'type': 'colordisplay',
                        'width': '1-2',
                        'condition': { 'page-type': '' }
                    },
                }
            },
            'overflow': {
                'title': 'Overflow',
                'type': 'combobox',
                'options': 'overflow',
                'width': '1-1',
            },
            'class': {
                'title': 'CSS Class Selector',
                'type': 'text',
                'width': '1-1'
            }
        }
    };
    $.pixeStyleSelectorOption['template-transition'] = {
        'title': 'Page Transition',
        'type': 'tabs',
        'options': []
    };

    // popup
    $.pixeStyleSelectorOption['popup-settings'] = {
        'title': 'Popup Settings',
        'device-selector': true,
        'options': {
            'width-type': {
                'title': 'Popup Width Type',
                'type': 'combobox',
                'options': {
                    'fit': 'Fit To Content',
                    'full': 'Full Width',
                    'custom': 'Custom'
                },
                'width': '1-1'
            },
            'width': {
                'title': 'Width',
                'type': 'range-input',
                'range': 'width',
                'width': '1-1',
                'condition': {'width-type': 'custom'}
            },
            'height-type': {
                'title': 'Popup Height Type',
                'type': 'combobox',
                'options': {
                    'fit': 'Fit To Content',
                    'full': 'Full Height',
                    'custom': 'Custom'
                },
                'width': '1-1'
            },
            'height': {
                'title': 'Height',
                'type': 'range-input',
                'range': 'height',
                'width': '1-1',
                'condition': {'height-type': 'custom'}
            },
            'v-align': {
                'title': 'Vertical Position',
                'type': 'radioicon',
                'options': 'v-alignment',
                'width': '1-2'
            },
            'h-align': {
                'title': 'Horizontal Position',
                'type': 'radioicon',
                'options': 'alignment',
                'width': '1-2'
            },
            'margin': {
                'title': 'Margin',
                'type': 'margin'
            },
            'overlay-close': {
                'title': 'Click Outside To Close',
                'type': 'checkbox',
                'default': 'yes',
                'width': '1-1',
                'device-selector': false
            },
            'page-scroll': {
                'title': 'Allow Page Scrolling',
                'type': 'checkbox',
                'default': 'no',
                'width': '1-1',
                'device-selector': false
            }
        }
    };

    $.pixeStyleSelectorOption['popup-background'] = {
        'title': 'Popup BG Style',
        'type': 'tab',
        'options': ['bg-color', 'bg-border', 'bg-shadow', 'bg-mask']
    };
    $.pixeStyleSelectorOption['popup-overlay-background'] = {
        'title': 'Overlay Style',
        'type': 'tab',
        'options': ['text-box-bg-color', 'css-bg-image-device-opacity']
    };


    $.pixeStyleSelectorOption['popup-close-button'] = {
        'title': 'Close Button',
        'type': 'tab',
        'options': ['popup-close-styling', 'popup-close-position']
    }
    $.pixeStyleSelectorOption['popup-close-styling'] = {
        'title': 'Button Style',
        'device-selector': true,
        'pointer-state': true,
        'options': {
            'enable': {
                'title': 'Enable Close Button',
                'type': 'checkbox',
                'default': 'yes',
                'width': '1-1',
                'device-selector': false,
                'pointer-state': false
            },
            'icon': {
                'title': 'Select Icon',
                'type': 'icon',
                'device-selector': false,
                'pointer-state': false,
                'condition': { 'enable': '' }
            },
            'icon-size': {
                'title': 'Icon Size',
                'type': 'range-input',
                'range': 'font-size',
                'width': '1-2',
                'pointer-state': false,
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'icon-color': {
                'title': 'Icon & Svg Color',
                'type': 'colordisplay',
                'width': '1-2',
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'icon-width': {
                'title': 'Background Width',
                'type': 'range-input',
                'range': 'font-size',
                'width': '1-2',
                'pointer-state': false,
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'icon-height': {
                'title': 'Background Height',
                'type': 'range-input',
                'range': 'font-size',
                'width': '1-2',
                'pointer-state': false,
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'border-width': {
                'title': 'Background Border Width',
                'type': 'border-width',
                'pointer-state': false,
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'border-radius': {
                'title': 'Background Border Radius',
                'type': 'border-radius',
                'pointer-state': false,
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'background-color': {
                'title': 'Background Color',
                'type': 'colordisplay',
                'width': '1-2',
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'border-color': {
                'title': 'Border Color',
                'type': 'colordisplay',
                'color-type': 'plain-color',
                'width': '1-2',
                'condition': { 'enable': ['', 'ignore-device'] }
            },
            'delay-time': {
                'title': 'Show Button Delay (ms)',
                'type': 'range-input',
                'min': 0,
                'max': 5000,
                'width': '1-1',
                'pointer-state': false,
                'device-selector': false,
                'condition': { 'enable': ['', 'ignore-device'] }
            }
        }
    }
    $.pixeStyleSelectorOption['popup-close-position'] = {
        'title': 'Position',
        'device-selector': true,
        'options': {
            'position': {
                'title': 'Button Position',
                'type': 'combobox',
                'options': {
                    'inside': 'Inside Popup',
                    'outside': 'Outside Popup'
                },
                'width': '1-1',
                'device-selector': false
            },
            'v-align': {
                'title': 'Vertical Position',
                'type': 'radioicon',
                'options': 'v-alignment',
                'width': '1-1'
            },
            'h-align': {
                'title': 'Horizontal Position',
                'type': 'radioicon',
                'options': 'alignment',
                'width': '1-1'
            },
            'margin': {
                'title': 'Margin',
                'type': 'margin'
            },
        }
    }
    $.pixePopupTriggerRules = {
        'on-page-load': {
            'checkbox': true,
            'label1': 'On Page Load, after',
            'input1': true,
            'suffix': 'sec(s)'
        },
        'on-click': {
            'checkbox': true,
            'label1': 'On Click, after',
            'input1': true,
            'suffix': 'click(s)'
        },
        'on-scroll': {
            'checkbox': true,
            'label1': 'On Scroll',
            'input1': {
                type: 'combobox',
                options: 'onScroll'
            },
            'input2': true,
            'suffix': '% of page'
        },
        'on-scroll-to': {
            'checkbox': true,
            'label1': 'On Scroll To (Element ID) #',
            'input1': {
                type: 'text',
                width: '180'
            }
        },
        'on-exit-intent': {
            'checkbox': true,
            'label1': 'On Exit Intent'
        },
        'after-inactivity': {
            'checkbox': true,
            'label1': 'After Inactivity for',
            'input1': true,
            'suffix': 'sec(s)'
        },
        'after-page-view': {
            'checkbox': true,
            'label1': 'Show after',
            'input1': true,
            'suffix': 'page view(s)'
        },
        'after-session': {
            'checkbox': true,
            'label1': 'Show after',
            'input1': true,
            'suffix': 'session(s)'
        },
        'show-time-hide-day': {
            'checkbox': true,
            'label1': 'Show ',
            'input1': true,
            'label2': 'time(s) then hide for',
            'input2': true,
            'suffix': 'day(s)'
        },
    }
    $.pixePopupTriggerAdvanceRules = {
        'arriving-from': {
            'label1': 'Arriving from',
            'input1': {
                type: 'text',
                placeholder: 'url or regex',
                width: 140
            },
            'label2': ',',
            'input2': {
                type: 'combobox',
                options: 'onArrival'
            }
        },
        'hide-for': {
            'label1': 'Hide for logged in users. Role: ',
            'input1': {
                type: 'combobox',
                callback: 'user-role'
            }
        },
        'os': {
            'label1': 'Operation System',
            'input1': {
                type: 'combobox',
                options: 'is'
            },
            'input2': {
                type: 'combobox',
                options: 'os'
            }
        },
        'browser': {
            'label1': 'Browser',
            'input1': {
                type: 'combobox',
                options: 'is'
            },
            'input2': {
                type: 'combobox',
                options: 'browser'
            }
        },
        'last-visit': {
            'label1': 'Last visit is',
            'input1': {
                type: 'combobox',
                options: 'duration'
            },
            'input2': {
                type: 'datepicker',
                width: 140
            },
        },
        'current-date': {
            'label1': 'Current date is',
            'input1': {
                type: 'combobox',
                options: 'duration'
            },
            'input2': {
                type: 'datepicker',
                width: 140
            },
        },
        'cookie': {
            'label1': 'Cookie',
            'input1': {
                type: 'text',
                placeholder: 'Param',
                width: 100
            },
            'input2': {
                type: 'combobox',
                options: 'compare'
            },
            'input3': {
                type: 'text',
                placeholder: 'Value',
                width: 100
            },
        }
    }
    $.pixePopupTriggerCombobox = {
        onScroll: function(){
            return $.pixeComboboxOption.object({
                'down': 'down',
                'up': 'up'
            }, false);
        },
        onArrival: function(){
            return $.pixeComboboxOption.object({
                'show': 'Show',
                'hide': 'Hide'
            }, false);
        },
        is: function(){
            return $.pixeComboboxOption.object({
                'is': 'Is',
                'not': 'Is Not'
            }, false);
        },
        os: function(){
            return $.pixeComboboxOption.object({
                'android': 'Android',
                'ios': 'IOS',
                'macos': 'MACOS',
                'window': 'Window'
            }, false);
        },
        duration: function(){
            return $.pixeComboboxOption.object({
                'match': 'Match',
                'before': 'Before',
                'after': 'After',
            }, false);
        },
        compare: function(){
            return $.pixeComboboxOption.object({
                'match': 'Match',
                'contain': 'Contain',
                'not-match': 'Doesn\'t Match',
                'not-contain': 'Doesn\'t Contain',
            }, false);
        },
        browser: function(){
            return $.pixeComboboxOption.object({
                'chrome': 'Chrome',
                'edge': 'Edge',
                'firefox': 'Firefox',
                'safari': 'Safari',
                'brave': 'Brave',
            }, false);
        },
        advanceRules: function(){
            return $.pixeComboboxOption.object({
                'arriving-from': 'Arriving from URL or REGEX',
                'hide-for': 'Hide for loggedin users',
                'os': 'Operation System',
                'browser': 'Browser',
                'last-visit': 'Last visit is',
                'current-date': 'Current date is',
                'cookie': 'Cookie'
            }, false);
        }
    }

    // popup trigger
    $.pixePopupTrigger = function(settings){

        settings = $.extend({
            obj: {},
            slug : '',
            onChange: function(){},
            onClose: function(){}
        }, settings);

        // initiate
        var t = this;
        t.settings = settings;
        t.data = settings.obj[settings.slug]? settings.obj[settings.slug]: {};

        // lightbox area
        var container = $('<div class="pixe-popup-trigger pixe-box-sizing" ></div>');
        t.container = container;

        t.lb = new $.pixeLightboxPopup({
            class: 'pixe-lb-popup-trigger',
            content: container,
            onClose: settings.onClose
        });

        // heading
        var header = $('<div class="pixe-popup-trigger-header" >Popup Triggers</div>');
        container.append(header);
        
        // close button
        header.append($.pixeGetAdminIcon('cancel', { class: 'pixe-close' }));
        header.on('click', '.pixe-close', function(){
            t.lb.close();
        });
        
        // content area
        t.leftContent = $('<div class="pixe-left-content" ></div>');
        t.leftContent.appendTo(container);
        t.leftSettings();

        t.rightContent = $('<div class="pixe-right-content" ></div>');
        t.rightContent.appendTo(container);
        t.rightSettings()
    };
    $.pixePopupTrigger.prototype = {
        
        getField: function(settings, value){
            var field;

            if( settings === true ){
                field = $.pixeInput({
                    value: value
                });
            }else if( settings.type == 'text' ){
                field = $.pixeInput({
                    placeholder: settings.placeholder,
                    value: value
                });
                if( settings.width ){
                    field = $(field);
                    field.css('width', settings.width);
                }
            }else if( settings.type == 'datepicker' ){
                field = $.pixeInput({
                    type: 'date',
                    placeholder: settings.placeholder,
                    value: value
                });
                if( settings.width ){
                    field = $(field);
                    field.css('width', settings.width);
                }
            }else if( settings.type == 'combobox' ){
                field = $.pixeCombobox({
                    options: settings.options? $.pixePopupTriggerCombobox[settings.options](): '',
                    value: value,
                });
                
                if( settings.width || settings.callback ){
                    field = $(field);

                    if( settings.width ){
                        field.css('width', settings.width);
                    }
                    if( settings.callback ){
                        $.pixeComboboxCallback(settings.callback, field, value);
                    }
                }
            }

            return field;
        },

        getInput: function(slug, options, value, removeable = false){
            var t = this;
            var input = $('<div class="pixe-input-trigger-wrap" ></div>');
            var inputVal = '';
            input.attr('data-slug', slug);

            // checkbox
            if( options.checkbox ){
                input.append($.pixeCheckbox({
                    value: typeof(value) == 'undefined'? '': 'yes'
                }));
            }

            // label
            if( options.label1 ){
                input.append('<label>' + options.label1 + '</label>');
            }

            // input
            if( options.input1 ){
                inputVal = Array.isArray(value)? value[0]: '';
                input.append(t.getField(options.input1, inputVal));
            }

            // label middle
            if( options.label2 ){
                input.append('<label>' + options.label2 + '</label>');
            }

            // 2nd input
            if( options.input2 ){
                inputVal = Array.isArray(value)? value[1]: '';
                input.append(t.getField(options.input2, inputVal));
            }

            // 3nd input
            if( options.input3 ){
                inputVal = Array.isArray(value)? value[2]: '';
                input.append(t.getField(options.input3, inputVal));
            }

            // suffix label
            if( options.suffix ){
                input.append('<label>' + options.suffix + '</label>');
            }

            // remove
            if( removeable ){
                input.append('<div class="pixe-svg-preset pixe-svg-trash pixe-remove" ></div>');
            } 

            return input;
        },

        leftSettings: function(){
            var t = this;
            t.leftContent.append('<h3 class="pixe-popup-trigger-heading" >Basic Rules</h3>');

            // basic rules
            for( var slug in $.pixePopupTriggerRules ){
                var value = t.data[slug];
                t.leftContent.append(t.getInput(slug, $.pixePopupTriggerRules[slug], value));
            }

            // devices
            var input = $('<div class="pixe-input-trigger-wrap pixe-trigger-device" ></div>');
            var devices = $.pixeHideOnDevices({ 
                slug: 'ignore-devices',
                value: t.data['ignore-devices']
            });
            input.append('<label>Select device(s) to display</label>');
            input.append(devices);
            t.leftContent.append(input);

            // bind
            t.leftContent.pixeCombobox();
            t.leftContent.on('change', function(){
                t.getVal();
            });
        },

        rightSettings: function(){
            var t = this;
            t.rightContent.append('<h3 class="pixe-popup-trigger-heading" >Advanced Rules</h3>');
            
            var advanceRules = $('<div class="pixe-popup-trigger-rules" ></div>');
            t.rightContent.append(advanceRules);

            var newRules = $('<div class="pixe-popup-trigger-add-wrap" ></div>');  
            newRules.append('<label>Add Rule</label>');
            newRules.append($.pixeCombobox({
                'options': $.pixePopupTriggerCombobox['advanceRules']()
            }));
            newRules.append('<div class="pixe-popup-trigger-add" ><svg width="15" height="14" viewBox="0 0 15 14" fill="none" ><path d="M6.79349 13.1874C6.79349 13.4982 7.04534 13.75 7.35599 13.75C7.66664 13.75 7.91849 13.4982 7.91849 13.1875V7.56244H13.5434C13.8541 7.56244 14.1059 7.31059 14.1059 6.99994C14.1059 6.68929 13.8541 6.43744 13.5434 6.43744H7.91849V0.8125C7.91849 0.501842 7.66664 0.25 7.35599 0.25C7.04534 0.25 6.79349 0.501835 6.79349 0.8125V6.43744H1.16846C0.8578 6.43744 0.605957 6.68929 0.605957 6.99994C0.605957 7.31059 0.8578 7.56244 1.16846 7.56244H6.79349V13.1874Z" fill="#0487FF"/></svg>Add Rule</div>');
            t.rightContent.append(newRules);

            // init values
            if( t.data.advance ){
                for( var i in t.data.advance ){
                    var options = Array.from(t.data.advance[i]);
                    var slug = options.shift();
                    
                    var newInput = t.getInput(slug, $.pixePopupTriggerAdvanceRules[slug], options, true);
                    advanceRules.append(newInput);

                    newInput.pixeCombobox();
                }
            }

            // bind
            newRules.pixeCombobox();
            newRules.on('click', '.pixe-popup-trigger-add', function(){
                var trigger = $.pixeGetInputVal(newRules.find('.pixe-combobox'));
                var newInput = t.getInput(trigger, $.pixePopupTriggerAdvanceRules[trigger], '', true);
                advanceRules.append(newInput);

                newInput.pixeCombobox();
                t.getVal();
            });

            t.rightContent.on('change', function(){
                t.getVal();
            });

            t.rightContent.on('click', '.pixe-remove', function(){
                $(this).closest('.pixe-input-trigger-wrap').remove();
                t.getVal();
            });
        },

        getVal: function(){
            var t = this;
            var data = {};

            // get left content data
            t.leftContent.find('[data-slug]').each(function(){
                var slug = $(this).attr('data-slug');
                var enabled = $.pixeGetInputVal($(this).find('.pixe-checkbox input'));
                
                if( enabled == 'yes' ){
                    var content = [];
                    var input = $(this).find('input, .pixe-combobox').not('[type="checkbox"]');
                    
                    input.each(function(){
                        content.push($.pixeGetInputVal($(this)));
                    });
                    data[slug] = content.length? content: 1;
                }else if( slug == 'ignore-devices' ){
                    var content = $.pixeGetInputVal($(this));
                    if( content && content.length ){
                        data[slug] = content;
                    }
                }
            });

            // right content data
            var advanceData = [];
            t.rightContent.find('[data-slug]').each(function(){
                var slug = $(this).attr('data-slug');
                var content = [];
                var input = $(this).find('input, .pixe-combobox').not('[type="checkbox"]');
                
                content.push(slug);
                input.each(function(){
                    content.push($.pixeGetInputVal($(this)));
                });
                advanceData.push(content);
            });
            if( advanceData.length ){
                data.advance = advanceData;
            }

            t.settings.obj[t.settings.slug] = data;
            t.settings.onChange();
        }

    };

})(jQuery);	