@innovastudio/contentbox 1.6.0 → 1.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/public/contentbox/contentbox.esm.js +27 -20
  3. package/public/contentbox/contentbox.min.js +1 -1
package/public/contentbox/contentbox.min.js CHANGED
@@ -10,7 +10,7 @@ var ContentBox=function(){"use strict";class t{appendHtml(t,e,i="beforeend"){t.i
10
10
  License: MIT
11
11
  Copyright (c) 2020 Paweł Kuna
12
12
  https://github.com/tabler/tabler-icons
13
- */function i(t,e){let i=!1;if("undefined"!=typeof window&&void 0!==window._txt&&(i=!0),e){if(i){let i=window._txt[t];return i||e}return e}if(i){let e=window._txt[t];return e||t}return t}class n{constructor(t){const[e,i]=t.children,n=e=>{if(!t)return document.removeEventListener("click",n);t.contains(e.target)||this.toggle(!1)},o=n=>{const o=n.textContent,s=n.getAttribute("data-value");e.textContent=o,this.value=s,this.toggle(!1),t.dispatchEvent(new Event("change")),e.focus();let a=i.children;Array.from(a).forEach((t=>{t.classList.remove("selected")}));let l=i.querySelector('[data-value="'+s+'"]');l&&l.classList.add("selected")},s=t=>{t.preventDefault(),38===t.keyCode&&t.target.previousElementSibling?t.target.previousElementSibling.focus():40===t.keyCode&&t.target.nextElementSibling?t.target.nextElementSibling.focus():27===t.keyCode?(this.toggle(!1),e.focus()):13!==t.keyCode&&32!==t.keyCode||o(t.target)};e.addEventListener("keydown",(t=>{27===t.keyCode?(this.toggle(!1),t.preventDefault()):13!==t.keyCode&&32!==t.keyCode||(this.toggle(!0),t.preventDefault())})),e.addEventListener("click",(()=>this.toggle())),[...i.children].forEach((t=>{t.addEventListener("keydown",s),t.addEventListener("click",(()=>o(t)))})),this.element=t,this.value=e.getAttribute("data-value"),this.toggle=(o=null)=>{if(o=null===o?"true"!==i.getAttribute("aria-expanded"):o,i.setAttribute("aria-expanded",o),o){e.classList.add("active");let o=i.querySelector('[data-value="'+this.value+'"]');o&&(o.classList.add("selected"),o.focus()),document.addEventListener("click",n),t.dispatchEvent(new Event("opened"))}else e.classList.remove("active"),t.dispatchEvent(new Event("closed")),document.removeEventListener("click",n)}}}const o=new t;class s{constructor(t){this.builder=t;let e="";const n=this.builder.builderStuff;if(this.builderStuff=n,this.builder.useSidebar){e+='<div class="is-sidebar is-area active" style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';var s=0;this.builder.sidebarData.buttons.map((t=>{if("section"===t.name)e+='<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="'+i(t.title)+'" title="'+i(t.title)+'"><svg class="svg-icon"><use xlink:href="#icon-plus"></use></svg></button>';else if("snippet"===t.name)e+='<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="'+i(t.title)+'" title="'+i(t.title)+'"><svg class="svg-icon"><use xlink:href="#icon-box-multiple"></use></svg></button>';else if("typography"===t.name)this.builder.enableContentStyle&&(e+='<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="'+i(t.title)+'" title="'+i(t.title)+'"><svg class="svg-icon"><use xlink:href="#icon-typography"></use></svg></button>');else if("code"===t.name)this.builder.htmlButton&&(this.builder.htmlSyntaxHighlighting?e+=`<button class="is-sidebar-button" tabindex="-1" data-command="code" data-title="${i(t.title)}" title="${i(t.title)}">\n <svg class="svg-icon"><use xlink:href="#icon-code"></use></svg>\n </button>`:e+=`<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSource" data-command="code" data-title="${i(t.title)}" title="${i(t.title)}">\n <svg class="svg-icon"><use xlink:href="#icon-code"></use></svg>\n </button>`);else if(t.src){var a=o.uniqueId();if(e+=`<button class="is-sidebar-button" tabindex="-1" data-content="${a}" data-title="${i(t.title)}" title="${i(t.title)}" data-src="${t.src}" data-refresh="${t.refresh?1:0}">${t.html}</button>`,!n.querySelector(`#${a}`)){let e=`<div id="${a}" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${t.maxwidth?t.maxwidth:"500px"};">\n <div style="padding:0 0 0 50px;box-sizing:border-box;">\n <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">\n </iframe>\n </div>\n </div>`;o.appendHtml(n,e)}}else e+='<button class="is-sidebar-button" tabindex="-1" data-content="'+t.content.substr(1)+'" data-title="'+i(t.title)+'" title="'+i(t.title)+'" data-refresh="'+(t.refresh?1:0)+'">'+t.html+"</button>";this.builder.sideButtons&&this.builder.sideButtons.map((t=>{if(s==t.pos)if(t.src){var a=o.uniqueId();e+=`<button class="is-sidebar-button" tabindex="-1" data-content="${a}" data-title="${i(t.title)}" title="${i(t.title)}" data-src="${t.src}" data-refresh="${t.refresh?1:0}">\n ${t.html}\n </button>`;let s=`<div id="${a}" class="is-sidebar-content is-area-2nd ${t.class}" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${t.maxwidth?t.maxwidth:"1005px"};">\n <div style="padding:0 0 0 50px;box-sizing:border-box;">\n <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">\n </iframe>\n </div>\n </div>`;o.appendHtml(n,s)}else e+=`<button class="is-sidebar-button" tabindex="-1" data-content="${t.content.substr(1)}" data-title="${i(t.title)}" title="${i(t.title)}">\n ${t.html}\n </button>`})),s++})),e+="</div>",e+='<div id="divSidebarSections" class="is-sidebar-content is-area-2nd '+this.builder.templateThumbnailSize+'" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;"><div><iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;"></iframe></div></div><div id="divSidebarSnippets" class="is-sidebar-content is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;"></div><div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;"><div><div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;"><button title="'+i("Cancel")+'" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> '+i("Cancel")+' </button><button title="'+i("Ok")+'" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> '+i("Ok")+' </button></div><div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative"><textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea></div></div></div><div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;"><div class="scroll-darker"><div style="padding: 15px 0 0 20px"><div class="is-sidebar-title" style="margin-bottom:12px;">'+i("Typography Styles")+"</div><div>"+i("Apply to")+':</div><div style="display:flex;justify-content:space-between;align-items: center;"><div class="typo-target-default" style="display:flex"><label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>'+i("Page")+'</span></label><label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>'+i("Section")+'</span></label></div><div class="typo-target-box" style="display: flex;"><span>'+i("Active Box")+'</span></div><button title="'+i("Clear")+'" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button></div></div><div id="divSelector"></div><div id="divStyles"></div></div></div>'}else e='<div id="divSections" style="display:none"></div><div class="is-modal addsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width: 900px;"><div id="divSectionList" class="is-section-list"></div></div></div>';e+=`<div class="is-pop page-quick-settings arrow-left" style="z-index:10006;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div style="display:flex;flex-flow:wrap;flex-direction: column;width: 190px;margin:12px 12px 14px;">\n <div class="is-label"><span>${i("Zoom")}</span>:</div>\n <div style="padding-top:4px">\n <input type="range" min="50" max="100" value="1" class="page-zoom-slider is-rangeslider" style="margin:0 !important;">\n </div>\n\n <div style="padding-top:15px;width:100%;">\n <div class="is-label"><span>${i("Enable Animation")}</span>:</div>\n <div style="padding-top: 5px;width:100%;display:flex;align-items:center;justify-content: space-between;"> \n <label class="switch"><input class="cmd-live-preview" type="checkbox" checked=""><span class="slider round"></span></label>\n ${this.builder.advancedTimeline?`\n <button tabindex="-1" title="${i("Edit")}" class="cmd-timeline-edit" style="width:30px;height:30px;cursor:pointer;">\n <svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg>\n </button>\n `:""}\n </div>\n </div>\n\n <div style="padding-top:20px;width:100%;">\n <button type="button" title="${i("Live Preview")}" class="cmd-open-preview-window" style="width:100%">\n <svg class="is-icon-flex"><use xlink:href="#icon-device-desktop"></use></svg>\n <span style="margin-left:7px">${i("Live Preview")}</span>\n </button>\n </div>\n </div>\n </div>`,o.appendHtml(n,e),this.pageQuickSettings=n.querySelector(".page-quick-settings"),this.pageZoomSlider=this.pageQuickSettings.querySelector(".page-zoom-slider"),this.pageZoomSlider.onfocus=()=>{this.builder.editor.rte.zoomStart()},this.pageZoomSlider.oninput=()=>{this.builder.editor.rte.zoom(this.pageZoomSlider)},this.pageZoomSlider.onchange=()=>{this.builder.editor.rte.zoomEnd(this.pageZoomSlider)};const a=this.pageQuickSettings.querySelector(".cmd-timeline-edit");if(a&&a.addEventListener("click",(()=>{this.builder.timeline.edit();const t=this.builder.sidebar.pageQuickSettings;this.builder.editor.util.hidePop(t)})),this.builder.useSidebar){document.querySelectorAll(".is-sidebar .is-sidebar-button").forEach((t=>{setTimeout((()=>{const e=t.getAttribute("data-content");if(e){document.querySelector("#"+e).addEventListener("keydown",(t=>{27===t.keyCode&&this.closeSidebar()}))}}),300),t.addEventListener("click",(()=>{let e=!1;if(o.hasClass(t,"active")&&(e=!0),this.closeSidebar(),this.builder.editbox&&this.builder.editbox.close(),this.builder.editsection&&this.builder.editsection.close(),this.builder.animateScroll.close(),e)return;let i=t.getAttribute("data-content");if(i){const e=n.querySelector(".is-sidebar-overlay");e&&e.addEventListener("click",(()=>{this.closeSidebar()})),o.addClass(t,"active");const s=document.querySelector("#"+i);s.style.display="block",s.setAttribute("aria-hidden",!1),setTimeout((()=>{if(o.addClass(s,"active"),s.focus(),"divSidebarSnippets"===s.getAttribute("id")){s.querySelector(".selectsnippet .dropdown-toggle").focus()}"divSidebarTypography"===s.getAttribute("id")&&s.focus()}),10)}let s=t.getAttribute("data-command");if(s&&("section"===s&&this.viewIdeas(),"code"===s&&(this.builder.htmlSyntaxHighlighting?this.viewHtml():this.viewHtml2()),"typography"===s&&(t.setAttribute("data-applyto","page"),n.querySelector(".typo-target-default").style.display="flex",n.querySelector(".typo-target-box").style.display="none",this.viewTypography())),t.hasAttribute("data-src")){let e=t.getAttribute("data-src"),i=t.getAttribute("data-content");const o=n.querySelector(`#${i}`).querySelector("iframe");("1"===t.getAttribute("data-refresh")||-1!=o.getAttribute("src").indexOf("blank"))&&o.setAttribute("src",e)}}))}));n.querySelector("#btnViewHtmlOk").addEventListener("click",(()=>{this.builder.editor.saveForUndo();var t=n.querySelector("#inpViewHtml").value;t=this.builder.editor.fromViewToActual(t),this.builder.loadHtml(t),this.builder.settings.onChange();const e=document.querySelector(".is-sidebar-overlay");e&&(e.remove(),document.body.style.overflow="",document.body.style.overflowY=""),document.querySelectorAll(".is-sidebar-button.active").forEach((t=>{o.removeClass(t,"active")})),document.querySelectorAll(".is-sidebar-content.active").forEach((t=>{o.removeClass(t,"active")}))}));n.querySelector("#btnViewHtmlCancel").addEventListener("click",(()=>{const t=document.querySelector(".is-sidebar-overlay");t&&(t.remove(),document.body.style.overflow="",document.body.style.overflowY=""),document.querySelectorAll(".is-sidebar-button.active").forEach((t=>{o.removeClass(t,"active")})),document.querySelectorAll(".is-sidebar-content.active").forEach((t=>{o.removeClass(t,"active")}))})),document.querySelector("#btnTypoClear").addEventListener("click",(()=>{this.boxTypography("","",""),this.selectType()}));document.querySelectorAll(".is-sidebar-content").forEach((t=>{t.addEventListener("keydown",(t=>{27===t.keyCode&&this.closeSidebar()}))}))}}openSettings(t){const e=this.pageQuickSettings;let i,n,o;i=t?t.target:document.activeElement,this.builder.btnSettings=i,this.builder.editor.util.showPop(e,!1,i),n=i.getBoundingClientRect().top,o=i.getBoundingClientRect().left,e.style.top=n+4+"px",e.style.left=o+68+"px",this.pageZoomSlider.value=100*this.builder.editor.zoom}reOpenSettings(){const t=this.pageQuickSettings;this.builder.editor.util.showPop(t,!1,this.builder.btnSettings)}closeSidebar(){const t=document,e=t.querySelector(".is-sidebar-overlay");e&&(e.remove(),document.body.style.overflowY=""),t.querySelectorAll(".is-sidebar-button.active").forEach((t=>{o.removeClass(t,"active")})),t.querySelectorAll(".is-sidebar > div").forEach((t=>{o.removeClass(t,"active")})),t.querySelectorAll(".is-sidebar-content.active").forEach((t=>{o.removeClass(t,"active"),t.setAttribute("aria-hidden",!0),setTimeout((()=>{t.style.display=""}),300)}))}viewIdeas(){const t=this.builder.designPath,e=this.builder.designUrl1,i=this.builder.designUrl2;if(e&&i){var n=document.querySelector("#ifrIdeasPanel").contentWindow.document;""===n.body.innerHTML&&(n.open(),0===this.builder.templates.length?n.write(this.getTemplatesHtml_OLD()):n.write(this.getTemplatesHtml()),n.close())}else if(t){const e=document.querySelector("#ifrIdeasPanel");-1!=e.getAttribute("src").indexOf("blank")&&e.setAttribute("src",t+"ideas.html")}return!1}viewHtml(){const t=this.builderStuff;if(null!==localStorage.getItem("_htmlview")){let t=localStorage.getItem("_htmlview");this.builder.shortenHTML="shorten"===t}let e;e=this.builder.shortenHTML?this.builder.html(!0):this.builder.html(),t.querySelector("#inpViewHtml").value=e;let i=t.querySelectorAll("[data-source-active]");i.forEach((t=>{t.removeAttribute("data-source-active")})),i=t.querySelectorAll("[data-source-ok]"),i.forEach((t=>{t.removeAttribute("data-source-ok")})),i=t.querySelectorAll("[data-source-cancel]"),i.forEach((t=>{t.removeAttribute("data-source-cancel")}));let n=t.querySelector("#divSidebarSource textarea");n.setAttribute("data-source-active","1"),n.setAttribute("data-source-ok","#btnViewHtmlOk"),n.setAttribute("data-source-cancel","#btnViewHtmlCancel"),this.builder.editor.viewHtmlNormal()}viewHtml2(){const t=this.builderStuff;let e;e=this.builder.shortenHTML?this.builder.html(!0):this.builder.html(),t.querySelector("#inpViewHtml").value=e}viewTypography(){const t=this.builder.settings.contentStylePath,e=this.builder.settings.contentStyles,o=e.data.categories;let s="",a="";for(let t=0;t<o.length;t++)a+='<li role="option" tabindex="0" data-value="'+o[t].id+'">'+i(o[t].desc)+"</li >",-1===o[t].id&&(s=i(o[t].desc));let l='<div class="is-dropdown style-cat" style=""><button tabindex="0" class="dropdown-toggle no-outline" type="button" aria-haspopup="true" data-value="-1"><span>'+s+'</span></button><ul class="dropdown-menu" role="listbox" aria-expanded="false">'+a+"</ul></div>";function r(t){const e=t.childNodes;let i=[],n=e.length;for(;n--;)1===e[n].nodeType&&i.unshift(e[n]);return i}document.querySelector("#divSelector").innerHTML=l;const c=new n(document.querySelector(".style-cat"));c.element.addEventListener("change",(()=>{let i=c.value,n=e.data.styles,o="";if(-1===parseInt(i))for(let e=0;e<n.length;e++)o+='<div data-css="'+n[e].css+'" data-sectioncss="'+n[e].sectioncss+'" data-classname="'+n[e].classname+'"><div>['+(e+1)+"] "+n[e].caption+'</div><img src="'+t+n[e].img+'" /><span class="is-overlay"></span></div></div>';else for(let e=0;e<n.length;e++)parseInt(i)===n[e].category&&(o+='<div data-css="'+n[e].css+'" data-sectioncss="'+n[e].sectioncss+'" data-classname="'+n[e].classname+'"><div>['+(e+1)+"] "+n[e].caption+'</div><img src="'+t+n[e].img+'" /><span class="is-overlay"></span></div></div>');let s=document.querySelector("#divStyles");s.innerHTML=o,r(s).forEach((t=>{t.addEventListener("click",(()=>{this.boxTypography(t.getAttribute("data-classname"),t.getAttribute("data-sectioncss"),t.getAttribute("data-css"))}))}))}));let d=e.data.styles,u="";for(var p=0;p<d.length;p++)u+='<div data-css="'+d[p].css+'" data-sectioncss="'+d[p].sectioncss+'" data-classname="'+d[p].classname+'"><div>['+(p+1)+"] "+d[p].caption+'</div><img src="'+t+d[p].img+'" /><span class="is-overlay"></span></div></div>';const h=document.querySelector("#divStyles");if(""===h.innerHTML){h.innerHTML=u;r(h).forEach((t=>{t.addEventListener("click",(()=>{const e=h.querySelector(".active");e&&e.classList.remove("active"),t.classList.add("active"),this.boxTypography(t.getAttribute("data-classname"),t.getAttribute("data-sectioncss"),t.getAttribute("data-css"))}))}))}this.selectType()}selectType(){const t=this.builderStuff.querySelector("#divStyles"),e=t.querySelector(".active");if(e&&e.classList.remove("active"),"page"===document.querySelector('input[name="typoTarget"]:checked').value){let e=this.builder.doc.getElementsByTagName("link"),i="";for(let n=0;n<e.length;n++)if(-1!==e[n].getAttribute("href").indexOf("basetype-")){if(i=e[n].getAttribute("href").split("/").pop().split(".")[0].replace("base",""),i){const e=t.querySelector(`[data-classname="${i}"]`);e&&(e.classList.add("active"),t.scrollTop=e.offsetTop-70)}}return}let i=this.builder.activeBox;if(i){const e=i.classList;let n="";for(let t=0;t<e.length;t++)if(e[t].startsWith("type-")){n=e[t];break}if(n){const e=t.querySelector(`[data-classname="${n}"]`);e&&(e.classList.add("active"),t.scrollTop=e.offsetTop-70)}else{let e=this.builder.activeSection;if(e){const i=e.classList;let n="";for(let t=0;t<i.length;t++)if(i[t].startsWith("type-")){n=i[t];break}if(n){const e=t.querySelector(`[data-classname="${n}"]`);e&&(e.classList.add("active"),t.scrollTop=e.offsetTop-70)}}}}}boxTypography(t,e,i){const n=this.builder.builderStuff;this.builder.editor.saveForUndo();const s=this.builder.settings.contentStylePath;let a=n.querySelector('.is-sidebar > button[data-command="typography"]').getAttribute("data-applyto"),l=document.querySelector('input[name="typoTarget"]:checked').value;if("box"!==a)if("section"===l){let i=this.builder.activeSection;if(!i)return;if(i.getAttribute("class").split(/\s+/).forEach((t=>{-1!=t.indexOf("type-")&&o.removeClass(i,t)})),i.querySelectorAll(".is-box, .is-box-centered").forEach((t=>{t.getAttribute("class").split(/\s+/).forEach((e=>{-1!=e.indexOf("type-")&&o.removeClass(t,e)}))})),""!==t){o.addClass(i,t);let n=!1,a=document.getElementsByTagName("link");for(let t=0;t<a.length;t++){-1!=a[t].href.toLowerCase().indexOf(e.toLowerCase())&&(n=!0)}n||(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'))}let n=document.getElementsByTagName("link");for(let t=0;t<n.length;t++)if("contentstyle"===n[t].getAttribute("data-name")){let e=n[t].getAttribute("data-class");this.builder.wrapperEl.querySelector("."+e)||n[t].setAttribute("data-rel","_del")}document.querySelectorAll('[data-rel="_del"]').forEach((t=>{t.parentNode.removeChild(t)}))}else if("page"===l){let t=document.getElementsByTagName("link");for(let e=0;e<t.length;e++)if("contentstyle"===t[e].getAttribute("data-name")){let i=t[e].getAttribute("data-class");if(this.builder.wrapperEl.querySelector("."+i)){this.builder.wrapperEl.querySelectorAll("."+i).forEach((t=>{o.removeClass(t,i)})),t[e].setAttribute("data-rel","_del")}}let e=document.querySelectorAll('[data-rel="_del"]');e.forEach((t=>{t.parentNode.removeChild(t)})),t=document.getElementsByTagName("link");for(let e=0;e<t.length;e++){-1!=t[e].href.toLowerCase().indexOf("basetype-")&&t[e].setAttribute("data-rel","_del")}e=document.querySelectorAll('[data-rel="_del"]'),e.forEach((t=>{t.parentNode.removeChild(t)})),""!=i&&(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link href="'+s+i+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link href="'+s+i+'" rel="stylesheet">'))}else if("container"===l){let i=document.querySelector(".builder-active");if(!i)return;let n=o.parentsHasClass(i,"is-box");if(n.getAttribute("class").split(/\s+/).forEach((t=>{-1!=t.indexOf("type-")&&o.removeClass(n,t)})),""!==t){o.addClass(n,t);let i=!1,a=document.getElementsByTagName("link");for(let t=0;t<a.length;t++){-1!=a[t].href.toLowerCase().indexOf(e.toLowerCase())&&(i=!0)}i||(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'))}let a=document.getElementsByTagName("link");for(let t=0;t<a.length;t++)if("contentstyle"===a[t].getAttribute("data-name")){let e=a[t].getAttribute("data-class");this.builder.wrapperEl.querySelector("."+e)||a[t].setAttribute("data-rel","_del")}document.querySelectorAll('[data-rel="_del"]').forEach((t=>{t.parentNode.removeChild(t)}))}if("box"===a){let i=this.builder.activeBox;if(i){if(i.getAttribute("class").split(/\s+/).forEach((t=>{-1!=t.indexOf("type-")&&o.removeClass(i,t)})),""!==t){o.addClass(i,t);let n=!1,a=document.getElementsByTagName("link");for(let t=0;t<a.length;t++){-1!=a[t].href.toLowerCase().indexOf(e.toLowerCase())&&(n=!0)}n||(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'))}let n=document.getElementsByTagName("link");for(let t=0;t<n.length;t++)if("contentstyle"===n[t].getAttribute("data-name")){let e=n[t].getAttribute("data-class");this.builder.wrapperEl.querySelector("."+e)||n[t].setAttribute("data-rel","_del")}document.querySelectorAll('[data-rel="_del"]').forEach((t=>{t.parentNode.removeChild(t)}))}}this.builder.settings.onChange()}getTemplatesHtml(){let t="";this.builder.templateJSON.forEach((e=>{t+=`{\n url: '${e.url}',\n path: '${e.path}',\n pathReplace: '${e.pathReplace}',\n ${Object.prototype.hasOwnProperty.call(e,"numbering")?`numbering: ${e.numbering},`:"numbering:false,"}\n ${Object.prototype.hasOwnProperty.call(e,"showNumberOnHover")?`showNumberOnHover: ${e.showNumberOnHover},`:"showNumberOnHover:false,"}\n },`}));let e="";this.builder.templates.forEach((t=>{e+=`{\n url: '${t.url}',\n path: '${t.path}',\n pathReplace: '${t.pathReplace}',\n ${Object.prototype.hasOwnProperty.call(t,"numbering")?`numbering: ${t.numbering},`:"numbering:false,"}\n ${Object.prototype.hasOwnProperty.call(t,"showNumberOnHover")?`showNumberOnHover: ${t.showNumberOnHover},`:"showNumberOnHover:false,"}\n },`}));let i=`{\n id: ${this.builder.defaultCategory.id},\n designId: ${this.builder.defaultCategory.designId},\n }`,n="";this.builder.featuredCategories.forEach((t=>{n+=`{\n id: '${t.id}',\n designId: '${t.designId}',\n name: '${t.name}',\n },`}));let o="",s="";"small"===this.builder.templateThumbnailSize?(o="250px",s="30px 0 0 30px"):"medium"===this.builder.templateThumbnailSize?(o="350px",s="40px 0 0 40px"):(o="450px",s="50px 0 0 50px");let a=`\n <!DOCTYPE html>\n <html lang="en">\n <head>\n <meta charset="utf-8">\n <title>Browse</title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <meta name="description" content="">\n <link rel="shortcut icon" href="#" />\n <style>\n body {\n margin: 0;\n background: #fff;\n font-family: sans-serif;\n font-weight: 300;\n }\n h2 {\n font-weight: 300;\n }\n button {\n cursor: pointer;\n border: none;\n background: #fdfdfd;\n padding: 12px 25px;\n border-radius: 500px;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;;\n color: #333;\n }\n button.on {\n background: #f5f5f5;\n }\n \n .featured-categories {\n background-color: #f5f5f5;\n position: absolute;\n width: 100%;\n height: 88px;\n z-index: 1;\n padding: 14px 15px 0 25px;\n box-sizing: border-box;\n /* box-shadow: 0 5px 15px rgb(0 0 0 / 5%); */\n }\n .featured-categories button {\n margin: 10px 15px 0 0;\n font-size: 11px;\n }\n \n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 88px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 0px;\n box-sizing: border-box;\n overflow: auto;\n transition: all 200ms ease;\n }\n .is-design-list > button {\n position: relative;\n width: ${o};\n overflow: hidden;\n margin: ${s};\n cursor: pointer;\n display: inline-block;\n padding: 0px;\n border: rgba(219, 219, 219, 0.39) 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n }\n .is-design-list > button img {\n box-shadow: none;\n opacity: 1;\n display: block;\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n max-width: 500px;\n width: 100%\n }\n .is-design-list > button .is-overlay {\n position: absolute;\n top:0px;\n left:0px;\n width:100%;\n height:100%;\n }\n .is-design-list > button .is-overlay:after {\n background: rgba(0, 0, 0, 0.05);\n position: absolute;\n content: "";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n }\n .dark .is-design-list > button .is-overlay:after {\n opacity: 0.97;\n }\n .is-design-list > button:hover .is-overlay:after {\n opacity: 0.5;\n }\n \n .mega-menu {\n display: none;\n transform: translateY(-100%);\n background: #f5f5f5;\n overflow-x: hidden;\n overflow-y: auto;\n position: fixed;\n top: 88px;\n left: 0;\n right: 0;\n width: 100%;\n height: auto;\n height: calc(100% - 88px);\n max-height: 700px;\n z-index: 1;\n padding: 10px 50px 40px 40px;\n box-sizing: border-box;\n transition: all 300ms ease;\n min-width:400px;\n min-height: 200px;\n /* box-shadow: 0 5px 15px rgb(0 0 0 / 5%); */\n }\n .mega-menu.active {\n opacity: 1;\n transform: scale(1);\n transform: translateY(0);\n }\n .mega-menu h2 {\n margin-top:30px;\n font-size: 21px\n }\n .mega-menu button {\n margin:15px 15px 0 0;\n }\n .mega-menu .close {\n position: absolute;\n top: 0px; right: 0px;\n background: transparent;\n width: 50px;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 2px;;\n z-index: 1;\n }\n .mega-menu-content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding-left: 25px;\n padding-bottom: 35px;\n box-sizing: border-box;\n }\n\n .is-waiting {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 88px solid;\n width: 100%;\n height: 100%;\n background-color: #fff;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 50px\n }\n .is-waiting2 {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background-color: #f5f5f5;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 20px 50px;\n }\n\n .spinner {\n -webkit-animation: rotator 1.4s linear infinite;\n animation: rotator 1.4s linear infinite;\n }\n \n @-webkit-keyframes rotator {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n }\n \n @keyframes rotator {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n }\n .path {\n stroke: #939393; /* #d9d9d9; */\n stroke-dasharray: 187;\n stroke-dashoffset: 0;\n transform-origin: center;\n -webkit-animation: dash 1.4s ease-in-out infinite;\n animation: dash 1.4s ease-in-out infinite;\n }\n \n @-webkit-keyframes dash {\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n }\n @keyframes dash {\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n }\n\n .is-number {\n opacity: 0;\n position: absolute;\n top: 3px;\n right: 3px;\n color: #444;\n padding: 3px 6px;\n background: rgb(255 255 255);\n border-radius: 500px;\n transition: all 0.3s ease;\n }\n .is-number.show {\n opacity: 1;\n }\n .is-design-list > button:hover .is-number {\n opacity: 1;\n }\n\n\n\n body {\n margin: 0;\n } \n .dark .is-design-list > button {\n border: none;\n }\n .dark .path,\n .colored .path,\n .colored-dark .path {\n stroke: #b3b3b3;\n }\n\n /* Scrollbar for modal */\n\n /* Darker color, because background for snippet thumbnails is always light. */\n .dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(78 78 78 / 62%) auto;\n }\n .dark *::-webkit-scrollbar {\n width: 12px;\n }\n .dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .dark *::-webkit-scrollbar-thumb {\n background-color:rgb(78 78 78 / 62%);\n }\n\n .colored-dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(100, 100, 100) auto;\n }\n .colored-dark *::-webkit-scrollbar {\n width: 12px;\n }\n .colored-dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored-dark *::-webkit-scrollbar-thumb {\n background-color:rgb(100, 100, 100);\n }\n\n .colored * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .colored *::-webkit-scrollbar {\n width: 12px;\n }\n .colored *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n .light * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .light *::-webkit-scrollbar {\n width: 12px;\n }\n .light *::-webkit-scrollbar-track {\n background: transparent;\n }\n .light *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n .dark .is-design-list>div .is-overlay:after {\n background: rgb(78 78 78 / 13%);\n }\n </style>\n </head>\n <body style="touch-action: pan-y">`;return a+=`\n <div class="mega-menu">\n <div class="is-waiting2">\n\n <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">\n <circle class="path" fill="none" stroke-width="3" stroke-linecap="round" cx="33" cy="33" r="30"></circle>\n </svg>\n\n </div>\n \n <button class="close" tabindex="0"><svg style="width:40px;height:40px;flex:none;"><use xlink:href="#iconclose"></use></svg></button>\n \n <div class="mega-menu-content">\n </div>\n </div>\n \n <div class="featured-categories tabs">\n </div>\n \n <div class="is-design-list">\n </div>\n \n <div class="is-waiting">\n\n <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">\n <circle class="path" fill="none" stroke-width="3" stroke-linecap="round" cx="33" cy="33" r="30"></circle>\n </svg>\n \n </div>\n \n <svg width="0" height="0" style="position:absolute;display:none;">\n <defs>\n <symbol viewBox="0 0 24 24" id="iconclose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">\n <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>\n </symbol>\n </defs>\n </svg>\n \n <script>\n var template_list = [];\n <\/script>\n \x3c!-- <script src="basic.js"><\/script>\n <script src="examples.js"><\/script> --\x3e\n \n <script>\n \n // Configuration\n const featuredCategories = [\n ${n}\n ];\n const defaultCategory = ${i};\n const navbar = ${this.builder.navbar?"true":"false"};\n\n const slider = '${this.builder.slider}';\n\n const framework = '${this.builder.framework}'; \n const contentStylePath = '${this.builder.contentStylePath}'; \n\n const row = '${this.builder.row}'; \n const cols = [${this.builder.cols.map((t=>`'${t}'`))}];\n \n let templates = [\n ${e}\n ];\n \n let templateJSON = [\n ${t}\n ];\n // /Configuration\n\n if(templates.length > 0) templateJSON = [...templates];\n \n const loadJsFiles = (list, callback) => {\n if(list.length===0) {\n return;\n } else {\n const url = list[0].url;\n const script = document.createElement('script');\n script.src = url; \n script.async = true;\n script.onload = () => {\n callback(list[0]);\n loadJsFiles(list.slice(1), callback);\n };\n document.body.appendChild(script);\n } \n }\n \n const imageObserver = new IntersectionObserver((entries, imgObserver) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n const lazyImage = entry.target\n // console.log("lazy loading ", lazyImage)\n lazyImage.src = lazyImage.dataset.src\n lazyImage.classList.remove("lzy-img");\n imgObserver.unobserve(lazyImage);\n }\n })\n });\n \n const makeid = () => { //http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript\n var text = "";\n var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";\n for (var i = 0; i < 2; i++)\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n \n var text2 = "";\n var possible2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";\n for (var i = 0; i < 5; i++)\n text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));\n \n return text + text2;\n }\n \n const addDesign = (designid) => {\n\n const wrapper = parent._cb.doc.querySelector('.is-wrapper');\n \n let nIndex = 0;\n template_list.forEach(gallery=>{\n let designs = gallery.designs;\n designs.forEach(item=>{\n \n item.id = nIndex; //Give id\n \n if(nIndex===parseInt(designid)) {\n // alert(item.html);\n // alert(gallery.path);\n // alert(gallery.pathReplace);\n\n let html = item.html;\n let googleFonts = item.googleFonts;\n let contentCss = item.contentCss;\n let contentClass = item.contentClass;\n \n let designPath = gallery.path;\n let snippetPathReplace = gallery.pathReplace;\n \n //To Tailwind\n if (framework === 'tailwind') {\n html = html.replace(new RegExp(' container', 'g'), ' container');\n \n //html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('"row', 'g'), '"' + 'flex flex-col md:flex-row');\n \n html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');\n html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');\n html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed\n html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');\n html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');\n }\n \n //To Bootstrap\n if (framework === 'bootstrap') {\n html = html.replace(new RegExp(' container', 'g'), ' container-fluid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'col-md-12');\n html = html.replace(new RegExp('column half', 'g'), 'col-md-6');\n html = html.replace(new RegExp('column third', 'g'), 'col-md-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'col-md-3');\n html = html.replace(new RegExp('column fifth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column sixth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column two-third', 'g'), 'col-md-8');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'col-md-9');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'col-md-10');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'btn btn-primary btn-lg');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'btn btn-default btn-lg');\n }`,a+="\n //To Foundation\n if (framework === 'foundation') {\n //html = html.replace(new RegExp(' container', 'g'), ' container');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'large-12 columns');\n html = html.replace(new RegExp('column half', 'g'), 'large-6 columns');\n html = html.replace(new RegExp('column third', 'g'), 'large-4 columns');\n html = html.replace(new RegExp('column fourth', 'g'), 'large-3 columns');\n html = html.replace(new RegExp('column fifth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column sixth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column two-third', 'g'), 'large-8 columns');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'large-9 columns');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'large-10 columns');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'button');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'secondary button');\n }\n \n //To UIKit\n if (framework === 'uikit') {\n html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');\n\n // html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('\"row', 'g'), '\"' + 'uk-grid');\n\n html = html.replace(new RegExp('column full', 'g'), 'uk-width-1-1');\n html = html.replace(new RegExp('column half', 'g'), 'uk-width-1-2');\n html = html.replace(new RegExp('column third', 'g'), 'uk-width-1-3');\n html = html.replace(new RegExp('column fourth', 'g'), 'uk-width-1-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'uk-width-1-5');\n html = html.replace(new RegExp('column sixth', 'g'), 'uk-width-1-6');\n html = html.replace(new RegExp('column two-third', 'g'), 'uk-width-2-3');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'uk-width-3-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'uk-width-5-6');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'uk-button uk-button-primary uk-button-large');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'uk-button uk-button-large');\n }\n \n //To Material\n if (framework === 'material') {\n html = html.replace(new RegExp(' container', 'g'), '');\n \n // html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('\"row', 'g'), '\"' + 'mdl-grid');\n\n html = html.replace(new RegExp('column full', 'g'), 'mdl-cell mdl-cell--12-col');\n html = html.replace(new RegExp('column half', 'g'), 'mdl-cell mdl-cell--6-col');\n html = html.replace(new RegExp('column third', 'g'), 'mdl-cell mdl-cell--4-col');\n html = html.replace(new RegExp('column fourth', 'g'), 'mdl-cell mdl-cell--3-col');\n html = html.replace(new RegExp('column fifth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column sixth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column two-third', 'g'), 'mdl-cell mdl-cell--8-col');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'mdl-cell mdl-cell--9-col');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'mdl-cell mdl-cell--10-col');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'mdl-button mdl-js-button mdl-button--raised');\n }\n\n if(framework ==='') {\n // Convert snippet into your defined 12 columns grid \n var rowClass = row;\n var colClass = cols;\n if(rowClass!=='' && colClass.length===12){\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('\"row', 'g'), '\"' + rowClass);\n \n html = html.replace(new RegExp('column full', 'g'), colClass[11]);\n html = html.replace(new RegExp('column half', 'g'), colClass[5]);\n html = html.replace(new RegExp('column third', 'g'), colClass[3]);\n html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);\n html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);\n html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);\n html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);\n html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);\n }\n }\n \n html = html.replace(/{id}/g, makeid());\n\n if(snippetPathReplace.length>0) {\n if (snippetPathReplace[0] != '') {\n var regex = new RegExp(snippetPathReplace[0], 'g');\n html = html.replace(regex, snippetPathReplace[1]);\n }\n }\n \n html = html.replace(/\\[%IMAGE_PATH%\\]/g, designPath);\n html = html.replace(/%5B%25IMAGE_PATH%25%5D/g, designPath); //If [%IMAGE_PATH%] is encoded (inside data-html)\n\n //Add html\n parent.contentbox.addIdea(html);\n \n //Add contentCss\n let exist = false;\n let links = parent._cb.doc.getElementsByTagName(\"link\");\n for (let i = 0; i < links.length; i++) {\n let src = links[i].href.toLowerCase();\n if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;\n }\n \n if (!exist) wrapper.insertAdjacentHTML('beforeend', '<link data-name=\"contentstyle\" data-class=\"' + contentClass + '\" href=\"' + contentStylePath + contentCss + '\" rel=\"stylesheet\">');\n }\n \n nIndex++;\n });\n });\n }\n \n const showDesigns = (catId, designId) => {\n\n if(template_list.length>0) {\n const wait = document.querySelector('.is-waiting');\n wait.style.display = 'none';\n }\n \n const designList = document.querySelector('.is-design-list');\n designList.style.opacity = 0;\n setTimeout(()=>{\n designList.innerHTML = '';\n designList.style.opacity = 1;\n designList.scrollTop = 0;\n \n let nIndex = 0;\n \n template_list.forEach(gallery=>{\n let designs = gallery.designs;\n\n let numbering = gallery.numbering;\n let showNumberOnHover = gallery.showNumberOnHover;\n let numberCount = 0;\n\n designs.forEach(item=>{\n let isSelected = false;\n let catSplit = item.category.split(',');\n for (let j = 0; j < catSplit.length; j++) {\n if (parseInt(catSplit[j]) === parseInt(catId) && parseInt(gallery.designId) === parseInt(designId)) {\n isSelected = true;\n }\n }\n \n item.id = nIndex; //Give id\n \n if (isSelected) {\n\n numberCount++;\n\n let html = '<button tabindex=\"0\" class=\"active\" data-id=\"' + item.id + '\" data-cat=\"\"' + item.category + '\">' +\n '<img class=\"lzy-img\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAaCAYAAAAjZdWPAAAEDmlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPpu5syskzoPUpqaSDv41lLRsUtGE2uj+ZbNt3CyTbLRBkMns3Z1pJjPj/KRpKT4UQRDBqOCT4P9bwSchaqvtiy2itFCiBIMo+ND6R6HSFwnruTOzu5O4a73L3PnmnO9+595z7t4LkLgsW5beJQIsGq4t5dPis8fmxMQ6dMF90A190C0rjpUqlSYBG+PCv9rt7yDG3tf2t/f/Z+uuUEcBiN2F2Kw4yiLiZQD+FcWyXYAEQfvICddi+AnEO2ycIOISw7UAVxieD/Cyz5mRMohfRSwoqoz+xNuIB+cj9loEB3Pw2448NaitKSLLRck2q5pOI9O9g/t/tkXda8Tbg0+PszB9FN8DuPaXKnKW4YcQn1Xk3HSIry5ps8UQ/2W5aQnxIwBdu7yFcgrxPsRjVXu8HOh0qao30cArp9SZZxDfg3h1wTzKxu5E/LUxX5wKdX5SnAzmDx4A4OIqLbB69yMesE1pKojLjVdoNsfyiPi45hZmAn3uLWdpOtfQOaVmikEs7ovj8hFWpz7EV6mel0L9Xy23FMYlPYZenAx0yDB1/PX6dledmQjikjkXCxqMJS9WtfFCyH9XtSekEF+2dH+P4tzITduTygGfv58a5VCTH5PtXD7EFZiNyUDBhHnsFTBgE0SQIA9pfFtgo6cKGuhooeilaKH41eDs38Ip+f4At1Rq/sjr6NEwQqb/I/DQqsLvaFUjvAx+eWirddAJZnAj1DFJL0mSg/gcIpPkMBkhoyCSJ8lTZIxk0TpKDjXHliJzZPO50dR5ASNSnzeLvIvod0HG/mdkmOC0z8VKnzcQ2M/Yz2vKldduXjp9bleLu0ZWn7vWc+l0JGcaai10yNrUnXLP/8Jf59ewX+c3Wgz+B34Df+vbVrc16zTMVgp9um9bxEfzPU5kPqUtVWxhs6OiWTVW+gIfywB9uXi7CGcGW/zk98k/kmvJ95IfJn/j3uQ+4c5zn3Kfcd+AyF3gLnJfcl9xH3OfR2rUee80a+6vo7EK5mmXUdyfQlrYLTwoZIU9wsPCZEtP6BWGhAlhL3p2N6sTjRdduwbHsG9kq32sgBepc+xurLPW4T9URpYGJ3ym4+8zA05u44QjST8ZIoVtu3qE7fWmdn5LPdqvgcZz8Ww8BWJ8X3w0PhQ/wnCDGd+LvlHs8dRy6bLLDuKMaZ20tZrqisPJ5ONiCq8yKhYM5cCgKOu66Lsc0aYOtZdo5QCwezI4wm9J/v0X23mlZXOfBjj8Jzv3WrY5D+CsA9D7aMs2gGfjve8ArD6mePZSeCfEYt8CONWDw8FXTxrPqx/r9Vt4biXeANh8vV7/+/16ffMD1N8AuKD/A/8leAvFY9bLAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAAAtoAMABAAAAAEAAAAaAAAAAHZhQ/wAAABcSURBVFgJ7dLBCcAwEANBx/337IQUsK/FcLD3FQgx9nO+W8NuD9v7z230rVdLOmkQ6HsAjholrXJCWdKAo0ZJq5xQljTgqFHSKieUJQ04apS0ygllSQOOGo2UfgEpPQQwSb0YngAAAABJRU5ErkJggg==\" data-src=\"' + gallery.path + item.thumbnail + '\">' +\n '<span class=\"is-overlay\"></span>' +\n (numbering? (showNumberOnHover?'<div class=\"is-number\">'+(numberCount+'').padStart(3, '0')+'</div>':'<div class=\"is-number show\">'+(numberCount+'').padStart(3, '0')+'</div>') :'') +\n '</button>';\n \n if(item.type === 'glide' || item.type === 'slick') {\n if(slider==='glide') {\n if(item.type === 'glide') {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n } \n } else if(slider==='slick') {\n if(item.type === 'slick') {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n } \n } else if(slider==='all') {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n } \n } else if(item.type === 'navbar' ) {\n if(navbar) {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n }\n } else {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n }\n }",a+="\n nIndex++;\n });\n });\n \n const arr = document.querySelectorAll('img.lzy-img')\n arr.forEach((v) => {\n imageObserver.observe(v);\n });\n \n closeMegaMenu();\n \n if(designList.innerHTML.trim() === '') {\n // showDesigns(catId, designId);\n setTimeout(()=>{\n showDesigns(catId, designId);\n }, 300);\n }\n \n }, 200);\n \n // Set active Button\n const menu = document.querySelector('.mega-menu');\n menu.setAttribute('data-active-cat', catId);\n menu.setAttribute('data-active-design', designId);\n const featuredCat = document.querySelector('.featured-categories');\n const btnActive1 = menu.querySelector('button.on');\n const btnActive2 = featuredCat.querySelector('button.on');\n if(btnActive1) btnActive1.classList.remove('on');\n if(btnActive2) btnActive2.classList.remove('on');\n const btn1 = menu.querySelector('.item-'+catId+'-'+designId);\n const btn2 = featuredCat.querySelector('.item-'+catId+'-'+designId);\n if(btn1) btn1.classList.add('on');\n if(btn2) btn2.classList.add('on');\n }\n \n const renderMegaMenu = () => {\n \n if(template_list.length>0) {\n const wait2 = document.querySelector('.is-waiting2');\n wait2.style.display = 'none';\n }\n\n const menu = document.querySelector('.mega-menu');\n const menuContent = document.querySelector('.mega-menu-content');\n menuContent.innerHTML = '';\n \n let catNum = 0;\n template_list.forEach(gallery=>{\n let categories = gallery.categories;\n let html = '<h2>'+parent._cb.out(gallery.name)+'</h2><div class=\"cat' +catNum+ '\"></div>';\n menuContent.insertAdjacentHTML('beforeend', html);\n const catList = menuContent.querySelector('.cat'+catNum);\n \n categories.forEach(categoryItem=>{\n let html= '<button class=\"item-'+categoryItem.id+'-'+gallery.designId+'\" data-cat=\"'+categoryItem.id+'\" data-design=\"'+gallery.designId+'\">'+parent._cb.out(categoryItem.name)+'</button>';\n catList.insertAdjacentHTML('beforeend', html);\n const btn = catList.querySelector('.item-'+categoryItem.id+'-'+gallery.designId);\n btn.addEventListener('click', (e)=>{\n const catId = btn.getAttribute('data-cat');\n const designId = btn.getAttribute('data-design');\n showDesigns(catId, designId);\n \n closeMegaMenu();\n });\n });\n \n catNum++;\n });\n \n // Set active Button\n const catId = menu.getAttribute('data-active-cat');\n const designId = menu.getAttribute('data-active-design');\n if(catId && designId) {\n const btnActive = menu.querySelector('button.on');\n if(btnActive) btnActive.classList.remove('on');\n const btn = menu.querySelector('.item-'+catId+'-'+designId);\n if(btn) btn.classList.add('on');\n }\n }\n \n const handleClick = (e) => {\n if(!e.target.closest('.mega-menu') && !e.target.closest('[data-cat=\"0\"]')) { \n closeMegaMenu();\n }\n };\n \n const showMegaMenu = () => {\n const menu = document.querySelector('.mega-menu');\n menu.style.display = 'block';\n setTimeout(()=>{\n menu.classList.add('active');\n const menuClose = menu.querySelector('.close');\n menuClose.focus();\n }, 10);\n const btn = document.querySelector('[data-cat=\"0\"]');\n btn.classList.add('on');\n \n document.addEventListener('click', handleClick);\n parent.document.addEventListener('click', handleClick); \n }\n \n const closeMegaMenu = () => {\n const menu = document.querySelector('.mega-menu.active');\n if(!menu) return;\n menu.classList.remove('active');\n setTimeout(()=>{\n menu.style.display = '';\n }, 300);\n const btn = document.querySelector('[data-cat=\"0\"]');\n btn.classList.remove('on');\n \n document.removeEventListener('click', handleClick);\n parent.document.removeEventListener('click', handleClick); \n }\n \n const renderResize = () => {\n const btns = document.querySelectorAll('.featured-categories button');\n let viewportWidth = document.body.clientWidth;\n if(viewportWidth < 1024 && viewportWidth>=800) {\n let n = 0;\n btns.forEach(btn=>{\n if(n>=5) {\n btns[n].style.display = 'none';\n } else {\n btns[n].style.display = '';\n }\n n++;\n });\n } else if(viewportWidth < 800) {\n let n = 0;\n btns.forEach(btn=>{\n if(n>=2) {\n btns[n].style.display = 'none';\n } else {\n btns[n].style.display = '';\n }\n n++;\n });\n } else {\n let n = 0;\n btns.forEach(btn=>{\n btns[n].style.display = '';\n n++;\n });\n }\n btns[btns.length-1].style.display = '';\n };\n\n const renderFeaturedCategories= () => {\n let html = '';\n const div = document.querySelector('.featured-categories');\n featuredCategories.forEach(item=>{\n html += '<button class=\"item-'+item.id+'-'+item.designId+'\" data-cat=\"'+item.id+'\" data-design=\"'+item.designId+'\">'+parent._cb.out(item.name)+'</button>';\n });\n html += '<button data-cat=\"0\">'+parent._cb.out('All Categories')+'</button>';\n div.insertAdjacentHTML('beforeend', html);\n \n const menu = document.querySelector('.mega-menu');\n const btns = div.querySelectorAll('[data-cat]');\n btns.forEach(btn=>{\n btn.addEventListener('click', (e)=>{\n const catId = btn.getAttribute('data-cat');\n const designId = btn.getAttribute('data-design');\n if(catId==='0') {\n // Show All Categories' Mega Menu\n showMegaMenu();\n } else {\n showDesigns(catId, designId);\n }\n });\n });",a+="\n const menuClose = menu.querySelector('.close');\n menuClose.addEventListener('click',()=>{\n closeMegaMenu();\n });\n\n renderResize();\n }\n \n document.addEventListener(\"DOMContentLoaded\", function() {\n \n renderFeaturedCategories();\n \n const wait = document.querySelector('.is-waiting');\n wait.style.display = 'flex';\n const wait2 = document.querySelector('.is-waiting2');\n wait2.style.display = 'flex';\n \n let totalLoaded = 0;\n\n let designId = 1;\n loadJsFiles(templateJSON, (template)=>{\n // console.log(template_list)\n\n\n // ---- Old Version (backward compatible) ----\n totalLoaded+=1;\n if(template_list.length!==totalLoaded) {\n if(template.url.indexOf('basic.js')!==-1) {\n\n let arr = {\n name: 'Simple Start',\n categories: [\n { id: 5, name: 'Random' }, \n { id: 1, name: 'Basic' },\n { id: 2, name: 'Slider' },\n { id: 3, name: 'Video' },\n { id: 4, name: 'Custom' },\n ],\n designs: window.data_basic.designs\n };\n template_list.push(arr);\n\n }\n if(template.url.indexOf('examples.js')!==-1) {\n \n let arr = {\n name: 'Quick Start',\n categories: [\n { id: 101, name: 'Header' }, \n { id: 118, name: 'Article' },\n { id: 102, name: 'Photos' },\n { id: 103, name: 'Profile' },\n { id: 104, name: 'Products, Services' },\n { id: 105, name: 'Features' },\n { id: 106, name: 'Process' },\n { id: 107, name: 'Pricing' },\n { id: 108, name: 'Skills' },\n { id: 109, name: 'Achievements' },\n { id: 110, name: 'Quotes' },\n { id: 111, name: 'Partners' },\n { id: 112, name: 'As Featured On' },\n { id: 113, name: 'Page Not Found' },\n { id: 114, name: 'Coming Soon' },\n { id: 115, name: 'Help, FAQ' },\n { id: 116, name: 'Contact' },\n { id: 117, name: 'Footer' },\n ],\n designs: window.data_examples.designs\n };\n template_list.push(arr);\n\n }\n }\n // ---- /Old Version ----\n\n\n // console.log(template)\n const templateAdded = template_list[template_list.length-1];\n templateAdded.path = template.path;\n templateAdded.pathReplace = template.pathReplace;\n templateAdded.designId = designId;\n templateAdded.numbering = template.numbering;\n templateAdded.showNumberOnHover = template.showNumberOnHover;\n // console.log(templateAdded);\n \n renderMegaMenu();\n \n const designList = document.querySelector('.is-design-list');\n if(designList.innerHTML.trim()==='') { // first load\n const cats = templateAdded.categories;\n cats.forEach(cat=>{\n if(parseInt(cat.id)===defaultCategory.id && designId===defaultCategory.designId) {\n showDesigns(defaultCategory.id, designId);\n }\n });\n }\n designId++;\n });\n })\n \n \n document.addEventListener('keydown', (e)=>{\n if(e.keyCode === 27) { // escape key\n \n const menu = document.querySelector('.mega-menu.active');\n if(menu) {\n closeMegaMenu();\n \n e.preventDefault();\n return;\n } \n }\n });\n\n window.addEventListener('resize', ()=>{\n renderResize();\n });\n\n applyParentStyles();\n \n // Style stuff\n function applyParentStyles() {\n var cssString = '' +\n 'html {' +\n '--area-color: ' + parent._cb.styleModalColor + ';' +\n '--area-background: ' + parent._cb.styleModalBackground + ';' +\n '--area2-color: ' + parent._cb.styleSnippetColor + ';' +\n '--area2-background: ' + parent._cb.styleSnippetBackground + ';' +\n '--tabs-background: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '--tab-item-color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n '--tab-item-background: ' + parent._cb.styleSnippetTabItemBackground + ';' +\n '--tab-item-active: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +\n '--tab-item-hover: ' + parent._cb.styleSnippetTabItemBackgroundHover + ';' +\n '--mega-menu: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '--is-waiting: ' + parent._cb.styleSnippetBackground + ';' +\n '--is-waiting2: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '}' +\n '.area2 {' +\n 'color: var(--area2-color);' +\n 'background: var(--area2-background);' +\n '}' +\n '.area2 button {' +\n 'color: var(--area2-color);' +\n '}' +\n '.area2 button svg{' +\n 'fill: var(--area2-color);' +\n '}' +\n '.tabs {' +\n 'background: var(--tabs-background);' +\n '}' +\n '.tabs button, .mega-menu button {' +\n 'color: var(--tab-item-color);' +\n 'background: var(--tab-item-background);' +\n '}' +\n '.tabs button.on, .mega-menu button.on {' +\n 'background: var(--tab-item-active);' +\n '}' +\n '.tabs button.on:hover, .mega-menu button.on:hover {' +\n 'background: var(--tab-item-active);' +\n '}' +\n '.tabs button:hover, .mega-menu button:hover {' +\n 'background: var(--tab-item-hover);' +\n '}' +\n '.mega-menu {' +\n 'background: var(--mega-menu);' +\n '}' +\n '.mega-menu button.close:hover {' +\n 'background: var(--mega-menu);' +\n '}' +\n '.is-waiting {' +\n 'background: var(--is-waiting);' +\n '}' +\n '.is-waiting2 {' +\n 'background: var(--is-waiting2);' +\n '}' +\n '';\n \n let themestyle = document.querySelector('[data-theme-style]');\n if(themestyle) themestyle.parentNode.removeChild(themestyle);\n \n var style = document.createElement(\"style\");\n style.setAttribute('data-theme-style','');\n style.innerHTML = cssString;\n document.head.appendChild(style);\n\n if(parent._cb.styleDark) {\n document.body.setAttribute('class', 'dark');\n } else if(parent._cb.styleColored) {\n document.body.setAttribute('class', 'colored');\n } else if(parent._cb.styleColoredDark) {\n document.body.setAttribute('class', 'colored-dark');\n } else if(parent._cb.styleLight) {\n document.body.setAttribute('class', 'light');\n } else {\n document.body.setAttribute('class', '');\n }\n\n document.body.classList.add('area2');\n }\n <\/script>\n </body>\n </html>\n ",a}getTemplatesHtml_OLD(){const t=this.builder.designUrl1,e=this.builder.designUrl2;let n=`\n <!DOCTYPE HTML>\n <html>\n <head>\n <meta charset="utf-8">\n <title></title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <meta name="description" content=""> \n <style> \n body {\n /* background: rgba(255,255,255,0.7); */\n margin: 0;\n }\n \n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 80px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 0px;\n box-sizing: border-box;\n overflow: auto;\n }\n \n .is-design-list>div {\n position:relative;\n /* background: #fff; */\n width: 250px;\n overflow: hidden;\n margin: 32px 0 0 30px;\n cursor: pointer;\n display: inline-block;\n outline: rgba(219, 219, 219, 0.39) 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius:2px;\n }\n \n .is-design-list>div img {\n box-shadow: none;\n opacity: 1;\n display: block;\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n max-width: 400px;\n width: 100%\n }\n \n .is-overlay {\n position:absolute;left:0px;top:0px;width:100%;height:100%;\n }\n .is-design-list>div .is-overlay:after {\n background: rgba(0, 0, 0, 0.03);\n position: absolute;\n content: "";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n }\n .is-design-list>div:hover .is-overlay:after {\n opacity: 0.9;\n }\n \n .is-category-list {\n position: relative;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 80px;\n /* background: #f5f5f5; */\n box-sizing: border-box;\n z-index: 1;\n }\n \n .is-category-list>div {\n display: inline-block;\n white-space: nowrap;\n padding: 13px 10px 0 20px;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n /* background: #f5f5f5; */\n }\n \n .is-category-list > div > div {\n margin-bottom:10px;\n margin-left:5px;\n }\n .is-category-list > div > a {\n display: inline-block;\n padding: 10px 25px;\n /* background: #fefefe;\n color: #000; */\n border-radius: 50px;\n \n margin: 0 15px 8px 0;\n text-decoration: none;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);\n }\n \n .is-category-list > div > a:hover {\n /* background: #fafafa;\n color: #000; */\n }\n .is-category-list > div > a.active {\n /* background: #f5f5f5;\n color: #000; */\n box-shadow: none;\n }\n \n .is-category-list a:focus {\n outline: ${this.builder.editor.styleOutlineColor} 2px solid;\n }\n\n .is-design-list>div:focus {\n outline: ${this.builder.editor.styleOutlineColor} 2px solid;\n }\n \n `;return n+="\n \n .is-more-categories {\n display: none;\n flex-flow: wrap;\n position: absolute;\n width: 400px;\n box-sizing: border-box;\n padding: 0;\n z-index: 1;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n /* background: #fff; */\n }\n \n .is-more-categories a {\n width: 200px;\n float: left;\n display: block;\n box-sizing: border-box;\n padding: 12px 20px;\n /* background: #fff; */\n text-decoration: none;\n /* color: #000; */\n line-height: 1.6;\n }\n \n /* .is-more-categories a:hover {\n background:#eee;\n }\n .is-more-categories a.active {\n background:#eee;\n } */\n .is-more-categories.active {\n display: flex;\n }\n\n /*\n .is-category-list {visibility:hidden}\n .is-more-categories {visibility:hidden}\n */\n \n /* Responsive */\n .is-category-list > div > a.more-basic {display:none}\n .is-category-list > div > .screen1 {display:inline-block}\n .is-more-categories .screen1 {display:none}\n .is-category-list > div > .screen2 {display:inline-block}\n .is-more-categories .screen2 {display:none} \n @media all and (max-width: 970px) {\n .is-category-list > div > .screen1 {display:none}\n .is-more-categories .screen1 {display:block}\n .is-category-list > div > a.more-basic {display:inline-block}\n } \n @media all and (max-width: 690px) {\n .is-category-list > div > .screen2 {display:none}\n .is-more-categories .screen2 {display:block}\n .is-category-list > div > a.more-basic {display:inline-block}\n } \n .is-more-categories a.cms-option {display:none}\n \n /* Enable Module/Placeholder \n .is-category-list > div > a.more-basic {display:inline-block}\n .custom {display:none} \n .is-more-categories a.cms-option {display:block}\n */\n \n \n /* First Loading */\n .is-category-list {opacity:0;transition: opacity ease 0.3s;} \n .is-design-list {opacity:0;transition: opacity ease 0.3s;} \n \n </style> \n </head>",n+=`<body>\n \n <div class="is-category-list">\n \x3c!--<a href="" data-cat="0">Default</a>--\x3e\n <div style="border-right: rgba(255,255,255,0.1) 1px solid;">\n <div>${i("Simple Start:")}</div>\n <a href="" data-cat="5">${i("Random")}</a>\n <a href="" data-cat="1" class="screen2">Basic</a>\n <a href="" class="slider-section screen2" data-cat="2">${i("Slider")}</a>\n <a href="" data-cat="3" class="screen1 screen2">${i("Video")}</a>\n <a href="" data-cat="4" class="screen1 screen2 custom">${i("Custom")}</a>\n <a href="" class="more-basic">${i("More")}</a>\n </div>\n <div>\n <div>Quick Start: </div>\n <a href="" data-cat="101" class="screen2">${i("Header")}</a>\n <a href="" data-cat="118" class="screen2">${i("Article")}</a>\n <a href="" data-cat="103" class="screen1 screen2">${i("Profile")}</a>\n <a href="" class="more-examples">${i("More")}</a>\n </div>\n </div>\n <div id="morebasic" class="is-more-categories" style="width:200px">\n <a href="" data-cat="1" class="screen2">${i("Basic")}</a>\n <a href="" data-cat="2" class="screen2">${i("Slider")}</a>\n <a href="" data-cat="3" class="screen1">${i("Video")}</a>\n <a href="" data-cat="4" class="screen1">${i("Custom")}</a>\n\n <a href="" data-cat="51" class="cms-option">${i("Module")}</a>\n <a href="" data-cat="52" class="cms-option">${i("Placeholder")}</a>\n </div>\n <div id="morecat" class="is-more-categories">\n <a href="" data-cat="101" class="screen2">${i("Header")}</a>\n <a href="" data-cat="118" class="screen2">${i("Article")}</a>\n <a href="" data-cat="103" class="screen1 screen2">${i("Profile")}</a>\n\n <a href="" data-cat="102">${i("Photos")}</a>\n <a href="" data-cat="104">${i("Products, Services")}</a>\n <a href="" data-cat="105">${i("Features")}</a>\n <a href="" data-cat="106">${i("Process")}</a>\n <a href="" data-cat="107">${i("Pricing")}</a>\n <a href="" data-cat="108">${i("Skills")}</a>\n <a href="" data-cat="109">${i("Achievements")}</a>\n <a href="" data-cat="110">${i("Quotes")}</a>\n <a href="" data-cat="111">${i("Partners")}</a>\n <a href="" data-cat="112">${i("As Featured On")}</a> \n <a href="" data-cat="113">${i("Page Not Found")}</a>\n <a href="" data-cat="114">${i("Coming Soon")}</a>\n <a href="" data-cat="115">${i("Help, FAQ")}</a>\n <a href="" data-cat="116">${i("Contact")}</a>\n <a href="" data-cat="117" class="static-section">${i("Footer")}</a>\n \n <div class="template-extension" style="display:none">\n \x3c!--\n <div style="font-weight: 600;padding: 15px 0 10px 19px;width: 100%;position: relative !important;border-top: rgb(0 0 0 / 4%) 1px solid;">\n Writing Set\n </div>\n <div>\n <a href="" data-cat="102">${i("General")}</a>\n <a href="" data-cat="108">${i("Agency")}</a>\n <a href="" data-cat="114">${i("Travel")}</a>\n <a href="" data-cat="116">${i("Food")}</a>\n </div>\n --\x3e\n </div>\n\n </div>\n\n <div class="is-design-list">\n </div>\n \n <script src="${t}"><\/script> \n <script src="${e}"><\/script> \n \n <script>\n\n applyParentStyles();\n setTimeout(()=>{\n document.querySelector('.is-category-list').style.opacity = 1;\n document.querySelector('.is-design-list').style.opacity = 1;\n },300);\n\n \n function hasClass(element, classname) {\n if(!element) return false;\n try{\n let s = element.getAttribute('class');\n if(!s) return false;\n let exists = false;\n s.split(' ').forEach((item)=>{\n if(item===classname) {\n exists=true;\n }\n });\n return exists;\n } catch(e) { \n // Do nothing\n }\n }\n\n function appendHtml(parent, html) {\n parent.insertAdjacentHTML('beforeend', html);\n }\n function addClass(element, classname) {\n if(!element) return;\n if(element.length) {\n element.forEach((elm) => {\n _addClass(elm, classname);\n })\n return;\n } \n _addClass(element, classname);\n \n }`,n+=`\n function _addClass(element, classname) {\n if(!element) return;\n if(element.length) {\n return;\n } \n if(hasClass(element,classname)) return;\n if(element.classList.length===0) element.className = classname;\n else element.className = element.className + ' ' + classname;\n element.className = element.className.replace(/ +/g, ' ');\n }\n\n function _removeClass(element, classname) {\n if(!element) return;\n if(!element) return;\n if(element.classList.length>0) {\n let i, j, imax, jmax;\n let classesToDel = classname.split(' ');\n for (i=0, imax=classesToDel.length; i<imax; ++i) {\n if (!classesToDel[i]) continue;\n let classtoDel = classesToDel[i];\n \n let sClassName = ''; \n let currentClasses = element.className.split(' ');\n for (j=0, jmax=currentClasses.length; j<jmax; ++j) {\n if (!currentClasses[j]) continue;\n if (currentClasses[j]!==classtoDel) sClassName += currentClasses[j] + ' ';\n }\n element.className = sClassName.trim();\n }\n if(element.className==='') element.removeAttribute('class');\n }\n }\n function removeClass(element, classname) {\n if(!element) return;\n if(element.length) {\n element.forEach((elm) => {\n _removeClass(elm, classname);\n })\n return;\n } \n _removeClass(element, classname);\n }\n function getElementOffset(el) {\n const rect = el.getBoundingClientRect();\n \n return {\n top: rect.top + window.pageYOffset,\n left: rect.left + window.pageXOffset,\n width: rect.width,\n height: rect.height\n };\n }\n \n var defaultCat = ${this.builder.defaultDesignCategory}; //Show 'Header' category: 101\n var disableStaticSection = false;\n try {\n disableStaticSection = ${this.builder.disableStaticSection};\n } catch (e) { }\n if (disableStaticSection) document.querySelector('.static-section').style.display = 'none';\n\n var elm = document.querySelector('.is-category-list');\n var tab = elm.querySelector('[data-cat="' + defaultCat + '"]');\n if(tab) addClass(tab,'active');\n\n elm = document.querySelector('#morecat');\n tab = elm.querySelector('[data-cat="' + defaultCat + '"]');\n if(tab) addClass(tab,'active');\n\n elm = document.querySelector('#morebasic');\n tab = elm.querySelector('[data-cat="' + defaultCat + '"]');\n if(tab) addClass(tab,'active');\n \n /*\n elm = document.querySelector('.is-category-list');\n elm.style.visibility = 'visible';\n var elms = document.querySelectorAll('.is-more-categories'); \n elms.forEach(function(elm){\n elm.style.visibility = 'visible';\n });\n */\n\n var nIndex = 1;\n var path = '${this.builder.designPath}';\n var navbar = ${this.builder.navbar};\n data_basic.designs.forEach(function(item){\n\n var isdefault = false;\n var catSplit = item.category.split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == defaultCat) {\n isdefault = true;\n }\n }\n item.id = nIndex; //Give id to each record\n \n if (isdefault) {\n var elm = document.querySelector('.is-design-list');\n\n var html = '<div role="button" tabindex="0" class="active" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path + item.thumbnail + '"><span class="is-overlay"></span></div>';\n //appendHtml(elm, html);\n\n if(item.type === 'navbar' ) {\n if(navbar) {\n appendHtml(elm, html);\n }\n } else {\n appendHtml(elm, html);\n }\n }\n \n nIndex++;\n });`,n+="\n data_examples.designs.forEach(function(item){\n\n var isdefault = false;\n var catSplit = item.category.split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == defaultCat) {\n isdefault = true;\n }\n }\n item.id = nIndex; //Give id to each record\n \n if (isdefault) {\n var elm = document.querySelector('.is-design-list');\n var html = '<div role=\"button\" tabindex=\"0\" data-id=\"' + item.id + '\" data-cat=\"' + item.category + '\"><img src=\"' + path + item.thumbnail + '\"><span class=\"is-overlay\"></span></div>';\n appendHtml(elm, html);\n }\n \n nIndex++;\n });\n\n var btnMore1 = document.querySelector('.more-basic');\n var btnMore2 = document.querySelector('.more-examples');\n btnMore1.addEventListener('click', function(e){\n let elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms, 'active');\n\n addClass(btnMore1, 'active');\n removeClass(btnMore2, 'active');\n\n let elm = document.querySelector('#morebasic');\n addClass(elm, 'active');\n\n var top = getElementOffset(btnMore1).top;\n var left = getElementOffset(btnMore1).left;\n top = top + 42;\n elm.style.top = top + 'px';\n elm.style.left = left + 'px';\n e.preventDefault();\n });\n btnMore2.addEventListener('click', function(e){\n let elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms, 'active');\n\n addClass(btnMore2, 'active');\n removeClass(btnMore1, 'active');\n\n let elm = document.querySelector('#morecat');\n addClass(elm, 'active');\n\n var top = getElementOffset(btnMore2).top;\n var left = getElementOffset(btnMore2).left;\n top = top + 42;\n elm.style.top = top + 'px';\n elm.style.left = 'auto';\n elm.style.right = '0px';\n e.preventDefault();\n });\n\n elms = document.querySelectorAll('.is-more-categories a');\n elms.forEach(function(elm){\n elm.addEventListener('click', function(e){\n\n selectCategory(elm);\n \n let cat = e.target.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n\n e.preventDefault();\n });\n });\n\n elms = document.querySelectorAll('.is-category-list a');\n elms.forEach(function(elm){\n elm.addEventListener('click', function(e){\n \n if(!elm.getAttribute('data-cat')) return;\n\n selectCategory(elm);\n \n e.preventDefault();\n });\n });\n\n var div = document.querySelectorAll('.is-design-list div');\n div.forEach(function(btn){\n btn.addEventListener('click', function(e){\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n btn.addEventListener('keydown', function(e){\n //Extra \n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n const items = e.target.parentNode.querySelectorAll('.active');\n if(items.length>0) {\n let lastItem = items[items.length-1];\n if(e.target===lastItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n }\n } else if ((e.which === 9 && e.shiftKey)) { // tab + shift key pressed\n const firstItem = e.target.parentNode.querySelector('.active');\n if(e.target===firstItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = firstItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n }\n });\n });\n\n document.addEventListener(\"click\", function(e) {\n var btn1 = document.querySelector('.more-basic');\n var btn2 = document.querySelector('.more-examples');\n var targetEl = e.target; // clicked element \n do {\n if(targetEl == btn1 || targetEl == btn2) {\n // Click inside\n return;\n }\n targetEl = targetEl.parentNode;\n } while (targetEl);\n\n // Click outside\n\n var elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms,'active');\n removeClass(btn1,'active');\n removeClass(btn2,'active');\n });",n+=`\n parent.document.addEventListener("click", function(e) {\n var btn1 = document.querySelector('.more-basic');\n var btn2 = document.querySelector('.more-examples');\n \n var elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms,'active');\n removeClass(btn1,'active');\n removeClass(btn2,'active');\n });\n\n // elm = document.querySelector('.is-category-list');\n // elm.style.display = 'block';\n elm = document.querySelector('.is-design-list');\n elm.style.display = 'block';\n\n var slider = '${this.builder.slider}';\n var navbar = ${this.builder.navbar};\n\n if(slider==='') document.querySelector('.slider-section').style.display = 'none';\n\n function selectCategory(elm) {\n \n var cat = elm.getAttribute('data-cat');\n var div = document.querySelector('.is-design-list');\n var items = div.querySelectorAll('[data-cat="' + cat + '"]');\n if(items.length == 0) {\n \n data_basic.designs.forEach(function(item){\n if (cat == item.category) {\n\n if(item.type === 'glide' || item.type === 'slick') {\n if(slider==='glide') {\n if(cat === '2') {\n if(item.type === 'glide') {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n } \n } \n } else if(slider==='slick') {\n if(cat === '2') {\n if(item.type === 'slick') {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n } \n } \n } else if(slider==='all') {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n } \n } else if(item.type === 'navbar' ) {\n if(navbar) {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n }\n } else {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n }\n \n }\n });\n data_examples.designs.forEach(function(item){\n if (cat == item.category) {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n }\n });\n\n items = div.querySelectorAll('[data-cat="' + cat + '"]');\n items.forEach(function(btn){\n btn.addEventListener('click', function(e){\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n btn.addEventListener('keydown', function(e){\n //Extra \n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n const items = e.target.parentNode.querySelectorAll('.active');\n if(items.length>0) {\n let lastItem = items[items.length-1];\n if(e.target===lastItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n }\n } else if ((e.which === 9 && e.shiftKey)) { // tab + shift key pressed\n const firstItem = e.target.parentNode.querySelector('.active');\n if(e.target===firstItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = firstItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n }\n });\n });\n\n }\n\n var _elms = document.querySelectorAll('.is-category-list a');\n removeClass(_elms,'active');\n _elms = document.querySelectorAll('.is-more-categories a');\n removeClass(_elms,'active');\n addClass(elm,'active');\n \n if (cat) {\n _elms = document.querySelectorAll('.is-design-list div');\n _elms.forEach(function(elm) {\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n _elms.forEach(function(elm) {\n var catSplit = elm.getAttribute('data-cat').split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == cat) {\n elm.style.display = '';\n elm.classList.add('active');\n }\n }\n });\n \n }\n\n _elms = document.querySelectorAll('.is-more-categories');\n removeClass(_elms,'active');\n }`,n+=`\n\n let categorylist = document.querySelector('.is-category-list');\n let designlist = document.querySelector('.is-design-list');\n\n let inputTabs = [];\n let inputTabsAll = document.querySelectorAll('.is-category-list a');\n inputTabsAll.forEach((item)=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='inline-block') {\n item.classList.add('show');\n inputTabs.push(item);\n } else {\n item.classList.remove('show');\n }\n });\n let index = 0;\n inputTabs.forEach((item)=>{\n\n let nextItem = inputTabs[index+1];\n let prevItem = inputTabs[index-1];\n \n item.addEventListener('keydown', (e)=>{\n e.preventDefault();\n \n if (e.which === 39) { // arrow right key pressed\n if(nextItem) nextItem.focus();\n } else if (e.which === 37) { // arrow left key pressed\n if(prevItem) prevItem.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n \n if(e.target===btnMore1) {\n \n btnMore1.click();\n\n e.preventDefault();\n e.stopImmediatePropagation();\n } else if(e.target===btnMore2) {\n \n btnMore2.click();\n\n e.preventDefault();\n e.stopImmediatePropagation();\n } else {\n\n selectCategory(e.target);\n \n }\n } else if(e.which === 40 && (e.target.classList.contains('more-basic') || e.target.classList.contains('more-examples'))) { // down\n\n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories.active');\n let items = moreCategories.querySelectorAll('a');\n items.forEach(item=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='block') {\n item.classList.add('show');\n if(item.classList.contains('active')) {\n activeItem=item;\n }\n } else {\n item.classList.remove('show');\n }\n });\n firstItem = moreCategories.querySelector('.show');\n if(activeItem) {\n activeItem.focus();\n } else {\n firstItem.focus();\n }\n\n } else if (e.which === 27) {\n // let moreCategories = document.querySelector('.is-more-categories.active');\n // if(moreCategories) moreCategories.classList.remove('active');\n // let activeTab = document.querySelector('.more-basic.active,.more-examples.active');\n // if(activeTab) activeTab.focus();\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n\n if(inputs.length===0) return;\n\n let firstInput = inputs[0];\n\n firstInput.focus();\n\n let lastInput = inputs[inputs.length-1];\n \n lastInput.addEventListener('keydown', (e)=>{\n \n e.preventDefault();\n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastInput.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n }\n });\n } \n \n });\n index++;\n });\n\n\n let dropdownItems = document.querySelectorAll('.is-more-categories a');\n Array.prototype.forEach.call(dropdownItems, (item) => {\n\n item.addEventListener('keydown', (e)=>{\n e.preventDefault();\n if(e.keyCode === 38 && e.target.previousElementSibling && window.getComputedStyle(e.target.previousElementSibling).getPropertyValue('display')==='block') { // up\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 40 && e.target.nextElementSibling && window.getComputedStyle(e.target.nextElementSibling).getPropertyValue('display')==='block') { // down\n e.target.nextElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n selectCategory(e.target);\n\n let cat = e.target.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n \n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n \n if(inputs.length===0) return;\n \n let firstInput = inputs[0];\n \n firstInput.focus();\n\n let lastInput = inputs[inputs.length-1];\n \n lastInput.addEventListener('keydown', (e)=>{\n \n e.preventDefault();\n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastInput.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n }\n });\n }\n \n });\n \n // item.addEventListener('click', (e)=>{\n // e.preventDefault();\n\n // e.target.focus();\n \n // selectCategory(e.target);\n // });\n });\n\n function addDesign(designid) {\n \n // var wrapper = parent.document.querySelector('.is-wrapper');\n var wrapper = parent._cb.doc.querySelector('.is-wrapper');\n\n var framework = '${this.builder.framework}';\n var snippetPathReplace = [];\n ${this.builder.designPathReplace.length>0?`\n snippetPathReplace = ['${this.builder.designPathReplace[0]}', '${this.builder.designPathReplace[1]}'];\n `:""}\n \n var contentStylePath = '${this.builder.contentStylePath}';\n var html = '';\n var result = data_basic.designs.filter(function(element){ \n if(element.id === parseInt(designid)) return element;\n });\n if (result.length==0) {\n result = data_examples.designs.filter(function(element){ \n if(element.id === parseInt(designid)) return element;\n });\n }\n\n var html = result[0].html;\n var googleFonts = result[0].googleFonts;\n var contentCss = result[0].contentCss;\n var contentClass = result[0].contentClass;\n\n //To Tailwind\n if (framework === 'tailwind') {\n html = html.replace(new RegExp(' container', 'g'), ' container');\n html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');\n html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');\n html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');\n html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed\n html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');\n html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');\n }\n \n //To Bootstrap\n if (framework === 'bootstrap') {\n html = html.replace(new RegExp(' container', 'g'), ' container-fluid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'col-md-12');\n html = html.replace(new RegExp('column half', 'g'), 'col-md-6');\n html = html.replace(new RegExp('column third', 'g'), 'col-md-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'col-md-3');\n html = html.replace(new RegExp('column fifth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column sixth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column two-third', 'g'), 'col-md-8');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'col-md-9');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'col-md-10');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'btn btn-primary btn-lg');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'btn btn-default btn-lg');\n }\n\n //To Foundation\n if (framework === 'foundation') {\n //html = html.replace(new RegExp(' container', 'g'), ' container');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'large-12 columns');\n html = html.replace(new RegExp('column half', 'g'), 'large-6 columns');\n html = html.replace(new RegExp('column third', 'g'), 'large-4 columns');\n html = html.replace(new RegExp('column fourth', 'g'), 'large-3 columns');\n html = html.replace(new RegExp('column fifth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column sixth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column two-third', 'g'), 'large-8 columns');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'large-9 columns');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'large-10 columns');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'button');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'secondary button');\n }\n\n //To UIKit\n if (framework === 'uikit') {\n html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');\n html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');\n html = html.replace(new RegExp('column full', 'g'), 'uk-width-1-1');\n html = html.replace(new RegExp('column half', 'g'), 'uk-width-1-2');\n html = html.replace(new RegExp('column third', 'g'), 'uk-width-1-3');\n html = html.replace(new RegExp('column fourth', 'g'), 'uk-width-1-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'uk-width-1-5');\n html = html.replace(new RegExp('column sixth', 'g'), 'uk-width-1-6');\n html = html.replace(new RegExp('column two-third', 'g'), 'uk-width-2-3');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'uk-width-3-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'uk-width-5-6');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'uk-button uk-button-primary uk-button-large');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'uk-button uk-button-large');\n }\n\n //To Material\n if (framework === 'material') {\n html = html.replace(new RegExp(' container', 'g'), '');\n html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');\n html = html.replace(new RegExp('column full', 'g'), 'mdl-cell mdl-cell--12-col');\n html = html.replace(new RegExp('column half', 'g'), 'mdl-cell mdl-cell--6-col');\n html = html.replace(new RegExp('column third', 'g'), 'mdl-cell mdl-cell--4-col');\n html = html.replace(new RegExp('column fourth', 'g'), 'mdl-cell mdl-cell--3-col');\n html = html.replace(new RegExp('column fifth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column sixth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column two-third', 'g'), 'mdl-cell mdl-cell--8-col');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'mdl-cell mdl-cell--9-col');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'mdl-cell mdl-cell--10-col');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'mdl-button mdl-js-button mdl-button--raised');\n }`,n+="\n\n html = html.replace(/{id}/g, makeid());\n\n if(snippetPathReplace.length>0) {\n if (snippetPathReplace[0] != '') {\n var regex = new RegExp(snippetPathReplace[0], 'g');\n html = html.replace(regex, snippetPathReplace[1]);\n }\n }\n\n //Add html\n parent.contentbox.addIdea(html);\n\n //Add contentCss\n var exist = false;\n var links = parent.document.getElementsByTagName(\"link\");\n for (var i = 0; i < links.length; i++) {\n var src = links[i].href.toLowerCase();\n if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;\n }\n \n if (!exist) appendHtml(wrapper,'<link data-name=\"contentstyle\" data-class=\"' + contentClass + '\" href=\"' + contentStylePath + contentCss + '\" rel=\"stylesheet\">');\n \n }\n\n function makeid() {//http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript\n var text = \"\";\n var possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n for (var i = 0; i < 2; i++)\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n \n var text2 = \"\";\n var possible2 = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n for (var i = 0; i < 5; i++)\n text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));\n \n return text + text2;\n }\n\n \n // Style stuff\n function applyParentStyles() {\n var cssString = '' +\n 'body {' +\n 'background: ' + parent._cb.styleSnippetBackground + ';' +\n 'color: ' + parent._cb.styleSnippetColor + ';' +\n 'margin: 0;' +\n '}' +\n \n\n '.dark .is-design-list>div {' +\n 'outline: transparent 1px solid;' +\n '}' +\n\n '/* Scrollbar for modal */' +\n\n '/* Darker color, because background for snippet thumbnails is always light. */' +\n '.dark * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgb(78 78 78 / 62%) auto;' +\n '}' +\n '.dark *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.dark *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.dark *::-webkit-scrollbar-thumb {' +\n 'background-color:rgb(78 78 78 / 62%);' +\n '}' +\n\n '.colored-dark * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgb(100, 100, 100) auto;' +\n '}' +\n '.colored-dark *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.colored-dark *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.colored-dark *::-webkit-scrollbar-thumb {' +\n 'background-color:rgb(100, 100, 100);' +\n '}' +\n\n '.colored * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +\n '}' +\n '.colored *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.colored *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.colored *::-webkit-scrollbar-thumb {' +\n 'background-color: rgba(0, 0, 0, 0.4);' +\n '}' +\n ",n+="\n '.light * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +\n '}' +\n '.light *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.light *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.light *::-webkit-scrollbar-thumb {' +\n 'background-color: rgba(0, 0, 0, 0.4);' +\n '}' +\n \n 'svg {' +\n 'fill: ' + parent._cb.styleSnippetColor + ';' +\n '}' +\n\n '.dark .is-design-list>div .is-overlay:after {' +\n 'background: rgb(78 78 78 / 13%);' +\n '}' +\n\n \n '.is-category-list {' +\n 'display: flex;' +\n '}' +\n \n '.is-category-list>div {' +\n 'background: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '}' +\n '.is-category-list>div:last-child {' +\n 'width:100%;' +\n '}' +\n \n '.is-category-list a {' +\n 'background: ' + parent._cb.styleSnippetTabItemBackground + ';' +\n 'color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n 'transition: box-shadow ease 0.3s;' +\n '}' +\n \n '.is-category-list a:hover {' +\n 'background: ' + parent._cb.styleSnippetTabItemBackgroundHover + ';' +\n 'box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);' +\n 'color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n '}' +\n \n '.is-category-list a.active {' +\n 'background: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +\n 'color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n 'cursor: default;' +\n '}' +\n\n '.is-more-categories {' +\n 'background: ' + parent._cb.styleSnippetMoreItemBackground + ';' +\n '}' +\n \n '.is-more-categories a {' +\n 'background: ' + parent._cb.styleSnippetMoreItemBackground + ';' +\n 'color: ' + parent._cb.styleSnippetMoreItemColor + ';' +\n '}' +\n \n '.is-more-categories a:hover {' +\n 'background: ' + parent._cb.styleSnippetMoreItemBackgroundHover + ';' +\n '}' +\n \n '.is-more-categories a.active, .is-more-categories a:focus {' +\n ' background: ' + parent._cb.styleSnippetMoreItemBackgroundActive + ';outline:none;' +\n '}';\n \n let themestyle = document.querySelector('[data-theme-style]');\n if(themestyle) themestyle.parentNode.removeChild(themestyle);\n \n var style = document.createElement(\"style\");\n style.setAttribute('data-theme-style','');\n style.innerHTML = cssString;\n document.head.appendChild(style);\n\n if(parent._cb.styleDark) {\n document.body.setAttribute('class', 'dark');\n } else if(parent._cb.styleColored) {\n document.body.setAttribute('class', 'colored');\n } else if(parent._cb.styleColoredDark) {\n document.body.setAttribute('class', 'colored-dark');\n } else if(parent._cb.styleLight) {\n document.body.setAttribute('class', 'light');\n } else {\n document.body.setAttribute('class', '');\n }\n }\n\n // applyParentStyles();\n\n document.addEventListener('keydown', (e)=>{\n if(e.keyCode === 27) { // escape key\n \n let moreCategories = document.querySelector('.is-more-categories.active');\n if(moreCategories) {\n moreCategories.classList.remove('active');\n\n let activeTab = document.querySelector('.more-basic.active,.more-examples.active');\n if(activeTab) activeTab.focus();\n\n e.preventDefault();\n return;\n } else {\n const overlay = parent.document.body;\n overlay.click();\n }\n }\n });\n\n <\/script>\n </body>\n </html>\n \n \n ",n}}class a{constructor(t){const e=()=>{let e=t.querySelectorAll(".is-tabs-more");Array.prototype.forEach.call(e,(t=>{t.style.display="none",t.setAttribute("aria-expanded",!1)})),document.removeEventListener("click",i)},i=t=>{t.target.closest(".is-tab-more")||t.target.closest("[data-menu]")||e()},n=n=>{const o=n.parentNode.getAttribute("data-group"),s=n.getAttribute("data-menu");if(s){document.addEventListener("click",i),n.setAttribute("aria-expanded",!0),t.querySelector("#"+s).style.display="block";let e=t.querySelector('.is-tabs-more[data-group="'+o+'"] > li.active');if(e)e.focus();else{t.querySelector('.is-tabs-more[data-group="'+o+'"]').focus()}return!1}if(n.classList.contains("active"))return!1;const a=n.getAttribute("data-content");if(!a)return!1;let l=t.querySelectorAll('.is-tabs[data-group="'+o+'"] > a');Array.prototype.forEach.call(l,(t=>{t.classList.remove("active")})),l=t.querySelectorAll('.is-tabs-more[data-group="'+o+'"] > li'),Array.prototype.forEach.call(l,(t=>{t.classList.remove("active")})),n.classList.add("active");let r=t.querySelectorAll('.is-tab-content[data-group="'+o+'"]');Array.prototype.forEach.call(r,(t=>{t.style.display="none",t.classList.remove("active")}));const c=t.querySelector("#"+a);c.style.display="flex",c.classList.add("active");const d=t.querySelector(".is-tabs-more");return d&&(d.style.display="none"),e(),this.setupTabKey(c,t),!1};let o=t.querySelectorAll(".is-tabs a");Array.prototype.forEach.call(o,(t=>{t.addEventListener("keydown",(e=>{if(e.preventDefault(),13===e.keyCode||32===e.keyCode)n(e.target);else if(9===e.which&&!e.shiftKey){let e=[];const i=t.parentNode.getAttribute("data-group");let n=t.parentNode.parentNode.querySelector('.is-tab-content[data-group="'+i+'"].active');if(Array.from(n.children).map((t=>{if("none"!==window.getComputedStyle(t,null).getPropertyValue("display")){t.querySelectorAll('.is-tabs.active, a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]').forEach((t=>{"none"!==window.getComputedStyle(t,null).getPropertyValue("display")&&e.push(t)}))}})),0===e.length)return;e[0].focus()}})),t.addEventListener("click",(t=>{t.preventDefault(),n(t.target)}))}));const s=t.querySelectorAll(".is-tabs-more");Array.prototype.forEach.call(s,(t=>{t.addEventListener("keydown",(i=>{i.preventDefault(),40===i.keyCode&&i.target.nextElementSibling?t.querySelector("li").focus():27===i.keyCode&&e()}))})),o=t.querySelectorAll(".is-tabs-more li"),Array.prototype.forEach.call(o,(i=>{i.addEventListener("keydown",(o=>{if(o.preventDefault(),o.stopImmediatePropagation(),38===o.keyCode&&o.target.previousElementSibling)o.target.previousElementSibling.focus();else if(40===o.keyCode&&o.target.nextElementSibling)o.target.nextElementSibling.focus();else if(27===o.keyCode)e();else if((13===o.keyCode||32===o.keyCode)&&(n(o.target),o.target.closest(".is-tabs-more"))){const e=i.parentNode.getAttribute("id"),n=t.querySelector('.is-tabs a[data-menu="'+e+'"]');n&&n.focus()}})),i.addEventListener("click",(e=>{if(e.preventDefault(),n(e.target),e.target.closest(".is-tabs-more")){const e=i.parentNode.getAttribute("id"),n=t.querySelector('.is-tabs a[data-menu="'+e+'"]');n&&n.focus()}}))}));t.addEventListener("focus",(()=>{this.setupModal(t)}))}setupModal(t){setTimeout((()=>{let e=[];t.querySelectorAll(".is-tabs a").forEach((t=>{"none"!==t.style.display?(t.classList.add("show"),e.push(t)):t.classList.remove("show")}));let i=0;this.inputTabs=e,e.forEach((t=>{let n=e[i+1],o=e[i-1];t.addEventListener("keydown",(t=>{t.preventDefault(),39===t.which?n&&n.focus():37===t.which&&o&&o.focus()})),i++})),this.setupTabKey(t.querySelector(".is-tab-content.active"),t)}),30)}setupTabKey(t,e){let i=[];if(Array.from(t.children).map((t=>{if("none"!==window.getComputedStyle(t,null).getPropertyValue("display")){t.querySelectorAll('.is-tabs.active, a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]').forEach((t=>{"none"!==window.getComputedStyle(t,null).getPropertyValue("display")&&i.push(t)}))}})),0===i.length)return;let n=i[0];i[i.length-1].addEventListener("keydown",(i=>{if(9===i.which&&!i.shiftKey){i.preventDefault();let n=t.getAttribute("id");const o=e.querySelector('li[data-content="'+n+'"],a[data-content="'+n+'"]');if(o.closest(".is-tabs-more")){n=o.parentNode.getAttribute("id");const t=e.querySelector('.is-tabs a[data-menu="'+n+'"]');t&&t.focus()}else o.focus()}})),n.addEventListener("keydown",(i=>{if(9===i.which&&i.shiftKey){i.preventDefault();let n=t.getAttribute("id");const o=e.querySelector('li[data-content="'+n+'"],a[data-content="'+n+'"]');if(o.closest(".is-tabs-more")){n=o.parentNode.getAttribute("id");const t=e.querySelector('.is-tabs a[data-menu="'+n+'"]');t&&t.focus()}else o.focus()}}))}}const l=new t;class r{constructor(t){this.builder=t,this.section=this.builder.section;const e=this.builder.builderStuff;this.builderStuff=e;let n='<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width: 450px;"><div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">'+i("Are you sure you want to delete this section?")+'</div><button title="'+i("Delete")+'" class="input-ok classic">'+i("Delete")+"</button></div></div>"+`\n <div class="is-modal is-modal-content editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-bar is-draggable" draggable=""> \n ${i("Section Settings")}\n <button class="is-modal-close" tabindex="-1" title="${i("Close")}">\n <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>\n </button>\n </div>\n <div style="padding:0 0 10px;width:100%;">\n \n <div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings"><a id="tabSectionGeneral" title="`+i("General")+'" href="" data-content="divSectionGeneral" class="active">'+i("General")+'</a><a id="tabSectionAnimation" title="'+i("Animation")+'" href="" data-content="divSectionAnimation">'+i("Animation")+'</a><a id="tabSectionScrollButton" title="'+i("Scroll")+'" href="" data-content="divSectionScrollButton">'+i("Scroll")+'</a><a id="tabSectionMore" title="'+i("More")+'" href="" data-content="divSectionMore">'+i("More")+"</a></div>";n+=`\n <div id="divSectionMore" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">\n \n <label for="inpSectionId" style="padding:20px 0 3px;">${i("Add Section ID")}:</label>\n <div>\n <input id="inpSectionId" class="input-section-id" type="text" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)" style="height:38px">\n </div>\n\n <label for="inpSectionCssClasses" style="padding:20px 0 3px;">${i("Add Css Classes")}:</label>\n <div>\n <input id="inpSectionCssClasses" class="input-section-classes" type="text" style="height:38px">\n </div>\n </div>\n <div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0"><div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">`+i("Move Section")+':</div><div style="display:flex"><button title="'+i("Move Up")+'" class="cmd-section-up" style="">&#8593;</button><button title="'+i("Move Down")+'" class="cmd-section-down">&#8595;</button><button title="'+i("Move to Top")+'" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button><button title="'+i("Move to Bottom")+'" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button><button title="'+i("Duplicate")+'" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button></div></div>',n+='<div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Height")+':</div><div style="display:flex"><button title="10%" class="cmd-section-height" data-value="10">10%</button><button title="15%" class="cmd-section-height" data-value="15">15%</button><button title="20%" class="cmd-section-height" data-value="20">20%</button><button title="25%" class="cmd-section-height" data-value="25">25%</button><button title="30%" class="cmd-section-height" data-value="30">30%</button><button title="40%" class="cmd-section-height" data-value="40">40%</button><button title="50%" class="cmd-section-height" data-value="50">50%</button></div><div style="display:flex"><button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button><button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button><button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button><button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button><button title="85%" class="cmd-section-height" data-value="85" style="border-left:none;border-top:none;">85%</button><button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button><button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button><button title="'+i("Clear")+'" class="cmd-section-height" data-value="0"><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div><div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Spacing")+':</div><div style="display:flex"><button title="'+i("xxs")+'" class="cmd-box-spacing" data-value="xxs">'+i("xxs")+'</button><button title="'+i("xs")+'" class="cmd-box-spacing" data-value="default">'+i("xs")+'</button><button title="'+i("sm")+'" class="cmd-box-spacing" data-value="sm">'+i("sm")+'</button><button title="'+i("m")+'" class="cmd-box-spacing" data-value="m">'+i("m")+'</button><button title="'+i("lg")+'" class="cmd-box-spacing" data-value="lg">'+i("lg")+'</button><button title="'+i("Clear")+'" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div>',n+='<div class="div-section-spacesettings" style="display:flex;flex-direction:column;"><div class="div-multi-boxes"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Between Boxes")+':</div><div style="display:flex"><button title="'+i("space")+'" class="cmd-betweenbox-spacing" data-value="space">'+i("space")+'</button><button title="'+i("no space")+'" class="cmd-betweenbox-spacing" data-value="no-space">'+i("no space")+'</button></div></div><div style="display:none;padding-top:20px;padding-bottom: 3px;">'+i("Stack")+':</div><div style="display:none"><button title="'+i("top")+'" class="cmd-section-stack" data-value="top">'+i("top")+'</button><button title="'+i("middle")+'" class="cmd-section-stack" data-value="middle">'+i("middle")+'</button><button title="'+i("bottom")+'" class="cmd-section-stack" data-value="bottom">'+i("bottom")+'</button><button title="'+i("Clear")+'" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div><div style="padding-top:20px;padding-bottom: 3px;">'+i("Background Color")+':</div><div style="display:flex;"><button title="'+i("Background Color")+'" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button><button title="'+i("Gradient")+'" class="input-section-gradient classic" data-value="+">'+i("Gradient")+"</button></div>"+`\n \n <div class="is-separator" style="margin-top:20px"></div>\n \n <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">\n <button title="${i("Desktop")}" class="input-device on" data-value="" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>\n </button>\n <button title="${i("Laptop/Tablet (Landscape)")}" class="input-device" data-value="md" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Tablet (Portrait)")}" class="input-device" data-value="sm" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n \x3c!--\n <button title="${i("Tablet")}" class="input-device" data-value="sm" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>--\x3e\n <button title="${i("Mobile")}" class="input-device" data-value="xs" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>\n </button>\n </div>\n\n <div style="padding-top:0;padding-bottom:3px;">${i("Visibility")}:</div>\n <div class="div-visibility" style="display:flex;">\n <button title="${i("Visible")}" class="input-visible on" style="width:100px;height:34px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>\n <span style="margin-left:5px">${i("Visible")}</span>\n </button>\n <button title="${i("Hidden")}" class="input-hidden" style="width:100px;height:34px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>\n <span style="margin-left:5px">${i("Hidden")}</span>\n </button>\n </div>\n\n <div class="div-boxesperline" style="flex-direction:column">\n <label style="margin:20px 0 0;display:flex;flex-direction:column">\n <span style="margin:0 4px 3px 0">${i("Boxes per Line")}:</span>\n </label>\n <div class="flex">\n <button title="1" class="input-boxesperline on" data-value="1" style="width:40px;height:25px;">1</button>\n <button title="2" class="input-boxesperline" data-value="2" style="width:40px;height:25px;">2</button>\n <button title="3" class="input-boxesperline" data-value="3" style="width:40px;height:25px;">3</button>\n <button title="4" class="input-boxesperline" data-value="4" style="width:40px;height:25px;">4</button>\n <button title="${i("Default")}" class="input-boxesperline" data-value="" style="width:90px;height:25px;">${i("Default")}</button>\n </div>\n </div>\n \n <div id="divReverseBoxes" style="display:none">\n <label for="chkReverseBoxes" style="margin:20px 0 0 0;display:flex"><input id="chkReverseBoxes" type="checkbox" style="margin:0 7px 0 0"/><span>${i("Reverse Boxes")}</span></label>\n </div>\n </div><div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0"><div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">`+i("Start")+':</div><div style="display:flex;flex-flow:wrap;"><button title="'+i("Slide Left")+'" class="cmd-section-anim-start" data-value="slide-left">'+i("Slide Left")+'</button><button title="'+i("Slide Right")+'" class="cmd-section-anim-start" data-value="slide-right">'+i("Slide Right")+'</button><button title="'+i("Zoom In")+'" class="cmd-section-anim-start" data-value="zoom-in">'+i("Zoom In")+'</button><button title="'+i("Clear")+'" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div>',n+='<div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("End")+':</div><div style="display:flex;flex-flow:wrap;"><button title="'+i("Slide Left")+'" class="cmd-section-anim-end" data-value="slide-left">'+i("Slide Left")+'</button><button title="'+i("Slide Right")+'" class="cmd-section-anim-end" data-value="slide-right">'+i("Slide Right")+'</button><button title="'+i("Slide Back")+'" class="cmd-section-anim-end" data-value="slide-back">'+i("Slide Back")+'</button><button title="'+i("Zoom In")+'" class="cmd-section-anim-end" data-value="zoom-in">'+i("Zoom In")+'</button><button title="'+i("Zoom Out")+'" class="cmd-section-anim-end" data-value="zoom-out">'+i("Zoom Out")+'</button><button title="'+i("Clear")+'" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div></div><div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0"><div style="display:none;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;"><label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> '+i("Scroll Icon")+'</label></div><div style="display:flex;padding-top:10px;"><button title="'+i("Light")+'" class="cmd-section-scroll" data-value="light" style="min-width:80px;">'+i("Light")+'</button><button title="'+i("Dark")+'" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">'+i("Dark")+'</button></div></div><div style="display:flex;flex-direction:column;padding-bottom:3px;"><div style="padding-top:20px;padding-bottom:3px;">'+i("Scroll Button")+':</div><div style="display:flex;flex-flow:wrap;"><button class="cmd-scroll-preset" data-value="1" title="'+i("Apply")+'" type="button">1</button><button class="cmd-scroll-preset" data-value="2" title="'+i("Apply")+'" type="button">2</button><button class="cmd-scroll-preset" data-value="3" title="'+i("Apply")+'" type="button">3</button><button class="cmd-scroll-preset" data-value="4" title="'+i("Apply")+'" type="button">4</button><button class="cmd-scroll-preset" data-value="5" title="'+i("Apply")+'" type="button">5</button><button class="cmd-scroll-preset" data-value="6" title="'+i("Apply")+'" type="button">6</button><button class="cmd-scroll-preset" data-value="7" title="'+i("Apply")+'" type="button">7</button><button class="cmd-scroll-preset" data-value="8" title="'+i("Apply")+'" type="button">8</button><button class="cmd-scroll-preset" data-value="9" title="'+i("Apply")+'" type="button">9</button><button class="cmd-scroll-preset" data-value="10" title="'+i("Apply")+'" type="button">10</button><button class="cmd-scroll-preset" data-value="11" title="'+i("Apply")+'" type="button">11</button><button class="cmd-scroll-preset" data-value="12" title="'+i("Apply")+'" type="button">12</button><button class="cmd-scroll-preset" data-value="13" title="'+i("Apply")+'" type="button">13</button><button class="cmd-scroll-preset" data-value="14" title="'+i("Apply")+'" type="button">14</button><button class="cmd-scroll-preset" data-value="" title="'+i("Remove")+'" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button></div></div></div></div></div>',n+='<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;"><div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;"><span>'+i("Module Settings")+'</span><button class="is-modal-close" tabindex="-1" title="'+i("Close")+'"><svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button></div><iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe><input id="hidModuleCode" type="hidden" /><input id="hidModuleSettings" type="hidden" /><button class="input-ok classic-primary" style="width:100%;height:60px;position:absolute;left:0;bottom:0;">'+i("Ok")+"</button></div></div>",l.appendHtml(e,n);let o=e.querySelector(".is-modal.editsection");this.modalEditSection=o;const s=o.querySelector(".is-modal-close");s&&s.addEventListener("click",(()=>{this.close()})),new a(o);const r=o.querySelectorAll(".is-tabs a");r.forEach((t=>{t.addEventListener("click",(e=>{if(e.preventDefault(),l.hasClass(t,"active"))return;r.forEach((t=>{l.removeClass(t,"active")})),l.addClass(t,"active");let i=t.getAttribute("data-content");o.querySelectorAll(".is-tab-content").forEach((t=>{t.style.display="none"})),o.querySelector("#"+i).style.display="flex"}))}));const c=e.querySelector(".is-modal.delsectionconfirm");c.querySelector(".input-ok").addEventListener("click",(()=>{this.section.sectionDelete(),this.builder.hideModal(c),this.builder.onSelectChange&&this.builder.onSelectChange()}));o.querySelector(".cmd-section-up").addEventListener("click",(()=>{this.section.sectionMove("up")}));o.querySelector(".cmd-section-down").addEventListener("click",(()=>{this.section.sectionMove("down")}));o.querySelector(".cmd-section-top").addEventListener("click",(()=>{this.section.sectionMove("top")}));o.querySelector(".cmd-section-bottom").addEventListener("click",(()=>{this.section.sectionMove("bottom")}));o.querySelector(".cmd-section-duplicate").addEventListener("click",(()=>{this.section.sectionDuplicate(),this.builder.hideModal(this.modalEditSection)}));o.querySelectorAll(".cmd-section-anim-start").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.sectionAnimStart(e),o.querySelectorAll(".cmd-section-anim-start").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelectorAll(".cmd-section-anim-end").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.sectionAnimEnd(e),o.querySelectorAll(".cmd-section-anim-end").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelectorAll(".cmd-section-height").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.setSectionHeight(e),o.querySelectorAll(".cmd-section-height").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-spacing").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.boxSpacing(e),o.querySelectorAll(".cmd-box-spacing").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelectorAll(".cmd-betweenbox-spacing").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.spaceBetween(e),o.querySelectorAll(".cmd-betweenbox-spacing").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on")}))}));o.querySelectorAll(".cmd-section-stack").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value");const i=this.builder.activeSection;l.removeClass(i,"stack-top"),l.removeClass(i,"stack-middle"),l.removeClass(i,"stack-bottom"),"top"===e?l.addClass(i,"stack-top"):"middle"===e?l.addClass(i,"stack-middle"):"bottom"===e&&l.addClass(i,"stack-bottom"),o.querySelectorAll(".cmd-section-stack").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-section-scroll").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value");this.sectionScrollIcon(e),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-scroll-preset").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.sectionScrollPreset(e),o.querySelectorAll(".cmd-scroll-preset").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelector("#chkScrollIcon").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.sectionUseScroll(),this.builder.settings.onChange()}));const d=this.builder.editor.colorpicker(),u=o.querySelector(".input-section-bgcolor");u.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeSection;let e=u.style.backgroundColor;d.open((e=>{if(!t.classList.contains("box-space")){t.querySelectorAll(".is-overlay").forEach((t=>{t.style.backgroundColor="",t.style.backgroundImage=""}))}t.style.backgroundColor=e,t.style.backgroundImage="",u.style.backgroundColor=e,this.builder.onChange()}),e)})),o.querySelector(".input-section-gradient").addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeSection;this.builder.editor.gradientpicker().open(t,(()=>{if(!t.classList.contains("box-space")){t.querySelectorAll(".is-overlay").forEach((t=>{t.style.backgroundColor="",t.style.backgroundImage=""}))}this.builder.onChange()}))}));let p=o.querySelector(".input-section-id");p.addEventListener("change",(()=>{this.builder.editor.saveForUndo();const t=this.builder.activeSection,e=t.querySelector(".is-section-info");""!==p.value?(t.setAttribute("id",p.value),e.innerHTML=`<div>#${p.value}</div>`):(t.removeAttribute("id"),e.innerHTML=""),this.builder.onChange()}));let h=o.querySelector(".input-section-classes");h.addEventListener("change",(()=>{this.builder.editor.saveForUndo();const t=this.builder.activeSection;let e=[],i=t.getAttribute("data-class");i&&(e=i.split(" "));let n=[],o=h.value;n=o.split(" "),e.forEach((e=>{n.includes(e)||t.classList.remove(e)})),n.forEach((e=>{""!==e&&t.classList.add(e)})),t.setAttribute("data-class",o),""===t.getAttribute("data-class")&&t.removeAttribute("data-class"),this.builder.onChange()})),p.addEventListener("keyup",(()=>{const t=this.builder.activeSection,e=t.querySelector(".is-section-info");""!==p.value?(t.setAttribute("id",p.value),e.innerHTML=`<div>#${p.value}</div>`):(t.removeAttribute("id"),e.innerHTML="")}));const m=o.querySelector("#chkReverseBoxes");m.addEventListener("click",(()=>{if(!this.builder.activeSection)return;let t=o.querySelector(".div-target"),e=this.builder.editor.responsive.readTarget(t);this.section.reverseBoxes(m.checked,e)}));let b=o.querySelectorAll(".input-device");b.forEach((t=>{t.addEventListener("click",(()=>{let e=this.builder.activeSection;e&&(o.querySelectorAll(".input-device").forEach((t=>{t.classList.remove("on")})),t.classList.add("on"),this.realtimeVisibility(e))}))}));let g=o.querySelector(".input-visible"),v=o.querySelector(".input-hidden");g.addEventListener("click",(()=>{let t=this.builder.activeSection;if(!t)return;this.builder.editor.saveForUndo(),t.classList.remove("hideonmobile");let e=o.querySelector(".div-target"),i=this.builder.editor.responsive.readTarget(e);"xs"===i?t.classList.remove("xs-hidden"):"sm"===i?t.classList.remove("sm-hidden"):"md"===i?t.classList.remove("md-hidden"):""===i&&t.classList.remove("desktop-hidden"),g.classList.add("on"),v.classList.remove("on"),this.builder.onChange()})),v.addEventListener("click",(()=>{let t=this.builder.activeSection;if(!t)return;this.builder.editor.saveForUndo(),t.classList.remove("hideonmobile");let e=o.querySelector(".div-target"),i=this.builder.editor.responsive.readTarget(e);"xs"===i?t.classList.add("xs-hidden"):"sm"===i?t.classList.add("sm-hidden"):"md"===i?t.classList.add("md-hidden"):""===i&&t.classList.add("desktop-hidden"),g.classList.remove("on"),v.classList.add("on"),this.builder.onChange()})),b=o.querySelectorAll(".input-boxesperline"),b.forEach((t=>{t.addEventListener("click",(()=>{if(!this.builder.activeSection)return;let e=t.getAttribute("data-value"),i=o.querySelector(".div-target"),n=this.builder.editor.responsive.readTarget(i);this.section.setBoxesPerLine(e,n),o.querySelectorAll(".input-boxesperline").forEach((t=>{t.classList.remove("on")})),t.classList.add("on")}))}))}realtimeVisibility(t,e){if(e){const t=this.builder.builderStuff.querySelector(".is-modal.content-preview.active");if(t){this.modalEditSection.querySelectorAll(".input-device").forEach((t=>{t.classList.remove("on")})),t.classList.contains("is-screen-1920")||t.classList.contains("is-screen-1440")?this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add("on"):t.classList.contains("is-screen-1024")?this.modalEditSection.querySelector('.input-device[data-value="md"]').classList.add("on"):t.classList.contains("is-screen-768")?this.modalEditSection.querySelector('.input-device[data-value="sm"]').classList.add("on"):t.classList.contains("is-screen-375")&&this.modalEditSection.querySelector('.input-device[data-value="xs"]').classList.add("on")}}let i=this.modalEditSection.querySelector(".div-target"),n=this.modalEditSection.querySelector(".div-visibility"),o=this.builder.editor.responsive.readTarget(i),s=this.builder.editor.responsive.getVisibility(t,o);this.builder.editor.responsive.showVisibility(n,s),this.modalEditSection.querySelectorAll(".input-boxesperline").forEach((t=>{t.classList.remove("on")}));let a=!1;"xs"===o?(a=t.classList.contains("xs-box-reverse"),t.classList.contains("xs-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("xs-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("xs-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("xs-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(375)):"sm"===o?(a=t.classList.contains("sm-box-reverse"),t.classList.contains("sm-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("sm-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("sm-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("sm-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(768)):"md"===o?(a=t.classList.contains("md-box-reverse"),t.classList.contains("md-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("md-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("md-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("md-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(1024)):(a=t.classList.contains("desktop-box-reverse"),t.classList.contains("desktop-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("desktop-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("desktop-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("desktop-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(1920));this.modalEditSection.querySelector("#chkReverseBoxes").checked=a}read(){const t=this.builder.activeSection,e=this.modalEditSection;let i=e.querySelector(".input-section-id");i.value="";const n=t.getAttribute("id");n&&(i.value=n);let o=e.querySelector(".input-section-classes");o.value="";const s=t.getAttribute("data-class");o.value=s;let a=this.builder.activeSection.querySelectorAll(".is-bg-light");a.forEach((t=>{if(l.removeClass(t,"is-bg-light"),l.hasClass(t,"is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(255, 255, 255)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(255, 255, 255)")}})),a=this.builder.activeSection.querySelectorAll(".is-bg-dark"),a.forEach((t=>{if(l.removeClass(t,"is-bg-dark"),l.hasClass(t,"is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(17, 17, 17)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(17, 17, 17)")}})),a=this.builder.activeSection.querySelectorAll(".is-bg-grey"),a.forEach((t=>{if(l.removeClass(t,"is-bg-grey"),l.hasClass(t,"is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(238, 239, 240)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(238, 239, 240)")}}));const r=e.querySelector("#chkScrollIcon");t.querySelector(".is-arrow-down")?r.checked=!0:r.checked=!1;let c=e.querySelectorAll(".cmd-section-height");if(c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"is-section-100")&&l.addClass(e.querySelector('.cmd-section-height[data-value="100"]'),"on"),l.hasClass(t,"is-section-90")&&l.addClass(e.querySelector('.cmd-section-height[data-value="90"]'),"on"),l.hasClass(t,"is-section-85")&&l.addClass(e.querySelector('.cmd-section-height[data-value="85"]'),"on"),l.hasClass(t,"is-section-80")&&l.addClass(e.querySelector('.cmd-section-height[data-value="80"]'),"on"),l.hasClass(t,"is-section-75")&&l.addClass(e.querySelector('.cmd-section-height[data-value="75"]'),"on"),l.hasClass(t,"is-section-70")&&l.addClass(e.querySelector('.cmd-section-height[data-value="70"]'),"on"),l.hasClass(t,"is-section-60")&&l.addClass(e.querySelector('.cmd-section-height[data-value="60"]'),"on"),l.hasClass(t,"is-section-50")&&l.addClass(e.querySelector('.cmd-section-height[data-value="50"]'),"on"),l.hasClass(t,"is-section-40")&&l.addClass(e.querySelector('.cmd-section-height[data-value="40"]'),"on"),l.hasClass(t,"is-section-30")&&l.addClass(e.querySelector('.cmd-section-height[data-value="30"]'),"on"),l.hasClass(t,"is-section-25")&&l.addClass(e.querySelector('.cmd-section-height[data-value="25"]'),"on"),l.hasClass(t,"is-section-20")&&l.addClass(e.querySelector('.cmd-section-height[data-value="20"]'),"on"),l.hasClass(t,"is-section-15")&&l.addClass(e.querySelector('.cmd-section-height[data-value="15"]'),"on"),l.hasClass(t,"is-section-10")&&l.addClass(e.querySelector('.cmd-section-height[data-value="10"]'),"on"),l.hasClass(t,"is-section-auto")&&l.addClass(e.querySelector('.cmd-section-height[data-value="0"]'),"on"),c=e.querySelectorAll(".cmd-section-anim-start"),c.forEach((t=>{l.removeClass(t,"on")})),c=e.querySelectorAll(".cmd-section-anim-end"),c.forEach((t=>{l.removeClass(t,"on")})),t.hasAttribute("data-anim-start")){const i=t.getAttribute("data-anim-start");"zoom-in"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="zoom-in"]'),"on"),"zoom-out"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="zoom-out"]'),"on"),"slide-left"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="slide-left"]'),"on"),"slide-right"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="slide-right"]'),"on")}if(t.hasAttribute("data-anim-end")){const i=t.getAttribute("data-anim-end");"zoom-in"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="zoom-in"]'),"on"),"zoom-out"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="zoom-out"]'),"on"),"slide-left"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="slide-left"]'),"on"),"slide-right"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="slide-right"]'),"on"),"overlap"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="overlap"]'),"on"),"slide-back"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="slide-back"]'),"on")}c=e.querySelectorAll(".cmd-box-spacing");const d=this.modalEditSection.querySelector(".div-section-spacesettings");c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"box-space")?(l.hasClass(t,"box-space-sm")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="sm"]'),"on"):l.hasClass(t,"box-space-xxs")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="xxs"]'),"on"):l.hasClass(t,"box-space-m")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="m"]'),"on"):l.hasClass(t,"box-space-lg")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="lg"]'),"on"):l.addClass(e.querySelector('.cmd-box-spacing[data-value="default"]'),"on"),d.style.display="flex"):d.style.display="none";const u=this.modalEditSection.querySelector(".div-multi-boxes");l.hasClass(t,"is-box")?u.style.display="none":u.style.display="block",c=e.querySelectorAll(".cmd-betweenbox-spacing"),c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"space-around")?l.addClass(e.querySelector('.cmd-betweenbox-spacing[data-value="no-space"]'),"on"):l.addClass(e.querySelector('.cmd-betweenbox-spacing[data-value="space"]'),"on"),c=e.querySelectorAll(".cmd-section-stack"),c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"stack-top")?l.addClass(e.querySelector('.cmd-section-stack[data-value="top"]'),"on"):l.hasClass(t,"stack-middle")?l.addClass(e.querySelector('.cmd-section-stack[data-value="middle"]'),"on"):l.hasClass(t,"stack-bottom")&&l.addClass(e.querySelector('.cmd-section-stack[data-value="bottom"]'),"on"),c=e.querySelectorAll(".cmd-scroll-preset"),c.forEach((t=>{l.removeClass(t,"on")}));const p=t.querySelector(".is-arrow-down");if(p){let t=p.getAttribute("data-scroll-preset");if(t){let i=e.querySelector(`.cmd-scroll-preset[data-value="${t}"]`);l.addClass(i,"on")}}let h=e.querySelector(".input-section-bgcolor"),m=t.style.backgroundColor;h.style.backgroundColor=m||"",this.realtimeVisibility(t,!0);const b=e.querySelector(".div-boxesperline"),g=e.querySelector("#divReverseBoxes");t.querySelectorAll(".is-box").length>1?(g.style.display="flex",b.style.display="flex"):(g.style.display="none",b.style.display="none")}close(){this.modalEditSection.style.display=""}edit(){this.builder.wrapperEl.classList.add("hard-select"),this.builder.activeBox&&this.builder.activeBox.classList.add("box-select"),this.builder.activeSection&&this.builder.activeSection.classList.add("section-select");const t=this.modalEditSection;t.style.display="flex",t.focus(),this.read();const e=this.builder.activeSection;e.classList.add("section-active"),setTimeout((()=>{e.classList.remove("section-active")}),1e3)}sectionUseScroll(){const t=this.builder.activeSection;if(this.modalEditSection.querySelector("#chkScrollIcon").checked){t.querySelector(".is-section-tool").insertAdjacentHTML("beforebegin",'<div class="is-arrow-down bounce"><a href="#"><i class="icon ion-ios-arrow-thin-down"></i></a></div>');t.querySelector(".is-arrow-down a").addEventListener("click",(e=>(this.builder.scrollTo(t.nextElementSibling),e.preventDefault(),e.stopImmediatePropagation(),!1)))}else{const e=t.querySelector(".is-arrow-down");e.parentNode.removeChild(e)}}sectionScrollIcon(t){const e=this.builder.activeSection.querySelector(".is-arrow-down");"light"===t?l.addClass(e,"light"):l.removeClass(e,"light")}}const c=new t;class d{constructor(t){this.builder=t,this.box=this.builder.box,this.builderStuff=this.builder.builderStuff;const e=this.builderStuff;let n="";n+='<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;"><div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">'+i("Custom Code (Javascript Allowed)")+'</div><textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea><input id="hidBoxCustomCode" type="hidden" /><button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">'+i("Ok")+"</button></div></div>"+`\n <div class="is-modal is-modal-content editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-bar is-draggable" draggable=""> \n ${i("Box Settings")}\n <button class="is-modal-close" tabindex="-1" title="${i("Close")}">\n <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>\n </button>\n </div>\n <div style="padding:0;width:100%;">\n \n <div style="padding:0;width:100%;"><div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings"><a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">`+i("General")+'</a><a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">'+i("Content")+'</a><a id="tabBoxContentText" href="" data-content="divBoxContentText">'+i("Text")+'</a><a id="tabBoxImage" href="" data-content="divBoxImage">'+i("Image")+'</a><a id="tabBoxAnimate" href="" data-content="divBoxAnimate">'+i("Animation")+'</a><a id="tabBoxClick" href="" data-content="divBoxClick">'+i("On Click")+'</a></div><div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0"><div style="display:flex"><div id="divBoxSize" style="margin-right: 50px;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Box Size")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-smaller" style="width:40px;">-</button><button title="'+i("Increase")+'" class="cmd-box-larger" style="width:40px;border-left:none">+</button><br style="clear:both"></div></div><div id="divBoxMove"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Move")+':</div><div style="display:flex"><button title="'+i("Left")+'" class="cmd-box-left" style="width:40px;">←</button><button title="'+i("Right")+'" class="cmd-box-right" style="width:40px;border-left:none">→</button><br style="clear:both"></div></div></div>',n+='<div id="divContentSize"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Content Size")+': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div><div style="display: flex;flex-direction: row;flex-wrap: wrap;"><input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" /><button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button><button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button><button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button><button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button><button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button><button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button><button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button><button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button><button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button><button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button><button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button><button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button><button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button><button title="'+i("Clear")+'" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button><button title="'+i("Decrease")+'" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button><button title="'+i("Increase")+'"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button><br style="clear:both"></div></div>',n+='<div id="divBoxBackgroundColor"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Background Color")+':</div><div style="display:flex;"><button title="'+i("Background Color")+'" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button><button title="'+i("Gradient")+'" class="input-box-gradient classic" data-value="+">'+i("Gradient")+'</button></div></div><div id="divBoxBackgroundImage" style="padding-bottom:10px;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Background Image")+':</div><div style="height:auto"><div style="display:flex;align-items:flex-end;"><div class="box-bgimage-preview"></div><label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> '+i("Grayscale")+'</label></div><div style="display:flex;align-items: flex-end;"><button title="'+i("Image")+'" class="input-box-bgimage"><svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg><span>'+i("Image")+'</span></button><button title="'+i("Select")+'" class="input-select">'+this.builder.selectIcon+'</button><button title="'+i("Remove")+'" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button><button title="'+i("Adjust")+'" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button></div></div></div><div id="divBoxPickPhoto" class="is-settings" style="padding-top:10px"><button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button></div><div id="divBoxStackBg" style="display:flex;padding-top:10px;"><div style="display:flex;align-items: center;margin-right:30px"><label for="chkStackBg" style="margin:0;display:flex;align-items: center;"><input id="chkStackBg" type="checkbox" /> <span style="margin-left:3px">'+i("Stack Background on Mobile")+'</span></label></div></div><div style="display:flex;padding-top:5px;"><div style="display:flex;align-items: center;margin-right:30px"><label for="chkAutofitContent" style="margin:0;display:flex;align-items: center;"><input id="chkAutofitContent" type="checkbox" /> <span style="margin-left:3px">'+i("Autofit on Mobile")+'</span></label></div><div style="display:flex;align-items: center;"><label for="inpBoxMinHeight" style="margin:0 4px 0 0;">'+i("Min Height")+':</label><select id="inpBoxMinHeight"><option value="">'+i("Not Set")+'</option><option value="20">20%</option><option value="25">25%</option><option value="30">30%</option><option value="40">40%</option><option value="50">50%</option><option value="60">60%</option><option value="70">70%</option><option value="75">75%</option><option value="80">80%</option><option value="90">90%</option><option value="100">100%</option></select></div></div><div style="display:flex;justify-content:flex-end;"><button title="'+i("Add Text")+'" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>'+i("Add Text")+'</span></button><button title="'+i("Remove Text")+'" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>'+i("Remove Text")+'</span></button><button title="'+i("Add Code")+'" class="cmd-box-addcode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>'+i("Add Code")+'</span></button><button title="'+i("Remove Code")+'" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>'+i("Remove Code")+'</span></button></div><p id="divNoBoxSettings" style="text-align: center;display:none;">'+i("This box has no available settings.")+"</p></div>",n+='<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><label for="inpBoxLinkSource" style="display:block;padding-top:20px;">'+i("Open")+':</label><div class="image-src" style="display:flex"><input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px"><button title="'+i("Select")+'" class="input-select" style="flex:none;width:40px;height:38px;">'+this.builder.selectIcon+"</button>"+`<button title="${i(this.builder.otherSelectCaption)}" class="input-select-other" style="display:none;flex:none;width:40px;height:38px;">\n ${this.builder.otherSelectIcon}\n </button><div class="image-larger5 is-btn classic" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;"><form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="`+this.builder.largerImageHandler+'" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;"><input id="hidRefId5_box" name="hidRefId" type="hidden" value=""><svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg><input onclick="blur()" title="'+i("Select")+'" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"></form><iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe></div></div><div style="padding-top:20px"><button class="cmd-box-testclick">'+i("Test")+"</button></div></div>",n+='<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Text Style")+':</div><div style="display:flex"><button title="'+i("Light")+'" class="cmd-box-textcolor" data-value="light">'+i("Light")+'</button><button title="'+i("Dark")+'" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">'+i("Dark")+'</button><button title="'+i("Not Set")+'" class="cmd-box-textcolor" data-value="" style="border-left:none;">'+i("Not Set")+"</button></div></div>",n+='<div id="divContainerTransparency" style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Transparency")+':</div><div style="display:flex"><button title="'+i("Increase")+'" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button><button title="'+i("Decrease")+'" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button><button title="'+i("Not Set")+'" class="cmd-box-textopacity" data-value="" style="border-left:none;">'+i("Not Set")+'</button></div></div><div style="padding-top:27px;">'+i("Default Text Formatting")+':</div><div id="divContainerTextAlign" style="display:flex;flex-direction: column;"><div style="padding-top:15px;padding-bottom: 3px;">'+i("Alignment")+':</div><div style="display:flex"><button title="'+i("Align Left")+'" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button><button title="'+i("Align Center")+'" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button><button title="'+i("Align Right")+'" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button><button title="'+i("Align Full")+'" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button><button title="'+i("Not Set")+'" class="cmd-box-textalign" data-value="" style="border-left:none;">'+i("Not Set")+'</button></div></div><div id="divContainerParagraphSize" style="display:flex;flex-direction: column;"><div style="padding-top:15px;padding-bottom: 3px;">Paragraph Size:</div><div style="display:flex"><button title="'+i("16")+'" class="cmd-box-parasize" data-value="16" style="width:40px">16</button><button title="'+i("17")+'" class="cmd-box-parasize" data-value="17" style="width:40px">17</button><button title="'+i("18")+'" class="cmd-box-parasize" data-value="18" style="width:40px">18</button><button title="'+i("19")+'" class="cmd-box-parasize" data-value="19" style="width:40px">19</button><button title="'+i("20")+'" class="cmd-box-parasize" data-value="20" style="width:40px">20</button><button title="'+i("21")+'" class="cmd-box-parasize" data-value="21" style="width:40px">21</button><button title="'+i("Not Set")+'" class="cmd-box-parasize" data-value="" style="">'+i("Not Set")+'</button></div></div><div style="padding-top:20px;"><label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> '+i("Auto adjust text size on large screen.")+'</label></div><div id="divContainerLineHeight" style="display:flex;flex-direction: column;"><div style="padding-top:15px;padding-bottom: 3px;">Line Height:</div><div style="display:flex;flex-flow: wrap;width: 290px;"><button title="'+i("1")+'" class="cmd-box-lineheight" data-value="1" style="width:40px">1</button><button title="'+i("1.1")+'" class="cmd-box-lineheight" data-value="1.1" style="width:40px">1.1</button><button title="'+i("1.2")+'" class="cmd-box-lineheight" data-value="1.2" style="width:40px">1.2</button><button title="'+i("1.3")+'" class="cmd-box-lineheight" data-value="1.3" style="width:40px">1.3</button><button title="'+i("1.4")+'" class="cmd-box-lineheight" data-value="1.4" style="width:40px">1.4</button><button title="'+i("1.5")+'" class="cmd-box-lineheight" data-value="1.5" style="width:40px">1.5</button><button title="'+i("1.6")+'" class="cmd-box-lineheight" data-value="1.6" style="width:40px">1.6</button><button title="'+i("1.7")+'" class="cmd-box-lineheight" data-value="1.7" style="width:40px">1.7</button><button title="'+i("1.8")+'" class="cmd-box-lineheight" data-value="1.8" style="width:40px">1.8</button><button title="'+i("1.9")+'" class="cmd-box-lineheight" data-value="1.9" style="width:40px">1.9</button><button title="'+i("2")+'" class="cmd-box-lineheight" data-value="2" style="width:40px">2</button><button title="'+i("Not Set")+'" class="cmd-box-lineheight" data-value="" style="">'+i("Not Set")+'</button><br style="clear:both"></div></div>',n+=(this.builder.settings.enableContentStyle?'<div style="padding-top:10px;display:flex;flex-direction: column;"><div style="display:none"><button title="'+i("Typography Style")+'" class="cmd-box-typography" data-value="+"> '+i("Typography Style")+' </button><br style="clear:both"></div></div>':"")+'</div><div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="padding-top:10px;"><label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> '+i("Parallax")+'</label></div><div style="padding-top:10px;"><label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> '+i("Fade")+"</label></div>",n+='<div style="display:flex;flex-direction: row;"><div style="display:flex;flex-direction: column;margin-right:20px;"><div style="padding-top:13px;padding-bottom: 3px;">'+i("Position")+':</div><div style="display:flex"><button title="'+i("Top Left")+'" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">&#8598;</button><button title="'+i("Top Center")+'" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">&#8593;</button><button title="'+i("Top Right")+'" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">&#8599;</button></div><div style="display:flex"><button title="'+i("Middle Left")+'" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">&#8592;</button><button title="'+i("Middle Center")+'" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">&#9737;</button><button title="'+i("Middle Right")+'" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">&#8594;</button></div><div style="display:flex"><button title="'+i("Bottom Left")+'" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">&#8601;</button><button title="'+i("Bottom Center")+'" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">&#8595;</button><button title="'+i("Bottom Right")+'" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">&#8600;</button></div></div><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 1px;">'+i("Height")+':</div><div style="display: flex;flex-direction: row;flex-wrap: wrap;"><button title="'+i("Auto")+'" class="cmd-content-height" data-value="" style="width:60px">Auto</button><button title="'+i("Full")+'" class="cmd-content-height" data-value="100" style="width:40px">Full</button></div><div class="div-content-justify"><div style="padding-top:10px;padding-bottom: 1px;">'+i("Justify")+':</div><div style="display: flex;flex-direction: row;flex-wrap: wrap;"><button title="'+i("Top")+'" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button><button title="'+i("Bottom")+'" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button><button title="'+i("Space Between")+'" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button></div></div></div></div>',n+='<div style="display:flex;flex-direction: row;"><div style="display:flex;flex-direction: column;margin-right:25px"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Vertical Adjustment")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button><button title="'+i("Increase")+'" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button><button title="'+i("Not Set")+'" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">'+i("Not Set")+'</button></div></div><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Horizontal Adjustment")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button><button title="'+i("Increase")+'" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button><button title="'+i("Not Set")+'" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">'+i("Not Set")+'</button></div></div></div><div style="display:none;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Content Spacing")+':</div><div style="display:flex"><button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button><button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button><button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button><button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button><button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button><button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button><button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button><button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button><button title="'+i("Not Set")+'" class="cmd-box-content-spacing" data-value="">'+i("Not Set")+'</button></div></div><div style="padding-top:20px;padding-bottom:0;">'+i("Content Spacing")+':</div><div style="display:flex;flex-direction: column;"><div style="padding-top:10px;padding-bottom: 3px;">'+i("Top")+':</div><div style="display:flex"><button title="0" class="cmd-box-content-topspacing on" data-value="0" style="width:40px">0</button><button title="10" class="cmd-box-content-topspacing" data-value="10" style="width:40px">10</button><button title="20" class="cmd-box-content-topspacing" data-value="20" style="width:40px">20</button><button title="30" class="cmd-box-content-topspacing" data-value="30" style="width:40px">30</button><button title="40" class="cmd-box-content-topspacing" data-value="40" style="width:40px">40</button><button title="50" class="cmd-box-content-topspacing" data-value="50" style="width:40px">50</button><button title="60" class="cmd-box-content-topspacing" data-value="60" style="width:40px">60</button><button title="'+i("Not Set")+'" class="cmd-box-content-topspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button></div></div><div style="display:flex;flex-direction: column;"><div style="padding-top:10px;padding-bottom: 3px;">'+i("Bottom")+':</div><div style="display:flex"><button title="0" class="cmd-box-content-bottomspacing on" data-value="0" style="width:40px;">0</button><button title="10" class="cmd-box-content-bottomspacing" data-value="10" style="width:40px">10</button><button title="20" class="cmd-box-content-bottomspacing" data-value="20" style="width:40px">20</button><button title="30" class="cmd-box-content-bottomspacing" data-value="30" style="width:40px">30</button><button title="40" class="cmd-box-content-bottomspacing" data-value="40" style="width:40px">40</button><button title="50" class="cmd-box-content-bottomspacing" data-value="50" style="width:40px">50</button><button title="60" class="cmd-box-content-bottomspacing" data-value="60" style="width:40px">60</button><button title="'+i("Not Set")+'" class="cmd-box-content-bottomspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button></div></div></div>',n+='<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="padding-top:20px;"><label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> '+i("Ken Burns Effect")+'</label></div><div style="padding-top:10px;"><label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> '+i("Parallax")+" & "+i("Scale")+'</label></div><div style="padding-top:10px;"><label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> '+i("Parallax")+" "+i("(visible on preview)")+'</label></div><div style="padding-top:10px;"><label for="chkZoomOnHover" style="margin:0;"><input id="chkZoomOnHover" type="checkbox" /> '+i("Zoom on Hover")+"</label></div>",n+='<div style="padding-top:20px;padding-bottom: 3px;">'+i("Overlay Color")+':</div><div style="display:flex;"><button title="'+i("Overlay Color")+'" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button></div><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Overlay Transparency")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button><button title="'+i("Increase")+'" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button><button title="'+i("None")+'" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">'+i("None")+'</button></div></div></div><div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="display:flex;flex-direction: column;"><select class="cmd-box-animate"><option value="">'+i("None")+'</option><option value="is-pulse">pulse</option><option value="is-bounceIn">bounceIn</option><option value="is-fadeIn">fadeIn</option><option value="is-fadeInDown">fadeInDown</option><option value="is-fadeInLeft">fadeInLeft</option><option value="is-fadeInRight">fadeInRight</option><option value="is-fadeInUp">fadeInUp</option><option value="is-flipInX">flipInX</option><option value="is-flipInY">flipInY</option><option value="is-slideInUp">slideInUp</option><option value="is-slideInDown">slideInDown</option><option value="is-slideInLeft">slideInLeft</option><option value="is-slideInRight">slideInRight</option><option value="is-zoomIn">zoomIn</option></select><label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> '+i("Once")+"</label></div>",n+='<div><label style="padding-top:20px;">'+i("Delay")+': <select class="cmd-box-animatedelay" style="margin-top:3px;"><option value="">'+i("None")+'</option><option value="delay-0ms">0s</option><option value="delay-100ms">100ms</option><option value="delay-200ms">200ms</option><option value="delay-300ms">300ms</option><option value="delay-400ms">400ms</option><option value="delay-500ms">500ms</option><option value="delay-600ms">600ms</option><option value="delay-700ms">700ms</option><option value="delay-800ms">800ms</option><option value="delay-900ms">900ms</option><option value="delay-1000ms">1000ms</option><option value="delay-1100ms">1100ms</option><option value="delay-1200ms">1200ms</option><option value="delay-1300ms">1300ms</option><option value="delay-1400ms">1400ms</option><option value="delay-1500ms">1500ms</option><option value="delay-1600ms">1600ms</option><option value="delay-1700ms">1700ms</option><option value="delay-1800ms">1800ms</option><option value="delay-1900ms">1900ms</option><option value="delay-2000ms">2000ms</option><option value="delay-2100ms">2100ms</option><option value="delay-2200ms">2200ms</option><option value="delay-2300ms">2300ms</option><option value="delay-2400ms">2400ms</option><option value="delay-2500ms">2500ms</option><option value="delay-2600ms">2600ms</option><option value="delay-2700ms">2700ms</option><option value="delay-2800ms">2800ms</option><option value="delay-2900ms">2900ms</option><option value="delay-3000ms">3000ms</option></select></label></div><div style="padding-top:20px"><button class="cmd-box-animate-test" style="width:100%">'+i("Test")+'</button></div></div></div></div><div class="is-modal pickphoto" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;"><div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">'+i("Photos")+'</div><iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe></div></div>',c.appendHtml(e,n);const o=e.querySelector(".is-modal.editbox");this.modalEditBox=o;const s=e.querySelector(".is-modal.editcustomcode"),l=e.querySelector(".is-modal.editmodule"),r=o.querySelector("#divBoxClick");this.divBoxClick=r;const d=o.querySelector("#divBoxGeneral");this.divBoxGeneral=d;const u=o.querySelector(".is-modal-close");u&&u.addEventListener("click",(()=>{this.close()})),new a(o);c.appendHtml(o,'<div class="feature-master-style"></div>');const p=o.querySelector(".feature-master-style");if("none"===window.getComputedStyle(p,null).getPropertyValue("display"));else{const t=o.querySelector("#divContainerParagraphSize"),e=o.querySelector("#divContainerLineHeight");t.style.display="none",e.style.display="none"}p.parentNode.removeChild(p);const h=o.querySelectorAll(".is-tabs a");h.forEach((t=>{t.addEventListener("click",(e=>{if(e.preventDefault(),c.hasClass(t,"active"))return;h.forEach((t=>{c.removeClass(t,"active")})),c.addClass(t,"active");let i=t.getAttribute("data-content");o.querySelectorAll(".is-tab-content").forEach((t=>{t.style.display="none"})),o.querySelector("#"+i).style.display="block"}))})),o.querySelector("#tabBoxGeneral").click();o.querySelector(".cmd-box-smaller").addEventListener("click",(()=>{this.box.boxWidthSmaller()}));o.querySelector(".cmd-box-larger").addEventListener("click",(()=>{this.box.boxWidthLarger()}));o.querySelector(".cmd-box-left").addEventListener("click",(()=>{this.box.boxMoveLeft()}));o.querySelector(".cmd-box-right").addEventListener("click",(()=>{this.box.boxMoveRight()}));o.querySelectorAll(".cmd-box-textcolor").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxTextColor(e);o.querySelectorAll(".cmd-box-textcolor").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-textalign").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxTextAlign(e);o.querySelectorAll(".cmd-box-textalign").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-parasize").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxParagraphSize(e);o.querySelectorAll(".cmd-box-parasize").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-lineheight").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxLineHeight(e);o.querySelectorAll(".cmd-box-lineheight").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-textopacity").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.setContentOpacity(e)}))}));o.querySelectorAll(".cmd-box-typography").forEach((t=>{t.addEventListener("click",(()=>{setTimeout((()=>{this.builder.hideModal(o),e.querySelector('.is-sidebar > button[data-command="typography"]').click();c.appendHtml(e,'<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>');const t=e.querySelector(".is-sidebar-overlay");t&&t.addEventListener("click",(()=>{const t=document.querySelector(".is-sidebar-overlay");t&&(t.remove(),document.body.style.overflowY=""),document.querySelectorAll(".is-sidebar-button.active").forEach((t=>{c.removeClass(t,"active")})),document.querySelectorAll(".is-sidebar-content.active").forEach((t=>{c.removeClass(t,"active")}))})),e.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute("data-applyto","box"),e.querySelector(".typo-target-default").style.display="none",e.querySelector(".typo-target-box").style.display="flex"}),10)}))}));o.querySelectorAll(".cmd-box-size").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.setContentWidth(e,(t=>{o.querySelector(".inp-box-size").value=t,o.querySelector(".val-box-size").innerHTML=t}))}))}));const m=o.querySelector(".inp-box-size");m.addEventListener("input",(()=>{this.builder.editor.saveForUndo();const t=[];let e=300;for(;e<=2700;)t.push(e),e+=20;let i=this.builder.activeBox.querySelector(".is-container");i.classList.forEach((t=>{-1!==t.indexOf("is-content-")&&"is-content-left"!==t&&"is-content-right"!==t&&c.removeClass(i,t)}));let n=m.value;if(!isNaN(n)&&n>=300&&n<=2700){i.style.maxWidth=n+"px";let e=parseInt(window.getComputedStyle(i,null).getPropertyValue("max-width"));for(let i=0;i<=121;i++){let n=t[i];if(n>e){e=n;break}}n=e,n<=300&&(n=300),n>=2700&&(n=2700),c.addClass(i,"is-content-"+n)}this.builder.settings.onChange()}));o.querySelectorAll(".cmd-content-justify").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.justifyContent(e),o.querySelectorAll(".cmd-content-justify").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on")}))}));const b=o.querySelectorAll(".cmd-content-height"),g=o.querySelector(".div-content-justify");b.forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");if(this.box.setContentHeight(e),""===e&&(g.style.display="none"),"100"===e){g.style.display="block",o.querySelectorAll(".cmd-content-justify").forEach((t=>{c.removeClass(t,"on")})),c.addClass(o.querySelector('.cmd-content-justify[data-value="space-between"]'),"on")}o.querySelectorAll(".cmd-content-height").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-content-spacing").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value"),i=this.builder.activeBox.querySelector(".is-container");i.classList.remove("content-py-0"),i.classList.remove("content-py-10"),i.classList.remove("content-py-20"),i.classList.remove("content-py-30"),i.classList.remove("content-py-40"),i.classList.remove("content-py-50"),i.classList.remove("content-py-60"),i.classList.remove("content-py-70"),i.classList.remove("content-py-80"),""!==e&&i.classList.add(`content-py-${e}`),o.querySelectorAll(".cmd-box-content-spacing").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-box-content-topspacing").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value"),i=this.builder.activeBox.querySelector(".is-container");i.classList.remove("content-py-0"),i.classList.remove("content-py-10"),i.classList.remove("content-py-20"),i.classList.remove("content-py-30"),i.classList.remove("content-py-40"),i.classList.remove("content-py-50"),i.classList.remove("content-py-60"),i.classList.remove("content-py-70"),i.classList.remove("content-py-80"),i.classList.remove("content-pt-0"),i.classList.remove("content-pt-10"),i.classList.remove("content-pt-20"),i.classList.remove("content-pt-30"),i.classList.remove("content-pt-40"),i.classList.remove("content-pt-50"),i.classList.remove("content-pt-60"),i.classList.remove("content-pt-70"),i.classList.remove("content-pt-80"),""!==e&&i.classList.add(`content-pt-${e}`),o.querySelectorAll(".cmd-box-content-topspacing").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-box-content-bottomspacing").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value"),i=this.builder.activeBox.querySelector(".is-container");i.classList.remove("content-py-0"),i.classList.remove("content-py-10"),i.classList.remove("content-py-20"),i.classList.remove("content-py-30"),i.classList.remove("content-py-40"),i.classList.remove("content-py-50"),i.classList.remove("content-py-60"),i.classList.remove("content-py-70"),i.classList.remove("content-py-80"),i.classList.remove("content-pb-0"),i.classList.remove("content-pb-10"),i.classList.remove("content-pb-20"),i.classList.remove("content-pb-30"),i.classList.remove("content-pb-40"),i.classList.remove("content-pb-50"),i.classList.remove("content-pb-60"),i.classList.remove("content-pb-70"),i.classList.remove("content-pb-80"),""!==e&&i.classList.add(`content-pb-${e}`),o.querySelectorAll(".cmd-box-content-bottomspacing").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-box-content-pos").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.moveContent(e),o.querySelectorAll(".cmd-box-content-pos").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-content-edge-x").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.adjustContentX(e)}))}));o.querySelectorAll(".cmd-box-content-edge-y").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.adjustContentY(e)}))}));o.querySelector("#chkOptimizeTextSize").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.boxOptimizeTextSize(),this.builder.settings.onChange()}));o.querySelector("#chkParallaxContent").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.boxContainerAnim(),this.builder.settings.onChange()}));o.querySelector("#chkFadeContent").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.boxContainerAnim(),this.builder.settings.onChange()}));const v=o.querySelector("#chkAutofitContent");v.addEventListener("click",(()=>{let t=v.checked;this.box.setAutoFit(t)}));const f=o.querySelector("#inpBoxMinHeight");f.addEventListener("change",(()=>{let t=f.value;this.box.setMinHeight(t)}));o.querySelector(".cmd-box-pickphoto").addEventListener("click",(()=>{const t=o.querySelector(".is-modal.pickphoto");this.builder.showModal(t);const e=this.builder.settings.photoselect;t.querySelector("iframe").setAttribute("src",e)}));const y=o.querySelector("#chkAnimateBg");y.addEventListener("click",(()=>{y.checked?this.box.boxBgAnimate(!0):this.box.boxBgAnimate(!1)}));const x=o.querySelector("#chkParallaxBg");x.addEventListener("click",(()=>{x.checked?this.box.boxBgParallaxScale(!0):this.box.boxBgParallaxScale(!1)}));const _=o.querySelector("#chkParallaxBg2");_.addEventListener("click",(()=>{_.checked?this.box.boxBgParallax(!0):this.box.boxBgParallax(!1)}));const w=o.querySelector("#chkZoomOnHover");w.addEventListener("click",(()=>{w.checked?this.box.boxBgZoomHover(!0):this.box.boxBgZoomHover(!1)}));o.querySelectorAll(".cmd-box-overlayopacity").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value");this.box.boxOverlayOpacity(e),this.builder.settings.onChange()}))}));const S=o.querySelector(".cmd-box-animate");S.addEventListener("change",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(),c.removeClass(t,"is-animated"),c.removeClass(t,"is-pulse"),c.removeClass(t,"is-bounceIn"),c.removeClass(t,"is-fadeIn"),c.removeClass(t,"is-fadeInDown"),c.removeClass(t,"is-fadeInLeft"),c.removeClass(t,"is-fadeInRight"),c.removeClass(t,"is-fadeInUp"),c.removeClass(t,"is-flipInX"),c.removeClass(t,"is-flipInY"),c.removeClass(t,"is-slideInUp"),c.removeClass(t,"is-slideInDown"),c.removeClass(t,"is-slideInLeft"),c.removeClass(t,"is-slideInRight"),c.removeClass(t,"is-zoomIn"),c.removeClass(t,"animated"),c.removeClass(t,"pulse"),c.removeClass(t,"bounceIn"),c.removeClass(t,"fadeIn"),c.removeClass(t,"fadeInDown"),c.removeClass(t,"fadeInLeft"),c.removeClass(t,"fadeInRight"),c.removeClass(t,"fadeInUp"),c.removeClass(t,"flipInX"),c.removeClass(t,"flipInY"),c.removeClass(t,"slideInUp"),c.removeClass(t,"slideInDown"),c.removeClass(t,"slideInLeft"),c.removeClass(t,"slideInRight"),c.removeClass(t,"zoomIn"),t.removeAttribute("data-scroll"),c.removeClass(t,"is-inview"),""!==S.value?(c.addClass(t,"is-animated"),c.addClass(t,S.value),t.style.transition="none",t.style.opacity=0,setTimeout((()=>{t.style.transition="",t.style.opacity="",t.setAttribute("data-scroll",""),this.builder.settings.onChange(),this.builder.settings.onRender()}),30)):(this.builder.settings.onChange(),this.builder.settings.onRender())}));o.querySelector(".cmd-box-animate-test").addEventListener("click",(()=>{const t=this.builder.activeBox;c.removeClass(t,"animated"),c.removeClass(t,"pulse"),c.removeClass(t,"bounceIn"),c.removeClass(t,"fadeIn"),c.removeClass(t,"fadeInDown"),c.removeClass(t,"fadeInLeft"),c.removeClass(t,"fadeInRight"),c.removeClass(t,"fadeInUp"),c.removeClass(t,"flipInX"),c.removeClass(t,"flipInY"),c.removeClass(t,"slideInUp"),c.removeClass(t,"slideInDown"),c.removeClass(t,"slideInLeft"),c.removeClass(t,"slideInRight"),c.removeClass(t,"zoomIn"),t.removeAttribute("data-scroll"),c.removeClass(t,"is-inview"),""!==S.value?(c.addClass(t,"is-animated"),c.addClass(t,S.value),t.style.transition="none",t.style.opacity=0,setTimeout((()=>{t.style.transition="",t.style.opacity="",t.setAttribute("data-scroll",""),this.builder.settings.onChange(),this.builder.settings.onRender()}),30)):(this.builder.settings.onChange(),this.builder.settings.onRender())}));const k=o.querySelector("#chkAnimOnce");k.addEventListener("click",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(),k.checked?c.addClass(t,"once"):c.removeClass(t,"once"),this.builder.settings.onChange(),this.builder.settings.onRender()}));const C=o.querySelector(".cmd-box-animatedelay");C.addEventListener("change",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(),c.removeClass(t,"delay-0ms"),c.removeClass(t,"delay-100ms"),c.removeClass(t,"delay-200ms"),c.removeClass(t,"delay-300ms"),c.removeClass(t,"delay-400ms"),c.removeClass(t,"delay-500ms"),c.removeClass(t,"delay-600ms"),c.removeClass(t,"delay-700ms"),c.removeClass(t,"delay-800ms"),c.removeClass(t,"delay-900ms"),c.removeClass(t,"delay-1000ms"),c.removeClass(t,"delay-1100ms"),c.removeClass(t,"delay-1200ms"),c.removeClass(t,"delay-1300ms"),c.removeClass(t,"delay-1400ms"),c.removeClass(t,"delay-1500ms"),c.removeClass(t,"delay-1600ms"),c.removeClass(t,"delay-1700ms"),c.removeClass(t,"delay-1800ms"),c.removeClass(t,"delay-1900ms"),c.removeClass(t,"delay-2000ms"),c.removeClass(t,"delay-2100ms"),c.removeClass(t,"delay-2200ms"),c.removeClass(t,"delay-2300ms"),c.removeClass(t,"delay-2400ms"),c.removeClass(t,"delay-2500ms"),c.removeClass(t,"delay-2600ms"),c.removeClass(t,"delay-2700ms"),c.removeClass(t,"delay-2800ms"),c.removeClass(t,"delay-2900ms"),c.removeClass(t,"delay-3000ms"),""!==C.value&&c.addClass(t,C.value),this.builder.settings.onChange()}));const L=o.querySelector(".input-box-bgimage");L&&L.addEventListener("click",(()=>{const t=this.builder.activeBox.querySelector(".is-overlay-bg");let e="";t&&t.style.backgroundImage&&-1!==t.style.backgroundImage.indexOf("url(")&&(e=t.style.backgroundImage.slice(4,-1).replace(/["']/g,"")),this.builder.editor.openImagePicker(e,(t=>{this.boxImage(t);const e=this.builder.activeBox,i=e.querySelector(".is-overlay"),n=e.querySelector(".is-overlay-bg");n.style.filter="",i.style.filter="";o.querySelector(".chk-box-bgimage-grayscale").checked=!1,n.style.backgroundPosition="50% 60%",n.removeAttribute("data-scale"),n.removeAttribute("data-x"),n.removeAttribute("data-y"),n.style.top="",n.style.bottom="",n.style.left="",n.style.right="",n.style.width="",n.style.height="",n.removeAttribute("data-bg-xs"),n.removeAttribute("data-bg-sm"),n.removeAttribute("data-bg-md")}),L)}));const A=o.querySelector(".input-box-bgimageadjust");A&&A.addEventListener("click",(()=>{const t=this.builder.activeBox.querySelector(".is-overlay-bg");this.builder.editor.openImageAdjust(t,A,!0)}));const E=o.querySelector(".chk-box-bgimage-grayscale");E.addEventListener("click",(()=>{const t=this.builder.activeBox,e=t.querySelector(".is-overlay"),i=t.querySelector(".is-overlay-bg");E.checked?(i.style.filter="grayscale(1)",e.style.filter="grayscale(1)"):(i.style.filter&&(i.style.filter=i.style.filter.replace("grayscale(1)","")),e.style.filter&&(e.style.filter=e.style.filter.replace("grayscale(1)",""))),this.builder.onChange()}));const q=o.querySelector("#chkStackBg");q.addEventListener("change",(()=>{this.box.stackBg(q.checked)}));o.querySelector(".cmd-box-addcode").addEventListener("click",(()=>{const t=this.builder.activeBox;this.box.addCode(t,"code"),this.builder.onChange(),this.edit();let e=t.querySelector(".is-box-tool");e&&(t.querySelector(".is-cover-upload").style.display="block",t.querySelector(".is-box-edit").style.display="inline-block",t.querySelector(".is-module-edit").style.display="inline-block",e.style.width="120px",e.style.left="calc(50% - 60px)")}));o.querySelector(".cmd-box-addtext").addEventListener("click",(()=>{this.box.addContent(),this.edit()}));o.querySelector(".cmd-box-removetext").addEventListener("click",(()=>{this.builder.editor.util.confirm(i("Are you sure you want to remove all text/content in this box?"),(t=>{t&&(this.box.removeContent(),this.edit())}))}));o.querySelector(".cmd-box-removecode").addEventListener("click",(()=>{this.builder.editor.util.confirm(i("Are you sure you want to remove custom code in this box?"),(t=>{if(t){const t=this.builder.activeBox;this.box.removeCode(),this.edit();let e=t.querySelector(".is-box-tool");e&&(t.querySelector(".is-cover-upload").style.display="block",t.querySelector(".is-box-edit").style.display="inline-block",t.querySelector(".is-module-edit").style.display="none",e.style.width="80px",e.style.left="calc(50% - 35px)")}}))}));const T=o.querySelector(".input-box-bgremove");T&&T.addEventListener("click",(()=>{this.boxImage("")}));const M=this.builder.editor.colorpicker(),O=o.querySelector(".input-box-bgcolor");O.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeBox;let e=O.style.backgroundColor,i=t.querySelector(".is-overlay");M.open((t=>{i.style.backgroundColor=t,i.style.backgroundImage="",O.style.backgroundColor=t,this.builder.onChange()}),e)})),o.querySelector(".input-box-gradient").addEventListener("click",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(!0);let e=t.querySelector(".is-overlay");this.builder.editor.gradientpicker().open(e,(()=>{this.builder.onChange()}))}));const I=o.querySelector(".input-box-overlaycolor");I.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeBox;let e=t.querySelector(".is-overlay");e||(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"));let i=e.querySelector(".is-overlay-bg");i||(e.insertAdjacentHTML("beforeend",'<div class="is-overlay-bg"></div>'),i=e.querySelector(".is-overlay-bg"));let n=i.querySelector(".is-overlay-color");n||(i.insertAdjacentHTML("beforeend",`<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`),n=i.querySelector(".is-overlay-color"));let o=n.style.backgroundColor;M.open((t=>{if("none"!==n.style.display&&0!==n.style.opacity||(n.style.display="block",n.style.opacity=.1),""===t){let t=i.querySelector(".is-overlay-color");t&&t.parentNode.removeChild(t)}else{let e=i.querySelector(".is-overlay-color");e||(i.insertAdjacentHTML("beforeend",`<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`),e=i.querySelector(".is-overlay-color")),e.style.backgroundColor=t}return I.style.backgroundColor=t,this.builder.onChange(),!1}),o)}));let $=this.builder.settings.largerImageHandler,R=this.builder.settings.onLargerImageUpload,B=this.builder.settings.onImageSelectClick,P=this.builder.settings.imageselect,N=this.builder.settings.onFileSelectClick,z=this.builder.settings.fileselect;""!==$||R||(o.querySelector(".image-larger5").style.display="none"),B||""!==P||(this.divBoxClick.querySelector(".input-select").style.display="none"),B||""!==P||(this.divBoxGeneral.querySelector(".input-select").style.display="none");const D=o.querySelector(".input-src");try{this.builder.editor.dom.observeElement(D,"value",(()=>{this.box.applyBoxClick(D.value)}))}catch(t){}if(this.builder.onOtherSelectClick||""!==this.builder.otherSelect){this.divBoxClick.querySelector(".input-select-other").style.display="flex";let t=this.divBoxClick.querySelector(".input-select-other");t.addEventListener("click",(()=>{this.builder.editor.openOther(this.divBoxClick.querySelector(".input-src"),"all",t)}))}if(B||P||N||z){const t=this.divBoxClick.querySelector(".input-select");t&&t.addEventListener("click",(()=>{this.builder.editor.openAsset(o.querySelector(".input-src"),"media",t)}))}if(B||P){const t=this.divBoxGeneral.querySelector(".input-select");this.builder.editor.renderSelectAsset(t,"image",(t=>{this.boxImage(t);const e=this.builder.activeBox,i=e.querySelector(".is-overlay"),n=e.querySelector(".is-overlay-bg");n.style.filter="",i.style.filter="";o.querySelector(".chk-box-bgimage-grayscale").checked=!1,n.style.backgroundPosition="50% 60%",n.removeAttribute("data-scale"),n.removeAttribute("data-x"),n.removeAttribute("data-y"),n.style.top="",n.style.bottom="",n.style.left="",n.style.right="",n.style.width="",n.style.height="",n.removeAttribute("data-bg-xs"),n.removeAttribute("data-bg-sm"),n.removeAttribute("data-bg-md")}))}let H=o.querySelector("#fileImage5");H.addEventListener("change",(t=>{let e=H;for(;"form"!==e.nodeName.toLowerCase();)e=e.parentNode;let i=e;this.builder.editor.dom.addClass(i,"please-wait"),o.querySelector("#hidRefId5_box").value=this.builder.settings.customval,R?R(t):i.submit(),H.value=""})),D.addEventListener("focus",(()=>{this.builder.editor.saveForUndo(!0)})),D.addEventListener("keyup",(()=>{const t=this.builder.activeBox;""===D.value?(this.builder.editor.dom.removeClass(t,"block-click"),t.removeAttribute("data-modal-url")):(this.builder.editor.dom.addClass(t,"block-click"),t.setAttribute("data-modal-url",D.value)),this.builder.onChange()})),o.querySelector(".cmd-box-testclick").addEventListener("click",(()=>{const t=this.builder.activeBox;this.builder.editor.openMedia(t)}));s.querySelector(".input-ok").addEventListener("click",(()=>{let t=this.builder.activeBox.querySelector(".is-overlay-content[data-module]");this.builder.editor.saveForUndo();const i=e.querySelector("#hidBoxCustomCode"),n=e.querySelector("#txtBoxCustomCode");i.value=n.value,t.setAttribute("data-html",encodeURIComponent(i.value));let o=i.value;o=o.replace(/{id}/g,c.uniqueId());let a=document.createRange();t.innerHTML="",t.appendChild(a.createContextualFragment(o)),this.builder.settings.onRender(),this.builder.settings.onChange(),this.builder.hideModal(s)}));l.querySelector(".input-ok").addEventListener("click",(()=>{let t=this.builder.doc.querySelector('[data-module-active="1"]');this.builder.editor.saveForUndo();let i=l.querySelector("iframe");i.contentWindow.construct&&i.contentWindow.construct(),this.builder.editor.saveForUndo();const n=e.querySelector("#hidModuleCode"),o=e.querySelector("#hidModuleSettings");t.setAttribute("data-html",encodeURIComponent(n.value)),t.setAttribute("data-settings",encodeURIComponent(o.value));let s=n.value;s=s.replace(/{id}/g,c.uniqueId());let a=document.createRange();t.innerHTML="",t.appendChild(a.createContextualFragment(s)),this.builder.settings.onRender(),this.builder.settings.onChange(),this.builder.hideModal(l)}))}read(){const t=this.builderStuff.querySelector(".is-modal.editbox"),e=this.builder.activeBox;let i=e.querySelector(".is-overlay");const n=e.querySelector(".is-overlay-bg"),o=e.querySelector(".is-video-bg"),s=e.querySelector(".is-overlay-content"),a=e.querySelector(".is-builder");let l=!1;if(n){this.builder.editor.dom.elementChildren(n).forEach((t=>{c.hasClass(t,"is-overlay-color")||(l=!0)}))}if(n?(""==this.builder.settings.photoselect?t.querySelector("#divBoxPickPhoto").style.display="none":t.querySelector("#divBoxPickPhoto").style.display="block",l?(t.querySelector("#chkAnimateBg").parentNode.parentNode.style.display="none",t.querySelector("#chkParallaxBg").parentNode.parentNode.style.display="none"):t.querySelector("#chkAnimateBg").parentNode.parentNode.style.display=""):t.querySelector("#divBoxPickPhoto").style.display="none",this.builder.settings.enableAnimation?t.querySelector("#tabBoxAnimate").style.display="":t.querySelector("#tabBoxAnimate").style.display="none",e.querySelector(".is-container")){e.querySelector(".is-container .is-module")?t.querySelector("#tabBoxContentText").style.display="none":t.querySelector("#tabBoxContentText").style.display="";let i=window.getComputedStyle(e,null).getPropertyValue("display");"table"===i||"table-cell"===i||"flex"===i?(t.querySelector("#tabBoxContentContainer").style.display="",t.querySelector("#divContentSize").style.display=""):(t.querySelector("#tabBoxContentContainer").style.display="none",t.querySelector("#divContentSize").style.display="none")}else t.querySelector("#tabBoxContentText").style.display="none",t.querySelector("#tabBoxContentContainer").style.display="none",t.querySelector("#divContentSize").style.display="none";let r="middle";(c.hasClass(e,"is-content-top")||e.querySelector(".is-content-top"))&&(r="top"),(c.hasClass(e,"is-content-bottom")||e.querySelector(".is-content-bottom"))&&(r="bottom");let d="center";if(a&&(c.hasClass(a,"is-content-left")&&(d="left"),c.hasClass(a,"is-content-right")&&(d="right")),t.querySelectorAll(".cmd-box-content-pos").forEach((t=>{c.removeClass(t,"on")})),"top"===r&&"left"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="topleft"]'),"on"),"top"===r&&"center"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="topcenter"]'),"on"),"top"===r&&"right"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="topright"]'),"on"),"middle"===r&&"left"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="middleleft"]'),"on"),"middle"===r&&"center"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="middlecenter"]'),"on"),"middle"===r&&"right"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="middleright"]'),"on"),"bottom"===r&&"left"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="bottomleft"]'),"on"),"bottom"===r&&"center"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="bottomcenter"]'),"on"),"bottom"===r&&"right"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="bottomright"]'),"on"),t.querySelector("#divContainerTransparency").style.display="",t.querySelector("#divContainerTextAlign").style.display="",s&&(t.querySelector("#tabBoxContentText").style.display="",e.querySelector(".is-container")||(t.querySelector("#divContainerTransparency").style.display="none",t.querySelector("#divContainerTextAlign").style.display="none")),o?t.querySelector("#divBoxBackgroundImage").style.display="none":(t.querySelector("#divBoxBackgroundImage").style.display="",l&&(t.querySelector("#divBoxBackgroundImage").style.display="none")),n&&(c.hasClass(n,"is-scale-animated")?t.querySelector("#chkAnimateBg").checked=!0:t.querySelector("#chkAnimateBg").checked=!1,n.getAttribute("data-top-bottom")||n.getAttribute("data-bottom-top")?t.querySelector("#chkParallaxBg").checked=!0:t.querySelector("#chkParallaxBg").checked=!1,"fixed"===n.style.backgroundAttachment?t.querySelector("#chkParallaxBg2").checked=!0:t.querySelector("#chkParallaxBg2").checked=!1,e.classList.contains("hover-zoom")?t.querySelector("#chkZoomOnHover").checked=!0:t.querySelector("#chkZoomOnHover").checked=!1),c.hasClass(e,"is-section")?(t.querySelector("#divBoxSize").style.display="none",t.querySelector("#divBoxMove").style.display="none"):(t.querySelector("#divBoxSize").style.display="block",t.querySelector("#divBoxMove").style.display="block"),t.querySelector("#chkParallaxContent").checked=!1,t.querySelector("#chkFadeContent").checked=!1,a){let e=a.getAttribute("data-bottom-top");e&&(-1!==e.indexOf("translateY")&&(t.querySelector("#chkParallaxContent").checked=!0),-1!==e.indexOf("opacity")&&(t.querySelector("#chkFadeContent").checked=!0))}let u=t.querySelectorAll(".cmd-box-textcolor");if(u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(e,"is-dark-text")){const e=t.querySelector('.cmd-box-textcolor[data-value="dark"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-light-text")){const e=t.querySelector('.cmd-box-textcolor[data-value="light"]');c.addClass(e,"on")}if(u=t.querySelectorAll(".cmd-box-textalign"),u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(e,"is-align-left")){const e=t.querySelector('.cmd-box-textalign[data-value="left"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-align-center")){const e=t.querySelector('.cmd-box-textalign[data-value="center"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-align-right")){const e=t.querySelector('.cmd-box-textalign[data-value="right"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-align-justify")){const e=t.querySelector('.cmd-box-textalign[data-value="justify"]');c.addClass(e,"on")}if(a){if(u=t.querySelectorAll(".cmd-box-parasize"),u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(a,"size-16")){const e=t.querySelector('.cmd-box-parasize[data-value="16"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-17")){const e=t.querySelector('.cmd-box-parasize[data-value="17"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-18")){const e=t.querySelector('.cmd-box-parasize[data-value="18"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-19")){const e=t.querySelector('.cmd-box-parasize[data-value="19"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-20")){const e=t.querySelector('.cmd-box-parasize[data-value="20"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-21")){const e=t.querySelector('.cmd-box-parasize[data-value="21"]');c.addClass(e,"on")}if(u=t.querySelectorAll(".cmd-box-lineheight"),u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(a,"leading-none")){const e=t.querySelector('.cmd-box-lineheight[data-value="1"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-11")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.1"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-12")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.2"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-13")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.3"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-14")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.4"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-15")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.5"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-16")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.6"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-17")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.7"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-18")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.8"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-19")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.9"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-20")){const e=t.querySelector('.cmd-box-lineheight[data-value="2"]');c.addClass(e,"on")}}t.querySelector("#chkOptimizeTextSize").checked=!1,a&&c.hasClass(a,"v2")&&(t.querySelector("#chkOptimizeTextSize").checked=!0),t.querySelector("#chkAutofitContent").checked=!1,c.hasClass(e,"box-autofit")&&(t.querySelector("#chkAutofitContent").checked=!0);const p=t.querySelector("#inpBoxMinHeight");p.value="",c.hasClass(e,"min-height-20")&&(p.value=20),c.hasClass(e,"min-height-25")&&(p.value=25),c.hasClass(e,"min-height-30")&&(p.value=30),c.hasClass(e,"min-height-40")&&(p.value=40),c.hasClass(e,"min-height-50")&&(p.value=50),c.hasClass(e,"min-height-60")&&(p.value=60),c.hasClass(e,"min-height-70")&&(p.value=70),c.hasClass(e,"min-height-75")&&(p.value=75),c.hasClass(e,"min-height-80")&&(p.value=80),c.hasClass(e,"min-height-90")&&(p.value=90),c.hasClass(e,"min-height-100")&&(p.value=100),a&&(t.querySelector(".val-box-size").innerHTML="",a.classList.forEach((e=>{if(-1!==e.indexOf("is-content-")&&"is-content-left"!==e&&"is-content-right"!==e){let i=e.replace("is-content-","");t.querySelector(".val-box-size").innerHTML=i}})));const h=t.querySelector(".cmd-box-animate");h.value="",c.hasClass(e,"is-pulse")&&(h.value="is-pulse"),c.hasClass(e,"is-bounceIn")&&(h.value="is-bounceIn"),c.hasClass(e,"is-fadeIn")&&(h.value="is-fadeIn"),c.hasClass(e,"is-fadeInDown")&&(h.value="is-fadeInDown"),c.hasClass(e,"is-fadeInLeft")&&(h.value="is-fadeInLeft"),c.hasClass(e,"is-fadeInRight")&&(h.value="is-fadeInRight"),c.hasClass(e,"is-fadeInUp")&&(h.value="is-fadeInUp"),c.hasClass(e,"is-flipInX")&&(h.value="is-flipInX"),c.hasClass(e,"is-flipInY")&&(h.value="is-flipInY"),c.hasClass(e,"is-slideInUp")&&(h.value="is-slideInUp"),c.hasClass(e,"is-slideInDown")&&(h.value="is-slideInDown"),c.hasClass(e,"is-slideInLeft")&&(h.value="is-slideInLeft"),c.hasClass(e,"is-slideInRight")&&(h.value="is-slideInRight"),c.hasClass(e,"is-zoomIn")&&(h.value="is-zoomIn");const m=t.querySelector("#chkAnimOnce");c.hasClass(e,"once")?m.checked=!0:m.checked=!1;const b=t.querySelector(".cmd-box-animatedelay");c.hasClass(e,"delay-0ms")&&(b.value="delay-0ms"),c.hasClass(e,"delay-100ms")&&(b.value="delay-100ms"),c.hasClass(e,"delay-200ms")&&(b.value="delay-20ms"),c.hasClass(e,"delay-300ms")&&(b.value="delay-300ms"),c.hasClass(e,"delay-400ms")&&(b.value="delay-400ms"),c.hasClass(e,"delay-500ms")&&(b.value="delay-500ms"),c.hasClass(e,"delay-600ms")&&(b.value="delay-600ms"),c.hasClass(e,"delay-700ms")&&(b.value="delay-700ms"),c.hasClass(e,"delay-800ms")&&(b.value="delay-800ms"),c.hasClass(e,"delay-900ms")&&(b.value="delay-900ms"),c.hasClass(e,"delay-1000ms")&&(b.value="delay-1000ms"),c.hasClass(e,"delay-1100ms")&&(b.value="delay-1100ms"),c.hasClass(e,"delay-1200ms")&&(b.value="delay-1200ms"),c.hasClass(e,"delay-1300ms")&&(b.value="delay-1300ms"),c.hasClass(e,"delay-1400ms")&&(b.value="delay-1400ms"),c.hasClass(e,"delay-1500ms")&&(b.value="delay-1500ms"),c.hasClass(e,"delay-1600ms")&&(b.value="delay-1600ms"),c.hasClass(e,"delay-1700ms")&&(b.value="delay-1700ms"),c.hasClass(e,"delay-1800ms")&&(b.value="delay-1800ms"),c.hasClass(e,"delay-1900ms")&&(b.value="delay-1900ms"),c.hasClass(e,"delay-2000ms")&&(b.value="delay-2000ms"),c.hasClass(e,"delay-2100ms")&&(b.value="delay-2100ms"),c.hasClass(e,"delay-2200ms")&&(b.value="delay-2200ms"),c.hasClass(e,"delay-2300ms")&&(b.value="delay-2300ms"),c.hasClass(e,"delay-2400ms")&&(b.value="delay-2400ms"),c.hasClass(e,"delay-2500ms")&&(b.value="delay-2500ms"),c.hasClass(e,"delay-2600ms")&&(b.value="delay-2600ms"),c.hasClass(e,"delay-2700ms")&&(b.value="delay-2700ms"),c.hasClass(e,"delay-2800ms")&&(b.value="delay-2800ms"),c.hasClass(e,"delay-2900ms")&&(b.value="delay-2900ms"),c.hasClass(e,"delay-3000ms")&&(b.value="delay-3000ms"),t.querySelector("#tabBoxImage").style.display="none";let g="";n&&n.style.backgroundImage&&-1!==n.style.backgroundImage.indexOf("url(")&&(g=n.style.backgroundImage.slice(4,-1).replace(/["']/g,""),t.querySelector("#tabBoxImage").style.display="inline-block");const v=t.querySelector(".box-bgimage-preview"),f=t.querySelector(".input-box-bgimageadjust"),y=t.querySelector(".label-box-bgimage-grayscale"),x=t.querySelector(".chk-box-bgimage-grayscale"),_=t.querySelector("#divBoxStackBg");f.style.display="none",y.style.display="none";const w=t.querySelector(".input-box-bgremove");if(w.style.display="none",x.checked=!1,_.style.display="none",""!==g){v.innerHTML=`<img src="${g}">`,i&&i.style.filter&&-1!==i.style.filter.indexOf("grayscale")&&(x.checked=!0),n&&n.style.filter&&-1!==n.style.filter.indexOf("grayscale")&&(x.checked=!0,i.style.filter="grayscale(1)",n.style.filter=n.style.filter.replace("grayscale(1)","")),f.style.display="flex",w.style.display="flex",y.style.display="flex",_.style.display="flex";const o=t.querySelector("#chkStackBg");e.classList.contains("m-overlay-stack")?o.checked=!0:o.checked=!1}else v.innerHTML="";const S=e.querySelector(".is-overlay-color"),k=t.querySelector(".input-box-overlaycolor");k.style.backgroundColor=S?S.style.backgroundColor:"transparent";const C=t.querySelector(".input-src");g=e.getAttribute("data-modal-url"),C.value=""!==g?g:"","none"===t.querySelector("#divBoxSize").style.display&&"none"===t.querySelector("#divBoxBackgroundColor").style.display&&"none"===t.querySelector("#divBoxBackgroundImage").style.display&&"none"===t.querySelector("#tabBoxContentText").style.display&&"none"===t.querySelector("#tabBoxContentContainer").style.display&&"none"===t.querySelector("#tabBoxImage").style.display&&"none"===t.querySelector("#tabBoxAnimate").style.display&&"none"===t.querySelector("#tabBoxCustomHtml").style.display?t.querySelector("#divNoBoxSettings").style.display="block":t.querySelector("#divNoBoxSettings").style.display="none",i||(e.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),i=e.querySelector(".is-overlay")),c.hasClass(e,"is-bg-light")&&(c.removeClass(e,"is-bg-light"),i.style.backgroundColor||(i.style.backgroundColor="rgb(255, 255, 255)")),c.hasClass(e,"is-bg-dark")&&(c.removeClass(e,"is-bg-dark"),i.style.backgroundColor||(i.style.backgroundColor="rgb(17, 17, 17)")),c.hasClass(e,"is-bg-grey")&&(c.removeClass(e,"is-bg-grey"),i.style.backgroundColor||(i.style.backgroundColor="rgb(238, 239, 240)"));let L=t.querySelector(".input-box-bgcolor"),A=i.style.backgroundColor;A?L.style.backgroundColor=A:e.style.backgroundColor?(A=window.getComputedStyle(e,null).getPropertyValue("background-color"),"rgba(0, 0, 0, 0)"===A&&(A=""),L.style.backgroundColor=A):L.style.backgroundColor="";const E=t.querySelector(".cmd-box-addtext"),q=t.querySelector(".cmd-box-removetext");a?(E.style.display="none",q.style.display="flex"):(E.style.display="flex",q.style.display="none");const T=t.querySelector(".cmd-box-addcode"),M=t.querySelector(".cmd-box-removecode");e.querySelector(".is-overlay-content[data-module]")?(T.style.display="none",M.style.display="flex"):(T.style.display="flex",M.style.display="none");let O=this.builder.activeSection;c.hasClass(O,"noedit")&&(E.style.display="none");let I=t.querySelectorAll(".cmd-content-height"),$=t.querySelector(".div-content-justify");I.forEach((t=>{c.removeClass(t,"on")})),t.querySelectorAll(".cmd-content-justify").forEach((t=>{c.removeClass(t,"on")})),a&&("100%"===a.style.height||c.hasClass(a,"h-full")?(c.addClass(t.querySelector('.cmd-content-height[data-value="100"]'),"on"),$.style.display="block",("flex-start"===a.style.justifyContent||c.hasClass(a,"justify-start"))&&c.addClass(t.querySelector('.cmd-content-justify[data-value="flex-start"]'),"on"),("flex-end"===a.style.justifyContent||c.hasClass(a,"justify-end"))&&c.addClass(t.querySelector('.cmd-content-justify[data-value="flex-end"]'),"on"),("space-between"===a.style.justifyContent||c.hasClass(a,"justify-between"))&&c.addClass(t.querySelector('.cmd-content-justify[data-value="space-between"]'),"on")):(c.addClass(t.querySelector('.cmd-content-height[data-value=""]'),"on"),$.style.display="none"));t.querySelectorAll(".cmd-box-content-spacing").forEach((t=>{c.removeClass(t,"on")})),a&&(a.classList.contains("content-py-0")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="0"]'),"on"),a.classList.contains("content-py-10")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="10"]'),"on"),a.classList.contains("content-py-20")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="20"]'),"on"),a.classList.contains("content-py-30")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="30"]'),"on"),a.classList.contains("content-py-40")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="40"]'),"on"),a.classList.contains("content-py-50")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="50"]'),"on"),a.classList.contains("content-py-60")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="60"]'),"on"),a.classList.contains("content-py-70")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="70"]'),"on"),a.classList.contains("content-py-80")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="80"]'),"on"));t.querySelectorAll(".cmd-box-content-topspacing").forEach((t=>{c.removeClass(t,"on")})),a&&(a.classList.contains("content-pt-0")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="0"]'),"on"),a.classList.contains("content-pt-10")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="10"]'),"on"),a.classList.contains("content-pt-20")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="20"]'),"on"),a.classList.contains("content-pt-30")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="30"]'),"on"),a.classList.contains("content-pt-40")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="40"]'),"on"),a.classList.contains("content-pt-50")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="50"]'),"on"),a.classList.contains("content-pt-60")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="60"]'),"on"),a.classList.contains("content-pt-70")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="70"]'),"on"),a.classList.contains("content-pt-80")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="80"]'),"on"));t.querySelectorAll(".cmd-box-content-bottomspacing").forEach((t=>{c.removeClass(t,"on")})),a&&(a.classList.contains("content-pb-0")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="0"]'),"on"),a.classList.contains("content-pb-10")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="10"]'),"on"),a.classList.contains("content-pb-20")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="20"]'),"on"),a.classList.contains("content-pb-30")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="30"]'),"on"),a.classList.contains("content-pb-40")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="40"]'),"on"),a.classList.contains("content-pb-50")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="50"]'),"on"),a.classList.contains("content-pb-60")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="60"]'),"on"),a.classList.contains("content-pb-70")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="70"]'),"on"),a.classList.contains("content-pb-80")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="80"]'),"on")),"flex"===t.querySelector("#divBoxImage").style.display&&"none"===t.querySelector("#tabBoxImage").style.display&&t.querySelector("#tabBoxGeneral").click(),"flex"===t.querySelector("#divBoxContentText").style.display&&"none"===t.querySelector("#tabBoxContentText").style.display&&t.querySelector("#tabBoxGeneral").click(),"flex"===t.querySelector("#divBoxContentContainer").style.display&&"none"===t.querySelector("#tabBoxContentContainer").style.display&&t.querySelector("#tabBoxGeneral").click()}close(){this.modalEditBox.style.display=""}edit(){this.builder.wrapperEl.classList.add("hard-select"),this.builder.activeBox&&this.builder.activeBox.classList.add("box-select"),this.builder.activeSection&&this.builder.activeSection.classList.add("section-select");const t=this.modalEditBox;this.targetBox=null,this.builder.sidebar.closeSidebar(),this.read();const e=this.builder.activeBox;e.classList.add("box-active"),setTimeout((()=>{e.classList.remove("box-active")}),1e3),t.style.display="flex",document.body.classList.add("box-modal-open"),t.focus()}boxOptimizeTextSize(){let t=this.builder.activeBox.querySelector(".is-builder");this.modalEditBox.querySelector("#chkOptimizeTextSize").checked?c.addClass(t,"v2"):c.removeClass(t,"v2")}boxContainerAnim(){let t=this.builder.activeBox,e=this.builder.activeSection,i=t.querySelector(".is-builder"),n="20%",o=parseInt(window.getComputedStyle(e,null).getPropertyValue("min-height"));parseInt(o)<=50&&(n="10%");let s=this.modalEditBox.querySelector("#chkParallaxContent").checked,a=this.modalEditBox.querySelector("#chkFadeContent").checked;i.removeAttribute("data-100-bottom"),i.removeAttribute("data-center"),s&&!a?(i.setAttribute("data-bottom-top",`transform:translateY(-${n})`),i.removeAttribute("data-100-bottom"),i.setAttribute("data-top-bottom",`transform:translateY(${n})`)):a&&!s?(i.setAttribute("data-bottom-top","opacity:0"),i.setAttribute("data-100-bottom","opacity:1"),i.removeAttribute("data-top-bottom")):a&&s?(i.setAttribute("data-bottom-top",`transform:translateY(-${n});opacity:0;`),i.setAttribute("data-100-bottom","opacity:1"),i.setAttribute("data-top-bottom",`transform:translateY(${n})`)):(c.removeClass(i,"skrollable"),c.removeClass(i,"skrollable-between"),i.removeAttribute("data-bottom-top"),i.removeAttribute("data-100-bottom"),i.removeAttribute("data-top-bottom"),i.style.transform=""),this.builder.settings.onRender()}boxImage(t,e){if(e)return void alert(e);this.box.boxImage(t,e);const i=this.modalEditBox,n=i.querySelector(".box-bgimage-preview"),o=i.querySelector(".input-box-bgimageadjust");o.style.display="none";const s=i.querySelector(".label-box-bgimage-grayscale");s.style.display="none";const a=i.querySelector(".input-box-bgremove");a.style.display="none";const l=i.querySelector("#divBoxStackBg");if(l.style.display="none",""!==t){n.innerHTML=`<img src="${t}">`,o.style.display="flex",a.style.display="flex",s.style.display="flex",l.style.display="flex";i.querySelector(".chk-box-bgimage-grayscale").checked=!1,i.querySelector("#tabBoxImage").style.display="inline-block"}else{n.innerHTML="";i.querySelector(".input-box-overlaycolor").style.backgroundColor="",i.querySelector("#tabBoxImage").style.display="none"}}}function u(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var p,h={exports:{}};
13
+ */function i(t,e){let i=!1;if("undefined"!=typeof window&&void 0!==window._txt&&(i=!0),e){if(i){let i=window._txt[t];return i||e}return e}if(i){let e=window._txt[t];return e||t}return t}class n{constructor(t){const[e,i]=t.children,n=e=>{if(!t)return document.removeEventListener("click",n);t.contains(e.target)||this.toggle(!1)},o=n=>{const o=n.textContent,s=n.getAttribute("data-value");e.textContent=o,this.value=s,this.toggle(!1),t.dispatchEvent(new Event("change")),e.focus();let a=i.children;Array.from(a).forEach((t=>{t.classList.remove("selected")}));let l=i.querySelector('[data-value="'+s+'"]');l&&l.classList.add("selected")},s=t=>{t.preventDefault(),38===t.keyCode&&t.target.previousElementSibling?t.target.previousElementSibling.focus():40===t.keyCode&&t.target.nextElementSibling?t.target.nextElementSibling.focus():27===t.keyCode?(this.toggle(!1),e.focus()):13!==t.keyCode&&32!==t.keyCode||o(t.target)};e.addEventListener("keydown",(t=>{27===t.keyCode?(this.toggle(!1),t.preventDefault()):13!==t.keyCode&&32!==t.keyCode||(this.toggle(!0),t.preventDefault())})),e.addEventListener("click",(()=>this.toggle())),[...i.children].forEach((t=>{t.addEventListener("keydown",s),t.addEventListener("click",(()=>o(t)))})),this.element=t,this.value=e.getAttribute("data-value"),this.toggle=(o=null)=>{if(o=null===o?"true"!==i.getAttribute("aria-expanded"):o,i.setAttribute("aria-expanded",o),o){e.classList.add("active");let o=i.querySelector('[data-value="'+this.value+'"]');o&&(o.classList.add("selected"),o.focus()),document.addEventListener("click",n),t.dispatchEvent(new Event("opened"))}else e.classList.remove("active"),t.dispatchEvent(new Event("closed")),document.removeEventListener("click",n)}}}const o=new t;class s{constructor(t){this.builder=t;let e="";const n=this.builder.builderStuff;if(this.builderStuff=n,this.builder.useSidebar){e+='<div class="is-sidebar is-area active" style="transform: translate3d(0,0,0);display: flex;flex-direction: column;opacity: 0.0001;">';var s=0;this.builder.sidebarData.buttons.map((t=>{if("section"===t.name)e+='<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSections" data-command="section" data-title="'+i(t.title)+'" title="'+i(t.title)+'"><svg class="svg-icon"><use xlink:href="#icon-plus"></use></svg></button>';else if("snippet"===t.name)e+='<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="'+i(t.title)+'" title="'+i(t.title)+'"><svg class="svg-icon"><use xlink:href="#icon-box-multiple"></use></svg></button>';else if("typography"===t.name)this.builder.enableContentStyle&&(e+='<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="'+i(t.title)+'" title="'+i(t.title)+'"><svg class="svg-icon"><use xlink:href="#icon-typography"></use></svg></button>');else if("code"===t.name)this.builder.htmlButton&&(this.builder.htmlSyntaxHighlighting?e+=`<button class="is-sidebar-button" tabindex="-1" data-command="code" data-title="${i(t.title)}" title="${i(t.title)}">\n <svg class="svg-icon"><use xlink:href="#icon-code"></use></svg>\n </button>`:e+=`<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSource" data-command="code" data-title="${i(t.title)}" title="${i(t.title)}">\n <svg class="svg-icon"><use xlink:href="#icon-code"></use></svg>\n </button>`);else if(t.src){var a=o.uniqueId();if(e+=`<button class="is-sidebar-button" tabindex="-1" data-content="${a}" data-title="${i(t.title)}" title="${i(t.title)}" data-src="${t.src}" data-refresh="${t.refresh?1:0}">${t.html}</button>`,!n.querySelector(`#${a}`)){let e=`<div id="${a}" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${t.maxwidth?t.maxwidth:"500px"};">\n <div style="padding:0 0 0 50px;box-sizing:border-box;">\n <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">\n </iframe>\n </div>\n </div>`;o.appendHtml(n,e)}}else e+='<button class="is-sidebar-button" tabindex="-1" data-content="'+t.content.substr(1)+'" data-title="'+i(t.title)+'" title="'+i(t.title)+'" data-refresh="'+(t.refresh?1:0)+'">'+t.html+"</button>";this.builder.sideButtons&&this.builder.sideButtons.map((t=>{if(s==t.pos)if(t.src){var a=o.uniqueId();e+=`<button class="is-sidebar-button" tabindex="-1" data-content="${a}" data-title="${i(t.title)}" title="${i(t.title)}" data-src="${t.src}" data-refresh="${t.refresh?1:0}">\n ${t.html}\n </button>`;let s=`<div id="${a}" class="is-sidebar-content is-area-2nd ${t.class}" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:${t.maxwidth?t.maxwidth:"1005px"};">\n <div style="padding:0 0 0 50px;box-sizing:border-box;">\n <iframe src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;">\n </iframe>\n </div>\n </div>`;o.appendHtml(n,s)}else e+=`<button class="is-sidebar-button" tabindex="-1" data-content="${t.content.substr(1)}" data-title="${i(t.title)}" title="${i(t.title)}">\n ${t.html}\n </button>`})),s++})),e+="</div>",e+='<div id="divSidebarSections" class="is-sidebar-content is-area-2nd '+this.builder.templateThumbnailSize+'" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;"><div><iframe id="ifrIdeasPanel" src="about:blank" style="width:100%;height:100%;box-sizing:border-box;border:none;"></iframe></div></div><div id="divSidebarSnippets" class="is-sidebar-content is-area-2nd scroll-darker" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="max-width:275px;border-left: transparent 50px solid;box-sizing: border-box;"></div><div id="divSidebarSource" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;"><div><div style="position:absolute;width:240px;height:35px;right:10px;top:5px;z-index:1;display:flex;"><button title="'+i("Cancel")+'" id="btnViewHtmlCancel" tabindex="-1" style="height:38px" class="classic-secondary"> '+i("Cancel")+' </button><button title="'+i("Ok")+'" id="btnViewHtmlOk" tabindex="-1" style="height:38px" class="classic-primary"> '+i("Ok")+' </button></div><div style="height:100%;box-sizing:border-box;border-top:#f3f3f3 50px solid;position:relative"><textarea id="inpViewHtml" tabindex="-1" style="width:100%;height:100%;resize: none;"></textarea></div></div></div><div id="divSidebarTypography" class="is-sidebar-content is-area-2nd" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true" style="-webkit-transition-duration:0.2s;transition-duration:0.2s;"><div class="scroll-darker"><div style="padding: 15px 0 0 20px"><div class="is-sidebar-title" style="margin-bottom:12px;">'+i("Typography Styles")+"</div><div>"+i("Apply to")+':</div><div style="display:flex;justify-content:space-between;align-items: center;"><div class="typo-target-default" style="display:flex"><label><input type="radio" tabindex="0" name="typoTarget" value="page"> <span>'+i("Page")+'</span></label><label><input type="radio" tabindex="0" name="typoTarget" value="section" checked> <span>'+i("Section")+'</span></label></div><div class="typo-target-box" style="display: flex;"><span>'+i("Active Box")+'</span></div><button title="'+i("Clear")+'" tabindex="0" id="btnTypoClear"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button></div></div><div id="divSelector"></div><div id="divStyles"></div></div></div>'}else e='<div id="divSections" style="display:none"></div><div class="is-modal addsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width: 900px;"><div id="divSectionList" class="is-section-list"></div></div></div>';e+=`<div class="is-pop page-quick-settings arrow-left" style="z-index:10006;position: fixed;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div style="display:flex;flex-flow:wrap;flex-direction: column;width: 190px;margin:12px 12px 14px;">\n <div class="is-label"><span>${i("Zoom")}</span>:</div>\n <div style="padding-top:4px">\n <input type="range" min="50" max="100" value="1" class="page-zoom-slider is-rangeslider" style="margin:0 !important;">\n </div>\n\n <div style="padding-top:15px;width:100%;">\n <div class="is-label"><span>${i("Enable Animation")}</span>:</div>\n <div style="padding-top: 5px;width:100%;display:flex;align-items:center;justify-content: space-between;"> \n <label class="switch"><input class="cmd-live-preview" type="checkbox" checked=""><span class="slider round"></span></label>\n ${this.builder.advancedTimeline?`\n <button tabindex="-1" title="${i("Edit")}" class="cmd-timeline-edit" style="width:30px;height:30px;cursor:pointer;">\n <svg class="is-icon-flex"><use xlink:href="#icon-pencil"></use></svg>\n </button>\n `:""}\n </div>\n </div>\n\n <div style="padding-top:20px;width:100%;">\n <button type="button" title="${i("Live Preview")}" class="cmd-open-preview-window" style="width:100%">\n <svg class="is-icon-flex"><use xlink:href="#icon-device-desktop"></use></svg>\n <span style="margin-left:7px">${i("Live Preview")}</span>\n </button>\n </div>\n </div>\n </div>`,o.appendHtml(n,e),this.pageQuickSettings=n.querySelector(".page-quick-settings"),this.pageZoomSlider=this.pageQuickSettings.querySelector(".page-zoom-slider"),this.pageZoomSlider.onfocus=()=>{this.builder.editor.rte.zoomStart()},this.pageZoomSlider.oninput=()=>{this.builder.editor.rte.zoom(this.pageZoomSlider)},this.pageZoomSlider.onchange=()=>{this.builder.editor.rte.zoomEnd(this.pageZoomSlider)};const a=this.pageQuickSettings.querySelector(".cmd-timeline-edit");if(a&&a.addEventListener("click",(()=>{this.builder.timeline.edit();const t=this.builder.sidebar.pageQuickSettings;this.builder.editor.util.hidePop(t)})),this.builder.useSidebar){document.querySelectorAll(".is-sidebar .is-sidebar-button").forEach((t=>{setTimeout((()=>{const e=t.getAttribute("data-content");if(e){document.querySelector("#"+e).addEventListener("keydown",(t=>{27===t.keyCode&&this.closeSidebar()}))}}),300),t.addEventListener("click",(()=>{let e=!1;if(o.hasClass(t,"active")&&(e=!0),this.closeSidebar(),this.builder.editbox&&this.builder.editbox.close(),this.builder.editsection&&this.builder.editsection.close(),this.builder.animateScroll.close(),e)return;let i=t.getAttribute("data-content");if(i){const e=n.querySelector(".is-sidebar-overlay");e&&e.addEventListener("click",(()=>{this.closeSidebar()})),o.addClass(t,"active");const s=document.querySelector("#"+i);s.style.display="block",s.setAttribute("aria-hidden",!1),setTimeout((()=>{if(o.addClass(s,"active"),s.focus(),"divSidebarSnippets"===s.getAttribute("id")){s.querySelector(".selectsnippet .dropdown-toggle").focus()}"divSidebarTypography"===s.getAttribute("id")&&s.focus()}),10)}let s=t.getAttribute("data-command");if(s&&("section"===s&&this.viewIdeas(),"code"===s&&(this.builder.htmlSyntaxHighlighting?this.viewHtml():this.viewHtml2()),"typography"===s&&(t.setAttribute("data-applyto","page"),n.querySelector(".typo-target-default").style.display="flex",n.querySelector(".typo-target-box").style.display="none",this.viewTypography())),t.hasAttribute("data-src")){let e=t.getAttribute("data-src"),i=t.getAttribute("data-content");const o=n.querySelector(`#${i}`).querySelector("iframe");("1"===t.getAttribute("data-refresh")||-1!=o.getAttribute("src").indexOf("blank"))&&o.setAttribute("src",e)}}))}));n.querySelector("#btnViewHtmlOk").addEventListener("click",(()=>{this.builder.editor.saveForUndo();var t=n.querySelector("#inpViewHtml").value;t=this.builder.editor.fromViewToActual(t),this.builder.loadHtml(t),this.builder.settings.onChange();const e=document.querySelector(".is-sidebar-overlay");e&&(e.remove(),document.body.style.overflow="",document.body.style.overflowY=""),document.querySelectorAll(".is-sidebar-button.active").forEach((t=>{o.removeClass(t,"active")})),document.querySelectorAll(".is-sidebar-content.active").forEach((t=>{o.removeClass(t,"active")}))}));n.querySelector("#btnViewHtmlCancel").addEventListener("click",(()=>{const t=document.querySelector(".is-sidebar-overlay");t&&(t.remove(),document.body.style.overflow="",document.body.style.overflowY=""),document.querySelectorAll(".is-sidebar-button.active").forEach((t=>{o.removeClass(t,"active")})),document.querySelectorAll(".is-sidebar-content.active").forEach((t=>{o.removeClass(t,"active")}))})),document.querySelector("#btnTypoClear").addEventListener("click",(()=>{this.boxTypography("","",""),this.selectType()}));document.querySelectorAll(".is-sidebar-content").forEach((t=>{t.addEventListener("keydown",(t=>{27===t.keyCode&&this.closeSidebar()}))}))}document.querySelectorAll('input[name="typoTarget"]').forEach((t=>{t.addEventListener("click",(()=>{this.selectType()}))}))}openSettings(t){const e=this.pageQuickSettings;let i,n,o;i=t?t.target:document.activeElement,this.builder.btnSettings=i,this.builder.editor.util.showPop(e,!1,i),n=i.getBoundingClientRect().top,o=i.getBoundingClientRect().left,e.style.top=n+4+"px",e.style.left=o+68+"px",this.pageZoomSlider.value=100*this.builder.editor.zoom}reOpenSettings(){const t=this.pageQuickSettings;this.builder.editor.util.showPop(t,!1,this.builder.btnSettings)}closeSidebar(){const t=document,e=t.querySelector(".is-sidebar-overlay");e&&(e.remove(),document.body.style.overflowY=""),t.querySelectorAll(".is-sidebar-button.active").forEach((t=>{o.removeClass(t,"active")})),t.querySelectorAll(".is-sidebar > div").forEach((t=>{o.removeClass(t,"active")})),t.querySelectorAll(".is-sidebar-content.active").forEach((t=>{o.removeClass(t,"active"),t.setAttribute("aria-hidden",!0),setTimeout((()=>{t.style.display=""}),300)}))}viewIdeas(){const t=this.builder.designPath,e=this.builder.designUrl1,i=this.builder.designUrl2;if(e&&i){var n=document.querySelector("#ifrIdeasPanel").contentWindow.document;""===n.body.innerHTML&&(n.open(),0===this.builder.templates.length?n.write(this.getTemplatesHtml_OLD()):n.write(this.getTemplatesHtml()),n.close())}else if(t){const e=document.querySelector("#ifrIdeasPanel");-1!=e.getAttribute("src").indexOf("blank")&&e.setAttribute("src",t+"ideas.html")}return!1}viewHtml(){const t=this.builderStuff;if(null!==localStorage.getItem("_htmlview")){let t=localStorage.getItem("_htmlview");this.builder.shortenHTML="shorten"===t}let e;e=this.builder.shortenHTML?this.builder.html(!0):this.builder.html(),t.querySelector("#inpViewHtml").value=e;let i=t.querySelectorAll("[data-source-active]");i.forEach((t=>{t.removeAttribute("data-source-active")})),i=t.querySelectorAll("[data-source-ok]"),i.forEach((t=>{t.removeAttribute("data-source-ok")})),i=t.querySelectorAll("[data-source-cancel]"),i.forEach((t=>{t.removeAttribute("data-source-cancel")}));let n=t.querySelector("#divSidebarSource textarea");n.setAttribute("data-source-active","1"),n.setAttribute("data-source-ok","#btnViewHtmlOk"),n.setAttribute("data-source-cancel","#btnViewHtmlCancel"),this.builder.editor.viewHtmlNormal()}viewHtml2(){const t=this.builderStuff;let e;e=this.builder.shortenHTML?this.builder.html(!0):this.builder.html(),t.querySelector("#inpViewHtml").value=e}viewTypography(){const t=this.builder.settings.contentStylePath,e=this.builder.settings.contentStyles,o=e.data.categories;let s="",a="";for(let t=0;t<o.length;t++)a+='<li role="option" tabindex="0" data-value="'+o[t].id+'">'+i(o[t].desc)+"</li >",-1===o[t].id&&(s=i(o[t].desc));let l='<div class="is-dropdown style-cat" style=""><button tabindex="0" class="dropdown-toggle no-outline" type="button" aria-haspopup="true" data-value="-1"><span>'+s+'</span></button><ul class="dropdown-menu" role="listbox" aria-expanded="false">'+a+"</ul></div>";function r(t){const e=t.childNodes;let i=[],n=e.length;for(;n--;)1===e[n].nodeType&&i.unshift(e[n]);return i}document.querySelector("#divSelector").innerHTML=l;const c=new n(document.querySelector(".style-cat"));c.element.addEventListener("change",(()=>{let i=c.value,n=e.data.styles,o="";if(-1===parseInt(i))for(let e=0;e<n.length;e++)o+='<div data-css="'+n[e].css+'" data-sectioncss="'+n[e].sectioncss+'" data-classname="'+n[e].classname+'"><div>['+(e+1)+"] "+n[e].caption+'</div><img src="'+t+n[e].img+'" /><span class="is-overlay"></span></div></div>';else for(let e=0;e<n.length;e++)parseInt(i)===n[e].category&&(o+='<div data-css="'+n[e].css+'" data-sectioncss="'+n[e].sectioncss+'" data-classname="'+n[e].classname+'"><div>['+(e+1)+"] "+n[e].caption+'</div><img src="'+t+n[e].img+'" /><span class="is-overlay"></span></div></div>');let s=document.querySelector("#divStyles");s.innerHTML=o,r(s).forEach((t=>{t.addEventListener("click",(()=>{this.boxTypography(t.getAttribute("data-classname"),t.getAttribute("data-sectioncss"),t.getAttribute("data-css"))}))}))}));let d=e.data.styles,u="";for(var p=0;p<d.length;p++)u+='<div data-css="'+d[p].css+'" data-sectioncss="'+d[p].sectioncss+'" data-classname="'+d[p].classname+'"><div>['+(p+1)+"] "+d[p].caption+'</div><img src="'+t+d[p].img+'" /><span class="is-overlay"></span></div></div>';const h=document.querySelector("#divStyles");if(""===h.innerHTML){h.innerHTML=u;r(h).forEach((t=>{t.addEventListener("click",(()=>{const e=h.querySelector(".active");e&&e.classList.remove("active"),t.classList.add("active"),this.boxTypography(t.getAttribute("data-classname"),t.getAttribute("data-sectioncss"),t.getAttribute("data-css"))}))}))}this.selectType()}selectType(){const t=this.builderStuff.querySelector("#divStyles");if(t.querySelectorAll(".active").forEach((t=>t.classList.remove("active"))),"page"===document.querySelector('input[name="typoTarget"]:checked').value){let e=this.builder.doc.getElementsByTagName("link"),i="";for(let n=0;n<e.length;n++)if(-1!==e[n].getAttribute("href").indexOf("basetype-")){if(i=e[n].getAttribute("href").split("/").pop().split(".")[0].replace("base",""),i){const e=t.querySelector(`[data-classname="${i}"]`);e&&(e.classList.add("active"),t.scrollTop=e.offsetTop-70)}}return}let e=this.builder.activeBox;if(e){const i=e.classList;let n="";for(let t=0;t<i.length;t++)if(i[t].startsWith("type-")){n=i[t];break}if(n){const e=t.querySelector(`[data-classname="${n}"]`);e&&(e.classList.add("active"),t.scrollTop=e.offsetTop-70)}else{let e=this.builder.activeSection;if(e){const i=e.classList;let n="";for(let t=0;t<i.length;t++)if(i[t].startsWith("type-")){n=i[t];break}if(n){const e=t.querySelector(`[data-classname="${n}"]`);e&&(e.classList.add("active"),t.scrollTop=e.offsetTop-70)}}}}}boxTypography(t,e,i){const n=this.builder.builderStuff;this.builder.editor.saveForUndo();const s=this.builder.settings.contentStylePath;let a=n.querySelector('.is-sidebar > button[data-command="typography"]').getAttribute("data-applyto"),l=document.querySelector('input[name="typoTarget"]:checked').value;if("box"!==a)if("section"===l){let i=this.builder.activeSection;if(!i)return;if(i.getAttribute("class").split(/\s+/).forEach((t=>{-1!=t.indexOf("type-")&&o.removeClass(i,t)})),i.querySelectorAll(".is-box, .is-box-centered").forEach((t=>{t.getAttribute("class").split(/\s+/).forEach((e=>{-1!=e.indexOf("type-")&&o.removeClass(t,e)}))})),""!==t){o.addClass(i,t);let n=!1,a=this.builder.doc.getElementsByTagName("link");for(let t=0;t<a.length;t++){-1!=a[t].href.toLowerCase().indexOf(e.toLowerCase())&&(n=!0)}n||(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'))}let n=this.builder.doc.getElementsByTagName("link");for(let t=0;t<n.length;t++)if("contentstyle"===n[t].getAttribute("data-name")){let e=n[t].getAttribute("data-class");this.builder.wrapperEl.querySelector("."+e)||n[t].setAttribute("data-rel","_del")}this.builder.doc.querySelectorAll('[data-rel="_del"]').forEach((t=>{t.parentNode.removeChild(t)}))}else if("page"===l){let t=this.builder.doc.getElementsByTagName("link");for(let e=0;e<t.length;e++)if("contentstyle"===t[e].getAttribute("data-name")){let i=t[e].getAttribute("data-class");if(this.builder.wrapperEl.querySelector("."+i)){this.builder.wrapperEl.querySelectorAll("."+i).forEach((t=>{o.removeClass(t,i)})),t[e].setAttribute("data-rel","_del")}}let e=this.builder.doc.querySelectorAll('[data-rel="_del"]');e.forEach((t=>{t.parentNode.removeChild(t)})),t=this.builder.doc.getElementsByTagName("link");for(let e=0;e<t.length;e++){-1!=t[e].href.toLowerCase().indexOf("basetype-")&&t[e].setAttribute("data-rel","_del")}e=this.builder.doc.querySelectorAll('[data-rel="_del"]'),e.forEach((t=>{t.parentNode.removeChild(t)})),""!=i&&(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link href="'+s+i+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link href="'+s+i+'" rel="stylesheet">'))}else if("container"===l){let i=this.builder.doc.querySelector(".builder-active");if(!i)return;let n=o.parentsHasClass(i,"is-box");if(n.getAttribute("class").split(/\s+/).forEach((t=>{-1!=t.indexOf("type-")&&o.removeClass(n,t)})),""!==t){o.addClass(n,t);let i=!1,a=this.builder.doc.getElementsByTagName("link");for(let t=0;t<a.length;t++){-1!=a[t].href.toLowerCase().indexOf(e.toLowerCase())&&(i=!0)}i||(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'))}let a=this.builder.doc.getElementsByTagName("link");for(let t=0;t<a.length;t++)if("contentstyle"===a[t].getAttribute("data-name")){let e=a[t].getAttribute("data-class");this.builder.wrapperEl.querySelector("."+e)||a[t].setAttribute("data-rel","_del")}this.builder.doc.querySelectorAll('[data-rel="_del"]').forEach((t=>{t.parentNode.removeChild(t)}))}if("box"===a){let i=this.builder.activeBox;if(i){if(i.getAttribute("class").split(/\s+/).forEach((t=>{-1!=t.indexOf("type-")&&o.removeClass(i,t)})),""!==t){o.addClass(i,t);let n=!1,a=this.builder.doc.getElementsByTagName("link");for(let t=0;t<a.length;t++){-1!=a[t].href.toLowerCase().indexOf(e.toLowerCase())&&(n=!0)}n||(this.builder.settings.cssInBody?this.builder.wrapperEl.insertAdjacentHTML("beforebegin",'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'):o.appendHtml(this.builder.doc.head,'<link data-name="contentstyle" data-class="'+t+'" href="'+s+e+'" rel="stylesheet">'))}let n=this.builder.doc.getElementsByTagName("link");for(let t=0;t<n.length;t++)if("contentstyle"===n[t].getAttribute("data-name")){let e=n[t].getAttribute("data-class");this.builder.wrapperEl.querySelector("."+e)||n[t].setAttribute("data-rel","_del")}this.builder.doc.querySelectorAll('[data-rel="_del"]').forEach((t=>{t.parentNode.removeChild(t)}))}}this.builder.settings.onChange()}getTemplatesHtml(){let t="";this.builder.templateJSON.forEach((e=>{t+=`{\n url: '${e.url}',\n path: '${e.path}',\n pathReplace: '${e.pathReplace}',\n ${Object.prototype.hasOwnProperty.call(e,"numbering")?`numbering: ${e.numbering},`:"numbering:false,"}\n ${Object.prototype.hasOwnProperty.call(e,"showNumberOnHover")?`showNumberOnHover: ${e.showNumberOnHover},`:"showNumberOnHover:false,"}\n },`}));let e="";this.builder.templates.forEach((t=>{e+=`{\n url: '${t.url}',\n path: '${t.path}',\n pathReplace: '${t.pathReplace}',\n ${Object.prototype.hasOwnProperty.call(t,"numbering")?`numbering: ${t.numbering},`:"numbering:false,"}\n ${Object.prototype.hasOwnProperty.call(t,"showNumberOnHover")?`showNumberOnHover: ${t.showNumberOnHover},`:"showNumberOnHover:false,"}\n },`}));let i=`{\n id: ${this.builder.defaultCategory.id},\n designId: ${this.builder.defaultCategory.designId},\n }`,n="";this.builder.featuredCategories.forEach((t=>{n+=`{\n id: '${t.id}',\n designId: '${t.designId}',\n name: '${t.name}',\n },`}));let o="",s="";"small"===this.builder.templateThumbnailSize?(o="250px",s="30px 0 0 30px"):"medium"===this.builder.templateThumbnailSize?(o="350px",s="40px 0 0 40px"):(o="450px",s="50px 0 0 50px");let a=`\n <!DOCTYPE html>\n <html lang="en">\n <head>\n <meta charset="utf-8">\n <title>Browse</title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <meta name="description" content="">\n <link rel="shortcut icon" href="#" />\n <style>\n body {\n margin: 0;\n background: #fff;\n font-family: sans-serif;\n font-weight: 300;\n }\n h2 {\n font-weight: 300;\n }\n button {\n cursor: pointer;\n border: none;\n background: #fdfdfd;\n padding: 12px 25px;\n border-radius: 500px;\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;;\n color: #333;\n }\n button.on {\n background: #f5f5f5;\n }\n \n .featured-categories {\n background-color: #f5f5f5;\n position: absolute;\n width: 100%;\n height: 88px;\n z-index: 1;\n padding: 14px 15px 0 25px;\n box-sizing: border-box;\n /* box-shadow: 0 5px 15px rgb(0 0 0 / 5%); */\n }\n .featured-categories button {\n margin: 10px 15px 0 0;\n font-size: 11px;\n }\n \n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 88px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 0px;\n box-sizing: border-box;\n overflow: auto;\n transition: all 200ms ease;\n }\n .is-design-list > button {\n position: relative;\n width: ${o};\n overflow: hidden;\n margin: ${s};\n cursor: pointer;\n display: inline-block;\n padding: 0px;\n border: rgba(219, 219, 219, 0.39) 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n }\n .is-design-list > button img {\n box-shadow: none;\n opacity: 1;\n display: block;\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n max-width: 500px;\n width: 100%\n }\n .is-design-list > button .is-overlay {\n position: absolute;\n top:0px;\n left:0px;\n width:100%;\n height:100%;\n }\n .is-design-list > button .is-overlay:after {\n background: rgba(0, 0, 0, 0.05);\n position: absolute;\n content: "";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: all 0.2s ease-in-out;\n opacity: 0;\n }\n .dark .is-design-list > button .is-overlay:after {\n opacity: 0.97;\n }\n .is-design-list > button:hover .is-overlay:after {\n opacity: 0.5;\n }\n \n .mega-menu {\n display: none;\n transform: translateY(-100%);\n background: #f5f5f5;\n overflow-x: hidden;\n overflow-y: auto;\n position: fixed;\n top: 88px;\n left: 0;\n right: 0;\n width: 100%;\n height: auto;\n height: calc(100% - 88px);\n max-height: 700px;\n z-index: 1;\n padding: 10px 50px 40px 40px;\n box-sizing: border-box;\n transition: all 300ms ease;\n min-width:400px;\n min-height: 200px;\n /* box-shadow: 0 5px 15px rgb(0 0 0 / 5%); */\n }\n .mega-menu.active {\n opacity: 1;\n transform: scale(1);\n transform: translateY(0);\n }\n .mega-menu h2 {\n margin-top:30px;\n font-size: 21px\n }\n .mega-menu button {\n margin:15px 15px 0 0;\n }\n .mega-menu .close {\n position: absolute;\n top: 0px; right: 0px;\n background: transparent;\n width: 50px;\n height: 50px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 2px;;\n z-index: 1;\n }\n .mega-menu-content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding-left: 25px;\n padding-bottom: 35px;\n box-sizing: border-box;\n }\n\n .is-waiting {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 88px solid;\n width: 100%;\n height: 100%;\n background-color: #fff;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 50px\n }\n .is-waiting2 {\n position: absolute;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n background-color: #f5f5f5;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n padding: 20px 50px;\n }\n\n .spinner {\n -webkit-animation: rotator 1.4s linear infinite;\n animation: rotator 1.4s linear infinite;\n }\n \n @-webkit-keyframes rotator {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n }\n \n @keyframes rotator {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(270deg);\n }\n }\n .path {\n stroke: #939393; /* #d9d9d9; */\n stroke-dasharray: 187;\n stroke-dashoffset: 0;\n transform-origin: center;\n -webkit-animation: dash 1.4s ease-in-out infinite;\n animation: dash 1.4s ease-in-out infinite;\n }\n \n @-webkit-keyframes dash {\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n }\n @keyframes dash {\n 0% {\n stroke-dashoffset: 187;\n }\n 50% {\n stroke-dashoffset: 46.75;\n transform: rotate(135deg);\n }\n 100% {\n stroke-dashoffset: 187;\n transform: rotate(450deg);\n }\n }\n\n .is-number {\n opacity: 0;\n position: absolute;\n top: 3px;\n right: 3px;\n color: #444;\n padding: 3px 6px;\n background: rgb(255 255 255);\n border-radius: 500px;\n transition: all 0.3s ease;\n }\n .is-number.show {\n opacity: 1;\n }\n .is-design-list > button:hover .is-number {\n opacity: 1;\n }\n\n\n\n body {\n margin: 0;\n } \n .dark .is-design-list > button {\n border: none;\n }\n .dark .path,\n .colored .path,\n .colored-dark .path {\n stroke: #b3b3b3;\n }\n\n /* Scrollbar for modal */\n\n /* Darker color, because background for snippet thumbnails is always light. */\n .dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(78 78 78 / 62%) auto;\n }\n .dark *::-webkit-scrollbar {\n width: 12px;\n }\n .dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .dark *::-webkit-scrollbar-thumb {\n background-color:rgb(78 78 78 / 62%);\n }\n\n .colored-dark * {\n scrollbar-width: thin;\n scrollbar-color: rgb(100, 100, 100) auto;\n }\n .colored-dark *::-webkit-scrollbar {\n width: 12px;\n }\n .colored-dark *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored-dark *::-webkit-scrollbar-thumb {\n background-color:rgb(100, 100, 100);\n }\n\n .colored * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .colored *::-webkit-scrollbar {\n width: 12px;\n }\n .colored *::-webkit-scrollbar-track {\n background: transparent;\n }\n .colored *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n .light * {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.4) auto;\n }\n .light *::-webkit-scrollbar {\n width: 12px;\n }\n .light *::-webkit-scrollbar-track {\n background: transparent;\n }\n .light *::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n .dark .is-design-list>div .is-overlay:after {\n background: rgb(78 78 78 / 13%);\n }\n </style>\n </head>\n <body style="touch-action: pan-y">`;return a+=`\n <div class="mega-menu">\n <div class="is-waiting2">\n\n <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">\n <circle class="path" fill="none" stroke-width="3" stroke-linecap="round" cx="33" cy="33" r="30"></circle>\n </svg>\n\n </div>\n \n <button class="close" tabindex="0"><svg style="width:40px;height:40px;flex:none;"><use xlink:href="#iconclose"></use></svg></button>\n \n <div class="mega-menu-content">\n </div>\n </div>\n \n <div class="featured-categories tabs">\n </div>\n \n <div class="is-design-list">\n </div>\n \n <div class="is-waiting">\n\n <svg class="spinner" width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">\n <circle class="path" fill="none" stroke-width="3" stroke-linecap="round" cx="33" cy="33" r="30"></circle>\n </svg>\n \n </div>\n \n <svg width="0" height="0" style="position:absolute;display:none;">\n <defs>\n <symbol viewBox="0 0 24 24" id="iconclose" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">\n <path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>\n </symbol>\n </defs>\n </svg>\n \n <script>\n var template_list = [];\n <\/script>\n \x3c!-- <script src="basic.js"><\/script>\n <script src="examples.js"><\/script> --\x3e\n \n <script>\n \n // Configuration\n const featuredCategories = [\n ${n}\n ];\n const defaultCategory = ${i};\n const navbar = ${this.builder.navbar?"true":"false"};\n\n const slider = '${this.builder.slider}';\n\n const framework = '${this.builder.framework}'; \n const contentStylePath = '${this.builder.contentStylePath}'; \n\n const row = '${this.builder.row}'; \n const cols = [${this.builder.cols.map((t=>`'${t}'`))}];\n \n let templates = [\n ${e}\n ];\n \n let templateJSON = [\n ${t}\n ];\n // /Configuration\n\n if(templates.length > 0) templateJSON = [...templates];\n \n const loadJsFiles = (list, callback) => {\n if(list.length===0) {\n return;\n } else {\n const url = list[0].url;\n const script = document.createElement('script');\n script.src = url; \n script.async = true;\n script.onload = () => {\n callback(list[0]);\n loadJsFiles(list.slice(1), callback);\n };\n document.body.appendChild(script);\n } \n }\n \n const imageObserver = new IntersectionObserver((entries, imgObserver) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n const lazyImage = entry.target\n // console.log("lazy loading ", lazyImage)\n lazyImage.src = lazyImage.dataset.src\n lazyImage.classList.remove("lzy-img");\n imgObserver.unobserve(lazyImage);\n }\n })\n });\n \n const makeid = () => { //http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript\n var text = "";\n var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";\n for (var i = 0; i < 2; i++)\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n \n var text2 = "";\n var possible2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";\n for (var i = 0; i < 5; i++)\n text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));\n \n return text + text2;\n }\n \n const addDesign = (designid) => {\n\n const wrapper = parent._cb.doc.querySelector('.is-wrapper');\n \n let nIndex = 0;\n template_list.forEach(gallery=>{\n let designs = gallery.designs;\n designs.forEach(item=>{\n \n item.id = nIndex; //Give id\n \n if(nIndex===parseInt(designid)) {\n // alert(item.html);\n // alert(gallery.path);\n // alert(gallery.pathReplace);\n\n let html = item.html;\n let googleFonts = item.googleFonts;\n let contentCss = item.contentCss;\n let contentClass = item.contentClass;\n \n let designPath = gallery.path;\n let snippetPathReplace = gallery.pathReplace;\n \n //To Tailwind\n if (framework === 'tailwind') {\n html = html.replace(new RegExp(' container', 'g'), ' container');\n \n //html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('"row', 'g'), '"' + 'flex flex-col md:flex-row');\n \n html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');\n html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');\n html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed\n html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');\n html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');\n }\n \n //To Bootstrap\n if (framework === 'bootstrap') {\n html = html.replace(new RegExp(' container', 'g'), ' container-fluid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'col-md-12');\n html = html.replace(new RegExp('column half', 'g'), 'col-md-6');\n html = html.replace(new RegExp('column third', 'g'), 'col-md-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'col-md-3');\n html = html.replace(new RegExp('column fifth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column sixth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column two-third', 'g'), 'col-md-8');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'col-md-9');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'col-md-10');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'btn btn-primary btn-lg');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'btn btn-default btn-lg');\n }`,a+="\n //To Foundation\n if (framework === 'foundation') {\n //html = html.replace(new RegExp(' container', 'g'), ' container');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'large-12 columns');\n html = html.replace(new RegExp('column half', 'g'), 'large-6 columns');\n html = html.replace(new RegExp('column third', 'g'), 'large-4 columns');\n html = html.replace(new RegExp('column fourth', 'g'), 'large-3 columns');\n html = html.replace(new RegExp('column fifth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column sixth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column two-third', 'g'), 'large-8 columns');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'large-9 columns');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'large-10 columns');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'button');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'secondary button');\n }\n \n //To UIKit\n if (framework === 'uikit') {\n html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');\n\n // html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('\"row', 'g'), '\"' + 'uk-grid');\n\n html = html.replace(new RegExp('column full', 'g'), 'uk-width-1-1');\n html = html.replace(new RegExp('column half', 'g'), 'uk-width-1-2');\n html = html.replace(new RegExp('column third', 'g'), 'uk-width-1-3');\n html = html.replace(new RegExp('column fourth', 'g'), 'uk-width-1-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'uk-width-1-5');\n html = html.replace(new RegExp('column sixth', 'g'), 'uk-width-1-6');\n html = html.replace(new RegExp('column two-third', 'g'), 'uk-width-2-3');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'uk-width-3-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'uk-width-5-6');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'uk-button uk-button-primary uk-button-large');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'uk-button uk-button-large');\n }\n \n //To Material\n if (framework === 'material') {\n html = html.replace(new RegExp(' container', 'g'), '');\n \n // html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('\"row', 'g'), '\"' + 'mdl-grid');\n\n html = html.replace(new RegExp('column full', 'g'), 'mdl-cell mdl-cell--12-col');\n html = html.replace(new RegExp('column half', 'g'), 'mdl-cell mdl-cell--6-col');\n html = html.replace(new RegExp('column third', 'g'), 'mdl-cell mdl-cell--4-col');\n html = html.replace(new RegExp('column fourth', 'g'), 'mdl-cell mdl-cell--3-col');\n html = html.replace(new RegExp('column fifth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column sixth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column two-third', 'g'), 'mdl-cell mdl-cell--8-col');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'mdl-cell mdl-cell--9-col');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'mdl-cell mdl-cell--10-col');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'mdl-button mdl-js-button mdl-button--raised');\n }\n\n if(framework ==='') {\n // Convert snippet into your defined 12 columns grid \n var rowClass = row;\n var colClass = cols;\n if(rowClass!=='' && colClass.length===12){\n html = html.replace(new RegExp('row clearfix', 'g'), 'row'); // backward\n html = html.replace(new RegExp('\"row', 'g'), '\"' + rowClass);\n \n html = html.replace(new RegExp('column full', 'g'), colClass[11]);\n html = html.replace(new RegExp('column half', 'g'), colClass[5]);\n html = html.replace(new RegExp('column third', 'g'), colClass[3]);\n html = html.replace(new RegExp('column fourth', 'g'), colClass[2]);\n html = html.replace(new RegExp('column fifth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column sixth', 'g'), colClass[1]);\n html = html.replace(new RegExp('column two-third', 'g'), colClass[7]);\n html = html.replace(new RegExp('column two-fourth', 'g'), colClass[8]);\n html = html.replace(new RegExp('column two-fifth', 'g'), colClass[9]);\n html = html.replace(new RegExp('column two-sixth', 'g'), colClass[9]);\n }\n }\n \n html = html.replace(/{id}/g, makeid());\n\n if(snippetPathReplace.length>0) {\n if (snippetPathReplace[0] != '') {\n var regex = new RegExp(snippetPathReplace[0], 'g');\n html = html.replace(regex, snippetPathReplace[1]);\n }\n }\n \n html = html.replace(/\\[%IMAGE_PATH%\\]/g, designPath);\n html = html.replace(/%5B%25IMAGE_PATH%25%5D/g, designPath); //If [%IMAGE_PATH%] is encoded (inside data-html)\n\n //Add html\n parent.contentbox.addIdea(html);\n \n //Add contentCss\n let exist = false;\n let links = parent._cb.doc.getElementsByTagName(\"link\");\n for (let i = 0; i < links.length; i++) {\n let src = links[i].href.toLowerCase();\n if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;\n }\n \n if (!exist) wrapper.insertAdjacentHTML('beforeend', '<link data-name=\"contentstyle\" data-class=\"' + contentClass + '\" href=\"' + contentStylePath + contentCss + '\" rel=\"stylesheet\">');\n }\n \n nIndex++;\n });\n });\n }\n \n const showDesigns = (catId, designId) => {\n\n if(template_list.length>0) {\n const wait = document.querySelector('.is-waiting');\n wait.style.display = 'none';\n }\n \n const designList = document.querySelector('.is-design-list');\n designList.style.opacity = 0;\n setTimeout(()=>{\n designList.innerHTML = '';\n designList.style.opacity = 1;\n designList.scrollTop = 0;\n \n let nIndex = 0;\n \n template_list.forEach(gallery=>{\n let designs = gallery.designs;\n\n let numbering = gallery.numbering;\n let showNumberOnHover = gallery.showNumberOnHover;\n let numberCount = 0;\n\n designs.forEach(item=>{\n let isSelected = false;\n let catSplit = item.category.split(',');\n for (let j = 0; j < catSplit.length; j++) {\n if (parseInt(catSplit[j]) === parseInt(catId) && parseInt(gallery.designId) === parseInt(designId)) {\n isSelected = true;\n }\n }\n \n item.id = nIndex; //Give id\n \n if (isSelected) {\n\n numberCount++;\n\n let html = '<button tabindex=\"0\" class=\"active\" data-id=\"' + item.id + '\" data-cat=\"\"' + item.category + '\">' +\n '<img class=\"lzy-img\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAaCAYAAAAjZdWPAAAEDmlDQ1BrQ0dDb2xvclNwYWNlR2VuZXJpY1JHQgAAOI2NVV1oHFUUPpu5syskzoPUpqaSDv41lLRsUtGE2uj+ZbNt3CyTbLRBkMns3Z1pJjPj/KRpKT4UQRDBqOCT4P9bwSchaqvtiy2itFCiBIMo+ND6R6HSFwnruTOzu5O4a73L3PnmnO9+595z7t4LkLgsW5beJQIsGq4t5dPis8fmxMQ6dMF90A190C0rjpUqlSYBG+PCv9rt7yDG3tf2t/f/Z+uuUEcBiN2F2Kw4yiLiZQD+FcWyXYAEQfvICddi+AnEO2ycIOISw7UAVxieD/Cyz5mRMohfRSwoqoz+xNuIB+cj9loEB3Pw2448NaitKSLLRck2q5pOI9O9g/t/tkXda8Tbg0+PszB9FN8DuPaXKnKW4YcQn1Xk3HSIry5ps8UQ/2W5aQnxIwBdu7yFcgrxPsRjVXu8HOh0qao30cArp9SZZxDfg3h1wTzKxu5E/LUxX5wKdX5SnAzmDx4A4OIqLbB69yMesE1pKojLjVdoNsfyiPi45hZmAn3uLWdpOtfQOaVmikEs7ovj8hFWpz7EV6mel0L9Xy23FMYlPYZenAx0yDB1/PX6dledmQjikjkXCxqMJS9WtfFCyH9XtSekEF+2dH+P4tzITduTygGfv58a5VCTH5PtXD7EFZiNyUDBhHnsFTBgE0SQIA9pfFtgo6cKGuhooeilaKH41eDs38Ip+f4At1Rq/sjr6NEwQqb/I/DQqsLvaFUjvAx+eWirddAJZnAj1DFJL0mSg/gcIpPkMBkhoyCSJ8lTZIxk0TpKDjXHliJzZPO50dR5ASNSnzeLvIvod0HG/mdkmOC0z8VKnzcQ2M/Yz2vKldduXjp9bleLu0ZWn7vWc+l0JGcaai10yNrUnXLP/8Jf59ewX+c3Wgz+B34Df+vbVrc16zTMVgp9um9bxEfzPU5kPqUtVWxhs6OiWTVW+gIfywB9uXi7CGcGW/zk98k/kmvJ95IfJn/j3uQ+4c5zn3Kfcd+AyF3gLnJfcl9xH3OfR2rUee80a+6vo7EK5mmXUdyfQlrYLTwoZIU9wsPCZEtP6BWGhAlhL3p2N6sTjRdduwbHsG9kq32sgBepc+xurLPW4T9URpYGJ3ym4+8zA05u44QjST8ZIoVtu3qE7fWmdn5LPdqvgcZz8Ww8BWJ8X3w0PhQ/wnCDGd+LvlHs8dRy6bLLDuKMaZ20tZrqisPJ5ONiCq8yKhYM5cCgKOu66Lsc0aYOtZdo5QCwezI4wm9J/v0X23mlZXOfBjj8Jzv3WrY5D+CsA9D7aMs2gGfjve8ArD6mePZSeCfEYt8CONWDw8FXTxrPqx/r9Vt4biXeANh8vV7/+/16ffMD1N8AuKD/A/8leAvFY9bLAAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAAAtoAMABAAAAAEAAAAaAAAAAHZhQ/wAAABcSURBVFgJ7dLBCcAwEANBx/337IQUsK/FcLD3FQgx9nO+W8NuD9v7z230rVdLOmkQ6HsAjholrXJCWdKAo0ZJq5xQljTgqFHSKieUJQ04apS0ygllSQOOGo2UfgEpPQQwSb0YngAAAABJRU5ErkJggg==\" data-src=\"' + gallery.path + item.thumbnail + '\">' +\n '<span class=\"is-overlay\"></span>' +\n (numbering? (showNumberOnHover?'<div class=\"is-number\">'+(numberCount+'').padStart(3, '0')+'</div>':'<div class=\"is-number show\">'+(numberCount+'').padStart(3, '0')+'</div>') :'') +\n '</button>';\n \n if(item.type === 'glide' || item.type === 'slick') {\n if(slider==='glide') {\n if(item.type === 'glide') {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n } \n } else if(slider==='slick') {\n if(item.type === 'slick') {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n } \n } else if(slider==='all') {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n } \n } else if(item.type === 'navbar' ) {\n if(navbar) {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n }\n } else {\n designList.insertAdjacentHTML('beforeend', html);\n const btn = designList.querySelector('[data-id=\"' + item.id + '\"]');\n btn.addEventListener('click', (e)=>{\n const designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n }\n }",a+="\n nIndex++;\n });\n });\n \n const arr = document.querySelectorAll('img.lzy-img')\n arr.forEach((v) => {\n imageObserver.observe(v);\n });\n \n closeMegaMenu();\n \n if(designList.innerHTML.trim() === '') {\n // showDesigns(catId, designId);\n setTimeout(()=>{\n showDesigns(catId, designId);\n }, 300);\n }\n \n }, 200);\n \n // Set active Button\n const menu = document.querySelector('.mega-menu');\n menu.setAttribute('data-active-cat', catId);\n menu.setAttribute('data-active-design', designId);\n const featuredCat = document.querySelector('.featured-categories');\n const btnActive1 = menu.querySelector('button.on');\n const btnActive2 = featuredCat.querySelector('button.on');\n if(btnActive1) btnActive1.classList.remove('on');\n if(btnActive2) btnActive2.classList.remove('on');\n const btn1 = menu.querySelector('.item-'+catId+'-'+designId);\n const btn2 = featuredCat.querySelector('.item-'+catId+'-'+designId);\n if(btn1) btn1.classList.add('on');\n if(btn2) btn2.classList.add('on');\n }\n \n const renderMegaMenu = () => {\n \n if(template_list.length>0) {\n const wait2 = document.querySelector('.is-waiting2');\n wait2.style.display = 'none';\n }\n\n const menu = document.querySelector('.mega-menu');\n const menuContent = document.querySelector('.mega-menu-content');\n menuContent.innerHTML = '';\n \n let catNum = 0;\n template_list.forEach(gallery=>{\n let categories = gallery.categories;\n let html = '<h2>'+parent._cb.out(gallery.name)+'</h2><div class=\"cat' +catNum+ '\"></div>';\n menuContent.insertAdjacentHTML('beforeend', html);\n const catList = menuContent.querySelector('.cat'+catNum);\n \n categories.forEach(categoryItem=>{\n let html= '<button class=\"item-'+categoryItem.id+'-'+gallery.designId+'\" data-cat=\"'+categoryItem.id+'\" data-design=\"'+gallery.designId+'\">'+parent._cb.out(categoryItem.name)+'</button>';\n catList.insertAdjacentHTML('beforeend', html);\n const btn = catList.querySelector('.item-'+categoryItem.id+'-'+gallery.designId);\n btn.addEventListener('click', (e)=>{\n const catId = btn.getAttribute('data-cat');\n const designId = btn.getAttribute('data-design');\n showDesigns(catId, designId);\n \n closeMegaMenu();\n });\n });\n \n catNum++;\n });\n \n // Set active Button\n const catId = menu.getAttribute('data-active-cat');\n const designId = menu.getAttribute('data-active-design');\n if(catId && designId) {\n const btnActive = menu.querySelector('button.on');\n if(btnActive) btnActive.classList.remove('on');\n const btn = menu.querySelector('.item-'+catId+'-'+designId);\n if(btn) btn.classList.add('on');\n }\n }\n \n const handleClick = (e) => {\n if(!e.target.closest('.mega-menu') && !e.target.closest('[data-cat=\"0\"]')) { \n closeMegaMenu();\n }\n };\n \n const showMegaMenu = () => {\n const menu = document.querySelector('.mega-menu');\n menu.style.display = 'block';\n setTimeout(()=>{\n menu.classList.add('active');\n const menuClose = menu.querySelector('.close');\n menuClose.focus();\n }, 10);\n const btn = document.querySelector('[data-cat=\"0\"]');\n btn.classList.add('on');\n \n document.addEventListener('click', handleClick);\n parent.document.addEventListener('click', handleClick); \n }\n \n const closeMegaMenu = () => {\n const menu = document.querySelector('.mega-menu.active');\n if(!menu) return;\n menu.classList.remove('active');\n setTimeout(()=>{\n menu.style.display = '';\n }, 300);\n const btn = document.querySelector('[data-cat=\"0\"]');\n btn.classList.remove('on');\n \n document.removeEventListener('click', handleClick);\n parent.document.removeEventListener('click', handleClick); \n }\n \n const renderResize = () => {\n const btns = document.querySelectorAll('.featured-categories button');\n let viewportWidth = document.body.clientWidth;\n if(viewportWidth < 1024 && viewportWidth>=800) {\n let n = 0;\n btns.forEach(btn=>{\n if(n>=5) {\n btns[n].style.display = 'none';\n } else {\n btns[n].style.display = '';\n }\n n++;\n });\n } else if(viewportWidth < 800) {\n let n = 0;\n btns.forEach(btn=>{\n if(n>=2) {\n btns[n].style.display = 'none';\n } else {\n btns[n].style.display = '';\n }\n n++;\n });\n } else {\n let n = 0;\n btns.forEach(btn=>{\n btns[n].style.display = '';\n n++;\n });\n }\n btns[btns.length-1].style.display = '';\n };\n\n const renderFeaturedCategories= () => {\n let html = '';\n const div = document.querySelector('.featured-categories');\n featuredCategories.forEach(item=>{\n html += '<button class=\"item-'+item.id+'-'+item.designId+'\" data-cat=\"'+item.id+'\" data-design=\"'+item.designId+'\">'+parent._cb.out(item.name)+'</button>';\n });\n html += '<button data-cat=\"0\">'+parent._cb.out('All Categories')+'</button>';\n div.insertAdjacentHTML('beforeend', html);\n \n const menu = document.querySelector('.mega-menu');\n const btns = div.querySelectorAll('[data-cat]');\n btns.forEach(btn=>{\n btn.addEventListener('click', (e)=>{\n const catId = btn.getAttribute('data-cat');\n const designId = btn.getAttribute('data-design');\n if(catId==='0') {\n // Show All Categories' Mega Menu\n showMegaMenu();\n } else {\n showDesigns(catId, designId);\n }\n });\n });",a+="\n const menuClose = menu.querySelector('.close');\n menuClose.addEventListener('click',()=>{\n closeMegaMenu();\n });\n\n renderResize();\n }\n \n document.addEventListener(\"DOMContentLoaded\", function() {\n \n renderFeaturedCategories();\n \n const wait = document.querySelector('.is-waiting');\n wait.style.display = 'flex';\n const wait2 = document.querySelector('.is-waiting2');\n wait2.style.display = 'flex';\n \n let totalLoaded = 0;\n\n let designId = 1;\n loadJsFiles(templateJSON, (template)=>{\n // console.log(template_list)\n\n\n // ---- Old Version (backward compatible) ----\n totalLoaded+=1;\n if(template_list.length!==totalLoaded) {\n if(template.url.indexOf('basic.js')!==-1) {\n\n let arr = {\n name: 'Simple Start',\n categories: [\n { id: 5, name: 'Random' }, \n { id: 1, name: 'Basic' },\n { id: 2, name: 'Slider' },\n { id: 3, name: 'Video' },\n { id: 4, name: 'Custom' },\n ],\n designs: window.data_basic.designs\n };\n template_list.push(arr);\n\n }\n if(template.url.indexOf('examples.js')!==-1) {\n \n let arr = {\n name: 'Quick Start',\n categories: [\n { id: 101, name: 'Header' }, \n { id: 118, name: 'Article' },\n { id: 102, name: 'Photos' },\n { id: 103, name: 'Profile' },\n { id: 104, name: 'Products, Services' },\n { id: 105, name: 'Features' },\n { id: 106, name: 'Process' },\n { id: 107, name: 'Pricing' },\n { id: 108, name: 'Skills' },\n { id: 109, name: 'Achievements' },\n { id: 110, name: 'Quotes' },\n { id: 111, name: 'Partners' },\n { id: 112, name: 'As Featured On' },\n { id: 113, name: 'Page Not Found' },\n { id: 114, name: 'Coming Soon' },\n { id: 115, name: 'Help, FAQ' },\n { id: 116, name: 'Contact' },\n { id: 117, name: 'Footer' },\n ],\n designs: window.data_examples.designs\n };\n template_list.push(arr);\n\n }\n }\n // ---- /Old Version ----\n\n\n // console.log(template)\n const templateAdded = template_list[template_list.length-1];\n templateAdded.path = template.path;\n templateAdded.pathReplace = template.pathReplace;\n templateAdded.designId = designId;\n templateAdded.numbering = template.numbering;\n templateAdded.showNumberOnHover = template.showNumberOnHover;\n // console.log(templateAdded);\n \n renderMegaMenu();\n \n const designList = document.querySelector('.is-design-list');\n if(designList.innerHTML.trim()==='') { // first load\n const cats = templateAdded.categories;\n cats.forEach(cat=>{\n if(parseInt(cat.id)===defaultCategory.id && designId===defaultCategory.designId) {\n showDesigns(defaultCategory.id, designId);\n }\n });\n }\n designId++;\n });\n })\n \n \n document.addEventListener('keydown', (e)=>{\n if(e.keyCode === 27) { // escape key\n \n const menu = document.querySelector('.mega-menu.active');\n if(menu) {\n closeMegaMenu();\n \n e.preventDefault();\n return;\n } \n }\n });\n\n window.addEventListener('resize', ()=>{\n renderResize();\n });\n\n applyParentStyles();\n \n // Style stuff\n function applyParentStyles() {\n var cssString = '' +\n 'html {' +\n '--area-color: ' + parent._cb.styleModalColor + ';' +\n '--area-background: ' + parent._cb.styleModalBackground + ';' +\n '--area2-color: ' + parent._cb.styleSnippetColor + ';' +\n '--area2-background: ' + parent._cb.styleSnippetBackground + ';' +\n '--tabs-background: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '--tab-item-color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n '--tab-item-background: ' + parent._cb.styleSnippetTabItemBackground + ';' +\n '--tab-item-active: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +\n '--tab-item-hover: ' + parent._cb.styleSnippetTabItemBackgroundHover + ';' +\n '--mega-menu: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '--is-waiting: ' + parent._cb.styleSnippetBackground + ';' +\n '--is-waiting2: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '}' +\n '.area2 {' +\n 'color: var(--area2-color);' +\n 'background: var(--area2-background);' +\n '}' +\n '.area2 button {' +\n 'color: var(--area2-color);' +\n '}' +\n '.area2 button svg{' +\n 'fill: var(--area2-color);' +\n '}' +\n '.tabs {' +\n 'background: var(--tabs-background);' +\n '}' +\n '.tabs button, .mega-menu button {' +\n 'color: var(--tab-item-color);' +\n 'background: var(--tab-item-background);' +\n '}' +\n '.tabs button.on, .mega-menu button.on {' +\n 'background: var(--tab-item-active);' +\n '}' +\n '.tabs button.on:hover, .mega-menu button.on:hover {' +\n 'background: var(--tab-item-active);' +\n '}' +\n '.tabs button:hover, .mega-menu button:hover {' +\n 'background: var(--tab-item-hover);' +\n '}' +\n '.mega-menu {' +\n 'background: var(--mega-menu);' +\n '}' +\n '.mega-menu button.close:hover {' +\n 'background: var(--mega-menu);' +\n '}' +\n '.is-waiting {' +\n 'background: var(--is-waiting);' +\n '}' +\n '.is-waiting2 {' +\n 'background: var(--is-waiting2);' +\n '}' +\n '';\n \n let themestyle = document.querySelector('[data-theme-style]');\n if(themestyle) themestyle.parentNode.removeChild(themestyle);\n \n var style = document.createElement(\"style\");\n style.setAttribute('data-theme-style','');\n style.innerHTML = cssString;\n document.head.appendChild(style);\n\n if(parent._cb.styleDark) {\n document.body.setAttribute('class', 'dark');\n } else if(parent._cb.styleColored) {\n document.body.setAttribute('class', 'colored');\n } else if(parent._cb.styleColoredDark) {\n document.body.setAttribute('class', 'colored-dark');\n } else if(parent._cb.styleLight) {\n document.body.setAttribute('class', 'light');\n } else {\n document.body.setAttribute('class', '');\n }\n\n document.body.classList.add('area2');\n }\n <\/script>\n </body>\n </html>\n ",a}getTemplatesHtml_OLD(){const t=this.builder.designUrl1,e=this.builder.designUrl2;let n=`\n <!DOCTYPE HTML>\n <html>\n <head>\n <meta charset="utf-8">\n <title></title>\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <meta name="description" content=""> \n <style> \n body {\n /* background: rgba(255,255,255,0.7); */\n margin: 0;\n }\n \n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 80px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 0px;\n box-sizing: border-box;\n overflow: auto;\n }\n \n .is-design-list>div {\n position:relative;\n /* background: #fff; */\n width: 250px;\n overflow: hidden;\n margin: 32px 0 0 30px;\n cursor: pointer;\n display: inline-block;\n outline: rgba(219, 219, 219, 0.39) 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius:2px;\n }\n \n .is-design-list>div img {\n box-shadow: none;\n opacity: 1;\n display: block;\n box-sizing: border-box;\n transition: all 0.2s ease-in-out;\n max-width: 400px;\n width: 100%\n }\n \n .is-overlay {\n position:absolute;left:0px;top:0px;width:100%;height:100%;\n }\n .is-design-list>div .is-overlay:after {\n background: rgba(0, 0, 0, 0.03);\n position: absolute;\n content: "";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n }\n .is-design-list>div:hover .is-overlay:after {\n opacity: 0.9;\n }\n \n .is-category-list {\n position: relative;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 80px;\n /* background: #f5f5f5; */\n box-sizing: border-box;\n z-index: 1;\n }\n \n .is-category-list>div {\n display: inline-block;\n white-space: nowrap;\n padding: 13px 10px 0 20px;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n /* background: #f5f5f5; */\n }\n \n .is-category-list > div > div {\n margin-bottom:10px;\n margin-left:5px;\n }\n .is-category-list > div > a {\n display: inline-block;\n padding: 10px 25px;\n /* background: #fefefe;\n color: #000; */\n border-radius: 50px;\n \n margin: 0 15px 8px 0;\n text-decoration: none;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);\n }\n \n .is-category-list > div > a:hover {\n /* background: #fafafa;\n color: #000; */\n }\n .is-category-list > div > a.active {\n /* background: #f5f5f5;\n color: #000; */\n box-shadow: none;\n }\n \n .is-category-list a:focus {\n outline: ${this.builder.editor.styleOutlineColor} 2px solid;\n }\n\n .is-design-list>div:focus {\n outline: ${this.builder.editor.styleOutlineColor} 2px solid;\n }\n \n `;return n+="\n \n .is-more-categories {\n display: none;\n flex-flow: wrap;\n position: absolute;\n width: 400px;\n box-sizing: border-box;\n padding: 0;\n z-index: 1;\n font-family: sans-serif;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 2px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n /* background: #fff; */\n }\n \n .is-more-categories a {\n width: 200px;\n float: left;\n display: block;\n box-sizing: border-box;\n padding: 12px 20px;\n /* background: #fff; */\n text-decoration: none;\n /* color: #000; */\n line-height: 1.6;\n }\n \n /* .is-more-categories a:hover {\n background:#eee;\n }\n .is-more-categories a.active {\n background:#eee;\n } */\n .is-more-categories.active {\n display: flex;\n }\n\n /*\n .is-category-list {visibility:hidden}\n .is-more-categories {visibility:hidden}\n */\n \n /* Responsive */\n .is-category-list > div > a.more-basic {display:none}\n .is-category-list > div > .screen1 {display:inline-block}\n .is-more-categories .screen1 {display:none}\n .is-category-list > div > .screen2 {display:inline-block}\n .is-more-categories .screen2 {display:none} \n @media all and (max-width: 970px) {\n .is-category-list > div > .screen1 {display:none}\n .is-more-categories .screen1 {display:block}\n .is-category-list > div > a.more-basic {display:inline-block}\n } \n @media all and (max-width: 690px) {\n .is-category-list > div > .screen2 {display:none}\n .is-more-categories .screen2 {display:block}\n .is-category-list > div > a.more-basic {display:inline-block}\n } \n .is-more-categories a.cms-option {display:none}\n \n /* Enable Module/Placeholder \n .is-category-list > div > a.more-basic {display:inline-block}\n .custom {display:none} \n .is-more-categories a.cms-option {display:block}\n */\n \n \n /* First Loading */\n .is-category-list {opacity:0;transition: opacity ease 0.3s;} \n .is-design-list {opacity:0;transition: opacity ease 0.3s;} \n \n </style> \n </head>",n+=`<body>\n \n <div class="is-category-list">\n \x3c!--<a href="" data-cat="0">Default</a>--\x3e\n <div style="border-right: rgba(255,255,255,0.1) 1px solid;">\n <div>${i("Simple Start:")}</div>\n <a href="" data-cat="5">${i("Random")}</a>\n <a href="" data-cat="1" class="screen2">Basic</a>\n <a href="" class="slider-section screen2" data-cat="2">${i("Slider")}</a>\n <a href="" data-cat="3" class="screen1 screen2">${i("Video")}</a>\n <a href="" data-cat="4" class="screen1 screen2 custom">${i("Custom")}</a>\n <a href="" class="more-basic">${i("More")}</a>\n </div>\n <div>\n <div>Quick Start: </div>\n <a href="" data-cat="101" class="screen2">${i("Header")}</a>\n <a href="" data-cat="118" class="screen2">${i("Article")}</a>\n <a href="" data-cat="103" class="screen1 screen2">${i("Profile")}</a>\n <a href="" class="more-examples">${i("More")}</a>\n </div>\n </div>\n <div id="morebasic" class="is-more-categories" style="width:200px">\n <a href="" data-cat="1" class="screen2">${i("Basic")}</a>\n <a href="" data-cat="2" class="screen2">${i("Slider")}</a>\n <a href="" data-cat="3" class="screen1">${i("Video")}</a>\n <a href="" data-cat="4" class="screen1">${i("Custom")}</a>\n\n <a href="" data-cat="51" class="cms-option">${i("Module")}</a>\n <a href="" data-cat="52" class="cms-option">${i("Placeholder")}</a>\n </div>\n <div id="morecat" class="is-more-categories">\n <a href="" data-cat="101" class="screen2">${i("Header")}</a>\n <a href="" data-cat="118" class="screen2">${i("Article")}</a>\n <a href="" data-cat="103" class="screen1 screen2">${i("Profile")}</a>\n\n <a href="" data-cat="102">${i("Photos")}</a>\n <a href="" data-cat="104">${i("Products, Services")}</a>\n <a href="" data-cat="105">${i("Features")}</a>\n <a href="" data-cat="106">${i("Process")}</a>\n <a href="" data-cat="107">${i("Pricing")}</a>\n <a href="" data-cat="108">${i("Skills")}</a>\n <a href="" data-cat="109">${i("Achievements")}</a>\n <a href="" data-cat="110">${i("Quotes")}</a>\n <a href="" data-cat="111">${i("Partners")}</a>\n <a href="" data-cat="112">${i("As Featured On")}</a> \n <a href="" data-cat="113">${i("Page Not Found")}</a>\n <a href="" data-cat="114">${i("Coming Soon")}</a>\n <a href="" data-cat="115">${i("Help, FAQ")}</a>\n <a href="" data-cat="116">${i("Contact")}</a>\n <a href="" data-cat="117" class="static-section">${i("Footer")}</a>\n \n <div class="template-extension" style="display:none">\n \x3c!--\n <div style="font-weight: 600;padding: 15px 0 10px 19px;width: 100%;position: relative !important;border-top: rgb(0 0 0 / 4%) 1px solid;">\n Writing Set\n </div>\n <div>\n <a href="" data-cat="102">${i("General")}</a>\n <a href="" data-cat="108">${i("Agency")}</a>\n <a href="" data-cat="114">${i("Travel")}</a>\n <a href="" data-cat="116">${i("Food")}</a>\n </div>\n --\x3e\n </div>\n\n </div>\n\n <div class="is-design-list">\n </div>\n \n <script src="${t}"><\/script> \n <script src="${e}"><\/script> \n \n <script>\n\n applyParentStyles();\n setTimeout(()=>{\n document.querySelector('.is-category-list').style.opacity = 1;\n document.querySelector('.is-design-list').style.opacity = 1;\n },300);\n\n \n function hasClass(element, classname) {\n if(!element) return false;\n try{\n let s = element.getAttribute('class');\n if(!s) return false;\n let exists = false;\n s.split(' ').forEach((item)=>{\n if(item===classname) {\n exists=true;\n }\n });\n return exists;\n } catch(e) { \n // Do nothing\n }\n }\n\n function appendHtml(parent, html) {\n parent.insertAdjacentHTML('beforeend', html);\n }\n function addClass(element, classname) {\n if(!element) return;\n if(element.length) {\n element.forEach((elm) => {\n _addClass(elm, classname);\n })\n return;\n } \n _addClass(element, classname);\n \n }`,n+=`\n function _addClass(element, classname) {\n if(!element) return;\n if(element.length) {\n return;\n } \n if(hasClass(element,classname)) return;\n if(element.classList.length===0) element.className = classname;\n else element.className = element.className + ' ' + classname;\n element.className = element.className.replace(/ +/g, ' ');\n }\n\n function _removeClass(element, classname) {\n if(!element) return;\n if(!element) return;\n if(element.classList.length>0) {\n let i, j, imax, jmax;\n let classesToDel = classname.split(' ');\n for (i=0, imax=classesToDel.length; i<imax; ++i) {\n if (!classesToDel[i]) continue;\n let classtoDel = classesToDel[i];\n \n let sClassName = ''; \n let currentClasses = element.className.split(' ');\n for (j=0, jmax=currentClasses.length; j<jmax; ++j) {\n if (!currentClasses[j]) continue;\n if (currentClasses[j]!==classtoDel) sClassName += currentClasses[j] + ' ';\n }\n element.className = sClassName.trim();\n }\n if(element.className==='') element.removeAttribute('class');\n }\n }\n function removeClass(element, classname) {\n if(!element) return;\n if(element.length) {\n element.forEach((elm) => {\n _removeClass(elm, classname);\n })\n return;\n } \n _removeClass(element, classname);\n }\n function getElementOffset(el) {\n const rect = el.getBoundingClientRect();\n \n return {\n top: rect.top + window.pageYOffset,\n left: rect.left + window.pageXOffset,\n width: rect.width,\n height: rect.height\n };\n }\n \n var defaultCat = ${this.builder.defaultDesignCategory}; //Show 'Header' category: 101\n var disableStaticSection = false;\n try {\n disableStaticSection = ${this.builder.disableStaticSection};\n } catch (e) { }\n if (disableStaticSection) document.querySelector('.static-section').style.display = 'none';\n\n var elm = document.querySelector('.is-category-list');\n var tab = elm.querySelector('[data-cat="' + defaultCat + '"]');\n if(tab) addClass(tab,'active');\n\n elm = document.querySelector('#morecat');\n tab = elm.querySelector('[data-cat="' + defaultCat + '"]');\n if(tab) addClass(tab,'active');\n\n elm = document.querySelector('#morebasic');\n tab = elm.querySelector('[data-cat="' + defaultCat + '"]');\n if(tab) addClass(tab,'active');\n \n /*\n elm = document.querySelector('.is-category-list');\n elm.style.visibility = 'visible';\n var elms = document.querySelectorAll('.is-more-categories'); \n elms.forEach(function(elm){\n elm.style.visibility = 'visible';\n });\n */\n\n var nIndex = 1;\n var path = '${this.builder.designPath}';\n var navbar = ${this.builder.navbar};\n data_basic.designs.forEach(function(item){\n\n var isdefault = false;\n var catSplit = item.category.split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == defaultCat) {\n isdefault = true;\n }\n }\n item.id = nIndex; //Give id to each record\n \n if (isdefault) {\n var elm = document.querySelector('.is-design-list');\n\n var html = '<div role="button" tabindex="0" class="active" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path + item.thumbnail + '"><span class="is-overlay"></span></div>';\n //appendHtml(elm, html);\n\n if(item.type === 'navbar' ) {\n if(navbar) {\n appendHtml(elm, html);\n }\n } else {\n appendHtml(elm, html);\n }\n }\n \n nIndex++;\n });`,n+="\n data_examples.designs.forEach(function(item){\n\n var isdefault = false;\n var catSplit = item.category.split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == defaultCat) {\n isdefault = true;\n }\n }\n item.id = nIndex; //Give id to each record\n \n if (isdefault) {\n var elm = document.querySelector('.is-design-list');\n var html = '<div role=\"button\" tabindex=\"0\" data-id=\"' + item.id + '\" data-cat=\"' + item.category + '\"><img src=\"' + path + item.thumbnail + '\"><span class=\"is-overlay\"></span></div>';\n appendHtml(elm, html);\n }\n \n nIndex++;\n });\n\n var btnMore1 = document.querySelector('.more-basic');\n var btnMore2 = document.querySelector('.more-examples');\n btnMore1.addEventListener('click', function(e){\n let elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms, 'active');\n\n addClass(btnMore1, 'active');\n removeClass(btnMore2, 'active');\n\n let elm = document.querySelector('#morebasic');\n addClass(elm, 'active');\n\n var top = getElementOffset(btnMore1).top;\n var left = getElementOffset(btnMore1).left;\n top = top + 42;\n elm.style.top = top + 'px';\n elm.style.left = left + 'px';\n e.preventDefault();\n });\n btnMore2.addEventListener('click', function(e){\n let elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms, 'active');\n\n addClass(btnMore2, 'active');\n removeClass(btnMore1, 'active');\n\n let elm = document.querySelector('#morecat');\n addClass(elm, 'active');\n\n var top = getElementOffset(btnMore2).top;\n var left = getElementOffset(btnMore2).left;\n top = top + 42;\n elm.style.top = top + 'px';\n elm.style.left = 'auto';\n elm.style.right = '0px';\n e.preventDefault();\n });\n\n elms = document.querySelectorAll('.is-more-categories a');\n elms.forEach(function(elm){\n elm.addEventListener('click', function(e){\n\n selectCategory(elm);\n \n let cat = e.target.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n\n e.preventDefault();\n });\n });\n\n elms = document.querySelectorAll('.is-category-list a');\n elms.forEach(function(elm){\n elm.addEventListener('click', function(e){\n \n if(!elm.getAttribute('data-cat')) return;\n\n selectCategory(elm);\n \n e.preventDefault();\n });\n });\n\n var div = document.querySelectorAll('.is-design-list div');\n div.forEach(function(btn){\n btn.addEventListener('click', function(e){\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n btn.addEventListener('keydown', function(e){\n //Extra \n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n const items = e.target.parentNode.querySelectorAll('.active');\n if(items.length>0) {\n let lastItem = items[items.length-1];\n if(e.target===lastItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n }\n } else if ((e.which === 9 && e.shiftKey)) { // tab + shift key pressed\n const firstItem = e.target.parentNode.querySelector('.active');\n if(e.target===firstItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = firstItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n }\n });\n });\n\n document.addEventListener(\"click\", function(e) {\n var btn1 = document.querySelector('.more-basic');\n var btn2 = document.querySelector('.more-examples');\n var targetEl = e.target; // clicked element \n do {\n if(targetEl == btn1 || targetEl == btn2) {\n // Click inside\n return;\n }\n targetEl = targetEl.parentNode;\n } while (targetEl);\n\n // Click outside\n\n var elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms,'active');\n removeClass(btn1,'active');\n removeClass(btn2,'active');\n });",n+=`\n parent.document.addEventListener("click", function(e) {\n var btn1 = document.querySelector('.more-basic');\n var btn2 = document.querySelector('.more-examples');\n \n var elms = document.querySelectorAll('.is-more-categories');\n removeClass(elms,'active');\n removeClass(btn1,'active');\n removeClass(btn2,'active');\n });\n\n // elm = document.querySelector('.is-category-list');\n // elm.style.display = 'block';\n elm = document.querySelector('.is-design-list');\n elm.style.display = 'block';\n\n var slider = '${this.builder.slider}';\n var navbar = ${this.builder.navbar};\n\n if(slider==='') document.querySelector('.slider-section').style.display = 'none';\n\n function selectCategory(elm) {\n \n var cat = elm.getAttribute('data-cat');\n var div = document.querySelector('.is-design-list');\n var items = div.querySelectorAll('[data-cat="' + cat + '"]');\n if(items.length == 0) {\n \n data_basic.designs.forEach(function(item){\n if (cat == item.category) {\n\n if(item.type === 'glide' || item.type === 'slick') {\n if(slider==='glide') {\n if(cat === '2') {\n if(item.type === 'glide') {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n } \n } \n } else if(slider==='slick') {\n if(cat === '2') {\n if(item.type === 'slick') {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n } \n } \n } else if(slider==='all') {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n } \n } else if(item.type === 'navbar' ) {\n if(navbar) {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n }\n } else {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n }\n \n }\n });\n data_examples.designs.forEach(function(item){\n if (cat == item.category) {\n appendHtml(div, '<div role="button" tabindex="0" data-id="' + item.id + '" data-cat="' + item.category + '"><img src="' + path+item.thumbnail + '"><span class="is-overlay"></span></div>');\n }\n });\n\n items = div.querySelectorAll('[data-cat="' + cat + '"]');\n items.forEach(function(btn){\n btn.addEventListener('click', function(e){\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n });\n btn.addEventListener('keydown', function(e){\n //Extra \n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n const items = e.target.parentNode.querySelectorAll('.active');\n if(items.length>0) {\n let lastItem = items[items.length-1];\n if(e.target===lastItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n }\n } else if ((e.which === 9 && e.shiftKey)) { // tab + shift key pressed\n const firstItem = e.target.parentNode.querySelector('.active');\n if(e.target===firstItem) {\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = firstItem.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n \n e.preventDefault();\n }\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n var designid = btn.getAttribute('data-id');\n addDesign(designid);\n }\n });\n });\n\n }\n\n var _elms = document.querySelectorAll('.is-category-list a');\n removeClass(_elms,'active');\n _elms = document.querySelectorAll('.is-more-categories a');\n removeClass(_elms,'active');\n addClass(elm,'active');\n \n if (cat) {\n _elms = document.querySelectorAll('.is-design-list div');\n _elms.forEach(function(elm) {\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n _elms.forEach(function(elm) {\n var catSplit = elm.getAttribute('data-cat').split(',');\n for (var j = 0; j < catSplit.length; j++) {\n if (catSplit[j] == cat) {\n elm.style.display = '';\n elm.classList.add('active');\n }\n }\n });\n \n }\n\n _elms = document.querySelectorAll('.is-more-categories');\n removeClass(_elms,'active');\n }`,n+=`\n\n let categorylist = document.querySelector('.is-category-list');\n let designlist = document.querySelector('.is-design-list');\n\n let inputTabs = [];\n let inputTabsAll = document.querySelectorAll('.is-category-list a');\n inputTabsAll.forEach((item)=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='inline-block') {\n item.classList.add('show');\n inputTabs.push(item);\n } else {\n item.classList.remove('show');\n }\n });\n let index = 0;\n inputTabs.forEach((item)=>{\n\n let nextItem = inputTabs[index+1];\n let prevItem = inputTabs[index-1];\n \n item.addEventListener('keydown', (e)=>{\n e.preventDefault();\n \n if (e.which === 39) { // arrow right key pressed\n if(nextItem) nextItem.focus();\n } else if (e.which === 37) { // arrow left key pressed\n if(prevItem) prevItem.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n \n if(e.target===btnMore1) {\n \n btnMore1.click();\n\n e.preventDefault();\n e.stopImmediatePropagation();\n } else if(e.target===btnMore2) {\n \n btnMore2.click();\n\n e.preventDefault();\n e.stopImmediatePropagation();\n } else {\n\n selectCategory(e.target);\n \n }\n } else if(e.which === 40 && (e.target.classList.contains('more-basic') || e.target.classList.contains('more-examples'))) { // down\n\n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories.active');\n let items = moreCategories.querySelectorAll('a');\n items.forEach(item=>{\n let display = window.getComputedStyle(item).getPropertyValue('display');\n if(display==='block') {\n item.classList.add('show');\n if(item.classList.contains('active')) {\n activeItem=item;\n }\n } else {\n item.classList.remove('show');\n }\n });\n firstItem = moreCategories.querySelector('.show');\n if(activeItem) {\n activeItem.focus();\n } else {\n firstItem.focus();\n }\n\n } else if (e.which === 27) {\n // let moreCategories = document.querySelector('.is-more-categories.active');\n // if(moreCategories) moreCategories.classList.remove('active');\n // let activeTab = document.querySelector('.more-basic.active,.more-examples.active');\n // if(activeTab) activeTab.focus();\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n\n if(inputs.length===0) return;\n\n let firstInput = inputs[0];\n\n firstInput.focus();\n\n let lastInput = inputs[inputs.length-1];\n \n lastInput.addEventListener('keydown', (e)=>{\n \n e.preventDefault();\n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastInput.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n }\n });\n } \n \n });\n index++;\n });\n\n\n let dropdownItems = document.querySelectorAll('.is-more-categories a');\n Array.prototype.forEach.call(dropdownItems, (item) => {\n\n item.addEventListener('keydown', (e)=>{\n e.preventDefault();\n if(e.keyCode === 38 && e.target.previousElementSibling && window.getComputedStyle(e.target.previousElementSibling).getPropertyValue('display')==='block') { // up\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 40 && e.target.nextElementSibling && window.getComputedStyle(e.target.nextElementSibling).getPropertyValue('display')==='block') { // down\n e.target.nextElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n selectCategory(e.target);\n\n let cat = e.target.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n \n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n // Redirect to tab content\n let inputs = [];\n let controls = designlist.querySelectorAll('.active');\n controls.forEach(control=>{\n inputs.push(control);\n });\n \n if(inputs.length===0) return;\n \n let firstInput = inputs[0];\n \n firstInput.focus();\n\n let lastInput = inputs[inputs.length-1];\n \n lastInput.addEventListener('keydown', (e)=>{\n \n e.preventDefault();\n if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n let tab = document.querySelector('.is-category-list a.active');\n if(tab) tab.focus();\n else {\n let cat = lastInput.getAttribute('data-cat');\n if(cat==='1'||cat==='2'||cat==='3'||cat==='4'||cat==='5'||cat==='51'||cat==='52') {\n document.querySelector('.more-basic').focus();\n } else {\n document.querySelector('.more-examples').focus();\n }\n }\n }\n });\n }\n \n });\n \n // item.addEventListener('click', (e)=>{\n // e.preventDefault();\n\n // e.target.focus();\n \n // selectCategory(e.target);\n // });\n });\n\n function addDesign(designid) {\n \n // var wrapper = parent.document.querySelector('.is-wrapper');\n var wrapper = parent._cb.doc.querySelector('.is-wrapper');\n\n var framework = '${this.builder.framework}';\n var snippetPathReplace = [];\n ${this.builder.designPathReplace.length>0?`\n snippetPathReplace = ['${this.builder.designPathReplace[0]}', '${this.builder.designPathReplace[1]}'];\n `:""}\n \n var contentStylePath = '${this.builder.contentStylePath}';\n var html = '';\n var result = data_basic.designs.filter(function(element){ \n if(element.id === parseInt(designid)) return element;\n });\n if (result.length==0) {\n result = data_examples.designs.filter(function(element){ \n if(element.id === parseInt(designid)) return element;\n });\n }\n\n var html = result[0].html;\n var googleFonts = result[0].googleFonts;\n var contentCss = result[0].contentCss;\n var contentClass = result[0].contentClass;\n\n //To Tailwind\n if (framework === 'tailwind') {\n html = html.replace(new RegExp(' container', 'g'), ' container');\n html = html.replace(new RegExp('row clearfix', 'g'), 'flex flex-col md:flex-row');\n html = html.replace(new RegExp('column full', 'g'), 'w-full px-4');\n html = html.replace(new RegExp('column half', 'g'), 'w-full md:w-6/12 px-4');\n html = html.replace(new RegExp('column third', 'g'), 'w-full md:w-4/12 px-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'w-full md:w-3/12 px-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'w-full md:w-2/12 px-4'); //not needed\n html = html.replace(new RegExp('column sixth', 'g'), 'w-full md:w-2/12 px-4');\n html = html.replace(new RegExp('column two-third', 'g'), 'w-full md:w-8/12 px-4');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'w-full md:w-9/12 px-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'w-full md:w-10/12 px-4');\n }\n \n //To Bootstrap\n if (framework === 'bootstrap') {\n html = html.replace(new RegExp(' container', 'g'), ' container-fluid');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'col-md-12');\n html = html.replace(new RegExp('column half', 'g'), 'col-md-6');\n html = html.replace(new RegExp('column third', 'g'), 'col-md-4');\n html = html.replace(new RegExp('column fourth', 'g'), 'col-md-3');\n html = html.replace(new RegExp('column fifth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column sixth', 'g'), 'col-md-2');\n html = html.replace(new RegExp('column two-third', 'g'), 'col-md-8');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'col-md-9');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'col-md-10');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'btn btn-primary btn-lg');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'btn btn-default btn-lg');\n }\n\n //To Foundation\n if (framework === 'foundation') {\n //html = html.replace(new RegExp(' container', 'g'), ' container');\n html = html.replace(new RegExp('row clearfix', 'g'), 'row');\n html = html.replace(new RegExp('column full', 'g'), 'large-12 columns');\n html = html.replace(new RegExp('column half', 'g'), 'large-6 columns');\n html = html.replace(new RegExp('column third', 'g'), 'large-4 columns');\n html = html.replace(new RegExp('column fourth', 'g'), 'large-3 columns');\n html = html.replace(new RegExp('column fifth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column sixth', 'g'), 'large-2 columns');\n html = html.replace(new RegExp('column two-third', 'g'), 'large-8 columns');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'large-9 columns');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'large-10 columns');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'button');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'secondary button');\n }\n\n //To UIKit\n if (framework === 'uikit') {\n html = html.replace(new RegExp(' container', 'g'), ' uk-container uk-container-center');\n html = html.replace(new RegExp('row clearfix', 'g'), 'uk-grid');\n html = html.replace(new RegExp('column full', 'g'), 'uk-width-1-1');\n html = html.replace(new RegExp('column half', 'g'), 'uk-width-1-2');\n html = html.replace(new RegExp('column third', 'g'), 'uk-width-1-3');\n html = html.replace(new RegExp('column fourth', 'g'), 'uk-width-1-4');\n html = html.replace(new RegExp('column fifth', 'g'), 'uk-width-1-5');\n html = html.replace(new RegExp('column sixth', 'g'), 'uk-width-1-6');\n html = html.replace(new RegExp('column two-third', 'g'), 'uk-width-2-3');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'uk-width-3-4');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'uk-width-5-6');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'uk-button uk-button-primary uk-button-large');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'uk-button uk-button-large');\n }\n\n //To Material\n if (framework === 'material') {\n html = html.replace(new RegExp(' container', 'g'), '');\n html = html.replace(new RegExp('row clearfix', 'g'), 'mdl-grid');\n html = html.replace(new RegExp('column full', 'g'), 'mdl-cell mdl-cell--12-col');\n html = html.replace(new RegExp('column half', 'g'), 'mdl-cell mdl-cell--6-col');\n html = html.replace(new RegExp('column third', 'g'), 'mdl-cell mdl-cell--4-col');\n html = html.replace(new RegExp('column fourth', 'g'), 'mdl-cell mdl-cell--3-col');\n html = html.replace(new RegExp('column fifth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column sixth', 'g'), 'mdl-cell mdl-cell--2-col');\n html = html.replace(new RegExp('column two-third', 'g'), 'mdl-cell mdl-cell--8-col');\n html = html.replace(new RegExp('column two-fourth', 'g'), 'mdl-cell mdl-cell--9-col');\n html = html.replace(new RegExp('column two-sixth', 'g'), 'mdl-cell mdl-cell--10-col');\n html = html.replace(new RegExp('btn btn-primary', 'g'), 'mdl-button mdl-js-button mdl-button--raised mdl-button--accent');\n html = html.replace(new RegExp('btn btn-default', 'g'), 'mdl-button mdl-js-button mdl-button--raised');\n }`,n+="\n\n html = html.replace(/{id}/g, makeid());\n\n if(snippetPathReplace.length>0) {\n if (snippetPathReplace[0] != '') {\n var regex = new RegExp(snippetPathReplace[0], 'g');\n html = html.replace(regex, snippetPathReplace[1]);\n }\n }\n\n //Add html\n parent.contentbox.addIdea(html);\n\n //Add contentCss\n var exist = false;\n var links = parent.document.getElementsByTagName(\"link\");\n for (var i = 0; i < links.length; i++) {\n var src = links[i].href.toLowerCase();\n if (src.indexOf(contentCss.toLowerCase()) != -1) exist = true;\n }\n \n if (!exist) appendHtml(wrapper,'<link data-name=\"contentstyle\" data-class=\"' + contentClass + '\" href=\"' + contentStylePath + contentCss + '\" rel=\"stylesheet\">');\n \n }\n\n function makeid() {//http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript\n var text = \"\";\n var possible = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\";\n for (var i = 0; i < 2; i++)\n text += possible.charAt(Math.floor(Math.random() * possible.length));\n \n var text2 = \"\";\n var possible2 = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n for (var i = 0; i < 5; i++)\n text2 += possible2.charAt(Math.floor(Math.random() * possible2.length));\n \n return text + text2;\n }\n\n \n // Style stuff\n function applyParentStyles() {\n var cssString = '' +\n 'body {' +\n 'background: ' + parent._cb.styleSnippetBackground + ';' +\n 'color: ' + parent._cb.styleSnippetColor + ';' +\n 'margin: 0;' +\n '}' +\n \n\n '.dark .is-design-list>div {' +\n 'outline: transparent 1px solid;' +\n '}' +\n\n '/* Scrollbar for modal */' +\n\n '/* Darker color, because background for snippet thumbnails is always light. */' +\n '.dark * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgb(78 78 78 / 62%) auto;' +\n '}' +\n '.dark *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.dark *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.dark *::-webkit-scrollbar-thumb {' +\n 'background-color:rgb(78 78 78 / 62%);' +\n '}' +\n\n '.colored-dark * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgb(100, 100, 100) auto;' +\n '}' +\n '.colored-dark *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.colored-dark *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.colored-dark *::-webkit-scrollbar-thumb {' +\n 'background-color:rgb(100, 100, 100);' +\n '}' +\n\n '.colored * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +\n '}' +\n '.colored *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.colored *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.colored *::-webkit-scrollbar-thumb {' +\n 'background-color: rgba(0, 0, 0, 0.4);' +\n '}' +\n ",n+="\n '.light * {' +\n 'scrollbar-width: thin;' +\n 'scrollbar-color: rgba(0, 0, 0, 0.4) auto;' +\n '}' +\n '.light *::-webkit-scrollbar {' +\n 'width: 12px;' +\n '}' +\n '.light *::-webkit-scrollbar-track {' +\n 'background: transparent;' +\n '}' +\n '.light *::-webkit-scrollbar-thumb {' +\n 'background-color: rgba(0, 0, 0, 0.4);' +\n '}' +\n \n 'svg {' +\n 'fill: ' + parent._cb.styleSnippetColor + ';' +\n '}' +\n\n '.dark .is-design-list>div .is-overlay:after {' +\n 'background: rgb(78 78 78 / 13%);' +\n '}' +\n\n \n '.is-category-list {' +\n 'display: flex;' +\n '}' +\n \n '.is-category-list>div {' +\n 'background: ' + parent._cb.styleSnippetTabsBackground + ';' +\n '}' +\n '.is-category-list>div:last-child {' +\n 'width:100%;' +\n '}' +\n \n '.is-category-list a {' +\n 'background: ' + parent._cb.styleSnippetTabItemBackground + ';' +\n 'color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n 'transition: box-shadow ease 0.3s;' +\n '}' +\n \n '.is-category-list a:hover {' +\n 'background: ' + parent._cb.styleSnippetTabItemBackgroundHover + ';' +\n 'box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);' +\n 'color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n '}' +\n \n '.is-category-list a.active {' +\n 'background: ' + parent._cb.styleSnippetTabItemBackgroundActive + ';' +\n 'color: ' + parent._cb.styleSnippetTabItemColor + ';' +\n 'cursor: default;' +\n '}' +\n\n '.is-more-categories {' +\n 'background: ' + parent._cb.styleSnippetMoreItemBackground + ';' +\n '}' +\n \n '.is-more-categories a {' +\n 'background: ' + parent._cb.styleSnippetMoreItemBackground + ';' +\n 'color: ' + parent._cb.styleSnippetMoreItemColor + ';' +\n '}' +\n \n '.is-more-categories a:hover {' +\n 'background: ' + parent._cb.styleSnippetMoreItemBackgroundHover + ';' +\n '}' +\n \n '.is-more-categories a.active, .is-more-categories a:focus {' +\n ' background: ' + parent._cb.styleSnippetMoreItemBackgroundActive + ';outline:none;' +\n '}';\n \n let themestyle = document.querySelector('[data-theme-style]');\n if(themestyle) themestyle.parentNode.removeChild(themestyle);\n \n var style = document.createElement(\"style\");\n style.setAttribute('data-theme-style','');\n style.innerHTML = cssString;\n document.head.appendChild(style);\n\n if(parent._cb.styleDark) {\n document.body.setAttribute('class', 'dark');\n } else if(parent._cb.styleColored) {\n document.body.setAttribute('class', 'colored');\n } else if(parent._cb.styleColoredDark) {\n document.body.setAttribute('class', 'colored-dark');\n } else if(parent._cb.styleLight) {\n document.body.setAttribute('class', 'light');\n } else {\n document.body.setAttribute('class', '');\n }\n }\n\n // applyParentStyles();\n\n document.addEventListener('keydown', (e)=>{\n if(e.keyCode === 27) { // escape key\n \n let moreCategories = document.querySelector('.is-more-categories.active');\n if(moreCategories) {\n moreCategories.classList.remove('active');\n\n let activeTab = document.querySelector('.more-basic.active,.more-examples.active');\n if(activeTab) activeTab.focus();\n\n e.preventDefault();\n return;\n } else {\n const overlay = parent.document.body;\n overlay.click();\n }\n }\n });\n\n <\/script>\n </body>\n </html>\n \n \n ",n}}class a{constructor(t){const e=()=>{let e=t.querySelectorAll(".is-tabs-more");Array.prototype.forEach.call(e,(t=>{t.style.display="none",t.setAttribute("aria-expanded",!1)})),document.removeEventListener("click",i)},i=t=>{t.target.closest(".is-tab-more")||t.target.closest("[data-menu]")||e()},n=n=>{const o=n.parentNode.getAttribute("data-group"),s=n.getAttribute("data-menu");if(s){document.addEventListener("click",i),n.setAttribute("aria-expanded",!0),t.querySelector("#"+s).style.display="block";let e=t.querySelector('.is-tabs-more[data-group="'+o+'"] > li.active');if(e)e.focus();else{t.querySelector('.is-tabs-more[data-group="'+o+'"]').focus()}return!1}if(n.classList.contains("active"))return!1;const a=n.getAttribute("data-content");if(!a)return!1;let l=t.querySelectorAll('.is-tabs[data-group="'+o+'"] > a');Array.prototype.forEach.call(l,(t=>{t.classList.remove("active")})),l=t.querySelectorAll('.is-tabs-more[data-group="'+o+'"] > li'),Array.prototype.forEach.call(l,(t=>{t.classList.remove("active")})),n.classList.add("active");let r=t.querySelectorAll('.is-tab-content[data-group="'+o+'"]');Array.prototype.forEach.call(r,(t=>{t.style.display="none",t.classList.remove("active")}));const c=t.querySelector("#"+a);c.style.display="flex",c.classList.add("active");const d=t.querySelector(".is-tabs-more");return d&&(d.style.display="none"),e(),this.setupTabKey(c,t),!1};let o=t.querySelectorAll(".is-tabs a");Array.prototype.forEach.call(o,(t=>{t.addEventListener("keydown",(e=>{if(e.preventDefault(),13===e.keyCode||32===e.keyCode)n(e.target);else if(9===e.which&&!e.shiftKey){let e=[];const i=t.parentNode.getAttribute("data-group");let n=t.parentNode.parentNode.querySelector('.is-tab-content[data-group="'+i+'"].active');if(Array.from(n.children).map((t=>{if("none"!==window.getComputedStyle(t,null).getPropertyValue("display")){t.querySelectorAll('.is-tabs.active, a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]').forEach((t=>{"none"!==window.getComputedStyle(t,null).getPropertyValue("display")&&e.push(t)}))}})),0===e.length)return;e[0].focus()}})),t.addEventListener("click",(t=>{t.preventDefault(),n(t.target)}))}));const s=t.querySelectorAll(".is-tabs-more");Array.prototype.forEach.call(s,(t=>{t.addEventListener("keydown",(i=>{i.preventDefault(),40===i.keyCode&&i.target.nextElementSibling?t.querySelector("li").focus():27===i.keyCode&&e()}))})),o=t.querySelectorAll(".is-tabs-more li"),Array.prototype.forEach.call(o,(i=>{i.addEventListener("keydown",(o=>{if(o.preventDefault(),o.stopImmediatePropagation(),38===o.keyCode&&o.target.previousElementSibling)o.target.previousElementSibling.focus();else if(40===o.keyCode&&o.target.nextElementSibling)o.target.nextElementSibling.focus();else if(27===o.keyCode)e();else if((13===o.keyCode||32===o.keyCode)&&(n(o.target),o.target.closest(".is-tabs-more"))){const e=i.parentNode.getAttribute("id"),n=t.querySelector('.is-tabs a[data-menu="'+e+'"]');n&&n.focus()}})),i.addEventListener("click",(e=>{if(e.preventDefault(),n(e.target),e.target.closest(".is-tabs-more")){const e=i.parentNode.getAttribute("id"),n=t.querySelector('.is-tabs a[data-menu="'+e+'"]');n&&n.focus()}}))}));t.addEventListener("focus",(()=>{this.setupModal(t)}))}setupModal(t){setTimeout((()=>{let e=[];t.querySelectorAll(".is-tabs a").forEach((t=>{"none"!==t.style.display?(t.classList.add("show"),e.push(t)):t.classList.remove("show")}));let i=0;this.inputTabs=e,e.forEach((t=>{let n=e[i+1],o=e[i-1];t.addEventListener("keydown",(t=>{t.preventDefault(),39===t.which?n&&n.focus():37===t.which&&o&&o.focus()})),i++})),this.setupTabKey(t.querySelector(".is-tab-content.active"),t)}),30)}setupTabKey(t,e){let i=[];if(Array.from(t.children).map((t=>{if("none"!==window.getComputedStyle(t,null).getPropertyValue("display")){t.querySelectorAll('.is-tabs.active, a[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex]').forEach((t=>{"none"!==window.getComputedStyle(t,null).getPropertyValue("display")&&i.push(t)}))}})),0===i.length)return;let n=i[0];i[i.length-1].addEventListener("keydown",(i=>{if(9===i.which&&!i.shiftKey){i.preventDefault();let n=t.getAttribute("id");const o=e.querySelector('li[data-content="'+n+'"],a[data-content="'+n+'"]');if(o.closest(".is-tabs-more")){n=o.parentNode.getAttribute("id");const t=e.querySelector('.is-tabs a[data-menu="'+n+'"]');t&&t.focus()}else o.focus()}})),n.addEventListener("keydown",(i=>{if(9===i.which&&i.shiftKey){i.preventDefault();let n=t.getAttribute("id");const o=e.querySelector('li[data-content="'+n+'"],a[data-content="'+n+'"]');if(o.closest(".is-tabs-more")){n=o.parentNode.getAttribute("id");const t=e.querySelector('.is-tabs a[data-menu="'+n+'"]');t&&t.focus()}else o.focus()}}))}}const l=new t;class r{constructor(t){this.builder=t,this.section=this.builder.section;const e=this.builder.builderStuff;this.builderStuff=e;let n='<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width: 450px;"><div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">'+i("Are you sure you want to delete this section?")+'</div><button title="'+i("Delete")+'" class="input-ok classic">'+i("Delete")+"</button></div></div>"+`\n <div class="is-modal is-modal-content editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-bar is-draggable" draggable=""> \n ${i("Section Settings")}\n <button class="is-modal-close" tabindex="-1" title="${i("Close")}">\n <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>\n </button>\n </div>\n <div style="padding:0 0 10px;width:100%;">\n \n <div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings"><a id="tabSectionGeneral" title="`+i("General")+'" href="" data-content="divSectionGeneral" class="active">'+i("General")+'</a><a id="tabSectionAnimation" title="'+i("Animation")+'" href="" data-content="divSectionAnimation">'+i("Animation")+'</a><a id="tabSectionScrollButton" title="'+i("Scroll")+'" href="" data-content="divSectionScrollButton">'+i("Scroll")+'</a><a id="tabSectionMore" title="'+i("More")+'" href="" data-content="divSectionMore">'+i("More")+"</a></div>";n+=`\n <div id="divSectionMore" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">\n \n <label for="inpSectionId" style="padding:20px 0 3px;">${i("Add Section ID")}:</label>\n <div>\n <input id="inpSectionId" class="input-section-id" type="text" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)" style="height:38px">\n </div>\n\n <label for="inpSectionCssClasses" style="padding:20px 0 3px;">${i("Add Css Classes")}:</label>\n <div>\n <input id="inpSectionCssClasses" class="input-section-classes" type="text" style="height:38px">\n </div>\n </div>\n <div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0"><div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">`+i("Move Section")+':</div><div style="display:flex"><button title="'+i("Move Up")+'" class="cmd-section-up" style="">&#8593;</button><button title="'+i("Move Down")+'" class="cmd-section-down">&#8595;</button><button title="'+i("Move to Top")+'" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button><button title="'+i("Move to Bottom")+'" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button><button title="'+i("Duplicate")+'" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button></div></div>',n+='<div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Height")+':</div><div style="display:flex"><button title="10%" class="cmd-section-height" data-value="10">10%</button><button title="15%" class="cmd-section-height" data-value="15">15%</button><button title="20%" class="cmd-section-height" data-value="20">20%</button><button title="25%" class="cmd-section-height" data-value="25">25%</button><button title="30%" class="cmd-section-height" data-value="30">30%</button><button title="40%" class="cmd-section-height" data-value="40">40%</button><button title="50%" class="cmd-section-height" data-value="50">50%</button></div><div style="display:flex"><button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button><button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button><button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button><button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button><button title="85%" class="cmd-section-height" data-value="85" style="border-left:none;border-top:none;">85%</button><button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button><button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button><button title="'+i("Clear")+'" class="cmd-section-height" data-value="0"><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div><div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Spacing")+':</div><div style="display:flex"><button title="'+i("xxs")+'" class="cmd-box-spacing" data-value="xxs">'+i("xxs")+'</button><button title="'+i("xs")+'" class="cmd-box-spacing" data-value="default">'+i("xs")+'</button><button title="'+i("sm")+'" class="cmd-box-spacing" data-value="sm">'+i("sm")+'</button><button title="'+i("m")+'" class="cmd-box-spacing" data-value="m">'+i("m")+'</button><button title="'+i("lg")+'" class="cmd-box-spacing" data-value="lg">'+i("lg")+'</button><button title="'+i("Clear")+'" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div>',n+='<div class="div-section-spacesettings" style="display:flex;flex-direction:column;"><div class="div-multi-boxes"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Between Boxes")+':</div><div style="display:flex"><button title="'+i("space")+'" class="cmd-betweenbox-spacing" data-value="space">'+i("space")+'</button><button title="'+i("no space")+'" class="cmd-betweenbox-spacing" data-value="no-space">'+i("no space")+'</button></div></div><div style="display:none;padding-top:20px;padding-bottom: 3px;">'+i("Stack")+':</div><div style="display:none"><button title="'+i("top")+'" class="cmd-section-stack" data-value="top">'+i("top")+'</button><button title="'+i("middle")+'" class="cmd-section-stack" data-value="middle">'+i("middle")+'</button><button title="'+i("bottom")+'" class="cmd-section-stack" data-value="bottom">'+i("bottom")+'</button><button title="'+i("Clear")+'" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div><div style="padding-top:20px;padding-bottom: 3px;">'+i("Background Color")+':</div><div style="display:flex;"><button title="'+i("Background Color")+'" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button><button title="'+i("Gradient")+'" class="input-section-gradient classic" data-value="+">'+i("Gradient")+"</button></div>"+`\n \n <div class="is-separator" style="margin-top:20px"></div>\n \n <div class="div-target" style="display: flex;justify-content: flex-end;padding: 5px 0 0;">\n <button title="${i("Desktop")}" class="input-device on" data-value="" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-desktop"></use></svg>\n </button>\n <button title="${i("Laptop/Tablet (Landscape)")}" class="input-device" data-value="md" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px;transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Tablet (Portrait)")}" class="input-device" data-value="sm" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n \x3c!--\n <button title="${i("Tablet")}" class="input-device" data-value="sm" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>--\x3e\n <button title="${i("Mobile")}" class="input-device" data-value="xs" style="width:40px;height:25px;">\n <svg class="is-icon-flex" style="width:13px;height:13px"><use xlink:href="#icon-device-mobile"></use></svg>\n </button>\n </div>\n\n <div style="padding-top:0;padding-bottom:3px;">${i("Visibility")}:</div>\n <div class="div-visibility" style="display:flex;">\n <button title="${i("Visible")}" class="input-visible on" style="width:100px;height:34px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye"></use></svg>\n <span style="margin-left:5px">${i("Visible")}</span>\n </button>\n <button title="${i("Hidden")}" class="input-hidden" style="width:100px;height:34px;">\n <svg class="is-icon-flex" style="width:16px;height:16px"><use xlink:href="#icon-eye-off"></use></svg>\n <span style="margin-left:5px">${i("Hidden")}</span>\n </button>\n </div>\n\n <div class="div-boxesperline" style="flex-direction:column">\n <label style="margin:20px 0 0;display:flex;flex-direction:column">\n <span style="margin:0 4px 3px 0">${i("Boxes per Line")}:</span>\n </label>\n <div class="flex">\n <button title="1" class="input-boxesperline on" data-value="1" style="width:40px;height:25px;">1</button>\n <button title="2" class="input-boxesperline" data-value="2" style="width:40px;height:25px;">2</button>\n <button title="3" class="input-boxesperline" data-value="3" style="width:40px;height:25px;">3</button>\n <button title="4" class="input-boxesperline" data-value="4" style="width:40px;height:25px;">4</button>\n <button title="${i("Default")}" class="input-boxesperline" data-value="" style="width:90px;height:25px;">${i("Default")}</button>\n </div>\n </div>\n \n <div id="divReverseBoxes" style="display:none">\n <label for="chkReverseBoxes" style="margin:20px 0 0 0;display:flex"><input id="chkReverseBoxes" type="checkbox" style="margin:0 7px 0 0"/><span>${i("Reverse Boxes")}</span></label>\n </div>\n </div><div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0"><div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">`+i("Start")+':</div><div style="display:flex;flex-flow:wrap;"><button title="'+i("Slide Left")+'" class="cmd-section-anim-start" data-value="slide-left">'+i("Slide Left")+'</button><button title="'+i("Slide Right")+'" class="cmd-section-anim-start" data-value="slide-right">'+i("Slide Right")+'</button><button title="'+i("Zoom In")+'" class="cmd-section-anim-start" data-value="zoom-in">'+i("Zoom In")+'</button><button title="'+i("Clear")+'" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div>',n+='<div style="display:flex;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("End")+':</div><div style="display:flex;flex-flow:wrap;"><button title="'+i("Slide Left")+'" class="cmd-section-anim-end" data-value="slide-left">'+i("Slide Left")+'</button><button title="'+i("Slide Right")+'" class="cmd-section-anim-end" data-value="slide-right">'+i("Slide Right")+'</button><button title="'+i("Slide Back")+'" class="cmd-section-anim-end" data-value="slide-back">'+i("Slide Back")+'</button><button title="'+i("Zoom In")+'" class="cmd-section-anim-end" data-value="zoom-in">'+i("Zoom In")+'</button><button title="'+i("Zoom Out")+'" class="cmd-section-anim-end" data-value="zoom-out">'+i("Zoom Out")+'</button><button title="'+i("Clear")+'" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button></div></div></div><div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0"><div style="display:none;flex-direction:column;"><div style="padding-top:20px;padding-bottom: 3px;"><label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> '+i("Scroll Icon")+'</label></div><div style="display:flex;padding-top:10px;"><button title="'+i("Light")+'" class="cmd-section-scroll" data-value="light" style="min-width:80px;">'+i("Light")+'</button><button title="'+i("Dark")+'" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">'+i("Dark")+'</button></div></div><div style="display:flex;flex-direction:column;padding-bottom:3px;"><div style="padding-top:20px;padding-bottom:3px;">'+i("Scroll Button")+':</div><div style="display:flex;flex-flow:wrap;"><button class="cmd-scroll-preset" data-value="1" title="'+i("Apply")+'" type="button">1</button><button class="cmd-scroll-preset" data-value="2" title="'+i("Apply")+'" type="button">2</button><button class="cmd-scroll-preset" data-value="3" title="'+i("Apply")+'" type="button">3</button><button class="cmd-scroll-preset" data-value="4" title="'+i("Apply")+'" type="button">4</button><button class="cmd-scroll-preset" data-value="5" title="'+i("Apply")+'" type="button">5</button><button class="cmd-scroll-preset" data-value="6" title="'+i("Apply")+'" type="button">6</button><button class="cmd-scroll-preset" data-value="7" title="'+i("Apply")+'" type="button">7</button><button class="cmd-scroll-preset" data-value="8" title="'+i("Apply")+'" type="button">8</button><button class="cmd-scroll-preset" data-value="9" title="'+i("Apply")+'" type="button">9</button><button class="cmd-scroll-preset" data-value="10" title="'+i("Apply")+'" type="button">10</button><button class="cmd-scroll-preset" data-value="11" title="'+i("Apply")+'" type="button">11</button><button class="cmd-scroll-preset" data-value="12" title="'+i("Apply")+'" type="button">12</button><button class="cmd-scroll-preset" data-value="13" title="'+i("Apply")+'" type="button">13</button><button class="cmd-scroll-preset" data-value="14" title="'+i("Apply")+'" type="button">14</button><button class="cmd-scroll-preset" data-value="" title="'+i("Remove")+'" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button></div></div></div></div></div>',n+='<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;"><div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;"><span>'+i("Module Settings")+'</span><button class="is-modal-close" tabindex="-1" title="'+i("Close")+'"><svg class="is-icon-flex" style="width:30px;height:30px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button></div><iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe><input id="hidModuleCode" type="hidden" /><input id="hidModuleSettings" type="hidden" /><button class="input-ok classic-primary" style="width:100%;height:60px;position:absolute;left:0;bottom:0;">'+i("Ok")+"</button></div></div>",l.appendHtml(e,n);let o=e.querySelector(".is-modal.editsection");this.modalEditSection=o;const s=o.querySelector(".is-modal-close");s&&s.addEventListener("click",(()=>{this.close()})),new a(o);const r=o.querySelectorAll(".is-tabs a");r.forEach((t=>{t.addEventListener("click",(e=>{if(e.preventDefault(),l.hasClass(t,"active"))return;r.forEach((t=>{l.removeClass(t,"active")})),l.addClass(t,"active");let i=t.getAttribute("data-content");o.querySelectorAll(".is-tab-content").forEach((t=>{t.style.display="none"})),o.querySelector("#"+i).style.display="flex"}))}));const c=e.querySelector(".is-modal.delsectionconfirm");c.querySelector(".input-ok").addEventListener("click",(()=>{this.section.sectionDelete(),this.builder.hideModal(c),this.builder.onSelectChange&&this.builder.onSelectChange()}));o.querySelector(".cmd-section-up").addEventListener("click",(()=>{this.section.sectionMove("up")}));o.querySelector(".cmd-section-down").addEventListener("click",(()=>{this.section.sectionMove("down")}));o.querySelector(".cmd-section-top").addEventListener("click",(()=>{this.section.sectionMove("top")}));o.querySelector(".cmd-section-bottom").addEventListener("click",(()=>{this.section.sectionMove("bottom")}));o.querySelector(".cmd-section-duplicate").addEventListener("click",(()=>{this.section.sectionDuplicate(),this.builder.hideModal(this.modalEditSection)}));o.querySelectorAll(".cmd-section-anim-start").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.sectionAnimStart(e),o.querySelectorAll(".cmd-section-anim-start").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelectorAll(".cmd-section-anim-end").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.sectionAnimEnd(e),o.querySelectorAll(".cmd-section-anim-end").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelectorAll(".cmd-section-height").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.setSectionHeight(e),o.querySelectorAll(".cmd-section-height").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-spacing").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.boxSpacing(e),o.querySelectorAll(".cmd-box-spacing").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelectorAll(".cmd-betweenbox-spacing").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.spaceBetween(e),o.querySelectorAll(".cmd-betweenbox-spacing").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on")}))}));o.querySelectorAll(".cmd-section-stack").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value");const i=this.builder.activeSection;l.removeClass(i,"stack-top"),l.removeClass(i,"stack-middle"),l.removeClass(i,"stack-bottom"),"top"===e?l.addClass(i,"stack-top"):"middle"===e?l.addClass(i,"stack-middle"):"bottom"===e&&l.addClass(i,"stack-bottom"),o.querySelectorAll(".cmd-section-stack").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-section-scroll").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value");this.sectionScrollIcon(e),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-scroll-preset").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.section.sectionScrollPreset(e),o.querySelectorAll(".cmd-scroll-preset").forEach((t=>{l.removeClass(t,"on")})),l.addClass(t,"on"),""===e&&setTimeout((()=>{l.removeClass(t,"on")}),100)}))}));o.querySelector("#chkScrollIcon").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.sectionUseScroll(),this.builder.settings.onChange()}));const d=this.builder.editor.colorpicker(),u=o.querySelector(".input-section-bgcolor");u.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeSection;let e=u.style.backgroundColor;d.open((e=>{if(!t.classList.contains("box-space")){t.querySelectorAll(".is-overlay").forEach((t=>{t.style.backgroundColor="",t.style.backgroundImage=""}))}t.style.backgroundColor=e,t.style.backgroundImage="",u.style.backgroundColor=e,this.builder.onChange()}),e)})),o.querySelector(".input-section-gradient").addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeSection;this.builder.editor.gradientpicker().open(t,(()=>{if(!t.classList.contains("box-space")){t.querySelectorAll(".is-overlay").forEach((t=>{t.style.backgroundColor="",t.style.backgroundImage=""}))}this.builder.onChange()}))}));let p=o.querySelector(".input-section-id");p.addEventListener("change",(()=>{this.builder.editor.saveForUndo();const t=this.builder.activeSection,e=t.querySelector(".is-section-info");""!==p.value?(t.setAttribute("id",p.value),e.innerHTML=`<div>#${p.value}</div>`):(t.removeAttribute("id"),e.innerHTML=""),this.builder.onChange()}));let h=o.querySelector(".input-section-classes");h.addEventListener("change",(()=>{this.builder.editor.saveForUndo();const t=this.builder.activeSection;let e=[],i=t.getAttribute("data-class");i&&(e=i.split(" "));let n=[],o=h.value;n=o.split(" "),e.forEach((e=>{n.includes(e)||t.classList.remove(e)})),n.forEach((e=>{""!==e&&t.classList.add(e)})),t.setAttribute("data-class",o),""===t.getAttribute("data-class")&&t.removeAttribute("data-class"),this.builder.onChange()})),p.addEventListener("keyup",(()=>{const t=this.builder.activeSection,e=t.querySelector(".is-section-info");""!==p.value?(t.setAttribute("id",p.value),e.innerHTML=`<div>#${p.value}</div>`):(t.removeAttribute("id"),e.innerHTML="")}));const m=o.querySelector("#chkReverseBoxes");m.addEventListener("click",(()=>{if(!this.builder.activeSection)return;let t=o.querySelector(".div-target"),e=this.builder.editor.responsive.readTarget(t);this.section.reverseBoxes(m.checked,e)}));let b=o.querySelectorAll(".input-device");b.forEach((t=>{t.addEventListener("click",(()=>{let e=this.builder.activeSection;e&&(o.querySelectorAll(".input-device").forEach((t=>{t.classList.remove("on")})),t.classList.add("on"),this.realtimeVisibility(e))}))}));let g=o.querySelector(".input-visible"),v=o.querySelector(".input-hidden");g.addEventListener("click",(()=>{let t=this.builder.activeSection;if(!t)return;this.builder.editor.saveForUndo(),t.classList.remove("hideonmobile");let e=o.querySelector(".div-target"),i=this.builder.editor.responsive.readTarget(e);"xs"===i?t.classList.remove("xs-hidden"):"sm"===i?t.classList.remove("sm-hidden"):"md"===i?t.classList.remove("md-hidden"):""===i&&t.classList.remove("desktop-hidden"),g.classList.add("on"),v.classList.remove("on"),this.builder.onChange()})),v.addEventListener("click",(()=>{let t=this.builder.activeSection;if(!t)return;this.builder.editor.saveForUndo(),t.classList.remove("hideonmobile");let e=o.querySelector(".div-target"),i=this.builder.editor.responsive.readTarget(e);"xs"===i?t.classList.add("xs-hidden"):"sm"===i?t.classList.add("sm-hidden"):"md"===i?t.classList.add("md-hidden"):""===i&&t.classList.add("desktop-hidden"),g.classList.remove("on"),v.classList.add("on"),this.builder.onChange()})),b=o.querySelectorAll(".input-boxesperline"),b.forEach((t=>{t.addEventListener("click",(()=>{if(!this.builder.activeSection)return;let e=t.getAttribute("data-value"),i=o.querySelector(".div-target"),n=this.builder.editor.responsive.readTarget(i);this.section.setBoxesPerLine(e,n),o.querySelectorAll(".input-boxesperline").forEach((t=>{t.classList.remove("on")})),t.classList.add("on")}))}))}realtimeVisibility(t,e){if(e){const t=this.builder.builderStuff.querySelector(".is-modal.content-preview.active");if(t){this.modalEditSection.querySelectorAll(".input-device").forEach((t=>{t.classList.remove("on")})),t.classList.contains("is-screen-1920")||t.classList.contains("is-screen-1440")?this.modalEditSection.querySelector('.input-device[data-value=""]').classList.add("on"):t.classList.contains("is-screen-1024")?this.modalEditSection.querySelector('.input-device[data-value="md"]').classList.add("on"):t.classList.contains("is-screen-768")?this.modalEditSection.querySelector('.input-device[data-value="sm"]').classList.add("on"):t.classList.contains("is-screen-375")&&this.modalEditSection.querySelector('.input-device[data-value="xs"]').classList.add("on")}}let i=this.modalEditSection.querySelector(".div-target"),n=this.modalEditSection.querySelector(".div-visibility"),o=this.builder.editor.responsive.readTarget(i),s=this.builder.editor.responsive.getVisibility(t,o);this.builder.editor.responsive.showVisibility(n,s),this.modalEditSection.querySelectorAll(".input-boxesperline").forEach((t=>{t.classList.remove("on")}));let a=!1;"xs"===o?(a=t.classList.contains("xs-box-reverse"),t.classList.contains("xs-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("xs-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("xs-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("xs-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(375)):"sm"===o?(a=t.classList.contains("sm-box-reverse"),t.classList.contains("sm-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("sm-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("sm-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("sm-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(768)):"md"===o?(a=t.classList.contains("md-box-reverse"),t.classList.contains("md-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("md-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("md-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("md-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(1024)):(a=t.classList.contains("desktop-box-reverse"),t.classList.contains("desktop-boxes-1")?this.modalEditSection.querySelector('.input-boxesperline[data-value="1"]').classList.add("on"):t.classList.contains("desktop-boxes-2")?this.modalEditSection.querySelector('.input-boxesperline[data-value="2"]').classList.add("on"):t.classList.contains("desktop-boxes-3")?this.modalEditSection.querySelector('.input-boxesperline[data-value="3"]').classList.add("on"):t.classList.contains("desktop-boxes-4")?this.modalEditSection.querySelector('.input-boxesperline[data-value="4"]').classList.add("on"):this.modalEditSection.querySelector('.input-boxesperline[data-value=""]').classList.add("on"),e||this.builder.editor.livePreview.resizePreview(1920));this.modalEditSection.querySelector("#chkReverseBoxes").checked=a}read(){const t=this.builder.activeSection,e=this.modalEditSection;let i=e.querySelector(".input-section-id");i.value="";const n=t.getAttribute("id");n&&(i.value=n);let o=e.querySelector(".input-section-classes");o.value="";const s=t.getAttribute("data-class");o.value=s;let a=this.builder.activeSection.querySelectorAll(".is-bg-light");a.forEach((t=>{if(l.removeClass(t,"is-bg-light"),l.hasClass(t,"is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(255, 255, 255)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(255, 255, 255)")}})),a=this.builder.activeSection.querySelectorAll(".is-bg-dark"),a.forEach((t=>{if(l.removeClass(t,"is-bg-dark"),l.hasClass(t,"is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(17, 17, 17)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(17, 17, 17)")}})),a=this.builder.activeSection.querySelectorAll(".is-bg-grey"),a.forEach((t=>{if(l.removeClass(t,"is-bg-grey"),l.hasClass(t,"is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(238, 239, 240)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(238, 239, 240)")}}));const r=e.querySelector("#chkScrollIcon");t.querySelector(".is-arrow-down")?r.checked=!0:r.checked=!1;let c=e.querySelectorAll(".cmd-section-height");if(c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"is-section-100")&&l.addClass(e.querySelector('.cmd-section-height[data-value="100"]'),"on"),l.hasClass(t,"is-section-90")&&l.addClass(e.querySelector('.cmd-section-height[data-value="90"]'),"on"),l.hasClass(t,"is-section-85")&&l.addClass(e.querySelector('.cmd-section-height[data-value="85"]'),"on"),l.hasClass(t,"is-section-80")&&l.addClass(e.querySelector('.cmd-section-height[data-value="80"]'),"on"),l.hasClass(t,"is-section-75")&&l.addClass(e.querySelector('.cmd-section-height[data-value="75"]'),"on"),l.hasClass(t,"is-section-70")&&l.addClass(e.querySelector('.cmd-section-height[data-value="70"]'),"on"),l.hasClass(t,"is-section-60")&&l.addClass(e.querySelector('.cmd-section-height[data-value="60"]'),"on"),l.hasClass(t,"is-section-50")&&l.addClass(e.querySelector('.cmd-section-height[data-value="50"]'),"on"),l.hasClass(t,"is-section-40")&&l.addClass(e.querySelector('.cmd-section-height[data-value="40"]'),"on"),l.hasClass(t,"is-section-30")&&l.addClass(e.querySelector('.cmd-section-height[data-value="30"]'),"on"),l.hasClass(t,"is-section-25")&&l.addClass(e.querySelector('.cmd-section-height[data-value="25"]'),"on"),l.hasClass(t,"is-section-20")&&l.addClass(e.querySelector('.cmd-section-height[data-value="20"]'),"on"),l.hasClass(t,"is-section-15")&&l.addClass(e.querySelector('.cmd-section-height[data-value="15"]'),"on"),l.hasClass(t,"is-section-10")&&l.addClass(e.querySelector('.cmd-section-height[data-value="10"]'),"on"),l.hasClass(t,"is-section-auto")&&l.addClass(e.querySelector('.cmd-section-height[data-value="0"]'),"on"),c=e.querySelectorAll(".cmd-section-anim-start"),c.forEach((t=>{l.removeClass(t,"on")})),c=e.querySelectorAll(".cmd-section-anim-end"),c.forEach((t=>{l.removeClass(t,"on")})),t.hasAttribute("data-anim-start")){const i=t.getAttribute("data-anim-start");"zoom-in"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="zoom-in"]'),"on"),"zoom-out"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="zoom-out"]'),"on"),"slide-left"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="slide-left"]'),"on"),"slide-right"===i&&l.addClass(e.querySelector('.cmd-section-anim-start[data-value="slide-right"]'),"on")}if(t.hasAttribute("data-anim-end")){const i=t.getAttribute("data-anim-end");"zoom-in"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="zoom-in"]'),"on"),"zoom-out"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="zoom-out"]'),"on"),"slide-left"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="slide-left"]'),"on"),"slide-right"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="slide-right"]'),"on"),"overlap"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="overlap"]'),"on"),"slide-back"===i&&l.addClass(e.querySelector('.cmd-section-anim-end[data-value="slide-back"]'),"on")}c=e.querySelectorAll(".cmd-box-spacing");const d=this.modalEditSection.querySelector(".div-section-spacesettings");c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"box-space")?(l.hasClass(t,"box-space-sm")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="sm"]'),"on"):l.hasClass(t,"box-space-xxs")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="xxs"]'),"on"):l.hasClass(t,"box-space-m")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="m"]'),"on"):l.hasClass(t,"box-space-lg")?l.addClass(e.querySelector('.cmd-box-spacing[data-value="lg"]'),"on"):l.addClass(e.querySelector('.cmd-box-spacing[data-value="default"]'),"on"),d.style.display="flex"):d.style.display="none";const u=this.modalEditSection.querySelector(".div-multi-boxes");l.hasClass(t,"is-box")?u.style.display="none":u.style.display="block",c=e.querySelectorAll(".cmd-betweenbox-spacing"),c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"space-around")?l.addClass(e.querySelector('.cmd-betweenbox-spacing[data-value="no-space"]'),"on"):l.addClass(e.querySelector('.cmd-betweenbox-spacing[data-value="space"]'),"on"),c=e.querySelectorAll(".cmd-section-stack"),c.forEach((t=>{l.removeClass(t,"on")})),l.hasClass(t,"stack-top")?l.addClass(e.querySelector('.cmd-section-stack[data-value="top"]'),"on"):l.hasClass(t,"stack-middle")?l.addClass(e.querySelector('.cmd-section-stack[data-value="middle"]'),"on"):l.hasClass(t,"stack-bottom")&&l.addClass(e.querySelector('.cmd-section-stack[data-value="bottom"]'),"on"),c=e.querySelectorAll(".cmd-scroll-preset"),c.forEach((t=>{l.removeClass(t,"on")}));const p=t.querySelector(".is-arrow-down");if(p){let t=p.getAttribute("data-scroll-preset");if(t){let i=e.querySelector(`.cmd-scroll-preset[data-value="${t}"]`);l.addClass(i,"on")}}let h=e.querySelector(".input-section-bgcolor"),m=t.style.backgroundColor;h.style.backgroundColor=m||"",this.realtimeVisibility(t,!0);const b=e.querySelector(".div-boxesperline"),g=e.querySelector("#divReverseBoxes");t.querySelectorAll(".is-box").length>1?(g.style.display="flex",b.style.display="flex"):(g.style.display="none",b.style.display="none")}close(){this.modalEditSection.style.display=""}edit(){this.builder.wrapperEl.classList.add("hard-select"),this.builder.activeBox&&this.builder.activeBox.classList.add("box-select"),this.builder.activeSection&&this.builder.activeSection.classList.add("section-select");const t=this.modalEditSection;t.style.display="flex",t.focus(),this.read();const e=this.builder.activeSection;e.classList.add("section-active"),setTimeout((()=>{e.classList.remove("section-active")}),1e3)}sectionUseScroll(){const t=this.builder.activeSection;if(this.modalEditSection.querySelector("#chkScrollIcon").checked){t.querySelector(".is-section-tool").insertAdjacentHTML("beforebegin",'<div class="is-arrow-down bounce"><a href="#"><i class="icon ion-ios-arrow-thin-down"></i></a></div>');t.querySelector(".is-arrow-down a").addEventListener("click",(e=>(this.builder.scrollTo(t.nextElementSibling),e.preventDefault(),e.stopImmediatePropagation(),!1)))}else{const e=t.querySelector(".is-arrow-down");e.parentNode.removeChild(e)}}sectionScrollIcon(t){const e=this.builder.activeSection.querySelector(".is-arrow-down");"light"===t?l.addClass(e,"light"):l.removeClass(e,"light")}}const c=new t;class d{constructor(t){this.builder=t,this.box=this.builder.box,this.builderStuff=this.builder.builderStuff;const e=this.builderStuff;let n="";n+='<div class="is-modal editcustomcode" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;"><div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">'+i("Custom Code (Javascript Allowed)")+'</div><textarea id="txtBoxCustomCode" class="inptxt" style="background: #fff;position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;box-sizing:border-box;"></textarea><input id="hidBoxCustomCode" type="hidden" /><button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">'+i("Ok")+"</button></div></div>"+`\n <div class="is-modal is-modal-content editbox" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-bar is-draggable" draggable=""> \n ${i("Box Settings")}\n <button class="is-modal-close" tabindex="-1" title="${i("Close")}">\n <svg class="is-icon-flex" style="width:23px;height:23px;"><use xlink:href="#ion-ios-close-empty"></use></svg>\n </button>\n </div>\n <div style="padding:0;width:100%;">\n \n <div style="padding:0;width:100%;"><div class="is-tabs clearfix" style="padding-top:37px;" data-group="boxsettings"><a id="tabBoxGeneral" href="" data-content="divBoxGeneral" class="active">`+i("General")+'</a><a id="tabBoxContentContainer" href="" data-content="divBoxContentContainer">'+i("Content")+'</a><a id="tabBoxContentText" href="" data-content="divBoxContentText">'+i("Text")+'</a><a id="tabBoxImage" href="" data-content="divBoxImage">'+i("Image")+'</a><a id="tabBoxAnimate" href="" data-content="divBoxAnimate">'+i("Animation")+'</a><a id="tabBoxClick" href="" data-content="divBoxClick">'+i("On Click")+'</a></div><div id="divBoxGeneral" class="is-tab-content active" data-group="boxsettings" style="display:flex;padding-top:0"><div style="display:flex"><div id="divBoxSize" style="margin-right: 50px;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Box Size")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-smaller" style="width:40px;">-</button><button title="'+i("Increase")+'" class="cmd-box-larger" style="width:40px;border-left:none">+</button><br style="clear:both"></div></div><div id="divBoxMove"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Move")+':</div><div style="display:flex"><button title="'+i("Left")+'" class="cmd-box-left" style="width:40px;">←</button><button title="'+i("Right")+'" class="cmd-box-right" style="width:40px;border-left:none">→</button><br style="clear:both"></div></div></div>',n+='<div id="divContentSize"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Content Size")+': &nbsp;<span class="val-box-size" style="font-size:12px"></span></div><div style="display: flex;flex-direction: row;flex-wrap: wrap;"><input class="inp-box-size" type="text" style="display:none;width:80px;height:35px;text-align:center;font-size:12px;" /><button class="cmd-box-size" data-value="500" style="width:40px;border-left:none">500</button><button class="cmd-box-size" data-value="600" style="width:40px;border-left:none">600</button><button class="cmd-box-size" data-value="700" style="width:40px;border-left:none">700</button><button class="cmd-box-size" data-value="800" style="width:40px;border-top:none">800</button><button class="cmd-box-size" data-value="900" style="width:40px;border-top:none">900</button><button class="cmd-box-size" data-value="1000" style="width:40px;border-top:none;border-left:none">1000</button><button class="cmd-box-size" data-value="1100" style="width:40px;border-top:none;border-left:none">1100</button><button class="cmd-box-size" data-value="1200" style="width:40px;border-top:none;border-left:none">1200</button><button class="cmd-box-size" data-value="1300" style="width:40px;border-top:none;border-left:none">1300</button><button class="cmd-box-size" data-value="1400" style="width:40px;border-top:none;border-left:none">1400</button><button class="cmd-box-size" data-value="1500" style="width:40px;border-top:none;border-left:none">1500</button><button class="cmd-box-size" data-value="1600" style="width:40px;border-top:none;border-left:none">1600</button><button class="cmd-box-size" data-value="1800" style="width:40px;border-top:none;border-left:none">1800</button><button title="'+i("Clear")+'" class="cmd-box-size" data-value=""><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button><button title="'+i("Decrease")+'" class="cmd-box-size" data-value="-" style="width:40px;border-top:none;border-left:none">-</button><button title="'+i("Increase")+'"class="cmd-box-size" data-value="+" style="width:40px;border-top:none;border-left:none">+</button><br style="clear:both"></div></div>',n+='<div id="divBoxBackgroundColor"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Background Color")+':</div><div style="display:flex;"><button title="'+i("Background Color")+'" class="input-box-bgcolor is-btn-color" style="margin-right:15px"></button><button title="'+i("Gradient")+'" class="input-box-gradient classic" data-value="+">'+i("Gradient")+'</button></div></div><div id="divBoxBackgroundImage" style="padding-bottom:10px;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Background Image")+':</div><div style="height:auto"><div style="display:flex;align-items:flex-end;"><div class="box-bgimage-preview"></div><label class="label-box-bgimage-grayscale label-checkbox" for="chkBoxBgImageGrayscale" style="margin:0;margin-left:8px;margin-bottom:5px;"><input id="chkBoxBgImageGrayscale" class="chk-box-bgimage-grayscale" type="checkbox" /> '+i("Grayscale")+'</label></div><div style="display:flex;align-items: flex-end;"><button title="'+i("Image")+'" class="input-box-bgimage"><svg class="is-icon-flex"><use xlink:href="#ion-image"></use></svg><span>'+i("Image")+'</span></button><button title="'+i("Select")+'" class="input-select">'+this.builder.selectIcon+'</button><button title="'+i("Remove")+'" class="input-box-bgremove"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#icon-clean"></use></svg></button><button title="'+i("Adjust")+'" class="input-box-bgimageadjust"><svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg></button></div></div></div><div id="divBoxPickPhoto" class="is-settings" style="padding-top:10px"><button class="cmd-box-pickphoto" data-value="" style="width:100%"><svg class="is-icon-flex" style=""><use xlink:href="#ion-image"></use></svg></button></div><div id="divBoxStackBg" style="display:flex;padding-top:10px;"><div style="display:flex;align-items: center;margin-right:30px"><label for="chkStackBg" style="margin:0;display:flex;align-items: center;"><input id="chkStackBg" type="checkbox" /> <span style="margin-left:3px">'+i("Stack Background on Mobile")+'</span></label></div></div><div style="display:flex;padding-top:5px;"><div style="display:flex;align-items: center;margin-right:30px"><label for="chkAutofitContent" style="margin:0;display:flex;align-items: center;"><input id="chkAutofitContent" type="checkbox" /> <span style="margin-left:3px">'+i("Autofit on Mobile")+'</span></label></div><div style="display:flex;align-items: center;"><label for="inpBoxMinHeight" style="margin:0 4px 0 0;">'+i("Min Height")+':</label><select id="inpBoxMinHeight"><option value="">'+i("Not Set")+'</option><option value="20">20%</option><option value="25">25%</option><option value="30">30%</option><option value="40">40%</option><option value="50">50%</option><option value="60">60%</option><option value="70">70%</option><option value="75">75%</option><option value="80">80%</option><option value="90">90%</option><option value="100">100%</option></select></div></div><div style="display:flex;justify-content:flex-end;"><button title="'+i("Add Text")+'" class="cmd-box-addtext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>'+i("Add Text")+'</span></button><button title="'+i("Remove Text")+'" class="cmd-box-removetext" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>'+i("Remove Text")+'</span></button><button title="'+i("Add Code")+'" class="cmd-box-addcode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-android-add"></use></svg> <span>'+i("Add Code")+'</span></button><button title="'+i("Remove Code")+'" class="cmd-box-removecode" style="display:none;margin-top:20px;"><svg class="is-icon-flex" style="width:9px;height:9px;"><use xlink:href="#icon-clean"></use></svg> <span>'+i("Remove Code")+'</span></button></div><p id="divNoBoxSettings" style="text-align: center;display:none;">'+i("This box has no available settings.")+"</p></div>",n+='<div id="divBoxClick" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><label for="inpBoxLinkSource" style="display:block;padding-top:20px;">'+i("Open")+':</label><div class="image-src" style="display:flex"><input id="inpBoxLinkSource" class="input-src" type="text" style="height:38px"><button title="'+i("Select")+'" class="input-select" style="flex:none;width:40px;height:38px;">'+this.builder.selectIcon+"</button>"+`<button title="${i(this.builder.otherSelectCaption)}" class="input-select-other" style="display:none;flex:none;width:40px;height:38px;">\n ${this.builder.otherSelectIcon}\n </button><div class="image-larger5 is-btn classic" style="position: relative; flex: 0 0 auto; width: 40px; height: 38px; box-shadow: rgba(0, 0, 0, 0.32) 0px 3px 6px -6px;"><form class="form-upload-larger" target="frameTargetBoxLinkUpload" method="post" action="`+this.builder.largerImageHandler+'" enctype="multipart/form-data" style="position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;"><input id="hidRefId5_box" name="hidRefId" type="hidden" value=""><svg class="is-icon-flex" style="width:18px;height:18px;"><use xlink:href="#ion-ios-cloud-upload-outline"></use></svg><input onclick="blur()" title="'+i("Select")+'" id="fileImage5" name="fileImage" type="file" accept="image/*,video/mp4" style="position:absolute;top:-30px;left:0;width:100%;height:80px;opacity: 0;cursor: pointer;"></form><iframe id="frameTargetBoxLinkUpload" tabindex="-1" name="frameTargetBoxLinkUpload" src="about:blank" style="width:1px;height:1px;position:absolute;top:0;right:-100000px"></iframe></div></div><div style="padding-top:20px"><button class="cmd-box-testclick">'+i("Test")+"</button></div></div>",n+='<div id="divBoxContentText" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Text Style")+':</div><div style="display:flex"><button title="'+i("Light")+'" class="cmd-box-textcolor" data-value="light">'+i("Light")+'</button><button title="'+i("Dark")+'" class="cmd-box-textcolor" data-value="dark" style="border-left:none;">'+i("Dark")+'</button><button title="'+i("Not Set")+'" class="cmd-box-textcolor" data-value="" style="border-left:none;">'+i("Not Set")+"</button></div></div>",n+='<div id="divContainerTransparency" style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Transparency")+':</div><div style="display:flex"><button title="'+i("Increase")+'" class="cmd-box-textopacity" data-value="+" style="width:40px"> + </button><button title="'+i("Decrease")+'" class="cmd-box-textopacity" data-value="-" style="width:40px;border-left:none;"> - </button><button title="'+i("Not Set")+'" class="cmd-box-textopacity" data-value="" style="border-left:none;">'+i("Not Set")+'</button></div></div><div style="padding-top:27px;">'+i("Default Text Formatting")+':</div><div id="divContainerTextAlign" style="display:flex;flex-direction: column;"><div style="padding-top:15px;padding-bottom: 3px;">'+i("Alignment")+':</div><div style="display:flex"><button title="'+i("Align Left")+'" class="cmd-box-textalign" data-value="left" style="width:40px"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button><button title="'+i("Align Center")+'" class="cmd-box-textalign" data-value="center" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button><button title="'+i("Align Right")+'" class="cmd-box-textalign" data-value="right" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button><button title="'+i("Align Full")+'" class="cmd-box-textalign" data-value="justify" style="width:40px;border-left:none;"><svg class="is-icon-flex" style="fill:rgba(0, 0, 0, 0.8);width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button><button title="'+i("Not Set")+'" class="cmd-box-textalign" data-value="" style="border-left:none;">'+i("Not Set")+'</button></div></div><div id="divContainerParagraphSize" style="display:flex;flex-direction: column;"><div style="padding-top:15px;padding-bottom: 3px;">Paragraph Size:</div><div style="display:flex"><button title="'+i("16")+'" class="cmd-box-parasize" data-value="16" style="width:40px">16</button><button title="'+i("17")+'" class="cmd-box-parasize" data-value="17" style="width:40px">17</button><button title="'+i("18")+'" class="cmd-box-parasize" data-value="18" style="width:40px">18</button><button title="'+i("19")+'" class="cmd-box-parasize" data-value="19" style="width:40px">19</button><button title="'+i("20")+'" class="cmd-box-parasize" data-value="20" style="width:40px">20</button><button title="'+i("21")+'" class="cmd-box-parasize" data-value="21" style="width:40px">21</button><button title="'+i("Not Set")+'" class="cmd-box-parasize" data-value="" style="">'+i("Not Set")+'</button></div></div><div style="padding-top:20px;"><label for="chkOptimizeTextSize" style="margin:0;"><input id="chkOptimizeTextSize" type="checkbox" /> '+i("Auto adjust text size on large screen.")+'</label></div><div id="divContainerLineHeight" style="display:flex;flex-direction: column;"><div style="padding-top:15px;padding-bottom: 3px;">Line Height:</div><div style="display:flex;flex-flow: wrap;width: 290px;"><button title="'+i("1")+'" class="cmd-box-lineheight" data-value="1" style="width:40px">1</button><button title="'+i("1.1")+'" class="cmd-box-lineheight" data-value="1.1" style="width:40px">1.1</button><button title="'+i("1.2")+'" class="cmd-box-lineheight" data-value="1.2" style="width:40px">1.2</button><button title="'+i("1.3")+'" class="cmd-box-lineheight" data-value="1.3" style="width:40px">1.3</button><button title="'+i("1.4")+'" class="cmd-box-lineheight" data-value="1.4" style="width:40px">1.4</button><button title="'+i("1.5")+'" class="cmd-box-lineheight" data-value="1.5" style="width:40px">1.5</button><button title="'+i("1.6")+'" class="cmd-box-lineheight" data-value="1.6" style="width:40px">1.6</button><button title="'+i("1.7")+'" class="cmd-box-lineheight" data-value="1.7" style="width:40px">1.7</button><button title="'+i("1.8")+'" class="cmd-box-lineheight" data-value="1.8" style="width:40px">1.8</button><button title="'+i("1.9")+'" class="cmd-box-lineheight" data-value="1.9" style="width:40px">1.9</button><button title="'+i("2")+'" class="cmd-box-lineheight" data-value="2" style="width:40px">2</button><button title="'+i("Not Set")+'" class="cmd-box-lineheight" data-value="" style="">'+i("Not Set")+'</button><br style="clear:both"></div></div>',n+=(this.builder.settings.enableContentStyle?'<div style="padding-top:10px;display:flex;flex-direction: column;"><div style="display:none"><button title="'+i("Typography Style")+'" class="cmd-box-typography" data-value="+"> '+i("Typography Style")+' </button><br style="clear:both"></div></div>':"")+'</div><div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="padding-top:10px;"><label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> '+i("Parallax")+'</label></div><div style="padding-top:10px;"><label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> '+i("Fade")+"</label></div>",n+='<div style="display:flex;flex-direction: row;"><div style="display:flex;flex-direction: column;margin-right:20px;"><div style="padding-top:13px;padding-bottom: 3px;">'+i("Position")+':</div><div style="display:flex"><button title="'+i("Top Left")+'" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">&#8598;</button><button title="'+i("Top Center")+'" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">&#8593;</button><button title="'+i("Top Right")+'" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">&#8599;</button></div><div style="display:flex"><button title="'+i("Middle Left")+'" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">&#8592;</button><button title="'+i("Middle Center")+'" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">&#9737;</button><button title="'+i("Middle Right")+'" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">&#8594;</button></div><div style="display:flex"><button title="'+i("Bottom Left")+'" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">&#8601;</button><button title="'+i("Bottom Center")+'" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">&#8595;</button><button title="'+i("Bottom Right")+'" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">&#8600;</button></div></div><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 1px;">'+i("Height")+':</div><div style="display: flex;flex-direction: row;flex-wrap: wrap;"><button title="'+i("Auto")+'" class="cmd-content-height" data-value="" style="width:60px">Auto</button><button title="'+i("Full")+'" class="cmd-content-height" data-value="100" style="width:40px">Full</button></div><div class="div-content-justify"><div style="padding-top:10px;padding-bottom: 1px;">'+i("Justify")+':</div><div style="display: flex;flex-direction: row;flex-wrap: wrap;"><button title="'+i("Top")+'" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button><button title="'+i("Bottom")+'" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button><button title="'+i("Space Between")+'" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button></div></div></div></div>',n+='<div style="display:flex;flex-direction: row;"><div style="display:flex;flex-direction: column;margin-right:25px"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Vertical Adjustment")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button><button title="'+i("Increase")+'" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button><button title="'+i("Not Set")+'" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">'+i("Not Set")+'</button></div></div><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Horizontal Adjustment")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button><button title="'+i("Increase")+'" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button><button title="'+i("Not Set")+'" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">'+i("Not Set")+'</button></div></div></div><div style="display:none;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Content Spacing")+':</div><div style="display:flex"><button title="0" class="cmd-box-content-spacing on" data-value="0" style="width:40px;">0</button><button title="10" class="cmd-box-content-spacing" data-value="10" style="width:40px;border-left:none;">10</button><button title="20" class="cmd-box-content-spacing" data-value="20" style="width:40px;border-left:none;">20</button><button title="30" class="cmd-box-content-spacing" data-value="30" style="width:40px;border-left:none;">30</button><button title="40" class="cmd-box-content-spacing" data-value="40" style="width:40px;border-left:none;">40</button><button title="50" class="cmd-box-content-spacing" data-value="50" style="width:40px;border-left:none;">50</button><button title="60" class="cmd-box-content-spacing" data-value="60" style="width:40px;border-left:none;">60</button><button title="80" class="cmd-box-content-spacing" data-value="80" style="width:40px;border-left:none;">80</button><button title="'+i("Not Set")+'" class="cmd-box-content-spacing" data-value="">'+i("Not Set")+'</button></div></div><div style="padding-top:20px;padding-bottom:0;">'+i("Content Spacing")+':</div><div style="display:flex;flex-direction: column;"><div style="padding-top:10px;padding-bottom: 3px;">'+i("Top")+':</div><div style="display:flex"><button title="0" class="cmd-box-content-topspacing on" data-value="0" style="width:40px">0</button><button title="10" class="cmd-box-content-topspacing" data-value="10" style="width:40px">10</button><button title="20" class="cmd-box-content-topspacing" data-value="20" style="width:40px">20</button><button title="30" class="cmd-box-content-topspacing" data-value="30" style="width:40px">30</button><button title="40" class="cmd-box-content-topspacing" data-value="40" style="width:40px">40</button><button title="50" class="cmd-box-content-topspacing" data-value="50" style="width:40px">50</button><button title="60" class="cmd-box-content-topspacing" data-value="60" style="width:40px">60</button><button title="'+i("Not Set")+'" class="cmd-box-content-topspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button></div></div><div style="display:flex;flex-direction: column;"><div style="padding-top:10px;padding-bottom: 3px;">'+i("Bottom")+':</div><div style="display:flex"><button title="0" class="cmd-box-content-bottomspacing on" data-value="0" style="width:40px;">0</button><button title="10" class="cmd-box-content-bottomspacing" data-value="10" style="width:40px">10</button><button title="20" class="cmd-box-content-bottomspacing" data-value="20" style="width:40px">20</button><button title="30" class="cmd-box-content-bottomspacing" data-value="30" style="width:40px">30</button><button title="40" class="cmd-box-content-bottomspacing" data-value="40" style="width:40px">40</button><button title="50" class="cmd-box-content-bottomspacing" data-value="50" style="width:40px">50</button><button title="60" class="cmd-box-content-bottomspacing" data-value="60" style="width:40px">60</button><button title="'+i("Not Set")+'" class="cmd-box-content-bottomspacing" data-value="" style="width:40px"><svg class="is-icon-flex" style="width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button></div></div></div>',n+='<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="padding-top:20px;"><label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> '+i("Ken Burns Effect")+'</label></div><div style="padding-top:10px;"><label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> '+i("Parallax")+" & "+i("Scale")+'</label></div><div style="padding-top:10px;"><label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> '+i("Parallax")+" "+i("(visible on preview)")+'</label></div><div style="padding-top:10px;"><label for="chkZoomOnHover" style="margin:0;"><input id="chkZoomOnHover" type="checkbox" /> '+i("Zoom on Hover")+"</label></div>",n+='<div style="padding-top:20px;padding-bottom: 3px;">'+i("Overlay Color")+':</div><div style="display:flex;"><button title="'+i("Overlay Color")+'" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button></div><div style="display:flex;flex-direction: column;"><div style="padding-top:20px;padding-bottom: 3px;">'+i("Overlay Transparency")+':</div><div style="display:flex"><button title="'+i("Decrease")+'" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button><button title="'+i("Increase")+'" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button><button title="'+i("None")+'" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">'+i("None")+'</button></div></div></div><div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0"><div style="display:flex;flex-direction: column;"><select class="cmd-box-animate"><option value="">'+i("None")+'</option><option value="is-pulse">pulse</option><option value="is-bounceIn">bounceIn</option><option value="is-fadeIn">fadeIn</option><option value="is-fadeInDown">fadeInDown</option><option value="is-fadeInLeft">fadeInLeft</option><option value="is-fadeInRight">fadeInRight</option><option value="is-fadeInUp">fadeInUp</option><option value="is-flipInX">flipInX</option><option value="is-flipInY">flipInY</option><option value="is-slideInUp">slideInUp</option><option value="is-slideInDown">slideInDown</option><option value="is-slideInLeft">slideInLeft</option><option value="is-slideInRight">slideInRight</option><option value="is-zoomIn">zoomIn</option></select><label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> '+i("Once")+"</label></div>",n+='<div><label style="padding-top:20px;">'+i("Delay")+': <select class="cmd-box-animatedelay" style="margin-top:3px;"><option value="">'+i("None")+'</option><option value="delay-0ms">0s</option><option value="delay-100ms">100ms</option><option value="delay-200ms">200ms</option><option value="delay-300ms">300ms</option><option value="delay-400ms">400ms</option><option value="delay-500ms">500ms</option><option value="delay-600ms">600ms</option><option value="delay-700ms">700ms</option><option value="delay-800ms">800ms</option><option value="delay-900ms">900ms</option><option value="delay-1000ms">1000ms</option><option value="delay-1100ms">1100ms</option><option value="delay-1200ms">1200ms</option><option value="delay-1300ms">1300ms</option><option value="delay-1400ms">1400ms</option><option value="delay-1500ms">1500ms</option><option value="delay-1600ms">1600ms</option><option value="delay-1700ms">1700ms</option><option value="delay-1800ms">1800ms</option><option value="delay-1900ms">1900ms</option><option value="delay-2000ms">2000ms</option><option value="delay-2100ms">2100ms</option><option value="delay-2200ms">2200ms</option><option value="delay-2300ms">2300ms</option><option value="delay-2400ms">2400ms</option><option value="delay-2500ms">2500ms</option><option value="delay-2600ms">2600ms</option><option value="delay-2700ms">2700ms</option><option value="delay-2800ms">2800ms</option><option value="delay-2900ms">2900ms</option><option value="delay-3000ms">3000ms</option></select></label></div><div style="padding-top:20px"><button class="cmd-box-animate-test" style="width:100%">'+i("Test")+'</button></div></div></div></div><div class="is-modal pickphoto" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true"><div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;"><div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">'+i("Photos")+'</div><iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe></div></div>',c.appendHtml(e,n);const o=e.querySelector(".is-modal.editbox");this.modalEditBox=o;const s=e.querySelector(".is-modal.editcustomcode"),l=e.querySelector(".is-modal.editmodule"),r=o.querySelector("#divBoxClick");this.divBoxClick=r;const d=o.querySelector("#divBoxGeneral");this.divBoxGeneral=d;const u=o.querySelector(".is-modal-close");u&&u.addEventListener("click",(()=>{this.close()})),new a(o);c.appendHtml(o,'<div class="feature-master-style"></div>');const p=o.querySelector(".feature-master-style");if("none"===window.getComputedStyle(p,null).getPropertyValue("display"));else{const t=o.querySelector("#divContainerParagraphSize"),e=o.querySelector("#divContainerLineHeight");t.style.display="none",e.style.display="none"}p.parentNode.removeChild(p);const h=o.querySelectorAll(".is-tabs a");h.forEach((t=>{t.addEventListener("click",(e=>{if(e.preventDefault(),c.hasClass(t,"active"))return;h.forEach((t=>{c.removeClass(t,"active")})),c.addClass(t,"active");let i=t.getAttribute("data-content");o.querySelectorAll(".is-tab-content").forEach((t=>{t.style.display="none"})),o.querySelector("#"+i).style.display="block"}))})),o.querySelector("#tabBoxGeneral").click();o.querySelector(".cmd-box-smaller").addEventListener("click",(()=>{this.box.boxWidthSmaller()}));o.querySelector(".cmd-box-larger").addEventListener("click",(()=>{this.box.boxWidthLarger()}));o.querySelector(".cmd-box-left").addEventListener("click",(()=>{this.box.boxMoveLeft()}));o.querySelector(".cmd-box-right").addEventListener("click",(()=>{this.box.boxMoveRight()}));o.querySelectorAll(".cmd-box-textcolor").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxTextColor(e);o.querySelectorAll(".cmd-box-textcolor").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-textalign").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxTextAlign(e);o.querySelectorAll(".cmd-box-textalign").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-parasize").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxParagraphSize(e);o.querySelectorAll(".cmd-box-parasize").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-lineheight").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.boxLineHeight(e);o.querySelectorAll(".cmd-box-lineheight").forEach((t=>{c.removeClass(t,"on")})),""!==e&&c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-textopacity").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.setContentOpacity(e)}))}));o.querySelectorAll(".cmd-box-typography").forEach((t=>{t.addEventListener("click",(()=>{setTimeout((()=>{this.builder.hideModal(o),e.querySelector('.is-sidebar > button[data-command="typography"]').click();c.appendHtml(e,'<div class="is-sidebar-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.000001);z-index: 1000;"></div>');const t=e.querySelector(".is-sidebar-overlay");t&&t.addEventListener("click",(()=>{const t=document.querySelector(".is-sidebar-overlay");t&&(t.remove(),document.body.style.overflowY=""),document.querySelectorAll(".is-sidebar-button.active").forEach((t=>{c.removeClass(t,"active")})),document.querySelectorAll(".is-sidebar-content.active").forEach((t=>{c.removeClass(t,"active")}))})),e.querySelector('.is-sidebar > button[data-command="typography"]').setAttribute("data-applyto","box"),e.querySelector(".typo-target-default").style.display="none",e.querySelector(".typo-target-box").style.display="flex"}),10)}))}));o.querySelectorAll(".cmd-box-size").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.setContentWidth(e,(t=>{o.querySelector(".inp-box-size").value=t,o.querySelector(".val-box-size").innerHTML=t}))}))}));const m=o.querySelector(".inp-box-size");m.addEventListener("input",(()=>{this.builder.editor.saveForUndo();const t=[];let e=300;for(;e<=2700;)t.push(e),e+=20;let i=this.builder.activeBox.querySelector(".is-container");i.classList.forEach((t=>{-1!==t.indexOf("is-content-")&&"is-content-left"!==t&&"is-content-right"!==t&&c.removeClass(i,t)}));let n=m.value;if(!isNaN(n)&&n>=300&&n<=2700){i.style.maxWidth=n+"px";let e=parseInt(window.getComputedStyle(i,null).getPropertyValue("max-width"));for(let i=0;i<=121;i++){let n=t[i];if(n>e){e=n;break}}n=e,n<=300&&(n=300),n>=2700&&(n=2700),c.addClass(i,"is-content-"+n)}this.builder.settings.onChange()}));o.querySelectorAll(".cmd-content-justify").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.justifyContent(e),o.querySelectorAll(".cmd-content-justify").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on")}))}));const b=o.querySelectorAll(".cmd-content-height"),g=o.querySelector(".div-content-justify");b.forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");if(this.box.setContentHeight(e),""===e&&(g.style.display="none"),"100"===e){g.style.display="block",o.querySelectorAll(".cmd-content-justify").forEach((t=>{c.removeClass(t,"on")})),c.addClass(o.querySelector('.cmd-content-justify[data-value="space-between"]'),"on")}o.querySelectorAll(".cmd-content-height").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-content-spacing").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value"),i=this.builder.activeBox.querySelector(".is-container");i.classList.remove("content-py-0"),i.classList.remove("content-py-10"),i.classList.remove("content-py-20"),i.classList.remove("content-py-30"),i.classList.remove("content-py-40"),i.classList.remove("content-py-50"),i.classList.remove("content-py-60"),i.classList.remove("content-py-70"),i.classList.remove("content-py-80"),""!==e&&i.classList.add(`content-py-${e}`),o.querySelectorAll(".cmd-box-content-spacing").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-box-content-topspacing").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value"),i=this.builder.activeBox.querySelector(".is-container");i.classList.remove("content-py-0"),i.classList.remove("content-py-10"),i.classList.remove("content-py-20"),i.classList.remove("content-py-30"),i.classList.remove("content-py-40"),i.classList.remove("content-py-50"),i.classList.remove("content-py-60"),i.classList.remove("content-py-70"),i.classList.remove("content-py-80"),i.classList.remove("content-pt-0"),i.classList.remove("content-pt-10"),i.classList.remove("content-pt-20"),i.classList.remove("content-pt-30"),i.classList.remove("content-pt-40"),i.classList.remove("content-pt-50"),i.classList.remove("content-pt-60"),i.classList.remove("content-pt-70"),i.classList.remove("content-pt-80"),""!==e&&i.classList.add(`content-pt-${e}`),o.querySelectorAll(".cmd-box-content-topspacing").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-box-content-bottomspacing").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value"),i=this.builder.activeBox.querySelector(".is-container");i.classList.remove("content-py-0"),i.classList.remove("content-py-10"),i.classList.remove("content-py-20"),i.classList.remove("content-py-30"),i.classList.remove("content-py-40"),i.classList.remove("content-py-50"),i.classList.remove("content-py-60"),i.classList.remove("content-py-70"),i.classList.remove("content-py-80"),i.classList.remove("content-pb-0"),i.classList.remove("content-pb-10"),i.classList.remove("content-pb-20"),i.classList.remove("content-pb-30"),i.classList.remove("content-pb-40"),i.classList.remove("content-pb-50"),i.classList.remove("content-pb-60"),i.classList.remove("content-pb-70"),i.classList.remove("content-pb-80"),""!==e&&i.classList.add(`content-pb-${e}`),o.querySelectorAll(".cmd-box-content-bottomspacing").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on"),this.builder.settings.onChange()}))}));o.querySelectorAll(".cmd-box-content-pos").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.moveContent(e),o.querySelectorAll(".cmd-box-content-pos").forEach((t=>{c.removeClass(t,"on")})),c.addClass(t,"on")}))}));o.querySelectorAll(".cmd-box-content-edge-x").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.adjustContentX(e)}))}));o.querySelectorAll(".cmd-box-content-edge-y").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-value");this.box.adjustContentY(e)}))}));o.querySelector("#chkOptimizeTextSize").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.boxOptimizeTextSize(),this.builder.settings.onChange()}));o.querySelector("#chkParallaxContent").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.boxContainerAnim(),this.builder.settings.onChange()}));o.querySelector("#chkFadeContent").addEventListener("click",(()=>{this.builder.editor.saveForUndo(),this.boxContainerAnim(),this.builder.settings.onChange()}));const v=o.querySelector("#chkAutofitContent");v.addEventListener("click",(()=>{let t=v.checked;this.box.setAutoFit(t)}));const f=o.querySelector("#inpBoxMinHeight");f.addEventListener("change",(()=>{let t=f.value;this.box.setMinHeight(t)}));o.querySelector(".cmd-box-pickphoto").addEventListener("click",(()=>{const t=o.querySelector(".is-modal.pickphoto");this.builder.showModal(t);const e=this.builder.settings.photoselect;t.querySelector("iframe").setAttribute("src",e)}));const y=o.querySelector("#chkAnimateBg");y.addEventListener("click",(()=>{y.checked?this.box.boxBgAnimate(!0):this.box.boxBgAnimate(!1)}));const x=o.querySelector("#chkParallaxBg");x.addEventListener("click",(()=>{x.checked?this.box.boxBgParallaxScale(!0):this.box.boxBgParallaxScale(!1)}));const _=o.querySelector("#chkParallaxBg2");_.addEventListener("click",(()=>{_.checked?this.box.boxBgParallax(!0):this.box.boxBgParallax(!1)}));const w=o.querySelector("#chkZoomOnHover");w.addEventListener("click",(()=>{w.checked?this.box.boxBgZoomHover(!0):this.box.boxBgZoomHover(!1)}));o.querySelectorAll(".cmd-box-overlayopacity").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=t.getAttribute("data-value");this.box.boxOverlayOpacity(e),this.builder.settings.onChange()}))}));const S=o.querySelector(".cmd-box-animate");S.addEventListener("change",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(),c.removeClass(t,"is-animated"),c.removeClass(t,"is-pulse"),c.removeClass(t,"is-bounceIn"),c.removeClass(t,"is-fadeIn"),c.removeClass(t,"is-fadeInDown"),c.removeClass(t,"is-fadeInLeft"),c.removeClass(t,"is-fadeInRight"),c.removeClass(t,"is-fadeInUp"),c.removeClass(t,"is-flipInX"),c.removeClass(t,"is-flipInY"),c.removeClass(t,"is-slideInUp"),c.removeClass(t,"is-slideInDown"),c.removeClass(t,"is-slideInLeft"),c.removeClass(t,"is-slideInRight"),c.removeClass(t,"is-zoomIn"),c.removeClass(t,"animated"),c.removeClass(t,"pulse"),c.removeClass(t,"bounceIn"),c.removeClass(t,"fadeIn"),c.removeClass(t,"fadeInDown"),c.removeClass(t,"fadeInLeft"),c.removeClass(t,"fadeInRight"),c.removeClass(t,"fadeInUp"),c.removeClass(t,"flipInX"),c.removeClass(t,"flipInY"),c.removeClass(t,"slideInUp"),c.removeClass(t,"slideInDown"),c.removeClass(t,"slideInLeft"),c.removeClass(t,"slideInRight"),c.removeClass(t,"zoomIn"),t.removeAttribute("data-scroll"),c.removeClass(t,"is-inview"),""!==S.value?(c.addClass(t,"is-animated"),c.addClass(t,S.value),t.style.transition="none",t.style.opacity=0,setTimeout((()=>{t.style.transition="",t.style.opacity="",t.setAttribute("data-scroll",""),this.builder.settings.onChange(),this.builder.settings.onRender()}),30)):(this.builder.settings.onChange(),this.builder.settings.onRender())}));o.querySelector(".cmd-box-animate-test").addEventListener("click",(()=>{const t=this.builder.activeBox;c.removeClass(t,"animated"),c.removeClass(t,"pulse"),c.removeClass(t,"bounceIn"),c.removeClass(t,"fadeIn"),c.removeClass(t,"fadeInDown"),c.removeClass(t,"fadeInLeft"),c.removeClass(t,"fadeInRight"),c.removeClass(t,"fadeInUp"),c.removeClass(t,"flipInX"),c.removeClass(t,"flipInY"),c.removeClass(t,"slideInUp"),c.removeClass(t,"slideInDown"),c.removeClass(t,"slideInLeft"),c.removeClass(t,"slideInRight"),c.removeClass(t,"zoomIn"),t.removeAttribute("data-scroll"),c.removeClass(t,"is-inview"),""!==S.value?(c.addClass(t,"is-animated"),c.addClass(t,S.value),t.style.transition="none",t.style.opacity=0,setTimeout((()=>{t.style.transition="",t.style.opacity="",t.setAttribute("data-scroll",""),this.builder.settings.onChange(),this.builder.settings.onRender()}),30)):(this.builder.settings.onChange(),this.builder.settings.onRender())}));const k=o.querySelector("#chkAnimOnce");k.addEventListener("click",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(),k.checked?c.addClass(t,"once"):c.removeClass(t,"once"),this.builder.settings.onChange(),this.builder.settings.onRender()}));const C=o.querySelector(".cmd-box-animatedelay");C.addEventListener("change",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(),c.removeClass(t,"delay-0ms"),c.removeClass(t,"delay-100ms"),c.removeClass(t,"delay-200ms"),c.removeClass(t,"delay-300ms"),c.removeClass(t,"delay-400ms"),c.removeClass(t,"delay-500ms"),c.removeClass(t,"delay-600ms"),c.removeClass(t,"delay-700ms"),c.removeClass(t,"delay-800ms"),c.removeClass(t,"delay-900ms"),c.removeClass(t,"delay-1000ms"),c.removeClass(t,"delay-1100ms"),c.removeClass(t,"delay-1200ms"),c.removeClass(t,"delay-1300ms"),c.removeClass(t,"delay-1400ms"),c.removeClass(t,"delay-1500ms"),c.removeClass(t,"delay-1600ms"),c.removeClass(t,"delay-1700ms"),c.removeClass(t,"delay-1800ms"),c.removeClass(t,"delay-1900ms"),c.removeClass(t,"delay-2000ms"),c.removeClass(t,"delay-2100ms"),c.removeClass(t,"delay-2200ms"),c.removeClass(t,"delay-2300ms"),c.removeClass(t,"delay-2400ms"),c.removeClass(t,"delay-2500ms"),c.removeClass(t,"delay-2600ms"),c.removeClass(t,"delay-2700ms"),c.removeClass(t,"delay-2800ms"),c.removeClass(t,"delay-2900ms"),c.removeClass(t,"delay-3000ms"),""!==C.value&&c.addClass(t,C.value),this.builder.settings.onChange()}));const L=o.querySelector(".input-box-bgimage");L&&L.addEventListener("click",(()=>{const t=this.builder.activeBox.querySelector(".is-overlay-bg");let e="";t&&t.style.backgroundImage&&-1!==t.style.backgroundImage.indexOf("url(")&&(e=t.style.backgroundImage.slice(4,-1).replace(/["']/g,"")),this.builder.editor.openImagePicker(e,(t=>{this.boxImage(t);const e=this.builder.activeBox,i=e.querySelector(".is-overlay"),n=e.querySelector(".is-overlay-bg");n.style.filter="",i.style.filter="";o.querySelector(".chk-box-bgimage-grayscale").checked=!1,n.style.backgroundPosition="50% 60%",n.removeAttribute("data-scale"),n.removeAttribute("data-x"),n.removeAttribute("data-y"),n.style.top="",n.style.bottom="",n.style.left="",n.style.right="",n.style.width="",n.style.height="",n.removeAttribute("data-bg-xs"),n.removeAttribute("data-bg-sm"),n.removeAttribute("data-bg-md")}),L)}));const A=o.querySelector(".input-box-bgimageadjust");A&&A.addEventListener("click",(()=>{const t=this.builder.activeBox.querySelector(".is-overlay-bg");this.builder.editor.openImageAdjust(t,A,!0)}));const E=o.querySelector(".chk-box-bgimage-grayscale");E.addEventListener("click",(()=>{const t=this.builder.activeBox,e=t.querySelector(".is-overlay"),i=t.querySelector(".is-overlay-bg");E.checked?(i.style.filter="grayscale(1)",e.style.filter="grayscale(1)"):(i.style.filter&&(i.style.filter=i.style.filter.replace("grayscale(1)","")),e.style.filter&&(e.style.filter=e.style.filter.replace("grayscale(1)",""))),this.builder.onChange()}));const q=o.querySelector("#chkStackBg");q.addEventListener("change",(()=>{this.box.stackBg(q.checked)}));o.querySelector(".cmd-box-addcode").addEventListener("click",(()=>{const t=this.builder.activeBox;this.box.addCode(t,"code"),this.builder.onChange(),this.edit();let e=t.querySelector(".is-box-tool");e&&(t.querySelector(".is-cover-upload").style.display="block",t.querySelector(".is-box-edit").style.display="inline-block",t.querySelector(".is-module-edit").style.display="inline-block",e.style.width="120px",e.style.left="calc(50% - 60px)")}));o.querySelector(".cmd-box-addtext").addEventListener("click",(()=>{this.box.addContent(),this.edit()}));o.querySelector(".cmd-box-removetext").addEventListener("click",(()=>{this.builder.editor.util.confirm(i("Are you sure you want to remove all text/content in this box?"),(t=>{t&&(this.box.removeContent(),this.edit())}))}));o.querySelector(".cmd-box-removecode").addEventListener("click",(()=>{this.builder.editor.util.confirm(i("Are you sure you want to remove custom code in this box?"),(t=>{if(t){const t=this.builder.activeBox;this.box.removeCode(),this.edit();let e=t.querySelector(".is-box-tool");e&&(t.querySelector(".is-cover-upload").style.display="block",t.querySelector(".is-box-edit").style.display="inline-block",t.querySelector(".is-module-edit").style.display="none",e.style.width="80px",e.style.left="calc(50% - 35px)")}}))}));const T=o.querySelector(".input-box-bgremove");T&&T.addEventListener("click",(()=>{this.boxImage("")}));const M=this.builder.editor.colorpicker(),O=o.querySelector(".input-box-bgcolor");O.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeBox;let e=O.style.backgroundColor,i=t.querySelector(".is-overlay");M.open((t=>{i.style.backgroundColor=t,i.style.backgroundImage="",O.style.backgroundColor=t,this.builder.onChange()}),e)})),o.querySelector(".input-box-gradient").addEventListener("click",(()=>{const t=this.builder.activeBox;this.builder.editor.saveForUndo(!0);let e=t.querySelector(".is-overlay");this.builder.editor.gradientpicker().open(e,(()=>{this.builder.onChange()}))}));const I=o.querySelector(".input-box-overlaycolor");I.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeBox;let e=t.querySelector(".is-overlay");e||(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"));let i=e.querySelector(".is-overlay-bg");i||(e.insertAdjacentHTML("beforeend",'<div class="is-overlay-bg"></div>'),i=e.querySelector(".is-overlay-bg"));let n=i.querySelector(".is-overlay-color");n||(i.insertAdjacentHTML("beforeend",`<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`),n=i.querySelector(".is-overlay-color"));let o=n.style.backgroundColor;M.open((t=>{if("none"!==n.style.display&&0!==n.style.opacity||(n.style.display="block",n.style.opacity=.1),""===t){let t=i.querySelector(".is-overlay-color");t&&t.parentNode.removeChild(t)}else{let e=i.querySelector(".is-overlay-color");e||(i.insertAdjacentHTML("beforeend",`<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`),e=i.querySelector(".is-overlay-color")),e.style.backgroundColor=t}return I.style.backgroundColor=t,this.builder.onChange(),!1}),o)}));let $=this.builder.settings.largerImageHandler,R=this.builder.settings.onLargerImageUpload,B=this.builder.settings.onImageSelectClick,P=this.builder.settings.imageselect,N=this.builder.settings.onFileSelectClick,z=this.builder.settings.fileselect;""!==$||R||(o.querySelector(".image-larger5").style.display="none"),B||""!==P||(this.divBoxClick.querySelector(".input-select").style.display="none"),B||""!==P||(this.divBoxGeneral.querySelector(".input-select").style.display="none");const D=o.querySelector(".input-src");try{this.builder.editor.dom.observeElement(D,"value",(()=>{this.box.applyBoxClick(D.value)}))}catch(t){}if(this.builder.onOtherSelectClick||""!==this.builder.otherSelect){this.divBoxClick.querySelector(".input-select-other").style.display="flex";let t=this.divBoxClick.querySelector(".input-select-other");t.addEventListener("click",(()=>{this.builder.editor.openOther(this.divBoxClick.querySelector(".input-src"),"all",t)}))}if(B||P||N||z){const t=this.divBoxClick.querySelector(".input-select");t&&t.addEventListener("click",(()=>{this.builder.editor.openAsset(o.querySelector(".input-src"),"media",t)}))}if(B||P){const t=this.divBoxGeneral.querySelector(".input-select");this.builder.editor.renderSelectAsset(t,"image",(t=>{this.boxImage(t);const e=this.builder.activeBox,i=e.querySelector(".is-overlay"),n=e.querySelector(".is-overlay-bg");n.style.filter="",i.style.filter="";o.querySelector(".chk-box-bgimage-grayscale").checked=!1,n.style.backgroundPosition="50% 60%",n.removeAttribute("data-scale"),n.removeAttribute("data-x"),n.removeAttribute("data-y"),n.style.top="",n.style.bottom="",n.style.left="",n.style.right="",n.style.width="",n.style.height="",n.removeAttribute("data-bg-xs"),n.removeAttribute("data-bg-sm"),n.removeAttribute("data-bg-md")}))}let H=o.querySelector("#fileImage5");H.addEventListener("change",(t=>{let e=H;for(;"form"!==e.nodeName.toLowerCase();)e=e.parentNode;let i=e;this.builder.editor.dom.addClass(i,"please-wait"),o.querySelector("#hidRefId5_box").value=this.builder.settings.customval,R?R(t):i.submit(),H.value=""})),D.addEventListener("focus",(()=>{this.builder.editor.saveForUndo(!0)})),D.addEventListener("keyup",(()=>{const t=this.builder.activeBox;""===D.value?(this.builder.editor.dom.removeClass(t,"block-click"),t.removeAttribute("data-modal-url")):(this.builder.editor.dom.addClass(t,"block-click"),t.setAttribute("data-modal-url",D.value)),this.builder.onChange()})),o.querySelector(".cmd-box-testclick").addEventListener("click",(()=>{const t=this.builder.activeBox;this.builder.editor.openMedia(t)}));s.querySelector(".input-ok").addEventListener("click",(()=>{let t=this.builder.activeBox.querySelector(".is-overlay-content[data-module]");this.builder.editor.saveForUndo();const i=e.querySelector("#hidBoxCustomCode"),n=e.querySelector("#txtBoxCustomCode");i.value=n.value,t.setAttribute("data-html",encodeURIComponent(i.value));let o=i.value;o=o.replace(/{id}/g,c.uniqueId());let a=document.createRange();t.innerHTML="",t.appendChild(a.createContextualFragment(o)),this.builder.settings.onRender(),this.builder.settings.onChange(),this.builder.hideModal(s)}));l.querySelector(".input-ok").addEventListener("click",(()=>{let t=this.builder.doc.querySelector('[data-module-active="1"]');this.builder.editor.saveForUndo();let i=l.querySelector("iframe");i.contentWindow.construct&&i.contentWindow.construct(),this.builder.editor.saveForUndo();const n=e.querySelector("#hidModuleCode"),o=e.querySelector("#hidModuleSettings");t.setAttribute("data-html",encodeURIComponent(n.value)),t.setAttribute("data-settings",encodeURIComponent(o.value));let s=n.value;s=s.replace(/{id}/g,c.uniqueId());let a=document.createRange();t.innerHTML="",t.appendChild(a.createContextualFragment(s)),this.builder.settings.onRender(),this.builder.settings.onChange(),this.builder.hideModal(l)}))}read(){const t=this.builderStuff.querySelector(".is-modal.editbox"),e=this.builder.activeBox;let i=e.querySelector(".is-overlay");const n=e.querySelector(".is-overlay-bg"),o=e.querySelector(".is-video-bg"),s=e.querySelector(".is-overlay-content"),a=e.querySelector(".is-builder");let l=!1;if(n){this.builder.editor.dom.elementChildren(n).forEach((t=>{c.hasClass(t,"is-overlay-color")||(l=!0)}))}if(n?(""==this.builder.settings.photoselect?t.querySelector("#divBoxPickPhoto").style.display="none":t.querySelector("#divBoxPickPhoto").style.display="block",l?(t.querySelector("#chkAnimateBg").parentNode.parentNode.style.display="none",t.querySelector("#chkParallaxBg").parentNode.parentNode.style.display="none"):t.querySelector("#chkAnimateBg").parentNode.parentNode.style.display=""):t.querySelector("#divBoxPickPhoto").style.display="none",this.builder.settings.enableAnimation?t.querySelector("#tabBoxAnimate").style.display="":t.querySelector("#tabBoxAnimate").style.display="none",e.querySelector(".is-container")){e.querySelector(".is-container .is-module")?t.querySelector("#tabBoxContentText").style.display="none":t.querySelector("#tabBoxContentText").style.display="";let i=window.getComputedStyle(e,null).getPropertyValue("display");"table"===i||"table-cell"===i||"flex"===i?(t.querySelector("#tabBoxContentContainer").style.display="",t.querySelector("#divContentSize").style.display=""):(t.querySelector("#tabBoxContentContainer").style.display="none",t.querySelector("#divContentSize").style.display="none")}else t.querySelector("#tabBoxContentText").style.display="none",t.querySelector("#tabBoxContentContainer").style.display="none",t.querySelector("#divContentSize").style.display="none";let r="middle";(c.hasClass(e,"is-content-top")||e.querySelector(".is-content-top"))&&(r="top"),(c.hasClass(e,"is-content-bottom")||e.querySelector(".is-content-bottom"))&&(r="bottom");let d="center";if(a&&(c.hasClass(a,"is-content-left")&&(d="left"),c.hasClass(a,"is-content-right")&&(d="right")),t.querySelectorAll(".cmd-box-content-pos").forEach((t=>{c.removeClass(t,"on")})),"top"===r&&"left"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="topleft"]'),"on"),"top"===r&&"center"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="topcenter"]'),"on"),"top"===r&&"right"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="topright"]'),"on"),"middle"===r&&"left"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="middleleft"]'),"on"),"middle"===r&&"center"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="middlecenter"]'),"on"),"middle"===r&&"right"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="middleright"]'),"on"),"bottom"===r&&"left"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="bottomleft"]'),"on"),"bottom"===r&&"center"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="bottomcenter"]'),"on"),"bottom"===r&&"right"===d&&c.addClass(t.querySelector('.cmd-box-content-pos[data-value="bottomright"]'),"on"),t.querySelector("#divContainerTransparency").style.display="",t.querySelector("#divContainerTextAlign").style.display="",s&&(t.querySelector("#tabBoxContentText").style.display="",e.querySelector(".is-container")||(t.querySelector("#divContainerTransparency").style.display="none",t.querySelector("#divContainerTextAlign").style.display="none")),o?t.querySelector("#divBoxBackgroundImage").style.display="none":(t.querySelector("#divBoxBackgroundImage").style.display="",l&&(t.querySelector("#divBoxBackgroundImage").style.display="none")),n&&(c.hasClass(n,"is-scale-animated")?t.querySelector("#chkAnimateBg").checked=!0:t.querySelector("#chkAnimateBg").checked=!1,n.getAttribute("data-top-bottom")||n.getAttribute("data-bottom-top")?t.querySelector("#chkParallaxBg").checked=!0:t.querySelector("#chkParallaxBg").checked=!1,"fixed"===n.style.backgroundAttachment?t.querySelector("#chkParallaxBg2").checked=!0:t.querySelector("#chkParallaxBg2").checked=!1,e.classList.contains("hover-zoom")?t.querySelector("#chkZoomOnHover").checked=!0:t.querySelector("#chkZoomOnHover").checked=!1),c.hasClass(e,"is-section")?(t.querySelector("#divBoxSize").style.display="none",t.querySelector("#divBoxMove").style.display="none"):(t.querySelector("#divBoxSize").style.display="block",t.querySelector("#divBoxMove").style.display="block"),t.querySelector("#chkParallaxContent").checked=!1,t.querySelector("#chkFadeContent").checked=!1,a){let e=a.getAttribute("data-bottom-top");e&&(-1!==e.indexOf("translateY")&&(t.querySelector("#chkParallaxContent").checked=!0),-1!==e.indexOf("opacity")&&(t.querySelector("#chkFadeContent").checked=!0))}let u=t.querySelectorAll(".cmd-box-textcolor");if(u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(e,"is-dark-text")){const e=t.querySelector('.cmd-box-textcolor[data-value="dark"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-light-text")){const e=t.querySelector('.cmd-box-textcolor[data-value="light"]');c.addClass(e,"on")}if(u=t.querySelectorAll(".cmd-box-textalign"),u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(e,"is-align-left")){const e=t.querySelector('.cmd-box-textalign[data-value="left"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-align-center")){const e=t.querySelector('.cmd-box-textalign[data-value="center"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-align-right")){const e=t.querySelector('.cmd-box-textalign[data-value="right"]');c.addClass(e,"on")}else if(c.hasClass(e,"is-align-justify")){const e=t.querySelector('.cmd-box-textalign[data-value="justify"]');c.addClass(e,"on")}if(a){if(u=t.querySelectorAll(".cmd-box-parasize"),u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(a,"size-16")){const e=t.querySelector('.cmd-box-parasize[data-value="16"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-17")){const e=t.querySelector('.cmd-box-parasize[data-value="17"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-18")){const e=t.querySelector('.cmd-box-parasize[data-value="18"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-19")){const e=t.querySelector('.cmd-box-parasize[data-value="19"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-20")){const e=t.querySelector('.cmd-box-parasize[data-value="20"]');c.addClass(e,"on")}else if(c.hasClass(a,"size-21")){const e=t.querySelector('.cmd-box-parasize[data-value="21"]');c.addClass(e,"on")}if(u=t.querySelectorAll(".cmd-box-lineheight"),u.forEach((t=>{c.removeClass(t,"on")})),c.hasClass(a,"leading-none")){const e=t.querySelector('.cmd-box-lineheight[data-value="1"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-11")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.1"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-12")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.2"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-13")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.3"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-14")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.4"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-15")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.5"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-16")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.6"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-17")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.7"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-18")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.8"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-19")){const e=t.querySelector('.cmd-box-lineheight[data-value="1.9"]');c.addClass(e,"on")}else if(c.hasClass(a,"leading-20")){const e=t.querySelector('.cmd-box-lineheight[data-value="2"]');c.addClass(e,"on")}}t.querySelector("#chkOptimizeTextSize").checked=!1,a&&c.hasClass(a,"v2")&&(t.querySelector("#chkOptimizeTextSize").checked=!0),t.querySelector("#chkAutofitContent").checked=!1,c.hasClass(e,"box-autofit")&&(t.querySelector("#chkAutofitContent").checked=!0);const p=t.querySelector("#inpBoxMinHeight");p.value="",c.hasClass(e,"min-height-20")&&(p.value=20),c.hasClass(e,"min-height-25")&&(p.value=25),c.hasClass(e,"min-height-30")&&(p.value=30),c.hasClass(e,"min-height-40")&&(p.value=40),c.hasClass(e,"min-height-50")&&(p.value=50),c.hasClass(e,"min-height-60")&&(p.value=60),c.hasClass(e,"min-height-70")&&(p.value=70),c.hasClass(e,"min-height-75")&&(p.value=75),c.hasClass(e,"min-height-80")&&(p.value=80),c.hasClass(e,"min-height-90")&&(p.value=90),c.hasClass(e,"min-height-100")&&(p.value=100),a&&(t.querySelector(".val-box-size").innerHTML="",a.classList.forEach((e=>{if(-1!==e.indexOf("is-content-")&&"is-content-left"!==e&&"is-content-right"!==e){let i=e.replace("is-content-","");t.querySelector(".val-box-size").innerHTML=i}})));const h=t.querySelector(".cmd-box-animate");h.value="",c.hasClass(e,"is-pulse")&&(h.value="is-pulse"),c.hasClass(e,"is-bounceIn")&&(h.value="is-bounceIn"),c.hasClass(e,"is-fadeIn")&&(h.value="is-fadeIn"),c.hasClass(e,"is-fadeInDown")&&(h.value="is-fadeInDown"),c.hasClass(e,"is-fadeInLeft")&&(h.value="is-fadeInLeft"),c.hasClass(e,"is-fadeInRight")&&(h.value="is-fadeInRight"),c.hasClass(e,"is-fadeInUp")&&(h.value="is-fadeInUp"),c.hasClass(e,"is-flipInX")&&(h.value="is-flipInX"),c.hasClass(e,"is-flipInY")&&(h.value="is-flipInY"),c.hasClass(e,"is-slideInUp")&&(h.value="is-slideInUp"),c.hasClass(e,"is-slideInDown")&&(h.value="is-slideInDown"),c.hasClass(e,"is-slideInLeft")&&(h.value="is-slideInLeft"),c.hasClass(e,"is-slideInRight")&&(h.value="is-slideInRight"),c.hasClass(e,"is-zoomIn")&&(h.value="is-zoomIn");const m=t.querySelector("#chkAnimOnce");c.hasClass(e,"once")?m.checked=!0:m.checked=!1;const b=t.querySelector(".cmd-box-animatedelay");c.hasClass(e,"delay-0ms")&&(b.value="delay-0ms"),c.hasClass(e,"delay-100ms")&&(b.value="delay-100ms"),c.hasClass(e,"delay-200ms")&&(b.value="delay-20ms"),c.hasClass(e,"delay-300ms")&&(b.value="delay-300ms"),c.hasClass(e,"delay-400ms")&&(b.value="delay-400ms"),c.hasClass(e,"delay-500ms")&&(b.value="delay-500ms"),c.hasClass(e,"delay-600ms")&&(b.value="delay-600ms"),c.hasClass(e,"delay-700ms")&&(b.value="delay-700ms"),c.hasClass(e,"delay-800ms")&&(b.value="delay-800ms"),c.hasClass(e,"delay-900ms")&&(b.value="delay-900ms"),c.hasClass(e,"delay-1000ms")&&(b.value="delay-1000ms"),c.hasClass(e,"delay-1100ms")&&(b.value="delay-1100ms"),c.hasClass(e,"delay-1200ms")&&(b.value="delay-1200ms"),c.hasClass(e,"delay-1300ms")&&(b.value="delay-1300ms"),c.hasClass(e,"delay-1400ms")&&(b.value="delay-1400ms"),c.hasClass(e,"delay-1500ms")&&(b.value="delay-1500ms"),c.hasClass(e,"delay-1600ms")&&(b.value="delay-1600ms"),c.hasClass(e,"delay-1700ms")&&(b.value="delay-1700ms"),c.hasClass(e,"delay-1800ms")&&(b.value="delay-1800ms"),c.hasClass(e,"delay-1900ms")&&(b.value="delay-1900ms"),c.hasClass(e,"delay-2000ms")&&(b.value="delay-2000ms"),c.hasClass(e,"delay-2100ms")&&(b.value="delay-2100ms"),c.hasClass(e,"delay-2200ms")&&(b.value="delay-2200ms"),c.hasClass(e,"delay-2300ms")&&(b.value="delay-2300ms"),c.hasClass(e,"delay-2400ms")&&(b.value="delay-2400ms"),c.hasClass(e,"delay-2500ms")&&(b.value="delay-2500ms"),c.hasClass(e,"delay-2600ms")&&(b.value="delay-2600ms"),c.hasClass(e,"delay-2700ms")&&(b.value="delay-2700ms"),c.hasClass(e,"delay-2800ms")&&(b.value="delay-2800ms"),c.hasClass(e,"delay-2900ms")&&(b.value="delay-2900ms"),c.hasClass(e,"delay-3000ms")&&(b.value="delay-3000ms"),t.querySelector("#tabBoxImage").style.display="none";let g="";n&&n.style.backgroundImage&&-1!==n.style.backgroundImage.indexOf("url(")&&(g=n.style.backgroundImage.slice(4,-1).replace(/["']/g,""),t.querySelector("#tabBoxImage").style.display="inline-block");const v=t.querySelector(".box-bgimage-preview"),f=t.querySelector(".input-box-bgimageadjust"),y=t.querySelector(".label-box-bgimage-grayscale"),x=t.querySelector(".chk-box-bgimage-grayscale"),_=t.querySelector("#divBoxStackBg");f.style.display="none",y.style.display="none";const w=t.querySelector(".input-box-bgremove");if(w.style.display="none",x.checked=!1,_.style.display="none",""!==g){v.innerHTML=`<img src="${g}">`,i&&i.style.filter&&-1!==i.style.filter.indexOf("grayscale")&&(x.checked=!0),n&&n.style.filter&&-1!==n.style.filter.indexOf("grayscale")&&(x.checked=!0,i.style.filter="grayscale(1)",n.style.filter=n.style.filter.replace("grayscale(1)","")),f.style.display="flex",w.style.display="flex",y.style.display="flex",_.style.display="flex";const o=t.querySelector("#chkStackBg");e.classList.contains("m-overlay-stack")?o.checked=!0:o.checked=!1}else v.innerHTML="";const S=e.querySelector(".is-overlay-color"),k=t.querySelector(".input-box-overlaycolor");k.style.backgroundColor=S?S.style.backgroundColor:"transparent";const C=t.querySelector(".input-src");g=e.getAttribute("data-modal-url"),C.value=""!==g?g:"","none"===t.querySelector("#divBoxSize").style.display&&"none"===t.querySelector("#divBoxBackgroundColor").style.display&&"none"===t.querySelector("#divBoxBackgroundImage").style.display&&"none"===t.querySelector("#tabBoxContentText").style.display&&"none"===t.querySelector("#tabBoxContentContainer").style.display&&"none"===t.querySelector("#tabBoxImage").style.display&&"none"===t.querySelector("#tabBoxAnimate").style.display&&"none"===t.querySelector("#tabBoxCustomHtml").style.display?t.querySelector("#divNoBoxSettings").style.display="block":t.querySelector("#divNoBoxSettings").style.display="none",i||(e.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),i=e.querySelector(".is-overlay")),c.hasClass(e,"is-bg-light")&&(c.removeClass(e,"is-bg-light"),i.style.backgroundColor||(i.style.backgroundColor="rgb(255, 255, 255)")),c.hasClass(e,"is-bg-dark")&&(c.removeClass(e,"is-bg-dark"),i.style.backgroundColor||(i.style.backgroundColor="rgb(17, 17, 17)")),c.hasClass(e,"is-bg-grey")&&(c.removeClass(e,"is-bg-grey"),i.style.backgroundColor||(i.style.backgroundColor="rgb(238, 239, 240)"));let L=t.querySelector(".input-box-bgcolor"),A=i.style.backgroundColor;A?L.style.backgroundColor=A:e.style.backgroundColor?(A=window.getComputedStyle(e,null).getPropertyValue("background-color"),"rgba(0, 0, 0, 0)"===A&&(A=""),L.style.backgroundColor=A):L.style.backgroundColor="";const E=t.querySelector(".cmd-box-addtext"),q=t.querySelector(".cmd-box-removetext");a?(E.style.display="none",q.style.display="flex"):(E.style.display="flex",q.style.display="none");const T=t.querySelector(".cmd-box-addcode"),M=t.querySelector(".cmd-box-removecode");e.querySelector(".is-overlay-content[data-module]")?(T.style.display="none",M.style.display="flex"):(T.style.display="flex",M.style.display="none");let O=this.builder.activeSection;c.hasClass(O,"noedit")&&(E.style.display="none");let I=t.querySelectorAll(".cmd-content-height"),$=t.querySelector(".div-content-justify");I.forEach((t=>{c.removeClass(t,"on")})),t.querySelectorAll(".cmd-content-justify").forEach((t=>{c.removeClass(t,"on")})),a&&("100%"===a.style.height||c.hasClass(a,"h-full")?(c.addClass(t.querySelector('.cmd-content-height[data-value="100"]'),"on"),$.style.display="block",("flex-start"===a.style.justifyContent||c.hasClass(a,"justify-start"))&&c.addClass(t.querySelector('.cmd-content-justify[data-value="flex-start"]'),"on"),("flex-end"===a.style.justifyContent||c.hasClass(a,"justify-end"))&&c.addClass(t.querySelector('.cmd-content-justify[data-value="flex-end"]'),"on"),("space-between"===a.style.justifyContent||c.hasClass(a,"justify-between"))&&c.addClass(t.querySelector('.cmd-content-justify[data-value="space-between"]'),"on")):(c.addClass(t.querySelector('.cmd-content-height[data-value=""]'),"on"),$.style.display="none"));t.querySelectorAll(".cmd-box-content-spacing").forEach((t=>{c.removeClass(t,"on")})),a&&(a.classList.contains("content-py-0")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="0"]'),"on"),a.classList.contains("content-py-10")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="10"]'),"on"),a.classList.contains("content-py-20")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="20"]'),"on"),a.classList.contains("content-py-30")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="30"]'),"on"),a.classList.contains("content-py-40")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="40"]'),"on"),a.classList.contains("content-py-50")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="50"]'),"on"),a.classList.contains("content-py-60")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="60"]'),"on"),a.classList.contains("content-py-70")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="70"]'),"on"),a.classList.contains("content-py-80")&&c.addClass(t.querySelector('.cmd-box-content-spacing[data-value="80"]'),"on"));t.querySelectorAll(".cmd-box-content-topspacing").forEach((t=>{c.removeClass(t,"on")})),a&&(a.classList.contains("content-pt-0")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="0"]'),"on"),a.classList.contains("content-pt-10")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="10"]'),"on"),a.classList.contains("content-pt-20")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="20"]'),"on"),a.classList.contains("content-pt-30")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="30"]'),"on"),a.classList.contains("content-pt-40")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="40"]'),"on"),a.classList.contains("content-pt-50")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="50"]'),"on"),a.classList.contains("content-pt-60")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="60"]'),"on"),a.classList.contains("content-pt-70")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="70"]'),"on"),a.classList.contains("content-pt-80")&&c.addClass(t.querySelector('.cmd-box-content-topspacing[data-value="80"]'),"on"));t.querySelectorAll(".cmd-box-content-bottomspacing").forEach((t=>{c.removeClass(t,"on")})),a&&(a.classList.contains("content-pb-0")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="0"]'),"on"),a.classList.contains("content-pb-10")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="10"]'),"on"),a.classList.contains("content-pb-20")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="20"]'),"on"),a.classList.contains("content-pb-30")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="30"]'),"on"),a.classList.contains("content-pb-40")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="40"]'),"on"),a.classList.contains("content-pb-50")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="50"]'),"on"),a.classList.contains("content-pb-60")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="60"]'),"on"),a.classList.contains("content-pb-70")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="70"]'),"on"),a.classList.contains("content-pb-80")&&c.addClass(t.querySelector('.cmd-box-content-bottomspacing[data-value="80"]'),"on")),"flex"===t.querySelector("#divBoxImage").style.display&&"none"===t.querySelector("#tabBoxImage").style.display&&t.querySelector("#tabBoxGeneral").click(),"flex"===t.querySelector("#divBoxContentText").style.display&&"none"===t.querySelector("#tabBoxContentText").style.display&&t.querySelector("#tabBoxGeneral").click(),"flex"===t.querySelector("#divBoxContentContainer").style.display&&"none"===t.querySelector("#tabBoxContentContainer").style.display&&t.querySelector("#tabBoxGeneral").click()}close(){this.modalEditBox.style.display=""}edit(){this.builder.wrapperEl.classList.add("hard-select"),this.builder.activeBox&&this.builder.activeBox.classList.add("box-select"),this.builder.activeSection&&this.builder.activeSection.classList.add("section-select");const t=this.modalEditBox;this.targetBox=null,this.builder.sidebar.closeSidebar(),this.read();const e=this.builder.activeBox;e.classList.add("box-active"),setTimeout((()=>{e.classList.remove("box-active")}),1e3),t.style.display="flex",document.body.classList.add("box-modal-open"),t.focus()}boxOptimizeTextSize(){let t=this.builder.activeBox.querySelector(".is-builder");this.modalEditBox.querySelector("#chkOptimizeTextSize").checked?c.addClass(t,"v2"):c.removeClass(t,"v2")}boxContainerAnim(){let t=this.builder.activeBox,e=this.builder.activeSection,i=t.querySelector(".is-builder"),n="20%",o=parseInt(window.getComputedStyle(e,null).getPropertyValue("min-height"));parseInt(o)<=50&&(n="10%");let s=this.modalEditBox.querySelector("#chkParallaxContent").checked,a=this.modalEditBox.querySelector("#chkFadeContent").checked;i.removeAttribute("data-100-bottom"),i.removeAttribute("data-center"),s&&!a?(i.setAttribute("data-bottom-top",`transform:translateY(-${n})`),i.removeAttribute("data-100-bottom"),i.setAttribute("data-top-bottom",`transform:translateY(${n})`)):a&&!s?(i.setAttribute("data-bottom-top","opacity:0"),i.setAttribute("data-100-bottom","opacity:1"),i.removeAttribute("data-top-bottom")):a&&s?(i.setAttribute("data-bottom-top",`transform:translateY(-${n});opacity:0;`),i.setAttribute("data-100-bottom","opacity:1"),i.setAttribute("data-top-bottom",`transform:translateY(${n})`)):(c.removeClass(i,"skrollable"),c.removeClass(i,"skrollable-between"),i.removeAttribute("data-bottom-top"),i.removeAttribute("data-100-bottom"),i.removeAttribute("data-top-bottom"),i.style.transform=""),this.builder.settings.onRender()}boxImage(t,e){if(e)return void alert(e);this.box.boxImage(t,e);const i=this.modalEditBox,n=i.querySelector(".box-bgimage-preview"),o=i.querySelector(".input-box-bgimageadjust");o.style.display="none";const s=i.querySelector(".label-box-bgimage-grayscale");s.style.display="none";const a=i.querySelector(".input-box-bgremove");a.style.display="none";const l=i.querySelector("#divBoxStackBg");if(l.style.display="none",""!==t){n.innerHTML=`<img src="${t}">`,o.style.display="flex",a.style.display="flex",s.style.display="flex",l.style.display="flex";i.querySelector(".chk-box-bgimage-grayscale").checked=!1,i.querySelector("#tabBoxImage").style.display="inline-block"}else{n.innerHTML="";i.querySelector(".input-box-overlaycolor").style.backgroundColor="",i.querySelector("#tabBoxImage").style.display="none"}}}function u(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var p,h={exports:{}};
14
14
  /*! choices.js v10.2.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */window,p=function(){return function(){var t={282:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0}),e.clearChoices=e.activateChoices=e.filterChoices=e.addChoice=void 0;var n=i(883);e.addChoice=function(t){var e=t.value,i=t.label,o=t.id,s=t.groupId,a=t.disabled,l=t.elementId,r=t.customProperties,c=t.placeholder,d=t.keyCode;return{type:n.ACTION_TYPES.ADD_CHOICE,value:e,label:i,id:o,groupId:s,disabled:a,elementId:l,customProperties:r,placeholder:c,keyCode:d}},e.filterChoices=function(t){return{type:n.ACTION_TYPES.FILTER_CHOICES,results:t}},e.activateChoices=function(t){return void 0===t&&(t=!0),{type:n.ACTION_TYPES.ACTIVATE_CHOICES,active:t}},e.clearChoices=function(){return{type:n.ACTION_TYPES.CLEAR_CHOICES}}},783:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0}),e.addGroup=void 0;var n=i(883);e.addGroup=function(t){var e=t.value,i=t.id,o=t.active,s=t.disabled;return{type:n.ACTION_TYPES.ADD_GROUP,value:e,id:i,active:o,disabled:s}}},464:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0}),e.highlightItem=e.removeItem=e.addItem=void 0;var n=i(883);e.addItem=function(t){var e=t.value,i=t.label,o=t.id,s=t.choiceId,a=t.groupId,l=t.customProperties,r=t.placeholder,c=t.keyCode;return{type:n.ACTION_TYPES.ADD_ITEM,value:e,label:i,id:o,choiceId:s,groupId:a,customProperties:l,placeholder:r,keyCode:c}},e.removeItem=function(t,e){return{type:n.ACTION_TYPES.REMOVE_ITEM,id:t,choiceId:e}},e.highlightItem=function(t,e){return{type:n.ACTION_TYPES.HIGHLIGHT_ITEM,id:t,highlighted:e}}},137:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0}),e.setIsLoading=e.resetTo=e.clearAll=void 0;var n=i(883);e.clearAll=function(){return{type:n.ACTION_TYPES.CLEAR_ALL}},e.resetTo=function(t){return{type:n.ACTION_TYPES.RESET_TO,state:t}},e.setIsLoading=function(t){return{type:n.ACTION_TYPES.SET_IS_LOADING,isLoading:t}}},373:function(t,e,i){var n=this&&this.__spreadArray||function(t,e,i){if(i||2===arguments.length)for(var n,o=0,s=e.length;o<s;o++)!n&&o in e||(n||(n=Array.prototype.slice.call(e,0,o)),n[o]=e[o]);return t.concat(n||Array.prototype.slice.call(e))},o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=o(i(996)),a=o(i(221)),l=i(282),r=i(783),c=i(464),d=i(137),u=i(520),p=i(883),h=i(789),m=i(799),b=i(655),g=o(i(744)),v=o(i(686)),f="-ms-scroll-limit"in document.documentElement.style&&"-ms-ime-align"in document.documentElement.style,y={},x=function(){function t(e,i){void 0===e&&(e="[data-choice]"),void 0===i&&(i={});var o=this;void 0===i.allowHTML&&console.warn("Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message."),this.config=s.default.all([h.DEFAULT_CONFIG,t.defaults.options,i],{arrayMerge:function(t,e){return n([],e,!0)}});var a=(0,m.diff)(this.config,h.DEFAULT_CONFIG);a.length&&console.warn("Unknown config option(s) passed",a.join(", "));var l="string"==typeof e?document.querySelector(e):e;if(!(l instanceof HTMLInputElement||l instanceof HTMLSelectElement))throw TypeError("Expected one of the following types text|select-one|select-multiple");if(this._isTextElement=l.type===p.TEXT_TYPE,this._isSelectOneElement=l.type===p.SELECT_ONE_TYPE,this._isSelectMultipleElement=l.type===p.SELECT_MULTIPLE_TYPE,this._isSelectElement=this._isSelectOneElement||this._isSelectMultipleElement,this.config.searchEnabled=this._isSelectMultipleElement||this.config.searchEnabled,["auto","always"].includes("".concat(this.config.renderSelectedChoices))||(this.config.renderSelectedChoices="auto"),i.addItemFilter&&"function"!=typeof i.addItemFilter){var r=i.addItemFilter instanceof RegExp?i.addItemFilter:new RegExp(i.addItemFilter);this.config.addItemFilter=r.test.bind(r)}if(this._isTextElement?this.passedElement=new u.WrappedInput({element:l,classNames:this.config.classNames,delimiter:this.config.delimiter}):this.passedElement=new u.WrappedSelect({element:l,classNames:this.config.classNames,template:function(t){return o._templates.option(t)}}),this.initialised=!1,this._store=new g.default,this._initialState=b.defaultState,this._currentState=b.defaultState,this._prevState=b.defaultState,this._currentValue="",this._canSearch=!!this.config.searchEnabled,this._isScrollingOnIe=!1,this._highlightPosition=0,this._wasTap=!0,this._placeholderValue=this._generatePlaceholderValue(),this._baseId=(0,m.generateId)(this.passedElement.element,"choices-"),this._direction=this.passedElement.dir,!this._direction){var c=window.getComputedStyle(this.passedElement.element).direction;c!==window.getComputedStyle(document.documentElement).direction&&(this._direction=c)}if(this._idNames={itemChoice:"item-choice"},this._isSelectElement&&(this._presetGroups=this.passedElement.optionGroups,this._presetOptions=this.passedElement.options),this._presetChoices=this.config.choices,this._presetItems=this.config.items,this.passedElement.value&&this._isTextElement){var d=this.passedElement.value.split(this.config.delimiter);this._presetItems=this._presetItems.concat(d)}if(this.passedElement.options&&this.passedElement.options.forEach((function(t){o._presetChoices.push({value:t.value,label:t.innerHTML,selected:!!t.selected,disabled:t.disabled||t.parentNode.disabled,placeholder:""===t.value||t.hasAttribute("placeholder"),customProperties:(0,m.parseCustomProperties)(t.dataset.customProperties)})})),this._render=this._render.bind(this),this._onFocus=this._onFocus.bind(this),this._onBlur=this._onBlur.bind(this),this._onKeyUp=this._onKeyUp.bind(this),this._onKeyDown=this._onKeyDown.bind(this),this._onClick=this._onClick.bind(this),this._onTouchMove=this._onTouchMove.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._onMouseDown=this._onMouseDown.bind(this),this._onMouseOver=this._onMouseOver.bind(this),this._onFormReset=this._onFormReset.bind(this),this._onSelectKey=this._onSelectKey.bind(this),this._onEnterKey=this._onEnterKey.bind(this),this._onEscapeKey=this._onEscapeKey.bind(this),this._onDirectionKey=this._onDirectionKey.bind(this),this._onDeleteKey=this._onDeleteKey.bind(this),this.passedElement.isActive)return this.config.silent||console.warn("Trying to initialise Choices on element already initialised",{element:e}),void(this.initialised=!0);this.init()}return Object.defineProperty(t,"defaults",{get:function(){return Object.preventExtensions({get options(){return y},get templates(){return v.default}})},enumerable:!1,configurable:!0}),t.prototype.init=function(){if(!this.initialised){this._createTemplates(),this._createElements(),this._createStructure(),this._store.subscribe(this._render),this._render(),this._addEventListeners(),(!this.config.addItems||this.passedElement.element.hasAttribute("disabled"))&&this.disable(),this.initialised=!0;var t=this.config.callbackOnInit;t&&"function"==typeof t&&t.call(this)}},t.prototype.destroy=function(){this.initialised&&(this._removeEventListeners(),this.passedElement.reveal(),this.containerOuter.unwrap(this.passedElement.element),this.clearStore(),this._isSelectElement&&(this.passedElement.options=this._presetOptions),this._templates=v.default,this.initialised=!1)},t.prototype.enable=function(){return this.passedElement.isDisabled&&this.passedElement.enable(),this.containerOuter.isDisabled&&(this._addEventListeners(),this.input.enable(),this.containerOuter.enable()),this},t.prototype.disable=function(){return this.passedElement.isDisabled||this.passedElement.disable(),this.containerOuter.isDisabled||(this._removeEventListeners(),this.input.disable(),this.containerOuter.disable()),this},t.prototype.highlightItem=function(t,e){if(void 0===e&&(e=!0),!t||!t.id)return this;var i=t.id,n=t.groupId,o=void 0===n?-1:n,s=t.value,a=void 0===s?"":s,l=t.label,r=void 0===l?"":l,d=o>=0?this._store.getGroupById(o):null;return this._store.dispatch((0,c.highlightItem)(i,!0)),e&&this.passedElement.triggerEvent(p.EVENTS.highlightItem,{id:i,value:a,label:r,groupValue:d&&d.value?d.value:null}),this},t.prototype.unhighlightItem=function(t){if(!t||!t.id)return this;var e=t.id,i=t.groupId,n=void 0===i?-1:i,o=t.value,s=void 0===o?"":o,a=t.label,l=void 0===a?"":a,r=n>=0?this._store.getGroupById(n):null;return this._store.dispatch((0,c.highlightItem)(e,!1)),this.passedElement.triggerEvent(p.EVENTS.highlightItem,{id:e,value:s,label:l,groupValue:r&&r.value?r.value:null}),this},t.prototype.highlightAll=function(){var t=this;return this._store.items.forEach((function(e){return t.highlightItem(e)})),this},t.prototype.unhighlightAll=function(){var t=this;return this._store.items.forEach((function(e){return t.unhighlightItem(e)})),this},t.prototype.removeActiveItemsByValue=function(t){var e=this;return this._store.activeItems.filter((function(e){return e.value===t})).forEach((function(t){return e._removeItem(t)})),this},t.prototype.removeActiveItems=function(t){var e=this;return this._store.activeItems.filter((function(e){return e.id!==t})).forEach((function(t){return e._removeItem(t)})),this},t.prototype.removeHighlightedItems=function(t){var e=this;return void 0===t&&(t=!1),this._store.highlightedActiveItems.forEach((function(i){e._removeItem(i),t&&e._triggerChange(i.value)})),this},t.prototype.showDropdown=function(t){var e=this;return this.dropdown.isActive||requestAnimationFrame((function(){e.dropdown.show(),e.containerOuter.open(e.dropdown.distanceFromTopWindow),!t&&e._canSearch&&e.input.focus(),e.passedElement.triggerEvent(p.EVENTS.showDropdown,{})})),this},t.prototype.hideDropdown=function(t){var e=this;return this.dropdown.isActive?(requestAnimationFrame((function(){e.dropdown.hide(),e.containerOuter.close(),!t&&e._canSearch&&(e.input.removeActiveDescendant(),e.input.blur()),e.passedElement.triggerEvent(p.EVENTS.hideDropdown,{})})),this):this},t.prototype.getValue=function(t){void 0===t&&(t=!1);var e=this._store.activeItems.reduce((function(e,i){var n=t?i.value:i;return e.push(n),e}),[]);return this._isSelectOneElement?e[0]:e},t.prototype.setValue=function(t){var e=this;return this.initialised?(t.forEach((function(t){return e._setChoiceOrItem(t)})),this):this},t.prototype.setChoiceByValue=function(t){var e=this;return!this.initialised||this._isTextElement||(Array.isArray(t)?t:[t]).forEach((function(t){return e._findAndSelectChoiceByValue(t)})),this},t.prototype.setChoices=function(t,e,i,n){var o=this;if(void 0===t&&(t=[]),void 0===e&&(e="value"),void 0===i&&(i="label"),void 0===n&&(n=!1),!this.initialised)throw new ReferenceError("setChoices was called on a non-initialized instance of Choices");if(!this._isSelectElement)throw new TypeError("setChoices can't be used with INPUT based Choices");if("string"!=typeof e||!e)throw new TypeError("value parameter must be a name of 'value' field in passed objects");if(n&&this.clearChoices(),"function"==typeof t){var s=t(this);if("function"==typeof Promise&&s instanceof Promise)return new Promise((function(t){return requestAnimationFrame(t)})).then((function(){return o._handleLoadingState(!0)})).then((function(){return s})).then((function(t){return o.setChoices(t,e,i,n)})).catch((function(t){o.config.silent||console.error(t)})).then((function(){return o._handleLoadingState(!1)})).then((function(){return o}));if(!Array.isArray(s))throw new TypeError(".setChoices first argument function must return either array of choices or Promise, got: ".concat(typeof s));return this.setChoices(s,e,i,!1)}if(!Array.isArray(t))throw new TypeError(".setChoices must be called either with array of choices with a function resulting into Promise of array of choices");return this.containerOuter.removeLoadingState(),this._startLoading(),t.forEach((function(t){if(t.choices)o._addGroup({id:t.id?parseInt("".concat(t.id),10):null,group:t,valueKey:e,labelKey:i});else{var n=t;o._addChoice({value:n[e],label:n[i],isSelected:!!n.selected,isDisabled:!!n.disabled,placeholder:!!n.placeholder,customProperties:n.customProperties})}})),this._stopLoading(),this},t.prototype.clearChoices=function(){return this._store.dispatch((0,l.clearChoices)()),this},t.prototype.clearStore=function(){return this._store.dispatch((0,d.clearAll)()),this},t.prototype.clearInput=function(){var t=!this._isSelectOneElement;return this.input.clear(t),!this._isTextElement&&this._canSearch&&(this._isSearching=!1,this._store.dispatch((0,l.activateChoices)(!0))),this},t.prototype._render=function(){if(!this._store.isLoading()){this._currentState=this._store.state;var t=this._currentState.choices!==this._prevState.choices||this._currentState.groups!==this._prevState.groups||this._currentState.items!==this._prevState.items,e=this._isSelectElement,i=this._currentState.items!==this._prevState.items;t&&(e&&this._renderChoices(),i&&this._renderItems(),this._prevState=this._currentState)}},t.prototype._renderChoices=function(){var t=this,e=this._store,i=e.activeGroups,n=e.activeChoices,o=document.createDocumentFragment();if(this.choiceList.clear(),this.config.resetScrollPosition&&requestAnimationFrame((function(){return t.choiceList.scrollToTop()})),i.length>=1&&!this._isSearching){var s=n.filter((function(t){return!0===t.placeholder&&-1===t.groupId}));s.length>=1&&(o=this._createChoicesFragment(s,o)),o=this._createGroupsFragment(i,n,o)}else n.length>=1&&(o=this._createChoicesFragment(n,o));if(o.childNodes&&o.childNodes.length>0){var a=this._store.activeItems,l=this._canAddItem(a,this.input.value);if(l.response)this.choiceList.append(o),this._highlightChoice();else{var r=this._getTemplate("notice",l.notice);this.choiceList.append(r)}}else{var c=void 0;r=void 0,this._isSearching?(r="function"==typeof this.config.noResultsText?this.config.noResultsText():this.config.noResultsText,c=this._getTemplate("notice",r,"no-results")):(r="function"==typeof this.config.noChoicesText?this.config.noChoicesText():this.config.noChoicesText,c=this._getTemplate("notice",r,"no-choices")),this.choiceList.append(c)}},t.prototype._renderItems=function(){var t=this._store.activeItems||[];this.itemList.clear();var e=this._createItemsFragment(t);e.childNodes&&this.itemList.append(e)},t.prototype._createGroupsFragment=function(t,e,i){var n=this;return void 0===i&&(i=document.createDocumentFragment()),this.config.shouldSort&&t.sort(this.config.sorter),t.forEach((function(t){var o=function(t){return e.filter((function(e){return n._isSelectOneElement?e.groupId===t.id:e.groupId===t.id&&("always"===n.config.renderSelectedChoices||!e.selected)}))}(t);if(o.length>=1){var s=n._getTemplate("choiceGroup",t);i.appendChild(s),n._createChoicesFragment(o,i,!0)}})),i},t.prototype._createChoicesFragment=function(t,e,i){var o=this;void 0===e&&(e=document.createDocumentFragment()),void 0===i&&(i=!1);var s=this.config,a=s.renderSelectedChoices,l=s.searchResultLimit,r=s.renderChoiceLimit,c=this._isSearching?m.sortByScore:this.config.sorter,d=function(t){if("auto"!==a||o._isSelectOneElement||!t.selected){var i=o._getTemplate("choice",t,o.config.itemSelectText);e.appendChild(i)}},u=t;"auto"!==a||this._isSelectOneElement||(u=t.filter((function(t){return!t.selected})));var p=u.reduce((function(t,e){return e.placeholder?t.placeholderChoices.push(e):t.normalChoices.push(e),t}),{placeholderChoices:[],normalChoices:[]}),h=p.placeholderChoices,b=p.normalChoices;(this.config.shouldSort||this._isSearching)&&b.sort(c);var g=u.length,v=this._isSelectOneElement?n(n([],h,!0),b,!0):b;this._isSearching?g=l:r&&r>0&&!i&&(g=r);for(var f=0;f<g;f+=1)v[f]&&d(v[f]);return e},t.prototype._createItemsFragment=function(t,e){var i=this;void 0===e&&(e=document.createDocumentFragment());var n=this.config,o=n.shouldSortItems,s=n.sorter,a=n.removeItemButton;return o&&!this._isSelectOneElement&&t.sort(s),this._isTextElement?this.passedElement.value=t.map((function(t){return t.value})).join(this.config.delimiter):this.passedElement.options=t,t.forEach((function(t){var n=i._getTemplate("item",t,a);e.appendChild(n)})),e},t.prototype._triggerChange=function(t){null!=t&&this.passedElement.triggerEvent(p.EVENTS.change,{value:t})},t.prototype._selectPlaceholderChoice=function(t){this._addItem({value:t.value,label:t.label,choiceId:t.id,groupId:t.groupId,placeholder:t.placeholder}),this._triggerChange(t.value)},t.prototype._handleButtonAction=function(t,e){if(t&&e&&this.config.removeItems&&this.config.removeItemButton){var i=e.parentNode&&e.parentNode.dataset.id,n=i&&t.find((function(t){return t.id===parseInt(i,10)}));n&&(this._removeItem(n),this._triggerChange(n.value),this._isSelectOneElement&&this._store.placeholderChoice&&this._selectPlaceholderChoice(this._store.placeholderChoice))}},t.prototype._handleItemAction=function(t,e,i){var n=this;if(void 0===i&&(i=!1),t&&e&&this.config.removeItems&&!this._isSelectOneElement){var o=e.dataset.id;t.forEach((function(t){t.id!==parseInt("".concat(o),10)||t.highlighted?!i&&t.highlighted&&n.unhighlightItem(t):n.highlightItem(t)})),this.input.focus()}},t.prototype._handleChoiceAction=function(t,e){if(t&&e){var i=e.dataset.id,n=i&&this._store.getChoiceById(i);if(n){var o=t[0]&&t[0].keyCode?t[0].keyCode:void 0,s=this.dropdown.isActive;n.keyCode=o,this.passedElement.triggerEvent(p.EVENTS.choice,{choice:n}),n.selected||n.disabled||this._canAddItem(t,n.value).response&&(this._addItem({value:n.value,label:n.label,choiceId:n.id,groupId:n.groupId,customProperties:n.customProperties,placeholder:n.placeholder,keyCode:n.keyCode}),this._triggerChange(n.value)),this.clearInput(),s&&this._isSelectOneElement&&(this.hideDropdown(!0),this.containerOuter.focus())}}},t.prototype._handleBackspace=function(t){if(this.config.removeItems&&t){var e=t[t.length-1],i=t.some((function(t){return t.highlighted}));this.config.editItems&&!i&&e?(this.input.value=e.value,this.input.setWidth(),this._removeItem(e),this._triggerChange(e.value)):(i||this.highlightItem(e,!1),this.removeHighlightedItems(!0))}},t.prototype._startLoading=function(){this._store.dispatch((0,d.setIsLoading)(!0))},t.prototype._stopLoading=function(){this._store.dispatch((0,d.setIsLoading)(!1))},t.prototype._handleLoadingState=function(t){void 0===t&&(t=!0);var e=this.itemList.getChild(".".concat(this.config.classNames.placeholder));t?(this.disable(),this.containerOuter.addLoadingState(),this._isSelectOneElement?e?e.innerHTML=this.config.loadingText:(e=this._getTemplate("placeholder",this.config.loadingText))&&this.itemList.append(e):this.input.placeholder=this.config.loadingText):(this.enable(),this.containerOuter.removeLoadingState(),this._isSelectOneElement?e&&(e.innerHTML=this._placeholderValue||""):this.input.placeholder=this._placeholderValue||"")},t.prototype._handleSearch=function(t){if(this.input.isFocussed){var e=this._store.choices,i=this.config,n=i.searchFloor,o=i.searchChoices,s=e.some((function(t){return!t.active}));if(null!=t&&t.length>=n){var a=o?this._searchChoices(t):0;this.passedElement.triggerEvent(p.EVENTS.search,{value:t,resultCount:a})}else s&&(this._isSearching=!1,this._store.dispatch((0,l.activateChoices)(!0)))}},t.prototype._canAddItem=function(t,e){var i=!0,n="function"==typeof this.config.addItemText?this.config.addItemText(e):this.config.addItemText;if(!this._isSelectOneElement){var o=(0,m.existsInArray)(t,e);this.config.maxItemCount>0&&this.config.maxItemCount<=t.length&&(i=!1,n="function"==typeof this.config.maxItemText?this.config.maxItemText(this.config.maxItemCount):this.config.maxItemText),!this.config.duplicateItemsAllowed&&o&&i&&(i=!1,n="function"==typeof this.config.uniqueItemText?this.config.uniqueItemText(e):this.config.uniqueItemText),this._isTextElement&&this.config.addItems&&i&&"function"==typeof this.config.addItemFilter&&!this.config.addItemFilter(e)&&(i=!1,n="function"==typeof this.config.customAddItemText?this.config.customAddItemText(e):this.config.customAddItemText)}return{response:i,notice:n}},t.prototype._searchChoices=function(t){var e="string"==typeof t?t.trim():t,i="string"==typeof this._currentValue?this._currentValue.trim():this._currentValue;if(e.length<1&&e==="".concat(i," "))return 0;var o=this._store.searchableChoices,s=e,r=Object.assign(this.config.fuseOptions,{keys:n([],this.config.searchFields,!0),includeMatches:!0}),c=new a.default(o,r).search(s);return this._currentValue=e,this._highlightPosition=0,this._isSearching=!0,this._store.dispatch((0,l.filterChoices)(c)),c.length},t.prototype._addEventListeners=function(){var t=document.documentElement;t.addEventListener("touchend",this._onTouchEnd,!0),this.containerOuter.element.addEventListener("keydown",this._onKeyDown,!0),this.containerOuter.element.addEventListener("mousedown",this._onMouseDown,!0),t.addEventListener("click",this._onClick,{passive:!0}),t.addEventListener("touchmove",this._onTouchMove,{passive:!0}),this.dropdown.element.addEventListener("mouseover",this._onMouseOver,{passive:!0}),this._isSelectOneElement&&(this.containerOuter.element.addEventListener("focus",this._onFocus,{passive:!0}),this.containerOuter.element.addEventListener("blur",this._onBlur,{passive:!0})),this.input.element.addEventListener("keyup",this._onKeyUp,{passive:!0}),this.input.element.addEventListener("focus",this._onFocus,{passive:!0}),this.input.element.addEventListener("blur",this._onBlur,{passive:!0}),this.input.element.form&&this.input.element.form.addEventListener("reset",this._onFormReset,{passive:!0}),this.input.addEventListeners()},t.prototype._removeEventListeners=function(){var t=document.documentElement;t.removeEventListener("touchend",this._onTouchEnd,!0),this.containerOuter.element.removeEventListener("keydown",this._onKeyDown,!0),this.containerOuter.element.removeEventListener("mousedown",this._onMouseDown,!0),t.removeEventListener("click",this._onClick),t.removeEventListener("touchmove",this._onTouchMove),this.dropdown.element.removeEventListener("mouseover",this._onMouseOver),this._isSelectOneElement&&(this.containerOuter.element.removeEventListener("focus",this._onFocus),this.containerOuter.element.removeEventListener("blur",this._onBlur)),this.input.element.removeEventListener("keyup",this._onKeyUp),this.input.element.removeEventListener("focus",this._onFocus),this.input.element.removeEventListener("blur",this._onBlur),this.input.element.form&&this.input.element.form.removeEventListener("reset",this._onFormReset),this.input.removeEventListeners()},t.prototype._onKeyDown=function(t){var e=t.keyCode,i=this._store.activeItems,n=this.input.isFocussed,o=this.dropdown.isActive,s=this.itemList.hasChildren(),a=String.fromCharCode(e),l=/[^\x00-\x1F]/.test(a),r=p.KEY_CODES.BACK_KEY,c=p.KEY_CODES.DELETE_KEY,d=p.KEY_CODES.ENTER_KEY,u=p.KEY_CODES.A_KEY,h=p.KEY_CODES.ESC_KEY,m=p.KEY_CODES.UP_KEY,b=p.KEY_CODES.DOWN_KEY,g=p.KEY_CODES.PAGE_UP_KEY,v=p.KEY_CODES.PAGE_DOWN_KEY;switch(this._isTextElement||o||!l||(this.showDropdown(),this.input.isFocussed||(this.input.value+=t.key.toLowerCase())),e){case u:return this._onSelectKey(t,s);case d:return this._onEnterKey(t,i,o);case h:return this._onEscapeKey(o);case m:case g:case b:case v:return this._onDirectionKey(t,o);case c:case r:return this._onDeleteKey(t,i,n)}},t.prototype._onKeyUp=function(t){var e=t.target,i=t.keyCode,n=this.input.value,o=this._store.activeItems,s=this._canAddItem(o,n),a=p.KEY_CODES.BACK_KEY,r=p.KEY_CODES.DELETE_KEY;if(this._isTextElement)if(s.notice&&n){var c=this._getTemplate("notice",s.notice);this.dropdown.element.innerHTML=c.outerHTML,this.showDropdown(!0)}else this.hideDropdown(!0);else{var d=(i===a||i===r)&&e&&!e.value,u=!this._isTextElement&&this._isSearching,h=this._canSearch&&s.response;d&&u?(this._isSearching=!1,this._store.dispatch((0,l.activateChoices)(!0))):h&&this._handleSearch(this.input.rawValue)}this._canSearch=this.config.searchEnabled},t.prototype._onSelectKey=function(t,e){var i=t.ctrlKey,n=t.metaKey;(i||n)&&e&&(this._canSearch=!1,this.config.removeItems&&!this.input.value&&this.input.element===document.activeElement&&this.highlightAll())},t.prototype._onEnterKey=function(t,e,i){var n=t.target,o=p.KEY_CODES.ENTER_KEY,s=n&&n.hasAttribute("data-button");if(this._isTextElement&&n&&n.value){var a=this.input.value;this._canAddItem(e,a).response&&(this.hideDropdown(!0),this._addItem({value:a}),this._triggerChange(a),this.clearInput())}if(s&&(this._handleButtonAction(e,n),t.preventDefault()),i){var l=this.dropdown.getChild(".".concat(this.config.classNames.highlightedState));l&&(e[0]&&(e[0].keyCode=o),this._handleChoiceAction(e,l)),t.preventDefault()}else this._isSelectOneElement&&(this.showDropdown(),t.preventDefault())},t.prototype._onEscapeKey=function(t){t&&(this.hideDropdown(!0),this.containerOuter.focus())},t.prototype._onDirectionKey=function(t,e){var i=t.keyCode,n=t.metaKey,o=p.KEY_CODES.DOWN_KEY,s=p.KEY_CODES.PAGE_UP_KEY,a=p.KEY_CODES.PAGE_DOWN_KEY;if(e||this._isSelectOneElement){this.showDropdown(),this._canSearch=!1;var l=i===o||i===a?1:-1,r="[data-choice-selectable]",c=void 0;if(n||i===a||i===s)c=l>0?this.dropdown.element.querySelector("".concat(r,":last-of-type")):this.dropdown.element.querySelector(r);else{var d=this.dropdown.element.querySelector(".".concat(this.config.classNames.highlightedState));c=d?(0,m.getAdjacentEl)(d,r,l):this.dropdown.element.querySelector(r)}c&&((0,m.isScrolledIntoView)(c,this.choiceList.element,l)||this.choiceList.scrollToChildElement(c,l),this._highlightChoice(c)),t.preventDefault()}},t.prototype._onDeleteKey=function(t,e,i){var n=t.target;this._isSelectOneElement||n.value||!i||(this._handleBackspace(e),t.preventDefault())},t.prototype._onTouchMove=function(){this._wasTap&&(this._wasTap=!1)},t.prototype._onTouchEnd=function(t){var e=(t||t.touches[0]).target;this._wasTap&&this.containerOuter.element.contains(e)&&((e===this.containerOuter.element||e===this.containerInner.element)&&(this._isTextElement?this.input.focus():this._isSelectMultipleElement&&this.showDropdown()),t.stopPropagation()),this._wasTap=!0},t.prototype._onMouseDown=function(t){var e=t.target;if(e instanceof HTMLElement){if(f&&this.choiceList.element.contains(e)){var i=this.choiceList.element.firstElementChild,n="ltr"===this._direction?t.offsetX>=i.offsetWidth:t.offsetX<i.offsetLeft;this._isScrollingOnIe=n}if(e!==this.input.element){var o=e.closest("[data-button],[data-item],[data-choice]");if(o instanceof HTMLElement){var s=t.shiftKey,a=this._store.activeItems,l=o.dataset;"button"in l?this._handleButtonAction(a,o):"item"in l?this._handleItemAction(a,o,s):"choice"in l&&this._handleChoiceAction(a,o)}t.preventDefault()}}},t.prototype._onMouseOver=function(t){var e=t.target;e instanceof HTMLElement&&"choice"in e.dataset&&this._highlightChoice(e)},t.prototype._onClick=function(t){var e=t.target;this.containerOuter.element.contains(e)?this.dropdown.isActive||this.containerOuter.isDisabled?this._isSelectOneElement&&e!==this.input.element&&!this.dropdown.element.contains(e)&&this.hideDropdown():this._isTextElement?document.activeElement!==this.input.element&&this.input.focus():(this.showDropdown(),this.containerOuter.focus()):(this._store.highlightedActiveItems.length>0&&this.unhighlightAll(),this.containerOuter.removeFocusState(),this.hideDropdown(!0))},t.prototype._onFocus=function(t){var e,i=this,n=t.target;n&&this.containerOuter.element.contains(n)&&((e={})[p.TEXT_TYPE]=function(){n===i.input.element&&i.containerOuter.addFocusState()},e[p.SELECT_ONE_TYPE]=function(){i.containerOuter.addFocusState(),n===i.input.element&&i.showDropdown(!0)},e[p.SELECT_MULTIPLE_TYPE]=function(){n===i.input.element&&(i.showDropdown(!0),i.containerOuter.addFocusState())},e)[this.passedElement.element.type]()},t.prototype._onBlur=function(t){var e,i=this,n=t.target;if(n&&this.containerOuter.element.contains(n)&&!this._isScrollingOnIe){var o=this._store.activeItems.some((function(t){return t.highlighted}));((e={})[p.TEXT_TYPE]=function(){n===i.input.element&&(i.containerOuter.removeFocusState(),o&&i.unhighlightAll(),i.hideDropdown(!0))},e[p.SELECT_ONE_TYPE]=function(){i.containerOuter.removeFocusState(),(n===i.input.element||n===i.containerOuter.element&&!i._canSearch)&&i.hideDropdown(!0)},e[p.SELECT_MULTIPLE_TYPE]=function(){n===i.input.element&&(i.containerOuter.removeFocusState(),i.hideDropdown(!0),o&&i.unhighlightAll())},e)[this.passedElement.element.type]()}else this._isScrollingOnIe=!1,this.input.element.focus()},t.prototype._onFormReset=function(){this._store.dispatch((0,d.resetTo)(this._initialState))},t.prototype._highlightChoice=function(t){var e=this;void 0===t&&(t=null);var i=Array.from(this.dropdown.element.querySelectorAll("[data-choice-selectable]"));if(i.length){var n=t;Array.from(this.dropdown.element.querySelectorAll(".".concat(this.config.classNames.highlightedState))).forEach((function(t){t.classList.remove(e.config.classNames.highlightedState),t.setAttribute("aria-selected","false")})),n?this._highlightPosition=i.indexOf(n):(n=i.length>this._highlightPosition?i[this._highlightPosition]:i[i.length-1])||(n=i[0]),n.classList.add(this.config.classNames.highlightedState),n.setAttribute("aria-selected","true"),this.passedElement.triggerEvent(p.EVENTS.highlightChoice,{el:n}),this.dropdown.isActive&&(this.input.setActiveDescendant(n.id),this.containerOuter.setActiveDescendant(n.id))}},t.prototype._addItem=function(t){var e=t.value,i=t.label,n=void 0===i?null:i,o=t.choiceId,s=void 0===o?-1:o,a=t.groupId,l=void 0===a?-1:a,r=t.customProperties,d=void 0===r?{}:r,u=t.placeholder,h=void 0!==u&&u,m=t.keyCode,b=void 0===m?-1:m,g="string"==typeof e?e.trim():e,v=this._store.items,f=n||g,y=s||-1,x=l>=0?this._store.getGroupById(l):null,_=v?v.length+1:1;this.config.prependValue&&(g=this.config.prependValue+g.toString()),this.config.appendValue&&(g+=this.config.appendValue.toString()),this._store.dispatch((0,c.addItem)({value:g,label:f,id:_,choiceId:y,groupId:l,customProperties:d,placeholder:h,keyCode:b})),this._isSelectOneElement&&this.removeActiveItems(_),this.passedElement.triggerEvent(p.EVENTS.addItem,{id:_,value:g,label:f,customProperties:d,groupValue:x&&x.value?x.value:null,keyCode:b})},t.prototype._removeItem=function(t){var e=t.id,i=t.value,n=t.label,o=t.customProperties,s=t.choiceId,a=t.groupId,l=a&&a>=0?this._store.getGroupById(a):null;e&&s&&(this._store.dispatch((0,c.removeItem)(e,s)),this.passedElement.triggerEvent(p.EVENTS.removeItem,{id:e,value:i,label:n,customProperties:o,groupValue:l&&l.value?l.value:null}))},t.prototype._addChoice=function(t){var e=t.value,i=t.label,n=void 0===i?null:i,o=t.isSelected,s=void 0!==o&&o,a=t.isDisabled,r=void 0!==a&&a,c=t.groupId,d=void 0===c?-1:c,u=t.customProperties,p=void 0===u?{}:u,h=t.placeholder,m=void 0!==h&&h,b=t.keyCode,g=void 0===b?-1:b;if(null!=e){var v=this._store.choices,f=n||e,y=v?v.length+1:1,x="".concat(this._baseId,"-").concat(this._idNames.itemChoice,"-").concat(y);this._store.dispatch((0,l.addChoice)({id:y,groupId:d,elementId:x,value:e,label:f,disabled:r,customProperties:p,placeholder:m,keyCode:g})),s&&this._addItem({value:e,label:f,choiceId:y,customProperties:p,placeholder:m,keyCode:g})}},t.prototype._addGroup=function(t){var e=this,i=t.group,n=t.id,o=t.valueKey,s=void 0===o?"value":o,a=t.labelKey,l=void 0===a?"label":a,c=(0,m.isType)("Object",i)?i.choices:Array.from(i.getElementsByTagName("OPTION")),d=n||Math.floor((new Date).valueOf()*Math.random()),u=!!i.disabled&&i.disabled;c?(this._store.dispatch((0,r.addGroup)({value:i.label,id:d,active:!0,disabled:u})),c.forEach((function(t){var i=t.disabled||t.parentNode&&t.parentNode.disabled;e._addChoice({value:t[s],label:(0,m.isType)("Object",t)?t[l]:t.innerHTML,isSelected:t.selected,isDisabled:i,groupId:d,customProperties:t.customProperties,placeholder:t.placeholder})}))):this._store.dispatch((0,r.addGroup)({value:i.label,id:i.id,active:!1,disabled:i.disabled}))},t.prototype._getTemplate=function(t){for(var e,i=[],o=1;o<arguments.length;o++)i[o-1]=arguments[o];return(e=this._templates[t]).call.apply(e,n([this,this.config],i,!1))},t.prototype._createTemplates=function(){var t=this.config.callbackOnCreateTemplates,e={};t&&"function"==typeof t&&(e=t.call(this,m.strToEl)),this._templates=(0,s.default)(v.default,e)},t.prototype._createElements=function(){this.containerOuter=new u.Container({element:this._getTemplate("containerOuter",this._direction,this._isSelectElement,this._isSelectOneElement,this.config.searchEnabled,this.passedElement.element.type,this.config.labelId),classNames:this.config.classNames,type:this.passedElement.element.type,position:this.config.position}),this.containerInner=new u.Container({element:this._getTemplate("containerInner"),classNames:this.config.classNames,type:this.passedElement.element.type,position:this.config.position}),this.input=new u.Input({element:this._getTemplate("input",this._placeholderValue),classNames:this.config.classNames,type:this.passedElement.element.type,preventPaste:!this.config.paste}),this.choiceList=new u.List({element:this._getTemplate("choiceList",this._isSelectOneElement)}),this.itemList=new u.List({element:this._getTemplate("itemList",this._isSelectOneElement)}),this.dropdown=new u.Dropdown({element:this._getTemplate("dropdown"),classNames:this.config.classNames,type:this.passedElement.element.type})},t.prototype._createStructure=function(){this.passedElement.conceal(),this.containerInner.wrap(this.passedElement.element),this.containerOuter.wrap(this.containerInner.element),this._isSelectOneElement?this.input.placeholder=this.config.searchPlaceholderValue||"":this._placeholderValue&&(this.input.placeholder=this._placeholderValue,this.input.setWidth()),this.containerOuter.element.appendChild(this.containerInner.element),this.containerOuter.element.appendChild(this.dropdown.element),this.containerInner.element.appendChild(this.itemList.element),this._isTextElement||this.dropdown.element.appendChild(this.choiceList.element),this._isSelectOneElement?this.config.searchEnabled&&this.dropdown.element.insertBefore(this.input.element,this.dropdown.element.firstChild):this.containerInner.element.appendChild(this.input.element),this._isSelectElement&&(this._highlightPosition=0,this._isSearching=!1,this._startLoading(),this._presetGroups.length?this._addPredefinedGroups(this._presetGroups):this._addPredefinedChoices(this._presetChoices),this._stopLoading()),this._isTextElement&&this._addPredefinedItems(this._presetItems)},t.prototype._addPredefinedGroups=function(t){var e=this,i=this.passedElement.placeholderOption;i&&i.parentNode&&"SELECT"===i.parentNode.tagName&&this._addChoice({value:i.value,label:i.innerHTML,isSelected:i.selected,isDisabled:i.disabled,placeholder:!0}),t.forEach((function(t){return e._addGroup({group:t,id:t.id||null})}))},t.prototype._addPredefinedChoices=function(t){var e=this;this.config.shouldSort&&t.sort(this.config.sorter);var i=t.some((function(t){return t.selected})),n=t.findIndex((function(t){return void 0===t.disabled||!t.disabled}));t.forEach((function(t,o){var s=t.value,a=void 0===s?"":s,l=t.label,r=t.customProperties,c=t.placeholder;if(e._isSelectElement)if(t.choices)e._addGroup({group:t,id:t.id||null});else{var d=!(!e._isSelectOneElement||i||o!==n)||t.selected,u=t.disabled;e._addChoice({value:a,label:l,isSelected:!!d,isDisabled:!!u,placeholder:!!c,customProperties:r})}else e._addChoice({value:a,label:l,isSelected:!!t.selected,isDisabled:!!t.disabled,placeholder:!!t.placeholder,customProperties:r})}))},t.prototype._addPredefinedItems=function(t){var e=this;t.forEach((function(t){"object"==typeof t&&t.value&&e._addItem({value:t.value,label:t.label,choiceId:t.id,customProperties:t.customProperties,placeholder:t.placeholder}),"string"==typeof t&&e._addItem({value:t})}))},t.prototype._setChoiceOrItem=function(t){var e=this;({object:function(){t.value&&(e._isTextElement?e._addItem({value:t.value,label:t.label,choiceId:t.id,customProperties:t.customProperties,placeholder:t.placeholder}):e._addChoice({value:t.value,label:t.label,isSelected:!0,isDisabled:!1,customProperties:t.customProperties,placeholder:t.placeholder}))},string:function(){e._isTextElement?e._addItem({value:t}):e._addChoice({value:t,label:t,isSelected:!0,isDisabled:!1})}})[(0,m.getType)(t).toLowerCase()]()},t.prototype._findAndSelectChoiceByValue=function(t){var e=this,i=this._store.choices.find((function(i){return e.config.valueComparer(i.value,t)}));i&&!i.selected&&this._addItem({value:i.value,label:i.label,choiceId:i.id,groupId:i.groupId,customProperties:i.customProperties,placeholder:i.placeholder,keyCode:i.keyCode})},t.prototype._generatePlaceholderValue=function(){if(this._isSelectElement&&this.passedElement.placeholderOption){var t=this.passedElement.placeholderOption;return t?t.text:null}var e=this.config,i=e.placeholder,n=e.placeholderValue,o=this.passedElement.element.dataset;if(i){if(n)return n;if(o.placeholder)return o.placeholder}return null},t}();e.default=x},613:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0});var n=i(799),o=i(883),s=function(){function t(t){var e=t.element,i=t.type,n=t.classNames,o=t.position;this.element=e,this.classNames=n,this.type=i,this.position=o,this.isOpen=!1,this.isFlipped=!1,this.isFocussed=!1,this.isDisabled=!1,this.isLoading=!1,this._onFocus=this._onFocus.bind(this),this._onBlur=this._onBlur.bind(this)}return t.prototype.addEventListeners=function(){this.element.addEventListener("focus",this._onFocus),this.element.addEventListener("blur",this._onBlur)},t.prototype.removeEventListeners=function(){this.element.removeEventListener("focus",this._onFocus),this.element.removeEventListener("blur",this._onBlur)},t.prototype.shouldFlip=function(t){if("number"!=typeof t)return!1;var e=!1;return"auto"===this.position?e=!window.matchMedia("(min-height: ".concat(t+1,"px)")).matches:"top"===this.position&&(e=!0),e},t.prototype.setActiveDescendant=function(t){this.element.setAttribute("aria-activedescendant",t)},t.prototype.removeActiveDescendant=function(){this.element.removeAttribute("aria-activedescendant")},t.prototype.open=function(t){this.element.classList.add(this.classNames.openState),this.element.setAttribute("aria-expanded","true"),this.isOpen=!0,this.shouldFlip(t)&&(this.element.classList.add(this.classNames.flippedState),this.isFlipped=!0)},t.prototype.close=function(){this.element.classList.remove(this.classNames.openState),this.element.setAttribute("aria-expanded","false"),this.removeActiveDescendant(),this.isOpen=!1,this.isFlipped&&(this.element.classList.remove(this.classNames.flippedState),this.isFlipped=!1)},t.prototype.focus=function(){this.isFocussed||this.element.focus()},t.prototype.addFocusState=function(){this.element.classList.add(this.classNames.focusState)},t.prototype.removeFocusState=function(){this.element.classList.remove(this.classNames.focusState)},t.prototype.enable=function(){this.element.classList.remove(this.classNames.disabledState),this.element.removeAttribute("aria-disabled"),this.type===o.SELECT_ONE_TYPE&&this.element.setAttribute("tabindex","0"),this.isDisabled=!1},t.prototype.disable=function(){this.element.classList.add(this.classNames.disabledState),this.element.setAttribute("aria-disabled","true"),this.type===o.SELECT_ONE_TYPE&&this.element.setAttribute("tabindex","-1"),this.isDisabled=!0},t.prototype.wrap=function(t){(0,n.wrap)(t,this.element)},t.prototype.unwrap=function(t){this.element.parentNode&&(this.element.parentNode.insertBefore(t,this.element),this.element.parentNode.removeChild(this.element))},t.prototype.addLoadingState=function(){this.element.classList.add(this.classNames.loadingState),this.element.setAttribute("aria-busy","true"),this.isLoading=!0},t.prototype.removeLoadingState=function(){this.element.classList.remove(this.classNames.loadingState),this.element.removeAttribute("aria-busy"),this.isLoading=!1},t.prototype._onFocus=function(){this.isFocussed=!0},t.prototype._onBlur=function(){this.isFocussed=!1},t}();e.default=s},217:function(t,e){Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t){var e=t.element,i=t.type,n=t.classNames;this.element=e,this.classNames=n,this.type=i,this.isActive=!1}return Object.defineProperty(t.prototype,"distanceFromTopWindow",{get:function(){return this.element.getBoundingClientRect().bottom},enumerable:!1,configurable:!0}),t.prototype.getChild=function(t){return this.element.querySelector(t)},t.prototype.show=function(){return this.element.classList.add(this.classNames.activeState),this.element.setAttribute("aria-expanded","true"),this.isActive=!0,this},t.prototype.hide=function(){return this.element.classList.remove(this.classNames.activeState),this.element.setAttribute("aria-expanded","false"),this.isActive=!1,this},t}();e.default=i},520:function(t,e,i){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.WrappedSelect=e.WrappedInput=e.List=e.Input=e.Container=e.Dropdown=void 0;var o=n(i(217));e.Dropdown=o.default;var s=n(i(613));e.Container=s.default;var a=n(i(11));e.Input=a.default;var l=n(i(624));e.List=l.default;var r=n(i(541));e.WrappedInput=r.default;var c=n(i(982));e.WrappedSelect=c.default},11:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0});var n=i(799),o=i(883),s=function(){function t(t){var e=t.element,i=t.type,n=t.classNames,o=t.preventPaste;this.element=e,this.type=i,this.classNames=n,this.preventPaste=o,this.isFocussed=this.element.isEqualNode(document.activeElement),this.isDisabled=e.disabled,this._onPaste=this._onPaste.bind(this),this._onInput=this._onInput.bind(this),this._onFocus=this._onFocus.bind(this),this._onBlur=this._onBlur.bind(this)}return Object.defineProperty(t.prototype,"placeholder",{set:function(t){this.element.placeholder=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return(0,n.sanitise)(this.element.value)},set:function(t){this.element.value=t},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"rawValue",{get:function(){return this.element.value},enumerable:!1,configurable:!0}),t.prototype.addEventListeners=function(){this.element.addEventListener("paste",this._onPaste),this.element.addEventListener("input",this._onInput,{passive:!0}),this.element.addEventListener("focus",this._onFocus,{passive:!0}),this.element.addEventListener("blur",this._onBlur,{passive:!0})},t.prototype.removeEventListeners=function(){this.element.removeEventListener("input",this._onInput),this.element.removeEventListener("paste",this._onPaste),this.element.removeEventListener("focus",this._onFocus),this.element.removeEventListener("blur",this._onBlur)},t.prototype.enable=function(){this.element.removeAttribute("disabled"),this.isDisabled=!1},t.prototype.disable=function(){this.element.setAttribute("disabled",""),this.isDisabled=!0},t.prototype.focus=function(){this.isFocussed||this.element.focus()},t.prototype.blur=function(){this.isFocussed&&this.element.blur()},t.prototype.clear=function(t){return void 0===t&&(t=!0),this.element.value&&(this.element.value=""),t&&this.setWidth(),this},t.prototype.setWidth=function(){var t=this.element,e=t.style,i=t.value,n=t.placeholder;e.minWidth="".concat(n.length+1,"ch"),e.width="".concat(i.length+1,"ch")},t.prototype.setActiveDescendant=function(t){this.element.setAttribute("aria-activedescendant",t)},t.prototype.removeActiveDescendant=function(){this.element.removeAttribute("aria-activedescendant")},t.prototype._onInput=function(){this.type!==o.SELECT_ONE_TYPE&&this.setWidth()},t.prototype._onPaste=function(t){this.preventPaste&&t.preventDefault()},t.prototype._onFocus=function(){this.isFocussed=!0},t.prototype._onBlur=function(){this.isFocussed=!1},t}();e.default=s},624:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0});var n=i(883),o=function(){function t(t){var e=t.element;this.element=e,this.scrollPos=this.element.scrollTop,this.height=this.element.offsetHeight}return t.prototype.clear=function(){this.element.innerHTML=""},t.prototype.append=function(t){this.element.appendChild(t)},t.prototype.getChild=function(t){return this.element.querySelector(t)},t.prototype.hasChildren=function(){return this.element.hasChildNodes()},t.prototype.scrollToTop=function(){this.element.scrollTop=0},t.prototype.scrollToChildElement=function(t,e){var i=this;if(t){var n=this.element.offsetHeight,o=this.element.scrollTop+n,s=t.offsetHeight,a=t.offsetTop+s,l=e>0?this.element.scrollTop+a-o:t.offsetTop;requestAnimationFrame((function(){i._animateScroll(l,e)}))}},t.prototype._scrollDown=function(t,e,i){var n=(i-t)/e,o=n>1?n:1;this.element.scrollTop=t+o},t.prototype._scrollUp=function(t,e,i){var n=(t-i)/e,o=n>1?n:1;this.element.scrollTop=t-o},t.prototype._animateScroll=function(t,e){var i=this,o=n.SCROLLING_SPEED,s=this.element.scrollTop,a=!1;e>0?(this._scrollDown(s,o,t),s<t&&(a=!0)):(this._scrollUp(s,o,t),s>t&&(a=!0)),a&&requestAnimationFrame((function(){i._animateScroll(t,e)}))},t}();e.default=o},730:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0});var n=i(799),o=function(){function t(t){var e=t.element,i=t.classNames;if(this.element=e,this.classNames=i,!(e instanceof HTMLInputElement||e instanceof HTMLSelectElement))throw new TypeError("Invalid element passed");this.isDisabled=!1}return Object.defineProperty(t.prototype,"isActive",{get:function(){return"active"===this.element.dataset.choice},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"dir",{get:function(){return this.element.dir},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"value",{get:function(){return this.element.value},set:function(t){this.element.value=t},enumerable:!1,configurable:!0}),t.prototype.conceal=function(){this.element.classList.add(this.classNames.input),this.element.hidden=!0,this.element.tabIndex=-1;var t=this.element.getAttribute("style");t&&this.element.setAttribute("data-choice-orig-style",t),this.element.setAttribute("data-choice","active")},t.prototype.reveal=function(){this.element.classList.remove(this.classNames.input),this.element.hidden=!1,this.element.removeAttribute("tabindex");var t=this.element.getAttribute("data-choice-orig-style");t?(this.element.removeAttribute("data-choice-orig-style"),this.element.setAttribute("style",t)):this.element.removeAttribute("style"),this.element.removeAttribute("data-choice"),this.element.value=this.element.value},t.prototype.enable=function(){this.element.removeAttribute("disabled"),this.element.disabled=!1,this.isDisabled=!1},t.prototype.disable=function(){this.element.setAttribute("disabled",""),this.element.disabled=!0,this.isDisabled=!0},t.prototype.triggerEvent=function(t,e){(0,n.dispatchEvent)(this.element,t,e)},t}();e.default=o},541:function(t,e,i){var n=this&&this.__extends||function(){var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};return function(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=function(t){function e(e){var i=e.element,n=e.classNames,o=e.delimiter,s=t.call(this,{element:i,classNames:n})||this;return s.delimiter=o,s}return n(e,t),Object.defineProperty(e.prototype,"value",{get:function(){return this.element.value},set:function(t){this.element.setAttribute("value",t),this.element.value=t},enumerable:!1,configurable:!0}),e}(o(i(730)).default);e.default=s},982:function(t,e,i){var n=this&&this.__extends||function(){var t=function(e,i){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},t(e,i)};return function(e,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function n(){this.constructor=e}t(e,i),e.prototype=null===i?Object.create(i):(n.prototype=i.prototype,new n)}}(),o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=function(t){function e(e){var i=e.element,n=e.classNames,o=e.template,s=t.call(this,{element:i,classNames:n})||this;return s.template=o,s}return n(e,t),Object.defineProperty(e.prototype,"placeholderOption",{get:function(){return this.element.querySelector('option[value=""]')||this.element.querySelector("option[placeholder]")},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"optionGroups",{get:function(){return Array.from(this.element.getElementsByTagName("OPTGROUP"))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"options",{get:function(){return Array.from(this.element.options)},set:function(t){var e=this,i=document.createDocumentFragment();t.forEach((function(t){return n=t,o=e.template(n),void i.appendChild(o);var n,o})),this.appendDocFragment(i)},enumerable:!1,configurable:!0}),e.prototype.appendDocFragment=function(t){this.element.innerHTML="",this.element.appendChild(t)},e}(o(i(730)).default);e.default=s},883:function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.SCROLLING_SPEED=e.SELECT_MULTIPLE_TYPE=e.SELECT_ONE_TYPE=e.TEXT_TYPE=e.KEY_CODES=e.ACTION_TYPES=e.EVENTS=void 0,e.EVENTS={showDropdown:"showDropdown",hideDropdown:"hideDropdown",change:"change",choice:"choice",search:"search",addItem:"addItem",removeItem:"removeItem",highlightItem:"highlightItem",highlightChoice:"highlightChoice",unhighlightItem:"unhighlightItem"},e.ACTION_TYPES={ADD_CHOICE:"ADD_CHOICE",FILTER_CHOICES:"FILTER_CHOICES",ACTIVATE_CHOICES:"ACTIVATE_CHOICES",CLEAR_CHOICES:"CLEAR_CHOICES",ADD_GROUP:"ADD_GROUP",ADD_ITEM:"ADD_ITEM",REMOVE_ITEM:"REMOVE_ITEM",HIGHLIGHT_ITEM:"HIGHLIGHT_ITEM",CLEAR_ALL:"CLEAR_ALL",RESET_TO:"RESET_TO",SET_IS_LOADING:"SET_IS_LOADING"},e.KEY_CODES={BACK_KEY:46,DELETE_KEY:8,ENTER_KEY:13,A_KEY:65,ESC_KEY:27,UP_KEY:38,DOWN_KEY:40,PAGE_UP_KEY:33,PAGE_DOWN_KEY:34},e.TEXT_TYPE="text",e.SELECT_ONE_TYPE="select-one",e.SELECT_MULTIPLE_TYPE="select-multiple",e.SCROLLING_SPEED=4},789:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0}),e.DEFAULT_CONFIG=e.DEFAULT_CLASSNAMES=void 0;var n=i(799);e.DEFAULT_CLASSNAMES={containerOuter:"choices",containerInner:"choices__inner",input:"choices__input",inputCloned:"choices__input--cloned",list:"choices__list",listItems:"choices__list--multiple",listSingle:"choices__list--single",listDropdown:"choices__list--dropdown",item:"choices__item",itemSelectable:"choices__item--selectable",itemDisabled:"choices__item--disabled",itemChoice:"choices__item--choice",placeholder:"choices__placeholder",group:"choices__group",groupHeading:"choices__heading",button:"choices__button",activeState:"is-active",focusState:"is-focused",openState:"is-open",disabledState:"is-disabled",highlightedState:"is-highlighted",selectedState:"is-selected",flippedState:"is-flipped",loadingState:"is-loading",noResults:"has-no-results",noChoices:"has-no-choices"},e.DEFAULT_CONFIG={items:[],choices:[],silent:!1,renderChoiceLimit:-1,maxItemCount:-1,addItems:!0,addItemFilter:null,removeItems:!0,removeItemButton:!1,editItems:!1,allowHTML:!0,duplicateItemsAllowed:!0,delimiter:",",paste:!0,searchEnabled:!0,searchChoices:!0,searchFloor:1,searchResultLimit:4,searchFields:["label","value"],position:"auto",resetScrollPosition:!0,shouldSort:!0,shouldSortItems:!1,sorter:n.sortByAlpha,placeholder:!0,placeholderValue:null,searchPlaceholderValue:null,prependValue:null,appendValue:null,renderSelectedChoices:"auto",loadingText:"Loading...",noResultsText:"No results found",noChoicesText:"No choices to choose from",itemSelectText:"Press to select",uniqueItemText:"Only unique values can be added",customAddItemText:"Only values matching specific conditions can be added",addItemText:function(t){return'Press Enter to add <b>"'.concat((0,n.sanitise)(t),'"</b>')},maxItemText:function(t){return"Only ".concat(t," values can be added")},valueComparer:function(t,e){return t===e},fuseOptions:{includeScore:!0},labelId:"",callbackOnInit:null,callbackOnCreateTemplates:null,classNames:e.DEFAULT_CLASSNAMES}},18:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},978:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},948:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},359:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},285:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},533:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},187:function(t,e,i){var n=this&&this.__createBinding||(Object.create?function(t,e,i,n){void 0===n&&(n=i);var o=Object.getOwnPropertyDescriptor(e,i);o&&!("get"in o?!e.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(t,n,o)}:function(t,e,i,n){void 0===n&&(n=i),t[n]=e[i]}),o=this&&this.__exportStar||function(t,e){for(var i in t)"default"===i||Object.prototype.hasOwnProperty.call(e,i)||n(e,t,i)};Object.defineProperty(e,"__esModule",{value:!0}),o(i(18),e),o(i(978),e),o(i(948),e),o(i(359),e),o(i(285),e),o(i(533),e),o(i(287),e),o(i(132),e),o(i(837),e),o(i(598),e),o(i(369),e),o(i(37),e),o(i(47),e),o(i(923),e),o(i(876),e)},287:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},132:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},837:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},598:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},37:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},369:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},47:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},923:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},876:function(t,e){Object.defineProperty(e,"__esModule",{value:!0})},799:function(t,e){var i;Object.defineProperty(e,"__esModule",{value:!0}),e.parseCustomProperties=e.diff=e.cloneObject=e.existsInArray=e.dispatchEvent=e.sortByScore=e.sortByAlpha=e.strToEl=e.sanitise=e.isScrolledIntoView=e.getAdjacentEl=e.wrap=e.isType=e.getType=e.generateId=e.generateChars=e.getRandomNumber=void 0,e.getRandomNumber=function(t,e){return Math.floor(Math.random()*(e-t)+t)},e.generateChars=function(t){return Array.from({length:t},(function(){return(0,e.getRandomNumber)(0,36).toString(36)})).join("")},e.generateId=function(t,i){var n=t.id||t.name&&"".concat(t.name,"-").concat((0,e.generateChars)(2))||(0,e.generateChars)(4);return n=n.replace(/(:|\.|\[|\]|,)/g,""),n="".concat(i,"-").concat(n)},e.getType=function(t){return Object.prototype.toString.call(t).slice(8,-1)},e.isType=function(t,i){return null!=i&&(0,e.getType)(i)===t},e.wrap=function(t,e){return void 0===e&&(e=document.createElement("div")),t.parentNode&&(t.nextSibling?t.parentNode.insertBefore(e,t.nextSibling):t.parentNode.appendChild(e)),e.appendChild(t)},e.getAdjacentEl=function(t,e,i){void 0===i&&(i=1);for(var n="".concat(i>0?"next":"previous","ElementSibling"),o=t[n];o;){if(o.matches(e))return o;o=o[n]}return o},e.isScrolledIntoView=function(t,e,i){return void 0===i&&(i=1),!!t&&(i>0?e.scrollTop+e.offsetHeight>=t.offsetTop+t.offsetHeight:t.offsetTop>=e.scrollTop)},e.sanitise=function(t){return"string"!=typeof t?t:t.replace(/&/g,"&amp;").replace(/>/g,"&gt;").replace(/</g,"&lt;").replace(/"/g,"&quot;")},e.strToEl=(i=document.createElement("div"),function(t){var e=t.trim();i.innerHTML=e;for(var n=i.children[0];i.firstChild;)i.removeChild(i.firstChild);return n}),e.sortByAlpha=function(t,e){var i=t.value,n=t.label,o=void 0===n?i:n,s=e.value,a=e.label,l=void 0===a?s:a;return o.localeCompare(l,[],{sensitivity:"base",ignorePunctuation:!0,numeric:!0})},e.sortByScore=function(t,e){var i=t.score,n=void 0===i?0:i,o=e.score;return n-(void 0===o?0:o)},e.dispatchEvent=function(t,e,i){void 0===i&&(i=null);var n=new CustomEvent(e,{detail:i,bubbles:!0,cancelable:!0});return t.dispatchEvent(n)},e.existsInArray=function(t,e,i){return void 0===i&&(i="value"),t.some((function(t){return"string"==typeof e?t[i]===e.trim():t[i]===e}))},e.cloneObject=function(t){return JSON.parse(JSON.stringify(t))},e.diff=function(t,e){var i=Object.keys(t).sort(),n=Object.keys(e).sort();return i.filter((function(t){return n.indexOf(t)<0}))},e.parseCustomProperties=function(t){if(void 0!==t)try{return JSON.parse(t)}catch(e){return t}return{}}},273:function(t,e){var i=this&&this.__spreadArray||function(t,e,i){if(i||2===arguments.length)for(var n,o=0,s=e.length;o<s;o++)!n&&o in e||(n||(n=Array.prototype.slice.call(e,0,o)),n[o]=e[o]);return t.concat(n||Array.prototype.slice.call(e))};Object.defineProperty(e,"__esModule",{value:!0}),e.defaultState=void 0,e.defaultState=[],e.default=function(t,n){switch(void 0===t&&(t=e.defaultState),void 0===n&&(n={}),n.type){case"ADD_CHOICE":var o=n,s={id:o.id,elementId:o.elementId,groupId:o.groupId,value:o.value,label:o.label||o.value,disabled:o.disabled||!1,selected:!1,active:!0,score:9999,customProperties:o.customProperties,placeholder:o.placeholder||!1};return i(i([],t,!0),[s],!1);case"ADD_ITEM":var a=n;return a.choiceId>-1?t.map((function(t){var e=t;return e.id===parseInt("".concat(a.choiceId),10)&&(e.selected=!0),e})):t;case"REMOVE_ITEM":var l=n;return l.choiceId&&l.choiceId>-1?t.map((function(t){var e=t;return e.id===parseInt("".concat(l.choiceId),10)&&(e.selected=!1),e})):t;case"FILTER_CHOICES":var r=n;return t.map((function(t){var e=t;return e.active=r.results.some((function(t){var i=t.item,n=t.score;return i.id===e.id&&(e.score=n,!0)})),e}));case"ACTIVATE_CHOICES":var c=n;return t.map((function(t){var e=t;return e.active=c.active,e}));case"CLEAR_CHOICES":return e.defaultState;default:return t}}},871:function(t,e){var i=this&&this.__spreadArray||function(t,e,i){if(i||2===arguments.length)for(var n,o=0,s=e.length;o<s;o++)!n&&o in e||(n||(n=Array.prototype.slice.call(e,0,o)),n[o]=e[o]);return t.concat(n||Array.prototype.slice.call(e))};Object.defineProperty(e,"__esModule",{value:!0}),e.defaultState=void 0,e.defaultState=[],e.default=function(t,n){switch(void 0===t&&(t=e.defaultState),void 0===n&&(n={}),n.type){case"ADD_GROUP":var o=n;return i(i([],t,!0),[{id:o.id,value:o.value,active:o.active,disabled:o.disabled}],!1);case"CLEAR_CHOICES":return[];default:return t}}},655:function(t,e,i){var n=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0}),e.defaultState=void 0;var o=i(791),s=n(i(52)),a=n(i(871)),l=n(i(273)),r=n(i(502)),c=i(799);e.defaultState={groups:[],items:[],choices:[],loading:!1};var d=(0,o.combineReducers)({items:s.default,groups:a.default,choices:l.default,loading:r.default});e.default=function(t,i){var n=t;if("CLEAR_ALL"===i.type)n=e.defaultState;else if("RESET_TO"===i.type)return(0,c.cloneObject)(i.state);return d(n,i)}},52:function(t,e){var i=this&&this.__spreadArray||function(t,e,i){if(i||2===arguments.length)for(var n,o=0,s=e.length;o<s;o++)!n&&o in e||(n||(n=Array.prototype.slice.call(e,0,o)),n[o]=e[o]);return t.concat(n||Array.prototype.slice.call(e))};Object.defineProperty(e,"__esModule",{value:!0}),e.defaultState=void 0,e.defaultState=[],e.default=function(t,n){switch(void 0===t&&(t=e.defaultState),void 0===n&&(n={}),n.type){case"ADD_ITEM":var o=n;return i(i([],t,!0),[{id:o.id,choiceId:o.choiceId,groupId:o.groupId,value:o.value,label:o.label,active:!0,highlighted:!1,customProperties:o.customProperties,placeholder:o.placeholder||!1,keyCode:null}],!1).map((function(t){var e=t;return e.highlighted=!1,e}));case"REMOVE_ITEM":return t.map((function(t){var e=t;return e.id===n.id&&(e.active=!1),e}));case"HIGHLIGHT_ITEM":var s=n;return t.map((function(t){var e=t;return e.id===s.id&&(e.highlighted=s.highlighted),e}));default:return t}}},502:function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.defaultState=void 0,e.defaultState=!1,e.default=function(t,i){return void 0===t&&(t=e.defaultState),void 0===i&&(i={}),"SET_IS_LOADING"===i.type?i.isLoading:t}},744:function(t,e,i){var n=this&&this.__spreadArray||function(t,e,i){if(i||2===arguments.length)for(var n,o=0,s=e.length;o<s;o++)!n&&o in e||(n||(n=Array.prototype.slice.call(e,0,o)),n[o]=e[o]);return t.concat(n||Array.prototype.slice.call(e))},o=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(e,"__esModule",{value:!0});var s=i(791),a=o(i(655)),l=function(){function t(){this._store=(0,s.createStore)(a.default,window.__REDUX_DEVTOOLS_EXTENSION__&&window.__REDUX_DEVTOOLS_EXTENSION__())}return t.prototype.subscribe=function(t){this._store.subscribe(t)},t.prototype.dispatch=function(t){this._store.dispatch(t)},Object.defineProperty(t.prototype,"state",{get:function(){return this._store.getState()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"items",{get:function(){return this.state.items},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"activeItems",{get:function(){return this.items.filter((function(t){return!0===t.active}))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"highlightedActiveItems",{get:function(){return this.items.filter((function(t){return t.active&&t.highlighted}))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"choices",{get:function(){return this.state.choices},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"activeChoices",{get:function(){return this.choices.filter((function(t){return!0===t.active}))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"selectableChoices",{get:function(){return this.choices.filter((function(t){return!0!==t.disabled}))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"searchableChoices",{get:function(){return this.selectableChoices.filter((function(t){return!0!==t.placeholder}))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"placeholderChoice",{get:function(){return n([],this.choices,!0).reverse().find((function(t){return!0===t.placeholder}))},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"groups",{get:function(){return this.state.groups},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"activeGroups",{get:function(){var t=this.groups,e=this.choices;return t.filter((function(t){var i=!0===t.active&&!1===t.disabled,n=e.some((function(t){return!0===t.active&&!1===t.disabled}));return i&&n}),[])},enumerable:!1,configurable:!0}),t.prototype.isLoading=function(){return this.state.loading},t.prototype.getChoiceById=function(t){return this.activeChoices.find((function(e){return e.id===parseInt(t,10)}))},t.prototype.getGroupById=function(t){return this.groups.find((function(e){return e.id===t}))},t}();e.default=l},686:function(t,e){Object.defineProperty(e,"__esModule",{value:!0});var i={containerOuter:function(t,e,i,n,o,s,a){var l=t.classNames.containerOuter,r=Object.assign(document.createElement("div"),{className:l});return r.dataset.type=s,e&&(r.dir=e),n&&(r.tabIndex=0),i&&(r.setAttribute("role",o?"combobox":"listbox"),o&&r.setAttribute("aria-autocomplete","list")),r.setAttribute("aria-haspopup","true"),r.setAttribute("aria-expanded","false"),a&&r.setAttribute("aria-labelledby",a),r},containerInner:function(t){var e=t.classNames.containerInner;return Object.assign(document.createElement("div"),{className:e})},itemList:function(t,e){var i=t.classNames,n=i.list,o=i.listSingle,s=i.listItems;return Object.assign(document.createElement("div"),{className:"".concat(n," ").concat(e?o:s)})},placeholder:function(t,e){var i,n=t.allowHTML,o=t.classNames.placeholder;return Object.assign(document.createElement("div"),((i={className:o})[n?"innerHTML":"innerText"]=e,i))},item:function(t,e,i){var n,o,s=t.allowHTML,a=t.classNames,l=a.item,r=a.button,c=a.highlightedState,d=a.itemSelectable,u=a.placeholder,p=e.id,h=e.value,m=e.label,b=e.customProperties,g=e.active,v=e.disabled,f=e.highlighted,y=e.placeholder,x=Object.assign(document.createElement("div"),((n={className:l})[s?"innerHTML":"innerText"]=m,n));if(Object.assign(x.dataset,{item:"",id:p,value:h,customProperties:b}),g&&x.setAttribute("aria-selected","true"),v&&x.setAttribute("aria-disabled","true"),y&&x.classList.add(u),x.classList.add(f?c:d),i){v&&x.classList.remove(d),x.dataset.deletable="";var _="Remove item",w=Object.assign(document.createElement("button"),((o={type:"button",className:r})[s?"innerHTML":"innerText"]=_,o));w.setAttribute("aria-label","".concat(_,": '").concat(h,"'")),w.dataset.button="",x.appendChild(w)}return x},choiceList:function(t,e){var i=t.classNames.list,n=Object.assign(document.createElement("div"),{className:i});return e||n.setAttribute("aria-multiselectable","true"),n.setAttribute("role","listbox"),n},choiceGroup:function(t,e){var i,n=t.allowHTML,o=t.classNames,s=o.group,a=o.groupHeading,l=o.itemDisabled,r=e.id,c=e.value,d=e.disabled,u=Object.assign(document.createElement("div"),{className:"".concat(s," ").concat(d?l:"")});return u.setAttribute("role","group"),Object.assign(u.dataset,{group:"",id:r,value:c}),d&&u.setAttribute("aria-disabled","true"),u.appendChild(Object.assign(document.createElement("div"),((i={className:a})[n?"innerHTML":"innerText"]=c,i))),u},choice:function(t,e,i){var n,o=t.allowHTML,s=t.classNames,a=s.item,l=s.itemChoice,r=s.itemSelectable,c=s.selectedState,d=s.itemDisabled,u=s.placeholder,p=e.id,h=e.value,m=e.label,b=e.groupId,g=e.elementId,v=e.disabled,f=e.selected,y=e.placeholder,x=Object.assign(document.createElement("div"),((n={id:g})[o?"innerHTML":"innerText"]=m,n.className="".concat(a," ").concat(l),n));return f&&x.classList.add(c),y&&x.classList.add(u),x.setAttribute("role",b&&b>0?"treeitem":"option"),Object.assign(x.dataset,{choice:"",id:p,value:h,selectText:i}),v?(x.classList.add(d),x.dataset.choiceDisabled="",x.setAttribute("aria-disabled","true")):(x.classList.add(r),x.dataset.choiceSelectable=""),x},input:function(t,e){var i=t.classNames,n=i.input,o=i.inputCloned,s=Object.assign(document.createElement("input"),{type:"search",name:"search_terms",className:"".concat(n," ").concat(o),autocomplete:"off",autocapitalize:"off",spellcheck:!1});return s.setAttribute("role","textbox"),s.setAttribute("aria-autocomplete","list"),s.setAttribute("aria-label",e),s},dropdown:function(t){var e=t.classNames,i=e.list,n=e.listDropdown,o=document.createElement("div");return o.classList.add(i,n),o.setAttribute("aria-expanded","false"),o},notice:function(t,e,i){var n,o=t.allowHTML,s=t.classNames,a=s.item,l=s.itemChoice,r=s.noResults,c=s.noChoices;void 0===i&&(i="");var d=[a,l];return"no-choices"===i?d.push(c):"no-results"===i&&d.push(r),Object.assign(document.createElement("div"),((n={})[o?"innerHTML":"innerText"]=e,n.className=d.join(" "),n))},option:function(t){var e=t.label,i=t.value,n=t.customProperties,o=t.active,s=t.disabled,a=new Option(e,i,!1,o);return n&&(a.dataset.customProperties="".concat(n)),a.disabled=!!s,a}};e.default=i},996:function(t){var e=function(t){return function(t){return!!t&&"object"==typeof t}(t)&&!function(t){var e=Object.prototype.toString.call(t);return"[object RegExp]"===e||"[object Date]"===e||function(t){return t.$$typeof===i}(t)}(t)},i="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function n(t,e){return!1!==e.clone&&e.isMergeableObject(t)?r((i=t,Array.isArray(i)?[]:{}),t,e):t;var i}function o(t,e,i){return t.concat(e).map((function(t){return n(t,i)}))}function s(t){return Object.keys(t).concat(function(t){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t).filter((function(e){return t.propertyIsEnumerable(e)})):[]}(t))}function a(t,e){try{return e in t}catch(t){return!1}}function l(t,e,i){var o={};return i.isMergeableObject(t)&&s(t).forEach((function(e){o[e]=n(t[e],i)})),s(e).forEach((function(s){(function(t,e){return a(t,e)&&!(Object.hasOwnProperty.call(t,e)&&Object.propertyIsEnumerable.call(t,e))})(t,s)||(a(t,s)&&i.isMergeableObject(e[s])?o[s]=function(t,e){if(!e.customMerge)return r;var i=e.customMerge(t);return"function"==typeof i?i:r}(s,i)(t[s],e[s],i):o[s]=n(e[s],i))})),o}function r(t,i,s){(s=s||{}).arrayMerge=s.arrayMerge||o,s.isMergeableObject=s.isMergeableObject||e,s.cloneUnlessOtherwiseSpecified=n;var a=Array.isArray(i);return a===Array.isArray(t)?a?s.arrayMerge(t,i,s):l(t,i,s):n(i,s)}r.all=function(t,e){if(!Array.isArray(t))throw new Error("first argument should be an array");return t.reduce((function(t,i){return r(t,i,e)}),{})};var c=r;t.exports=c},221:function(t,e,i){function n(t){return Array.isArray?Array.isArray(t):"[object Array]"===d(t)}function o(t){return"string"==typeof t}function s(t){return"number"==typeof t}function a(t){return!0===t||!1===t||function(t){return l(t)&&null!==t}(t)&&"[object Boolean]"==d(t)}function l(t){return"object"==typeof t}function r(t){return null!=t}function c(t){return!t.trim().length}function d(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":Object.prototype.toString.call(t)}i.r(e),i.d(e,{default:function(){return Y}});const u=Object.prototype.hasOwnProperty;class p{constructor(t){this._keys=[],this._keyMap={};let e=0;t.forEach((t=>{let i=h(t);e+=i.weight,this._keys.push(i),this._keyMap[i.id]=i,e+=i.weight})),this._keys.forEach((t=>{t.weight/=e}))}get(t){return this._keyMap[t]}keys(){return this._keys}toJSON(){return JSON.stringify(this._keys)}}function h(t){let e=null,i=null,s=null,a=1,l=null;if(o(t)||n(t))s=t,e=m(t),i=b(t);else{if(!u.call(t,"name"))throw new Error((t=>`Missing ${t} property in key`)("name"));const n=t.name;if(s=n,u.call(t,"weight")&&(a=t.weight,a<=0))throw new Error((t=>`Property 'weight' in key '${t}' must be a positive integer`)(n));e=m(n),i=b(n),l=t.getFn}return{path:e,id:i,weight:a,src:s,getFn:l}}function m(t){return n(t)?t:t.split(".")}function b(t){return n(t)?t.join("."):t}const g={useExtendedSearch:!1,getFn:function(t,e){let i=[],l=!1;const c=(t,e,d)=>{if(r(t))if(e[d]){const u=t[e[d]];if(!r(u))return;if(d===e.length-1&&(o(u)||s(u)||a(u)))i.push(function(t){return null==t?"":function(t){if("string"==typeof t)return t;let e=t+"";return"0"==e&&1/t==-1/0?"-0":e}(t)}(u));else if(n(u)){l=!0;for(let t=0,i=u.length;t<i;t+=1)c(u[t],e,d+1)}else e.length&&c(u,e,d+1)}else i.push(t)};return c(t,o(e)?e.split("."):e,0),l?i:i[0]},ignoreLocation:!1,ignoreFieldNorm:!1,fieldNormWeight:1};var v={isCaseSensitive:!1,includeScore:!1,keys:[],shouldSort:!0,sortFn:(t,e)=>t.score===e.score?t.idx<e.idx?-1:1:t.score<e.score?-1:1,includeMatches:!1,findAllMatches:!1,minMatchCharLength:1,location:0,threshold:.6,distance:100,...g};const f=/[^ ]+/g;class y{constructor({getFn:t=v.getFn,fieldNormWeight:e=v.fieldNormWeight}={}){this.norm=function(t=1,e=3){const i=new Map,n=Math.pow(10,e);return{get(e){const o=e.match(f).length;if(i.has(o))return i.get(o);const s=1/Math.pow(o,.5*t),a=parseFloat(Math.round(s*n)/n);return i.set(o,a),a},clear(){i.clear()}}}(e,3),this.getFn=t,this.isCreated=!1,this.setIndexRecords()}setSources(t=[]){this.docs=t}setIndexRecords(t=[]){this.records=t}setKeys(t=[]){this.keys=t,this._keysMap={},t.forEach(((t,e)=>{this._keysMap[t.id]=e}))}create(){!this.isCreated&&this.docs.length&&(this.isCreated=!0,o(this.docs[0])?this.docs.forEach(((t,e)=>{this._addString(t,e)})):this.docs.forEach(((t,e)=>{this._addObject(t,e)})),this.norm.clear())}add(t){const e=this.size();o(t)?this._addString(t,e):this._addObject(t,e)}removeAt(t){this.records.splice(t,1);for(let e=t,i=this.size();e<i;e+=1)this.records[e].i-=1}getValueForItemAtKeyId(t,e){return t[this._keysMap[e]]}size(){return this.records.length}_addString(t,e){if(!r(t)||c(t))return;let i={v:t,i:e,n:this.norm.get(t)};this.records.push(i)}_addObject(t,e){let i={i:e,$:{}};this.keys.forEach(((e,s)=>{let a=e.getFn?e.getFn(t):this.getFn(t,e.path);if(r(a))if(n(a)){let t=[];const e=[{nestedArrIndex:-1,value:a}];for(;e.length;){const{nestedArrIndex:i,value:s}=e.pop();if(r(s))if(o(s)&&!c(s)){let e={v:s,i:i,n:this.norm.get(s)};t.push(e)}else n(s)&&s.forEach(((t,i)=>{e.push({nestedArrIndex:i,value:t})}))}i.$[s]=t}else if(o(a)&&!c(a)){let t={v:a,n:this.norm.get(a)};i.$[s]=t}})),this.records.push(i)}toJSON(){return{keys:this.keys,records:this.records}}}function x(t,e,{getFn:i=v.getFn,fieldNormWeight:n=v.fieldNormWeight}={}){const o=new y({getFn:i,fieldNormWeight:n});return o.setKeys(t.map(h)),o.setSources(e),o.create(),o}function _(t,{errors:e=0,currentLocation:i=0,expectedLocation:n=0,distance:o=v.distance,ignoreLocation:s=v.ignoreLocation}={}){const a=e/t.length;if(s)return a;const l=Math.abs(n-i);return o?a+l/o:l?1:a}const w=32;function S(t,e,i,{location:n=v.location,distance:o=v.distance,threshold:s=v.threshold,findAllMatches:a=v.findAllMatches,minMatchCharLength:l=v.minMatchCharLength,includeMatches:r=v.includeMatches,ignoreLocation:c=v.ignoreLocation}={}){if(e.length>w)throw new Error("Pattern length exceeds max of 32.");const d=e.length,u=t.length,p=Math.max(0,Math.min(n,u));let h=s,m=p;const b=l>1||r,g=b?Array(u):[];let f;for(;(f=t.indexOf(e,m))>-1;){let t=_(e,{currentLocation:f,expectedLocation:p,distance:o,ignoreLocation:c});if(h=Math.min(t,h),m=f+d,b){let t=0;for(;t<d;)g[f+t]=1,t+=1}}m=-1;let y=[],x=1,S=d+u;const k=1<<d-1;for(let n=0;n<d;n+=1){let s=0,l=S;for(;s<l;)_(e,{errors:n,currentLocation:p+l,expectedLocation:p,distance:o,ignoreLocation:c})<=h?s=l:S=l,l=Math.floor((S-s)/2+s);S=l;let r=Math.max(1,p-l+1),v=a?u:Math.min(p+l,u)+d,f=Array(v+2);f[v+1]=(1<<n)-1;for(let s=v;s>=r;s-=1){let a=s-1,l=i[t.charAt(a)];if(b&&(g[a]=+!!l),f[s]=(f[s+1]<<1|1)&l,n&&(f[s]|=(y[s+1]|y[s])<<1|1|y[s+1]),f[s]&k&&(x=_(e,{errors:n,currentLocation:a,expectedLocation:p,distance:o,ignoreLocation:c}),x<=h)){if(h=x,m=a,m<=p)break;r=Math.max(1,2*p-m)}}if(_(e,{errors:n+1,currentLocation:p,expectedLocation:p,distance:o,ignoreLocation:c})>h)break;y=f}const C={isMatch:m>=0,score:Math.max(.001,x)};if(b){const t=function(t=[],e=v.minMatchCharLength){let i=[],n=-1,o=-1,s=0;for(let a=t.length;s<a;s+=1){let a=t[s];a&&-1===n?n=s:a||-1===n||(o=s-1,o-n+1>=e&&i.push([n,o]),n=-1)}return t[s-1]&&s-n>=e&&i.push([n,s-1]),i}(g,l);t.length?r&&(C.indices=t):C.isMatch=!1}return C}function k(t){let e={};for(let i=0,n=t.length;i<n;i+=1){const o=t.charAt(i);e[o]=(e[o]||0)|1<<n-i-1}return e}class C{constructor(t,{location:e=v.location,threshold:i=v.threshold,distance:n=v.distance,includeMatches:o=v.includeMatches,findAllMatches:s=v.findAllMatches,minMatchCharLength:a=v.minMatchCharLength,isCaseSensitive:l=v.isCaseSensitive,ignoreLocation:r=v.ignoreLocation}={}){if(this.options={location:e,threshold:i,distance:n,includeMatches:o,findAllMatches:s,minMatchCharLength:a,isCaseSensitive:l,ignoreLocation:r},this.pattern=l?t:t.toLowerCase(),this.chunks=[],!this.pattern.length)return;const c=(t,e)=>{this.chunks.push({pattern:t,alphabet:k(t),startIndex:e})},d=this.pattern.length;if(d>w){let t=0;const e=d%w,i=d-e;for(;t<i;)c(this.pattern.substr(t,w),t),t+=w;if(e){const t=d-w;c(this.pattern.substr(t),t)}}else c(this.pattern,0)}searchIn(t){const{isCaseSensitive:e,includeMatches:i}=this.options;if(e||(t=t.toLowerCase()),this.pattern===t){let e={isMatch:!0,score:0};return i&&(e.indices=[[0,t.length-1]]),e}const{location:n,distance:o,threshold:s,findAllMatches:a,minMatchCharLength:l,ignoreLocation:r}=this.options;let c=[],d=0,u=!1;this.chunks.forEach((({pattern:e,alphabet:p,startIndex:h})=>{const{isMatch:m,score:b,indices:g}=S(t,e,p,{location:n+h,distance:o,threshold:s,findAllMatches:a,minMatchCharLength:l,includeMatches:i,ignoreLocation:r});m&&(u=!0),d+=b,m&&g&&(c=[...c,...g])}));let p={isMatch:u,score:u?d/this.chunks.length:1};return u&&i&&(p.indices=c),p}}class L{constructor(t){this.pattern=t}static isMultiMatch(t){return A(t,this.multiRegex)}static isSingleMatch(t){return A(t,this.singleRegex)}search(){}}function A(t,e){const i=t.match(e);return i?i[1]:null}class E extends L{constructor(t,{location:e=v.location,threshold:i=v.threshold,distance:n=v.distance,includeMatches:o=v.includeMatches,findAllMatches:s=v.findAllMatches,minMatchCharLength:a=v.minMatchCharLength,isCaseSensitive:l=v.isCaseSensitive,ignoreLocation:r=v.ignoreLocation}={}){super(t),this._bitapSearch=new C(t,{location:e,threshold:i,distance:n,includeMatches:o,findAllMatches:s,minMatchCharLength:a,isCaseSensitive:l,ignoreLocation:r})}static get type(){return"fuzzy"}static get multiRegex(){return/^"(.*)"$/}static get singleRegex(){return/^(.*)$/}search(t){return this._bitapSearch.searchIn(t)}}class q extends L{constructor(t){super(t)}static get type(){return"include"}static get multiRegex(){return/^'"(.*)"$/}static get singleRegex(){return/^'(.*)$/}search(t){let e,i=0;const n=[],o=this.pattern.length;for(;(e=t.indexOf(this.pattern,i))>-1;)i=e+o,n.push([e,i-1]);const s=!!n.length;return{isMatch:s,score:s?0:1,indices:n}}}const T=[class extends L{constructor(t){super(t)}static get type(){return"exact"}static get multiRegex(){return/^="(.*)"$/}static get singleRegex(){return/^=(.*)$/}search(t){const e=t===this.pattern;return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}},q,class extends L{constructor(t){super(t)}static get type(){return"prefix-exact"}static get multiRegex(){return/^\^"(.*)"$/}static get singleRegex(){return/^\^(.*)$/}search(t){const e=t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,this.pattern.length-1]}}},class extends L{constructor(t){super(t)}static get type(){return"inverse-prefix-exact"}static get multiRegex(){return/^!\^"(.*)"$/}static get singleRegex(){return/^!\^(.*)$/}search(t){const e=!t.startsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}},class extends L{constructor(t){super(t)}static get type(){return"inverse-suffix-exact"}static get multiRegex(){return/^!"(.*)"\$$/}static get singleRegex(){return/^!(.*)\$$/}search(t){const e=!t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}},class extends L{constructor(t){super(t)}static get type(){return"suffix-exact"}static get multiRegex(){return/^"(.*)"\$$/}static get singleRegex(){return/^(.*)\$$/}search(t){const e=t.endsWith(this.pattern);return{isMatch:e,score:e?0:1,indices:[t.length-this.pattern.length,t.length-1]}}},class extends L{constructor(t){super(t)}static get type(){return"inverse-exact"}static get multiRegex(){return/^!"(.*)"$/}static get singleRegex(){return/^!(.*)$/}search(t){const e=-1===t.indexOf(this.pattern);return{isMatch:e,score:e?0:1,indices:[0,t.length-1]}}},E],M=T.length,O=/ +(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/,I=new Set([E.type,q.type]);class ${constructor(t,{isCaseSensitive:e=v.isCaseSensitive,includeMatches:i=v.includeMatches,minMatchCharLength:n=v.minMatchCharLength,ignoreLocation:o=v.ignoreLocation,findAllMatches:s=v.findAllMatches,location:a=v.location,threshold:l=v.threshold,distance:r=v.distance}={}){this.query=null,this.options={isCaseSensitive:e,includeMatches:i,minMatchCharLength:n,findAllMatches:s,ignoreLocation:o,location:a,threshold:l,distance:r},this.pattern=e?t:t.toLowerCase(),this.query=function(t,e={}){return t.split("|").map((t=>{let i=t.trim().split(O).filter((t=>t&&!!t.trim())),n=[];for(let t=0,o=i.length;t<o;t+=1){const o=i[t];let s=!1,a=-1;for(;!s&&++a<M;){const t=T[a];let i=t.isMultiMatch(o);i&&(n.push(new t(i,e)),s=!0)}if(!s)for(a=-1;++a<M;){const t=T[a];let i=t.isSingleMatch(o);if(i){n.push(new t(i,e));break}}}return n}))}(this.pattern,this.options)}static condition(t,e){return e.useExtendedSearch}searchIn(t){const e=this.query;if(!e)return{isMatch:!1,score:1};const{includeMatches:i,isCaseSensitive:n}=this.options;t=n?t:t.toLowerCase();let o=0,s=[],a=0;for(let n=0,l=e.length;n<l;n+=1){const l=e[n];s.length=0,o=0;for(let e=0,n=l.length;e<n;e+=1){const n=l[e],{isMatch:r,indices:c,score:d}=n.search(t);if(!r){a=0,o=0,s.length=0;break}if(o+=1,a+=d,i){const t=n.constructor.type;I.has(t)?s=[...s,...c]:s.push(c)}}if(o){let t={isMatch:!0,score:a/o};return i&&(t.indices=s),t}}return{isMatch:!1,score:1}}}const R=[];function B(t,e){for(let i=0,n=R.length;i<n;i+=1){let n=R[i];if(n.condition(t,e))return new n(t,e)}return new C(t,e)}const P="$and",N="$or",z="$path",D="$val",H=t=>!(!t[P]&&!t[N]),j=t=>({[P]:Object.keys(t).map((e=>({[e]:t[e]})))});function F(t,e,{auto:i=!0}={}){const s=t=>{let a=Object.keys(t);const r=(t=>!!t[z])(t);if(!r&&a.length>1&&!H(t))return s(j(t));if((t=>!n(t)&&l(t)&&!H(t))(t)){const n=r?t[z]:a[0],s=r?t[D]:t[n];if(!o(s))throw new Error((t=>`Invalid value for key ${t}`)(n));const l={keyId:b(n),pattern:s};return i&&(l.searcher=B(s,e)),l}let c={children:[],operator:a[0]};return a.forEach((e=>{const i=t[e];n(i)&&i.forEach((t=>{c.children.push(s(t))}))})),c};return H(t)||(t=j(t)),s(t)}function U(t,e){const i=t.matches;e.matches=[],r(i)&&i.forEach((t=>{if(!r(t.indices)||!t.indices.length)return;const{indices:i,value:n}=t;let o={indices:i,value:n};t.key&&(o.key=t.key.src),t.idx>-1&&(o.refIndex=t.idx),e.matches.push(o)}))}function W(t,e){e.score=t.score}class Y{constructor(t,e={},i){this.options={...v,...e},this.options.useExtendedSearch,this._keyStore=new p(this.options.keys),this.setCollection(t,i)}setCollection(t,e){if(this._docs=t,e&&!(e instanceof y))throw new Error("Incorrect 'index' type");this._myIndex=e||x(this.options.keys,this._docs,{getFn:this.options.getFn,fieldNormWeight:this.options.fieldNormWeight})}add(t){r(t)&&(this._docs.push(t),this._myIndex.add(t))}remove(t=(()=>!1)){const e=[];for(let i=0,n=this._docs.length;i<n;i+=1){const o=this._docs[i];t(o,i)&&(this.removeAt(i),i-=1,n-=1,e.push(o))}return e}removeAt(t){this._docs.splice(t,1),this._myIndex.removeAt(t)}getIndex(){return this._myIndex}search(t,{limit:e=-1}={}){const{includeMatches:i,includeScore:n,shouldSort:a,sortFn:l,ignoreFieldNorm:r}=this.options;let c=o(t)?o(this._docs[0])?this._searchStringList(t):this._searchObjectList(t):this._searchLogical(t);return function(t,{ignoreFieldNorm:e=v.ignoreFieldNorm}){t.forEach((t=>{let i=1;t.matches.forEach((({key:t,norm:n,score:o})=>{const s=t?t.weight:null;i*=Math.pow(0===o&&s?Number.EPSILON:o,(s||1)*(e?1:n))})),t.score=i}))}(c,{ignoreFieldNorm:r}),a&&c.sort(l),s(e)&&e>-1&&(c=c.slice(0,e)),function(t,e,{includeMatches:i=v.includeMatches,includeScore:n=v.includeScore}={}){const o=[];return i&&o.push(U),n&&o.push(W),t.map((t=>{const{idx:i}=t,n={item:e[i],refIndex:i};return o.length&&o.forEach((e=>{e(t,n)})),n}))}(c,this._docs,{includeMatches:i,includeScore:n})}_searchStringList(t){const e=B(t,this.options),{records:i}=this._myIndex,n=[];return i.forEach((({v:t,i:i,n:o})=>{if(!r(t))return;const{isMatch:s,score:a,indices:l}=e.searchIn(t);s&&n.push({item:t,idx:i,matches:[{score:a,value:t,norm:o,indices:l}]})})),n}_searchLogical(t){const e=F(t,this.options),i=(t,e,n)=>{if(!t.children){const{keyId:i,searcher:o}=t,s=this._findMatches({key:this._keyStore.get(i),value:this._myIndex.getValueForItemAtKeyId(e,i),searcher:o});return s&&s.length?[{idx:n,item:e,matches:s}]:[]}const o=[];for(let s=0,a=t.children.length;s<a;s+=1){const a=t.children[s],l=i(a,e,n);if(l.length)o.push(...l);else if(t.operator===P)return[]}return o},n=this._myIndex.records,o={},s=[];return n.forEach((({$:t,i:n})=>{if(r(t)){let a=i(e,t,n);a.length&&(o[n]||(o[n]={idx:n,item:t,matches:[]},s.push(o[n])),a.forEach((({matches:t})=>{o[n].matches.push(...t)})))}})),s}_searchObjectList(t){const e=B(t,this.options),{keys:i,records:n}=this._myIndex,o=[];return n.forEach((({$:t,i:n})=>{if(!r(t))return;let s=[];i.forEach(((i,n)=>{s.push(...this._findMatches({key:i,value:t[n],searcher:e}))})),s.length&&o.push({idx:n,item:t,matches:s})})),o}_findMatches({key:t,value:e,searcher:i}){if(!r(e))return[];let o=[];if(n(e))e.forEach((({v:e,i:n,n:s})=>{if(!r(e))return;const{isMatch:a,score:l,indices:c}=i.searchIn(e);a&&o.push({score:l,key:t,value:e,idx:n,norm:s,indices:c})}));else{const{v:n,n:s}=e,{isMatch:a,score:l,indices:r}=i.searchIn(n);a&&o.push({score:l,key:t,value:n,norm:s,indices:r})}return o}}Y.version="6.6.2",Y.createIndex=x,Y.parseIndex=function(t,{getFn:e=v.getFn,fieldNormWeight:i=v.fieldNormWeight}={}){const{keys:n,records:o}=t,s=new y({getFn:e,fieldNormWeight:i});return s.setKeys(n),s.setIndexRecords(o),s},Y.config=v,Y.parseQuery=F,function(...t){R.push(...t)}($)},791:function(t,e,i){function n(t){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n(t)}function o(t){var e=function(t,e){if("object"!==n(t)||null===t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,e||"default");if("object"!==n(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"===n(e)?e:String(e)}function s(t,e,i){return(e=o(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function a(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,n)}return i}function l(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?a(Object(i),!0).forEach((function(e){s(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):a(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function r(t){return"Minified Redux error #"+t+"; visit https://redux.js.org/Errors?code="+t+" for the full message or use the non-minified dev environment for full errors. "}i.r(e),i.d(e,{__DO_NOT_USE__ActionTypes:function(){return u},applyMiddleware:function(){return y},bindActionCreators:function(){return v},combineReducers:function(){return b},compose:function(){return f},createStore:function(){return h},legacy_createStore:function(){return m}});var c="function"==typeof Symbol&&Symbol.observable||"@@observable",d=function(){return Math.random().toString(36).substring(7).split("").join(".")},u={INIT:"@@redux/INIT"+d(),REPLACE:"@@redux/REPLACE"+d(),PROBE_UNKNOWN_ACTION:function(){return"@@redux/PROBE_UNKNOWN_ACTION"+d()}};function p(t){if("object"!=typeof t||null===t)return!1;for(var e=t;null!==Object.getPrototypeOf(e);)e=Object.getPrototypeOf(e);return Object.getPrototypeOf(t)===e}function h(t,e,i){var n;if("function"==typeof e&&"function"==typeof i||"function"==typeof i&&"function"==typeof arguments[3])throw new Error(r(0));if("function"==typeof e&&void 0===i&&(i=e,e=void 0),void 0!==i){if("function"!=typeof i)throw new Error(r(1));return i(h)(t,e)}if("function"!=typeof t)throw new Error(r(2));var o=t,s=e,a=[],l=a,d=!1;function m(){l===a&&(l=a.slice())}function b(){if(d)throw new Error(r(3));return s}function g(t){if("function"!=typeof t)throw new Error(r(4));if(d)throw new Error(r(5));var e=!0;return m(),l.push(t),function(){if(e){if(d)throw new Error(r(6));e=!1,m();var i=l.indexOf(t);l.splice(i,1),a=null}}}function v(t){if(!p(t))throw new Error(r(7));if(void 0===t.type)throw new Error(r(8));if(d)throw new Error(r(9));try{d=!0,s=o(s,t)}finally{d=!1}for(var e=a=l,i=0;i<e.length;i++)(0,e[i])();return t}function f(t){if("function"!=typeof t)throw new Error(r(10));o=t,v({type:u.REPLACE})}function y(){var t,e=g;return(t={subscribe:function(t){if("object"!=typeof t||null===t)throw new Error(r(11));function i(){t.next&&t.next(b())}return i(),{unsubscribe:e(i)}}})[c]=function(){return this},t}return v({type:u.INIT}),(n={dispatch:v,subscribe:g,getState:b,replaceReducer:f})[c]=y,n}var m=h;function b(t){for(var e=Object.keys(t),i={},n=0;n<e.length;n++){var o=e[n];"function"==typeof t[o]&&(i[o]=t[o])}var s,a=Object.keys(i);try{!function(t){Object.keys(t).forEach((function(e){var i=t[e];if(void 0===i(void 0,{type:u.INIT}))throw new Error(r(12));if(void 0===i(void 0,{type:u.PROBE_UNKNOWN_ACTION()}))throw new Error(r(13))}))}(i)}catch(t){s=t}return function(t,e){if(void 0===t&&(t={}),s)throw s;for(var n=!1,o={},l=0;l<a.length;l++){var c=a[l],d=i[c],u=t[c],p=d(u,e);if(void 0===p)throw e&&e.type,new Error(r(14));o[c]=p,n=n||p!==u}return(n=n||a.length!==Object.keys(t).length)?o:t}}function g(t,e){return function(){return e(t.apply(this,arguments))}}function v(t,e){if("function"==typeof t)return g(t,e);if("object"!=typeof t||null===t)throw new Error(r(16));var i={};for(var n in t){var o=t[n];"function"==typeof o&&(i[n]=g(o,e))}return i}function f(){for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];return 0===e.length?function(t){return t}:1===e.length?e[0]:e.reduce((function(t,e){return function(){return t(e.apply(void 0,arguments))}}))}function y(){for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];return function(t){return function(){var i=t.apply(void 0,arguments),n=function(){throw new Error(r(15))},o={getState:i.getState,dispatch:function(){return n.apply(void 0,arguments)}},s=e.map((function(t){return t(o)}));return n=f.apply(void 0,s)(i.dispatch),l(l({},i),{},{dispatch:n})}}}}},e={};function i(n){var o=e[n];if(void 0!==o)return o.exports;var s=e[n]={exports:{}};return t[n].call(s.exports,s,s.exports,i),s.exports}i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,{a:e}),e},i.d=function(t,e){for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n,o,s={};return n=i(373),o=i.n(n),i(187),i(883),i(789),i(686),s.default=o(),s=s.default}()},h.exports=p();var m=u(h.exports);const b=[{value:"arial",label:'<img src="%path%arial.png">',fontFamily:"Arial, sans-serif",fontStyle:"",fontDisplay:"",provider:""},{value:"courier",label:'<img src="%path%courier.png">',fontFamily:"courier",fontStyle:"",fontDisplay:"",provider:""},{value:"georgia",label:'<img src="%path%georgia.png">',fontFamily:"Georgia, serif",fontStyle:"",fontDisplay:"",provider:""},{value:"monospace",label:'<img src="%path%monospace.png">',fontFamily:"monospace",fontStyle:"",fontDisplay:"",provider:""},{value:"sans-serif",label:'<img src="%path%sans_serif.png">',fontFamily:"sans-serif",fontStyle:"",fontDisplay:"",provider:""},{value:"serif",label:'<img src="%path%serif.png">',fontFamily:"serif",fontStyle:"",fontDisplay:"",provider:""},{value:"abel",label:'<img src="%path%abel.png">',fontFamily:"Abel, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"abril fatface",label:'<img src="%path%abril_fatface.png">',fontFamily:"Abril Fatface",fontStyle:"",fontDisplay:"",provider:"google"},{value:"advent pro",label:'<img src="%path%advent_pro.png">',fontFamily:"Advent Pro, sans-serif",fontStyle:"wght@100;200;300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"aladin",label:'<img src="%path%aladin.png">',fontFamily:"Aladin, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"alegreya",label:'<img src="%path%alegreya.png">',fontFamily:"Alegreya, serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"alegreya sc",label:'<img src="%path%alegreya_sc.png">',fontFamily:"Alegreya SC, serif",fontStyle:"ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"alice",label:'<img src="%path%alice.png">',fontFamily:"Alice, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"allerta stencil",label:'<img src="%path%allerta_stencil.png">',fontFamily:"Allerta Stencil, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"allura",label:'<img src="%path%allura.png">',fontFamily:"Allura, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"almendra display",label:'<img src="%path%almendra_display.png">',fontFamily:"Almendra Display, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"amatic sc",label:'<img src="%path%amatic_sc.png">',fontFamily:"Amatic SC, cursive",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"andika",label:'<img src="%path%andika.png">',fontFamily:"Andika, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"anonymous pro",label:'<img src="%path%anonymous_pro.png">',fontFamily:"Anonymous Pro, monospace",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"architects daughter",label:'<img src="%path%architects_daughter.png">',fontFamily:"Architects Daughter, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"arimo",label:'<img src="%path%arimo.png">',fontFamily:"Arimo, sans-serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"arsenal",label:'<img src="%path%arsenal.png">',fontFamily:"Arsenal, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"assistant",label:'<img src="%path%assistant.png">',fontFamily:"Assistant",fontStyle:"wght@200;300;400;500;600;700;800",fontDisplay:"",provider:"google"},{value:"aubrey",label:'<img src="%path%aubrey.png">',fontFamily:"Aubrey, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"anton",label:'<img src="%path%anton.png">',fontFamily:"Anton, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"archivo narrow",label:'<img src="%path%archivo_narrow.png">',fontFamily:"Archivo Narrow, sans-serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"bad script",label:'<img src="%path%bad_script.png">',fontFamily:"Bad Script, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"benchNine",label:'<img src="%path%benchNine.png">',fontFamily:"BenchNine, sans-serif",fontStyle:"wght@300;400;700",fontDisplay:"",provider:"google"},{value:"bevan",label:'<img src="%path%bevan.png">',fontFamily:"Bevan, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"bigelow rules",label:'<img src="%path%bigelow_rules.png">',fontFamily:"Bigelow Rules, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"bilbo",label:'<img src="%path%bilbo.png">',fontFamily:"Bilbo, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"bonbon",label:'<img src="%path%bonbon.png">',fontFamily:"Bonbon, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"bowlby one sc",label:'<img src="%path%bowlby_one_sc.png">',fontFamily:"Bowlby One SC, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"cabin condensed",label:'<img src="%path%cabin_condensed.png">',fontFamily:"Cabin Condensed, sans-serif",fontStyle:"wght@400;500;600;700",fontDisplay:"",provider:"google"},{value:"carrois gothic sc",label:'<img src="%path%carrois_gothic_sc.png">',fontFamily:"Carrois Gothic SC, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"caveat",label:'<img src="%path%caveat.png">',fontFamily:"Caveat, cursive",fontStyle:"wght@400;500;600;700",fontDisplay:"",provider:"google"},{value:"chewy",label:'<img src="%path%chewy.png">',fontFamily:"Chewy, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"cinzel",label:'<img src="%path%cinzel.png">',fontFamily:"Cinzel, serif",fontStyle:"wght@400;500;600;700;800;900",fontDisplay:"",provider:"google"},{value:"comfortaa",label:'<img src="%path%comfortaa.png">',fontFamily:"Comfortaa, cursive",fontStyle:"wght@300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"concert one",label:'<img src="%path%concert_one.png">',fontFamily:"Concert One, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"cormorant",label:'<img src="%path%cormorant.png">',fontFamily:"Cormorant, serif",fontStyle:"ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"cormorant garamond",label:'<img src="%path%cormorant_garamond.png">',fontFamily:"Cormorant Garamond, serif",fontStyle:"ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"cormorant infant",label:'<img src="%path%cormorant_infant.png">',fontFamily:"Cormorant Infant, serif",fontStyle:"ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"cormorant sc",label:'<img src="%path%cormorant_sc.png">',fontFamily:"Cormorant SC, serif",fontStyle:"wght@300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"cormorant unicase",label:'<img src="%path%cormorant_unicase.png">',fontFamily:"Cormorant Unicase, serif",fontStyle:"wght@300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"cousine",label:'<img src="%path%cousine.png">',fontFamily:"Cousine",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"crafty girls",label:'<img src="%path%crafty_girls.png">',fontFamily:"Crafty Girls, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"cuprum",label:'<img src="%path%cuprum.png">',fontFamily:"Cuprum, sans-serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"cutive mono",label:'<img src="%path%cutive_mono.png">',fontFamily:"Cutive Mono, monospace",fontStyle:"",fontDisplay:"",provider:"google"},{value:"devonshire",label:'<img src="%path%devonshire.png">',fontFamily:"Devonshire, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"didact gothic",label:'<img src="%path%didact_gothic.png">',fontFamily:"Didact Gothic, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"diplomata sc",label:'<img src="%path%diplomata_sc.png">',fontFamily:"Diplomata SC, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"dosis",label:'<img src="%path%dosis.png">',fontFamily:"Dosis, sans-serif",fontStyle:"wght@200;300;400;500;600;700;800",fontDisplay:"",provider:"google"},{value:"eb garamond",label:'<img src="%path%eb_garamond.png">',fontFamily:"EB Garamond, serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800",fontDisplay:"",provider:"google"},{value:"el messiri",label:'<img src="%path%el_messiri.png">',fontFamily:"El Messiri, sans-serif",fontStyle:"wght@400;500;600;700",fontDisplay:"",provider:"google"},{value:"elsie",label:'<img src="%path%elsie.png">',fontFamily:"Elsie, cursive",fontStyle:"wght@400;900",fontDisplay:"",provider:"google"},{value:"encode sans",label:'<img src="%path%encode_sans.png">',fontFamily:"Encode Sans, sans-serif",fontStyle:"wght@100;200;300;400;500;600;700;800;900",fontDisplay:"",provider:"google"},{value:"exo",label:'<img src="%path%exo.png">',fontFamily:"Exo, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"exo 2",label:'<img src="%path%exo_2.png">',fontFamily:"Exo 2, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"felipa",label:'<img src="%path%felipa.png">',fontFamily:"Felipa, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"fira code",label:'<img src="%path%fira_code.png">',fontFamily:"Fira Code, monospace",fontStyle:"wght@300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"fira mono",label:'<img src="%path%fira_mono.png">',fontFamily:"Fira Mono, monospace",fontStyle:"wght@400;500;700",fontDisplay:"",provider:"google"},{value:"fira sans",label:'<img src="%path%fira_sans.png">',fontFamily:"Fira Sans, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"fira sans condensed",label:'<img src="%path%fira_sans_condensed.png">',fontFamily:"Fira Sans Condensed, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"fira sans extra condensed",label:'<img src="%path%fira_sans_extra_condensed.png">',fontFamily:"Fira Sans Extra Condensed, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"fjalla one",label:'<img src="%path%fjalla_one.png">',fontFamily:"Fjalla One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"forum",label:'<img src="%path%forum.png">',fontFamily:"Forum, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"frank ruhl libre",label:'<img src="%path%frank_ruhl_libre.png">',fontFamily:"Frank Ruhl Libre",fontStyle:"wght@300;400;500;700;900",fontDisplay:"",provider:"google"},{value:"fredericka the great",label:'<img src="%path%fredericka_the_great.png">',fontFamily:"Fredericka the Great, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"gabriela",label:'<img src="%path%gabriela.png">',fontFamily:"Gabriela, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"gilda display",label:'<img src="%path%gilda_display.png">',fontFamily:"Gilda Display, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"give you glory",label:'<img src="%path%give_you_glory.png">',fontFamily:"Give You Glory, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"handlee",label:'<img src="%path%handlee.png">',fontFamily:"Handlee, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"happy monkey",label:'<img src="%path%happy_monkey.png">',fontFamily:"Happy Monkey, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"hind",label:'<img src="%path%hind.png">',fontFamily:"Hind",fontStyle:"wght@300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"ibm plex mono",label:'<img src="%path%ibm_plex_mono.png">',fontFamily:"IBM Plex Mono, monospace",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"ibm plex sans",label:'<img src="%path%ibm_plex_sans.png">',fontFamily:"IBM Plex Sans, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"ibm plex serif",label:'<img src="%path%ibm_plex_serif.png">',fontFamily:"IBM Plex Serif, serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"iceland",label:'<img src="%path%iceland.png">',fontFamily:"Iceland, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"inconsolata",label:'<img src="%path%inconsolata.png">',fontFamily:"Inconsolata, monospace",fontStyle:"wght@200;300;400;500;600;700;800;900",fontDisplay:"",provider:"google"},{value:"istok web",label:'<img src="%path%istok_web.png">',fontFamily:"Istok Web, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"josefin sans",label:'<img src="%path%josefin_sans.png">',fontFamily:"Josefin Sans, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"julee",label:'<img src="%path%julee.png">',fontFamily:"Julee, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"julius sans one",label:'<img src="%path%julius_sans_one.png">',fontFamily:"Julius Sans One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"junge",label:'<img src="%path%junge.png">',fontFamily:"Junge, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"jura",label:'<img src="%path%jura.png">',fontFamily:"Jura, sans-serif",fontStyle:"wght@300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"just me again down here",label:'<img src="%path%just_me_again_down_here.png">',fontFamily:"Just Me Again Down Here, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"kaushan script",label:'<img src="%path%kaushan_script.png">',fontFamily:"Kaushan Script, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"kelly slab",label:'<img src="%path%kelly_slab.png">',fontFamily:"Kelly Slab, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"kite one",label:'<img src="%path%kite_one.png">',fontFamily:"Kite One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"kosugi",label:'<img src="%path%kosugi.png">',fontFamily:"Kosugi, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"kosugi maru",label:'<img src="%path%kosugi_maru.png">',fontFamily:"Kosugi Maru, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"kurale",label:'<img src="%path%kurale.png">',fontFamily:"Kurale, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"lato",label:'<img src="%path%lato.png">',fontFamily:"Lato, sans-serif",fontStyle:"ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900",fontDisplay:"",provider:"google"},{value:"ledger",label:'<img src="%path%ledger.png">',fontFamily:"Ledger, serif",fontStyle:"",fontDisplay:"swap",provider:"google"},{value:"lekton",label:'<img src="%path%lekton.png">',fontFamily:"Lekton, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400",fontDisplay:"",provider:"google"},{value:"life savers",label:'<img src="%path%life_savers.png">',fontFamily:"Life Savers, cursive",fontStyle:"wght@400;700;800",fontDisplay:"",provider:"google"},{value:"literata",label:'<img src="%path%literata.png">',fontFamily:"Literata, serif",fontStyle:"ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"lobster",label:'<img src="%path%lobster.png">',fontFamily:"Lobster, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"lobster two",label:'<img src="%path%lobster_two.png">',fontFamily:"Lobster Two, cursive",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"londrina shadow",label:'<img src="%path%londrina_shadow.png">',fontFamily:"Londrina Shadow, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"lora",label:'<img src="%path%lora.png">',fontFamily:"Lora, serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"lovers quarrel",label:'<img src="%path%lovers_quarrel.png">',fontFamily:"Lovers Quarrel, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"m plus 1p",label:'<img src="%path%m_plus_1p.png">',fontFamily:"M PLUS 1p, sans-serif",fontStyle:"wght@100;300;400;500;700;800;900",fontDisplay:"swap",provider:"google"},{value:"m plus rounded 1c",label:'<img src="%path%m_plus_rounded_1c.png">',fontFamily:"M PLUS Rounded 1c, sans-serif",fontStyle:"wght@100;300;400;500;700;800;900",fontDisplay:"swap",provider:"google"},{value:"macondo",label:'<img src="%path%macondo.png">',fontFamily:"Macondo, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"marcellus sc",label:'<img src="%path%marcellus_sc.png">',fontFamily:"Marcellus SC, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"marck script",label:'<img src="%path%marck_script.png">',fontFamily:"Marck Script, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"martel",label:'<img src="%path%martel.png">',fontFamily:"Martel, serif",fontStyle:"wght@200;300;400;600;700;800;900",fontDisplay:"",provider:"google"},{value:"maven pro",label:'<img src="%path%maven_pro.png">',fontFamily:"Maven Pro, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"merriweather",label:'<img src="%path%merriweather.png">',fontFamily:"Merriweather, serif",fontStyle:"ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900",fontDisplay:"",provider:"google"},{value:"merriweather sans",label:'<img src="%path%merriweather_sans.png">',fontFamily:"Merriweather Sans",fontStyle:"ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800",fontDisplay:"",provider:"google"},{value:"mogra",label:'<img src="%path%mogra.png">',fontFamily:"Mogra, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"monoton",label:'<img src="%path%monoton.png">',fontFamily:"Monoton, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"montez",label:'<img src="%path%montez.png">',fontFamily:"Montez, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"montserrat",label:'<img src="%path%montserrat.png">',fontFamily:"Montserrat, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"montserrat alternates",label:'<img src="%path%montserrat_alternates.png">',fontFamily:"Montserrat Alternates, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"montserrat subrayada",label:'<img src="%path%montserrat_subrayada.png">',fontFamily:"Montserrat Subrayada, sans-serif",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"neucha",label:'<img src="%path%neucha.png">',fontFamily:"Neucha, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"neuton",label:'<img src="%path%neuton.png">',fontFamily:"Neuton, serif",fontStyle:"ital,wght@0,200;0,300;0,400;0,700;0,800;1,400",fontDisplay:"",provider:"google"},{value:"nixie one",label:'<img src="%path%nixie_one.png">',fontFamily:"Nixie One, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"nothing you could do",label:'<img src="%path%nothing_you_could_do.png">',fontFamily:"Nothing You Could Do, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"noto sans",label:'<img src="%path%noto_sans.png">',fontFamily:"Noto Sans, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"noto sans sc",label:'<img src="%path%noto_sans_sc.png">',fontFamily:"Noto Sans SC, sans-serif",fontStyle:"wght@100;300;400;500;700;900",fontDisplay:"",provider:"google"},{value:"noto serif",label:'<img src="%path%noto_serif.png">',fontFamily:"Noto Serif, serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"noto serif tc",label:'<img src="%path%noto_serif_tc.png">',fontFamily:"Noto Serif TC, serif",fontStyle:"wght@200;300;400;500;600;700;900",fontDisplay:"",provider:"google"},{value:"nunito",label:'<img src="%path%nunito.png">',fontFamily:"Nunito, sans-serif",fontStyle:"ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000",fontDisplay:"",provider:"google"},{value:"old standard tt",label:'<img src="%path%old_standard_tt.png">',fontFamily:"Old Standard TT, serif",fontStyle:"ital,wght@0,400;0,700;1,400",fontDisplay:"",provider:"google"},{value:"open sans",label:'<img src="%path%open_sans.png">',fontFamily:"Open Sans, sans-serif",fontStyle:"ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800",fontDisplay:"",provider:"google"},{value:"oranienbaum",label:'<img src="%path%oranienbaum.png">',fontFamily:"Oranienbaum, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"oswald",label:'<img src="%path%oswald.png">',fontFamily:"Oswald, sans-serif",fontStyle:"wght@200;300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"oxygen",label:'<img src="%path%oxygen.png">',fontFamily:"Oxygen, sans-serif",fontStyle:"wght@300;400;700",fontDisplay:"",provider:"google"},{value:"pacifico",label:'<img src="%path%pacifico.png">',fontFamily:"Pacifico, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"pangolin",label:'<img src="%path%pangolin.png">',fontFamily:"Pangolin, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"passion one",label:'<img src="%path%passion_one.png">',fontFamily:"Passion One, cursive",fontStyle:"wght@400;700;900",fontDisplay:"",provider:"google"},{value:"pathway gothic one",label:'<img src="%path%pathway_gothic_one.png">',fontFamily:"Pathway Gothic One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"pattaya",label:'<img src="%path%pattaya.png">',fontFamily:"Pattaya, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"petit formal script",label:'<img src="%path%petit_formal_script.png">',fontFamily:"Petit Formal Script, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"philosopher",label:'<img src="%path%philosopher.png">',fontFamily:"Philosopher, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"play",label:'<img src="%path%play.png">',fontFamily:"Play, sans-serif",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"playfair display",label:'<img src="%path%playfair_display.png">',fontFamily:"Playfair Display, serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"playfair display sc",label:'<img src="%path%playfair_display_sc.png">',fontFamily:"Playfair Display SC, serif",fontStyle:"ital,wght@0,400;0,700;0,900;1,400;1,700;1,900",fontDisplay:"",provider:"google"},{value:"podkova",label:'<img src="%path%podkova.png">',fontFamily:"Podkova, serif",fontStyle:"wght@400;500;600;700;800",fontDisplay:"",provider:"google"},{value:"poiret one",label:'<img src="%path%poiret_one.png">',fontFamily:"Poiret One, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"pompiere",label:'<img src="%path%pompiere.png">',fontFamily:"Pompiere, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"poppins",label:'<img src="%path%poppins.png">',fontFamily:"Poppins, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"prata",label:'<img src="%path%prata.png">',fontFamily:"Prata, serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"press start 2p",label:'<img src="%path%press_start_2p.png">',fontFamily:"Press Start 2P, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"prosto one",label:'<img src="%path%prosto_one.png">',fontFamily:"Prosto One, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"pt mono",label:'<img src="%path%pt_mono.png">',fontFamily:"PT Mono, monospace",fontStyle:"",fontDisplay:"",provider:"google"},{value:"pt sans",label:'<img src="%path%pt_sans.png">',fontFamily:"PT Sans, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"pt sans caption",label:'<img src="%path%pt_sans_caption.png">',fontFamily:"PT Sans Caption, sans-serif",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"pt sans narrow",label:'<img src="%path%pt_sans_narrow.png">',fontFamily:"PT Sans Narrow, sans-serif",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"pt serif",label:'<img src="%path%pt_serif.png">',fontFamily:"PT Serif, serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"pt serif caption",label:'<img src="%path%pt_serif_caption.png">',fontFamily:"PT Serif Caption, serif",fontStyle:"ital@0;1",fontDisplay:"",provider:"google"},{value:"quattrocento sans",label:'<img src="%path%quattrocento_sans.png">',fontFamily:"Quattrocento Sans, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"quattrocento",label:'<img src="%path%quattrocento.png">',fontFamily:"Quattrocento, serif",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"quicksand",label:'<img src="%path%quicksand.png">',fontFamily:"Quicksand, sans-serif",fontStyle:"wght@300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"qwigley",label:'<img src="%path%qwigley.png">',fontFamily:"Qwigley, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"raleway",label:'<img src="%path%raleway.png">',fontFamily:"Raleway, sans-serif",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"raleway dots",label:'<img src="%path%raleway_dots.png">',fontFamily:"Raleway Dots, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"redressed",label:'<img src="%path%redressed.png">',fontFamily:"Redressed, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"ribeye marrow",label:'<img src="%path%ribeye_marrow.png">',fontFamily:"Ribeye Marrow, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"righteous",label:'<img src="%path%righteous.png">',fontFamily:"Righteous, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"roboto",label:'<img src="%path%roboto.png">',fontFamily:"Roboto, sans-serif",fontStyle:"ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900",fontDisplay:"",provider:"google"},{value:"roboto condensed",label:'<img src="%path%roboto_condensed.png">',fontFamily:"Roboto Condensed, sans-serif",fontStyle:"ital,wght@0,300;0,400;0,700;1,300;1,400;1,700",fontDisplay:"",provider:"google"},{value:"roboto mono",label:'<img src="%path%roboto_mono.png">',fontFamily:"Roboto Mono, monospace",fontStyle:"ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700",fontDisplay:"",provider:"google"},{value:"roboto slab",label:'<img src="%path%roboto_slab.png">',fontFamily:"Roboto Slab, serif",fontStyle:"wght@100;200;300;400;500;600;700;800;900",fontDisplay:"",provider:"google"},{value:"rochester",label:'<img src="%path%rochester.png">',fontFamily:"Rochester, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"rouge script",label:'<img src="%path%rouge_script.png">',fontFamily:"Rouge Script, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"rubik",label:'<img src="%path%rubik.png">',fontFamily:"Rubik, sans-serif",fontStyle:"ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"rubik mono one",label:'<img src="%path%rubik_mono_one.png">',fontFamily:"Rubik Mono One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"ruslan display",label:'<img src="%path%ruslan_display.png">',fontFamily:"Ruslan Display, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"russo one",label:'<img src="%path%russo_one.png">',fontFamily:"Russo One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"sacramento",label:'<img src="%path%sacramento.png">',fontFamily:"Sacramento, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"sanchez",label:'<img src="%path%sanchez.png">',fontFamily:"Sanchez, serif",fontStyle:"ital@0;1",fontDisplay:"",provider:"google"},{value:"satisfy",label:'<img src="%path%satisfy.png">',fontFamily:"Satisfy, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"sawarabi gothic",label:'<img src="%path%sawarabi_gothic.png">',fontFamily:"Sawarabi Gothic, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"scada",label:'<img src="%path%scada.png">',fontFamily:"Scada, sans-serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"seaweed script",label:'<img src="%path%seaweed_script.png">',fontFamily:"Seaweed Script, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"seymour one",label:'<img src="%path%seymour_one.png">',fontFamily:"Seymour One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"shadows into light two",label:'<img src="%path%shadows_into_light_two.png">',fontFamily:"Shadows Into Light Two, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"six caps",label:'<img src="%path%six_caps.png">',fontFamily:"Six Caps, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"snowburst one",label:'<img src="%path%snowburst_one.png">',fontFamily:"Snowburst One, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"source code pro",label:'<img src="%path%source_code_pro.png">',fontFamily:"Source Code Pro, monospace",fontStyle:"ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"source sans pro",label:'<img src="%path%source_sans_pro.png">',fontFamily:"Source Sans Pro, sans-serif",fontStyle:"ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900",fontDisplay:"",provider:"google"},{value:"special elite",label:'<img src="%path%special_elite.png">',fontFamily:"Special Elite, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"spectral",label:'<img src="%path%spectral.png">',fontFamily:"Spectral, serif",fontStyle:"ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800",fontDisplay:"",provider:"google"},{value:"spectral_sc",label:'<img src="%path%spectral_sc.png">',fontFamily:"Spectral SC, serif",fontStyle:"ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800",fontDisplay:"",provider:"google"},{value:"squada one",label:'<img src="%path%squada_one.png">',fontFamily:"Squada One, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"stalinist one",label:'<img src="%path%stalinist_one.png">',fontFamily:"Stalinist One, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"stint ultra expanded",label:'<img src="%path%stint_ultra_expanded.png">',fontFamily:"Stint Ultra Expanded, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"syncopate",label:'<img src="%path%syncopate.png">',fontFamily:"Syncopate, sans-serif",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"tangerine",label:'<img src="%path%tangerine.png">',fontFamily:"Tangerine, cursive",fontStyle:"wght@400;700",fontDisplay:"",provider:"google"},{value:"tenor sans",label:'<img src="%path%tenor_sans.png">',fontFamily:"Tenor Sans, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"tinos",label:'<img src="%path%tinos.png">',fontFamily:"Tinos, serif",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"ubuntu",label:'<img src="%path%ubuntu.png">',fontFamily:"Ubuntu, sans-serif",fontStyle:"ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700",fontDisplay:"",provider:"google"},{value:"ubuntu condensed",label:'<img src="%path%ubuntu_condensed.png">',fontFamily:"Ubuntu Condensed, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"ubuntu mono",label:'<img src="%path%ubuntu_mono.png">',fontFamily:"Ubuntu Mono, monospace",fontStyle:"ital,wght@0,400;0,700;1,400;1,700",fontDisplay:"",provider:"google"},{value:"underdog",label:'<img src="%path%underdog.png">',fontFamily:"Underdog, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"unifrakturmaguntia",label:'<img src="%path%unifrakturmaguntia.png">',fontFamily:"UnifrakturMaguntia, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"vast shadow",label:'<img src="%path%vast_shadow.png">',fontFamily:"Vast Shadow, cursive",fontStyle:"",fontDisplay:"",provider:"google"},{value:"viga",label:'<img src="%path%viga.png">',fontFamily:"Viga, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"vollkorn",label:'<img src="%path%vollkorn.png">',fontFamily:"Vollkorn, serif",fontStyle:"ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900",fontDisplay:"",provider:"google"},{value:"vollkorn sc",label:'<img src="%path%vollkorn_sc.png">',fontFamily:"Vollkorn SC, serif",fontStyle:"wght@400;600;700;900",fontDisplay:"",provider:"google"},{value:"voltaire",label:'<img src="%path%voltaire.png">',fontFamily:"Voltaire, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"wire one",label:'<img src="%path%wire_one.png">',fontFamily:"Wire One, sans-serif",fontStyle:"",fontDisplay:"",provider:"google"},{value:"yanone kaffeesatz",label:'<img src="%path%yanone_kaffeesatz.png">',fontFamily:"Yanone Kaffeesatz, sans-serif",fontStyle:"wght@200;300;400;500;600;700",fontDisplay:"",provider:"google"},{value:"yeseva one",label:'<img src="%path%yeseva_one.png">',fontFamily:"Yeseva One, cursive",fontStyle:"",fontDisplay:"",provider:"google"}];class g{constructor(t){this.builder=t}setTextAlign(t){const e=this.builder.cssClasses;this.getSelectedBlocks(!0).forEach((i=>{i.style.textAlign="",i.classList.remove(e.textAlign.left),i.classList.remove(e.textAlign.center),i.classList.remove(e.textAlign.right),i.classList.remove(e.textAlign.justify),"left"===t&&i.classList.add(e.textAlign.left),"center"===t&&i.classList.add(e.textAlign.center),"right"===t&&i.classList.add(e.textAlign.right),"justify"===t&&i.classList.add(e.textAlign.justify)}))}setTextColor(t){let e=this.getElm();const i=this.getSelectedText();if(""===i.trim())e.style.color=t;else if(e.innerText===i)e.style.color=t;else{this.builder.doc.execCommand("ForeColor",!1,t);let e=this.builder.doc.getElementsByTagName("font");for(let i=0,n=e.length;i<n;++i){""!==e[i].color&&(e[i].removeAttribute("color"),e[i].style.color=t)}}}setTextBg(t){let e=this.getElm();const i=this.getSelectedText();""===i.trim()||e.innerText===i?e.style.backgroundColor=t:this.builder.doc.execCommand("BackColor",!1,t)}setAction(t,e){let i=this.builder.controlpanel.activeColumn,n=i.querySelectorAll("span");Array.prototype.forEach.call(n,(t=>{t.setAttribute("data-keep","1"),t.style.cssText&&t.setAttribute("data-style",t.style.cssText)})),setTimeout((()=>{this.builder.doc.execCommand(t,!1,null),i=this.builder.controlpanel.activeColumn,n=i.querySelectorAll("span"),Array.prototype.forEach.call(n,(t=>{if(t.getAttribute("data-keep")){let e=t.getAttribute("data-style");e&&(t.style.cssText=e),t.removeAttribute("data-style")}})),n=i.querySelectorAll("span"),Array.prototype.forEach.call(n,(t=>{t.getAttribute("data-keep")||(t.outerHTML=t.innerHTML)})),n=i.querySelectorAll("span"),Array.prototype.forEach.call(n,(t=>{t.getAttribute("data-keep")&&t.removeAttribute("data-keep")}));let o=i.querySelectorAll("ul,p");Array.prototype.forEach.call(o,(t=>{""===t.innerHTML.trim()&&t.parentNode.removeChild(t)})),e()}),10)}formatText(t){"bold"===t&&this.execCommandToggle("fontWeight"),"italic"===t&&this.execCommandToggle("fontStyle"),"underline"===t&&this.execCommandToggle("textUnderline"),"strikethrough"===t&&this.execCommandToggle("textLinethrough"),"superscript"===t&&this.execCommandToggle("superscript"),"subscript"===t&&this.execCommandToggle("subscript"),"uppercase"===t&&this.execCommandToggle("textTransform"),"clean"===t&&(this.builder.doc.execCommand("removeFormat",!1,null),this.execCommandToggle("clean"))}setParagraph(t){if(!t)return;const e=this.getSelectedBlocks(!0);e.forEach((e=>{e.setAttribute("data-replacetagname","1");const i=this.builder.doc.createElement(t);for(var n=0,o=e.attributes.length;n<o;++n){var s=e.attributes.item(n).nodeName,a=e.attributes.item(n).nodeValue;i.setAttribute(s,a)}for(;e.firstChild;)i.appendChild(e.firstChild);e.parentNode.replaceChild(i,e);const l=this.builder.doc.querySelector('[data-replacetagname="1"]');l&&(l.removeAttribute("data-replacetagname"),this.selectElementContents(l))})),0===e.length&&this.builder.doc.execCommand("formatBlock",!1,t)}setLineHeight(t){const e=this.builder.cssClasses.leading;let i,n=this.getElm();if(!n)return;if(""===t)i="";else if("+"===t||"-"===t)for(let o=0;o<Object.keys(e).length;o++){let s=Object.values(e)[o];if(n.closest(`.${s}:not(.is-builder)`)){if("+"===t){if(o+1===Object.keys(e).length)return;i=Object.values(e)[o+1];break}if("-"===t){if(o-1<0)return;i=Object.values(e)[o-1];break}}}else"0.8"===t?i=e.leading_8:"0.9"===t?i=e.leading_9:"1"===t?i=e.leading_10:"1.1"===t?i=e.leading_11:"1.2"===t?i=e.leading_12:"1.3"===t?i=e.leading_13:"1.4"===t?i=e.leading_14:"1.5"===t?i=e.leading_15:"1.6"===t?i=e.leading_16:"1.7"===t?i=e.leading_17:"1.8"===t?i=e.leading_18:"1.9"===t?i=e.leading_19:"2"===t?i=e.leading_20:"2.1"===t?i=e.leading_21:"2.2"===t&&(i=e.leading_22);i||("+"===t?i=e.leading_16:"-"===t&&(i=e.leading_14));const o=this.getParentBlock(n);o&&(o.style.lineHeight=""),this.execCommandClass(i,e,!0,"block")}setLetterSpacing(t){const e=this.builder.cssClasses.tracking;let i,n=this.getElm();if(!n)return;if(""===t)i="";else if("+"===t||"-"===t)for(let o=0;o<Object.keys(e).length;o++){let s=Object.values(e)[o];if(n.closest(`.${s}`)){if("+"===t){if(o+1===Object.keys(e).length)return;i=Object.values(e)[o+1];break}if("-"===t){if(o-1<0)return;i=Object.values(e)[o-1];break}}}else"1"===t&&(i=e.tracking_025),"2"===t&&(i=e.tracking_050);i||("+"===t?i=e.tracking_025:"-"===t&&(i=e.tracking__025));const o=this.getParentBlock(n);o&&(o.style.letterSpacing=""),i===e.tracking_000&&(i=""),this.execCommandClass(i,e)}applyClassFontSize(t,e){const i=this.builder.fontSizeClassValues;let n="",o=this.builder.screenMode;"desktop"===o?n="":"tablet-landscape"===o?n="md-":"tablet"===o?n="sm-":"mobile"===o&&(n="xs-");let s=Number(window.getComputedStyle(t).getPropertyValue("font-size").match(/\d+/)[0]),a="";a="+"===e||"-"===e||""===e?e:n+"size-"+e;for(var l="",r=0;r<=i.length-1;r++)if(t.classList.contains(n+"size-"+i[r])){l=n+"size-"+i[r];let e=i[r];this.doFunction(t,(t=>{t.classList.remove(n+"size-"+e)}),!0)}else{let e=i[r];this.doFunction(t,(t=>{t.classList.remove(n+"size-"+e)}),!0)}if(""===l)for(let e=0;e<=i.length-1;e++)t.classList.contains("size-"+i[e])&&(l=n+"size-"+i[e]);if(""===l&&("+"===a||"-"===a))for(r=0;r<=i.length-1;r++)s>=i[r]&s<i[r+1]&&(l=n+"size-"+i[r]);if("+"===a){r=1*l.replace(n+"size-","");var c=i.indexOf(r);c<i.length-1&&(l=n+"size-"+i[c+1]),this.doFunction(t,(function(t){t.classList.add(l)}),!0)}else"-"===a?(r=1*l.replace(n+"size-",""),(c=i.indexOf(r))>=1&&(l=n+"size-"+i[c-1]),this.doFunction(t,(function(t){t.classList.add(l)}),!0)):""===a||this.doFunction(t,(function(t){t.classList.add(a)}),!0);this.doFunction(t,(function(t){t.style.fontSize=""}),!0),this.cleanClassSize(t,a)}cleanClassSize(t,e){if(!t.hasChildNodes())return;const i=Array.from(t.children).filter((t=>t.classList.contains(e)));i&&i.length>0&&i.forEach((t=>{t.classList.remove(e)}));const n=Array.from(t.children).map((t=>this.cleanClassSize(t,e)));n&&n.length}applyClassFontWeight(t,e){const i=this.builder.cssClasses.fontWeight;for(let e=0;e<Object.keys(i).length;e++){let n=Object.values(i)[e];t.classList.contains(n)&&t.classList.remove(n),this.doFunction(t,(t=>{t.classList.contains(n)&&t.classList.remove(n)}),!0)}let n="";"100"===e&&(n=i.thin),"200"===e&&(n=i.extralight),"300"===e&&(n=i.light),"400"===e&&(n=i.normal),"500"===e&&(n=i.medium),"600"===e&&(n=i.semibold),"700"===e&&(n=i.bold),"800"===e&&(n=i.extrabold),"900"===e&&(n=i.black),""===n||t.classList.add(n),this.doFunction(t,(function(t){t.style.fontWeight=""}),!0),this.cleanClassSize(t,n)}execCommandClass(t,e){this.getSelectedBlocks(!0).forEach((i=>{for(let t=0;t<Object.keys(e).length;t++){let n=Object.values(e)[t];i.classList.remove(n)}""!==t&&i.classList.add(t),this.cleanChildrenClass(i,e),this.cleanUnusedSpan(i)}))}updateSelectionClass(t,e,i){for(let t=0;t<Object.keys(e).length;t++){let n=Object.values(e)[t];i.classList.remove(n)}return""!==t&&i.classList.add(t),this.cleanChildrenClass(i,e),this.cleanUnusedSpan(i),i}cleanChildrenClass(t,e){if(!t.hasChildNodes())return;Array.from(t.children).map((t=>{for(let i=0;i<Object.keys(e).length;i++){let n=Object.values(e)[i];t.classList.remove(n)}}));const i=Array.from(t.children).map((t=>this.cleanChildrenClass(t,e)));i&&i.length}execCommandToggle(t){const e=this.builder.cssClasses,i=this.getSelectedBlocks();if(i.length>0)i.forEach((i=>{if("fontWeight"===t){let t=!1;i.classList.contains(e.fontWeight.defaultBold)&&(t=!0),i.classList.remove(e.fontWeight.thin),i.classList.remove(e.fontWeight.extralight),i.classList.remove(e.fontWeight.light),i.classList.remove(e.fontWeight.normal),i.classList.remove(e.fontWeight.medium),i.classList.remove(e.fontWeight.semibold),i.classList.remove(e.fontWeight.bold),i.classList.remove(e.fontWeight.extrabold),i.classList.remove(e.fontWeight.black),t||i.classList.add(e.fontWeight.defaultBold)}if("fontStyle"===t){let t=!1;i.classList.contains(e.fontStyle.italic)&&(t=!0),i.classList.remove(e.fontStyle.italic),i.classList.remove(e.fontStyle.normal),t||i.classList.add(e.fontStyle.italic)}if("textUnderline"===t){let t=!1;i.classList.contains(e.textDecoration.underline)&&(t=!0),i.classList.remove(e.textDecoration.linethrough),i.classList.remove(e.textDecoration.underline),i.classList.remove(e.textDecoration.normal),t||i.classList.add(e.textDecoration.underline)}if("textLinethrough"===t){let t=!1;i.classList.contains(e.textDecoration.linethrough)&&(t=!0),i.classList.remove(e.textDecoration.underline),i.classList.remove(e.textDecoration.linethrough),i.classList.remove(e.textDecoration.normal),t||i.classList.add(e.textDecoration.linethrough)}if("textTransform"===t){let t="";i.classList.contains(e.textTransform.uppercase)&&(t="uppercase"),i.classList.remove(e.textTransform.uppercase),i.classList.remove(e.textTransform.lowercase),i.classList.remove(e.textTransform.capitalize),i.classList.remove(e.textTransform.normal),""===t&&i.classList.add(e.textTransform.uppercase)}if("clean"===t&&(i.className="",i.style.cssText=""),"superscript"===t){let t=!1;i.classList.contains(e.extend.superscript)&&(t=!0),t?i.classList.remove(e.extend.superscript):i.classList.add(e.extend.superscript)}if("subscript"===t){let t=!1;i.classList.contains(e.extend.subscript)&&(t=!0),t?i.classList.remove(e.extend.subscript):i.classList.add(e.extend.subscript)}this.cleanChildrenToggle(t,i,e),this.cleanUnusedSpan(i)}));else{let i=this.builder.win.getSelection(),n=this.getElm();if(!n)return;n&&n.innerText===i.toString().trim()||""===i.toString().trim()?this.updateSelectionToggle(t,e,n):this.replaceSelectionToggle(t,e,i,n)}}updateSelectionToggle(t,e,i){if("fontWeight"===t){let t=!1;i.classList.contains(e.fontWeight.defaultBold)&&(t=!0);parseInt(window.getComputedStyle(i,null).getPropertyValue("font-weight"))>=500&&(t=!0),i.classList.remove(e.fontWeight.thin),i.classList.remove(e.fontWeight.extralight),i.classList.remove(e.fontWeight.light),i.classList.remove(e.fontWeight.normal),i.classList.remove(e.fontWeight.medium),i.classList.remove(e.fontWeight.semibold),i.classList.remove(e.fontWeight.bold),i.classList.remove(e.fontWeight.extrabold),i.classList.remove(e.fontWeight.black),t?i.classList.add(e.fontWeight.defaultNormal):i.classList.add(e.fontWeight.defaultBold)}if("fontStyle"===t){let t=!1;i.classList.contains(e.fontStyle.italic)&&(t=!0),i.classList.remove(e.fontStyle.italic),i.classList.remove(e.fontStyle.normal),t?i.classList.add(e.fontStyle.normal):i.classList.add(e.fontStyle.italic)}if("textUnderline"===t){let t=!1;i.classList.contains(e.textDecoration.underline)&&(t=!0),i.classList.remove(e.textDecoration.underline),i.classList.remove(e.textDecoration.linethrough),i.classList.remove(e.textDecoration.normal),t?i.classList.add(e.textDecoration.normal):i.classList.add(e.textDecoration.underline)}if("textLinethrough"===t){let t=!1;i.classList.contains(e.textDecoration.linethrough)&&(t=!0),i.classList.remove(e.textDecoration.underline),i.classList.remove(e.textDecoration.linethrough),i.classList.remove(e.textDecoration.normal),t?i.classList.add(e.textDecoration.normal):i.classList.add(e.textDecoration.linethrough)}if("textTransform"===t){let t="";i.classList.contains(e.textTransform.uppercase)&&(t="uppercase"),i.classList.remove(e.textTransform.uppercase),i.classList.remove(e.textTransform.lowercase),i.classList.remove(e.textTransform.capitalize),i.classList.remove(e.textTransform.normal),""===t&&i.classList.add(e.textTransform.uppercase)}if("clean"===t&&(i.className="",i.style.cssText=""),"superscript"===t){let t=!1;i.classList.contains(e.extend.superscript)&&(t=!0),t?i.classList.remove(e.extend.superscript):i.classList.add(e.extend.superscript)}if("subscript"===t){let t=!1;i.classList.contains(e.extend.subscript)&&(t=!0),t?i.classList.remove(e.extend.subscript):i.classList.add(e.extend.subscript)}return this.cleanChildrenToggle(t,i,e),this.cleanUnusedSpan(i),i}replaceSelectionToggle(t,e,i,n){const o=i.getRangeAt(0),s=o.extractContents(),a=document.createElement("span");if("fontWeight"===t){let t=!1;n.closest(`.${e.fontWeight.defaultBold}`)&&(t=!0,n.classList.contains(e.fontWeight.defaultNormal)&&(t=!1));parseInt(window.getComputedStyle(n,null).getPropertyValue("font-weight"))>=500&&(t=!0),t?a.classList.add(e.fontWeight.defaultNormal):a.classList.add(e.fontWeight.defaultBold)}if("fontStyle"===t){let t=!1;n.closest(`.${e.fontStyle.italic}`)&&(t=!0,n.classList.contains(e.fontStyle.normal)&&(t=!1)),t?a.classList.add(e.fontStyle.normal):a.classList.add(e.fontStyle.italic)}if("textUnderline"===t){let t=!1;n.closest(`.${e.textDecoration.underline}`)&&(t=!0),t||a.classList.add(e.textDecoration.underline)}if("textLinethrough"===t){let t=!1;n.closest(`.${e.textDecoration.linethrough}`)&&(t=!0),t||a.classList.add(e.textDecoration.linethrough)}if("textTransform"===t){let t="";n.closest(`.${e.textTransform.uppercase}`)&&(t="uppercase"),this.removeClass(a,e.textTransform.uppercase),this.removeClass(a,e.textTransform.lowercase),this.removeClass(a,e.textTransform.capitalize),this.removeClass(a,e.textTransform.normal),""===t&&a.classList.add(e.textTransform.uppercase)}if("superscript"===t){let t=!1;n.closest(`.${e.extend.superscript}`)&&(t=!0),t||a.classList.add(e.extend.superscript)}if("subscript"===t){let t=!1;n.closest(`.${e.extend.subscript}`)&&(t=!0),t||a.classList.add(e.extend.subscript)}return a.appendChild(s),this.cleanChildrenToggle(t,a,e),this.cleanUnusedSpan(a),o.insertNode(a),i.selectAllChildren(a),a}cleanChildrenToggle(t,e,i){if(!e.hasChildNodes())return;"fontWeight"===t&&Array.from(e.children).map((t=>{t.classList.remove(i.fontWeight.thin),t.classList.remove(i.fontWeight.extralight),t.classList.remove(i.fontWeight.light),t.classList.remove(i.fontWeight.normal),t.classList.remove(i.fontWeight.medium),t.classList.remove(i.fontWeight.semibold),t.classList.remove(i.fontWeight.bold),t.classList.remove(i.fontWeight.extrabold),t.classList.remove(i.fontWeight.black)})),"fontStyle"===t&&Array.from(e.children).map((t=>{t.classList.remove(i.fontStyle.italic),t.classList.remove(i.fontStyle.normal)})),"textUnderline"===t&&Array.from(e.children).map((t=>{t.classList.remove(i.textDecoration.underline),t.classList.remove(i.textDecoration.linethrough),t.classList.remove(i.textDecoration.normal)})),"textLinethrough"===t&&Array.from(e.children).map((t=>{t.classList.remove(i.textDecoration.underline),t.classList.remove(i.textDecoration.linethrough),t.classList.remove(i.textDecoration.normal)})),"textTransform"===t&&Array.from(e.children).map((t=>{t.classList.remove(i.textTransform.uppercase),t.classList.remove(i.textTransform.lowercase),t.classList.remove(i.textTransform.capitalize),t.classList.remove(i.textTransform.normal)})),"clean"===t&&Array.from(e.children).map((t=>{t.className="",t.style.cssText=""})),"superscript"===t&&Array.from(e.children).map((t=>{t.classList.remove(i.extend.superscript)})),"subscript"===t&&Array.from(e.children).map((t=>{t.classList.remove(i.extend.subscript)}));const n=Array.from(e.children).map((e=>this.cleanChildrenToggle(t,e,i)));n&&n.length}execCommand(t,e,i){const n=this.getSelectedBlocks();if(n.length>0)n.forEach((t=>{i(!0,t)}));else{const n=this.builder.win.getSelection(),o=this.getElm();if(!o)return void(i&&i(!1));let s;s=o&&o.innerText===n.toString().trim()||""===n.toString().trim()?this.updateSelection(t,e,o):this.replaceSelection(t,e,n,o),i&&i(!0,s)}}updateSelection(t,e,i){return i.style[t]=this.getStyleValue(i,t,e),this.checkStyleIfSameAsParent(i,t),this.cleanChildren(t,i),this.cleanUnusedSpan(i),i}replaceSelection(t,e,i,n){const o=i.getRangeAt(0),s=o.extractContents(),a=this.createSpan(n,t,e);return a.appendChild(s),this.cleanChildren(t,a),this.cleanUnusedSpan(a),o.insertNode(a),i.selectAllChildren(a),this.checkStyleIfSameAsParent(a,t),a}createSpan(t,e,i){const n=document.createElement("span");return n.style[e]=this.getStyleValue(t,e,i),n}checkStyleIfSameAsParent(t,e){if(t.parentNode&&(t.parentNode.style[e]===t.style[e]||window.getComputedStyle(t.parentNode,null).getPropertyValue(e)===t.style[e])){t.style[e]="",""!==t.getAttribute("style")&&null!==t.style||t.removeAttribute("style");let i=0===t.attributes.length||1===t.attributes.length&&t.hasAttribute("data-keep");if("span"===t.nodeName.toLowerCase()&&i){const e=document.createTextNode(t.textContent);t.parentElement.replaceChild(e,t)}}}cleanChildren(t,e){if(!e.hasChildNodes())return;const i=Array.from(e.children).filter((e=>void 0!==e.style[t]&&""!==e.style[t.style]));i&&i.length>0&&i.forEach((e=>{e.style[t]="",""!==e.getAttribute("style")&&null!==e.style||e.removeAttribute("style")}));const n=Array.from(e.children).map((e=>this.cleanChildren(t,e)));n&&n.length}findParentStyle(t,e){if("HTML"===t.nodeName.toUpperCase()||"BODY"===t.nodeName.toUpperCase())return null;if(!t.parentNode)return null;if(null!==t.style[e]&&void 0!==t.style[e]&&""!==t.style[e])return t;this.findParentStyle(t.parentNode,e)}getStyleValue(t,e,i){if("font-weight"===e||"font-style"===e||"text-decoration"===e||"text-transform"===e){let n,o=this.findParentStyle(t,e);if(o&&(n=o.style[e]),i===n){t.style[e]="";let o=window.getComputedStyle(t,null).getPropertyValue(e);t.style[e]=n,i=o}}return i}setFont(t,e,i,n){let o=this.getElm(),s=this.getSelectedText();if(""!==s.trim()&&o.innerText!==s){this.builder.doc.execCommand("fontName",!1,t);for(var a=this.builder.doc.getElementsByTagName("font"),l=0,r=a.length;l<r;++l)a[l].face.replace(/'/g,"")===t.replace(/'/g,"")&&(a[l].removeAttribute("face"),a[l].style.fontFamily=t);for(l=0,r=(a=this.builder.doc.querySelectorAll("[face]")).length;l<r;++l){let t=a[l].getAttribute("face");if(-1!==t.indexOf(",")){var c=t.split(",")[0],d=t.split(",")[1];-1!==c.indexOf(" ")&&(t=`'${c}',${d}`)}a[l].style.fontFamily=t,a[l].removeAttribute("face")}}else{o.style.fontFamily=t;let e=o.querySelectorAll("*");Array.prototype.forEach.call(e,(t=>{""!==t.style.fontFamily&&(t.style.fontFamily="")}))}let u=e;u=u?":"+u:"";let p="";i&&(p="&display=swap");let h=t.split(",")[0];if(h=h.replace(/'/g,""),"google"===n){let e=this.checkIfFontCssLinkExists(t),i=o.closest(".is-builder");if(!e&&i){let e="";if(this.builder.fontPath){const n=t.split(",")[0].toLowerCase().replace(/'/g,"").replace(/"/g,"").replace(/\s/g,"-")+".css";e=this.builder.fontPath+n,this.appendHtml(i,`<link data-name="fontfamily" href="${e}" rel="stylesheet" property="stylesheet">`)}else this.appendHtml(i,'<link href="//fonts.googleapis.com/css2?family='+h+p+u+'" rel="stylesheet" property="stylesheet">')}}if("others"===n){let e=this.checkIfFontCssLinkExists(t),i=o.closest(".is-builder");if(!e&&i){let e="";if(this.builder.fontPath){const n=t.split(",")[0].toLowerCase().replace(/'/g,"").replace(/"/g,"").replace(/\s/g,"-")+".css";e=this.builder.fontPath+n,this.appendHtml(i,`<link data-name="fontfamily" href="${e}" rel="stylesheet" property="stylesheet">`)}}}this.cleanupFontCssLink()}cleanupFontCssLink(){const t=[],e=this.builder.wrapperEl;if(e)e.querySelectorAll("*").forEach((function(e){let i=window.getComputedStyle(e).getPropertyValue("font-family");-1===t.indexOf(i)&&t.push(i)}));else{this.builder.doc.querySelectorAll(".is-builder").forEach((e=>{e.querySelectorAll("*").forEach((function(e){let i=window.getComputedStyle(e).getPropertyValue("font-family");-1===t.indexOf(i)&&t.push(i)}))}))}let i=this.builder.doc.getElementsByTagName("link");for(let e=0;e<i.length;e++){let n=i[e].href.toLowerCase();if(-1!==n.indexOf("googleapis")){n=n.replace(/\+/g," ").replace(/%20/g," ");let o=n.substr(n.indexOf("family=")+7);-1!==o.indexOf(":")&&(o=o.split(":")[0]),-1!==o.indexOf("|")&&(o=o.split("|")[0]),o=o.replace("&display=swap","");let s=!1;if(t.forEach((t=>{let e=t.split(",")[0].replace(/"/g,"").replace(/'/g,"").toLowerCase();o===e&&(s=!0)})),!s){i[e].getAttribute("data-protect")||i[e].setAttribute("data-rel","_del")}}else if("fontfamily"===i[e].getAttribute("data-name")){let o=!1;if(t.forEach((t=>{const e=t.split(",")[0].replace(/'/g,"").replace(/"/g,"").replace(/\s/g,"-").toLowerCase()+".css";-1===n.toLowerCase().indexOf("/"+e)||(o=!0)})),!o){i[e].getAttribute("data-protect")||i[e].setAttribute("data-rel","_del")}}}[].forEach.call(this.builder.doc.querySelectorAll('link[data-rel="_del"]'),(function(t){t.parentNode.removeChild(t)}))}checkIfFontCssLinkExists(t){let e=!1,i=t.split(",")[0];i=i.replace(/'/g,""),i=i.replace(/"/g,""),i=i.toLowerCase();let n=this.builder.doc.getElementsByTagName("link");for(let t=0;t<n.length;t++){let o=n[t].href.toLowerCase();if(-1!==o.indexOf("googleapis")){if(!this.builder.fontPath){o=o.replace(/\+/g," ").replace(/%20/g," ");let t=o.substr(o.indexOf("family=")+7);-1!==t.indexOf(":")&&(t=t.split(":")[0]),-1!==t.indexOf("|")&&(t=t.split("|")[0]),t=t.replace("&display=swap",""),t===i.toLowerCase()&&(e=!0)}}else if("fontfamily"===n[t].getAttribute("data-name")&&this.builder.fontPath){let t=i.replace(/\s/g,"-").toLowerCase()+".css";-1!==o.toLowerCase().indexOf("/"+t)&&(e=!0)}}return e}getElm(){const t=this.builder.win.getSelection().anchorNode;if(!t)return!1;let e=t.nodeType!==Node.TEXT_NODE&&t.nodeType!==Node.COMMENT_NODE?t:t.parentElement;return e&&e.classList.contains("icon")&&this.builder.editor.inspectedElement&&e!==this.builder.editor.inspectedElement&&(e=this.builder.editor.inspectedElement),e}getSelectedBlocks(t){let e=!1,i=this.builder.win.getSelection(),n=[];if(!i.isCollapsed){let t=i.getRangeAt(0),e=t.commonAncestorContainer;const o=e=>{if(e.nodeType===Node.ELEMENT_NODE&&t.intersectsNode(e)&&n.push(e),e.childNodes.length>0)for(let t=0;t<e.childNodes.length;t++)o(e.childNodes[t])};o(e),n.length>0&&n[0]===e&&n.shift()}let o=[];const s=["p","h1","h2","h3","h4","h5","h6","div","pre","td","th"];if(n.forEach((t=>{const i=t.tagName.toLowerCase();s.includes(i)&&(e=!0,o.push(t))})),2===o.length&&o[0].innerText.trim()===i.toString().trim()&&o.pop(),e)return o;if(t){const t=this.getElm();return t.classList.contains("cell-active")?[]:[t]}return[]}getSelectedText(){if(this.builder.win.getSelection)return this.builder.win.getSelection().toString();if(this.builder.doc.getSelection)return this.builder.doc.getSelection().toString();var t=this.builder.doc.selection&&this.builder.doc.selection.createRange();return!!t.text&&t.text}getStyle(t,e){return window.getComputedStyle?window.getComputedStyle(t,null).getPropertyValue(e):t.style[e.replace(/-([a-z])/g,(function(t){return t[1].toUpperCase()}))]}cleanUnusedSpan(t){let e=t.querySelectorAll("span");const i=Array.prototype.filter;let n=i.call(e,(t=>0===t.attributes.length));n&&n.length>0&&n.forEach((t=>{t.outerHTML=t.innerHTML})),e=t.querySelectorAll("span"),i.call(e,(t=>{""===t.innerHTML&&t.parentNode.removeChild(t)})),e=t.querySelectorAll("span"),n=i.call(e,(t=>0===t.attributes.length)),n&&n.length>0&&this.cleanUnusedSpan(t)}selectElementContents(t){const e=this.builder.doc.createRange();e.selectNodeContents(t);const i=this.builder.win.getSelection();i.removeAllRanges(),i.addRange(e)}getParentBlock(t){for(;t;){if(!t.tagName)return!1;if("BODY"===t.tagName||"HTML"===t.tagName)return!1;if("inline"!==this.getStyle(t,"display"))return t;t=t.parentNode}}appendHtml(t,e){t&&t.insertAdjacentHTML("beforeend",e)}pasteHtmlAtCaret(t,e){this.builder.editor.util.restoreSelection();const i=this.builder.win.getSelection();if(i.getRangeAt&&i.rangeCount){let n=i.getRangeAt(0);n.deleteContents();let o=this.builder.doc.createElement("div");o.innerHTML=t;let s,a,l=this.builder.doc.createDocumentFragment();for(;s=o.firstChild;)a=l.appendChild(s);let r=l.firstChild;n.insertNode(l),a&&(n=n.cloneRange(),n.setStartAfter(a),e?n.setStartBefore(r):n.collapse(!0),i.removeAllRanges(),this.builder.editor.isTouchSupport||i.addRange(n))}}doFunction(t,e,i){if(e(t),i){let i=Array.prototype.slice.call(t.getElementsByTagName("*"));for(var n=0;n<i.length;n++)e(i[n])}}}class v{constructor(t,e){this.builder=e,this.text=new g(e);let n="";for(let t=0;t<e.defaultFontSizes.length;t++)n+=`<button title="${e.defaultFontSizes[t]}px" data-value="${e.defaultFontSizes[t]}">${e.defaultFontSizes[t]}</button>`;let o="";this.builder.leadingPreset.forEach((t=>{o+=`<button title="${t}" data-value="${t}">${t}</button>`}));var s="";if(e.customTags.length>0)for(let t=0;t<e.customTags.length;t++)s+=`<button data-tag="${e.customTags[t][1]}"> ${e.customTags[t][0]} </button>`;let a=`\n <div class="submain">\n\n <div class="group">\n <button title="${i("Bold")}" data-format="bold"><span style="font-family:serif;font-size:14px;margin-top:1px;">B</span></button>\n <button title="${i("Italic")}" data-format="italic"><span style="font-family:serif;font-size:16px;font-style:italic;">i</span></button>\n <button title="${i("Underline")}" data-format="underline"><span style="font-family:serif;font-size:13px;text-decoration:underline;">U</span></button>\n <button title="${i("Strikethrough")}" data-format="strikethrough"><svg style="width:15px;height:15px;"><use xlink:href="#icon-strike"></use></svg></button>\n <button title="${i("Uppercase")}" data-format="uppercase"><span style="font-family:serif;font-size:13px;display:inline-block;text-transform: none;">Aa</span></button>\n </div>\n\n <div class="group">\n <button title="${i("Align Left")}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>\n <button title="${i("Align Center")}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>\n <button title="${i("Align Right")}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>\n <button title="${i("Align Full")}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>\n <button title="${i("Clean")}" data-format="clean"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n \x3c!--\n <div class="group">\n <button title="${i("Superscript")}" data-format="superscript"><span style="font-family:serif;font-size:13px;">x</span><sup style="font-size:10px;margin-top:-6px">2</sup></button>\n <button title="${i("Subscript")}" data-format="subscript"><span style="font-family:serif;font-size:13px;">x</span><sub style="font-size:10px;margin-bottom:-6px;">2</sub></button>\n </div>\n --\x3e\n\n <div class="group flex">\n <button title="${i("Link")}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>\n <button title="${i("Image")}" class="btn-image"><svg><use xlink:href="#icon-image"></use></svg></button>\n <button title="${i("Icon")}" class="btn-icon"><svg><use xlink:href="#icon-mood-smile"></use></svg></button>\n </div>\n\n <div class="customtags">\n <div class="label mt-1">${i("Insert")}:</div>\n <div class="group">\n <div>\n ${s}\n </div>\n </div>\n </div>\n\n \x3c!--\n <div class="flex">\n <div class="mr-8">\n <div class="label mt-2">${i("Color")}:</div>\n <div class="group color-pick">\n <input type="text" class="btn-color coloris" value="#ffffff">\n </div>\n </div>\n <div>\n <div class="label mt-2">${i("Highlight")}:</div>\n <div class="group color-pick">\n <input type="text" class="btn-backcolor coloris" value="#ffffff">\n </div>\n </div>\n </div>\n --\x3e\n\n <div class="flex">\n <div class="mr-8">\n <div class="label mt-2">${i("Color")}:</div>\n <div class="group">\n <button title="${i("Color")}" class="btn-color is-btn-color"></button>\n </div>\n </div>\n <div>\n <div class="label mt-2">${i("Highlight")}:</div>\n <div class="group">\n <button title="${i("Color")}" class="btn-backcolor is-btn-color"></button>\n </div>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item" aria-expanded="false" aria-controls="contenttext1">\n ${i("Font Settings")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="contenttext1" aria-hidden="true">\n\n <div class="subpanel">\n <div class="label mt-1">${i("Font")}:</div>\n\n <div class="choices" style="margin:0;width:218px;">\n <select class="inp-fontfamily">\n </select>\n </div>\n\n <div class="label changedevice">\n <span>${i("Font Size")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n\n <div class="group fontsizes">\n ${n}\n <button title="${i("Decrease")}" data-value="-" style="font-size:13px">-</button>\n <button title="${i("Increase")}" data-value="+" style="font-size:13px">+</button>\n <button title="${i("Clear")}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label">${i("Font Weight")}:</div>\n \n <div class="group fontweight">\n <button title="100" data-value="100">100</button>\n <button title="200" data-value="200">200</button>\n <button title="300" data-value="300">300</button>\n <button title="400" data-value="400">400</button>\n <button title="500" data-value="500">500</button>\n <button title="600" data-value="600">600</button>\n <button title="700" data-value="700">700</button>\n <button title="800" data-value="800">800</button>\n <button title="900" data-value="900">900</button>\n <button title="${i("Clear")}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item" aria-expanded="false" aria-controls="contenttext2">\n ${i("Paragraph Settings")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content last" id="contenttext2" aria-hidden="true">\n\n <div class="subpanel">\n <div class="label mt-1">${i("Heading")}:</div>\n\n <div class="choices" style="margin:0;width:218px;">\n <select class="inp-headings">\n </select>\n </div>\n\n <div class="label">${i("Line Spacing")}:</div>\n\n <div class="group linespacing">\n \n ${o}\n\n <button title="${i("Decrease")}" data-value="-" style="font-size:13px">-</button>\n <button title="${i("Increase")}" data-value="+" style="font-size:13px">+</button>\n <button title="${i("Clear")}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label">${i("Letter Spacing")}:</div>\n\n <div class="group letterspacing">\n <button title="1" data-value="1">1</button>\n <button title="2" data-value="2">2</button>\n <button title="${i("Decrease")}" data-value="-" style="font-size:13px">-</button>\n <button title="${i("Increase")}" data-value="+" style="font-size:13px">+</button>\n <button title="${i("Clear")}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label">${i("List & Indentation")}:</div>\n\n <div class="group listindent">\n <button title="${i("Bullets")}" data-action="insertUnorderedList"><svg style="width:12px;height:12px;"><use xlink:href="#icon-list-bullet"></use></svg></button>\n <button title="${i("Numbering")}" data-action="insertOrderedList"><svg style="width:12px;height:12px;"><use xlink:href="#icon-list-number"></use></svg></button>\n <button title="${i("Indent")}" data-action="indent"><svg style="width:12px;height:12px;"><use xlink:href="#icon-indent"></use></svg></button>\n <button title="${i("Outdent")}" data-action="outdent"><svg style="width:12px;height:12px;"><use xlink:href="#icon-outdent"></use></svg></use></svg></svg></button>\n </div>\n </div>\n\n </div>\n `;t.insertAdjacentHTML("beforeend",a),this.panel=t;const l=t.querySelector(".btn-color");l.addEventListener("click",(()=>{this.saveForUndo(!0);let t=l.style.backgroundColor;this.builder.editor.colorpicker().open((t=>{this.text.setTextColor(t),l.style.backgroundColor=t,this.builder.onChange()}),t)}));const r=t.querySelector(".btn-backcolor");r.addEventListener("click",(()=>{this.saveForUndo(!0);let t=r.style.backgroundColor;this.builder.editor.colorpicker().open((t=>{this.text.setTextBg(t),r.style.backgroundColor=t,this.builder.onChange()}),t)}));t.querySelectorAll("[data-format]").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-format");this.text.formatText(e),this.getState(),this.builder.onChange()}))}));t.querySelectorAll("[data-align]").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-align");this.text.setTextAlign(e),this.getState(),this.builder.onChange()}))}));t.querySelectorAll("[data-action]").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-action");this.text.setAction(e,(()=>{this.getState(),this.builder.onChange()}))}))}));t.querySelectorAll("[data-tag]").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-tag");this.text.pasteHtmlAtCaret(e,!0),this.builder.onChange()}))})),0===e.customTags.length&&(t.querySelector(".customtags").style.display="none");t.querySelectorAll(".group.fontsizes button").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-value");let i=1,n=this.text.getElm();n&&(i=Number(window.getComputedStyle(n).getPropertyValue("font-size").match(/\d+/)[0])),this.text.execCommand("font-size",i+1+"px",((t,i)=>{i&&this.text.applyClassFontSize(i,e)})),this.getState(),this.builder.onChange()}))}));t.querySelectorAll(".group.fontweight button").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-value");this.text.execCommand("font-weight",e,((t,i)=>{i&&this.text.applyClassFontWeight(i,e)})),this.getState(),this.builder.onChange()}))}));t.querySelectorAll(".group.linespacing button").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-value");this.text.setLineHeight(e),this.getState(),this.builder.onChange()}))}));t.querySelectorAll(".group.letterspacing button").forEach((t=>{t.addEventListener("click",(()=>{this.saveForUndo();const e=t.getAttribute("data-value");this.text.setLetterSpacing(e),this.getState(),this.builder.onChange()}))}));let c=this.builder.fontAssetPath;const d=document.querySelector(".inp-fontfamily");b.forEach((t=>{const e=document.createElement("option");e.value=t.value,e.innerHTML=t.label.replace("%path%",c),d.appendChild(e)})),this.fontFamily=new m(d,{removeItemButton:!1,itemSelectText:"",allowHTML:!0}),d.addEventListener("change",(t=>{const e=b.find((e=>e.value===t.detail.value));let i=e.fontFamily,n=e.fontStyle,o=e.fontDisplay,s=e.provider;this.saveForUndo(),this.text.setFont(i,n,o,s),this.getState(),this.builder.onChange()}));const u=[{value:"",label:""},{value:"h1",label:`<h1 style="margin:0;line-height:1.6;font-size:20px;">${i("Heading")} 1</h1>`},{value:"h2",label:`<h2 style="margin:0;line-height:1.6;font-size:18px;">${i("Heading")} 2</h2>`},{value:"h3",label:`<h3 style="margin:0;line-height:1.6;font-size:16px;">${i("Heading")} 3</h3>`},{value:"h4",label:`<h4 style="margin:0;line-height:1.6;font-size:15px;">${i("Heading")} 4</h4>`},{value:"h5",label:`<h5 style="margin:0;line-height:1.6;font-size:14px;">${i("Heading")} 5</h5>`},{value:"h6",label:`<h6 style="margin:0;line-height:1.6;font-size:13px;">${i("Heading")} 6</h6>`},{value:"p",label:`<p style="margin:0;line-height:1.6;font-size:12px;">${i("Paragraph")}</p>`},{value:"div",label:'<div style="margin:0;line-height:1.6;font-size:12px;">div</div>'},{value:"pre",label:`<p style="margin:0;line-height:1.6;font-size:12px;font-family:courier, monospace;">${i("Preformatted")}</p>`}],p=document.querySelector(".inp-headings");u.forEach((t=>{const e=document.createElement("option");e.value=t.value,e.innerHTML=t.label.replace("%path%",c),p.appendChild(e)})),this.heading=new m(p,{removeItemButton:!1,itemSelectText:"",allowHTML:!0,searchEnabled:!1,shouldSort:!1}),p.addEventListener("change",(t=>{this.saveForUndo(),this.text.setParagraph(t.detail.value),this.getState(),this.builder.onChange()}));t.querySelector(".btn-link").addEventListener("click",(()=>{this.builder.editor.rte.hyperlink.createLink()}));t.querySelector(".btn-icon").addEventListener("click",(()=>{this.builder.controlpanel.objDialogIcons.open()}));t.querySelector(".btn-image").addEventListener("click",(()=>{this.builder.editor.rte.insertImage()}))}editorReady(){this.builder.editor.onTextChange=()=>{document.body.classList.contains("controlpanel")&&this.getState()}}getHighlight(t){try{for(;t&&!t.style.backgroundColor;){if(!t.tagName)return"";if(t.classList.contains("cell-active")||t.parentNode&&t.parentNode.classList.contains("cell-active"))return"";t=t.parentNode}return t.style.backgroundColor}catch(t){return""}}getState(){let t=this.builder.controlpanel.activeElement;if(!t)return;const e=this.panel.querySelector(".btn-color");let i=this.text.getStyle(t,"color");e.style.backgroundColor=i;const n=this.panel.querySelector(".btn-backcolor");let o=this.getHighlight(t);if(n.style.backgroundColor=o,o?(n.classList.remove("nocolor"),n.parentNode.style.marginTop=""):(n.classList.add("nocolor"),n.parentNode.style.marginTop="1px"),!document.body.classList.contains("controlpanel"))return;if(!this.panel.classList.contains("active"))return;this.builder.doc.queryCommandState("bold")?this.panel.querySelector("button[data-format=bold]").classList.add("on"):this.panel.querySelector("button[data-format=bold]").classList.remove("on"),this.builder.doc.queryCommandState("italic")?this.panel.querySelector("button[data-format=italic]").classList.add("on"):this.panel.querySelector("button[data-format=italic]").classList.remove("on"),this.builder.doc.queryCommandState("underline")?this.panel.querySelector("button[data-format=underline]").classList.add("on"):this.panel.querySelector("button[data-format=underline]").classList.remove("on"),this.builder.doc.queryCommandState("strikethrough")?this.panel.querySelector("button[data-format=strikethrough]").classList.add("on"):this.panel.querySelector("button[data-format=strikethrough]").classList.remove("on");const s=this.builder.cssClasses;let a=this.text.getElm();a&&a.closest("."+s.textTransform.uppercase)?this.panel.querySelector("button[data-format=uppercase]").classList.add("on"):this.panel.querySelector("button[data-format=uppercase]").classList.remove("on"),this.builder.doc.queryCommandState("JustifyFull")?this.panel.querySelector("button[data-align=justify]").classList.add("on"):this.panel.querySelector("button[data-align=justify]").classList.remove("on"),this.builder.doc.queryCommandState("JustifyLeft")?this.panel.querySelector("button[data-align=left]").classList.add("on"):this.panel.querySelector("button[data-align=left]").classList.remove("on"),this.builder.doc.queryCommandState("JustifyRight")?this.panel.querySelector("button[data-align=right]").classList.add("on"):this.panel.querySelector("button[data-align=right]").classList.remove("on"),this.builder.doc.queryCommandState("JustifyCenter")?this.panel.querySelector("button[data-align=center]").classList.add("on"):this.panel.querySelector("button[data-align=center]").classList.remove("on");let l="",r=this.builder.screenMode;"desktop"===r?l="":"tablet-landscape"===r?l="md-":"tablet"===r?l="sm-":"mobile"===r&&(l="xs-");let c=this.text.getElm();if(c){const t=this.builder.fontSizeClassValues;this.panel.querySelectorAll(".group.fontsizes button").forEach((t=>t.classList.remove("on")));let e=!1;if(""!==l)for(let i=0;i<=t.length-1;i++)if(c.classList.contains(l+"size-"+t[i])){e=!0;this.panel.querySelectorAll(".group.fontsizes button").forEach((e=>{let n=e.getAttribute("data-value");parseInt(n)===t[i]&&e.classList.add("on")}))}if(!e)for(let e=0;e<=t.length-1;e++)if(c.classList.contains("size-"+t[e])){this.panel.querySelectorAll(".group.fontsizes button").forEach((i=>{let n=i.getAttribute("data-value");parseInt(n)===t[e]&&i.classList.add("on")}))}let i=this.builder.cssClasses.fontWeight;this.panel.querySelectorAll(".group.fontweight button").forEach((t=>t.classList.remove("on")));for(let t=0;t<Object.keys(i).length;t++){let e=Object.values(i)[t];if(c.classList.contains(e)){const t=this.panel.querySelectorAll(".group.fontweight button");Array.prototype.forEach.call(t,(t=>{let n,o=t.getAttribute("data-value");e===i.thin&&(n="100"),e===i.extralight&&(n="200"),e===i.light&&(n="300"),e===i.normal&&(n="400"),e===i.medium&&(n="500"),e===i.semibold&&(n="600"),e===i.bold&&(n="700"),e===i.extrabold&&(n="800"),e===i.black&&(n="900"),o===n&&t.classList.add("on")}))}}this.panel.querySelectorAll(".group.linespacing button").forEach((t=>t.classList.remove("on"))),this.panel.querySelectorAll(".group.letterspacing button").forEach((t=>t.classList.remove("on")));const n=this.text.getParentBlock(c);if(n){let t=this.builder.cssClasses.leading;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];if(n.classList.contains(i)){const e=this.panel.querySelectorAll(".group.linespacing button");Array.prototype.forEach.call(e,(e=>{let n,o=e.getAttribute("data-value");i===t.leading_8&&(n="0.8"),i===t.leading_9&&(n="0.9"),i===t.leading_10&&(n="1"),i===t.leading_11&&(n="1.1"),i===t.leading_12&&(n="1.2"),i===t.leading_13&&(n="1.3"),i===t.leading_14&&(n="1.4"),i===t.leading_15&&(n="1.5"),i===t.leading_16&&(n="1.6"),i===t.leading_17&&(n="1.7"),i===t.leading_18&&(n="1.8"),i===t.leading_19&&(n="1.9"),i===t.leading_20&&(n="2"),i===t.leading_21&&(n="2.1"),i===t.leading_22&&(n="2.2"),o===n&&e.classList.add("on")}))}}t=this.builder.cssClasses.tracking;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];if(n.classList.contains(i)){const e=this.panel.querySelectorAll(".group.letterspacing button");Array.prototype.forEach.call(e,(e=>{let n,o=e.getAttribute("data-value");i===t.tracking_025&&(n="1"),i===t.tracking_050&&(n="2"),o===n&&e.classList.add("on")}))}}}}let d=this.builder.doc.queryCommandValue("FontName").split(",")[0];d=d.replace(/"/g,""),d=d.replace(/'/g,""),d=d.replace(/&quot;/g,""),d=d.trim().toLowerCase(),this.fontFamily.setChoiceByValue(""),this.fontFamily.setChoiceByValue(d);let u=this.builder.doc.queryCommandValue("FormatBlock");u=u.toLowerCase(),"normal"===u&&(u="p"),"heading 1"===u&&(u="h1"),"heading 2"===u&&(u="h2"),"heading 3"===u&&(u="h3"),"heading 4"===u&&(u="h4"),"formatted"===u&&(u="pre"),this.heading.setChoiceByValue(""),""!==u&&this.heading.setChoiceByValue(u)}saveForUndo(t){this.builder.editor.saveForUndo(t)}}class f{constructor(t,e){this.builder=e;let n=`\n <div class="submain">\n <div class="asset-preview"></div>\n\n <label class="label mt-3">\n <div>${i("Source")}:</div>\n <input type="text" class="inp-src">\n </label>\n\n <div class="group mt-4">\n <input class="inp-file" type="file" accept="image/*" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>\n <button title="${i("Link")}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>\n <button title="${i("Edit")}" class="btn-edit"><svg><use xlink:href="#icon-pencil"></use></svg></button>\n </div>\n\n \x3c!--\n <div class="group">\n <button title="${i("Align Left")}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>\n <button title="${i("Align Center")}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>\n <button title="${i("Align Right")}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>\n <button title="${i("Align Full")}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>\n </div>\n --\x3e\n\n <label class="label mt-2">\n <div>${i("Title")}:</div>\n <input type="text" class="inp-title">\n </label>\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t,this.imagePreview=t.querySelector(".asset-preview");const o=this.panel.querySelector(".inp-src");o.addEventListener("input",(()=>{this.builder.editor.saveForUndo();let t=o.value;this.refreshImage(t),this.updatePreview(t),this.builder.editor.onChange()}));const s=t.querySelector(".btn-upload"),a=t.querySelector(".inp-file");s.addEventListener("click",(()=>{a.click()})),a.addEventListener("change",(t=>{a.files[0]&&(this.builder.editor.onAssetUpload=t=>{this.updateImageSrc(t)},this.builder.onImageUpload(t),a.value="")})),this.builder.onImageUpload||(s.style.display="none");const l=t.querySelector(".btn-asset");l.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("image",(t=>{this.updateImageSrc(t)}),l)})),this.builder.onImageSelectClick||this.builder.imageSelect||(l.style.display="none");t.querySelector(".btn-link").addEventListener("click",(()=>{this.builder.editor.element.image.open()}));t.querySelector(".btn-edit").addEventListener("click",(()=>{this.builder.editor.element.image.edit()}));const r=this.panel.querySelector(".inp-title");r.addEventListener("input",(()=>{this.builder.editor.saveForUndo();let t=r.value,e=this.builder.controlpanel.activeElement;e.setAttribute("alt",t),"a"===e.parentNode.tagName.toLowerCase()&&e.parentNode.setAttribute("title",t),this.builder.editor.onChange()}))}editorReady(){const t=this.panel.querySelector(".inp-src");this.builder.editor.onImageChange=()=>{if(!document.body.classList.contains("controlpanel"))return;let e=this.builder.controlpanel.activeElement;if(!this.builder.doc.contains(e))return void this.builder.controlpanel.select("");this.getState();let i=0;const n=()=>{i>20||("[Image Data]"!==t.value&&"image/jpeg (base64)"!==t.value||setTimeout((()=>{try{this.getState()}catch(t){}n()}),300),i++)};n()}}getState(){let t=this.builder.controlpanel.activeElement;const e=this.panel,i=t.getAttribute("src"),n=t.getAttribute("alt");if(!i)return;this.updatePreview(i);const o=e.querySelector(".inp-src");-1===i.indexOf("base64")?o.value=i:o.value="image/jpeg (base64)";e.querySelector(".inp-title").value=n}updateImageSrc(t){this.builder.editor.saveForUndo();this.panel.querySelector(".inp-src").value=t,this.updatePreview(t),this.refreshImage(t),this.builder.editor.onChange()}clear(){this.imagePreview.innerHTML=""}updatePreview(t){let e=`\n <img src="${t}">\n `;this.imagePreview.innerHTML=e}refreshImage(t){let e=this.builder.controlpanel.activeElement;e.addEventListener("load",(()=>{this.builder.editor.activeModule?(this.builder.editor.element.image.refreshIfIsModule(this.builder.editor.activeModule),this.builder.controlpanel.panelImage.classList.remove("active")):(this.builder.editor.element.image.repositionImageTool(),this.builder.editor.elmTool.repositionElementTool())})),e.setAttribute("src",t)}}class y{constructor(t,e){this.builder=e;let n=`\n <div class="submain">\n <div class="asset-preview"></div>\n\n <label class="label mt-3">\n <div>${i("Source")}:</div>\n <input type="text" class="inp-src">\n </label>\n\n <div class="group mt-4">\n <input class="inp-file" type="file" accept="video/mp4" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>\n </div>\n\n <label class="label checkbox mt-4">\n <input class="inp-video-controls" type="checkbox" /> <span>${i("Show Controls")}</span>\n </label>\n <label class="label checkbox mt-2">\n <input class="inp-video-loop" type="checkbox" /> <span>${i("Loop")}</span>\n </label>\n <label class="label checkbox mt-2">\n <input class="inp-video-autoplay" type="checkbox" /> <span>${i("Autoplay")}</span>\n </label>\n\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t,this.videoPreview=t.querySelector(".asset-preview");const o=t.querySelector(".inp-src");o.addEventListener("blur",(()=>{this.builder.editor.saveForUndo();let t=o.value;this.refreshVideo(t),this.updatePreview(t),this.builder.editor.onChange()}));const s=t.querySelector(".btn-upload"),a=t.querySelector(".inp-file");s.addEventListener("click",(()=>{a.click()})),a.addEventListener("change",(t=>{a.files[0]&&(this.builder.editor.onAssetUpload=t=>{this.updateVideoSrc(t)},this.builder.onVideoUpload(t),a.value="")})),this.builder.onVideoUpload||(s.style.display="none");const l=t.querySelector(".btn-asset");l.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("video",(t=>{this.updateVideoSrc(t)}),l)})),this.builder.onVideoSelectClick||this.builder.videoSelect||(l.style.display="none"),this.builder.onVideoSelectClick||this.builder.videoSelect||this.builder.onVideoUpload||(l.parentNode.style.display="none");const r=t.querySelector(".inp-video-controls");r.addEventListener("input",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeElement;r.checked?t.setAttribute("controls",""):t.removeAttribute("controls"),this.builder.editor.onChange()}));const c=t.querySelector(".inp-video-loop");c.addEventListener("input",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeElement;c.checked?t.setAttribute("loop",""):t.removeAttribute("loop"),this.builder.editor.onChange()}));const d=t.querySelector(".inp-video-autoplay");d.addEventListener("input",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeElement;d.checked?t.setAttribute("autoplay",""):t.removeAttribute("autoplay"),this.builder.editor.onChange()}))}editorReady(){this.builder.editor.onVideoChange=()=>{document.body.classList.contains("controlpanel")&&this.getState()}}getState(){let t=this.builder.controlpanel.activeElement;const e=this.panel,i=t.querySelector("source"),n=i?i.getAttribute("src"):"";this.updatePreview(n);e.querySelector(".inp-src").value=n;const o=e.querySelector(".inp-video-controls");t.hasAttribute("controls")?o.checked=!0:o.checked=!1;const s=e.querySelector(".inp-video-loop");t.hasAttribute("loop")?s.checked=!0:s.checked=!1;const a=e.querySelector(".inp-video-autoplay");t.hasAttribute("autoplay")?a.checked=!0:a.checked=!1}updateVideoSrc(t){this.builder.editor.saveForUndo();this.panel.querySelector(".inp-src").value=t,this.updatePreview(t),this.refreshVideo(t),this.builder.editor.onChange()}clear(){this.videoPreview.innerHTML=""}updatePreview(t){let e=`\n <video style="width:130px;">\n <source src="${t}" type="video/mp4">\n </video>\n `;this.videoPreview.innerHTML=e}refreshVideo(t){let e=this.builder.controlpanel.activeElement;e.querySelector("source").setAttribute("src",t),setTimeout((()=>{e.pause(),e.load()}),100),e.addEventListener("loadedmetadata",(()=>{this.builder.editor.element.video.repositionVideoTool()}))}}class x{constructor(t,e){this.builder=e;let n=`\n <div class="submain">\n <div class="asset-preview"></div>\n\n <label class="label mt-3">\n <div>${i("Source")}:</div>\n <input type="text" class="inp-src">\n </label>\n\n <div class="group mt-4">\n <input class="inp-file" type="file" accept="audio/mp3" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>\n </div>\n\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t,this.audioPreview=t.querySelector(".asset-preview");const o=t.querySelector(".inp-src");o.addEventListener("blur",(()=>{this.builder.editor.saveForUndo();let t=o.value;this.refreshAudio(t),this.updatePreview(t),this.builder.editor.onChange()}));const s=t.querySelector(".btn-upload"),a=t.querySelector(".inp-file");s.addEventListener("click",(()=>{a.click()})),a.addEventListener("change",(t=>{a.files[0]&&(this.builder.editor.onAssetUpload=t=>{this.updateAudioSrc(t)},this.builder.onAudioUpload(t),a.value="")})),this.builder.onAudioUpload||(s.style.display="none");const l=t.querySelector(".btn-asset");l.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("audio",(t=>{this.updateAudioSrc(t)}),l)})),this.builder.onAudioSelectClick||this.builder.audioSelect||(l.style.display="none"),this.builder.onAudioSelectClick||this.builder.audioSelect||this.builder.onAudioUpload||(l.parentNode.style.display="none")}editorReady(){this.builder.editor.onAudioChange=()=>{document.body.classList.contains("controlpanel")&&this.getState()}}getState(){let t=this.builder.controlpanel.activeElement;if(t.closest("[data-html]")&&!t.closest("[data-subblock]"))return;const e=this.panel,i=t.querySelector("source"),n=i?i.getAttribute("src"):"";this.updatePreview(n);e.querySelector(".inp-src").value=n}updateAudioSrc(t){this.builder.editor.saveForUndo();this.panel.querySelector(".inp-src").value=t,this.updatePreview(t),this.refreshAudio(t),this.builder.editor.onChange()}clear(){this.audioPreview.innerHTML=""}updatePreview(t){let e=`\n <audio controls="" style="width:100%">\n <source src="${t}" type="audio/mpeg">Your browser does not support the audio element.\n </audio>\n `;this.audioPreview.innerHTML=e}refreshAudio(t){let e=this.builder.controlpanel.activeElement;e.querySelector("source").setAttribute("src",t),setTimeout((()=>{e.pause(),e.load()}),100)}}class _{constructor(t,e){this.builder=e;let n=`\n <div class="submain">\n <div class="asset-preview"></div>\n\n <label class="label mt-3">\n <div>${i("Source")}:</div>\n <input type="text" class="inp-src">\n <textarea class="inp-embed"></textarea>\n </label>\n\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t,this.iframePreview=t.querySelector(".asset-preview");t.querySelector(".inp-src").addEventListener("blur",(()=>{this.builder.editor.saveForUndo(),this.refreshIframe(),this.updatePreview(),this.builder.editor.onChange()}));t.querySelector(".inp-embed").addEventListener("blur",(()=>{this.builder.editor.saveForUndo(),this.refreshIframe(),this.updatePreview(),this.builder.editor.onChange()}))}editorReady(){this.builder.editor.onIframeChange=()=>{document.body.classList.contains("controlpanel")&&this.getState()}}getState(){this.updateInpSource(),this.updatePreview()}updateIframeSrc(t){this.builder.editor.saveForUndo(),this.updateInpSource(),this.refreshIframe(t),this.updatePreview(t),this.builder.editor.onChange()}updateInpSource(){let t=this.builder.controlpanel.activeElement;if(!t)return;let e=t.getAttribute("src");e=e.toLowerCase();const i=this.panel.querySelector(".inp-src"),n=this.panel.querySelector(".inp-embed");e.includes("youtube")||e.includes("vimeo")?(n.style.display="none",n.value="",i.style.display="block",i.value=e):(i.style.display="none",i.value="",n.style.display="block",n.value=t.outerHTML)}clear(){this.iframePreview.innerHTML=""}updatePreview(){let t=this.builder.controlpanel.activeElement.parentNode.outerHTML;this.iframePreview.innerHTML=t}refreshIframe(){const t=this.panel.querySelector(".inp-src"),e=this.panel.querySelector(".inp-embed");let i=t.value,n=e.value,o=this.builder.controlpanel.activeElement;if(""!==i)i=this.getVideoEmbedSource(i),o.setAttribute("src",i);else{let t=o.parentNode;o.outerHTML=n,this.builder.controlpanel.activeElement=t.querySelector("iframe")}}getVideoEmbedSource(t){var e=/^http[s]?:\/\/(((www.youtube.com\/watch\?(feature=player_detailpage&)?)v=)|(youtu.be\/))([^#&?]*)/.exec(t),i=/^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/)|(video\/))?([0-9]+)\/?/.exec(t);return null===e&&null===i||-1!==t.indexOf("player.vimeo.com")||-1!==t.indexOf("youtube.com/embed/")||(null!=e&&e.length>=7&&(t="https://www.youtube.com/embed/"+e[6]+"?rel=0"),null!=i&&i.length>=7&&(t="https://player.vimeo.com/video/"+i[6])),t}}class w{constructor(t,e){this.builder=e;const n=[20,40,60,80,100,120,140,160,180,200,220,240,260,280,300];let o="";n.forEach((t=>{o+=`<button title="${t}px" data-spacer="${t}">${t}</button>`}));let s=`\n <div class="submain">\n <div class="label mt-0">${i("Height")}:</div>\n <div class="group fontsizes">\n ${o}\n </div>\n </div>\n `;t.insertAdjacentHTML("beforeend",s),this.panel=t;const a=t.querySelectorAll("[data-spacer]");a.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-spacer");let i=this.builder.controlpanel.activeElement;n.forEach((t=>i.classList.remove(`height-${t}`))),i.classList.add(`height-${e}`),a.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}))}editorReady(){this.builder.editor.onSpacerChange=()=>{document.body.classList.contains("controlpanel")&&this.getState()}}getState(){let t=this.builder.controlpanel.activeElement;const e=this.panel,i=e.querySelectorAll("[data-spacer]");t.classList.forEach((t=>{if(-1!==t.indexOf("height-")){let n=t.replace("height-","");i.forEach((t=>t.classList.remove("on"))),e.querySelector(`[data-spacer="${n}"]`).classList.add("on")}}))}}class S{constructor(t,e){this.builder=e;let n="";for(let t=0;t<e.defaultFontSizes.length;t++)n+=`<button title="${e.defaultFontSizes[t]}px" data-value="${e.defaultFontSizes[t]}">${e.defaultFontSizes[t]}</button>`;let o=`\n <div class="submain">\n\n <div class="group flex">\n <button title="${i("Link")}" class="btn-link"><svg style="transform:rotate(45deg)"><use xlink:href="#icon-link"></use></svg></button>\n <button title="${i("Icon")}" class="btn-icon"><svg><use xlink:href="#icon-mood-smile"></use></svg></button>\n </div>\n\n <div class="label" style="margin-top:8px">${i("Color")}:</div>\n <div class="group">\n <button title="${i("Color")}" class="btn-color is-btn-color"></button>\n </div>\n\n <div class="label">${i("Icon Size")}:</div>\n\n <div class="group fontsizes">\n ${n}\n <button title="${i("Decrease")}" data-value="-" style="font-size:13px">-</button>\n <button title="${i("Increase")}" data-value="+" style="font-size:13px">+</button>\n <button title="${i("Clear")}" data-value=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="group alignicon mt-3">\n <button title="${i("Align Left")}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>\n <button title="${i("Align Center")}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>\n <button title="${i("Align Right")}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>\n <button title="${i("Align Full")}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>\n <button title="${i("Clean")}" data-format="clean"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n </div>\n `;t.insertAdjacentHTML("beforeend",o),this.panel=t;t.querySelector(".btn-link").addEventListener("click",(()=>{this.builder.editor.element.hyperlink.createLink()}));t.querySelector(".btn-icon").addEventListener("click",(()=>{this.builder.controlpanel.objDialogIcons.open()}));const s=t.querySelector(".btn-color");s.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);let t=this.builder.controlpanel.activeElement,e=this.builder.editor.dom.getStyle(t,"color");this.builder.editor.colorpicker().open((e=>{t.style.color=e,s.style.backgroundColor=e,this.builder.editor.onChange()}),e)}));t.querySelectorAll(".group.fontsizes button").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();const e=t.getAttribute("data-value");let i=1,n=this.getElm();n&&(i=Number(window.getComputedStyle(n).getPropertyValue("font-size").match(/\d+/)[0])),this.builder.editor.dom.execCommand("font-size",i+1+"px",((t,i)=>{t&&(this.builder.editor.rte.applyClassFontSize(i,e),i.style.fontSize="")})),this.getState(),this.builder.editor.onChange()}))}));t.querySelectorAll("[data-align]").forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();const e=t.getAttribute("data-align");const i=this.builder.controlpanel.activeElement.parentNode;i.classList.remove("text-left"),i.classList.remove("text-center"),i.classList.remove("text-justify"),i.classList.remove("text-right"),""!==e&&i.classList.add("text-"+e),this.getState(),this.builder.onChange()}))}))}editorReady(){this.builder.editor.onIconChange=()=>{document.body.classList.contains("controlpanel")&&this.getState()}}getState(){const t=this.panel;let e=this.builder.controlpanel.activeElement;const i=e.parentNode;t.querySelectorAll("[data-align]").forEach((t=>t.classList.remove("on"))),i.classList.contains("text-left")&&t.querySelector('[data-align="left"]').classList.add("on"),i.classList.contains("text-right")&&t.querySelector('[data-align="right"]').classList.add("on"),i.classList.contains("text-center")&&t.querySelector('[data-align="center"]').classList.add("on"),i.classList.contains("text-justify")&&t.querySelector('[data-align="justify"]').classList.add("on");const n=t.querySelector(".btn-color");let o=this.builder.editor.dom.getStyle(e,"color");n.style.backgroundColor=o;let s="",a=this.builder.screenMode;"desktop"===a?s="":"tablet-landscape"===a?s="md-":"tablet"===a?s="sm-":"mobile"===a&&(s="xs-");const l=this.builder.fontSizeClassValues;t.querySelectorAll(".group.fontsizes button").forEach((t=>t.classList.remove("on")));let r=!1;if(""!==s)for(let i=0;i<=l.length-1;i++)if(e.classList.contains(s+"size-"+l[i])){r=!0;t.querySelectorAll(".group.fontsizes button").forEach((t=>{let e=t.getAttribute("data-value");parseInt(e)===l[i]&&t.classList.add("on")}))}if(!r)for(let i=0;i<=l.length-1;i++)if(e.classList.contains("size-"+l[i])){t.querySelectorAll(".group.fontsizes button").forEach((t=>{let e=t.getAttribute("data-value");parseInt(e)===l[i]&&t.classList.add("on")}))}}getElm(){const t=this.builder.win.getSelection().anchorNode;if(!t)return!1;return t.nodeType!==Node.TEXT_NODE&&t.nodeType!==Node.COMMENT_NODE?t:t.parentElement}}class k{constructor(t,e){this.builder=e;let n=`\n <div class="submain">\n <div class="group flex">\n <button title="${i("Edit Code")}" class="btn-editcode">\n <svg><use xlink:href="#icon-viewcode"></use></svg>\n <span>${i("Edit Code")}</span>\n </button>\n </div>\n \n <div class="group flex">\n <button title="${i("Configure")}" class="btn-editmodule">\n <svg><use xlink:href="#icon-settings"></use></svg>\n <span>${i("Configure")}</span>\n </button>\n </div>\n\n <div class="div-module-settings scroll-darker">\n <iframe tabindex="0" style="width:100%;min-height:200px;border:none;margin-left:-2px;" src="about:blank"></iframe>\n\n <div class="group flex" style="width: 210px">\n <button title="${i("Ok")}" class="btn-apply" style="width: 100%">${i("Apply")}</button>\n </div>\n </div>\n\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t,this.moduleSettings=t.querySelector(".div-module-settings");t.querySelector(".btn-editcode").addEventListener("click",(()=>{this.builder.editor.element.code.edit()}));t.querySelector(".btn-editmodule").addEventListener("click",(()=>{this.builder.editor.element.module.edit()}));t.querySelector(".btn-apply").addEventListener("click",(()=>{this.apply()}))}editorReady(){this.builder.editor.onSpacerChange=()=>{document.body.classList.contains("controlpanel")&&this.getState()}}async getState(){let t=this.builder.controlpanel.activeElement.closest("[data-module]");const e=this.panel,i=e.querySelector(".btn-editcode"),n=e.querySelector(".btn-editmodule");let o=!1;if(t?"side"===t.getAttribute("data-panel")?(i.parentNode.style.display="none",n.parentNode.style.display="none",this.moduleSettings.style.display="",o=!0):(i.parentNode.style.display="none",n.parentNode.style.display="",this.moduleSettings.style.display="none"):(i.parentNode.style.display="",n.parentNode.style.display="none",this.moduleSettings.style.display="none"),o){this.builder.doc.querySelectorAll("[data-module-active]").forEach((t=>{t.removeAttribute("data-module-active")})),t.setAttribute("data-module-active","1");let e=1;const i=t.querySelectorAll("[data-subblock]");Array.prototype.forEach.call(i,(i=>{let n=i.innerHTML;t.setAttribute("data-html-"+e,encodeURIComponent(n)),e++}));let n=this.moduleSettings.querySelector("iframe");n.onload=()=>{let e=n.contentDocument||n.contentWindow.document;document.body.classList.contains("dark")&&e.body.classList.add("dark");let i=e.createElement("style");i.innerHTML=this.css(),e.head.appendChild(i);let o=t.getAttribute("data-panel-height");o?(n.style.height=o+"px",n.style.minHeight=""):(n.style.height="",n.style.minHeight="200px")};const o=t.getAttribute("data-module");let s=await fetch(this.builder.editor.modulePath+o+".html");s=await s.text(),s=s.replace(/<script>/g,""+(this.builder.nonce?`<script nonce="${this.builder.nonce}">`:"<script>"));let a=n.contentWindow.document;a.open(),a.write(s),a.close()}}apply(){let t=this.builder.editor.activeModule,e=this.moduleSettings.querySelector("iframe");e.contentWindow.construct&&e.contentWindow.construct(),this.builder.editor.saveForUndo(),t.setAttribute("data-html",encodeURIComponent(document.querySelector("#hidContentModuleCode").value)),t.setAttribute("data-settings",encodeURIComponent(document.querySelector("#hidContentModuleSettings").value));let i=document.querySelector("#hidContentModuleCode").value;i=i.replace(/{id}/g,this.makeId()),i=i.replace(/<script>/g,""+(this.builder.nonce?`<script nonce="${this.builder.nonce}">`:"<script>")),t.innerHTML="";var n=document.createRange();n.setStart(t,0),t.appendChild(n.createContextualFragment(i));let o=t.querySelectorAll("[data-subblock]");var s=1;Array.prototype.forEach.call(o,(e=>{t.getAttribute("data-html-"+s)&&(e.innerHTML=decodeURIComponent(t.getAttribute("data-html-"+s))),s++})),this.builder.onChange()}makeId(){let t="",e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(let i=0;i<2;i++)t+=e.charAt(Math.floor(Math.random()*e.length));let i="",n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let t=0;t<5;t++)i+=n.charAt(Math.floor(Math.random()*n.length));return t+i}css(){return"\nbody { \n margin: 2px;\n font-family: sans-serif;\n font-weight: 300;\n font-size: 13px;\n line-height: 1.6; \n}\n\n* {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 0, 0, 0.2) auto;\n}\n*::-webkit-scrollbar {\n width: 12px;\n}\n*::-webkit-scrollbar-track {\n background: rgba(200, 200, 200, 0.2);\n}\n*::-webkit-scrollbar-thumb {\n background-color:rgba(0, 0, 0, 0.2); \n}\nbutton {\n width: auto;\n padding: 0 14px;\n height: 34px;\n background-color: transparent;\n box-shadow: none;\n margin: 2px;\n border-radius: 5px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n letter-spacing: inherit;\n }\n .label {\n font-size: 13px;\n margin: 20px 0 3px;\n font-weight: 400;\n line-height: 1.6;\n color: #4b4b4b;\n display: flex;\n flex-direction: column;\n }\n .label.flex-row {\n flex-direction: row;\n }\n .label.checkbox {\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n }\n .label.checkbox span {\n line-height: 1;\n margin-left: 5px;\n }\n input[type=text], textarea {\n width: 100%;\n height: 43px;\n box-sizing: border-box;\n margin: 0;\n font-family: sans-serif;\n font-size: 15px;\n font-weight: 300;\n letter-spacing: 1px;\n padding: 0;\n padding-left: 8px;\n color: #121212;\n display: inline-block;\n border: none;\n border-bottom: none;\n border-radius: 1px;\n background-color: #f6f6f6;\n flex: none;\n }\n textarea {\n height: 250px;\n padding: 12px 15px;\n }\n select {\n font-size: 13px;\n letter-spacing: 1px;\n height: 43px;\n line-height: 1.7;\n color: #4a4a4a;\n border-radius: 5px;\n border: none;\n background-color: #f6f6f6;\n width: auto;\n display: inline-block;\n background-image: none;\n -webkit-appearance: menulist;\n -moz-appearance: menulist;\n appearance: menulist;\n padding: 0 5px;\n border-radius: 1px;\n cursor: pointer;\n }\n input[type=text]:focus,\n textarea:focus,\n select:focus {\n outline: #3e93f7 2px solid;\n outline-offset: 0;\n box-shadow: none;\n }\n .group {\n border: 1px solid #e1e1e1;\n margin-bottom: 11px;\n border-radius: 6px;\n overflow: hidden;\n display: inline-flex;\n flex-wrap: wrap;\n padding: 2px;\n }\n\n\n.dark {\n color: #d3d3d3;\n }\n .dark a {\n color: #d3d3d3;\n }\n .dark svg {\n fill: #d3d3d3;\n }\n .dark button {\n color: #d3d3d3;\n }\n .dark button svg {\n color: #fff;\n }\n .dark button.is-btn-color {\n border: 1px solid transparent;\n }\n .dark button.on {\n background-color: rgb(69, 69, 69);\n }\n .dark button:not(.is-btn-color):hover {\n background-color: rgb(69, 69, 69);\n }\n .dark .label {\n color: #d3d3d3;\n }\n .dark input[type=text], .dark textarea {\n color: #c7c7c7;\n background-color: #313131;\n }\n .dark input[type=checkbox] {\n opacity: 0.7;\n }\n .dark select {\n color: #c7c7c7;\n background-color: #313131;\n }\n .dark .group {\n border: 1px solid #444;\n }\n\n "}}class C{constructor(t,e){this.builder=e,this.box=this.builder.box;let n=`\n <div class="submain">\n\n <div class="flex boxaction">\n <div class="mr-4">\n <div class="label mt-1">${i("Box Size")}:</div>\n <div class="group">\n <button title="${i("Decrease")}" class="btn-decrease"><svg><use xlink:href="#icon-minus"></use></svg></button>\n <button title="${i("Increase")}" class="btn-increase"><svg><use xlink:href="#icon-plus2"></use></svg></button>\n </div>\n </div>\n <div>\n <div class="label mt-1">${i("Move")}:</div>\n <div class="group">\n <button title="${i("Left")}" class="btn-left"><svg><use xlink:href="#icon-arrow-left"></use></svg></button>\n <button title="${i("Right")}" class="btn-right"><svg><use xlink:href="#icon-arrow-right"></use></svg></button>\n </div>\n </div>\n </div>\n\n <div class="flex">\n <div class="mr-8">\n <div class="label mt-3">${i("Background Color")}:</div>\n <div class="group">\n <button title="${i("Color")}" class="btn-color is-btn-color"></button>\n </div>\n </div>\n <div>\n <div class="label mt-3">${i("Gradient")}:</div>\n <div class="group">\n <button title="${i("Gradient")}" class="btn-gradient is-btn-color"></button>\n </div>\n </div>\n </div>\n\n <div class="label mt-3">${i("Background Image")}:</div>\n\n <div class="asset-preview"></div>\n\n <div class="imagesource mt-1 mb-1">\n <input type="text" class="inp-src">\n </div>\n\n <div class="group mt-2">\n <input class="inp-file" type="file" accept="image/*" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>\n <button title="${i("Adjust")}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>\n <button title="${i("Clear")}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <label class="label checkbox grayscale mt-2">\n <input type="checkbox" class="chk-grayscale" />\n <span>${i("Grayscale")}</span>\n </label>\n\n <div class="defaulttextcolor">\n <div class="label mt-5">${i("Text Color")}:</div>\n <div class="group textcolor">\n <button title="${i("Light")}" data-textcolor="light">${i("Light")}</button>\n <button title="${i("Dark")}" data-textcolor="dark">${i("Dark")}</button>\n <button title="${i("Clear")}" data-textcolor="" style="width:120px"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n\n <div class="group editmodule">\n <button title="${i("Edit Module")}" class="btn-module" data-value="">\n <svg style="width:15px;height:15px;margin-right:2px;"><use xlink:href="#ion-ios-gear"></use></svg>\n <span>${i("Edit Module")}</span>\n </button>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="boxcontent1">\n ${i("Content")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="boxcontent1" aria-hidden="true">\n\n <div class="subpanel">\n\n <div class="group addcontent mt-4" style="display:none">\n <button title="${i("Add Content")}" class="btn-addcontent">\n <svg><use xlink:href="#icon-plus2"></use></svg>\n <span>${i("Add Content")}</span>\n </button>\n </div>\n\n <div class="contentcontrols" style="display:none">\n\n <div class="group removecontent mt-4">\n <button title="${i("Remove Content")}" class="btn-removecontent">\n <svg><use xlink:href="#icon-trash"></use></svg>\n <span>${i("Remove Content")}</span>\n </button>\n </div>\n\n <div class="label mt-2 changedevice" style="width:222px;">\n <span>${i("Content Size")}: &nbsp;<span class="val-box-size"></span></span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n\n <div class="group contentsize" style="flex-flow: wrap">\n <button data-content-size="500">500</button>\n <button data-content-size="600">600</button>\n <button data-content-size="700">700</button>\n <button data-content-size="800">800</button>\n <button data-content-size="900">900</button>\n <button data-content-size="1000">1000</button>\n <button data-content-size="1100">1100</button>\n <button data-content-size="1200">1200</button>\n <button data-content-size="1300">1300</button>\n <button title="${i("Clear")}" data-content-size=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n <button title="${i("Decrease")}" data-content-size="-"><svg><use xlink:href="#icon-minus"></use></svg></button>\n <button title="${i("Increase")}" data-content-size="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>\n </div>\n\n <div class="flex">\n <div class="mr-4">\n <div class="label mt-2">${i("Position")}:</div>\n\n <div class="group contentposition">\n <div class="flex">\n <button title="${i("Top Left")}" data-content-pos="topleft">&#8598;</button>\n <button title="${i("Top Center")}" data-content-pos="topcenter">&#8593;</button>\n <button title="${i("Top Right")}" data-content-pos="topright">&#8599;</button>\n </div>\n <div class="flex">\n <button title="${i("Middle Left")}" data-content-pos="middleleft">&#8592;</button>\n <button title="${i("Center")}" data-content-pos="middlecenter">&#9737;</button>\n <button title="${i("Middle Right")}" data-content-pos="middleright">&#8594;</button>\n </div>\n <div class="flex">\n <button title="${i("Bottom Left")}" data-content-pos="bottomleft">&#8601;</button>\n <button title="${i("Bottom Center")}" data-content-pos="bottomcenter">&#8595;</button>\n <button title="${i("Bottom Right")}" data-content-pos="bottomright">&#8600;</button>\n </div>\n </div>\n </div>\n <div>\n <div class="label label-xy mt-2">${i("X/Y")}:</div>\n\n <div class="group adjustx">\n <button title="${i("Decrease")}" data-content-x="-"><svg><use xlink:href="#icon-minus"></use></svg></button>\n <button title="${i("Increase")}" data-content-x="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>\n </div>\n <div class="group adjusty">\n <button title="${i("Decrease")}" data-content-y="-"><svg><use xlink:href="#icon-minus"></use></svg></button>\n <button title="${i("Increase")}" data-content-y="+"><svg><use xlink:href="#icon-plus2"></use></svg></button>\n </div>\n </div>\n </div>\n\n <div class="group contentheight mt-2">\n <div>\n <button title="${i("Autofit")}" data-content-height="">${i("Autofit")}</button>\n <button title="${i("Full Height")}" data-content-height="100">${i("Full Height")}</button>\n </div>\n <div class="contentjustify" style="display:none">\n <button title="${i("Top")}" data-content-justify="flex-start"><svg><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>\n <button title="${i("Bottom")}" data-content-justify="flex-end"><svg><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>\n <button title="${i("Space Between")}" data-content-justify="space-between"><svg><use xlink:href="#icon-space-between"></use></svg></button>\n </div>\n </div>\n\n <div class="group editspacing">\n <button title="${i("Spacing")}" class="btn-spacing" data-value="">${i("Spacing")}</button>\n </div>\n\n </div>\n\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="boxcontent2">\n ${i("Text")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="boxcontent2" aria-hidden="true">\n \n <div class="subpanel">\n <div class="label mt-2">${i("Default Alignment")}:</div>\n <div class="group">\n <button title="${i("Align Left")}" data-align="left"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-left"></use></svg></button>\n <button title="${i("Align Center")}" data-align="center"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-center"></use></svg></button>\n <button title="${i("Align Right")}" data-align="right"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-right"></use></svg></button>\n <button title="${i("Align Full")}" data-align="justify"><svg style="width:13px;height:13px;"><use xlink:href="#icon-align-full"></use></svg></button>\n <button title="${i("Clean")}" data-align=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label mt-2">${i("Default Paragraph Size")}:</div>\n <div class="group defaultparasize">\n <button title="${i("16")}" data-parasize="16">16</button>\n <button title="${i("17")}" data-parasize="17">17</button>\n <button title="${i("18")}" data-parasize="18">18</button>\n <button title="${i("19")}" data-parasize="19">19</button>\n <button title="${i("20")}" data-parasize="20">20</button>\n <button title="${i("21")}" data-parasize="21">21</button>\n <button title="${i("Clear")}" data-parasize=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label mt-2">${i("Default Line Spacing")}:</div>\n <div class="group defaultlinespacing">\n <button title="${i("1")}" data-lineheight="1">1</button>\n <button title="${i("1.1")}" data-lineheight="1.1">1.1</button>\n <button title="${i("1.2")}" data-lineheight="1.2">1.2</button>\n <button title="${i("1.3")}" data-lineheight="1.3">1.3</button>\n <button title="${i("1.4")}" data-lineheight="1.4">1.4</button>\n <button title="${i("1.5")}" data-lineheight="1.5">1.5</button>\n <button title="${i("1.6")}" data-lineheight="1.6">1.6</button>\n <button title="${i("1.7")}" data-lineheight="1.7">1.7</button>\n <button title="${i("1.8")}" data-lineheight="1.8">1.8</button>\n <button title="${i("1.9")}" data-lineheight="1.9">1.9</button>\n <button title="${i("2")}" data-lineheight="2">2</button>\n <button title="${i("Clear")}" data-lineheight=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label mt-2">${i("Transparency")}:</div>\n <div class="group contenttransparency">\n <button title="${i("Increase")}" data-textopacity="+"> + </button>\n <button title="${i("Decrease")}" data-textopacity="-"> - </button>\n <button title="${i("Clear")}" data-textopacity=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n \x3c!--\n <label class="label checkbox mt-2">\n <input type="checkbox" class="chk-optimizetext"/> \n <span>${i("Auto adjust text size on large screen.")}</span>\n </label>\n --\x3e\n\n <label class="label checkbox parallax mt-2">\n <input type="checkbox" class="chk-parallax" />\n <span>${i("Parallax Content")}</span>\n </label>\n\n </div>\n </div>\n\n <button class="accordion-item btn-accordion-image" aria-expanded="false" aria-controls="boxcontent3">\n ${i("Image")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="boxcontent3" aria-hidden="true">\n\n <div class="subpanel">\n\n <div class="label mt-2">${i("Quick Effects")}:</div>\n\n <label class="label checkbox mt-1"><input class="chk-animatebg" type="checkbox" /><span>${i("Ken Burns Effect")}</span></label>\n\n <label class="label checkbox mt-1"><input class="chk-parallaxscale" type="checkbox" /><span>${i("Parallax")} & ${i("Scale")}</span></label>\n\n <label class="label checkbox mt-1"><input class="chk-parallaxbg" type="checkbox" /><span>${i("Parallax")} ${i("(visible on preview)")}</span></label>\n\n <label class="label checkbox mt-1"><input class="chk-zoomhover" type="checkbox" /><span>${i("Zoom on Hover")}</span></label>\n\n <div class="label">${i("Overlay Color")}:</div>\n <div class="group">\n <button title="${i("Overlay Color")}" class="btn-overlaycolor is-btn-color"></button>\n </div>\n\n <div class="label mt-2">${i("Overlay Transparency")}:</div>\n <div class="group">\n <button title="' + out('Decrease') + '" data-overlayopacity="-">-</button>\n <button title="' + out('Increase') + '" data-overlayopacity="+">+</button>\n <button title="${i("Clear")}" data-overlayopacity="0"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n </div>\n\n </div>\n\n <button class="accordion-item" aria-expanded="false" aria-controls="boxcontent4">\n ${i("On Click")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="boxcontent4" aria-hidden="true">\n\n <div class="subpanel">\n <label class="label mt-1">\n <div>${i("Open")}:</div>\n <input type="text" class="inp-src-2">\n </label>\n\n <div class="group mt-2">\n <input class="inp-file-2" type="file" accept="image/*" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload-2"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-other-2">${this.builder.otherSelectIcon}</button>\n <button title="${i("Select")}" class="btn-asset-2"><svg><use xlink:href="#icon-folder"></use></svg></button>\n <button title="${i("Clear")}" class="btn-clear-2"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <br>\n\n <div class="group mt-1">\n <button title="${i("Test")}" class="btn-test" style="min-width:100px">${i("Test")}</button>\n </div>\n\n </div>\n\n </div>\n <button class="accordion-item" aria-expanded="false" aria-controls="boxcontent5">\n ${i("Responsive")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content last" id="boxcontent5" aria-hidden="true">\n\n <div class="subpanel">\n <label class="label checkbox mt-3">\n <input type="checkbox" class="chk-autofit" />\n <span>${i("Autofit Content")}</span>\n </label>\n \n <label class="label">${i("Autofit Minimum Height")}:\n <select class="inp-minheight mt-2">\n <option value="">${i("Not Set")}</option>\n <option value="20">20%</option>\n <option value="25">25%</option>\n <option value="30">30%</option>\n <option value="40">40%</option>\n <option value="50">50%</option>\n <option value="60">60%</option>\n <option value="70">70%</option>\n <option value="75">75%</option>\n <option value="80">80%</option>\n <option value="90">90%</option>\n <option value="100">100%</option>\n </select></label>\n\n <label class="label checkbox stackbg">\n <input type="checkbox" class="chk-stackbg"/> <span>${i("Stack Background on Mobile")}</span>\n </label>\n \n </div>\n\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t;const o=t.querySelector(".btn-module");this.imagePreview=t.querySelector(".asset-preview");const s=t.querySelector(".btn-upload"),a=t.querySelector(".inp-file");let l;s.addEventListener("click",(()=>{a.click()})),a.addEventListener("change",(t=>{a.files[0]&&(this.builder.onAssetUpload=t=>{this.updatePanelImage(t)},this.builder.onUploadCoverImage(t),a.value="")}));const r=t.querySelector(".inp-src"),c=()=>{this.builder.editor.saveForUndo();let t=r.value;const e=this.builder.activeBox.querySelector(".is-overlay-bg");t&&(e.style.backgroundImage=`url("${t}")`),this.builder.editor.onChange()};r.addEventListener("input",(()=>{clearTimeout(l),l=setTimeout((()=>{c()}),600)})),this.builder.onUploadCoverImage||(s.style.display="none");const d=t.querySelector(".btn-asset");d.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("image",(t=>{this.updateImage(t)}),d)})),this.builder.onImageSelectClick||this.builder.imageSelect||(d.style.display="none");t.querySelector(".btn-clear").addEventListener("click",(()=>{this.updateImage("")}));t.querySelector(".btn-adjust").addEventListener("click",(()=>{const t=this.builder.activeBox.querySelector(".is-overlay-bg");this.builder.controlpanel.objDialogImageAdjust.open(t)}));const u=t.querySelector(".chk-grayscale");u.addEventListener("click",(()=>{this.builder.editor.saveForUndo();const t=u.checked;this.box.boxGrayscale(t),this.builder.onChange()}));const p=t.querySelector(".btn-color");p.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeBox;let e=p.style.backgroundColor;this.builder.editor.colorpicker().open((e=>{t.style.backgroundColor="",this.box.setBoxBgColor(e),p.style.backgroundColor=e,this.builder.onChange()}),e)}));const h=t.querySelector(".btn-gradient");h.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeBox;let e=t.querySelector(".is-overlay");this.builder.editor.gradientpicker().open(e,(()=>{t.style.backgroundImage="",this.builder.onChange(),h.style.backgroundImage=e.style.backgroundImage}))})),o.addEventListener("click",(()=>{this.box.editModule()}));const m=t.querySelectorAll("[data-textcolor]");m.forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-textcolor");this.box.boxTextColor(e),m.forEach((t=>t.classList.remove("on"))),""!==e&&t.classList.add("on")}))}));t.querySelector(".btn-increase").addEventListener("click",(()=>{this.box.boxWidthLarger()}));t.querySelector(".btn-decrease").addEventListener("click",(()=>{this.box.boxWidthSmaller()}));t.querySelector(".btn-left").addEventListener("click",(()=>{this.box.boxMoveLeft()}));t.querySelector(".btn-right").addEventListener("click",(()=>{this.box.boxMoveRight()}));const b=t.querySelector(".group.addcontent"),g=t.querySelector(".contentcontrols");t.querySelector(".btn-addcontent").addEventListener("click",(()=>{this.box.addContent(),g.style.display="",b.style.display="none"}));t.querySelector(".btn-removecontent").addEventListener("click",(()=>{this.box.removeContent(),g.style.display="none",b.style.display="";const e=t.querySelector(".btn-accordion-text");e.style.display="none",e.nextElementSibling.style.display="none";t.querySelector(".defaulttextcolor").style.display="none"}));t.querySelectorAll("[data-content-size]").forEach((e=>{e.addEventListener("click",(()=>{let i=e.getAttribute("data-content-size");this.box.setContentWidth(i,(n=>{if(t.querySelector(".val-box-size").innerHTML=n,t.querySelectorAll("[data-content-size]").forEach((t=>t.classList.remove("on"))),"+"===i||"-"===i){const e=t.querySelector(`[data-content-size="${n}"]`);e&&e.classList.add("on")}else""!==i&&e.classList.add("on")}))}))}));t.querySelectorAll("[data-content-pos]").forEach((e=>{e.addEventListener("click",(()=>{let i=e.getAttribute("data-content-pos");this.box.moveContent(i),t.querySelectorAll("[data-content-pos]").forEach((t=>t.classList.remove("on"))),e.classList.add("on"),this.getState()}))}));t.querySelectorAll("[data-content-x]").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-content-x");this.box.adjustContentX(e)}))}));t.querySelectorAll("[data-content-y]").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-content-y");this.box.adjustContentY(e)}))}));t.querySelectorAll("[data-content-height]").forEach((e=>{e.addEventListener("click",(()=>{let i=e.getAttribute("data-content-height");this.box.setContentHeight(i);const n=t.querySelector(".contentjustify");""===i&&(n.style.display="none"),"100"===i&&(n.style.display="",t.querySelectorAll("[data-content-justify]").forEach((t=>t.classList.remove("on"))),t.querySelector('[data-content-justify="space-between"]').classList.add("on")),t.querySelectorAll("[data-content-height]").forEach((t=>t.classList.remove("on"))),e.classList.add("on")}))}));t.querySelectorAll("[data-content-justify]").forEach((e=>{e.addEventListener("click",(()=>{let i=e.getAttribute("data-content-justify");this.box.justifyContent(i),t.querySelectorAll("[data-content-justify]").forEach((t=>t.classList.remove("on"))),e.classList.add("on")}))}));t.querySelector(".btn-spacing").addEventListener("click",(()=>{this.builder.controlpanel.objDialogSpacingContainer.open()}));const v=t.querySelector(".chk-parallax");v.addEventListener("click",(()=>{let t=v.checked;this.box.parallaxContent(t)}));const f=t.querySelectorAll("[data-align]");f.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-align");this.box.boxTextAlign(e),f.forEach((t=>t.classList.remove("on"))),""!==e&&t.classList.add("on")}))}));const y=t.querySelectorAll("[data-parasize]");y.forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-parasize");this.box.boxParagraphSize(e),y.forEach((t=>t.classList.remove("on"))),""!==e&&t.classList.add("on")}))}));const x=t.querySelectorAll("[data-lineheight]");x.forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-lineheight");this.box.boxLineHeight(e),x.forEach((t=>t.classList.remove("on"))),""!==e&&t.classList.add("on")}))}));t.querySelectorAll("[data-textopacity]").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-textopacity");this.box.setContentOpacity(e)}))}));t.querySelector(".chk-animatebg").addEventListener("click",(()=>{t.querySelector(".chk-animatebg").checked?this.box.boxBgAnimate(!0):this.box.boxBgAnimate(!1)}));t.querySelector(".chk-parallaxscale").addEventListener("click",(()=>{t.querySelector(".chk-parallaxscale").checked?this.box.boxBgParallaxScale(!0):this.box.boxBgParallaxScale(!1)}));t.querySelector(".chk-parallaxbg").addEventListener("click",(()=>{t.querySelector(".chk-parallaxbg").checked?this.box.boxBgParallax(!0):this.box.boxBgParallax(!1)}));const _=t.querySelector(".chk-zoomhover");_.addEventListener("click",(()=>{_.checked?this.box.boxBgZoomHover(!0):this.box.boxBgZoomHover(!1)}));t.querySelectorAll("[data-overlayopacity]").forEach((t=>{t.addEventListener("click",(()=>{let e=t.getAttribute("data-overlayopacity");this.box.boxOverlayOpacity(e)}))}));const w=t.querySelector(".btn-overlaycolor");w.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);let t="";const e=this.builder.activeBox;let i=e.querySelector(".is-overlay"),n=i.querySelector(".is-overlay .is-overlay-color");n&&(t=n.style.backgroundColor);this.builder.editor.colorpicker().open((t=>{i||(e.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),i=e.querySelector(".is-overlay"));let n=i.querySelector(".is-overlay-bg");n||(i.insertAdjacentHTML("beforeend",'<div class="is-overlay-bg"></div>'),n=i.querySelector(".is-overlay-bg"));let o=n.querySelector(".is-overlay-color");o||(n.insertAdjacentHTML("beforeend",`<div class="is-overlay-color ${this.builder.cssClasses.opacity.opacity_5}"></div>`),o=n.querySelector(".is-overlay-color")),"none"!==o.style.display&&0!==o.style.opacity||(o.style.display="block",o.style.opacity=.1),""===t?o.parentNode.removeChild(o):o.style.backgroundColor=t,w.style.backgroundColor=t,this.builder.onChange()}),t)}));const S=t.querySelector(".inp-src-2");S.addEventListener("blur",(()=>{""===S.value?this.box.applyBoxClick(""):this.box.applyBoxClick(S.value)}));const k=t.querySelector(".btn-upload-2"),C=t.querySelector(".inp-file-2");k.addEventListener("click",(()=>{C.click()})),C.addEventListener("change",(t=>{C.files[0]&&(this.builder.editor.onAssetUpload=t=>{S.value=t,this.box.applyBoxClick(t)},this.builder.onMediaUpload(t),C.value="")})),this.builder.onMediaUpload||(k.style.display="none");const L=t.querySelector(".btn-asset-2");L.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("media",(t=>{S.value=t,this.box.applyBoxClick(t)}),L)})),this.builder.onMediaSelectClick||this.builder.mediaSelect||(L.style.display="none");const A=t.querySelector(".btn-other-2");A.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("all",(t=>{S.value=t,this.box.applyBoxClick(t)}),A)})),this.builder.onOtherSelectClick||this.builder.otherSelect||(A.style.display="none");t.querySelector(".btn-clear-2").addEventListener("click",(()=>{S.value="",this.box.applyBoxClick("")}));t.querySelector(".btn-test").addEventListener("click",(()=>{const t=this.builder.activeBox;this.builder.editor.openMedia(t)}));const E=t.querySelector(".chk-autofit");E.addEventListener("click",(()=>{let t=E.checked;this.box.setAutoFit(t)}));const q=t.querySelector(".inp-minheight");q.addEventListener("change",(()=>{let t=q.value;this.box.setMinHeight(t)}));const T=t.querySelector(".chk-stackbg");T.addEventListener("change",(()=>{this.box.stackBg(T.checked)}))}editorReady(){const t=this.panel.querySelector(".inp-src-2");try{this.builder.editor.dom.observeElement(t,"value",(()=>{this.box.applyBoxClick(t.value)}))}catch(t){}}getState(){let t=this.builder.controlpanel.activeBox;if(!t)return;let e=t.querySelector(".is-overlay");const n=t.querySelector(".is-overlay-bg"),o=t.querySelector(".is-overlay-content"),s=t.querySelector(".is-container"),a=this.panel,l=a.querySelector(".group.editmodule");if(o&&o.getAttribute("data-module")){l.style.display="";const t=a.querySelector(".btn-module").querySelector("span");let e=o.getAttribute("data-module"),n=o.getAttribute("data-module-desc");t.innerText=i("code"===e?"Module Code":n||"Module Settings")}else l.style.display="none";const r=a.querySelector(".boxaction");t.classList.contains("is-section")?r.style.display="none":r.style.display="";let c="";n&&n.style.backgroundImage&&-1!==n.style.backgroundImage.indexOf("url(")&&(c=n.style.backgroundImage.slice(4,-1).replace(/["']/g,""));a.querySelector(".inp-src").value=c;const d=a.querySelector(".label.grayscale");d.style.display=""===c?"none":"";const u=a.querySelector(".btn-color");let p;e&&(p=e.style.backgroundColor),p?u.style.backgroundColor=p:t.style.backgroundColor?(p=window.getComputedStyle(t,null).getPropertyValue("background-color"),"rgba(0, 0, 0, 0)"===p&&(p=""),u.style.backgroundColor=p):u.style.backgroundColor="";const h=a.querySelector(".btn-gradient");e&&e.style.backgroundImage?h.style.backgroundImage=e.style.backgroundImage:h.style.backgroundImage="",this.updatePanelImage(c);const m=a.querySelector(".chk-grayscale");m.checked=!1,e&&e.style.filter&&-1!==e.style.filter.indexOf("grayscale")&&(m.checked=!0),n&&n.style.filter&&-1!==n.style.filter.indexOf("grayscale")&&(m.checked=!0,e.style.filter="grayscale(1)",n.style.filter=n.style.filter.replace("grayscale(1)",""));const b=a.querySelector(".contentcontrols"),g=a.querySelector(".group.addcontent");s?(b.style.display="",g.style.display="none"):(b.style.display="none",g.style.display="");let v="is-content-",f=this.builder.screenMode;"desktop"===f?v="is-content-":"tablet-landscape"===f?v="md-w-":"tablet"===f?v="sm-w-":"mobile"===f&&(v="xs-w-");a.querySelectorAll("[data-content-size]").forEach((t=>t.classList.remove("on"))),a.querySelector(".val-box-size").innerHTML="",s&&s.classList.forEach((t=>{let e;if("is-content-"===v&&t.includes("is-content-")&&"is-content-left"!==t&&"is-content-right"!==t&&(e=t.replace(v,"")),"md-w-"===v&&t.includes("md-w-")&&(e=t.replace(v,"")),"sm-w-"===v&&t.includes("sm-w-")&&(e=t.replace(v,"")),"xs-w-"===v&&t.includes("xs-w-")&&(e=t.replace(v,"")),e){a.querySelector(".val-box-size").innerHTML="none"===e?"":e;const t=a.querySelector(`[data-content-size="${e}"]`);t&&t.classList.add("on")}}));a.querySelectorAll("[data-content-pos]").forEach((t=>t.classList.remove("on")));let y="middle";(t.classList.contains("is-content-top")||t.querySelector(".is-content-top"))&&(y="top"),(t.classList.contains("is-content-bottom")||t.querySelector(".is-content-bottom"))&&(y="bottom");let x="center";s&&(s.classList.contains("is-content-left")&&(x="left"),s.classList.contains("is-content-right")&&(x="right"));const _=a.querySelector(".label-xy"),w=a.querySelector(".adjustx"),S=a.querySelector(".adjusty");_.innerHTML="",w.style.display="none",S.style.display="none";let k="top"===y||"bottom"===y,C="left"===x||"right"===x;k&&(_.innerHTML="Adjust:",S.style.display=""),C&&(_.innerHTML="Adjust:",w.style.display=""),k&&C&&(_.innerHTML="Adjust X/Y:"),"top"===y&&"left"===x&&a.querySelector('[data-content-pos="topleft"]').classList.add("on"),"top"===y&&"center"===x&&a.querySelector('[data-content-pos="topcenter"]').classList.add("on"),"top"===y&&"right"===x&&a.querySelector('[data-content-pos="topright"]').classList.add("on"),"middle"===y&&"left"===x&&a.querySelector('[data-content-pos="middleleft"]').classList.add("on"),"middle"===y&&"center"===x&&a.querySelector('[data-content-pos="middlecenter"]').classList.add("on"),"middle"===y&&"right"===x&&a.querySelector('[data-content-pos="middleright"]').classList.add("on"),"bottom"===y&&"left"===x&&a.querySelector('[data-content-pos="bottomleft"]').classList.add("on"),"bottom"===y&&"center"===x&&a.querySelector('[data-content-pos="bottomcenter"]').classList.add("on"),"bottom"===y&&"right"===x&&a.querySelector('[data-content-pos="bottomright"]').classList.add("on");a.querySelectorAll("[data-content-height]").forEach((t=>t.classList.remove("on")));a.querySelectorAll("[data-content-justify]").forEach((t=>t.classList.remove("on")));const L=a.querySelector(".contentjustify");s&&("100%"===s.style.height||s.classList.contains("h-full")?(a.querySelector('[data-content-height="100"]').classList.add("on"),L.style.display="",("flex-start"===s.style.justifyContent||s.classList.contains("justify-start"))&&a.querySelector('[data-content-justify="flex-start"]').classList.add("on"),("flex-end"===s.style.justifyContent||s.classList.contains("justify-end"))&&a.querySelector('[data-content-justify="flex-end"]').classList.add("on"),("space-between"===s.style.justifyContent||s.classList.contains("justify-between"))&&a.querySelector('[data-content-justify="space-between"]').classList.add("on")):(a.querySelector('[data-content-height=""]').classList.add("on"),L.style.display="none"));const A=a.querySelector(".chk-parallax");if(A.checked=!1,s){let t=s.getAttribute("data-bottom-top");t&&-1!==t.indexOf("translateY")&&(A.checked=!0)}if(a.querySelectorAll("[data-textcolor]").forEach((t=>t.classList.remove("on"))),t.classList.contains("is-dark-text")){a.querySelector('[data-textcolor="dark"]').classList.add("on")}else if(t.classList.contains("is-light-text")){a.querySelector('[data-textcolor="light"]').classList.add("on")}if(a.querySelectorAll("[data-align]").forEach((t=>t.classList.remove("on"))),t.classList.contains("is-align-left")){a.querySelector('[data-align="left"]').classList.add("on")}else if(t.classList.contains("is-align-center")){a.querySelector('[data-align="center"]').classList.add("on")}else if(t.classList.contains("is-align-right")){a.querySelector('[data-align="right"]').classList.add("on")}else if(t.classList.contains("is-align-justify")){a.querySelector('[data-align="justify"]').classList.add("on")}if(s){if(a.querySelectorAll("[data-parasize]").forEach((t=>t.classList.remove("on"))),s.classList.contains("size-16")){a.querySelector('[data-parasize="16"]').classList.add("on")}else if(s.classList.contains("size-17")){a.querySelector('[data-parasize="17"]').classList.add("on")}else if(s.classList.contains("size-18")){a.querySelector('[data-parasize="18"]').classList.add("on")}else if(s.classList.contains("size-19")){a.querySelector('[data-parasize="19"]').classList.add("on")}else if(s.classList.contains("size-20")){a.querySelector('[data-parasize="20"]').classList.add("on")}else if(s.classList.contains("size-21")){a.querySelector('[data-parasize="21"]').classList.add("on")}if(a.querySelectorAll("[data-lineheight]").forEach((t=>t.classList.remove("on"))),s.classList.contains("leading-none")){a.querySelector('[data-lineheight="1"]').classList.add("on")}else if(s.classList.contains("leading-11")){a.querySelector('[data-lineheight="1.1"]').classList.add("on")}else if(s.classList.contains("leading-12")){a.querySelector('[data-lineheight="1.2"]').classList.add("on")}else if(s.classList.contains("leading-13")){a.querySelector('[data-lineheight="1.3"]').classList.add("on")}else if(s.classList.contains("leading-14")){a.querySelector('[data-lineheight="1.4"]').classList.add("on")}else if(s.classList.contains("leading-15")){a.querySelector('[data-lineheight="1.5"]').classList.add("on")}else if(s.classList.contains("leading-16")){a.querySelector('[data-lineheight="1.6"]').classList.add("on")}else if(s.classList.contains("leading-17")){a.querySelector('[data-lineheight="1.7"]').classList.add("on")}else if(s.classList.contains("leading-18")){a.querySelector('[data-lineheight="1.8"]').classList.add("on")}else if(s.classList.contains("leading-19")){a.querySelector('[data-lineheight="1.9"]').classList.add("on")}else if(s.classList.contains("leading-20")){a.querySelector('[data-lineheight="2"]').classList.add("on")}}const E=a.querySelector(".btn-accordion-text"),q=a.querySelector(".defaulttextcolor");s?(g.style.display="none",E.style.display="",q.style.display=""):(g.style.display="",E.style.display="none",E.nextElementSibling.style.display="none",q.style.display="none"),n&&(n.classList.contains("is-scale-animated")?a.querySelector(".chk-animatebg").checked=!0:a.querySelector(".chk-animatebg").checked=!1,n.getAttribute("data-top-bottom")||n.getAttribute("data-bottom-top")?a.querySelector(".chk-parallaxscale").checked=!0:a.querySelector(".chk-parallaxscale").checked=!1,"fixed"===n.style.backgroundAttachment?a.querySelector(".chk-parallaxbg").checked=!0:a.querySelector(".chk-parallaxbg").checked=!1,t.classList.contains("hover-zoom")?a.querySelector(".chk-zoomhover").checked=!0:a.querySelector(".chk-zoomhover").checked=!1);const T=t.querySelector(".is-overlay-color"),M=a.querySelector(".btn-overlaycolor");M.style.backgroundColor=T?T.style.backgroundColor:"";const O=a.querySelector(".inp-src-2");let I=t.getAttribute("data-modal-url");O.value=""!==I?I:"";const $=a.querySelector(".chk-autofit");$.checked=!1,t.classList.contains("box-autofit")&&($.checked=!0);const R=a.querySelector(".inp-minheight");R.value="";[20,25,30,40,50,60,70,75,80,90,100].forEach((e=>{const i=`min-height-${e}`;t.classList.contains(i)&&(R.value=e)}));const B=a.querySelector(".chk-stackbg");t.classList.contains("m-overlay-stack")?B.checked=!0:B.checked=!1,e||(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay")),t.classList.contains("is-bg-light")&&(t.classList.remove("is-bg-light"),e.style.backgroundColor||(e.style.backgroundColor="rgb(255, 255, 255)")),t.classList.contains("is-bg-dark")&&(t.classList.remove("is-bg-dark"),e.style.backgroundColor||(e.style.backgroundColor="rgb(17, 17, 17)")),t.classList.contains("is-bg-grey")&&(t.classList.remove("is-bg-grey"),e.style.backgroundColor||(e.style.backgroundColor="rgb(238, 239, 240)"))}updateImage(t){this.box.boxImage(t),this.updatePanelImage(t)}clear(){this.imagePreview.innerHTML=""}updatePanelImage(t){let e;e=t?`\n <img src="${t}">\n `:"",this.imagePreview.innerHTML=e;const i=this.panel;i.querySelector(".inp-src").value=t;const n=i.querySelector(".btn-clear"),o=i.querySelector(".btn-adjust"),s=i.querySelector(".btn-accordion-image"),a=i.querySelector(".stackbg");""===t?(n.style.display="none",o.style.display="none",s.style.display="none",s.nextElementSibling.style.display="none",a.style.display="none"):(n.style.display="",o.style.display="",s.style.display="",a.style.display="")}}class L{constructor(t,e){this.builder=e,this.section=this.builder.section;let n=`\n <div class="submain">\n\n <div class="flex">\n <div class="mr-2">\n <div class="label mt-2">${i("Move")}:</div>\n <div class="group sectionaction">\n <button title="${i("Top")}" data-move="top"><svg><use xlink:href="#icon-arrow-top"></use></svg></button>\n <button title="${i("Up")}" data-move="up"><svg><use xlink:href="#icon-arrow-up"></use></svg></button>\n <button title="${i("Down")}" data-move="down"><svg><use xlink:href="#icon-arrow-down"></use></svg></button>\n <button title="${i("Bottom")}" data-move="bottom"><svg><use xlink:href="#icon-arrow-bottom"></use></svg></button>\n </div>\n </div>\n <div>\n <div class="label mt-2">&nbsp;</div>\n <div class="group">\n <button title="${i("Duplicate")}" class="btn-duplicate">\n <svg><use xlink:href="#icon-copy"></use></svg> \n </button>\n </div>\n </div>\n </div>\n\n <div class="label">${i("Height")}:</div>\n <div class="group sectionheight">\n <button title="10%" data-height="10">10%</button>\n <button title="15%" data-height="15">15%</button>\n <button title="20%" data-height="20">20%</button>\n <button title="25%" data-height="25">25%</button>\n <button title="30%" data-height="30">30%</button>\n <button title="40%" data-height="40">40%</button>\n <button title="50%" data-height="50">50%</button>\n <button title="60%" data-height="60">60%</button>\n <button title="70%" data-height="70">70%</button>\n <button title="75%" data-height="75">75%</button>\n <button title="80%" data-height="80">80%</button>\n <button title="85%" data-height="85">85%</button>\n <button title="90%" data-height="90">90%</button>\n <button title="100%" data-height="100">100%</button>\n <button title="${i("Clear")}" class="btn-clear" data-height="0"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n </div>\n\n\n <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="sectioncontent0">\n ${i("Spacing")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="sectioncontent0" aria-hidden="true">\n\n <div class="subpanel">\n <div class="label mt-2">${i("Spacing")}:</div>\n <div class="group sectionspacing">\n <button title="${i("xxs")}" data-spacing="xxs">${i("xxs")}</button>\n <button title="${i("xs")}" data-spacing="default">${i("xs")}</button>\n <button title="${i("sm")}" data-spacing="sm">${i("sm")}</button>\n <button title="${i("m")}" data-spacing="m">${i("m")}</button>\n <button title="${i("lg")}" data-spacing="lg">${i("lg")}</button>\n <button title="${i("Clear")}" class="btn-clear" data-spacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="div-betweenbox">\n <div class="label mt-3">${i("Between Boxes")}:</div>\n <div class="group betweenbox">\n <button title="${i("space")}" data-betweenbox="space">${i("space")}</button>\n <button title="${i("no space")}" data-betweenbox="no-space">${i("no space")}</button>\n </div>\n </div>\n \n <div class="flex">\n <div class="mr-8">\n <div class="label mt-3">${i("Background Color")}:</div>\n <div class="group">\n <button title="${i("Color")}" class="btn-color is-btn-color"></button>\n </div>\n </div>\n <div>\n <div class="label mt-3">${i("Gradient")}:</div>\n <div class="group">\n <button title="${i("Gradient")}" class="btn-gradient is-btn-color"></button>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="sectioncontent1">\n ${i("Animation")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="sectioncontent1" aria-hidden="true">\n\n <div class="subpanel">\n <div class="label mt-2">${i("Start")}:</div>\n <div class="group animstart">\n <button title="${i("Slide Left")}" data-animstart="slide-left">${i("Slide Left")}</button>\n <button title="${i("Slide Right")}" data-animstart="slide-right">${i("Slide Right")}</button>\n <button title="${i("Zoom In")}" data-animstart="zoom-in">${i("Zoom In")}</button>\n <button title="${i("Clear")}" class="btn-clear" data-animstart=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label mt-2">${i("End")}:</div>\n <div class="group animend">\n <button title="${i("Slide Left")}" data-animend="slide-left">${i("Slide Left")}</button>\n <button title="${i("Slide Right")}" data-animend="slide-right">${i("Slide Right")}</button>\n <button title="${i("Zoom In")}" data-animend="zoom-in">${i("Zoom In")}</button>\n <button title="${i("Zoom Out")}" data-animend="zoom-out">${i("Zoom Out")}</button>\n <button title="${i("Slide Back")}" data-animend="slide-back">${i("Slide Back")}</button>\n <button title="${i("Clear")}" class="btn-clear" data-animend=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="sectioncontent2">\n ${i("Scroll")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="sectioncontent2" aria-hidden="true">\n\n <div class="subpanel">\n <div class="label mt-2">${i("Scroll Button")}:</div>\n <div class="group scrollbuttons">\n <button data-scrollpreset="1" title="${i("Apply")}" type="button">1</button>\n <button data-scrollpreset="2" title="${i("Apply")}" type="button">2</button>\n <button data-scrollpreset="3" title="${i("Apply")}" type="button">3</button>\n <button data-scrollpreset="4" title="${i("Apply")}" type="button">4</button>\n <button data-scrollpreset="5" title="${i("Apply")}" type="button">5</button>\n <button data-scrollpreset="6" title="${i("Apply")}" type="button">6</button>\n <button data-scrollpreset="7" title="${i("Apply")}" type="button">7</button>\n <button data-scrollpreset="8" title="${i("Apply")}" type="button">8</button>\n <button data-scrollpreset="9" title="${i("Apply")}" type="button">9</button>\n <button data-scrollpreset="10" title="${i("Apply")}" type="button">10</button>\n <button data-scrollpreset="11" title="${i("Apply")}" type="button">11</button>\n <button data-scrollpreset="12" title="${i("Apply")}" type="button">12</button>\n <button data-scrollpreset="13" title="${i("Apply")}" type="button">13</button>\n <button data-scrollpreset="14" title="${i("Apply")}" type="button">14</button>\n <button title="${i("Clear")}" class="btn-clear" data-scrollpreset=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="sectioncontent3">\n ${i("Responsive")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="sectioncontent3" aria-hidden="true">\n\n <div class="subpanel">\n <div class="div-target">\n <button title="${i("Desktop")}" class="on" data-device="">\n <svg><use xlink:href="#icon-device-desktop"></use></svg>\n </button>\n <button title="${i("Laptop/Tablet (Landscape)")}" data-device="md">\n <svg style="transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Tablet (Portrait)")}" data-device="sm">\n <svg><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Mobile")}" data-device="xs">\n <svg><use xlink:href="#icon-device-mobile"></use></svg>\n </button>\n </div>\n\n <div class="label mt-3">${i("Visibility")}:</div>\n <div class="group">\n <button title="${i("Visible")}" data-visibility="on" style="width: 105px">\n <svg><use xlink:href="#icon-eye"></use></svg>\n <span>${i("Visible")}</span>\n </button>\n <button title="${i("Hidden")}" data-visibility="" style="width: 105px">\n <svg><use xlink:href="#icon-eye-off"></use></svg>\n <span>${i("Hidden")}</span>\n </button>\n </div>\n\n <div class="div-boxesperline" style="flex-direction:column">\n <div class="label mt-2">${i("Boxes per Line")}:</div>\n <div class="group boxesperline">\n <button title="1" data-boxesperline="1">1</button>\n <button title="2" data-boxesperline="2">2</button>\n <button title="3" data-boxesperline="3">3</button>\n <button title="4" data-boxesperline="4">4</button>\n <button title="${i("Clear")}" class="btn-clear" data-boxesperline=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n\n <label class="label checkbox reverseboxes mt-3 mb-3">\n <input type="checkbox" class="chk-reverseboxes" />\n <span>${i("Reverse Boxes")}</span>\n </label>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="sectioncontent4">\n ${i("More")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content last" id="sectioncontent4" aria-hidden="true">\n\n <div class="subpanel">\n <label class="label mt-2">\n <div>${i("Add Section ID")}:</div>\n <input type="text" class="inp-section-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">\n </label>\n\n <label class="label">\n <div>${i("Add Css Classes")}:</div>\n <input type="text" class="inp-section-classes">\n </label>\n </div>\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t;t.querySelectorAll("[data-move]").forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-move");this.section.sectionMove(e)}))}));t.querySelector(".btn-duplicate").addEventListener("click",(()=>{this.section.sectionDuplicate()}));const o=t.querySelectorAll("[data-height]");o.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-height");this.section.setSectionHeight(e),o.forEach((t=>t.classList.remove("on"))),""!==e&&t.classList.add("on")}))}));const s=t.querySelectorAll("[data-spacing]");s.forEach((e=>{e.addEventListener("click",(()=>{const i=e.getAttribute("data-spacing");this.section.boxSpacing(i);const n=t.querySelector(".div-betweenbox");n.style.display=""===i?"none":"",this.builder.activeBox.classList.contains("is-section")&&(n.style.display="none"),s.forEach((t=>t.classList.remove("on"))),""!==i&&e.classList.add("on")}))}));const a=t.querySelectorAll("[data-betweenbox]");a.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-betweenbox");this.section.spaceBetween(e),a.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const l=t.querySelector(".btn-color");l.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeSection;let e=l.style.backgroundColor;this.builder.editor.colorpicker().open((e=>{t.classList.remove("is-bg-grey"),t.classList.remove("is-bg-dark"),t.classList.remove("is-bg-light"),this.section.setSectionBgColor(e),l.style.backgroundColor=e,this.builder.onChange()}),e)}));const r=t.querySelector(".btn-gradient");r.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);const t=this.builder.activeSection;this.builder.editor.gradientpicker().open(t,(()=>{this.section.clearOverlayBg(),this.builder.onChange(),r.style.backgroundImage=t.style.backgroundImage}))}));const c=t.querySelectorAll("[data-animstart]");c.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-animstart");this.section.sectionAnimStart(e),c.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const d=t.querySelectorAll("[data-animend]");d.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-animend");this.section.sectionAnimEnd(e),d.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const u=t.querySelectorAll("[data-scrollpreset]");u.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-scrollpreset");this.section.sectionScrollPreset(e),u.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const p=t.querySelector(".div-target"),h=p.querySelectorAll("[data-device]");h.forEach((t=>{t.addEventListener("click",(()=>{if(h.forEach((t=>t.classList.remove("on"))),t.classList.add("on"),this.builder.iframePanel){const t=this.getDeviceTarget(p);"xs"===t?this.builder.iframePanel.setScreenMode("mobile"):"sm"===t?this.builder.iframePanel.setScreenMode("tablet"):"md"===t?this.builder.iframePanel.setScreenMode("tablet-landscape"):this.builder.iframePanel.setScreenMode("desktop")}this.getState()}))}));const m=t.querySelectorAll("[data-visibility]");m.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-visibility"),i=this.getDeviceTarget(p);this.section.setVisibility(e,i),m.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const b=t.querySelectorAll("[data-boxesperline]");b.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-boxesperline"),i=this.getDeviceTarget(p);this.section.setBoxesPerLine(e,i),b.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const g=t.querySelector(".chk-reverseboxes");g.addEventListener("click",(()=>{let t=g.checked;const e=this.getDeviceTarget(p);this.section.reverseBoxes(t,e)}));const v=t.querySelector(".inp-section-id");v.addEventListener("change",(()=>{this.builder.editor.saveForUndo();const t=this.builder.activeSection,e=t.querySelector(".is-section-info");""!==v.value?(t.setAttribute("id",v.value),e.innerHTML=`<div>#${v.value}</div>`):(t.removeAttribute("id"),e.innerHTML=""),this.builder.onChange()}));const f=t.querySelector(".inp-section-classes");f.addEventListener("change",(()=>{this.builder.editor.saveForUndo();const t=this.builder.activeSection;let e=[],i=t.getAttribute("data-class");i&&(e=i.split(" "));let n=[],o=f.value;n=o.split(" "),e.forEach((e=>{n.includes(e)||t.classList.remove(e)})),n.forEach((e=>{""!==e&&t.classList.add(e)})),t.setAttribute("data-class",o),""===t.getAttribute("data-class")&&t.removeAttribute("data-class"),this.builder.onChange()})),v.addEventListener("keyup",(()=>{const t=this.builder.activeSection,e=t.querySelector(".is-section-info");""!==v.value?(t.setAttribute("id",v.value),e.innerHTML=`<div>#${v.value}</div>`):(t.removeAttribute("id"),e.innerHTML="")}))}getState(){let t=this.builder.controlpanel.activeSection;if(!t)return;const e=this.panel,i=e.querySelector(".div-target");if(this.builder.iframePanel){i.querySelectorAll("[data-device]").forEach((t=>t.classList.remove("on")));let t=this.builder.screenMode;"mobile"===t?i.querySelector('[data-device="xs"]').classList.add("on"):"tablet"===t?i.querySelector('[data-device="sm"]').classList.add("on"):"tablet-landscape"===t?i.querySelector('[data-device="md"]').classList.add("on"):i.querySelector('[data-device=""]').classList.add("on")}const n=t.getAttribute("id"),o=e.querySelector(".inp-section-id");o.value=n||"";const s=t.getAttribute("data-class"),a=e.querySelector(".inp-section-classes");a.value=s||"";let l=t.querySelectorAll(".is-bg-light");l.forEach((t=>{if(t.classList.remove("is-bg-light"),t.classList.contains("is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(255, 255, 255)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(255, 255, 255)")}})),l=this.builder.activeSection.querySelectorAll(".is-bg-dark"),l.forEach((t=>{if(t.classList.remove("is-bg-dark"),t.classList.contains("is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(17, 17, 17)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(17, 17, 17)")}})),l=this.builder.activeSection.querySelectorAll(".is-bg-grey"),l.forEach((t=>{if(t.classList.remove("is-bg-grey"),t.classList.contains("is-box")){let e=t.querySelector(".is-overlay");e?e.style.backgroundColor||(e.style.backgroundColor="rgb(238, 239, 240)"):(t.insertAdjacentHTML("afterbegin",'<div class="is-overlay"></div>'),e=t.querySelector(".is-overlay"),e.style.backgroundColor="rgb(238, 239, 240)")}})),e.querySelectorAll("[data-height]").forEach((t=>t.classList.remove("on"))),t.classList.contains("is-section-100")&&e.querySelector('[data-height="100"]').classList.add("on"),t.classList.contains("is-section-90")&&e.querySelector('[data-height="90"]').classList.add("on"),t.classList.contains("is-section-85")&&e.querySelector('[data-height="85"]').classList.add("on"),t.classList.contains("is-section-80")&&e.querySelector('[data-height="80"]').classList.add("on"),t.classList.contains("is-section-75")&&e.querySelector('[data-height="75"]').classList.add("on"),t.classList.contains("is-section-70")&&e.querySelector('[data-height="70"]').classList.add("on"),t.classList.contains("is-section-60")&&e.querySelector('[data-height="60"]').classList.add("on"),t.classList.contains("is-section-50")&&e.querySelector('[data-height="50"]').classList.add("on"),t.classList.contains("is-section-40")&&e.querySelector('[data-height="40"]').classList.add("on"),t.classList.contains("is-section-30")&&e.querySelector('[data-height="30"]').classList.add("on"),t.classList.contains("is-section-25")&&e.querySelector('[data-height="25"]').classList.add("on"),t.classList.contains("is-section-20")&&e.querySelector('[data-height="20"]').classList.add("on"),t.classList.contains("is-section-15")&&e.querySelector('[data-height="15"]').classList.add("on"),t.classList.contains("is-section-10")&&e.querySelector('[data-height="10"]').classList.add("on");let r=e.querySelectorAll("[data-animstart]");if(r.forEach((t=>t.classList.remove("on"))),r=e.querySelectorAll("[data-animend]"),r.forEach((t=>t.classList.remove("on"))),t.hasAttribute("data-anim-start")){const i=t.getAttribute("data-anim-start");"zoom-in"===i&&e.querySelector('[data-animstart="zoom-in"]').classList.add("on"),"zoom-out"===i&&e.querySelector('[data-animstart="zoom-out"]').classList.add("on"),"slide-left"===i&&e.querySelector('[data-animstart="slide-left"]').classList.add("on"),"slide-right"===i&&e.querySelector('[data-animstart="slide-right"]').classList.add("on")}if(t.hasAttribute("data-anim-end")){const i=t.getAttribute("data-anim-end");"zoom-in"===i&&e.querySelector('[data-animend="zoom-in"]').classList.add("on"),"zoom-out"===i&&e.querySelector('[data-animend="zoom-out"]').classList.add("on"),"slide-left"===i&&e.querySelector('[data-animend="slide-left"]').classList.add("on"),"slide-right"===i&&e.querySelector('[data-animend="slide-right"]').classList.add("on"),"overlap"===i&&e.querySelector('[data-animend="overlap"]').classList.add("on"),"slide-back"===i&&e.querySelector('[data-animend="slide-back"]').classList.add("on")}r=e.querySelectorAll("[data-spacing]"),r.forEach((t=>t.classList.remove("on"))),t.classList.contains("box-space")&&(t.classList.contains("box-space-sm")?e.querySelector('[data-spacing="sm"]').classList.add("on"):t.classList.contains("box-space-xxs")?e.querySelector('[data-spacing="xxs"]').classList.add("on"):t.classList.contains("box-space-m")?e.querySelector('[data-spacing="m"]').classList.add("on"):t.classList.contains("box-space-lg")?e.querySelector('[data-spacing="lg"]').classList.add("on"):e.querySelector('[data-spacing="default"]').classList.add("on"));const c=e.querySelector(".div-betweenbox");t.classList.contains("is-box")?c.style.display="none":c.style.display="",r=e.querySelectorAll("[data-betweenbox]"),r.forEach((t=>t.classList.remove("on"))),t.classList.contains("space-around")?e.querySelector('[data-betweenbox="no-space"]').classList.add("on"):e.querySelector('[data-betweenbox="space"]').classList.add("on"),r=e.querySelectorAll("[data-scrollpreset]"),r.forEach((t=>t.classList.remove("on")));const d=t.querySelector(".is-arrow-down");if(d){let t=d.getAttribute("data-scroll-preset");t&&e.querySelector(`[data-scrollpreset="${t}"]`).classList.add("on")}let u=t.style.backgroundColor,p=t.style.backgroundImage;const h=e.querySelector(".btn-color"),m=e.querySelector(".btn-gradient");h.style.backgroundColor=u||"",m.style.backgroundImage=p||"",this.realtimeVisibility(t,!0);const b=e.querySelector(".div-boxesperline"),g=e.querySelector(".reverseboxes");t.querySelectorAll(".is-box").length>1?(g.style.display="flex",b.style.display="flex"):(g.style.display="none",b.style.display="none")}getDeviceTarget(t){return t.querySelector("button.on").getAttribute("data-device")}realtimeVisibility(t){const e=this.panel,i=e.querySelector(".div-target"),n=this.getDeviceTarget(i);e.querySelectorAll("[data-boxesperline]").forEach((t=>t.classList.remove("on")));let o=!1,s=!1;"xs"===n?(o=t.classList.contains("xs-box-reverse"),s=t.classList.contains("xs-hidden"),t.classList.contains("xs-boxes-1")?e.querySelector('[data-boxesperline="1"]').classList.add("on"):t.classList.contains("xs-boxes-2")?e.querySelector('[data-boxesperline="2"]').classList.add("on"):t.classList.contains("xs-boxes-3")?e.querySelector('[data-boxesperline="3"]').classList.add("on"):t.classList.contains("xs-boxes-4")&&e.querySelector('[data-boxesperline="4"]').classList.add("on")):"sm"===n?(o=t.classList.contains("sm-box-reverse"),s=t.classList.contains("sm-hidden"),t.classList.contains("sm-boxes-1")?e.querySelector('[data-boxesperline="1"]').classList.add("on"):t.classList.contains("sm-boxes-2")?e.querySelector('[data-boxesperline="2"]').classList.add("on"):t.classList.contains("sm-boxes-3")?e.querySelector('[data-boxesperline="3"]').classList.add("on"):t.classList.contains("sm-boxes-4")&&e.querySelector('[data-boxesperline="4"]').classList.add("on")):"md"===n?(o=t.classList.contains("md-box-reverse"),s=t.classList.contains("md-hidden"),t.classList.contains("md-boxes-1")?e.querySelector('[data-boxesperline="1"]').classList.add("on"):t.classList.contains("md-boxes-2")?e.querySelector('[data-boxesperline="2"]').classList.add("on"):t.classList.contains("md-boxes-3")?e.querySelector('[data-boxesperline="3"]').classList.add("on"):t.classList.contains("md-boxes-4")&&e.querySelector('[data-boxesperline="4"]').classList.add("on")):(o=t.classList.contains("desktop-box-reverse"),s=t.classList.contains("desktop-hidden"),t.classList.contains("desktop-boxes-1")?e.querySelector('[data-boxesperline="1"]').classList.add("on"):t.classList.contains("desktop-boxes-2")?e.querySelector('[data-boxesperline="2"]').classList.add("on"):t.classList.contains("desktop-boxes-3")?e.querySelector('[data-boxesperline="3"]').classList.add("on"):t.classList.contains("desktop-boxes-4")&&e.querySelector('[data-boxesperline="4"]').classList.add("on"));e.querySelector(".chk-reverseboxes").checked=o,e.querySelectorAll("[data-visibility]").forEach((t=>t.classList.remove("on"))),s?e.querySelector('[data-visibility=""]').classList.add("on"):e.querySelector('[data-visibility="on"]').classList.add("on")}}class A{constructor(t,e){this.builder=e;let n=`\n <div class="submain">\n\n <div class="flex">\n <div class="mr-8">\n <div class="label mt-1">${i("Background Color")}:</div>\n <div class="group">\n <button title="${i("Color")}" class="btn-color is-btn-color"></button>\n </div>\n </div>\n <div>\n <div class="label mt-1">${i("Gradient")}:</div>\n <div class="group">\n <button title="${i("Gradient")}" class="btn-gradient is-btn-color"></button>\n </div>\n </div>\n </div>\n\n <div class="label mt-3">${i("Background Image")}:</div>\n\n <div class="asset-preview"></div>\n\n <div class="imagesource mt-1 mb-1">\n <input type="text" class="inp-src">\n </div>\n\n <div class="group mt-2">\n <input class="inp-file" type="file" accept="image/*" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>\n <button title="${i("Clear")}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n <button title="${i("Adjust")}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>\n </div>\n\n <div class="label mt-3">${i("Text Color")}:</div>\n <div class="group textcolor">\n <button title="${i("Light")}" data-textcolor="light">${i("Light")}</button>\n <button title="${i("Dark")}" data-textcolor="dark">${i("Dark")}</button>\n <button title="${i("Clear")}" data-textcolor="" style="width:120px"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <label class="label checkbox mt-3 mb-3">\n <input type="checkbox" class="chk-grayscale" />\n <span>${i("Grayscale")}</span>\n </label>\n\n </div>\n \n <button class="accordion-item btn-accordion-content" aria-expanded="false" aria-controls="columncontent1">\n ${i("Content")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="columncontent1" aria-hidden="true">\n\n <div class="subpanel">\n <div class="label mt-2">${i("Position")}:</div>\n\n <div class="flex" style="justify-content:flex-start;align-items: flex-end;">\n <div class="group contentposition mr-3">\n <div class="flex">\n <button title="${i("Top Left")}" data-content-pos="topleft">&#8598;</button>\n <button title="${i("Top Center")}" data-content-pos="topcenter">&#8593;</button>\n <button title="${i("Top Right")}" data-content-pos="topright">&#8599;</button>\n </div>\n <div class="flex">\n <button title="${i("Middle Left")}" data-content-pos="centerleft">&#8592;</button>\n <button title="${i("Center")}" data-content-pos="center">&#9737;</button>\n <button title="${i("Middle Right")}" data-content-pos="centerright">&#8594;</button>\n </div>\n <div class="flex">\n <button title="${i("Bottom Left")}" data-content-pos="bottomleft">&#8601;</button>\n <button title="${i("Bottom Center")}" data-content-pos="bottomcenter">&#8595;</button>\n <button title="${i("Bottom Right")}" data-content-pos="bottomright">&#8600;</button>\n </div>\n </div>\n <div class="group">\n <button title="${i("Clear")}" class="btn-clear" data-content-pos=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n\n <div class="group editspacing mt-3">\n <button title="${i("Spacing")}" class="btn-spacing" data-value="">${i("Spacing")}</button>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item" aria-expanded="false" aria-controls="columncontent2">\n ${i("On Click")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="columncontent2" aria-hidden="true">\n\n <div class="subpanel">\n <label class="label mt-1">\n <div>${i("Open")}:</div>\n <input type="text" class="inp-src-2">\n </label>\n\n <div class="group mt-2">\n <input class="inp-file-2" type="file" accept="image/*" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload-2"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-other-2">${this.builder.otherSelectIcon}</button>\n <button title="${i("Select")}" class="btn-asset-2"><svg><use xlink:href="#icon-folder"></use></svg></button>\n <button title="${i("Clear")}" class="btn-clear-2"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <br>\n\n <div class="group mt-1">\n <button title="${i("Test")}" class="btn-test" style="min-width:100px">${i("Test")}</button>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="columncontent3">\n ${i("Responsive")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="columncontent3" aria-hidden="true">\n\n <div class="subpanel">\n <div class="div-target">\n <button title="${i("Desktop")}" class="on" data-device="">\n <svg><use xlink:href="#icon-device-desktop"></use></svg>\n </button>\n <button title="${i("Laptop/Tablet (Landscape)")}" data-device="md">\n <svg style="transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Tablet (Portrait)")}" data-device="sm">\n <svg><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Mobile")}" data-device="xs">\n <svg><use xlink:href="#icon-device-mobile"></use></svg>\n </button>\n </div>\n\n <div class="label mt-3">${i("Visibility")}:</div>\n <div class="group">\n <button title="${i("Visible")}" data-visibility="on" style="width: 105px">\n <svg><use xlink:href="#icon-eye"></use></svg>\n <span>${i("Visible")}</span>\n </button>\n <button title="${i("Hidden")}" data-visibility="" style="width: 105px">\n <svg><use xlink:href="#icon-eye-off"></use></svg>\n <span>${i("Hidden")}</span>\n </button>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="columncontent4">\n ${i("More")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content last" id="columncontent4" aria-hidden="true">\n\n <div class="subpanel">\n <label class="label mt-2">\n <div>${i("Add Section ID")}:</div>\n <input type="text" class="inp-column-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">\n </label>\n\n <label class="label">\n <div>${i("Add Css Classes")}:</div>\n <input type="text" class="inp-column-classes">\n </label>\n </div>\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t,this.imagePreview=t.querySelector(".asset-preview");const o=t.querySelector(".btn-upload"),s=t.querySelector(".inp-file");let a;o.addEventListener("click",(()=>{s.click()})),s.addEventListener("change",(t=>{s.files[0]&&(this.builder.editor.onAssetUpload=t=>{this.updateImage(t)},this.builder.onImageUpload(t),s.value="")}));const l=t.querySelector(".inp-src"),r=()=>{this.builder.editor.saveForUndo();let t=l.value;this.builder.controlpanel.activeColumn.style.backgroundImage=`url("${t}")`,this.builder.editor.onChange()};l.addEventListener("input",(()=>{clearTimeout(a),a=setTimeout((()=>{r()}),600)})),this.builder.onImageUpload||(o.style.display="none");const c=t.querySelector(".btn-asset");c.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("image",(t=>{this.updateImage(t)}),c)})),this.builder.onImageSelectClick||this.builder.imageSelect||(c.style.display="none");t.querySelector(".btn-clear").addEventListener("click",(()=>{this.updateImage("")}));t.querySelector(".btn-adjust").addEventListener("click",(()=>{let t=this.builder.controlpanel.activeColumn;this.builder.controlpanel.objDialogImageAdjust.open(t)}));const d=t.querySelector(".chk-grayscale");d.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeColumn;d.checked?t.style.filter="grayscale(1)":t.style.filter&&(t.style.filter=t.style.filter.replace("grayscale(1)","")),this.builder.onChange()}));const u=t.querySelector(".btn-color");u.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);let t=this.builder.controlpanel.activeColumn,e=u.style.backgroundColor;this.builder.editor.colorpicker().open((e=>{t.style.backgroundColor=e,t.style.backgroundImage="",u.style.backgroundColor=e,this.builder.onChange()}),e)}));const p=t.querySelector(".btn-gradient");p.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);let t=this.builder.controlpanel.activeColumn;this.builder.editor.gradientpicker().open(t,(()=>{this.builder.onChange(),p.style.backgroundImage=t.style.backgroundImage}))}));const h=t.querySelectorAll("[data-textcolor]");h.forEach((t=>{t.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let e=this.builder.controlpanel.activeColumn,i=t.getAttribute("data-textcolor");"dark"===i?(e.classList.remove("is-light-text"),e.classList.add("is-dark-text")):"light"===i?(e.classList.remove("is-dark-text"),e.classList.add("is-light-text")):(e.classList.remove("is-dark-text"),e.classList.remove("is-light-text"));let n=e.querySelectorAll("*");Array.prototype.forEach.call(n,(t=>{t.style.color&&(t.style.color="")})),this.builder.onChange(),h.forEach((t=>t.classList.remove("on"))),""!==i&&t.classList.add("on")}))}));t.querySelectorAll("[data-content-pos]").forEach((e=>{e.addEventListener("click",(()=>{this.builder.editor.saveForUndo();let i=this.builder.controlpanel.activeColumn,n=e.getAttribute("data-content-pos");const o=this.builder.cssClasses;if(""!==n){let t=o.display;if(this.addCssClass(i,t.flex,t),t=o.flexDirection,this.addCssClass(i,t.column,t),"topleft"===n){let t=o.justifyContent;this.addCssClass(i,t.start,t),t=o.alignItems,this.addCssClass(i,t.start,t)}if("topcenter"===n){let t=o.justifyContent;this.addCssClass(i,t.start,t),t=o.alignItems,this.addCssClass(i,t.center,t)}if("topright"===n){let t=o.justifyContent;this.addCssClass(i,t.start,t),t=o.alignItems,this.addCssClass(i,t.end,t)}if("centerleft"===n){let t=o.justifyContent;this.addCssClass(i,t.center,t),t=o.alignItems,this.addCssClass(i,t.start,t)}if("center"===n){let t=o.justifyContent;this.addCssClass(i,t.center,t),t=o.alignItems,this.addCssClass(i,t.center,t)}if("centerright"===n){let t=o.justifyContent;this.addCssClass(i,t.center,t),t=o.alignItems,this.addCssClass(i,t.end,t)}if("bottomleft"===n){let t=o.justifyContent;this.addCssClass(i,t.end,t),t=o.alignItems,this.addCssClass(i,t.start,t)}if("bottomcenter"===n){let t=o.justifyContent;this.addCssClass(i,t.end,t),t=o.alignItems,this.addCssClass(i,t.center,t)}if("bottomright"===n){let t=o.justifyContent;this.addCssClass(i,t.end,t),t=o.alignItems,this.addCssClass(i,t.end,t)}i.style.justifyContent="",i.style.alignItems=""}else this.removeCssClasses(i,o.display),this.removeCssClasses(i,o.flexDirection),this.removeCssClasses(i,o.justifyContent),this.removeCssClasses(i,o.alignItems),i.style.display="",i.style.flexDirection="",i.style.justifyContent="",i.style.alignItems="";t.querySelectorAll("[data-content-pos]").forEach((t=>t.classList.remove("on"))),e.classList.add("on"),this.builder.onChange()}))}));const m=t.querySelector(".inp-src-2");m.addEventListener("blur",(()=>{""===m.value?this.applyClick(""):this.applyClick(m.value)}));try{this.builder.editor.dom.observeElement(m,"value",(()=>{this.applyClick(m.value)}))}catch(t){}const b=t.querySelector(".btn-upload-2"),g=t.querySelector(".inp-file-2");b.addEventListener("click",(()=>{g.click()})),g.addEventListener("change",(t=>{g.files[0]&&(this.builder.editor.onAssetUpload=t=>{m.value=t,this.applyClick(t)},this.builder.onMediaUpload(t),g.value="")})),this.builder.onMediaUpload||(b.style.display="none");const v=t.querySelector(".btn-asset-2");v.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("media",(t=>{m.value=t,this.applyClick(t)}),v)})),this.builder.onMediaSelectClick||this.builder.mediaSelect||(v.style.display="none");const f=t.querySelector(".btn-other-2");f.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("all",(t=>{m.value=t,this.applyClick(t)}),f)})),this.builder.onOtherSelectClick||this.builder.otherSelect||(f.style.display="none");t.querySelector(".btn-clear-2").addEventListener("click",(()=>{m.value="",this.applyClick("")}));t.querySelector(".btn-test").addEventListener("click",(()=>{let t=this.builder.controlpanel.activeColumn;this.builder.editor.openMedia(t)}));const y=t.querySelector(".div-target"),x=y.querySelectorAll("[data-device]");x.forEach((t=>{t.addEventListener("click",(()=>{if(x.forEach((t=>t.classList.remove("on"))),t.classList.add("on"),this.builder.iframePanel){const t=this.getDeviceTarget(y);"xs"===t?this.builder.iframePanel.setScreenMode("mobile"):"sm"===t?this.builder.iframePanel.setScreenMode("tablet"):"md"===t?this.builder.iframePanel.setScreenMode("tablet-landscape"):this.builder.iframePanel.setScreenMode("desktop")}this.getState()}))}));const _=t.querySelectorAll("[data-visibility]");_.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-visibility"),i=this.getDeviceTarget(y);this.setVisibility(e,i),_.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const w=t.querySelector(".inp-column-id");w.addEventListener("change",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeColumn;""!==w.value?t.setAttribute("id",w.value):t.removeAttribute("id"),this.builder.onChange()}));const S=t.querySelector(".inp-column-classes");S.addEventListener("change",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeColumn,e=[],i=t.getAttribute("data-class");i&&(e=i.split(" "));let n=[],o=S.value;n=o.split(" "),e.forEach((e=>{n.includes(e)||t.classList.remove(e)})),n.forEach((e=>{""!==e&&t.classList.add(e)})),t.setAttribute("data-class",o),""===t.getAttribute("data-class")&&t.removeAttribute("data-class"),this.builder.onChange()})),w.addEventListener("keyup",(()=>{let t=this.builder.controlpanel.activeColumn;""!==w.value?t.setAttribute("id",w.value):t.removeAttribute("id")}));t.querySelector(".btn-spacing").addEventListener("click",(()=>{this.builder.controlpanel.objDialogSpacingColumn.open()}))}getState(){let t=this.builder.controlpanel.activeColumn;if(!t)return;const e=this.panel,i=e.querySelector(".div-target");if(this.builder.iframePanel){i.querySelectorAll("[data-device]").forEach((t=>t.classList.remove("on")));let t=this.builder.screenMode;"mobile"===t?i.querySelector('[data-device="xs"]').classList.add("on"):"tablet"===t?i.querySelector('[data-device="sm"]').classList.add("on"):"tablet-landscape"===t?i.querySelector('[data-device="md"]').classList.add("on"):i.querySelector('[data-device=""]').classList.add("on")}let n="";t.style.backgroundImage&&-1!==t.style.backgroundImage.indexOf("url(")&&(n=t.style.backgroundImage.slice(4,-1).replace(/["']/g,""));e.querySelector(".inp-src").value=n,this.updatePanelImage(n);const o=e.querySelector(".btn-color");let s=t.style.backgroundColor;s?o.style.backgroundColor=s:t.style.backgroundColor?(s=window.getComputedStyle(t,null).getPropertyValue("background-color"),"rgba(0, 0, 0, 0)"===s&&(s=""),o.style.backgroundColor=s):o.style.backgroundColor="";const a=e.querySelector(".btn-gradient");t.style.backgroundImage?a.style.backgroundImage=t.style.backgroundImage:a.style.backgroundImage="";const l=e.querySelector(".chk-grayscale");l.checked=!1,t.style.filter&&-1!==t.style.filter.indexOf("grayscale")&&(l.checked=!0),e.querySelectorAll("[data-textcolor]").forEach((t=>t.classList.remove("on"))),t.classList.contains("is-dark-text")&&e.querySelector('[data-textcolor="dark"').classList.add("on"),t.classList.contains("is-light-text")&&e.querySelector('[data-textcolor="light"').classList.add("on"),e.querySelectorAll("[data-content-pos]").forEach((t=>t.classList.remove("on")));let r=this.builder.cssClasses.justifyContent,c=this.builder.cssClasses.alignItems,d="";t.classList.contains(r.start)?t.classList.contains(c.start)?d="topleft":t.classList.contains(c.center)?d="topcenter":t.classList.contains(c.end)&&(d="topright"):t.classList.contains(r.center)?t.classList.contains(c.start)?d="centerleft":t.classList.contains(c.center)?d="center":t.classList.contains(c.end)&&(d="centerright"):t.classList.contains(r.end)&&(t.classList.contains(c.start)?d="bottomleft":t.classList.contains(c.center)?d="bottomcenter":t.classList.contains(c.end)&&(d="bottomright")),"topleft"===d?e.querySelector('[data-content-pos="topleft"').classList.add("on"):"topcenter"===d?e.querySelector('[data-content-pos="topcenter"').classList.add("on"):"topright"===d?e.querySelector('[data-content-pos="topright"').classList.add("on"):"centerleft"===d?e.querySelector('[data-content-pos="centerleft"').classList.add("on"):"center"===d?e.querySelector('[data-content-pos="center"').classList.add("on"):"centerright"===d?e.querySelector('[data-content-pos="centerright"').classList.add("on"):"bottomleft"===d?e.querySelector('[data-content-pos="bottomleft"').classList.add("on"):"bottomcenter"===d?e.querySelector('[data-content-pos="bottomcenter"').classList.add("on"):"bottomright"===d&&e.querySelector('[data-content-pos="bottomright"').classList.add("on"),this.realtimeVisibility(t);const u=e.querySelector(".inp-src-2");let p=t.getAttribute("data-modal-url");u.value=""!==p?p:"";const h=t.getAttribute("id"),m=e.querySelector(".inp-column-id");m.value=h||"";const b=t.getAttribute("data-class"),g=e.querySelector(".inp-column-classes");g.value=b||""}addCssClass(t,e,i){this.removeCssClasses(t,i),t.classList.add(e)}removeCssClasses(t,e){for(let i=0;i<Object.keys(e).length;i++){const n=Object.values(e)[i];t.classList.remove(n)}}applyClick(t){let e=this.builder.controlpanel.activeColumn,i=e.getAttribute("data-modal-url");i||(i=""),i!==t&&(this.builder.editor.saveForUndo(),""===t?(e.classList.remove("block-click"),e.removeAttribute("data-modal-url")):(e.classList.add("block-click"),e.setAttribute("data-modal-url",t)),this.builder.onChange())}getDeviceTarget(t){return t.querySelector("button.on").getAttribute("data-device")}setVisibility(t,e){let i=this.builder.controlpanel.activeColumn;i.classList.remove("hideonmobile"),this.builder.editor.saveForUndo();const n=(t,e)=>t.querySelectorAll(`.${e}-hidden`).length>0;"on"===t?"xs"===e?i.classList.remove("xs-hidden"):"sm"===e?(i.classList.remove("sm-hidden"),n(i.parentNode,"sm")||i.parentNode.classList.remove("sm-autofit")):"md"===e?(i.classList.remove("md-hidden"),n(i.parentNode,"md")||i.parentNode.classList.remove("md-autofit")):""===e&&(i.classList.remove("desktop-hidden"),n(i.parentNode,"desktop")||i.parentNode.classList.remove("desktop-autofit")):"xs"===e?i.classList.add("xs-hidden"):"sm"===e?(i.classList.add("sm-hidden"),i.parentNode.classList.add("sm-autofit")):"md"===e?(i.classList.add("md-hidden"),i.parentNode.classList.add("md-autofit")):""===e&&(i.classList.add("desktop-hidden"),i.parentNode.classList.add("desktop-autofit")),this.builder.onChange()}realtimeVisibility(t){const e=this.panel,i=e.querySelector(".div-target"),n=this.getDeviceTarget(i);let o=!1;o="xs"===n?t.classList.contains("xs-hidden"):"sm"===n?t.classList.contains("sm-hidden"):"md"===n?t.classList.contains("md-hidden"):t.classList.contains("desktop-hidden"),e.querySelectorAll("[data-visibility]").forEach((t=>t.classList.remove("on"))),o?e.querySelector('[data-visibility=""]').classList.add("on"):e.querySelector('[data-visibility="on"]').classList.add("on")}updateImage(t){this.builder.editor.saveForUndo();let e=this.builder.controlpanel.activeColumn;t?(e.style.backgroundImage=`url("${t}")`,e.style.backgroundSize="cover"):(e.style.backgroundImage="",e.style.backgroundSize=""),this.builder.editor.onChange(),this.updatePanelImage(t)}clear(){this.imagePreview.innerHTML=""}updatePanelImage(t){let e;e=t?`\n <img src="${t}">\n `:"",this.imagePreview.innerHTML=e;const i=this.panel;i.querySelector(".inp-src").value=t;const n=i.querySelector(".btn-clear"),o=i.querySelector(".btn-adjust");""===t?(n.style.display="none",o.style.display="none"):(n.style.display="",o.style.display="")}}class E{constructor(t,e){this.builder=e;let n=`\n <div class="submain">\n\n <div class="flex">\n <div class="mr-8">\n <div class="label mt-1">${i("Background Color")}:</div>\n <div class="group">\n <button title="${i("Color")}" class="btn-color is-btn-color"></button>\n </div>\n </div>\n <div>\n <div class="label mt-1">${i("Gradient")}:</div>\n <div class="group">\n <button title="${i("Gradient")}" class="btn-gradient is-btn-color"></button>\n </div>\n </div>\n </div>\n\n <div class="label mt-3">${i("Background Image")}:</div>\n\n <div class="asset-preview"></div>\n\n <div class="imagesource mt-1 mb-1">\n <input type="text" class="inp-src">\n </div>\n\n <div class="group mt-2">\n <input class="inp-file" type="file" accept="image/*" style="display:none"/>\n <button title="${i("Upload")}" class="btn-upload"><svg><use xlink:href="#icon-upload"></use></svg></button>\n <button title="${i("Select")}" class="btn-asset"><svg><use xlink:href="#icon-folder"></use></svg></button>\n <button title="${i("Clear")}" class="btn-clear"><svg><use xlink:href="#icon-eraser"></use></svg></button>\n <button title="${i("Adjust")}" class="btn-adjust"><svg style="width:14px;height:14px;"><use xlink:href="#icon-tool"></use></svg></button>\n </div>\n\n <label class="label checkbox grayscale mt-3 mb-3">\n <input type="checkbox" class="chk-grayscale" />\n <span>${i("Grayscale")}</span>\n </label>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="rowcontent1">\n ${i("Grid Settings")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="rowcontent1" aria-hidden="true">\n\n <div class="subpanel">\n\n <div class="label mt-2 changedevice" style="width:179px;">\n <span>${i("Columns per Line")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group colsperline mt-2">\n <button title="1" data-colsperline="1">1</button>\n <button title="2" data-colsperline="2">2</button>\n <button title="3" data-colsperline="3">3</button>\n <button title="4" data-colsperline="4">4</button>\n <button title="5" data-colsperline="5">5</button>\n <button title="6" data-colsperline="6">6</button>\n <button title="${i("Default")}" data-colsperline="">${i("Default")}</button>\n </div>\n\n <label class="label checkbox grayscale mt-2 mb-3">\n <input type="checkbox" class="chk-reverse" /> \x3c!-- chkReverseColumns --\x3e\n <span>${i("Reverse Columns")}</span>\n </label>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="rowcontent1">\n ${i("Responsive")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content" id="rowcontent1" aria-hidden="true">\n\n <div class="subpanel">\n <div class="div-target">\n <button title="${i("Desktop")}" class="on" data-device="">\n <svg><use xlink:href="#icon-device-desktop"></use></svg>\n </button>\n <button title="${i("Laptop/Tablet (Landscape)")}" data-device="md">\n <svg style="transform:rotate(-90deg)"><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Tablet (Portrait)")}" data-device="sm">\n <svg><use xlink:href="#icon-device-tablet"></use></svg>\n </button>\n <button title="${i("Mobile")}" data-device="xs">\n <svg><use xlink:href="#icon-device-mobile"></use></svg>\n </button>\n </div>\n\n <div class="label mt-3">${i("Visibility")}:</div>\n <div class="group">\n <button title="${i("Visible")}" data-visibility="on" style="width: 105px">\n <svg><use xlink:href="#icon-eye"></use></svg>\n <span>${i("Visible")}</span>\n </button>\n <button title="${i("Hidden")}" data-visibility="" style="width: 105px">\n <svg><use xlink:href="#icon-eye-off"></use></svg>\n <span>${i("Hidden")}</span>\n </button>\n </div>\n </div>\n\n </div>\n\n <button class="accordion-item btn-accordion-text" aria-expanded="false" aria-controls="rowcontent2">\n ${i("More")}\n <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>\n </button>\n <div class="accordion-content last" id="rowcontent2" aria-hidden="true">\n\n <div class="subpanel">\n <label class="label mt-2">\n <div>${i("Add Section ID")}:</div>\n <input type="text" class="inp-row-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">\n </label>\n\n <label class="label">\n <div>${i("Add Css Classes")}:</div>\n <input type="text" class="inp-row-classes">\n </label>\n </div>\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.panel=t,this.imagePreview=t.querySelector(".asset-preview");const o=t.querySelector(".btn-upload"),s=t.querySelector(".inp-file");let a;o.addEventListener("click",(()=>{s.click()})),s.addEventListener("change",(t=>{s.files[0]&&(this.builder.editor.onAssetUpload=t=>{this.updateImage(t)},this.builder.onImageUpload(t),s.value="")}));const l=t.querySelector(".inp-src"),r=()=>{this.builder.editor.saveForUndo();let t=l.value;this.rowOverlay().style.backgroundImage=`url("${t}")`,this.builder.editor.onChange()};l.addEventListener("input",(()=>{clearTimeout(a),a=setTimeout((()=>{r()}),600)})),this.builder.onImageUpload||(o.style.display="none");const c=t.querySelector(".btn-asset");c.addEventListener("click",(()=>{this.builder.editor.openAssetSelect("image",(t=>{this.updateImage(t)}),c)})),this.builder.onImageSelectClick||this.builder.imageSelect||(c.style.display="none");t.querySelector(".btn-clear").addEventListener("click",(()=>{this.updateImage("")}));t.querySelector(".btn-adjust").addEventListener("click",(()=>{const t=this.rowOverlay();t&&this.builder.controlpanel.objDialogImageAdjust.open(t)}));const d=t.querySelector(".chk-grayscale");d.addEventListener("click",(()=>{this.builder.editor.saveForUndo();const t=this.rowOverlay();t&&(d.checked?t.style.filter="grayscale(1)":t.style.filter&&(t.style.filter=t.style.filter.replace("grayscale(1)","")),this.builder.onChange())}));const u=t.querySelector(".btn-color");u.addEventListener("click",(()=>{this.builder.editor.saveForUndo(!0);let t=u.style.backgroundColor;this.builder.editor.colorpicker().open((t=>{const e=this.rowOverlay();e&&(e.style.backgroundColor=t,u.style.backgroundColor=t,this.builder.onChange())}),t)}));const p=t.querySelector(".btn-gradient");p.addEventListener("click",(()=>{const t=this.rowOverlay();if(!t)return;this.builder.editor.saveForUndo(!0),this.builder.editor.gradientpicker().open(t,(()=>{this.updatePanelImage(""),this.builder.onChange(),p.style.backgroundImage=t.style.backgroundImage}))}));t.querySelectorAll("[data-colsperline]").forEach((e=>{e.addEventListener("click",(()=>{let i=this.builder.controlpanel.activeRow;this.builder.editor.saveForUndo();let n=e.getAttribute("data-colsperline");t.querySelectorAll("[data-colsperline]").forEach((t=>t.classList.remove("on"))),""!==n&&e.classList.add("on");let o="",s=this.builder.screenMode;"desktop"===s?o="desktop-items-":"tablet-landscape"===s?o="md-items-":"tablet"===s?o="sm-items-":"mobile"===s&&(o="xs-items-");for(let t=1;t<=6;t++)i.classList.remove(o+t);""!==n&&i.classList.add(o+n),this.builder.onChange()}))}));const h=t.querySelector(".chk-reverse");h.addEventListener("click",(()=>{let t=this.builder.controlpanel.activeRow;this.builder.editor.saveForUndo();let e="",i=this.builder.screenMode;"desktop"===i?e="desktop-":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),h.checked?t.classList.add(e+"column-reverse"):t.classList.remove(e+"column-reverse"),this.builder.onChange()}));const m=t.querySelector(".div-target"),b=m.querySelectorAll("[data-device]");b.forEach((t=>{t.addEventListener("click",(()=>{if(b.forEach((t=>t.classList.remove("on"))),t.classList.add("on"),this.builder.iframePanel){const t=this.getDeviceTarget(m);"xs"===t?this.builder.iframePanel.setScreenMode("mobile"):"sm"===t?this.builder.iframePanel.setScreenMode("tablet"):"md"===t?this.builder.iframePanel.setScreenMode("tablet-landscape"):this.builder.iframePanel.setScreenMode("desktop")}this.getState()}))}));const g=t.querySelectorAll("[data-visibility]");g.forEach((t=>{t.addEventListener("click",(()=>{const e=t.getAttribute("data-visibility"),i=this.getDeviceTarget(m);this.setVisibility(e,i),g.forEach((t=>t.classList.remove("on"))),t.classList.add("on")}))}));const v=t.querySelector(".inp-row-id");v.addEventListener("change",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeRow;""!==v.value?t.setAttribute("id",v.value):t.removeAttribute("id"),this.builder.onChange()}));const f=t.querySelector(".inp-row-classes");f.addEventListener("change",(()=>{this.builder.editor.saveForUndo();let t=this.builder.controlpanel.activeRow,e=[],i=t.getAttribute("data-class");i&&(e=i.split(" "));let n=[],o=f.value;n=o.split(" "),e.forEach((e=>{n.includes(e)||t.classList.remove(e)})),n.forEach((e=>{""!==e&&t.classList.add(e)})),t.setAttribute("data-class",o),""===t.getAttribute("data-class")&&t.removeAttribute("data-class"),this.builder.onChange()})),v.addEventListener("keyup",(()=>{let t=this.builder.controlpanel.activeRow;""!==v.value?t.setAttribute("id",v.value):t.removeAttribute("id")}))}getState(){let t=this.builder.controlpanel.activeRow;if(!t)return;const e=this.rowOverlay();if(!e)return;const i=this.panel,n=i.querySelector(".div-target");if(this.builder.iframePanel){n.querySelectorAll("[data-device]").forEach((t=>t.classList.remove("on")));let t=this.builder.screenMode;"mobile"===t?n.querySelector('[data-device="xs"]').classList.add("on"):"tablet"===t?n.querySelector('[data-device="sm"]').classList.add("on"):"tablet-landscape"===t?n.querySelector('[data-device="md"]').classList.add("on"):n.querySelector('[data-device=""]').classList.add("on")}let o="";e.style.backgroundImage&&-1!==e.style.backgroundImage.indexOf("url(")&&(o=e.style.backgroundImage.slice(4,-1).replace(/["']/g,""));i.querySelector(".inp-src").value=o,this.updatePanelImage(o);const s=i.querySelector(".btn-color");let a=e.style.backgroundColor;a?s.style.backgroundColor=a:e.style.backgroundColor?(a=window.getComputedStyle(e,null).getPropertyValue("background-color"),"rgba(0, 0, 0, 0)"===a&&(a=""),s.style.backgroundColor=a):s.style.backgroundColor="";const l=i.querySelector(".btn-gradient");e.style.backgroundImage?l.style.backgroundImage=e.style.backgroundImage:l.style.backgroundImage="";const r=i.querySelector(".chk-grayscale");r.checked=!1,e.style.filter&&-1!==e.style.filter.indexOf("grayscale")&&(r.checked=!0),i.querySelectorAll("[data-colsperline]").forEach((t=>t.classList.remove("on")));let c="",d=this.builder.screenMode;"desktop"===d?c="desktop-":"tablet-landscape"===d?c="md-":"tablet"===d?c="sm-":"mobile"===d&&(c="xs-");const u=i.querySelector('[data-colsperline=""]');u.style.display="mobile"===d?"none":"",t.classList.contains(c+"items-1")?i.querySelector('[data-colsperline="1"]').classList.add("on"):t.classList.contains(c+"items-2")?i.querySelector('[data-colsperline="2"]').classList.add("on"):t.classList.contains(c+"items-3")?i.querySelector('[data-colsperline="3"]').classList.add("on"):t.classList.contains(c+"items-4")?i.querySelector('[data-colsperline="4"]').classList.add("on"):t.classList.contains(c+"items-5")?i.querySelector('[data-colsperline="5"]').classList.add("on"):t.classList.contains(c+"items-6")&&i.querySelector('[data-colsperline="6"]').classList.add("on");let p=t.classList.contains(c+"column-reverse");i.querySelector(".chk-reverse").checked=p,this.realtimeVisibility(t);const h=t.getAttribute("id"),m=i.querySelector(".inp-row-id");m.value=h||"";const b=t.getAttribute("data-class"),g=i.querySelector(".inp-row-classes");g.value=b||""}getDeviceTarget(t){return t.querySelector("button.on").getAttribute("data-device")}setVisibility(t,e){let i=this.builder.controlpanel.activeRow;i.classList.remove("hideonmobile"),this.builder.editor.saveForUndo();const n=(t,e)=>t.querySelectorAll(`.${e}-hidden`).length>0;"on"===t?"xs"===e?i.classList.remove("xs-hidden"):"sm"===e?(i.classList.remove("sm-hidden"),n(i.parentNode,"sm")||i.parentNode.classList.remove("sm-autofit")):"md"===e?(i.classList.remove("md-hidden"),n(i.parentNode,"md")||i.parentNode.classList.remove("md-autofit")):""===e&&(i.classList.remove("desktop-hidden"),n(i.parentNode,"desktop")||i.parentNode.classList.remove("desktop-autofit")):"xs"===e?i.classList.add("xs-hidden"):"sm"===e?(i.classList.add("sm-hidden"),i.parentNode.classList.add("sm-autofit")):"md"===e?(i.classList.add("md-hidden"),i.parentNode.classList.add("md-autofit")):""===e&&(i.classList.add("desktop-hidden"),i.parentNode.classList.add("desktop-autofit")),this.builder.onChange()}realtimeVisibility(t){const e=this.panel,i=e.querySelector(".div-target"),n=this.getDeviceTarget(i);let o=!1;o="xs"===n?t.classList.contains("xs-hidden"):"sm"===n?t.classList.contains("sm-hidden"):"md"===n?t.classList.contains("md-hidden"):t.classList.contains("desktop-hidden"),e.querySelectorAll("[data-visibility]").forEach((t=>t.classList.remove("on"))),o?e.querySelector('[data-visibility=""]').classList.add("on"):e.querySelector('[data-visibility="on"]').classList.add("on")}updateImage(t){this.builder.editor.saveForUndo();const e=this.rowOverlay();e&&(t?(e.style.backgroundImage=`url("${t}")`,e.style.backgroundSize="cover",e.style.backgroundRepeat="no-repeat"):(e.style.backgroundImage="",e.style.backgroundSize="",e.style.backgroundRepeat=""),this.builder.editor.onChange(),this.updatePanelImage(t))}clear(){this.imagePreview.innerHTML=""}updatePanelImage(t){let e;e=t?`\n <img src="${t}">\n `:"",this.imagePreview.innerHTML=e;const i=this.panel;i.querySelector(".inp-src").value=t;const n=i.querySelector(".btn-clear"),o=i.querySelector(".btn-adjust");""===t?(n.style.display="none",o.style.display="none"):(n.style.display="",o.style.display="")}rowOverlay(){let t=this.builder.controlpanel.activeRow;if(!t)return!1;let e=t.querySelector(".is-row-overlay");return e||(t.insertAdjacentHTML("beforeend",'<div class="is-row-overlay"></div>'),e=t.querySelector(".is-row-overlay")),t.classList.add("relative"),e}}class q{constructor(t,e){this.builder=e,this.dialog=t;let n=`\n <button class="btn-back" tabindex="-1" title="${i("Close")}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>\n <div class="icon-list">\n ${this.getIcons()}\n </div>\n `;t.insertAdjacentHTML("beforeend",n);t.querySelector(".btn-back").addEventListener("click",(()=>{this.close()}));t.querySelectorAll(".icon-list button").forEach((t=>{t.addEventListener("click",(()=>{let e=t.querySelector("i").className;this.builder.editor.addIcon(e)}))}))}open(){this.dialog.style.display="flex"}close(){this.dialog.style.display=""}getIcons(){let t='\n <button><i class="icon ion-alert"> </i></button>\n <button><i class="icon ion-alert-circled"> </i></button>\n <button><i class="icon ion-android-add"> </i></button>\n <button><i class="icon ion-android-add-circle"> </i></button>\n <button><i class="icon ion-android-alarm-clock"> </i></button>\n <button><i class="icon ion-android-alert"> </i></button>\n <button><i class="icon ion-android-apps"> </i></button>\n <button><i class="icon ion-android-archive"> </i></button>\n <button><i class="icon ion-android-arrow-back"> </i></button>\n <button><i class="icon ion-android-arrow-down"> </i></button>\n <button><i class="icon ion-android-arrow-dropdown"> </i></button>\n <button><i class="icon ion-android-arrow-dropdown-circle"> </i></button>\n <button><i class="icon ion-android-arrow-dropleft"> </i></button>\n <button><i class="icon ion-android-arrow-dropleft-circle"> </i></button>\n <button><i class="icon ion-android-arrow-dropright"> </i></button>\n <button><i class="icon ion-android-arrow-dropright-circle"> </i></button>\n <button><i class="icon ion-android-arrow-dropup"> </i></button>\n <button><i class="icon ion-android-arrow-dropup-circle"> </i></button>\n <button><i class="icon ion-android-arrow-forward"> </i></button>\n <button><i class="icon ion-android-arrow-up"> </i></button>\n <button><i class="icon ion-android-attach"> </i></button>\n <button><i class="icon ion-android-bar"> </i></button>\n <button><i class="icon ion-android-bicycle"> </i></button>\n <button><i class="icon ion-android-boat"> </i></button>\n <button><i class="icon ion-android-bookmark"> </i></button>\n <button><i class="icon ion-android-bulb"> </i></button>\n <button><i class="icon ion-android-bus"> </i></button>\n <button><i class="icon ion-android-calendar"> </i></button>\n <button><i class="icon ion-android-call"> </i></button>\n <button><i class="icon ion-android-camera"> </i></button>\n <button><i class="icon ion-android-cancel"> </i></button>\n <button><i class="icon ion-android-car"> </i></button>\n <button><i class="icon ion-android-cart"> </i></button>\n <button><i class="icon ion-android-chat"> </i></button>\n <button><i class="icon ion-android-checkbox"> </i></button>\n <button><i class="icon ion-android-checkbox-blank"> </i></button>\n <button><i class="icon ion-android-checkbox-outline"> </i></button>\n <button><i class="icon ion-android-checkbox-outline-blank"> </i></button>\n <button><i class="icon ion-android-checkmark-circle"> </i></button>\n <button><i class="icon ion-android-clipboard"> </i></button>\n <button><i class="icon ion-android-close"> </i></button>\n <button><i class="icon ion-android-cloud"> </i></button>\n <button><i class="icon ion-android-cloud-circle"> </i></button>\n <button><i class="icon ion-android-cloud-done"> </i></button>\n <button><i class="icon ion-android-cloud-outline"> </i></button>\n <button><i class="icon ion-android-color-palette"> </i></button>\n <button><i class="icon ion-android-compass"> </i></button>\n <button><i class="icon ion-android-contact"> </i></button>\n <button><i class="icon ion-android-contacts"> </i></button>\n <button><i class="icon ion-android-contract"> </i></button>\n <button><i class="icon ion-android-create"> </i></button>\n <button><i class="icon ion-android-delete"> </i></button>\n <button><i class="icon ion-android-desktop"> </i></button>\n <button><i class="icon ion-android-document"> </i></button>\n <button><i class="icon ion-android-done"> </i></button>\n <button><i class="icon ion-android-done-all"> </i></button>\n <button><i class="icon ion-android-download"> </i></button>\n <button><i class="icon ion-android-drafts"> </i></button>\n <button><i class="icon ion-android-exit"> </i></button>\n <button><i class="icon ion-android-expand"> </i></button>\n <button><i class="icon ion-android-favorite"> </i></button>\n <button><i class="icon ion-android-favorite-outline"> </i></button>\n <button><i class="icon ion-android-film"> </i></button>\n <button><i class="icon ion-android-folder"> </i></button>\n <button><i class="icon ion-android-folder-open"> </i></button>\n <button><i class="icon ion-android-funnel"> </i></button>\n <button><i class="icon ion-android-globe"> </i></button>\n <button><i class="icon ion-android-hand"> </i></button>\n <button><i class="icon ion-android-hangout"> </i></button>\n <button><i class="icon ion-android-happy"> </i></button>\n <button><i class="icon ion-android-home"> </i></button>\n <button><i class="icon ion-android-image"> </i></button>\n <button><i class="icon ion-android-laptop"> </i></button>\n <button><i class="icon ion-android-list"> </i></button>\n <button><i class="icon ion-android-locate"> </i></button>\n <button><i class="icon ion-android-lock"> </i></button>\n <button><i class="icon ion-android-mail"> </i></button>\n <button><i class="icon ion-android-map"> </i></button>\n <button><i class="icon ion-android-menu"> </i></button>\n <button><i class="icon ion-android-microphone"> </i></button>\n <button><i class="icon ion-android-microphone-off"> </i></button>\n <button><i class="icon ion-android-more-horizontal"> </i></button>\n <button><i class="icon ion-android-more-vertical"> </i></button>\n <button><i class="icon ion-android-navigate"> </i></button>\n <button><i class="icon ion-android-notifications"> </i></button>\n <button><i class="icon ion-android-notifications-none"> </i></button>\n <button><i class="icon ion-android-notifications-off"> </i></button>\n <button><i class="icon ion-android-open"> </i></button>\n <button><i class="icon ion-android-options"> </i></button>\n <button><i class="icon ion-android-people"> </i></button>\n <button><i class="icon ion-android-person"> </i></button>\n <button><i class="icon ion-android-person-add"> </i></button>\n <button><i class="icon ion-android-phone-landscape"> </i></button>\n <button><i class="icon ion-android-phone-portrait"> </i></button>\n <button><i class="icon ion-android-pin"> </i></button>\n <button><i class="icon ion-android-plane"> </i></button>\n <button><i class="icon ion-android-playstore"> </i></button>\n <button><i class="icon ion-android-print"> </i></button>\n <button><i class="icon ion-android-radio-button-off"> </i></button>\n <button><i class="icon ion-android-radio-button-on"> </i></button>\n <button><i class="icon ion-android-refresh"> </i></button>\n <button><i class="icon ion-android-remove"> </i></button>\n <button><i class="icon ion-android-remove-circle"> </i></button>\n <button><i class="icon ion-android-restaurant"> </i></button>\n <button><i class="icon ion-android-sad"> </i></button>\n <button><i class="icon ion-android-search"> </i></button>\n <button><i class="icon ion-android-send"> </i></button>\n <button><i class="icon ion-android-settings"> </i></button>\n <button><i class="icon ion-android-share"> </i></button>\n <button><i class="icon ion-android-share-alt"> </i></button>\n <button><i class="icon ion-android-star"> </i></button>\n <button><i class="icon ion-android-star-half"> </i></button>\n <button><i class="icon ion-android-star-outline"> </i></button>\n <button><i class="icon ion-android-stopwatch"> </i></button>\n <button><i class="icon ion-android-subway"> </i></button>\n <button><i class="icon ion-android-sunny"> </i></button>\n <button><i class="icon ion-android-sync"> </i></button>\n <button><i class="icon ion-android-textsms"> </i></button>';return t+='\n <button><i class="icon ion-android-time"> </i></button>\n <button><i class="icon ion-android-train"> </i></button>\n <button><i class="icon ion-android-unlock"> </i></button>\n <button><i class="icon ion-android-upload"> </i></button>\n <button><i class="icon ion-android-volume-down"> </i></button>\n <button><i class="icon ion-android-volume-mute"> </i></button>\n <button><i class="icon ion-android-volume-off"> </i></button>\n <button><i class="icon ion-android-volume-up"> </i></button>\n <button><i class="icon ion-android-walk"> </i></button>\n <button><i class="icon ion-android-warning"> </i></button>\n <button><i class="icon ion-android-watch"> </i></button>\n <button><i class="icon ion-android-wifi"> </i></button>\n <button><i class="icon ion-aperture"> </i></button>\n <button><i class="icon ion-archive"> </i></button>\n <button><i class="icon ion-arrow-down-a"> </i></button>\n <button><i class="icon ion-arrow-down-b"> </i></button>\n <button><i class="icon ion-arrow-down-c"> </i></button>\n <button><i class="icon ion-arrow-expand"> </i></button>\n <button><i class="icon ion-arrow-graph-down-left"> </i></button>\n <button><i class="icon ion-arrow-graph-down-right"> </i></button>\n <button><i class="icon ion-arrow-graph-up-left"> </i></button>\n <button><i class="icon ion-arrow-graph-up-right"> </i></button>\n <button><i class="icon ion-arrow-left-a"> </i></button>\n <button><i class="icon ion-arrow-left-b"> </i></button>\n <button><i class="icon ion-arrow-left-c"> </i></button>\n <button><i class="icon ion-arrow-move"> </i></button>\n <button><i class="icon ion-arrow-resize"> </i></button>\n <button><i class="icon ion-arrow-return-left"> </i></button>\n <button><i class="icon ion-arrow-return-right"> </i></button>\n <button><i class="icon ion-arrow-right-a"> </i></button>\n <button><i class="icon ion-arrow-right-b"> </i></button>\n <button><i class="icon ion-arrow-right-c"> </i></button>\n <button><i class="icon ion-arrow-shrink"> </i></button>\n <button><i class="icon ion-arrow-swap"> </i></button>\n <button><i class="icon ion-arrow-up-a"> </i></button>\n <button><i class="icon ion-arrow-up-b"> </i></button>\n <button><i class="icon ion-arrow-up-c"> </i></button>\n <button><i class="icon ion-asterisk"> </i></button>\n <button><i class="icon ion-at"> </i></button>\n <button><i class="icon ion-backspace"> </i></button>\n <button><i class="icon ion-backspace-outline"> </i></button>\n <button><i class="icon ion-bag"> </i></button>\n <button><i class="icon ion-battery-charging"> </i></button>\n <button><i class="icon ion-battery-empty"> </i></button>\n <button><i class="icon ion-battery-full"> </i></button>\n <button><i class="icon ion-battery-half"> </i></button>\n <button><i class="icon ion-battery-low"> </i></button>\n <button><i class="icon ion-beaker"> </i></button>\n <button><i class="icon ion-beer"> </i></button>\n <button><i class="icon ion-bluetooth"> </i></button>\n <button><i class="icon ion-bonfire"> </i></button>\n <button><i class="icon ion-bookmark"> </i></button>\n <button><i class="icon ion-bowtie"> </i></button>\n <button><i class="icon ion-briefcase"> </i></button>\n <button><i class="icon ion-bug"> </i></button>\n <button><i class="icon ion-calculator"> </i></button>\n <button><i class="icon ion-calendar"> </i></button>\n <button><i class="icon ion-camera"> </i></button>\n <button><i class="icon ion-card"> </i></button>\n <button><i class="icon ion-cash"> </i></button>\n <button><i class="icon ion-chatbox"> </i></button>\n <button><i class="icon ion-chatbox-working"> </i></button>\n <button><i class="icon ion-chatboxes"> </i></button>\n <button><i class="icon ion-chatbubble"> </i></button>\n <button><i class="icon ion-chatbubble-working"> </i></button>\n <button><i class="icon ion-chatbubbles"> </i></button>\n <button><i class="icon ion-checkmark"> </i></button>\n <button><i class="icon ion-checkmark-circled"> </i></button>\n <button><i class="icon ion-checkmark-round"> </i></button>\n <button><i class="icon ion-chevron-down"> </i></button>\n <button><i class="icon ion-chevron-left"> </i></button>\n <button><i class="icon ion-chevron-right"> </i></button>\n <button><i class="icon ion-chevron-up"> </i></button>\n <button><i class="icon ion-clipboard"> </i></button>\n <button><i class="icon ion-clock"> </i></button>\n <button><i class="icon ion-close"> </i></button>\n <button><i class="icon ion-close-circled"> </i></button>\n <button><i class="icon ion-close-round"> </i></button>\n <button><i class="icon ion-closed-captioning"> </i></button>\n <button><i class="icon ion-cloud"> </i></button>\n <button><i class="icon ion-code"> </i></button>\n <button><i class="icon ion-code-download"> </i></button>\n <button><i class="icon ion-code-working"> </i></button>\n <button><i class="icon ion-coffee"> </i></button>\n <button><i class="icon ion-compass"> </i></button>\n <button><i class="icon ion-compose"> </i></button>\n <button><i class="icon ion-connection-bars"> </i></button>\n <button><i class="icon ion-contrast"> </i></button>\n <button><i class="icon ion-crop"> </i></button>\n <button><i class="icon ion-cube"> </i></button>\n <button><i class="icon ion-disc"> </i></button>\n <button><i class="icon ion-document"> </i></button>\n <button><i class="icon ion-document-text"> </i></button>\n <button><i class="icon ion-drag"> </i></button>\n <button><i class="icon ion-earth"> </i></button>\n <button><i class="icon ion-easel"> </i></button>\n <button><i class="icon ion-edit"> </i></button>\n <button><i class="icon ion-egg"> </i></button>\n <button><i class="icon ion-eject"> </i></button>\n <button><i class="icon ion-email"> </i></button>\n <button><i class="icon ion-email-unread"> </i></button>\n <button><i class="icon ion-erlenmeyer-flask"> </i></button>\n <button><i class="icon ion-erlenmeyer-flask-bubbles"> </i></button>\n <button><i class="icon ion-eye"> </i></button>\n <button><i class="icon ion-eye-disabled"> </i></button>\n <button><i class="icon ion-female"> </i></button>\n <button><i class="icon ion-filing"> </i></button>\n <button><i class="icon ion-film-marker"> </i></button>\n <button><i class="icon ion-fireball"> </i></button>\n <button><i class="icon ion-flag"> </i></button>\n <button><i class="icon ion-flame"> </i></button>\n <button><i class="icon ion-flash"> </i></button>\n <button><i class="icon ion-flash-off"> </i></button>\n <button><i class="icon ion-folder"> </i></button>\n <button><i class="icon ion-fork"> </i></button>\n <button><i class="icon ion-fork-repo"> </i></button>\n <button><i class="icon ion-forward"> </i></button>\n <button><i class="icon ion-funnel"> </i></button>\n <button><i class="icon ion-gear-a"> </i></button>\n <button><i class="icon ion-gear-b"> </i></button>\n <button><i class="icon ion-grid"> </i></button>\n <button><i class="icon ion-hammer"> </i></button>\n <button><i class="icon ion-happy"> </i></button>\n <button><i class="icon ion-happy-outline"> </i></button>\n <button><i class="icon ion-headphone"> </i></button>\n <button><i class="icon ion-heart"> </i></button>\n <button><i class="icon ion-heart-broken"> </i></button>\n <button><i class="icon ion-help"> </i></button>\n <button><i class="icon ion-help-buoy"> </i></button>\n <button><i class="icon ion-help-circled"> </i></button>\n <button><i class="icon ion-home"> </i></button>\n <button><i class="icon ion-icecream"> </i></button>\n <button><i class="icon ion-image"> </i></button>\n <button><i class="icon ion-images"> </i></button>\n <button><i class="icon ion-information"> </i></button>\n <button><i class="icon ion-information-circled"> </i></button>\n <button><i class="icon ion-ionic"> </i></button>\n <button><i class="icon ion-ios-alarm"> </i></button>\n <button><i class="icon ion-ios-alarm-outline"> </i></button>\n <button><i class="icon ion-ios-albums"> </i></button>\n <button><i class="icon ion-ios-albums-outline"> </i></button>\n <button><i class="icon ion-ios-americanfootball"> </i></button>\n <button><i class="icon ion-ios-americanfootball-outline"> </i></button>\n <button><i class="icon ion-ios-analytics"> </i></button>\n <button><i class="icon ion-ios-analytics-outline"> </i></button>\n <button><i class="icon ion-ios-arrow-back"> </i></button>\n <button><i class="icon ion-ios-arrow-down"> </i></button>\n <button><i class="icon ion-ios-arrow-forward"> </i></button>\n <button><i class="icon ion-ios-arrow-left"> </i></button>',t+='\n <button><i class="icon ion-ios-arrow-right"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-down"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-left"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-right"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-up"> </i></button>\n <button><i class="icon ion-ios-arrow-up"> </i></button>\n <button><i class="icon ion-ios-at"> </i></button>\n <button><i class="icon ion-ios-at-outline"> </i></button>\n <button><i class="icon ion-ios-barcode"> </i></button>\n <button><i class="icon ion-ios-barcode-outline"> </i></button>\n <button><i class="icon ion-ios-baseball"> </i></button>\n <button><i class="icon ion-ios-baseball-outline"> </i></button>\n <button><i class="icon ion-ios-basketball"> </i></button>\n <button><i class="icon ion-ios-basketball-outline"> </i></button>\n <button><i class="icon ion-ios-bell"> </i></button>\n <button><i class="icon ion-ios-bell-outline"> </i></button>\n <button><i class="icon ion-ios-body"> </i></button>\n <button><i class="icon ion-ios-body-outline"> </i></button>\n <button><i class="icon ion-ios-bolt"> </i></button>\n <button><i class="icon ion-ios-bolt-outline"> </i></button>\n <button><i class="icon ion-ios-book"> </i></button>\n <button><i class="icon ion-ios-book-outline"> </i></button>\n <button><i class="icon ion-ios-bookmarks"> </i></button>\n <button><i class="icon ion-ios-bookmarks-outline"> </i></button>\n <button><i class="icon ion-ios-box"> </i></button>\n <button><i class="icon ion-ios-box-outline"> </i></button>\n <button><i class="icon ion-ios-briefcase"> </i></button>\n <button><i class="icon ion-ios-briefcase-outline"> </i></button>\n <button><i class="icon ion-ios-browsers"> </i></button>\n <button><i class="icon ion-ios-browsers-outline"> </i></button>\n <button><i class="icon ion-ios-calculator"> </i></button>\n <button><i class="icon ion-ios-calculator-outline"> </i></button>\n <button><i class="icon ion-ios-calendar"> </i></button>\n <button><i class="icon ion-ios-calendar-outline"> </i></button>\n <button><i class="icon ion-ios-camera"> </i></button>\n <button><i class="icon ion-ios-camera-outline"> </i></button>\n <button><i class="icon ion-ios-cart"> </i></button>\n <button><i class="icon ion-ios-cart-outline"> </i></button>\n <button><i class="icon ion-ios-chatboxes"> </i></button>\n <button><i class="icon ion-ios-chatboxes-outline"> </i></button>\n <button><i class="icon ion-ios-chatbubble"> </i></button>\n <button><i class="icon ion-ios-chatbubble-outline"> </i></button>\n <button><i class="icon ion-ios-checkmark"> </i></button>\n <button><i class="icon ion-ios-checkmark-empty"> </i></button>\n <button><i class="icon ion-ios-checkmark-outline"> </i></button>\n <button><i class="icon ion-ios-circle-filled"> </i></button>\n <button><i class="icon ion-ios-circle-outline"> </i></button>\n <button><i class="icon ion-ios-clock"> </i></button>\n <button><i class="icon ion-ios-clock-outline"> </i></button>\n <button><i class="icon ion-ios-close"> </i></button>\n <button><i class="icon ion-ios-close-empty"> </i></button>\n <button><i class="icon ion-ios-close-outline"> </i></button>\n <button><i class="icon ion-ios-cloud"> </i></button>\n <button><i class="icon ion-ios-cloud-download"> </i></button>\n <button><i class="icon ion-ios-cloud-download-outline"> </i></button>\n <button><i class="icon ion-ios-cloud-outline"> </i></button>\n <button><i class="icon ion-ios-cloud-upload"> </i></button>\n <button><i class="icon ion-ios-cloud-upload-outline"> </i></button>\n <button><i class="icon ion-ios-cloudy"> </i></button>\n <button><i class="icon ion-ios-cloudy-night"> </i></button>\n <button><i class="icon ion-ios-cloudy-night-outline"> </i></button>\n <button><i class="icon ion-ios-cloudy-outline"> </i></button>\n <button><i class="icon ion-ios-cog"> </i></button>\n <button><i class="icon ion-ios-cog-outline"> </i></button>\n <button><i class="icon ion-ios-color-filter"> </i></button>\n <button><i class="icon ion-ios-color-filter-outline"> </i></button>\n <button><i class="icon ion-ios-color-wand"> </i></button>\n <button><i class="icon ion-ios-color-wand-outline"> </i></button>\n <button><i class="icon ion-ios-compose"> </i></button>\n <button><i class="icon ion-ios-compose-outline"> </i></button>\n <button><i class="icon ion-ios-contact"> </i></button>\n <button><i class="icon ion-ios-contact-outline"> </i></button>\n <button><i class="icon ion-ios-copy"> </i></button>\n <button><i class="icon ion-ios-copy-outline"> </i></button>\n <button><i class="icon ion-ios-crop"> </i></button>\n <button><i class="icon ion-ios-crop-strong"> </i></button>\n <button><i class="icon ion-ios-download"> </i></button>\n <button><i class="icon ion-ios-download-outline"> </i></button>\n <button><i class="icon ion-ios-drag"> </i></button>\n <button><i class="icon ion-ios-email"> </i></button>\n <button><i class="icon ion-ios-email-outline"> </i></button>\n <button><i class="icon ion-ios-eye"> </i></button>\n <button><i class="icon ion-ios-eye-outline"> </i></button>\n <button><i class="icon ion-ios-fastforward"> </i></button>\n <button><i class="icon ion-ios-fastforward-outline"> </i></button>\n <button><i class="icon ion-ios-filing"> </i></button>\n <button><i class="icon ion-ios-filing-outline"> </i></button>\n <button><i class="icon ion-ios-film"> </i></button>\n <button><i class="icon ion-ios-film-outline"> </i></button>\n <button><i class="icon ion-ios-flag"> </i></button>\n <button><i class="icon ion-ios-flag-outline"> </i></button>\n <button><i class="icon ion-ios-flame"> </i></button>\n <button><i class="icon ion-ios-flame-outline"> </i></button>\n <button><i class="icon ion-ios-flask"> </i></button>\n <button><i class="icon ion-ios-flask-outline"> </i></button>\n <button><i class="icon ion-ios-flower"> </i></button>\n <button><i class="icon ion-ios-flower-outline"> </i></button>\n <button><i class="icon ion-ios-folder"> </i></button>\n <button><i class="icon ion-ios-folder-outline"> </i></button>\n <button><i class="icon ion-ios-football"> </i></button>\n <button><i class="icon ion-ios-football-outline"> </i></button>\n <button><i class="icon ion-ios-game-controller-a"> </i></button>\n <button><i class="icon ion-ios-game-controller-a-outline"> </i></button>\n <button><i class="icon ion-ios-game-controller-b"> </i></button>\n <button><i class="icon ion-ios-game-controller-b-outline"> </i></button>\n <button><i class="icon ion-ios-gear"> </i></button>\n <button><i class="icon ion-ios-gear-outline"> </i></button>\n <button><i class="icon ion-ios-glasses"> </i></button>\n <button><i class="icon ion-ios-glasses-outline"> </i></button>\n <button><i class="icon ion-ios-grid-view"> </i></button>\n <button><i class="icon ion-ios-grid-view-outline"> </i></button>\n <button><i class="icon ion-ios-heart"> </i></button>\n <button><i class="icon ion-ios-heart-outline"> </i></button>\n <button><i class="icon ion-ios-help"> </i></button>\n <button><i class="icon ion-ios-help-empty"> </i></button>\n <button><i class="icon ion-ios-help-outline"> </i></button>\n <button><i class="icon ion-ios-home"> </i></button>\n <button><i class="icon ion-ios-home-outline"> </i></button>\n <button><i class="icon ion-ios-infinite"> </i></button>\n <button><i class="icon ion-ios-infinite-outline"> </i></button>\n <button><i class="icon ion-ios-information"> </i></button>\n <button><i class="icon ion-ios-information-empty"> </i></button>\n <button><i class="icon ion-ios-information-outline"> </i></button>\n <button><i class="icon ion-ios-ionic-outline"> </i></button>\n <button><i class="icon ion-ios-keypad"> </i></button>\n <button><i class="icon ion-ios-keypad-outline"> </i></button>\n <button><i class="icon ion-ios-lightbulb"> </i></button>\n <button><i class="icon ion-ios-lightbulb-outline"> </i></button>\n <button><i class="icon ion-ios-list"> </i></button>\n <button><i class="icon ion-ios-list-outline"> </i></button>\n <button><i class="icon ion-ios-location"> </i></button>\n <button><i class="icon ion-ios-location-outline"> </i></button>\n <button><i class="icon ion-ios-locked"> </i></button>\n <button><i class="icon ion-ios-locked-outline"> </i></button>\n <button><i class="icon ion-ios-loop"> </i></button>\n <button><i class="icon ion-ios-loop-strong"> </i></button>\n <button><i class="icon ion-ios-medical"> </i></button>\n <button><i class="icon ion-ios-medical-outline"> </i></button>\n <button><i class="icon ion-ios-medkit"> </i></button>\n <button><i class="icon ion-ios-medkit-outline"> </i></button>\n <button><i class="icon ion-ios-mic"> </i></button>\n <button><i class="icon ion-ios-mic-off"> </i></button>\n <button><i class="icon ion-ios-mic-outline"> </i></button>\n <button><i class="icon ion-ios-minus"> </i></button>\n <button><i class="icon ion-ios-minus-empty"> </i></button>\n <button><i class="icon ion-ios-minus-outline"> </i></button>\n <button><i class="icon ion-ios-monitor"> </i></button>\n <button><i class="icon ion-ios-monitor-outline"> </i></button>',t+='\n <button><i class="icon ion-ios-moon"> </i></button>\n <button><i class="icon ion-ios-moon-outline"> </i></button>\n <button><i class="icon ion-ios-more"> </i></button>\n <button><i class="icon ion-ios-more-outline"> </i></button>\n <button><i class="icon ion-ios-musical-note"> </i></button>\n <button><i class="icon ion-ios-musical-notes"> </i></button>\n <button><i class="icon ion-ios-navigate"> </i></button>\n <button><i class="icon ion-ios-navigate-outline"> </i></button>\n <button><i class="icon ion-ios-nutrition"> </i></button>\n <button><i class="icon ion-ios-nutrition-outline"> </i></button>\n <button><i class="icon ion-ios-paper"> </i></button>\n <button><i class="icon ion-ios-paper-outline"> </i></button>\n <button><i class="icon ion-ios-paperplane"> </i></button>\n <button><i class="icon ion-ios-paperplane-outline"> </i></button>\n <button><i class="icon ion-ios-partlysunny"> </i></button>\n <button><i class="icon ion-ios-partlysunny-outline"> </i></button>\n <button><i class="icon ion-ios-pause"> </i></button>\n <button><i class="icon ion-ios-pause-outline"> </i></button>\n <button><i class="icon ion-ios-paw"> </i></button>\n <button><i class="icon ion-ios-paw-outline"> </i></button>\n <button><i class="icon ion-ios-people"> </i></button>\n <button><i class="icon ion-ios-people-outline"> </i></button>\n <button><i class="icon ion-ios-person"> </i></button>\n <button><i class="icon ion-ios-person-outline"> </i></button>\n <button><i class="icon ion-ios-personadd"> </i></button>\n <button><i class="icon ion-ios-personadd-outline"> </i></button>\n <button><i class="icon ion-ios-photos"> </i></button>\n <button><i class="icon ion-ios-photos-outline"> </i></button>\n <button><i class="icon ion-ios-pie"> </i></button>\n <button><i class="icon ion-ios-pie-outline"> </i></button>\n <button><i class="icon ion-ios-pint"> </i></button>\n <button><i class="icon ion-ios-pint-outline"> </i></button>\n <button><i class="icon ion-ios-play"> </i></button>\n <button><i class="icon ion-ios-play-outline"> </i></button>\n <button><i class="icon ion-ios-plus"> </i></button>\n <button><i class="icon ion-ios-plus-empty"> </i></button>\n <button><i class="icon ion-ios-plus-outline"> </i></button>\n <button><i class="icon ion-ios-pricetag"> </i></button>\n <button><i class="icon ion-ios-pricetag-outline"> </i></button>\n <button><i class="icon ion-ios-pricetags"> </i></button>\n <button><i class="icon ion-ios-pricetags-outline"> </i></button>\n <button><i class="icon ion-ios-printer"> </i></button>\n <button><i class="icon ion-ios-printer-outline"> </i></button>\n <button><i class="icon ion-ios-pulse"> </i></button>\n <button><i class="icon ion-ios-pulse-strong"> </i></button>\n <button><i class="icon ion-ios-rainy"> </i></button>\n <button><i class="icon ion-ios-rainy-outline"> </i></button>\n <button><i class="icon ion-ios-recording"> </i></button>\n <button><i class="icon ion-ios-recording-outline"> </i></button>\n <button><i class="icon ion-ios-redo"> </i></button>\n <button><i class="icon ion-ios-redo-outline"> </i></button>\n <button><i class="icon ion-ios-refresh"> </i></button>\n <button><i class="icon ion-ios-refresh-empty"> </i></button>\n <button><i class="icon ion-ios-refresh-outline"> </i></button>\n <button><i class="icon ion-ios-reload"> </i></button>\n <button><i class="icon ion-ios-reverse-camera"> </i></button>\n <button><i class="icon ion-ios-reverse-camera-outline"> </i></button>\n <button><i class="icon ion-ios-rewind"> </i></button>\n <button><i class="icon ion-ios-rewind-outline"> </i></button>\n <button><i class="icon ion-ios-rose"> </i></button>\n <button><i class="icon ion-ios-rose-outline"> </i></button>\n <button><i class="icon ion-ios-search"> </i></button>\n <button><i class="icon ion-ios-search-strong"> </i></button>\n <button><i class="icon ion-ios-settings"> </i></button>\n <button><i class="icon ion-ios-settings-strong"> </i></button>\n <button><i class="icon ion-ios-shuffle"> </i></button>\n <button><i class="icon ion-ios-shuffle-strong"> </i></button>\n <button><i class="icon ion-ios-skipbackward"> </i></button>\n <button><i class="icon ion-ios-skipbackward-outline"> </i></button>\n <button><i class="icon ion-ios-skipforward"> </i></button>\n <button><i class="icon ion-ios-skipforward-outline"> </i></button>\n <button><i class="icon ion-ios-snowy"> </i></button>\n <button><i class="icon ion-ios-speedometer"> </i></button>\n <button><i class="icon ion-ios-speedometer-outline"> </i></button>\n <button><i class="icon ion-ios-star"> </i></button>\n <button><i class="icon ion-ios-star-half"> </i></button>\n <button><i class="icon ion-ios-star-outline"> </i></button>\n <button><i class="icon ion-ios-stopwatch"> </i></button>\n <button><i class="icon ion-ios-stopwatch-outline"> </i></button>\n <button><i class="icon ion-ios-sunny"> </i></button>\n <button><i class="icon ion-ios-sunny-outline"> </i></button>\n <button><i class="icon ion-ios-telephone"> </i></button>\n <button><i class="icon ion-ios-telephone-outline"> </i></button>\n <button><i class="icon ion-ios-tennisball"> </i></button>\n <button><i class="icon ion-ios-tennisball-outline"> </i></button>\n <button><i class="icon ion-ios-thunderstorm"> </i></button>\n <button><i class="icon ion-ios-thunderstorm-outline"> </i></button>\n <button><i class="icon ion-ios-time"> </i></button>\n <button><i class="icon ion-ios-time-outline"> </i></button>\n <button><i class="icon ion-ios-timer"> </i></button>\n <button><i class="icon ion-ios-timer-outline"> </i></button>\n <button><i class="icon ion-ios-toggle"> </i></button>\n <button><i class="icon ion-ios-toggle-outline"> </i></button>\n <button><i class="icon ion-ios-trash"> </i></button>\n <button><i class="icon ion-ios-trash-outline"> </i></button>\n <button><i class="icon ion-ios-undo"> </i></button>\n <button><i class="icon ion-ios-undo-outline"> </i></button>\n <button><i class="icon ion-ios-unlocked"> </i></button>\n <button><i class="icon ion-ios-unlocked-outline"> </i></button>\n <button><i class="icon ion-ios-upload"> </i></button>\n <button><i class="icon ion-ios-upload-outline"> </i></button>\n <button><i class="icon ion-ios-videocam"> </i></button>\n <button><i class="icon ion-ios-videocam-outline"> </i></button>\n <button><i class="icon ion-ios-volume-high"> </i></button>\n <button><i class="icon ion-ios-volume-low"> </i></button>\n <button><i class="icon ion-ios-wineglass"> </i></button>\n <button><i class="icon ion-ios-wineglass-outline"> </i></button>\n <button><i class="icon ion-ios-world"> </i></button>\n <button><i class="icon ion-ios-world-outline"> </i></button>\n <button><i class="icon ion-ipad"> </i></button>\n <button><i class="icon ion-iphone"> </i></button>\n <button><i class="icon ion-ipod"> </i></button>\n <button><i class="icon ion-jet"> </i></button>\n <button><i class="icon ion-key"> </i></button>\n <button><i class="icon ion-knife"> </i></button>\n <button><i class="icon ion-laptop"> </i></button>\n <button><i class="icon ion-leaf"> </i></button>\n <button><i class="icon ion-levels"> </i></button>\n <button><i class="icon ion-lightbulb"> </i></button>\n <button><i class="icon ion-link"> </i></button>\n <button><i class="icon ion-load-a"> </i></button>\n <button><i class="icon ion-load-b"> </i></button>\n <button><i class="icon ion-load-c"> </i></button>\n <button><i class="icon ion-load-d"> </i></button>\n <button><i class="icon ion-location"> </i></button>\n <button><i class="icon ion-lock-combination"> </i></button>\n <button><i class="icon ion-locked"> </i></button>\n <button><i class="icon ion-log-in"> </i></button>\n <button><i class="icon ion-log-out"> </i></button>\n <button><i class="icon ion-loop"> </i></button>\n <button><i class="icon ion-magnet"> </i></button>\n <button><i class="icon ion-male"> </i></button>\n <button><i class="icon ion-man"> </i></button>\n <button><i class="icon ion-map"> </i></button>\n <button><i class="icon ion-medkit"> </i></button>\n <button><i class="icon ion-merge"> </i></button>\n <button><i class="icon ion-mic-a"> </i></button>\n <button><i class="icon ion-mic-b"> </i></button>\n <button><i class="icon ion-mic-c"> </i></button>\n <button><i class="icon ion-minus"> </i></button>\n <button><i class="icon ion-minus-circled"> </i></button>\n <button><i class="icon ion-minus-round"> </i></button>\n <button><i class="icon ion-model-s"> </i></button>\n <button><i class="icon ion-monitor"> </i></button>\n <button><i class="icon ion-more"> </i></button>\n <button><i class="icon ion-mouse"> </i></button>\n <button><i class="icon ion-music-note"> </i></button>\n <button><i class="icon ion-navicon"> </i></button>\n <button><i class="icon ion-navicon-round"> </i></button>\n <button><i class="icon ion-navigate"> </i></button>',t+='\n <button><i class="icon ion-network"> </i></button>\n <button><i class="icon ion-no-smoking"> </i></button>\n <button><i class="icon ion-nuclear"> </i></button>\n <button><i class="icon ion-outlet"> </i></button>\n <button><i class="icon ion-paintbrush"> </i></button>\n <button><i class="icon ion-paintbucket"> </i></button>\n <button><i class="icon ion-paper-airplane"> </i></button>\n <button><i class="icon ion-paperclip"> </i></button>\n <button><i class="icon ion-pause"> </i></button>\n <button><i class="icon ion-person"> </i></button>\n <button><i class="icon ion-person-add"> </i></button>\n <button><i class="icon ion-person-stalker"> </i></button>\n <button><i class="icon ion-pie-graph"> </i></button>\n <button><i class="icon ion-pin"> </i></button>\n <button><i class="icon ion-pinpoint"> </i></button>\n <button><i class="icon ion-pizza"> </i></button>\n <button><i class="icon ion-plane"> </i></button>\n <button><i class="icon ion-planet"> </i></button>\n <button><i class="icon ion-play"> </i></button>\n <button><i class="icon ion-playstation"> </i></button>\n <button><i class="icon ion-plus"> </i></button>\n <button><i class="icon ion-plus-circled"> </i></button>\n <button><i class="icon ion-plus-round"> </i></button>\n <button><i class="icon ion-podium"> </i></button>\n <button><i class="icon ion-pound"> </i></button>\n <button><i class="icon ion-power"> </i></button>\n <button><i class="icon ion-pricetag"> </i></button>\n <button><i class="icon ion-pricetags"> </i></button>\n <button><i class="icon ion-printer"> </i></button>\n <button><i class="icon ion-pull-request"> </i></button>\n <button><i class="icon ion-qr-scanner"> </i></button>\n <button><i class="icon ion-quote"> </i></button>\n <button><i class="icon ion-radio-waves"> </i></button>\n <button><i class="icon ion-record"> </i></button>\n <button><i class="icon ion-refresh"> </i></button>\n <button><i class="icon ion-reply"> </i></button>\n <button><i class="icon ion-reply-all"> </i></button>\n <button><i class="icon ion-ribbon-a"> </i></button>\n <button><i class="icon ion-ribbon-b"> </i></button>\n <button><i class="icon ion-sad"> </i></button>\n <button><i class="icon ion-sad-outline"> </i></button>\n <button><i class="icon ion-scissors"> </i></button>\n <button><i class="icon ion-search"> </i></button>\n <button><i class="icon ion-settings"> </i></button>\n <button><i class="icon ion-share"> </i></button>\n <button><i class="icon ion-shuffle"> </i></button>\n <button><i class="icon ion-skip-backward"> </i></button>\n <button><i class="icon ion-skip-forward"> </i></button>\n <button><i class="icon ion-social-android"> </i></button>\n <button><i class="icon ion-social-android-outline"> </i></button>\n <button><i class="icon ion-social-angular"> </i></button>\n <button><i class="icon ion-social-angular-outline"> </i></button>\n <button><i class="icon ion-social-apple"> </i></button>\n <button><i class="icon ion-social-apple-outline"> </i></button>\n <button><i class="icon ion-social-bitcoin"> </i></button>\n <button><i class="icon ion-social-bitcoin-outline"> </i></button>\n <button><i class="icon ion-social-buffer"> </i></button>\n <button><i class="icon ion-social-buffer-outline"> </i></button>\n <button><i class="icon ion-social-chrome"> </i></button>\n <button><i class="icon ion-social-chrome-outline"> </i></button>\n <button><i class="icon ion-social-codepen"> </i></button>\n <button><i class="icon ion-social-codepen-outline"> </i></button>\n <button><i class="icon ion-social-css3"> </i></button>\n <button><i class="icon ion-social-css3-outline"> </i></button>\n <button><i class="icon ion-social-designernews"> </i></button>\n <button><i class="icon ion-social-designernews-outline"> </i></button>\n <button><i class="icon ion-social-dribbble"> </i></button>\n <button><i class="icon ion-social-dribbble-outline"> </i></button>\n <button><i class="icon ion-social-dropbox"> </i></button>\n <button><i class="icon ion-social-dropbox-outline"> </i></button>\n <button><i class="icon ion-social-euro"> </i></button>\n <button><i class="icon ion-social-euro-outline"> </i></button>\n <button><i class="icon ion-social-facebook"> </i></button>\n <button><i class="icon ion-social-facebook-outline"> </i></button>\n <button><i class="icon ion-social-foursquare"> </i></button>\n <button><i class="icon ion-social-foursquare-outline"> </i></button>\n <button><i class="icon ion-social-freebsd-devil"> </i></button>\n <button><i class="icon ion-social-github"> </i></button>\n <button><i class="icon ion-social-github-outline"> </i></button>\n <button><i class="icon ion-social-google"> </i></button>\n <button><i class="icon ion-social-google-outline"> </i></button>\n <button><i class="icon ion-social-googleplus"> </i></button>\n <button><i class="icon ion-social-googleplus-outline"> </i></button>\n <button><i class="icon ion-social-hackernews"> </i></button>\n <button><i class="icon ion-social-hackernews-outline"> </i></button>\n <button><i class="icon ion-social-html5"> </i></button>\n <button><i class="icon ion-social-html5-outline"> </i></button>\n <button><i class="icon ion-social-instagram"> </i></button>\n <button><i class="icon ion-social-instagram-outline"> </i></button>\n <button><i class="icon ion-social-javascript"> </i></button>\n <button><i class="icon ion-social-javascript-outline"> </i></button>\n <button><i class="icon ion-social-linkedin"> </i></button>\n <button><i class="icon ion-social-linkedin-outline"> </i></button>\n <button><i class="icon ion-social-markdown"> </i></button>\n <button><i class="icon ion-social-nodejs"> </i></button>\n <button><i class="icon ion-social-octocat"> </i></button>\n <button><i class="icon ion-social-pinterest"> </i></button>\n <button><i class="icon ion-social-pinterest-outline"> </i></button>\n <button><i class="icon ion-social-python"> </i></button>\n <button><i class="icon ion-social-reddit"> </i></button>\n <button><i class="icon ion-social-reddit-outline"> </i></button>\n <button><i class="icon ion-social-rss"> </i></button>\n <button><i class="icon ion-social-rss-outline"> </i></button>\n <button><i class="icon ion-social-sass"> </i></button>\n <button><i class="icon ion-social-skype"> </i></button>\n <button><i class="icon ion-social-skype-outline"> </i></button>\n <button><i class="icon ion-social-snapchat"> </i></button>\n <button><i class="icon ion-social-snapchat-outline"> </i></button>\n <button><i class="icon ion-social-tumblr"> </i></button>\n <button><i class="icon ion-social-tumblr-outline"> </i></button>\n <button><i class="icon ion-social-tux"> </i></button>\n <button><i class="icon ion-social-twitch"> </i></button>\n <button><i class="icon ion-social-twitch-outline"> </i></button>\n <button><i class="icon ion-social-twitter"> </i></button>\n <button><i class="icon ion-social-twitter-outline"> </i></button>\n <button><i class="icon ion-social-usd"> </i></button>\n <button><i class="icon ion-social-usd-outline"> </i></button>\n <button><i class="icon ion-social-vimeo"> </i></button>\n <button><i class="icon ion-social-vimeo-outline"> </i></button>\n <button><i class="icon ion-social-whatsapp"> </i></button>\n <button><i class="icon ion-social-whatsapp-outline"> </i></button>\n <button><i class="icon ion-social-windows"> </i></button>\n <button><i class="icon ion-social-windows-outline"> </i></button>\n <button><i class="icon ion-social-wordpress"> </i></button>\n <button><i class="icon ion-social-wordpress-outline"> </i></button>\n <button><i class="icon ion-social-yahoo"> </i></button>\n <button><i class="icon ion-social-yahoo-outline"> </i></button>\n <button><i class="icon ion-social-yen"> </i></button>\n <button><i class="icon ion-social-yen-outline"> </i></button>\n <button><i class="icon ion-social-youtube"> </i></button>\n <button><i class="icon ion-social-youtube-outline"> </i></button>\n <button><i class="icon ion-soup-can"> </i></button>\n <button><i class="icon ion-soup-can-outline"> </i></button>\n <button><i class="icon ion-speakerphone"> </i></button>\n <button><i class="icon ion-speedometer"> </i></button>\n <button><i class="icon ion-spoon"> </i></button>\n <button><i class="icon ion-star"> </i></button>\n <button><i class="icon ion-stats-bars"> </i></button>\n <button><i class="icon ion-steam"> </i></button>\n <button><i class="icon ion-stop"> </i></button>\n <button><i class="icon ion-thermometer"> </i></button>\n <button><i class="icon ion-thumbsdown"> </i></button>\n <button><i class="icon ion-thumbsup"> </i></button>\n <button><i class="icon ion-toggle"> </i></button>\n <button><i class="icon ion-toggle-filled"> </i></button>\n <button><i class="icon ion-transgender"> </i></button>\n <button><i class="icon ion-trash-a"> </i></button>\n <button><i class="icon ion-trash-b"> </i></button>\n <button><i class="icon ion-trophy"> </i></button>\n <button><i class="icon ion-tshirt"> </i></button>\n <button><i class="icon ion-tshirt-outline"> </i></button>\n <button><i class="icon ion-umbrella"> </i></button>\n <button><i class="icon ion-university"> </i></button>\n <button><i class="icon ion-unlocked"> </i></button>\n <button><i class="icon ion-upload"> </i></button>\n <button><i class="icon ion-usb"> </i></button>\n <button><i class="icon ion-videocamera"> </i></button>\n <button><i class="icon ion-volume-high"> </i></button>\n <button><i class="icon ion-volume-low"> </i></button>\n <button><i class="icon ion-volume-medium"> </i></button>\n <button><i class="icon ion-volume-mute"> </i></button>\n <button><i class="icon ion-wand"> </i></button>\n <button><i class="icon ion-waterdrop"> </i></button>\n <button><i class="icon ion-wifi"> </i></button>\n <button><i class="icon ion-wineglass"> </i></button>\n <button><i class="icon ion-woman"> </i></button>\n <button><i class="icon ion-wrench"> </i></button>\n <button><i class="icon ion-xbox"> </i></button> \n ','\n <button><i class="icon ion-alert"> </i></button>\n <button><i class="icon ion-alert-circled"> </i></button>\n <button><i class="icon ion-android-add"> </i></button>\n <button><i class="icon ion-android-add-circle"> </i></button>\n <button><i class="icon ion-android-alarm-clock"> </i></button>\n <button><i class="icon ion-android-alert"> </i></button>\n <button><i class="icon ion-android-apps"> </i></button>\n <button><i class="icon ion-android-archive"> </i></button>\n <button><i class="icon ion-android-arrow-back"> </i></button>\n <button><i class="icon ion-android-arrow-down"> </i></button>\n <button><i class="icon ion-android-arrow-dropdown"> </i></button>\n <button><i class="icon ion-android-arrow-dropdown-circle"> </i></button>\n <button><i class="icon ion-android-arrow-dropleft"> </i></button>\n <button><i class="icon ion-android-arrow-dropleft-circle"> </i></button>\n <button><i class="icon ion-android-arrow-dropright"> </i></button>\n <button><i class="icon ion-android-arrow-dropright-circle"> </i></button>\n <button><i class="icon ion-android-arrow-dropup"> </i></button>\n <button><i class="icon ion-android-arrow-dropup-circle"> </i></button>\n <button><i class="icon ion-android-arrow-forward"> </i></button>\n <button><i class="icon ion-android-arrow-up"> </i></button>\n <button><i class="icon ion-android-attach"> </i></button>\n <button><i class="icon ion-android-bar"> </i></button>\n <button><i class="icon ion-android-bicycle"> </i></button>\n <button><i class="icon ion-android-boat"> </i></button>\n <button><i class="icon ion-android-bookmark"> </i></button>\n <button><i class="icon ion-android-bulb"> </i></button>\n <button><i class="icon ion-android-bus"> </i></button>\n <button><i class="icon ion-android-calendar"> </i></button>\n <button><i class="icon ion-android-call"> </i></button>\n <button><i class="icon ion-android-camera"> </i></button>\n <button><i class="icon ion-android-cancel"> </i></button>\n <button><i class="icon ion-android-car"> </i></button>\n <button><i class="icon ion-android-cart"> </i></button>\n <button><i class="icon ion-android-chat"> </i></button>\n <button><i class="icon ion-android-checkbox"> </i></button>\n <button><i class="icon ion-android-checkbox-blank"> </i></button>\n <button><i class="icon ion-android-checkbox-outline"> </i></button>\n <button><i class="icon ion-android-checkbox-outline-blank"> </i></button>\n <button><i class="icon ion-android-checkmark-circle"> </i></button>\n <button><i class="icon ion-android-clipboard"> </i></button>\n <button><i class="icon ion-android-close"> </i></button>\n <button><i class="icon ion-android-cloud"> </i></button>\n <button><i class="icon ion-android-cloud-circle"> </i></button>\n <button><i class="icon ion-android-cloud-done"> </i></button>\n <button><i class="icon ion-android-cloud-outline"> </i></button>\n <button><i class="icon ion-android-color-palette"> </i></button>\n <button><i class="icon ion-android-compass"> </i></button>\n <button><i class="icon ion-android-contact"> </i></button>\n <button><i class="icon ion-android-contacts"> </i></button>\n <button><i class="icon ion-android-contract"> </i></button>\n <button><i class="icon ion-android-create"> </i></button>\n <button><i class="icon ion-android-delete"> </i></button>\n <button><i class="icon ion-android-desktop"> </i></button>\n <button><i class="icon ion-android-document"> </i></button>\n <button><i class="icon ion-android-done"> </i></button>\n <button><i class="icon ion-android-done-all"> </i></button>\n <button><i class="icon ion-android-download"> </i></button>\n <button><i class="icon ion-android-drafts"> </i></button>\n <button><i class="icon ion-android-exit"> </i></button>\n <button><i class="icon ion-android-expand"> </i></button>\n <button><i class="icon ion-android-favorite"> </i></button>\n <button><i class="icon ion-android-favorite-outline"> </i></button>\n <button><i class="icon ion-android-film"> </i></button>\n <button><i class="icon ion-android-folder"> </i></button>\n <button><i class="icon ion-android-folder-open"> </i></button>\n <button><i class="icon ion-android-funnel"> </i></button>\n <button><i class="icon ion-android-globe"> </i></button>\n <button><i class="icon ion-android-hand"> </i></button>\n <button><i class="icon ion-android-hangout"> </i></button>\n <button><i class="icon ion-android-happy"> </i></button>\n <button><i class="icon ion-android-home"> </i></button>\n <button><i class="icon ion-android-image"> </i></button>\n <button><i class="icon ion-android-laptop"> </i></button>\n <button><i class="icon ion-android-list"> </i></button>\n <button><i class="icon ion-android-locate"> </i></button>\n <button><i class="icon ion-android-lock"> </i></button>\n <button><i class="icon ion-android-mail"> </i></button>\n <button><i class="icon ion-android-map"> </i></button>\n <button><i class="icon ion-android-menu"> </i></button>\n <button><i class="icon ion-android-microphone"> </i></button>\n <button><i class="icon ion-android-microphone-off"> </i></button>\n <button><i class="icon ion-android-more-horizontal"> </i></button>\n <button><i class="icon ion-android-more-vertical"> </i></button>\n <button><i class="icon ion-android-navigate"> </i></button>\n <button><i class="icon ion-android-notifications"> </i></button>\n <button><i class="icon ion-android-notifications-none"> </i></button>\n <button><i class="icon ion-android-notifications-off"> </i></button>\n <button><i class="icon ion-android-open"> </i></button>\n <button><i class="icon ion-android-options"> </i></button>\n <button><i class="icon ion-android-people"> </i></button>\n <button><i class="icon ion-android-person"> </i></button>\n <button><i class="icon ion-android-person-add"> </i></button>\n <button><i class="icon ion-android-phone-landscape"> </i></button>\n <button><i class="icon ion-android-phone-portrait"> </i></button>\n <button><i class="icon ion-android-pin"> </i></button>\n <button><i class="icon ion-android-plane"> </i></button>\n <button><i class="icon ion-android-playstore"> </i></button>\n <button><i class="icon ion-android-print"> </i></button>\n <button><i class="icon ion-android-radio-button-off"> </i></button>\n <button><i class="icon ion-android-radio-button-on"> </i></button>\n <button><i class="icon ion-android-refresh"> </i></button>\n <button><i class="icon ion-android-remove"> </i></button>\n <button><i class="icon ion-android-remove-circle"> </i></button>\n <button><i class="icon ion-android-restaurant"> </i></button>\n <button><i class="icon ion-android-sad"> </i></button>\n <button><i class="icon ion-android-search"> </i></button>\n <button><i class="icon ion-android-send"> </i></button>\n <button><i class="icon ion-android-settings"> </i></button>\n <button><i class="icon ion-android-share"> </i></button>\n <button><i class="icon ion-android-share-alt"> </i></button>\n <button><i class="icon ion-android-star"> </i></button>\n <button><i class="icon ion-android-star-half"> </i></button>\n <button><i class="icon ion-android-star-outline"> </i></button>\n <button><i class="icon ion-android-stopwatch"> </i></button>\n <button><i class="icon ion-android-subway"> </i></button>\n <button><i class="icon ion-android-sunny"> </i></button>\n <button><i class="icon ion-android-sync"> </i></button>\n <button><i class="icon ion-android-textsms"> </i></button>\n <button><i class="icon ion-android-time"> </i></button>\n <button><i class="icon ion-android-train"> </i></button>\n <button><i class="icon ion-android-unlock"> </i></button>\n <button><i class="icon ion-android-upload"> </i></button>\n <button><i class="icon ion-android-volume-down"> </i></button>\n <button><i class="icon ion-android-volume-mute"> </i></button>\n <button><i class="icon ion-android-volume-off"> </i></button>\n <button><i class="icon ion-android-volume-up"> </i></button>\n <button><i class="icon ion-android-walk"> </i></button>\n <button><i class="icon ion-android-warning"> </i></button>\n <button><i class="icon ion-android-watch"> </i></button>\n <button><i class="icon ion-android-wifi"> </i></button>\n <button><i class="icon ion-aperture"> </i></button>\n <button><i class="icon ion-archive"> </i></button>\n <button><i class="icon ion-arrow-down-a"> </i></button>\n <button><i class="icon ion-arrow-down-b"> </i></button>\n <button><i class="icon ion-arrow-down-c"> </i></button>\n <button><i class="icon ion-arrow-expand"> </i></button>\n <button><i class="icon ion-arrow-graph-down-left"> </i></button>\n <button><i class="icon ion-arrow-graph-down-right"> </i></button>\n <button><i class="icon ion-arrow-graph-up-left"> </i></button>\n <button><i class="icon ion-arrow-graph-up-right"> </i></button>\n <button><i class="icon ion-arrow-left-a"> </i></button>\n <button><i class="icon ion-arrow-left-b"> </i></button>\n <button><i class="icon ion-arrow-left-c"> </i></button>\n <button><i class="icon ion-arrow-move"> </i></button>\n <button><i class="icon ion-arrow-resize"> </i></button>\n <button><i class="icon ion-arrow-return-left"> </i></button>\n <button><i class="icon ion-arrow-return-right"> </i></button>\n <button><i class="icon ion-arrow-right-a"> </i></button>\n <button><i class="icon ion-arrow-right-b"> </i></button>\n <button><i class="icon ion-arrow-right-c"> </i></button>\n <button><i class="icon ion-arrow-shrink"> </i></button>\n <button><i class="icon ion-arrow-swap"> </i></button>\n <button><i class="icon ion-arrow-up-a"> </i></button>\n <button><i class="icon ion-arrow-up-b"> </i></button>\n <button><i class="icon ion-arrow-up-c"> </i></button>\n <button><i class="icon ion-asterisk"> </i></button>\n <button><i class="icon ion-at"> </i></button>\n <button><i class="icon ion-backspace"> </i></button>\n <button><i class="icon ion-backspace-outline"> </i></button>\n <button><i class="icon ion-bag"> </i></button>\n <button><i class="icon ion-battery-charging"> </i></button>\n <button><i class="icon ion-battery-empty"> </i></button>\n <button><i class="icon ion-battery-full"> </i></button>\n <button><i class="icon ion-battery-half"> </i></button>\n <button><i class="icon ion-battery-low"> </i></button>\n <button><i class="icon ion-beaker"> </i></button>\n <button><i class="icon ion-beer"> </i></button>\n <button><i class="icon ion-bluetooth"> </i></button>\n <button><i class="icon ion-bonfire"> </i></button>\n <button><i class="icon ion-bookmark"> </i></button>\n <button><i class="icon ion-bowtie"> </i></button>\n <button><i class="icon ion-briefcase"> </i></button>\n <button><i class="icon ion-bug"> </i></button>\n <button><i class="icon ion-calculator"> </i></button>\n <button><i class="icon ion-calendar"> </i></button>\n <button><i class="icon ion-camera"> </i></button>\n <button><i class="icon ion-card"> </i></button>\n <button><i class="icon ion-cash"> </i></button>\n <button><i class="icon ion-chatbox"> </i></button>\n <button><i class="icon ion-chatbox-working"> </i></button>\n <button><i class="icon ion-chatboxes"> </i></button>\n <button><i class="icon ion-chatbubble"> </i></button>\n <button><i class="icon ion-chatbubble-working"> </i></button>\n <button><i class="icon ion-chatbubbles"> </i></button>\n <button><i class="icon ion-checkmark"> </i></button>\n <button><i class="icon ion-checkmark-circled"> </i></button>\n <button><i class="icon ion-checkmark-round"> </i></button>\n <button><i class="icon ion-chevron-down"> </i></button>\n <button><i class="icon ion-chevron-left"> </i></button>\n <button><i class="icon ion-chevron-right"> </i></button>\n <button><i class="icon ion-chevron-up"> </i></button>\n <button><i class="icon ion-clipboard"> </i></button>\n <button><i class="icon ion-clock"> </i></button>\n <button><i class="icon ion-close"> </i></button>\n <button><i class="icon ion-close-circled"> </i></button>\n <button><i class="icon ion-close-round"> </i></button>\n <button><i class="icon ion-closed-captioning"> </i></button>\n <button><i class="icon ion-cloud"> </i></button>\n <button><i class="icon ion-code"> </i></button>\n <button><i class="icon ion-code-download"> </i></button>\n <button><i class="icon ion-code-working"> </i></button>\n <button><i class="icon ion-coffee"> </i></button>\n <button><i class="icon ion-compass"> </i></button>\n <button><i class="icon ion-compose"> </i></button>\n <button><i class="icon ion-connection-bars"> </i></button>\n <button><i class="icon ion-contrast"> </i></button>\n <button><i class="icon ion-crop"> </i></button>\n <button><i class="icon ion-cube"> </i></button>\n <button><i class="icon ion-disc"> </i></button>\n <button><i class="icon ion-document"> </i></button>\n <button><i class="icon ion-document-text"> </i></button>\n <button><i class="icon ion-drag"> </i></button>\n <button><i class="icon ion-earth"> </i></button>\n <button><i class="icon ion-easel"> </i></button>\n <button><i class="icon ion-edit"> </i></button>\n <button><i class="icon ion-egg"> </i></button>\n <button><i class="icon ion-eject"> </i></button>\n <button><i class="icon ion-email"> </i></button>\n <button><i class="icon ion-email-unread"> </i></button>\n <button><i class="icon ion-erlenmeyer-flask"> </i></button>\n <button><i class="icon ion-erlenmeyer-flask-bubbles"> </i></button>\n <button><i class="icon ion-eye"> </i></button>\n <button><i class="icon ion-eye-disabled"> </i></button>\n <button><i class="icon ion-female"> </i></button>\n <button><i class="icon ion-filing"> </i></button>\n <button><i class="icon ion-film-marker"> </i></button>\n <button><i class="icon ion-fireball"> </i></button>\n <button><i class="icon ion-flag"> </i></button>\n <button><i class="icon ion-flame"> </i></button>\n <button><i class="icon ion-flash"> </i></button>\n <button><i class="icon ion-flash-off"> </i></button>\n <button><i class="icon ion-folder"> </i></button>\n <button><i class="icon ion-fork"> </i></button>\n <button><i class="icon ion-fork-repo"> </i></button>\n <button><i class="icon ion-forward"> </i></button>\n <button><i class="icon ion-funnel"> </i></button>\n <button><i class="icon ion-gear-a"> </i></button>\n <button><i class="icon ion-gear-b"> </i></button>\n <button><i class="icon ion-grid"> </i></button>\n <button><i class="icon ion-hammer"> </i></button>\n <button><i class="icon ion-happy"> </i></button>\n <button><i class="icon ion-happy-outline"> </i></button>\n <button><i class="icon ion-headphone"> </i></button>\n <button><i class="icon ion-heart"> </i></button>\n <button><i class="icon ion-heart-broken"> </i></button>\n <button><i class="icon ion-help"> </i></button>\n <button><i class="icon ion-help-buoy"> </i></button>\n <button><i class="icon ion-help-circled"> </i></button>\n <button><i class="icon ion-home"> </i></button>\n <button><i class="icon ion-icecream"> </i></button>\n <button><i class="icon ion-image"> </i></button>\n <button><i class="icon ion-images"> </i></button>\n <button><i class="icon ion-information"> </i></button>\n <button><i class="icon ion-information-circled"> </i></button>\n <button><i class="icon ion-ionic"> </i></button>\n <button><i class="icon ion-ios-alarm"> </i></button>\n <button><i class="icon ion-ios-alarm-outline"> </i></button>\n <button><i class="icon ion-ios-albums"> </i></button>\n <button><i class="icon ion-ios-albums-outline"> </i></button>\n <button><i class="icon ion-ios-americanfootball"> </i></button>\n <button><i class="icon ion-ios-americanfootball-outline"> </i></button>\n <button><i class="icon ion-ios-analytics"> </i></button>\n <button><i class="icon ion-ios-analytics-outline"> </i></button>\n <button><i class="icon ion-ios-arrow-back"> </i></button>\n <button><i class="icon ion-ios-arrow-down"> </i></button>\n <button><i class="icon ion-ios-arrow-forward"> </i></button>\n <button><i class="icon ion-ios-arrow-left"> </i></button>\n <button><i class="icon ion-ios-arrow-right"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-down"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-left"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-right"> </i></button>\n <button><i class="icon ion-ios-arrow-thin-up"> </i></button>\n <button><i class="icon ion-ios-arrow-up"> </i></button>\n <button><i class="icon ion-ios-at"> </i></button>\n <button><i class="icon ion-ios-at-outline"> </i></button>\n <button><i class="icon ion-ios-barcode"> </i></button>\n <button><i class="icon ion-ios-barcode-outline"> </i></button>\n <button><i class="icon ion-ios-baseball"> </i></button>\n <button><i class="icon ion-ios-baseball-outline"> </i></button>\n <button><i class="icon ion-ios-basketball"> </i></button>\n <button><i class="icon ion-ios-basketball-outline"> </i></button>\n <button><i class="icon ion-ios-bell"> </i></button>\n <button><i class="icon ion-ios-bell-outline"> </i></button>\n <button><i class="icon ion-ios-body"> </i></button>\n <button><i class="icon ion-ios-body-outline"> </i></button>\n <button><i class="icon ion-ios-bolt"> </i></button>\n <button><i class="icon ion-ios-bolt-outline"> </i></button>\n <button><i class="icon ion-ios-book"> </i></button>\n <button><i class="icon ion-ios-book-outline"> </i></button>\n <button><i class="icon ion-ios-bookmarks"> </i></button>\n <button><i class="icon ion-ios-bookmarks-outline"> </i></button>\n <button><i class="icon ion-ios-box"> </i></button>\n <button><i class="icon ion-ios-box-outline"> </i></button>\n <button><i class="icon ion-ios-briefcase"> </i></button>\n <button><i class="icon ion-ios-briefcase-outline"> </i></button>\n <button><i class="icon ion-ios-browsers"> </i></button>\n <button><i class="icon ion-ios-browsers-outline"> </i></button>\n <button><i class="icon ion-ios-calculator"> </i></button>\n <button><i class="icon ion-ios-calculator-outline"> </i></button>\n <button><i class="icon ion-ios-calendar"> </i></button>\n <button><i class="icon ion-ios-calendar-outline"> </i></button>\n <button><i class="icon ion-ios-camera"> </i></button>\n <button><i class="icon ion-ios-camera-outline"> </i></button>\n <button><i class="icon ion-ios-cart"> </i></button>\n <button><i class="icon ion-ios-cart-outline"> </i></button>\n <button><i class="icon ion-ios-chatboxes"> </i></button>\n <button><i class="icon ion-ios-chatboxes-outline"> </i></button>\n <button><i class="icon ion-ios-chatbubble"> </i></button>\n <button><i class="icon ion-ios-chatbubble-outline"> </i></button>\n <button><i class="icon ion-ios-checkmark"> </i></button>\n <button><i class="icon ion-ios-checkmark-empty"> </i></button>\n <button><i class="icon ion-ios-checkmark-outline"> </i></button>\n <button><i class="icon ion-ios-circle-filled"> </i></button>\n <button><i class="icon ion-ios-circle-outline"> </i></button>\n <button><i class="icon ion-ios-clock"> </i></button>\n <button><i class="icon ion-ios-clock-outline"> </i></button>\n <button><i class="icon ion-ios-close"> </i></button>\n <button><i class="icon ion-ios-close-empty"> </i></button>\n <button><i class="icon ion-ios-close-outline"> </i></button>\n <button><i class="icon ion-ios-cloud"> </i></button>\n <button><i class="icon ion-ios-cloud-download"> </i></button>\n <button><i class="icon ion-ios-cloud-download-outline"> </i></button>\n <button><i class="icon ion-ios-cloud-outline"> </i></button>\n <button><i class="icon ion-ios-cloud-upload"> </i></button>\n <button><i class="icon ion-ios-cloud-upload-outline"> </i></button>\n <button><i class="icon ion-ios-cloudy"> </i></button>\n <button><i class="icon ion-ios-cloudy-night"> </i></button>\n <button><i class="icon ion-ios-cloudy-night-outline"> </i></button>\n <button><i class="icon ion-ios-cloudy-outline"> </i></button>\n <button><i class="icon ion-ios-cog"> </i></button>\n <button><i class="icon ion-ios-cog-outline"> </i></button>\n <button><i class="icon ion-ios-color-filter"> </i></button>\n <button><i class="icon ion-ios-color-filter-outline"> </i></button>\n <button><i class="icon ion-ios-color-wand"> </i></button>\n <button><i class="icon ion-ios-color-wand-outline"> </i></button>\n <button><i class="icon ion-ios-compose"> </i></button>\n <button><i class="icon ion-ios-compose-outline"> </i></button>\n <button><i class="icon ion-ios-contact"> </i></button>\n <button><i class="icon ion-ios-contact-outline"> </i></button>\n <button><i class="icon ion-ios-copy"> </i></button>\n <button><i class="icon ion-ios-copy-outline"> </i></button>\n <button><i class="icon ion-ios-crop"> </i></button>\n <button><i class="icon ion-ios-crop-strong"> </i></button>\n <button><i class="icon ion-ios-download"> </i></button>\n <button><i class="icon ion-ios-download-outline"> </i></button>\n <button><i class="icon ion-ios-drag"> </i></button>\n <button><i class="icon ion-ios-email"> </i></button>\n <button><i class="icon ion-ios-email-outline"> </i></button>\n <button><i class="icon ion-ios-eye"> </i></button>\n <button><i class="icon ion-ios-eye-outline"> </i></button>\n <button><i class="icon ion-ios-fastforward"> </i></button>\n <button><i class="icon ion-ios-fastforward-outline"> </i></button>\n <button><i class="icon ion-ios-filing"> </i></button>\n <button><i class="icon ion-ios-filing-outline"> </i></button>\n <button><i class="icon ion-ios-film"> </i></button>\n <button><i class="icon ion-ios-film-outline"> </i></button>\n <button><i class="icon ion-ios-flag"> </i></button>\n <button><i class="icon ion-ios-flag-outline"> </i></button>\n <button><i class="icon ion-ios-flame"> </i></button>\n <button><i class="icon ion-ios-flame-outline"> </i></button>\n <button><i class="icon ion-ios-flask"> </i></button>\n <button><i class="icon ion-ios-flask-outline"> </i></button>\n <button><i class="icon ion-ios-flower"> </i></button>\n <button><i class="icon ion-ios-flower-outline"> </i></button>\n <button><i class="icon ion-ios-folder"> </i></button>\n <button><i class="icon ion-ios-folder-outline"> </i></button>\n <button><i class="icon ion-ios-football"> </i></button>\n <button><i class="icon ion-ios-football-outline"> </i></button>\n <button><i class="icon ion-ios-game-controller-a"> </i></button>\n <button><i class="icon ion-ios-game-controller-a-outline"> </i></button>\n <button><i class="icon ion-ios-game-controller-b"> </i></button>\n <button><i class="icon ion-ios-game-controller-b-outline"> </i></button>\n <button><i class="icon ion-ios-gear"> </i></button>\n <button><i class="icon ion-ios-gear-outline"> </i></button>\n <button><i class="icon ion-ios-glasses"> </i></button>\n <button><i class="icon ion-ios-glasses-outline"> </i></button>\n <button><i class="icon ion-ios-grid-view"> </i></button>\n <button><i class="icon ion-ios-grid-view-outline"> </i></button>\n <button><i class="icon ion-ios-heart"> </i></button>\n <button><i class="icon ion-ios-heart-outline"> </i></button>\n <button><i class="icon ion-ios-help"> </i></button>\n <button><i class="icon ion-ios-help-empty"> </i></button>\n <button><i class="icon ion-ios-help-outline"> </i></button>\n <button><i class="icon ion-ios-home"> </i></button>\n <button><i class="icon ion-ios-home-outline"> </i></button>\n <button><i class="icon ion-ios-infinite"> </i></button>\n <button><i class="icon ion-ios-infinite-outline"> </i></button>\n <button><i class="icon ion-ios-information"> </i></button>\n <button><i class="icon ion-ios-information-empty"> </i></button>\n <button><i class="icon ion-ios-information-outline"> </i></button>\n <button><i class="icon ion-ios-ionic-outline"> </i></button>\n <button><i class="icon ion-ios-keypad"> </i></button>\n <button><i class="icon ion-ios-keypad-outline"> </i></button>\n <button><i class="icon ion-ios-lightbulb"> </i></button>\n <button><i class="icon ion-ios-lightbulb-outline"> </i></button>\n <button><i class="icon ion-ios-list"> </i></button>\n <button><i class="icon ion-ios-list-outline"> </i></button>\n <button><i class="icon ion-ios-location"> </i></button>\n <button><i class="icon ion-ios-location-outline"> </i></button>\n <button><i class="icon ion-ios-locked"> </i></button>\n <button><i class="icon ion-ios-locked-outline"> </i></button>\n <button><i class="icon ion-ios-loop"> </i></button>\n <button><i class="icon ion-ios-loop-strong"> </i></button>\n <button><i class="icon ion-ios-medical"> </i></button>\n <button><i class="icon ion-ios-medical-outline"> </i></button>\n <button><i class="icon ion-ios-medkit"> </i></button>\n <button><i class="icon ion-ios-medkit-outline"> </i></button>\n <button><i class="icon ion-ios-mic"> </i></button>\n <button><i class="icon ion-ios-mic-off"> </i></button>\n <button><i class="icon ion-ios-mic-outline"> </i></button>\n <button><i class="icon ion-ios-minus"> </i></button>\n <button><i class="icon ion-ios-minus-empty"> </i></button>\n <button><i class="icon ion-ios-minus-outline"> </i></button>\n <button><i class="icon ion-ios-monitor"> </i></button>\n <button><i class="icon ion-ios-monitor-outline"> </i></button>\n <button><i class="icon ion-ios-moon"> </i></button>\n <button><i class="icon ion-ios-moon-outline"> </i></button>\n <button><i class="icon ion-ios-more"> </i></button>\n <button><i class="icon ion-ios-more-outline"> </i></button>\n <button><i class="icon ion-ios-musical-note"> </i></button>\n <button><i class="icon ion-ios-musical-notes"> </i></button>\n <button><i class="icon ion-ios-navigate"> </i></button>\n <button><i class="icon ion-ios-navigate-outline"> </i></button>\n <button><i class="icon ion-ios-nutrition"> </i></button>\n <button><i class="icon ion-ios-nutrition-outline"> </i></button>\n <button><i class="icon ion-ios-paper"> </i></button>\n <button><i class="icon ion-ios-paper-outline"> </i></button>\n <button><i class="icon ion-ios-paperplane"> </i></button>\n <button><i class="icon ion-ios-paperplane-outline"> </i></button>\n <button><i class="icon ion-ios-partlysunny"> </i></button>\n <button><i class="icon ion-ios-partlysunny-outline"> </i></button>\n <button><i class="icon ion-ios-pause"> </i></button>\n <button><i class="icon ion-ios-pause-outline"> </i></button>\n <button><i class="icon ion-ios-paw"> </i></button>\n <button><i class="icon ion-ios-paw-outline"> </i></button>\n <button><i class="icon ion-ios-people"> </i></button>\n <button><i class="icon ion-ios-people-outline"> </i></button>\n <button><i class="icon ion-ios-person"> </i></button>\n <button><i class="icon ion-ios-person-outline"> </i></button>\n <button><i class="icon ion-ios-personadd"> </i></button>\n <button><i class="icon ion-ios-personadd-outline"> </i></button>\n <button><i class="icon ion-ios-photos"> </i></button>\n <button><i class="icon ion-ios-photos-outline"> </i></button>\n <button><i class="icon ion-ios-pie"> </i></button>\n <button><i class="icon ion-ios-pie-outline"> </i></button>\n <button><i class="icon ion-ios-pint"> </i></button>\n <button><i class="icon ion-ios-pint-outline"> </i></button>\n <button><i class="icon ion-ios-play"> </i></button>\n <button><i class="icon ion-ios-play-outline"> </i></button>\n <button><i class="icon ion-ios-plus"> </i></button>\n <button><i class="icon ion-ios-plus-empty"> </i></button>\n <button><i class="icon ion-ios-plus-outline"> </i></button>\n <button><i class="icon ion-ios-pricetag"> </i></button>\n <button><i class="icon ion-ios-pricetag-outline"> </i></button>\n <button><i class="icon ion-ios-pricetags"> </i></button>\n <button><i class="icon ion-ios-pricetags-outline"> </i></button>\n <button><i class="icon ion-ios-printer"> </i></button>\n <button><i class="icon ion-ios-printer-outline"> </i></button>\n <button><i class="icon ion-ios-pulse"> </i></button>\n <button><i class="icon ion-ios-pulse-strong"> </i></button>\n <button><i class="icon ion-ios-rainy"> </i></button>\n <button><i class="icon ion-ios-rainy-outline"> </i></button>\n <button><i class="icon ion-ios-recording"> </i></button>\n <button><i class="icon ion-ios-recording-outline"> </i></button>\n <button><i class="icon ion-ios-redo"> </i></button>\n <button><i class="icon ion-ios-redo-outline"> </i></button>\n <button><i class="icon ion-ios-refresh"> </i></button>\n <button><i class="icon ion-ios-refresh-empty"> </i></button>\n <button><i class="icon ion-ios-refresh-outline"> </i></button>\n <button><i class="icon ion-ios-reload"> </i></button>\n <button><i class="icon ion-ios-reverse-camera"> </i></button>\n <button><i class="icon ion-ios-reverse-camera-outline"> </i></button>\n <button><i class="icon ion-ios-rewind"> </i></button>\n <button><i class="icon ion-ios-rewind-outline"> </i></button>\n <button><i class="icon ion-ios-rose"> </i></button>\n <button><i class="icon ion-ios-rose-outline"> </i></button>\n <button><i class="icon ion-ios-search"> </i></button>\n <button><i class="icon ion-ios-search-strong"> </i></button>\n <button><i class="icon ion-ios-settings"> </i></button>\n <button><i class="icon ion-ios-settings-strong"> </i></button>\n <button><i class="icon ion-ios-shuffle"> </i></button>\n <button><i class="icon ion-ios-shuffle-strong"> </i></button>\n <button><i class="icon ion-ios-skipbackward"> </i></button>\n <button><i class="icon ion-ios-skipbackward-outline"> </i></button>\n <button><i class="icon ion-ios-skipforward"> </i></button>\n <button><i class="icon ion-ios-skipforward-outline"> </i></button>\n <button><i class="icon ion-ios-snowy"> </i></button>\n <button><i class="icon ion-ios-speedometer"> </i></button>\n <button><i class="icon ion-ios-speedometer-outline"> </i></button>\n <button><i class="icon ion-ios-star"> </i></button>\n <button><i class="icon ion-ios-star-half"> </i></button>\n <button><i class="icon ion-ios-star-outline"> </i></button>\n <button><i class="icon ion-ios-stopwatch"> </i></button>\n <button><i class="icon ion-ios-stopwatch-outline"> </i></button>\n <button><i class="icon ion-ios-sunny"> </i></button>\n <button><i class="icon ion-ios-sunny-outline"> </i></button>\n <button><i class="icon ion-ios-telephone"> </i></button>\n <button><i class="icon ion-ios-telephone-outline"> </i></button>\n <button><i class="icon ion-ios-tennisball"> </i></button>\n <button><i class="icon ion-ios-tennisball-outline"> </i></button>\n <button><i class="icon ion-ios-thunderstorm"> </i></button>\n <button><i class="icon ion-ios-thunderstorm-outline"> </i></button>\n <button><i class="icon ion-ios-time"> </i></button>\n <button><i class="icon ion-ios-time-outline"> </i></button>\n <button><i class="icon ion-ios-timer"> </i></button>\n <button><i class="icon ion-ios-timer-outline"> </i></button>\n <button><i class="icon ion-ios-toggle"> </i></button>\n <button><i class="icon ion-ios-toggle-outline"> </i></button>\n <button><i class="icon ion-ios-trash"> </i></button>\n <button><i class="icon ion-ios-trash-outline"> </i></button>\n <button><i class="icon ion-ios-undo"> </i></button>\n <button><i class="icon ion-ios-undo-outline"> </i></button>\n <button><i class="icon ion-ios-unlocked"> </i></button>\n <button><i class="icon ion-ios-unlocked-outline"> </i></button>\n <button><i class="icon ion-ios-upload"> </i></button>\n <button><i class="icon ion-ios-upload-outline"> </i></button>\n <button><i class="icon ion-ios-videocam"> </i></button>\n <button><i class="icon ion-ios-videocam-outline"> </i></button>\n <button><i class="icon ion-ios-volume-high"> </i></button>\n <button><i class="icon ion-ios-volume-low"> </i></button>\n <button><i class="icon ion-ios-wineglass"> </i></button>\n <button><i class="icon ion-ios-wineglass-outline"> </i></button>\n <button><i class="icon ion-ios-world"> </i></button>\n <button><i class="icon ion-ios-world-outline"> </i></button>\n <button><i class="icon ion-ipad"> </i></button>\n <button><i class="icon ion-iphone"> </i></button>\n <button><i class="icon ion-ipod"> </i></button>\n <button><i class="icon ion-jet"> </i></button>\n <button><i class="icon ion-key"> </i></button>\n <button><i class="icon ion-knife"> </i></button>\n <button><i class="icon ion-laptop"> </i></button>\n <button><i class="icon ion-leaf"> </i></button>\n <button><i class="icon ion-levels"> </i></button>\n <button><i class="icon ion-lightbulb"> </i></button>\n <button><i class="icon ion-link"> </i></button>\n <button><i class="icon ion-load-a"> </i></button>\n <button><i class="icon ion-load-b"> </i></button>\n <button><i class="icon ion-load-c"> </i></button>\n <button><i class="icon ion-load-d"> </i></button>\n <button><i class="icon ion-location"> </i></button>\n <button><i class="icon ion-lock-combination"> </i></button>\n <button><i class="icon ion-locked"> </i></button>\n <button><i class="icon ion-log-in"> </i></button>\n <button><i class="icon ion-log-out"> </i></button>\n <button><i class="icon ion-loop"> </i></button>\n <button><i class="icon ion-magnet"> </i></button>\n <button><i class="icon ion-male"> </i></button>\n <button><i class="icon ion-man"> </i></button>\n <button><i class="icon ion-map"> </i></button>\n <button><i class="icon ion-medkit"> </i></button>\n <button><i class="icon ion-merge"> </i></button>\n <button><i class="icon ion-mic-a"> </i></button>\n <button><i class="icon ion-mic-b"> </i></button>\n <button><i class="icon ion-mic-c"> </i></button>\n <button><i class="icon ion-minus"> </i></button>\n <button><i class="icon ion-minus-circled"> </i></button>\n <button><i class="icon ion-minus-round"> </i></button>\n <button><i class="icon ion-model-s"> </i></button>\n <button><i class="icon ion-monitor"> </i></button>\n <button><i class="icon ion-more"> </i></button>\n <button><i class="icon ion-mouse"> </i></button>\n <button><i class="icon ion-music-note"> </i></button>\n <button><i class="icon ion-navicon"> </i></button>\n <button><i class="icon ion-navicon-round"> </i></button>\n <button><i class="icon ion-navigate"> </i></button>\n <button><i class="icon ion-network"> </i></button>\n <button><i class="icon ion-no-smoking"> </i></button>\n <button><i class="icon ion-nuclear"> </i></button>\n <button><i class="icon ion-outlet"> </i></button>\n <button><i class="icon ion-paintbrush"> </i></button>\n <button><i class="icon ion-paintbucket"> </i></button>\n <button><i class="icon ion-paper-airplane"> </i></button>\n <button><i class="icon ion-paperclip"> </i></button>\n <button><i class="icon ion-pause"> </i></button>\n <button><i class="icon ion-person"> </i></button>\n <button><i class="icon ion-person-add"> </i></button>\n <button><i class="icon ion-person-stalker"> </i></button>\n <button><i class="icon ion-pie-graph"> </i></button>\n <button><i class="icon ion-pin"> </i></button>\n <button><i class="icon ion-pinpoint"> </i></button>\n <button><i class="icon ion-pizza"> </i></button>\n <button><i class="icon ion-plane"> </i></button>\n <button><i class="icon ion-planet"> </i></button>\n <button><i class="icon ion-play"> </i></button>\n <button><i class="icon ion-playstation"> </i></button>\n <button><i class="icon ion-plus"> </i></button>\n <button><i class="icon ion-plus-circled"> </i></button>\n <button><i class="icon ion-plus-round"> </i></button>\n <button><i class="icon ion-podium"> </i></button>\n <button><i class="icon ion-pound"> </i></button>\n <button><i class="icon ion-power"> </i></button>\n <button><i class="icon ion-pricetag"> </i></button>\n <button><i class="icon ion-pricetags"> </i></button>\n <button><i class="icon ion-printer"> </i></button>\n <button><i class="icon ion-pull-request"> </i></button>\n <button><i class="icon ion-qr-scanner"> </i></button>\n <button><i class="icon ion-quote"> </i></button>\n <button><i class="icon ion-radio-waves"> </i></button>\n <button><i class="icon ion-record"> </i></button>\n <button><i class="icon ion-refresh"> </i></button>\n <button><i class="icon ion-reply"> </i></button>\n <button><i class="icon ion-reply-all"> </i></button>\n <button><i class="icon ion-ribbon-a"> </i></button>\n <button><i class="icon ion-ribbon-b"> </i></button>\n <button><i class="icon ion-sad"> </i></button>\n <button><i class="icon ion-sad-outline"> </i></button>\n <button><i class="icon ion-scissors"> </i></button>\n <button><i class="icon ion-search"> </i></button>\n <button><i class="icon ion-settings"> </i></button>\n <button><i class="icon ion-share"> </i></button>\n <button><i class="icon ion-shuffle"> </i></button>\n <button><i class="icon ion-skip-backward"> </i></button>\n <button><i class="icon ion-skip-forward"> </i></button>\n <button><i class="icon ion-social-android"> </i></button>\n <button><i class="icon ion-social-android-outline"> </i></button>\n <button><i class="icon ion-social-angular"> </i></button>\n <button><i class="icon ion-social-angular-outline"> </i></button>\n <button><i class="icon ion-social-apple"> </i></button>\n <button><i class="icon ion-social-apple-outline"> </i></button>\n <button><i class="icon ion-social-bitcoin"> </i></button>\n <button><i class="icon ion-social-bitcoin-outline"> </i></button>\n <button><i class="icon ion-social-buffer"> </i></button>\n <button><i class="icon ion-social-buffer-outline"> </i></button>\n <button><i class="icon ion-social-chrome"> </i></button>\n <button><i class="icon ion-social-chrome-outline"> </i></button>\n <button><i class="icon ion-social-codepen"> </i></button>\n <button><i class="icon ion-social-codepen-outline"> </i></button>\n <button><i class="icon ion-social-css3"> </i></button>\n <button><i class="icon ion-social-css3-outline"> </i></button>\n <button><i class="icon ion-social-designernews"> </i></button>\n <button><i class="icon ion-social-designernews-outline"> </i></button>\n <button><i class="icon ion-social-dribbble"> </i></button>\n <button><i class="icon ion-social-dribbble-outline"> </i></button>\n <button><i class="icon ion-social-dropbox"> </i></button>\n <button><i class="icon ion-social-dropbox-outline"> </i></button>\n <button><i class="icon ion-social-euro"> </i></button>\n <button><i class="icon ion-social-euro-outline"> </i></button>\n <button><i class="icon ion-social-facebook"> </i></button>\n <button><i class="icon ion-social-facebook-outline"> </i></button>\n <button><i class="icon ion-social-foursquare"> </i></button>\n <button><i class="icon ion-social-foursquare-outline"> </i></button>\n <button><i class="icon ion-social-freebsd-devil"> </i></button>\n <button><i class="icon ion-social-github"> </i></button>\n <button><i class="icon ion-social-github-outline"> </i></button>\n <button><i class="icon ion-social-google"> </i></button>\n <button><i class="icon ion-social-google-outline"> </i></button>\n <button><i class="icon ion-social-googleplus"> </i></button>\n <button><i class="icon ion-social-googleplus-outline"> </i></button>\n <button><i class="icon ion-social-hackernews"> </i></button>\n <button><i class="icon ion-social-hackernews-outline"> </i></button>\n <button><i class="icon ion-social-html5"> </i></button>\n <button><i class="icon ion-social-html5-outline"> </i></button>\n <button><i class="icon ion-social-instagram"> </i></button>\n <button><i class="icon ion-social-instagram-outline"> </i></button>\n <button><i class="icon ion-social-javascript"> </i></button>\n <button><i class="icon ion-social-javascript-outline"> </i></button>\n <button><i class="icon ion-social-linkedin"> </i></button>\n <button><i class="icon ion-social-linkedin-outline"> </i></button>\n <button><i class="icon ion-social-markdown"> </i></button>\n <button><i class="icon ion-social-nodejs"> </i></button>\n <button><i class="icon ion-social-octocat"> </i></button>\n <button><i class="icon ion-social-pinterest"> </i></button>\n <button><i class="icon ion-social-pinterest-outline"> </i></button>\n <button><i class="icon ion-social-python"> </i></button>\n <button><i class="icon ion-social-reddit"> </i></button>\n <button><i class="icon ion-social-reddit-outline"> </i></button>\n <button><i class="icon ion-social-rss"> </i></button>\n <button><i class="icon ion-social-rss-outline"> </i></button>\n <button><i class="icon ion-social-sass"> </i></button>\n <button><i class="icon ion-social-skype"> </i></button>\n <button><i class="icon ion-social-skype-outline"> </i></button>\n <button><i class="icon ion-social-snapchat"> </i></button>\n <button><i class="icon ion-social-snapchat-outline"> </i></button>\n <button><i class="icon ion-social-tumblr"> </i></button>\n <button><i class="icon ion-social-tumblr-outline"> </i></button>\n <button><i class="icon ion-social-tux"> </i></button>\n <button><i class="icon ion-social-twitch"> </i></button>\n <button><i class="icon ion-social-twitch-outline"> </i></button>\n <button><i class="icon ion-social-twitter"> </i></button>\n <button><i class="icon ion-social-twitter-outline"> </i></button>\n <button><i class="icon ion-social-usd"> </i></button>\n <button><i class="icon ion-social-usd-outline"> </i></button>\n <button><i class="icon ion-social-vimeo"> </i></button>\n <button><i class="icon ion-social-vimeo-outline"> </i></button>\n <button><i class="icon ion-social-whatsapp"> </i></button>\n <button><i class="icon ion-social-whatsapp-outline"> </i></button>\n <button><i class="icon ion-social-windows"> </i></button>\n <button><i class="icon ion-social-windows-outline"> </i></button>\n <button><i class="icon ion-social-wordpress"> </i></button>\n <button><i class="icon ion-social-wordpress-outline"> </i></button>\n <button><i class="icon ion-social-yahoo"> </i></button>\n <button><i class="icon ion-social-yahoo-outline"> </i></button>\n <button><i class="icon ion-social-yen"> </i></button>\n <button><i class="icon ion-social-yen-outline"> </i></button>\n <button><i class="icon ion-social-youtube"> </i></button>\n <button><i class="icon ion-social-youtube-outline"> </i></button>\n <button><i class="icon ion-soup-can"> </i></button>\n <button><i class="icon ion-soup-can-outline"> </i></button>\n <button><i class="icon ion-speakerphone"> </i></button>\n <button><i class="icon ion-speedometer"> </i></button>\n <button><i class="icon ion-spoon"> </i></button>\n <button><i class="icon ion-star"> </i></button>\n <button><i class="icon ion-stats-bars"> </i></button>\n <button><i class="icon ion-steam"> </i></button>\n <button><i class="icon ion-stop"> </i></button>\n <button><i class="icon ion-thermometer"> </i></button>\n <button><i class="icon ion-thumbsdown"> </i></button>\n <button><i class="icon ion-thumbsup"> </i></button>\n <button><i class="icon ion-toggle"> </i></button>\n <button><i class="icon ion-toggle-filled"> </i></button>\n <button><i class="icon ion-transgender"> </i></button>\n <button><i class="icon ion-trash-a"> </i></button>\n <button><i class="icon ion-trash-b"> </i></button>\n <button><i class="icon ion-trophy"> </i></button>\n <button><i class="icon ion-tshirt"> </i></button>\n <button><i class="icon ion-tshirt-outline"> </i></button>\n <button><i class="icon ion-umbrella"> </i></button>\n <button><i class="icon ion-university"> </i></button>\n <button><i class="icon ion-unlocked"> </i></button>\n <button><i class="icon ion-upload"> </i></button>\n <button><i class="icon ion-usb"> </i></button>\n <button><i class="icon ion-videocamera"> </i></button>\n <button><i class="icon ion-volume-high"> </i></button>\n <button><i class="icon ion-volume-low"> </i></button>\n <button><i class="icon ion-volume-medium"> </i></button>\n <button><i class="icon ion-volume-mute"> </i></button>\n <button><i class="icon ion-wand"> </i></button>\n <button><i class="icon ion-waterdrop"> </i></button>\n <button><i class="icon ion-wifi"> </i></button>\n <button><i class="icon ion-wineglass"> </i></button>\n <button><i class="icon ion-woman"> </i></button>\n <button><i class="icon ion-wrench"> </i></button>\n <button><i class="icon ion-xbox"> </i></button> \n '}}class T{constructor(t,e){this.builder=e,this.dialog=t;let n=`\n <button class="btn-back" tabindex="-1" title="${i("Close")}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>\n \n <div class="submain">\n\n <div class="label" style="font-size:18px">${i("Column Spacing")}</div>\n\n <div class="label changedevice">\n <span>${i("Top")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-topspacing="0">0</button>\n <button title="10" data-topspacing="1">10</button>\n <button title="20" data-topspacing="2">20</button>\n <button title="30" data-topspacing="3">30</button>\n <button title="40" data-topspacing="4">40</button>\n <button title="50" data-topspacing="5">50</button>\n <button title="60" data-topspacing="6">60</button>\n <button title="70" data-topspacing="7">70</button>\n <button title="80" data-topspacing="8">80</button>\n <button title="90" data-topspacing="9">90</button>\n <button title="100" data-topspacing="10">100</button>\n <button title="110" data-topspacing="11">110</button>\n <button title="120" data-topspacing="12">120</button>\n <button title="140" data-topspacing="14">140</button>\n \x3c!--<button title="160" data-topspacing="16">160</button>\n <button title="200" data-topspacing="20">200</button>--\x3e\n <button title="${i("Clear")}" data-topspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label changedevice">\n <span>${i("Bottom")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-bottomspacing="0">0</button>\n <button title="10" data-bottomspacing="1">10</button>\n <button title="20" data-bottomspacing="2">20</button>\n <button title="30" data-bottomspacing="3">30</button>\n <button title="40" data-bottomspacing="4">40</button>\n <button title="50" data-bottomspacing="5">50</button>\n <button title="60" data-bottomspacing="6">60</button>\n <button title="70" data-bottomspacing="7">70</button>\n <button title="80" data-bottomspacing="8">80</button>\n <button title="90" data-bottomspacing="9">90</button>\n <button title="100" data-bottomspacing="10">100</button>\n <button title="110" data-bottomspacing="11">110</button>\n <button title="120" data-bottomspacing="12">120</button>\n <button title="140" data-bottomspacing="14">140</button>\n <button title="${i("Clear")}" data-bottomspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label changedevice">\n <span>${i("Left")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-leftspacing="0">0</button>\n <button title="10" data-leftspacing="1">10</button>\n <button title="20" data-leftspacing="2">20</button>\n <button title="30" data-leftspacing="3">30</button>\n <button title="40" data-leftspacing="4">40</button>\n <button title="50" data-leftspacing="5">50</button>\n <button title="60" data-leftspacing="6">60</button>\n <button title="70" data-leftspacing="7">70</button>\n <button title="80" data-leftspacing="8">80</button>\n <button title="90" data-leftspacing="9">90</button>\n <button title="100" data-leftspacing="10">100</button>\n <button title="110" data-leftspacing="11">110</button>\n <button title="120" data-leftspacing="12">120</button>\n <button title="140" data-leftspacing="14">140</button>\n <button title="${i("Clear")}" data-leftspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label changedevice">\n <span>${i("Right")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-rightspacing="0">0</button>\n <button title="10" data-rightspacing="1">10</button>\n <button title="20" data-rightspacing="2">20</button>\n <button title="30" data-rightspacing="3">30</button>\n <button title="40" data-rightspacing="4">40</button>\n <button title="50" data-rightspacing="5">50</button>\n <button title="60" data-rightspacing="6">60</button>\n <button title="70" data-rightspacing="7">70</button>\n <button title="80" data-rightspacing="8">80</button>\n <button title="90" data-rightspacing="9">90</button>\n <button title="100" data-rightspacing="10">100</button>\n <button title="110" data-rightspacing="11">110</button>\n <button title="120" data-rightspacing="12">120</button>\n <button title="140" data-rightspacing="14">140</button>\n <button title="${i("Clear")}" data-rightspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.dialog=t;t.querySelector(".btn-back").addEventListener("click",(()=>{this.close()}));const o=t.querySelectorAll("[data-topspacing]");o.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeColumn,s=t.getAttribute("data-topspacing");this.cleanupOld();let a=this.builder.cssClasses.padding.top;for(let t=0;t<Object.keys(a).length;t++){let i=Object.values(a)[t];i=e+i,n.classList.remove(i)}if(""!==s){let t=this.builder.cssClasses.padding.top[`pt_${s}`];t=e+t,n.classList.add(t)}if(""==s){let t=this.builder.cssClasses.padding.y;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}o.forEach((t=>t.classList.remove("on"))),""!==s&&t.classList.add("on"),this.builder.onChange()}))}));const s=t.querySelectorAll("[data-bottomspacing]");s.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeColumn,o=t.getAttribute("data-bottomspacing");this.cleanupOld();let a=this.builder.cssClasses.padding.bottom;for(let t=0;t<Object.keys(a).length;t++){let i=Object.values(a)[t];i=e+i,n.classList.remove(i)}if(""!==o){let t=this.builder.cssClasses.padding.bottom[`pb_${o}`];t=e+t,n.classList.add(t)}if(""==o){let t=this.builder.cssClasses.padding.y;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}s.forEach((t=>t.classList.remove("on"))),""!==o&&t.classList.add("on"),this.builder.onChange()}))}));const a=t.querySelectorAll("[data-leftspacing]");a.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeColumn,o=t.getAttribute("data-leftspacing");this.cleanupOld();let s=this.builder.cssClasses.padding.left;for(let t=0;t<Object.keys(s).length;t++){let i=Object.values(s)[t];i=e+i,n.classList.remove(i)}if(""!==o){let t=this.builder.cssClasses.padding.left[`pl_${o}`];t=e+t,n.classList.add(t)}if(""==o){let t=this.builder.cssClasses.padding.x;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}a.forEach((t=>t.classList.remove("on"))),""!==o&&t.classList.add("on"),this.builder.onChange()}))}));const l=t.querySelectorAll("[data-rightspacing]");l.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeColumn,o=t.getAttribute("data-rightspacing");this.cleanupOld();let s=this.builder.cssClasses.padding.right;for(let t=0;t<Object.keys(s).length;t++){let i=Object.values(s)[t];i=e+i,n.classList.remove(i)}if(""!==o){let t=this.builder.cssClasses.padding.right[`pr_${o}`];t=e+t,n.classList.add(t)}if(""==o){let t=this.builder.cssClasses.padding.x;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}l.forEach((t=>t.classList.remove("on"))),""!==o&&t.classList.add("on"),this.builder.onChange()}))}))}cleanupOld(){let t=this.builder.controlpanel.activeColumn;t&&(t.classList.remove("padding-0"),t.classList.remove("padding-10"),t.classList.remove("padding-20"),t.classList.remove("padding-30"),t.classList.remove("padding-40"),t.classList.remove("padding-50"),t.classList.remove("padding-60"))}getState(){let t=this.builder.controlpanel.activeColumn;if(!t)return;let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-");const n=this.dialog;n.querySelectorAll("[data-topspacing]").forEach((t=>t.classList.remove("on")));let o=this.builder.cssClasses.padding.top;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-topspacing="${s.replace(e+"pt-","")}"]`).classList.add("on")}n.querySelectorAll("[data-bottomspacing]").forEach((t=>t.classList.remove("on"))),o=this.builder.cssClasses.padding.bottom;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-bottomspacing="${s.replace(e+"pb-","")}"]`).classList.add("on")}n.querySelectorAll("[data-leftspacing]").forEach((t=>t.classList.remove("on"))),o=this.builder.cssClasses.padding.left;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-leftspacing="${s.replace(e+"pl-","")}"]`).classList.add("on")}n.querySelectorAll("[data-rightspacing]").forEach((t=>t.classList.remove("on"))),o=this.builder.cssClasses.padding.right;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-rightspacing="${s.replace(e+"pr-","")}"]`).classList.add("on")}}open(){this.dialog.style.display="flex",this.getState()}close(){this.dialog.style.display=""}}class M{constructor(t,e){this.builder=e,this.dialog=t;let n=`\n <button class="btn-back" tabindex="-1" title="${i("Close")}"><svg class="is-icon-flex"><use xlink:href="#icon-arrow-back"></use></svg></button>\n \n <div class="submain">\n\n <div class="label" style="font-size:18px">${i("Content Spacing")}</div>\n\n <div class="label changedevice">\n <span>${i("Top")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-topspacing="0">0</button>\n <button title="10" data-topspacing="1">10</button>\n <button title="20" data-topspacing="2">20</button>\n <button title="30" data-topspacing="3">30</button>\n <button title="40" data-topspacing="4">40</button>\n <button title="50" data-topspacing="5">50</button>\n <button title="60" data-topspacing="6">60</button>\n <button title="70" data-topspacing="7">70</button>\n <button title="80" data-topspacing="8">80</button>\n <button title="90" data-topspacing="9">90</button>\n <button title="100" data-topspacing="10">100</button>\n <button title="110" data-topspacing="11">110</button>\n <button title="120" data-topspacing="12">120</button>\n <button title="140" data-topspacing="14">140</button>\n \x3c!--<button title="160" data-topspacing="16">160</button>\n <button title="200" data-topspacing="20">200</button>--\x3e\n <button title="${i("Clear")}" data-topspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label changedevice">\n <span>${i("Bottom")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-bottomspacing="0">0</button>\n <button title="10" data-bottomspacing="1">10</button>\n <button title="20" data-bottomspacing="2">20</button>\n <button title="30" data-bottomspacing="3">30</button>\n <button title="40" data-bottomspacing="4">40</button>\n <button title="50" data-bottomspacing="5">50</button>\n <button title="60" data-bottomspacing="6">60</button>\n <button title="70" data-bottomspacing="7">70</button>\n <button title="80" data-bottomspacing="8">80</button>\n <button title="90" data-bottomspacing="9">90</button>\n <button title="100" data-bottomspacing="10">100</button>\n <button title="110" data-bottomspacing="11">110</button>\n <button title="120" data-bottomspacing="12">120</button>\n <button title="140" data-bottomspacing="14">140</button>\n <button title="${i("Clear")}" data-bottomspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label changedevice">\n <span>${i("Left")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-leftspacing="0">0</button>\n <button title="10" data-leftspacing="1">10</button>\n <button title="20" data-leftspacing="2">20</button>\n <button title="30" data-leftspacing="3">30</button>\n <button title="40" data-leftspacing="4">40</button>\n <button title="50" data-leftspacing="5">50</button>\n <button title="60" data-leftspacing="6">60</button>\n <button title="70" data-leftspacing="7">70</button>\n <button title="80" data-leftspacing="8">80</button>\n <button title="90" data-leftspacing="9">90</button>\n <button title="100" data-leftspacing="10">100</button>\n <button title="110" data-leftspacing="11">110</button>\n <button title="120" data-leftspacing="12">120</button>\n <button title="140" data-leftspacing="14">140</button>\n <button title="${i("Clear")}" data-leftspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n\n <div class="label changedevice">\n <span>${i("Right")}:</span>\n <button title="${i("Change Device")}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>\n </div>\n <div class="group contentspacing">\n <button title="0" data-rightspacing="0">0</button>\n <button title="10" data-rightspacing="1">10</button>\n <button title="20" data-rightspacing="2">20</button>\n <button title="30" data-rightspacing="3">30</button>\n <button title="40" data-rightspacing="4">40</button>\n <button title="50" data-rightspacing="5">50</button>\n <button title="60" data-rightspacing="6">60</button>\n <button title="70" data-rightspacing="7">70</button>\n <button title="80" data-rightspacing="8">80</button>\n <button title="90" data-rightspacing="9">90</button>\n <button title="100" data-rightspacing="10">100</button>\n <button title="110" data-rightspacing="11">110</button>\n <button title="120" data-rightspacing="12">120</button>\n <button title="140" data-rightspacing="14">140</button>\n <button title="${i("Clear")}" data-rightspacing=""><svg><use xlink:href="#icon-eraser"></use></svg></button>\n </div>\n </div>\n `;t.insertAdjacentHTML("beforeend",n),this.dialog=t;t.querySelector(".btn-back").addEventListener("click",(()=>{this.close()}));const o=t.querySelectorAll("[data-topspacing]");o.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeBox.querySelector(".is-container"),s=t.getAttribute("data-topspacing");n.classList.remove("content-py-0"),n.classList.remove("content-py-10"),n.classList.remove("content-py-20"),n.classList.remove("content-py-30"),n.classList.remove("content-py-40"),n.classList.remove("content-py-50"),n.classList.remove("content-py-60"),n.classList.remove("content-py-70"),n.classList.remove("content-py-80"),n.classList.remove("content-pt-0"),n.classList.remove("content-pt-10"),n.classList.remove("content-pt-20"),n.classList.remove("content-pt-30"),n.classList.remove("content-pt-40"),n.classList.remove("content-pt-50"),n.classList.remove("content-pt-60"),n.classList.remove("content-pt-70"),n.classList.remove("content-pt-80");let a=this.builder.cssClasses.padding.top;for(let t=0;t<Object.keys(a).length;t++){let i=Object.values(a)[t];i=e+i,n.classList.remove(i)}if(""!==s){let t=this.builder.cssClasses.padding.top[`pt_${s}`];t=e+t,n.classList.add(t)}if(""==s){let t=this.builder.cssClasses.padding.y;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}o.forEach((t=>t.classList.remove("on"))),""!==s&&t.classList.add("on"),this.builder.onChange()}))}));const s=t.querySelectorAll("[data-bottomspacing]");s.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeBox.querySelector(".is-container"),o=t.getAttribute("data-bottomspacing");n.classList.remove("content-py-0"),n.classList.remove("content-py-10"),n.classList.remove("content-py-20"),n.classList.remove("content-py-30"),n.classList.remove("content-py-40"),n.classList.remove("content-py-50"),n.classList.remove("content-py-60"),n.classList.remove("content-py-70"),n.classList.remove("content-py-80"),n.classList.remove("content-pb-0"),n.classList.remove("content-pb-10"),n.classList.remove("content-pb-20"),n.classList.remove("content-pb-30"),n.classList.remove("content-pb-40"),n.classList.remove("content-pb-50"),n.classList.remove("content-pb-60"),n.classList.remove("content-pb-70"),n.classList.remove("content-pb-80");let a=this.builder.cssClasses.padding.bottom;for(let t=0;t<Object.keys(a).length;t++){let i=Object.values(a)[t];i=e+i,n.classList.remove(i)}if(""!==o){let t=this.builder.cssClasses.padding.bottom[`pb_${o}`];t=e+t,n.classList.add(t)}if(""==o){let t=this.builder.cssClasses.padding.y;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}s.forEach((t=>t.classList.remove("on"))),""!==o&&t.classList.add("on"),this.builder.onChange()}))}));const a=t.querySelectorAll("[data-leftspacing]");a.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeBox.querySelector(".is-container"),o=t.getAttribute("data-leftspacing"),s=this.builder.cssClasses.padding.left;for(let t=0;t<Object.keys(s).length;t++){let i=Object.values(s)[t];i=e+i,n.classList.remove(i)}if(""!==o){let t=this.builder.cssClasses.padding.left[`pl_${o}`];t=e+t,n.classList.add(t)}if(""==o){let t=this.builder.cssClasses.padding.x;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}a.forEach((t=>t.classList.remove("on"))),""!==o&&t.classList.add("on"),this.builder.onChange()}))}));const l=t.querySelectorAll("[data-rightspacing]");l.forEach((t=>{t.addEventListener("click",(()=>{let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-"),this.builder.editor.saveForUndo();let n=this.builder.controlpanel.activeBox.querySelector(".is-container"),o=t.getAttribute("data-rightspacing"),s=this.builder.cssClasses.padding.right;for(let t=0;t<Object.keys(s).length;t++){let i=Object.values(s)[t];i=e+i,n.classList.remove(i)}if(""!==o){let t=this.builder.cssClasses.padding.right[`pr_${o}`];t=e+t,n.classList.add(t)}if(""==o){let t=this.builder.cssClasses.padding.x;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}t=this.builder.cssClasses.padding.all;for(let e=0;e<Object.keys(t).length;e++){let i=Object.values(t)[e];n.classList.remove(i)}}l.forEach((t=>t.classList.remove("on"))),""!==o&&t.classList.add("on"),this.builder.onChange()}))}))}getState(){let t=this.builder.controlpanel.activeBox.querySelector(".is-container");if(!t)return;let e="",i=this.builder.screenMode;"desktop"===i?e="":"tablet-landscape"===i?e="md-":"tablet"===i?e="sm-":"mobile"===i&&(e="xs-");const n=this.dialog;n.querySelectorAll("[data-topspacing]").forEach((t=>t.classList.remove("on")));let o=this.builder.cssClasses.padding.top;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-topspacing="${s.replace(e+"pt-","")}"]`).classList.add("on")}n.querySelectorAll("[data-bottomspacing]").forEach((t=>t.classList.remove("on"))),o=this.builder.cssClasses.padding.bottom;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-bottomspacing="${s.replace(e+"pb-","")}"]`).classList.add("on")}n.querySelectorAll("[data-leftspacing]").forEach((t=>t.classList.remove("on"))),o=this.builder.cssClasses.padding.left;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-leftspacing="${s.replace(e+"pl-","")}"]`).classList.add("on")}n.querySelectorAll("[data-rightspacing]").forEach((t=>t.classList.remove("on"))),o=this.builder.cssClasses.padding.right;for(let i=0;i<Object.keys(o).length;i++){let s=Object.values(o)[i];s=e+s,t.classList.contains(s)&&n.querySelector(`[data-rightspacing="${s.replace(e+"pr-","")}"]`).classList.add("on")}}open(){this.dialog.style.display="flex",this.getState()}close(){this.dialog.style.display=""}}
15
15
  /**!
16
16
  * Sortable 1.15.0