@innovastudio/contentbuilder 1.4.147 → 1.4.148

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/contentbuilder/contentbuilder.esm.js +8 -8
  3. package/public/contentbuilder/contentbuilder.min.js +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@innovastudio/contentbuilder",
3
3
  "type": "module",
4
- "version": "1.4.147",
4
+ "version": "1.4.148",
5
5
  "description": "",
6
6
  "main": "public/contentbuilder/contentbuilder.esm.js",
7
7
  "files": [
package/public/contentbuilder/contentbuilder.esm.js CHANGED
@@ -13312,26 +13312,26 @@ const renderQuickAdd = builder => {
13312
13312
  elm = quickadd.querySelector('.add-button');
13313
13313
  if (elm) dom.addEventListener(elm, 'click', () => {
13314
13314
  const mode = quickadd.getAttribute('data-mode');
13315
- let html = `<div class="flex">
13316
- <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
13315
+ let html = `<div>
13316
+ <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
13317
13317
  </div>`;
13318
13318
  if (builder.opts.emailMode) {
13319
- html = '<div class="flex"><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
13319
+ html = '<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>';
13320
13320
  }
13321
13321
  util.addContent(html, mode);
13322
13322
  });
13323
13323
  elm = quickadd.querySelector('.add-twobutton');
13324
13324
  if (elm) dom.addEventListener(elm, 'click', () => {
13325
13325
  const mode = quickadd.getAttribute('data-mode');
13326
- let html = `<div class="flex">
13326
+ let html = `<div>
13327
13327
  <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>
13328
13328
  <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>
13329
13329
  </div>`;
13330
13330
  if (builder.opts.emailMode) {
13331
- html = `<div class="flex">
13332
- <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
13333
- <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
13334
- </div>`;
13331
+ html = `<div>
13332
+ <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;
13333
+ <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>
13334
+ </div>`;
13335
13335
  }
13336
13336
  util.addContent(html, mode);
13337
13337
  });
package/public/contentbuilder/contentbuilder.min.js CHANGED
@@ -10,7 +10,7 @@ var ContentBuilder=function(){"use strict";class t{constructor(t){this.builder=t
10
10
  License: MIT
11
11
  Copyright (c) 2020 Paweł Kuna
12
12
  https://github.com/tabler/tabler-icons
13
- */class Ei{constructor(t){this.builder=t;const e=this.builder.util;this.util=e}getSnippetsHtml(){const t=this.util,e=this.builder.opts.snippetUrl,i=this.builder.opts.snippetPath;let o="[";for(let e=0;e<this.builder.opts.snippetCategories.length;e++)o+=`[${this.builder.opts.snippetCategories[e][0]},'${t.out(this.builder.opts.snippetCategories[e][1])}'],`;o+="]";const n=this.builder.opts.defaultSnippetCategory;return`\n <!DOCTYPE HTML>\n <html>\n \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 <script src="${e}"><\/script>\n <style>\n body {\n // background: #fff;\n background: ${this.builder.styleSnippetBackground};\n margin: 0;\n }\n\n .is-pop-close {\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: transparent;\n z-index:10;width:30px;height:30px;position:absolute;\n top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;\n }\n .is-pop-close:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n /*\n body.dark {\n background: #111;\n }\n .dark .is-categories {\n background: #333;\n }\n .dark .is-category-list a {\n background: #333;\n color: #fff;\n }\n .dark .is-category-list a.active {\n background: #525252;\n color: #fff;\n }\n .dark .is-category-list a:hover {\n color: #fff;\n }\n .dark .is-design-list>li img {\n opacity: 0.93;\n }\n .dark .is-more-categories {\n background: #333;\n }\n .dark .is-more-categories a {\n background: #333;\n color: #fff;\n }\n .dark .is-more-categories a:hover,\n .dark .is-more-categories a:focus {\n background: #4c4c4c;\n }\n .dark .is-more-categories a.active {\n background: #4c4c4c;\n }\n */\n\n \n .dark .is-design-list>li {\n outline: transparent 1px solid;\n }\n\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 svg {\n fill: ${this.builder.styleSnippetColor};\n }\n\n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 68px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 30px;\n box-sizing: border-box;\n overflow: auto;\n list-style: none;\n margin: 0;\n }\n \n .is-design-list>li {\n width: 250px;\n min-height:120px;\n position:relative;\n background: #fff;\n // background: ${this.builder.styleToolBackground};\n overflow: hidden;\n margin: 32px 40px 0 0;\n cursor: pointer;\n display: inline-block;\n outline: #ececec 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n }\n\n .is-design-list>li:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n .is-design-list>li 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-design-list>li:hover img {\n // opacity: 0.95;\n // }\n \n // .is-design-list>li:hover {\n // background: #999;\n // }\n .is-overlay {\n position:absolute;left:0px;top:0px;width:100%;height:100%;\n }\n .is-design-list>li .is-overlay:after {\n background: rgba(0, 0, 0, 0.02);\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>li:hover .is-overlay:after,\n .is-design-list>li:focus .is-overlay:after {\n opacity: 0.9;\n }\n .dark .is-design-list>li .is-overlay:after {\n background: rgb(78 78 78 / 13%);\n }\n \n .is-category-list {\n position: relative;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 80px;\n box-sizing: border-box;\n z-index: 1;\n }\n \n .is-category-list>div {\n white-space: nowrap;\n padding: 0 30px;\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 background: ${this.builder.styleSnippetTabsBackground};\n // box-shadow: 0 5px 8px rgb(0 0 0 / 4%);\n }\n \n .is-category-list a {\n display: inline-block;\n padding: 10px 20px;\n // background: #fefefe;\n // color: #000;\n background: ${this.builder.styleSnippetTabItemBackground};\n color: ${this.builder.styleSnippetTabItemColor};\n border-radius: 50px;\n \n margin: 0 12px 0 0;\n text-decoration: none;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);\n transition: box-shadow ease 0.3s;\n }\n \n .is-category-list a:hover {\n /*background: #fafafa;*/\n background: ${this.builder.styleSnippetTabItemBackgroundHover};\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n }\n \n .is-category-list a.active {\n // background: #f5f5f5;\n background: ${this.builder.styleSnippetTabItemBackgroundActive};\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n box-shadow: none;\n cursor: default;\n }\n\n .is-category-list a:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n \n .is-more-categories {\n display: none;\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 background: ${this.builder.styleSnippetMoreItemBackground};\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 background: ${this.builder.styleSnippetMoreItemBackground};\n text-decoration: none;\n // color: #000;\n color: ${this.builder.styleSnippetMoreItemColor};\n line-height: 1.6;\n outline: none;\n }\n \n .is-more-categories a:hover,\n .is-more-categories a:focus {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundHover};\n }\n \n .is-more-categories a.active {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundActive};\n }\n \n .is-more-categories.active {\n display: block;\n }\n \n /* First Loading */\n /* .is-category-list {\n display: none;\n }\n \n .is-design-list {\n display: none;\n }\n \n .pace {\n -webkit-pointer-events: none;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n \n .pace-inactive {\n display: none;\n }\n \n .pace .pace-progress {\n background: #000000;\n position: fixed;\n z-index: 2000;\n top: 0;\n right: 100%;\n width: 100%;\n height: 2px;\n } */\n \n .is-more-categories>a:nth-child(0) {\n display: none\n }\n \n .is-more-categories>a:nth-child(1) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: none\n }\n \n @media all and (max-width: 1212px) {\n .is-categories>a:nth-child(7):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: block\n }\n }\n \n @media all and (max-width: 1070px) {\n .is-categories>a:nth-child(6):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: block\n }\n }\n \n @media all and (max-width: 940px) {\n .is-categories>a:nth-child(5):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: block\n }\n }\n \n @media all and (max-width: 700px) {\n .is-categories>a:nth-child(4):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: block\n }\n }\n \n @media all and (max-width: 555px) {\n .is-categories>a:nth-child(3):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: block\n }\n }\n \n @media all and (max-width: 415px) {\n .is-categories>a:nth-child(2):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: block\n }\n }\n \n @media all and (max-width: 640px) {\n .is-more-categories a {\n width: 150px;\n padding: 10px 5px 10px 15px;\n font-size: 10px;\n }\n \n .is-more-categories {\n left: 0 !important;\n width: 100% !important;\n }\n }\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 }\n </style>\n </head>\n \n <body${this.builder.styleDark?' class="dark"':""}${this.builder.styleColored?' class="colored"':""}${this.builder.styleColoredDark?' class="colored-dark"':""}${this.builder.styleLight?' class="light"':""}>\n\n <svg style="display:none">\n <defs>\n <symbol viewBox="0 0 512 512" id="ion-ios-close-empty">\n <path d="M340.2 160l-84.4 84.3-84-83.9-11.8 11.8 84 83.8-84 83.9 11.8 11.7 84-83.8 84.4 84.2 11.8-11.7-84.4-84.3 84.4-84.2z"></path>\n </symbol>\n </defs>\n </svg>\n \n <button class="is-pop-close" tabindex="-1">\n <svg class="is-icon-flex" style="width:30px;height:30px;">\n <use xlink:href="#ion-ios-close-empty"></use>\n </svg>\n </button>\n \n <div class="is-category-list">\n <div class="is-categories" style="position:fixed;top:0;left:0;right:0;height:68px;padding-top:17px;box-sizing:border-box;">\n </div>\n </div>\n\n <div class="is-more-categories" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </div>\n \n <ul class="is-design-list" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </ul>\n \n <script${this.builder.nonce?` nonce="${this.builder.nonce}"`:""}>\n \n var snippetPath = '${i}';\n var snippetCategories = ${o};\n var defaultSnippetCategory = ${n};\n\n ${void 0!==this.builder.slider&&null!==this.builder.slider?`\n var slider='${this.builder.slider}';`:"var slider=null;"};\n \n var numOfCat = snippetCategories.length;\n if (numOfCat <= 7) {\n document.querySelector('.is-more-categories').style.width = '200px';\n }\n \n var categorytabs = document.querySelector('.is-categories');\n categorytabs.innerHTML = '';\n let html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n if (i < 7) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n }\n html_catselect += '<a href="" class="more-snippets">' + parent._cb.out('More') + '</a>';\n categorytabs.innerHTML = html_catselect;\n \n var categorymore = document.querySelector('.is-more-categories');\n html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n categorymore.innerHTML = html_catselect;\n \n // Show/hide "More" button\n if (numOfCat <= 7) {\n var bHasMore = false;\n \n const childNodes = categorymore.childNodes;\n let i = childNodes.length;\n while (i--) {\n if(childNodes[i].style.display === 'block') {\n bHasMore = true;\n }\n }\n var more = document.querySelector('.more-snippets');\n if (!bHasMore) more.style.display = 'none';\n else more.style.display = '';\n }\n \n var elms = categorytabs.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n elms = categorymore.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n\n\n document.addEventListener('keydown', function(e){\n if(e.keyCode === 27) { // escape key\n const moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n moreCategories.classList.remove('active');\n const activeTab = categorylist.querySelector('.more-snippets');\n activeTab.classList.remove('active');\n activeTab.focus();\n } else {\n const modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n }\n }\n });\n\n\n let categorylist = document.querySelector('.is-category-list');\n let designlist = document.querySelector('.is-design-list');\n\n const select = (elm) => {\n\n if(elm.classList.contains('active')) {\n return false;\n }\n \n var cat = elm.getAttribute('data-cat');\n if (cat) if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n\n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb; \n \n if (snippets[i].category === cat) {\n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n\n newitem.addEventListener('keydown', (e)=>{\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n \n } \n }\n \n if (cat) {\n // Hide all, show items from selected category\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); \n var categorymore_items = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(categorymore_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var items = designlist.querySelectorAll('li');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, 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 = ''; // TODO: hide & show snippets => animated\n elm.classList.add('active');\n }\n }\n });\n \n } else {\n // show dropdown\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n var _width = moreCategories.offsetWidth;\n more.classList.add('active');\n moreCategories.classList.add('active');\n var top = more.getBoundingClientRect().top;\n var left = more.getBoundingClientRect().left;\n top = top + 50;\n moreCategories.style.top = top + 'px';\n moreCategories.style.left = left + 'px';\n }\n elm.classList.add('active');\n \n };\n\n let tabs = document.querySelectorAll('.is-categories a');\n Array.prototype.forEach.call(tabs, (tab) => {\n \n tab.addEventListener('keydown', (e)=>{\n e.preventDefault();\n \n if ((e.which === 39 && e.target.nextElementSibling)) { // arrow right key pressed\n e.target.nextElementSibling.focus();\n } else if ((e.which === 37 && e.target.previousElementSibling)) { // arrow left key pressed\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n select(e.target);\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n let moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\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 return;\n\n }\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 } else if(e.which === 40 && e.target.classList.contains('more-snippets')) { // down\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\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 } \n\n \n });\n \n tab.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\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 select(e.target);\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 \n });\n \n item.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\n });\n\n\n \n var snippets = data_basic.snippets; //DATA\n\n if (slider !== null){\n if(slider==='slick') {\n //remove glide\n const predicate = (item) => (item.type!=='glide');\n snippets = snippets.filter(predicate);\n } else if(slider==='glide') {\n //remove slick\n const predicate = (item) => (item.type!=='slick');\n snippets = snippets.filter(predicate);\n } else if(slider==='all') {\n // Do Nothing\n } else {\n // remove all slider (if incorrect settings)\n const predicate = (item) => (item.type!=='glide' && item.type!=='slick');\n snippets = snippets.filter(predicate);\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n } else {\n // Backward compatible OR if slider param not set\n\n // Hide slider snippet if slick is not included\n var bHideSliderSnippet = true;\n if(parent._cb.win.jQuery) {\n if(parent._cb.win.jQuery.fn.slick) {\n bHideSliderSnippet = false;\n }\n }\n if(bHideSliderSnippet){\n const result = snippets.filter((item)=>{\n return item.type !== 'slick';\n });\n snippets = [...result];\n } \n\n if(!(parent._cb.win.Glide)){\n const result = snippets.filter((item)=>{\n return !(item.glide || item.type === 'glide');\n });\n snippets = [...result];\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n }\n \n\n for (let i = 0; i <snippets.length; i++) {\n \n snippets[i].id = i+1;\n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === defaultSnippetCategory + '') {\n designlist.insertAdjacentHTML('beforeend', '<li class="active" role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n \n newitem.addEventListener('keydown', (e)=>{\n\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n\n }\n \n\n\n\n /*\n elms = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(elms, function(elm){\n \n elm.addEventListener('click', function(e){\n \n var cat = elm.getAttribute('data-cat');\n if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n \n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === cat) {\n \n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n }\n \n } \n }\n \n // Hide all, show items from selected category\n Array.prototype.forEach.call(elms, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); // hide popup\n //var categorymore_items = categorymore.querySelectorAll('a');\n \n var categorylist = document.querySelector('.is-category-list');\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var more = document.querySelector('.more-snippets');\n more.className = more.className.replace('active', '');\n \n var items = designlist.querySelectorAll('div');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, 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 elm.classList.add('active');\n \n e.preventDefault();\n });\n \n });\n */\n \n var close = document.querySelector('.is-pop-close');\n close.addEventListener('click', function(e){\n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n });\n \n // Add document Click event\n document.addEventListener('click', function(e){\n e = e || window.event;\n var target = e.target || e.srcElement; \n \n if(parentsHasClass(target, 'more-snippets')) return;\n if(hasClass(target, 'more-snippets')) return;\n \n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n parent.document.addEventListener('click', function(e){\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n function addSnippet(snippetid) {\n \n // TODO: var framework = parent._cb.opts.framework;\n var snippetPathReplace = parent._cb.opts.snippetPathReplace;\n var emailMode = parent._cb.opts.emailMode;\n \n // \n for (let i = 0; i <snippets.length; i++) {\n if(snippets[i].id + ''=== snippetid) {\n \n var html = snippets[i].html;\n var noedit = snippets[i].noedit;\n break;\n }\n }\n \n var bSnippet;\n if (html.indexOf('"row') === -1) {\n bSnippet = true; // Just snippet (without row/column grid)\n } else {\n bSnippet = false; // Snippet is wrapped in row/colum\n }\n if (emailMode) bSnippet = false;\n\n if(bSnippet) {\n var quickadd = parent._cb.builderStuff.querySelector('.quickadd');\n var mode = quickadd.getAttribute('data-mode');\n if(!mode) {\n // in case of using viewSnippets() to open the dialog (mode=null) => change to non snippet.\n html = '<div class="row">' +\n '<div class="column full">' +\n html +\n '</div>' +\n '</div>';\n bSnippet=false;\n }\n }\n \n // Convert snippet into your defined 12 columns grid \n var rowClass = parent._cb.opts.row; //row\n var colClass = parent._cb.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']\n if(rowClass!=='' && colClass.length===12){\n\n //html = html.replace(new RegExp('row clearfix', 'g'), rowClass);\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 html = html.replace(/{id}/g, makeid()); // Replace {id} with auto generated id (for custom code snippet)\n \n if(parent._cb.opts.onAdd){\n html = parent._cb.opts.onAdd(html);\n }\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 /* for encoded replace, change / to %2F */\n var slash = new RegExp('/', 'g');\n var snippetPathReplace_0 = snippetPathReplace[0].replace(slash, '%2F');\n var snippetPathReplace_1 = snippetPathReplace[1].replace(slash, '%2F');\n regex = new RegExp(snippetPathReplace_0, 'g');\n html = html.replace(regex, snippetPathReplace_1);\n }\n }\n \n parent._cb.addSnippet(html, bSnippet, noedit);\n \n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n \n }\n \n function hasClass(element, classname) {\n if(!element) return false;\n return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);\n }\n \n function removeClass(element, classname) {\n if(!element) return;\n if(element.classList.length>0) {\n element.className = element.className.replace(classname, '');\n }\n }\n \n function parentsHasClass(element, classname) {\n while (element) {\n if(element.tagName === 'BODY' || element.tagName === 'HTML') return false;\n if(!element.classList) return false;\n if (element.classList.contains(classname)) {\n return true;\n }\n element = element.parentNode;\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 <\/script>\n \n </textarea>\n </body>\n \n </html>\n `}}const Li=t=>{const e=t.util,i=t.builderStuff,o=t.dom;let n=i.querySelector(".quickadd");if(!n){const s=`<div class="is-pop quickadd arrow-right" style="z-index:10003;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-pop-close" style="display:none;z-index:1;width:40px;height:40px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;color:#777;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:40px;height:40px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div>\n <div class="is-pop-tabs">\n <div class="is-pop-tab-item" data-value="left">${e.out("Add to Left")}</div>\n <div class="is-pop-tab-item active" data-value="right">${e.out("Add to Right")}</div>\n </div>\n <div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">\n <button title="${e.out("Paragraph")}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${e.out("Paragraph")}</button>\n <button title="${e.out("Headline")}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${e.out("Headline")}</button>\n <button title="${e.out("Image")}" class="add-image"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex ion-image" style="width:14px;height:14px;"><use xlink:href="#ion-image"></use></svg></span>${e.out("Image")}</button>\n <button title="${e.out("List")}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${e.out("List")}</button>\n <button title="${e.out("Heading 1")}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${e.out("Heading 1")}</button>\n <button title="${e.out("Heading 2")}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${e.out("Heading 2")}</button>\n <button title="${e.out("Heading 3")}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${e.out("Heading 3")}</button>\n <button title="${e.out("Heading 4")}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${e.out("Heading 4")}</button>\n <button title="${e.out("Quote")}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${e.out("Quote")}</button>\n <button title="${e.out("Preformatted")}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${e.out("Preformatted")}</button>\n ${t.opts.emailMode?"":`<button title="${e.out("Button")}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Button")}</button>`}\n ${t.opts.emailMode?"":`<button title="${e.out("Two Button")}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Two Button")}</button>`}\n <button title="${e.out("Youtube")}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${e.out("Youtube")}</button>\n <button title="${e.out("Video")}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${e.out("Video")}</button>\n <button style="display:none" title="${e.out("Audio")}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${e.out("Audio")}</button>\n <button title="${e.out("Map")}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${e.out("Map")}</button>\n <button title="${e.out("Table")}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${e.out("Table")}</button>\n <button title="${e.out("Icon")}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${e.out("Icon")}</button>\n <button title="${e.out("Social Links")}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${e.out("Social Links")}</button>\n <button title="${e.out("HTML/JS")}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${e.out("HTML/JS")}</button>\n <button title="${e.out("Spacer")}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${e.out("Spacer")}</button>\n <button style="display:none" title="${e.out("Line")}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${e.out("Line")}</button>\n <div class="pop-separator"></div>\n <button title="${e.out("More...")}" class="add-more" style="flex-direction:initial;">${e.out("More...")}</button>\n </div>\n </div>\n \n <div class="is-modal snippets" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-content" style="max-width:1500px;width:80vw;height:80vh;padding:0;">\n <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>\n </div>\n </div>\n `;o.appendHtml(i,s),n=i.querySelector(".quickadd");let l=n.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(l,(t=>{o.addEventListener(t,"click",(t=>{let e=n.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(e,(t=>{o.removeClass(t,"active")})),o.addClass(t.target,"active"),"left"===n.querySelector(".active").getAttribute("data-value")?n.setAttribute("data-mode","cell-left"):n.setAttribute("data-mode","cell-right")}))}));let r=n.querySelector(".add-paragraph");o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>",t)})),r=n.querySelector(".add-headline"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="display">\n <h1>Headline Goes Here</h1>\n <p>Lorem Ipsum is simply dummy text</p>\n </div>',t)})),r=n.querySelector(".add-image"),o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o=`<img src="${t.opts.snippetPath}example.png" alt="" />`;t.opts.snippetSampleImage&&(o=`<img src="${t.opts.snippetSampleImage}" alt="" />`),e.addContent(o,i)})),r=n.querySelector(".add-heading1"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h1>Heading 1 here</h1>",t)})),r=n.querySelector(".add-heading2"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h2>Heading 2 here</h2>",t)})),r=n.querySelector(".add-heading3"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h3>Heading 3 here</h3>",t)})),r=n.querySelector(".add-heading4"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h4>Heading 4 here</h4>",t)})),r=n.querySelector(".add-preformatted"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<pre>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</pre>",t)})),r=n.querySelector(".add-list"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<ul style="list-style: initial;padding-left: 20px;">\n <li>Lorem Ipsum is simply dummy text</li>\n <li>Lorem Ipsum is simply dummy text</li>\n </ul>',t)})),r=n.querySelector(".add-quote"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<blockquote>Lorem Ipsum is simply dummy text</blockquote>",t)})),r=n.querySelector(".add-button"),r&&o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o='<div class="flex">\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n </div>';t.opts.emailMode&&(o='<div class="flex"><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>'),e.addContent(o,i)})),r=n.querySelector(".add-twobutton"),r&&o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o='<div class="flex">\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>\n </div>';t.opts.emailMode&&(o='<div class="flex">\n <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;\n <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>\n </div>'),e.addContent(o,i)})),r=n.querySelector(".add-spacer"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="spacer height-80"></div>',t)})),r=n.querySelector(".add-line"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<hr>",t)})),r=n.querySelector(".add-code"),o.addEventListener(r,"click",(()=>{let i='<div class="row"><div class="column full" data-noedit data-html="'+encodeURIComponent("<h1 id=\"{id}\">Lorem ipsum</h1><p>This is a code block. You can edit this block using the source dialog.</p><script>var docReady = function (fn) {var stateCheck = setInterval(function () {if (document.readyState !== \"complete\") return;clearInterval(stateCheck);try{fn()}catch(e){}}, 1);};docReady(function() {document.querySelector('#{id}').innerHTML ='<b>Hello World..!</b>';});<\/script>")+'"></div></div>',o=t.opts.snippetPathReplace,n=t.opts.row,s=t.opts.cols;if(""!==n&&12===s.length&&(i=i.replace(new RegExp("row clearfix","g"),"row"),i=i.replace(new RegExp('"row',"g"),'"'+n),i=i.replace(new RegExp("column full","g"),s[11]),i=i.replace(new RegExp("column half","g"),s[5]),i=i.replace(new RegExp("column third","g"),s[3]),i=i.replace(new RegExp("column fourth","g"),s[2]),i=i.replace(new RegExp("column fifth","g"),s[1]),i=i.replace(new RegExp("column sixth","g"),s[1]),i=i.replace(new RegExp("column two-third","g"),s[7]),i=i.replace(new RegExp("column two-fourth","g"),s[8]),i=i.replace(new RegExp("column two-fifth","g"),s[9]),i=i.replace(new RegExp("column two-sixth","g"),s[9])),i=i.replace(/{id}/g,e.makeId()),t.opts.onAdd&&(i=t.opts.onAdd(i)),o.length>0&&""!==o[0]){let t=new RegExp(o[0],"g");i=i.replace(t,o[1])}t.addSnippet(i,!1,!0)})),r=n.querySelector(".add-table"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<table class="default" style="border-collapse:collapse;width:100%;">\n <thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </table>',t)})),r=n.querySelector(".add-icon"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div style="text-align: center;">\n <i class="icon ion-android-alarm-clock size-80"></i>\n </div>',t)})),r=n.querySelector(".add-social"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="is-social" style="text-align: center;">\n <a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>\n <a href="https://www.facebook.com/"><i class="icon ion-social-facebook" style="margin-right: 1em"></i></a>\n <a href="mailto:you@example.com"><i class="icon ion-android-drafts"></i></a>\n </div>',t)})),r=n.querySelector(".add-map"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&amp;hl=en&amp;sll=-7.981898,112.626504&amp;sspn=0.009084,0.016512&amp;oq=melbourne&amp;hnear=Melbourne+Victoria,+Australia&amp;t=m&amp;z=10&amp;output=embed"></iframe>\n </div>',t)})),r=n.querySelector(".add-youtube"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="560" height="315" src="https://www.youtube.com/embed/P5yHEKqx86U?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>\n </div>',t)})),r=n.querySelector(".add-video"),o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetPath}example.mp4" type="video/mp4"></video>`;t.opts.snippetSampleVideo&&(o=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetSampleVideo}" type="video/mp4"></video>`),e.addContent(o,i)})),r=n.querySelector(".add-audio"),o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetPath}example.mp3" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`;t.opts.snippetSampleAudio&&(o=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetSampleAudio}" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`),e.addContent(o,i)}));const a=new Ei(t);r=n.querySelector(".add-more"),o.addEventListener(r,"click",(()=>{let t=i.querySelector(".snippets");e.showModal(t,!1,null,!1);const o=t.querySelector("iframe");""===o.contentWindow.document.body.innerHTML&&(o.srcdoc=a.getSnippetsHtml()),e.hidePop(n)}))}return n};class Ai{constructor(t){this.builder=t;const e=this.builder.util,i=this.builder.builderStuff;this.util=e,this.builderStuff=i;const o=this.builder.dom;this.dom=o,this.rowTool=new qi(t)}moveColumnPrevious(){const t=this.util.cellSelected();t&&t.previousElementSibling&&(this.builder.uo.saveForUndo(),t.parentElement.insertBefore(t,t.previousElementSibling),this.builder.opts.onChange())}moveColumnNext(){let t=this.util;const e=t.cellSelected();if(!e)return;const i=t.cellNext(e);i&&(this.builder.uo.saveForUndo(),e.parentElement.insertBefore(i,e),this.builder.opts.onChange())}moveColumnUp(){let t=this.builder,e=this.util;const i=e.cellSelected();if(!i)return;let o=i.parentNode,n=3;if(o.querySelector(".is-row-overlay")&&(n=4),o.childElementCount-n==1){if(!o.previousElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),o.previousElementSibling.childElementCount>=e+n||o.previousElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),o.parentNode.insertBefore(o,o.previousElementSibling),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=o.previousElementSibling.querySelector(".is-row-tool");o.previousElementSibling.removeChild(e),e=o.previousElementSibling.querySelector(".is-rowadd-tool"),o.previousElementSibling.removeChild(e),e=o.previousElementSibling.querySelector(".is-col-tool"),o.previousElementSibling.removeChild(e),o.previousElementSibling.appendChild(i),o.parentNode.removeChild(o);let n=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(n),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var s=o.cloneNode(!0);s.innerHTML="",s.appendChild(i),o.parentNode.insertBefore(s,o);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}o=i.parentNode,e.fixLayout(o),o.nextElementSibling&&e.fixLayout(o.nextElementSibling)}moveColumnDown(){let t=this.builder,e=this.util,i=this.dom;const o=e.cellSelected();if(!o)return;let n=o.parentNode,s=3;if(n.querySelector(".is-row-overlay")&&(s=4),n.childElementCount-s==1){if(!n.nextElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),n.nextElementSibling.childElementCount>=e+s||n.nextElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),n.parentNode.insertBefore(n.nextElementSibling,n),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=n.nextElementSibling.querySelector(".is-row-tool");n.nextElementSibling.removeChild(e),e=n.nextElementSibling.querySelector(".is-rowadd-tool"),n.nextElementSibling.removeChild(e),e=n.nextElementSibling.querySelector(".is-col-tool"),n.nextElementSibling.removeChild(e),n.nextElementSibling.appendChild(o),n.parentNode.removeChild(n);let i=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(i),setTimeout((()=>{o.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var l=n.cloneNode(!0);l.innerHTML="",l.appendChild(o),i.moveAfter(l,n);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{o.click()}),30),this.builder.opts.onChange()}n=o.parentNode,e.fixLayout(n),n.previousElementSibling&&e.fixLayout(n.previousElementSibling)}duplicateColumn(){let t=this.builder,e=this.util,i=this.dom;const o=e.cellSelected();if(!o)return;this.builder.uo.saveForUndo();var n=o.cloneNode(!0);i.removeClass(n,"cell-active"),n.removeAttribute("data-click"),this.builder.opts.enableDragResize&&(o.style.width="",o.style.flex="");let s=o.parentNode,l=3;s.querySelector(".is-row-overlay")&&(l=4);let r=4;if(this.builder.maxColumns&&(r=this.builder.maxColumns),s.childElementCount>=r+l)return alert(e.out("You have reached the maximum number of columns")),!1;s.insertBefore(n,o),e.fixLayout(s);let a=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(a),setTimeout((()=>{o.click()}),30),this.builder.opts.onChange()}removeColumn(){let t=this.util;const e=t.cellSelected();if(!e)return;let i=e.parentNode,o=3;i.querySelector(".is-row-overlay")&&(o=4),t.confirm(t.out("Are you sure you want to delete this block?"),(n=>{n&&(this.builder.uo.saveForUndo(),i.childElementCount-o==1?(i.parentNode.removeChild(i),t.checkEmpty()):(i.removeChild(e),t.fixLayout(i)),t.clearActiveCell(),this.builder.opts.onChange())}))}removeColClasses(t){t.classList.remove("full"),t.classList.remove("two-third"),t.classList.remove("two-fourth"),t.classList.remove("two-fifth"),t.classList.remove("two-sixth"),t.classList.remove("half"),t.classList.remove("third"),t.classList.remove("fourth"),t.classList.remove("fifth"),t.classList.remove("sixth"),t.classList.remove("seventh"),t.classList.remove("eighth"),t.classList.remove("ninth"),t.classList.remove("tenth"),t.classList.remove("eleventh"),t.classList.remove("twelfth")}getAllColumns(t){let e=[],i=this.dom;i.elementChildren(t.parentNode).forEach((o=>{i.hasClass(o,"is-row-tool")||i.hasClass(o,"is-col-tool")||i.hasClass(o,"is-rowadd-tool")||i.hasClass(o,"is-row-overlay")||t!==o&&e.push(o)}));return[t].concat(e)}getCellWidth(t){return t.classList.contains("two-third")?66.666:t.classList.contains("two-fourth")?75:t.classList.contains("two-fifth")?80:t.classList.contains("two-sixth")?83.333:t.classList.contains("half")?50:t.classList.contains("third")?33.333:t.classList.contains("fourth")?25:t.classList.contains("fifth")?20:t.classList.contains("sixth")?16.666:t.classList.contains("seventh")?14.2857:t.classList.contains("eighth")?12.5:t.classList.contains("ninth")?11.111:t.classList.contains("tenth")?10:t.classList.contains("eleventh")?9.09:!!t.classList.contains("twelfth")&&8.333}resizeColumn(t,e,i){let o=this.getCellWidth(t);if(!o){o=parseFloat(window.getComputedStyle(t).getPropertyValue("width"))/parseFloat(window.getComputedStyle(t.parentNode).getPropertyValue("width"))*100}if(e){if(3===i){if(o>=28&&o<=30)return"33.333%";if(o>30&&o<38)return"40%";if(o>=68&&o<=90)return"75%"}if(4===i&&o>=48&&o<=90)return"60%";if(5===i&&o>=38&&o<=90)return"50%";if(6===i){if(o>=10&&o<13)return"16.666%";if(o>=28&&o<=90)return"40%"}if(7===i&&o>=23&&o<=90)return"30%";if(8===i&&o>=13&&o<=90)return"20%";if(o>=78&&o<=90)return"90%";if(o>=73&&o<78)return"80%";if(o>=68&&o<73)return"75%";if(o>=58&&o<68)return"70%";if(o>=48&&o<58)return"60%";if(o>=38&&o<48)return"50%";if(o>=28&&o<38)return"40%";if(o>=23&&o<28)return"30%";if(o>=18&&o<23)return"25%";if(o>=13&&o<18)return"20%";if(o>=10&&o<13)return"15%"}else{if(3===i){if(o>35&&o<=43)return"33.333%";if(o>33&&o<=35)return"30%"}if(6===i&&o>18&&o<=23)return"16.666%";if(o>93&&o<=100)return"90%";if(o>83&&o<=93)return"80%";if(o>78&&o<=83)return"75%";if(o>73&&o<=78)return"70%";if(o>63&&o<=73)return"60%";if(o>53&&o<=63)return"50%";if(o>43&&o<=53)return"40%";if(o>33&&o<=43)return"30%";if(o>28&&o<=33)return"25%";if(o>23&&o<=28)return"20%";if(o>18&&o<=23)return"15%";if(o>=10&&o<=18)return"10%"}return!1}increaseColumn(){let t,e,i=this.builder,o=this.util,n=this.dom,s=o.cellSelected();if(!s)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(s);if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(s,!0,t.length);if(e){s.style.width=e,s.style.flex="0 0 auto",this.removeColClasses(s);for(let i=1;i<t.length;i++){let o=t[i];o!==s&&(o.getAttribute("data-html")?2===t.length&&(o.style.width=100-parseFloat(e)+"%",o.style.flex="0 0 auto"):(o.style.width="",o.style.flex=""),this.removeColClasses(o))}}this.builder.opts.onChange()}return}let l=this.getAllColumns(s);l[1]&&(t=l[1]),l[2]&&(e=l[2]);const r=i.opts.row;let a=i.opts.cols;const d=i.opts.colsizes;if(""!==r&&a.length>0&&d.length>0){if(e)for(let i=0;i<d.length;i++){let o=d[i];for(let i=0;i<o.length;i++)if(3===o[i].length&&n.hasClass(s,o[i][0])&&n.hasClass(t,o[i][1])&&n.hasClass(e,o[i][2])&&i+1!==o.length)return this.builder.uo.saveForUndo(),n.removeClass(s,o[i][0]),n.removeClass(t,o[i][1]),n.removeClass(e,o[i][2]),n.addClass(s,o[i+1][0]),n.addClass(t,o[i+1][1]),n.addClass(e,o[i+1][2]),void this.builder.opts.onChange()}for(let e=0;e<d.length;e++){let i=d[e];for(let e=0;e<i.length;e++)if(2===i[e].length&&n.hasClass(s,i[e][0])&&n.hasClass(t,i[e][1])&&e+1!==i.length)return this.builder.uo.saveForUndo(),n.removeClass(s,i[e][0]),n.removeClass(t,i[e][1]),n.addClass(s,i[e+1][0]),n.addClass(t,i[e+1][1]),void this.builder.opts.onChange()}}else if(""!==r&&a.length>0&&(-1!==s.className.indexOf("col-md-")||(-1!==s.className.indexOf("col-sm-")?a=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==s.className.indexOf("col-xs-")?a=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==s.className.indexOf("col-lg-")?a=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==s.className.indexOf("col-xl-")?a=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==s.className.indexOf("col-xxl-")&&(a=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!n.hasClass(s,a[11]))){if(n.hasClass(s,a[11]))return;if(n.hasClass(t,a[0]))return;this.builder.uo.saveForUndo(),n.hasClass(s,a[10])?(n.removeClass(s,a[10]),n.addClass(s,a[11])):n.hasClass(s,a[9])?(n.removeClass(s,a[9]),n.addClass(s,a[10])):n.hasClass(s,a[8])?(n.removeClass(s,a[8]),n.addClass(s,a[9])):n.hasClass(s,a[7])?(n.removeClass(s,a[7]),n.addClass(s,a[8])):n.hasClass(s,a[6])?(n.removeClass(s,a[6]),n.addClass(s,a[7])):n.hasClass(s,a[5])?(n.removeClass(s,a[5]),n.addClass(s,a[6])):n.hasClass(s,a[4])?(n.removeClass(s,a[4]),n.addClass(s,a[5])):n.hasClass(s,a[3])?(n.removeClass(s,a[3]),n.addClass(s,a[4])):n.hasClass(s,a[2])?(n.removeClass(s,a[2]),n.addClass(s,a[3])):n.hasClass(s,a[1])?(n.removeClass(s,a[1]),n.addClass(s,a[2])):n.hasClass(s,a[0])&&(n.removeClass(s,a[0]),n.addClass(s,a[1])),n.hasClass(t,a[1])?(n.removeClass(t,a[1]),n.addClass(t,a[0])):n.hasClass(t,a[2])?(n.removeClass(t,a[2]),n.addClass(t,a[1])):n.hasClass(t,a[3])?(n.removeClass(t,a[3]),n.addClass(t,a[2])):n.hasClass(t,a[4])?(n.removeClass(t,a[4]),n.addClass(t,a[3])):n.hasClass(t,a[5])?(n.removeClass(t,a[5]),n.addClass(t,a[4])):n.hasClass(t,a[6])?(n.removeClass(t,a[6]),n.addClass(t,a[5])):n.hasClass(t,a[7])?(n.removeClass(t,a[7]),n.addClass(t,a[6])):n.hasClass(t,a[8])?(n.removeClass(t,a[8]),n.addClass(t,a[7])):n.hasClass(t,a[9])?(n.removeClass(t,a[9]),n.addClass(t,a[8])):n.hasClass(t,a[10])?(n.removeClass(t,a[10]),n.addClass(t,a[9])):n.hasClass(t,a[11])&&(n.removeClass(t,a[11]),n.addClass(t,a[10])),this.builder.opts.onChange()}}decreaseColumn(){let t=this.builder,e=this.util,i=this.dom;const o=e.cellSelected();if(!o)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(o);if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(o,!1,t.length);if(e){o.style.width=e,o.style.flex="0 0 auto",this.removeColClasses(o);for(let i=1;i<t.length;i++){let n=t[i];n!==o&&(n.getAttribute("data-html")?2===t.length&&(n.style.width=100-parseFloat(e)+"%",n.style.flex="0 0 auto"):(n.style.width="",n.style.flex=""),this.removeColClasses(n))}}this.builder.opts.onChange()}return}let n,s,l=this.getAllColumns(o);l[1]&&(n=l[1]),l[2]&&(s=l[2]);const r=t.opts.row;let a=t.opts.cols;const d=t.opts.colsizes;if(""!==r&&a.length>0&&d.length>0){if(s)for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(3===e[t].length&&i.hasClass(o,e[t][0])&&i.hasClass(n,e[t][1])&&i.hasClass(s,e[t][2])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(o,e[t][0]),i.removeClass(n,e[t][1]),i.removeClass(s,e[t][2]),i.addClass(o,e[t-1][0]),i.addClass(n,e[t-1][1]),i.addClass(s,e[t-1][2]),void this.builder.opts.onChange()}for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(2===e[t].length&&i.hasClass(o,e[t][0])&&i.hasClass(n,e[t][1])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(o,e[t][0]),i.removeClass(n,e[t][1]),i.addClass(o,e[t-1][0]),i.addClass(n,e[t-1][1]),void this.builder.opts.onChange()}}else if(""!==r&&a.length>0&&(-1!==o.className.indexOf("col-md-")||(-1!==o.className.indexOf("col-sm-")?a=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==o.className.indexOf("col-xs-")?a=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==o.className.indexOf("col-lg-")?a=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==o.className.indexOf("col-xl-")?a=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==o.className.indexOf("col-xxl-")&&(a=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!i.hasClass(o,a[11]))){if(i.hasClass(o,a[0]))return;if(i.hasClass(n,a[11]))return;this.builder.uo.saveForUndo(),i.hasClass(o,a[11])?(i.removeClass(o,a[11]),i.addClass(o,a[10])):i.hasClass(o,a[10])?(i.removeClass(o,a[10]),i.addClass(o,a[9])):i.hasClass(o,a[9])?(i.removeClass(o,a[9]),i.addClass(o,a[8])):i.hasClass(o,a[8])?(i.removeClass(o,a[8]),i.addClass(o,a[7])):i.hasClass(o,a[7])?(i.removeClass(o,a[7]),i.addClass(o,a[6])):i.hasClass(o,a[6])?(i.removeClass(o,a[6]),i.addClass(o,a[5])):i.hasClass(o,a[5])?(i.removeClass(o,a[5]),i.addClass(o,a[4])):i.hasClass(o,a[4])?(i.removeClass(o,a[4]),i.addClass(o,a[3])):i.hasClass(o,a[3])?(i.removeClass(o,a[3]),i.addClass(o,a[2])):i.hasClass(o,a[2])?(i.removeClass(o,a[2]),i.addClass(o,a[1])):i.hasClass(o,a[1])&&(i.removeClass(o,a[1]),i.addClass(o,a[0])),i.hasClass(n,a[0])?(i.removeClass(n,a[0]),i.addClass(n,a[1])):i.hasClass(n,a[1])?(i.removeClass(n,a[1]),i.addClass(n,a[2])):i.hasClass(n,a[2])?(i.removeClass(n,a[2]),i.addClass(n,a[3])):i.hasClass(n,a[3])?(i.removeClass(n,a[3]),i.addClass(n,a[4])):i.hasClass(n,a[4])?(i.removeClass(n,a[4]),i.addClass(n,a[5])):i.hasClass(n,a[5])?(i.removeClass(n,a[5]),i.addClass(n,a[6])):i.hasClass(n,a[6])?(i.removeClass(n,a[6]),i.addClass(n,a[7])):i.hasClass(n,a[7])?(i.removeClass(n,a[7]),i.addClass(n,a[8])):i.hasClass(n,a[8])?(i.removeClass(n,a[8]),i.addClass(n,a[9])):i.hasClass(n,a[9])?(i.removeClass(n,a[9]),i.addClass(n,a[10])):i.hasClass(n,a[10])&&(i.removeClass(n,a[10]),i.addClass(n,a[11])),this.builder.opts.onChange()}}removeRow(){let t,e=this.util,i=this.dom,o=e.cellSelected();t=o?o.parentNode:e.rowSelected(),t&&(i.removeClass(t,"row-outline"),e.confirm(e.out("Are you sure you want to delete this block?"),(t=>{let i,o=e.cellSelected();i=o?o.parentNode:e.rowSelected(),i&&t&&(this.builder.uo.saveForUndo(),i.parentNode.removeChild(i),e.checkEmpty(),e.clearActiveCell(),this.builder.opts.onChange())})))}moveRowUp(){let t,e=this.util,i=this.dom,o=e.cellSelected();if(t=o?o.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.previousElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t,t.previousElementSibling),this.rowTool.position(t),this.builder.opts.onChange();else{let o=t.parentNode,n=null;const s=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(s,(s=>{if(s.innerHTML===o.innerHTML&&n)return i.moveAfter(t,n.lastChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;n=s}))}}moveRowDown(){let t,e=this.util,i=this.dom,o=e.cellSelected();if(t=o?o.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.nextElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t.nextElementSibling,t),this.rowTool.position(t),this.builder.opts.onChange();else{let i=t.parentNode,o=!1;const n=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(n,(n=>{if(o)return n.insertBefore(t,n.firstChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;n.innerHTML===i.innerHTML&&(o=!0)}))}}duplicateRow(){let t,e=this.builder,i=this.util,o=this.dom,n=i.cellSelected();if(t=n?n.parentNode:i.rowSelected(),!t)return;o.removeClass(t,"row-outline"),this.builder.uo.saveForUndo();const s=t.cloneNode(!0);s.removeChild(s.querySelector(".is-row-tool")),s.removeChild(s.querySelector(".is-col-tool"));let l=o.elementChildren(s);l.forEach((t=>{t.removeAttribute("data-click"),t.classList.contains("cell-active")&&(e.activeCol=t)})),o.moveAfter(s,t),o.removeClass(t,"row-active"),o.removeClass(t,"row-outline"),l=o.elementChildren(t),l.forEach((t=>{o.removeClass(t,"cell-active")}));let r=this.builder.doc.querySelector(".builder-active");e.applyBehaviorOn(r),this.rowTool.position(s),this.builder.opts.onChange()}}class qi{constructor(t){this.builder=t;const e=this.builder.dom;this.dom=e}position(t){let e=this.dom;const i=this.builder.builderStuff;let o=t.querySelector(".is-row-tool"),n=i.querySelector(".rowmore");e.addClass(n,"transition1");const s=o.querySelector(".row-more"),l=this.builder.util.getElementPosition(s);let r=l.top,a=l.left;n.style.top=r-8+"px",e.removeClass(n,"arrow-bottom"),e.removeClass(n,"arrow-left"),e.removeClass(n,"arrow-right"),e.removeClass(n,"center"),e.removeClass(n,"right"),e.removeClass(n,"left"),"right"===this.builder.opts.rowTool?(n.style.left=a-n.offsetWidth-10+"px",e.addClass(n,"arrow-right"),e.addClass(n,"left")):(n.style.left=a+35+"px",e.addClass(n,"arrow-left"),e.addClass(n,"left")),setTimeout((()=>{e.removeClass(n,"transition1")}),300)}}let Ti,Mi,Oi,Ri,Bi,Ii,$i,Ni;class zi{constructor(t={}){this.opts=t;const e=document.querySelectorAll(this.opts.selector);Array.prototype.forEach.call(e,(t=>{t.setAttribute("draggable",""),t.addEventListener("touchstart",this.dragStart,{passive:!0}),t.addEventListener("touchend",this.dragEnd,!1),t.addEventListener("mousedown",this.dragStart,!1),t.addEventListener("mouseup",this.dragEnd,!1)})),document.addEventListener("touchmove",this.drag,!1),document.addEventListener("mousemove",this.drag,!1)}dragStart(t){var e,i;t.target.hasAttribute("draggable")&&(t.target.parentNode.style.transition="none",$i=!0,Ni=t.target.parentElement,Ni.getAttribute("data-xOffset")?e=Ni.getAttribute("data-xOffset"):(Ni.setAttribute("data-xOffset",0),e=0),Ni.getAttribute("data-yOffset")?i=Ni.getAttribute("data-yOffset"):(Ni.setAttribute("data-yOffset",0),i=0),"touchstart"===t.type?(Ti=t.touches[0].clientX-e,Mi=t.touches[0].clientY-i):(Ti=t.clientX-e,Mi=t.clientY-i),Ni.setAttribute("data-initialX",Ti),Ni.setAttribute("data-initialY",Mi))}dragEnd(t){t.target.hasAttribute("draggable")&&Ni&&(t.target.parentNode.style.transition="",Oi=Ni.getAttribute("data-currentX"),Ri=Ni.getAttribute("data-currentY"),Ti=Oi,Mi=Ri,Ni.setAttribute("data-initialX",Ti),Ni.setAttribute("data-initialY",Mi),$i=!1)}drag(t){if($i){t.preventDefault();var e=Ni.getAttribute("data-initialX"),i=Ni.getAttribute("data-initialY");"touchmove"===t.type?(Oi=t.touches[0].clientX-e,Ri=t.touches[0].clientY-i):(Oi=t.clientX-e,Ri=t.clientY-i),Ni.style.transform="translate3d("+Oi+"px, "+Ri+"px, 0)",Ni.setAttribute("data-currentX",Oi),Ni.setAttribute("data-currentY",Ri),Bi=Oi,Ii=Ri,Ni.setAttribute("data-xOffset",Bi),Ni.setAttribute("data-yOffset",Ii)}}isTouchSupport(){return"ontouchstart"in window||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0}}
13
+ */class Ei{constructor(t){this.builder=t;const e=this.builder.util;this.util=e}getSnippetsHtml(){const t=this.util,e=this.builder.opts.snippetUrl,i=this.builder.opts.snippetPath;let o="[";for(let e=0;e<this.builder.opts.snippetCategories.length;e++)o+=`[${this.builder.opts.snippetCategories[e][0]},'${t.out(this.builder.opts.snippetCategories[e][1])}'],`;o+="]";const n=this.builder.opts.defaultSnippetCategory;return`\n <!DOCTYPE HTML>\n <html>\n \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 <script src="${e}"><\/script>\n <style>\n body {\n // background: #fff;\n background: ${this.builder.styleSnippetBackground};\n margin: 0;\n }\n\n .is-pop-close {\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: transparent;\n z-index:10;width:30px;height:30px;position:absolute;\n top:2px;right:2px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;text-align:center;cursor:pointer;\n }\n .is-pop-close:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n /*\n body.dark {\n background: #111;\n }\n .dark .is-categories {\n background: #333;\n }\n .dark .is-category-list a {\n background: #333;\n color: #fff;\n }\n .dark .is-category-list a.active {\n background: #525252;\n color: #fff;\n }\n .dark .is-category-list a:hover {\n color: #fff;\n }\n .dark .is-design-list>li img {\n opacity: 0.93;\n }\n .dark .is-more-categories {\n background: #333;\n }\n .dark .is-more-categories a {\n background: #333;\n color: #fff;\n }\n .dark .is-more-categories a:hover,\n .dark .is-more-categories a:focus {\n background: #4c4c4c;\n }\n .dark .is-more-categories a.active {\n background: #4c4c4c;\n }\n */\n\n \n .dark .is-design-list>li {\n outline: transparent 1px solid;\n }\n\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 svg {\n fill: ${this.builder.styleSnippetColor};\n }\n\n .is-design-list {\n position: fixed;\n top: 0px;\n left: 0px;\n border-top: transparent 68px solid;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n padding: 0px 0px 30px 30px;\n box-sizing: border-box;\n overflow: auto;\n list-style: none;\n margin: 0;\n }\n \n .is-design-list>li {\n width: 250px;\n min-height:120px;\n position:relative;\n background: #fff;\n // background: ${this.builder.styleToolBackground};\n overflow: hidden;\n margin: 32px 40px 0 0;\n cursor: pointer;\n display: inline-block;\n outline: #ececec 1px solid;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n }\n\n .is-design-list>li:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n\n .is-design-list>li 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-design-list>li:hover img {\n // opacity: 0.95;\n // }\n \n // .is-design-list>li:hover {\n // background: #999;\n // }\n .is-overlay {\n position:absolute;left:0px;top:0px;width:100%;height:100%;\n }\n .is-design-list>li .is-overlay:after {\n background: rgba(0, 0, 0, 0.02);\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>li:hover .is-overlay:after,\n .is-design-list>li:focus .is-overlay:after {\n opacity: 0.9;\n }\n .dark .is-design-list>li .is-overlay:after {\n background: rgb(78 78 78 / 13%);\n }\n \n .is-category-list {\n position: relative;\n top: 0px;\n left: 0px;\n width: 100%;\n height: 80px;\n box-sizing: border-box;\n z-index: 1;\n }\n \n .is-category-list>div {\n white-space: nowrap;\n padding: 0 30px;\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 background: ${this.builder.styleSnippetTabsBackground};\n // box-shadow: 0 5px 8px rgb(0 0 0 / 4%);\n }\n \n .is-category-list a {\n display: inline-block;\n padding: 10px 20px;\n // background: #fefefe;\n // color: #000;\n background: ${this.builder.styleSnippetTabItemBackground};\n color: ${this.builder.styleSnippetTabItemColor};\n border-radius: 50px;\n \n margin: 0 12px 0 0;\n text-decoration: none;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);\n transition: box-shadow ease 0.3s;\n }\n \n .is-category-list a:hover {\n /*background: #fafafa;*/\n background: ${this.builder.styleSnippetTabItemBackgroundHover};\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n }\n \n .is-category-list a.active {\n // background: #f5f5f5;\n background: ${this.builder.styleSnippetTabItemBackgroundActive};\n // color: #000;\n color: ${this.builder.styleSnippetTabItemColor};\n box-shadow: none;\n cursor: default;\n }\n\n .is-category-list a:focus-visible {\n outline: ${this.builder.styleOutlineColor} 2px solid;\n }\n \n .is-more-categories {\n display: none;\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 background: ${this.builder.styleSnippetMoreItemBackground};\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 background: ${this.builder.styleSnippetMoreItemBackground};\n text-decoration: none;\n // color: #000;\n color: ${this.builder.styleSnippetMoreItemColor};\n line-height: 1.6;\n outline: none;\n }\n \n .is-more-categories a:hover,\n .is-more-categories a:focus {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundHover};\n }\n \n .is-more-categories a.active {\n // background: #eee;\n background: ${this.builder.styleSnippetMoreItemBackgroundActive};\n }\n \n .is-more-categories.active {\n display: block;\n }\n \n /* First Loading */\n /* .is-category-list {\n display: none;\n }\n \n .is-design-list {\n display: none;\n }\n \n .pace {\n -webkit-pointer-events: none;\n pointer-events: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n \n .pace-inactive {\n display: none;\n }\n \n .pace .pace-progress {\n background: #000000;\n position: fixed;\n z-index: 2000;\n top: 0;\n right: 100%;\n width: 100%;\n height: 2px;\n } */\n \n .is-more-categories>a:nth-child(0) {\n display: none\n }\n \n .is-more-categories>a:nth-child(1) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: none\n }\n \n @media all and (max-width: 1212px) {\n .is-categories>a:nth-child(7):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(7) {\n display: block\n }\n }\n \n @media all and (max-width: 1070px) {\n .is-categories>a:nth-child(6):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(6) {\n display: block\n }\n }\n \n @media all and (max-width: 940px) {\n .is-categories>a:nth-child(5):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(5) {\n display: block\n }\n }\n \n @media all and (max-width: 700px) {\n .is-categories>a:nth-child(4):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(4) {\n display: block\n }\n }\n \n @media all and (max-width: 555px) {\n .is-categories>a:nth-child(3):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(3) {\n display: block\n }\n }\n \n @media all and (max-width: 415px) {\n .is-categories>a:nth-child(2):not(.more-snippets) {\n display: none\n }\n \n .is-more-categories>a:nth-child(2) {\n display: block\n }\n }\n \n @media all and (max-width: 640px) {\n .is-more-categories a {\n width: 150px;\n padding: 10px 5px 10px 15px;\n font-size: 10px;\n }\n \n .is-more-categories {\n left: 0 !important;\n width: 100% !important;\n }\n }\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 }\n </style>\n </head>\n \n <body${this.builder.styleDark?' class="dark"':""}${this.builder.styleColored?' class="colored"':""}${this.builder.styleColoredDark?' class="colored-dark"':""}${this.builder.styleLight?' class="light"':""}>\n\n <svg style="display:none">\n <defs>\n <symbol viewBox="0 0 512 512" id="ion-ios-close-empty">\n <path d="M340.2 160l-84.4 84.3-84-83.9-11.8 11.8 84 83.8-84 83.9 11.8 11.7 84-83.8 84.4 84.2 11.8-11.7-84.4-84.3 84.4-84.2z"></path>\n </symbol>\n </defs>\n </svg>\n \n <button class="is-pop-close" tabindex="-1">\n <svg class="is-icon-flex" style="width:30px;height:30px;">\n <use xlink:href="#ion-ios-close-empty"></use>\n </svg>\n </button>\n \n <div class="is-category-list">\n <div class="is-categories" style="position:fixed;top:0;left:0;right:0;height:68px;padding-top:17px;box-sizing:border-box;">\n </div>\n </div>\n\n <div class="is-more-categories" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </div>\n \n <ul class="is-design-list" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n </ul>\n \n <script${this.builder.nonce?` nonce="${this.builder.nonce}"`:""}>\n \n var snippetPath = '${i}';\n var snippetCategories = ${o};\n var defaultSnippetCategory = ${n};\n\n ${void 0!==this.builder.slider&&null!==this.builder.slider?`\n var slider='${this.builder.slider}';`:"var slider=null;"};\n \n var numOfCat = snippetCategories.length;\n if (numOfCat <= 7) {\n document.querySelector('.is-more-categories').style.width = '200px';\n }\n \n var categorytabs = document.querySelector('.is-categories');\n categorytabs.innerHTML = '';\n let html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n if (i < 7) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n }\n html_catselect += '<a href="" class="more-snippets">' + parent._cb.out('More') + '</a>';\n categorytabs.innerHTML = html_catselect;\n \n var categorymore = document.querySelector('.is-more-categories');\n html_catselect = '';\n for (var i = 0; i < numOfCat; i++) {\n html_catselect += '<a href="" data-cat="' + snippetCategories[i][0] + '">' + parent._cb.out(snippetCategories[i][1]) + '</a>';\n }\n categorymore.innerHTML = html_catselect;\n \n // Show/hide "More" button\n if (numOfCat <= 7) {\n var bHasMore = false;\n \n const childNodes = categorymore.childNodes;\n let i = childNodes.length;\n while (i--) {\n if(childNodes[i].style.display === 'block') {\n bHasMore = true;\n }\n }\n var more = document.querySelector('.more-snippets');\n if (!bHasMore) more.style.display = 'none';\n else more.style.display = '';\n }\n \n var elms = categorytabs.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n elms = categorymore.querySelectorAll('a[data-cat="' + defaultSnippetCategory + '"]'); //.classList.add('active');\n Array.prototype.forEach.call(elms, function(elm){\n elm.classList.add('active');\n });\n\n\n document.addEventListener('keydown', function(e){\n if(e.keyCode === 27) { // escape key\n const moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n moreCategories.classList.remove('active');\n const activeTab = categorylist.querySelector('.more-snippets');\n activeTab.classList.remove('active');\n activeTab.focus();\n } else {\n const modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n }\n }\n });\n\n\n let categorylist = document.querySelector('.is-category-list');\n let designlist = document.querySelector('.is-design-list');\n\n const select = (elm) => {\n\n if(elm.classList.contains('active')) {\n return false;\n }\n \n var cat = elm.getAttribute('data-cat');\n if (cat) if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n\n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb; \n \n if (snippets[i].category === cat) {\n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n\n newitem.addEventListener('keydown', (e)=>{\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n \n } \n }\n \n if (cat) {\n // Hide all, show items from selected category\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); \n var categorymore_items = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(categorymore_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var items = designlist.querySelectorAll('li');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, 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 = ''; // TODO: hide & show snippets => animated\n elm.classList.add('active');\n }\n }\n });\n \n } else {\n // show dropdown\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n var _width = moreCategories.offsetWidth;\n more.classList.add('active');\n moreCategories.classList.add('active');\n var top = more.getBoundingClientRect().top;\n var left = more.getBoundingClientRect().left;\n top = top + 50;\n moreCategories.style.top = top + 'px';\n moreCategories.style.left = left + 'px';\n }\n elm.classList.add('active');\n \n };\n\n let tabs = document.querySelectorAll('.is-categories a');\n Array.prototype.forEach.call(tabs, (tab) => {\n \n tab.addEventListener('keydown', (e)=>{\n e.preventDefault();\n \n if ((e.which === 39 && e.target.nextElementSibling)) { // arrow right key pressed\n e.target.nextElementSibling.focus();\n } else if ((e.which === 37 && e.target.previousElementSibling)) { // arrow left key pressed\n e.target.previousElementSibling.focus();\n } else if(e.keyCode === 13 || e.keyCode === 32) { // enter or spacebar key\n select(e.target);\n } else if ((e.which === 9 && !e.shiftKey)) { // tab key pressed\n \n let moreCategories = document.querySelector('.is-more-categories');\n if(moreCategories.classList.contains('active')) {\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\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 return;\n\n }\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 } else if(e.which === 40 && e.target.classList.contains('more-snippets')) { // down\n \n // Redirect to dropdown list\n let firstItem;\n let activeItem;\n let moreCategories = document.querySelector('.is-more-categories');\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 } \n\n \n });\n \n tab.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\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 select(e.target);\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 \n });\n \n item.addEventListener('click', (e)=>{\n e.preventDefault();\n\n e.target.focus();\n \n select(e.target);\n });\n });\n\n\n \n var snippets = data_basic.snippets; //DATA\n\n if (slider !== null){\n if(slider==='slick') {\n //remove glide\n const predicate = (item) => (item.type!=='glide');\n snippets = snippets.filter(predicate);\n } else if(slider==='glide') {\n //remove slick\n const predicate = (item) => (item.type!=='slick');\n snippets = snippets.filter(predicate);\n } else if(slider==='all') {\n // Do Nothing\n } else {\n // remove all slider (if incorrect settings)\n const predicate = (item) => (item.type!=='glide' && item.type!=='slick');\n snippets = snippets.filter(predicate);\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n } else {\n // Backward compatible OR if slider param not set\n\n // Hide slider snippet if slick is not included\n var bHideSliderSnippet = true;\n if(parent._cb.win.jQuery) {\n if(parent._cb.win.jQuery.fn.slick) {\n bHideSliderSnippet = false;\n }\n }\n if(bHideSliderSnippet){\n const result = snippets.filter((item)=>{\n return item.type !== 'slick';\n });\n snippets = [...result];\n } \n\n if(!(parent._cb.win.Glide)){\n const result = snippets.filter((item)=>{\n return !(item.glide || item.type === 'glide');\n });\n snippets = [...result];\n }\n\n // for (let i = 0; i < snippets.length; i++) {\n // console.log(snippets[i].type)\n // }\n\n }\n \n\n for (let i = 0; i <snippets.length; i++) {\n \n snippets[i].id = i+1;\n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === defaultSnippetCategory + '') {\n designlist.insertAdjacentHTML('beforeend', '<li class="active" role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n \n newitem.addEventListener('keydown', (e)=>{\n\n if ((e.which === 9 && !e.shiftKey)) { // tab\n let last = false;\n if(e.target.nextElementSibling) {\n if(!e.target.nextElementSibling.classList.contains('active')) {\n last = true;\n }\n } else {\n last = true;\n }\n if(last) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n if ((e.which === 9 && e.shiftKey)) { // shift + tab\n let first = false;\n if(e.target.previousElementSibling) {\n if(!e.target.previousElementSibling.classList.contains('active')) {\n first = true;\n }\n } else {\n first = true;\n }\n if(first) {\n e.preventDefault();\n let activeTab = categorylist.querySelector('.active');\n if(activeTab) activeTab.focus();\n else {\n activeTab = categorylist.querySelector('.more-snippets');\n activeTab.focus();\n }\n }\n }\n });\n\n }\n\n }\n \n\n\n\n /*\n elms = categorymore.querySelectorAll('a');\n Array.prototype.forEach.call(elms, function(elm){\n \n elm.addEventListener('click', function(e){\n \n var cat = elm.getAttribute('data-cat');\n if(designlist.querySelectorAll('[data-cat="' + cat + '"]').length === 0) {\n \n for (let i = 0; i <snippets.length; i++) {\n \n var thumb = snippets[i].thumbnail;\n \n thumb = snippetPath + thumb;\n \n if (snippets[i].category === cat) {\n \n designlist.insertAdjacentHTML('beforeend', '<li role="button" tabindex="0" data-id="' + snippets[i].id + '" data-cat="' + snippets[i].category + '"><img src="' + thumb + '"><span class="is-overlay"></span></li>');\n \n var newitem = designlist.querySelector('[data-id="' + snippets[i].id + '"]');\n newitem.addEventListener('click', function(e){\n \n var snippetid = e.target.parentNode.getAttribute('data-id');\n addSnippet(snippetid);\n \n });\n }\n \n } \n }\n \n // Hide all, show items from selected category\n Array.prototype.forEach.call(elms, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n categorymore.className = categorymore.className.replace('active', ''); // hide popup\n //var categorymore_items = categorymore.querySelectorAll('a');\n \n var categorylist = document.querySelector('.is-category-list');\n var categorylist_items = categorylist.querySelectorAll('a'); \n Array.prototype.forEach.call(categorylist_items, function(elm){\n elm.className = elm.className.replace('active', '');\n });\n \n var more = document.querySelector('.more-snippets');\n more.className = more.className.replace('active', '');\n \n var items = designlist.querySelectorAll('div');\n Array.prototype.forEach.call(items, function(elm){\n elm.style.display = 'none';\n elm.classList.remove('active');\n });\n Array.prototype.forEach.call(items, 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 elm.classList.add('active');\n \n e.preventDefault();\n });\n \n });\n */\n \n var close = document.querySelector('.is-pop-close');\n close.addEventListener('click', function(e){\n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n });\n \n // Add document Click event\n document.addEventListener('click', function(e){\n e = e || window.event;\n var target = e.target || e.srcElement; \n \n if(parentsHasClass(target, 'more-snippets')) return;\n if(hasClass(target, 'more-snippets')) return;\n \n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n parent.document.addEventListener('click', function(e){\n var more = document.querySelector('.more-snippets');\n var moreCategories = document.querySelector('.is-more-categories');\n \n more.className = more.className.replace('active', '');\n moreCategories.className = moreCategories.className.replace('active', '');\n });\n \n function addSnippet(snippetid) {\n \n // TODO: var framework = parent._cb.opts.framework;\n var snippetPathReplace = parent._cb.opts.snippetPathReplace;\n var emailMode = parent._cb.opts.emailMode;\n \n // \n for (let i = 0; i <snippets.length; i++) {\n if(snippets[i].id + ''=== snippetid) {\n \n var html = snippets[i].html;\n var noedit = snippets[i].noedit;\n break;\n }\n }\n \n var bSnippet;\n if (html.indexOf('"row') === -1) {\n bSnippet = true; // Just snippet (without row/column grid)\n } else {\n bSnippet = false; // Snippet is wrapped in row/colum\n }\n if (emailMode) bSnippet = false;\n\n if(bSnippet) {\n var quickadd = parent._cb.builderStuff.querySelector('.quickadd');\n var mode = quickadd.getAttribute('data-mode');\n if(!mode) {\n // in case of using viewSnippets() to open the dialog (mode=null) => change to non snippet.\n html = '<div class="row">' +\n '<div class="column full">' +\n html +\n '</div>' +\n '</div>';\n bSnippet=false;\n }\n }\n \n // Convert snippet into your defined 12 columns grid \n var rowClass = parent._cb.opts.row; //row\n var colClass = parent._cb.opts.cols; //['col s1', 'col s2', 'col s3', 'col s4', 'col s5', 'col s6', 'col s7', 'col s8', 'col s9', 'col s10', 'col s11', 'col s12']\n if(rowClass!=='' && colClass.length===12){\n\n //html = html.replace(new RegExp('row clearfix', 'g'), rowClass);\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 html = html.replace(/{id}/g, makeid()); // Replace {id} with auto generated id (for custom code snippet)\n \n if(parent._cb.opts.onAdd){\n html = parent._cb.opts.onAdd(html);\n }\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 /* for encoded replace, change / to %2F */\n var slash = new RegExp('/', 'g');\n var snippetPathReplace_0 = snippetPathReplace[0].replace(slash, '%2F');\n var snippetPathReplace_1 = snippetPathReplace[1].replace(slash, '%2F');\n regex = new RegExp(snippetPathReplace_0, 'g');\n html = html.replace(regex, snippetPathReplace_1);\n }\n }\n \n parent._cb.addSnippet(html, bSnippet, noedit);\n \n var modal = parent.document.querySelector('.is-modal.snippets');\n removeClass(modal, 'active');\n \n }\n \n function hasClass(element, classname) {\n if(!element) return false;\n return element.classList ? element.classList.contains(classname) : new RegExp('\\b'+ classname+'\\b').test(element.className);\n }\n \n function removeClass(element, classname) {\n if(!element) return;\n if(element.classList.length>0) {\n element.className = element.className.replace(classname, '');\n }\n }\n \n function parentsHasClass(element, classname) {\n while (element) {\n if(element.tagName === 'BODY' || element.tagName === 'HTML') return false;\n if(!element.classList) return false;\n if (element.classList.contains(classname)) {\n return true;\n }\n element = element.parentNode;\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 <\/script>\n \n </textarea>\n </body>\n \n </html>\n `}}const Li=t=>{const e=t.util,i=t.builderStuff,o=t.dom;let n=i.querySelector(".quickadd");if(!n){const s=`<div class="is-pop quickadd arrow-right" style="z-index:10003;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-pop-close" style="display:none;z-index:1;width:40px;height:40px;position:absolute;top:0px;right:0px;box-sizing:border-box;padding:0;line-height:40px;font-size: 12px;color:#777;text-align:center;cursor:pointer;"><svg class="is-icon-flex" style="width:40px;height:40px;"><use xlink:href="#ion-ios-close-empty"></use></svg></div>\n <div class="is-pop-tabs">\n <div class="is-pop-tab-item" data-value="left">${e.out("Add to Left")}</div>\n <div class="is-pop-tab-item active" data-value="right">${e.out("Add to Right")}</div>\n </div>\n <div style="padding:12px;display:flex;flex-direction:row;flex-flow: wrap;justify-content: center;align-items: center;">\n <button title="${e.out("Paragraph")}" class="add-paragraph"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#icon-align-full"></use></svg></span>${e.out("Paragraph")}</button>\n <button title="${e.out("Headline")}" class="add-headline"><span style="font-family:serif;display:block;margin:0 0 8px;font-size:11px;">H</span>${e.out("Headline")}</button>\n <button title="${e.out("Image")}" class="add-image"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex ion-image" style="width:14px;height:14px;"><use xlink:href="#ion-image"></use></svg></span>${e.out("Image")}</button>\n <button title="${e.out("List")}" class="add-list"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-list-bullet"></use></svg></span>${e.out("List")}</button>\n <button title="${e.out("Heading 1")}" class="add-heading1"><span style="font-family:serif;display:block;margin:0 0 8px;">H1</span>${e.out("Heading 1")}</button>\n <button title="${e.out("Heading 2")}" class="add-heading2"><span style="font-family:serif;display:block;margin:0 0 8px;">H2</span>${e.out("Heading 2")}</button>\n <button title="${e.out("Heading 3")}" class="add-heading3"><span style="font-family:serif;display:block;margin:0 0 8px;">H3</span>${e.out("Heading 3")}</button>\n <button title="${e.out("Heading 4")}" class="add-heading4"><span style="font-family:serif;display:block;margin:0 0 8px;">H4</span>${e.out("Heading 4")}</button>\n <button title="${e.out("Quote")}" class="add-quote"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-quote"></use></svg></span>${e.out("Quote")}</button>\n <button title="${e.out("Preformatted")}" class="add-preformatted"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-code"></use></svg></span>${e.out("Preformatted")}</button>\n ${t.opts.emailMode?"":`<button title="${e.out("Button")}" class="add-button"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Button")}</button>`}\n ${t.opts.emailMode?"":`<button title="${e.out("Two Button")}" class="add-twobutton"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;border:#a1a1a1 1px solid;background:#f3f3f3;width:10px;height:4px;"></span></span>${e.out("Two Button")}</button>`}\n <button title="${e.out("Youtube")}" class="add-youtube"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-youtube-outline"></use></svg></use></svg></svg></span>${e.out("Youtube")}</button>\n <button title="${e.out("Video")}" class="add-video"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-ios-play"></use></svg></use></svg></svg></span>${e.out("Video")}</button>\n <button style="display:none" title="${e.out("Audio")}" class="add-audio"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-volume-medium"></use></svg></use></svg></svg></span>${e.out("Audio")}</button>\n <button title="${e.out("Map")}" class="add-map"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-location"></use></svg></use></svg></svg></span>${e.out("Map")}</button>\n <button title="${e.out("Table")}" class="add-table"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#icon-table"></use></svg></use></svg></svg></span>${e.out("Table")}</button>\n <button title="${e.out("Icon")}" class="add-icon"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-android-happy"></use></svg></use></svg></svg></span>${e.out("Icon")}</button>\n <button title="${e.out("Social Links")}" class="add-social"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-social-twitter"></use></svg></use></svg></svg></span>${e.out("Social Links")}</button>\n <button title="${e.out("HTML/JS")}" class="add-code"><span style="display:block;margin:0 0 8px;"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-code"></use></svg></use></svg></svg></span>${e.out("HTML/JS")}</button>\n <button title="${e.out("Spacer")}" class="add-spacer"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#eee;width:30px;height:5px;"></span></span>${e.out("Spacer")}</button>\n <button style="display:none" title="${e.out("Line")}" class="add-line"><span style="display:block;margin:0 0 8px;"><span style="display:inline-block;background:#ddd;width:30px;height:2px;"></span></span>${e.out("Line")}</button>\n <div class="pop-separator"></div>\n <button title="${e.out("More...")}" class="add-more" style="flex-direction:initial;">${e.out("More...")}</button>\n </div>\n </div>\n \n <div class="is-modal snippets" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">\n <div class="is-modal-content" style="max-width:1500px;width:80vw;height:80vh;padding:0;">\n <iframe tabindex="0" style="width:100%;height:100%;border: none;display: block;" src="about:blank"></iframe>\n </div>\n </div>\n `;o.appendHtml(i,s),n=i.querySelector(".quickadd");let l=n.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(l,(t=>{o.addEventListener(t,"click",(t=>{let e=n.querySelectorAll(".is-pop-tab-item");Array.prototype.forEach.call(e,(t=>{o.removeClass(t,"active")})),o.addClass(t.target,"active"),"left"===n.querySelector(".active").getAttribute("data-value")?n.setAttribute("data-mode","cell-left"):n.setAttribute("data-mode","cell-right")}))}));let r=n.querySelector(".add-paragraph");o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>",t)})),r=n.querySelector(".add-headline"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="display">\n <h1>Headline Goes Here</h1>\n <p>Lorem Ipsum is simply dummy text</p>\n </div>',t)})),r=n.querySelector(".add-image"),o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o=`<img src="${t.opts.snippetPath}example.png" alt="" />`;t.opts.snippetSampleImage&&(o=`<img src="${t.opts.snippetSampleImage}" alt="" />`),e.addContent(o,i)})),r=n.querySelector(".add-heading1"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h1>Heading 1 here</h1>",t)})),r=n.querySelector(".add-heading2"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h2>Heading 2 here</h2>",t)})),r=n.querySelector(".add-heading3"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h3>Heading 3 here</h3>",t)})),r=n.querySelector(".add-heading4"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<h4>Heading 4 here</h4>",t)})),r=n.querySelector(".add-preformatted"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<pre>Lorem Ipsum is simply dummy text of the printing and typesetting industry. \n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, \n when an unknown printer took a galley of type and scrambled it to make a type specimen book.</pre>",t)})),r=n.querySelector(".add-list"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<ul style="list-style: initial;padding-left: 20px;">\n <li>Lorem Ipsum is simply dummy text</li>\n <li>Lorem Ipsum is simply dummy text</li>\n </ul>',t)})),r=n.querySelector(".add-quote"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<blockquote>Lorem Ipsum is simply dummy text</blockquote>",t)})),r=n.querySelector(".add-button"),r&&o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o='<div>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n </div>';t.opts.emailMode&&(o='<div><a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a></div>'),e.addContent(o,i)})),r=n.querySelector(".add-twobutton"),r&&o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o='<div>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 text-black leading-14 rounded border-transparent hover:border-transparent font-normal tracking-wide" style="background-color: rgb(240, 240, 240);">Read More</a>\n <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 py-2 size-17 px-6 border-current hover:border-current font-normal leading-14 rounded tracking-wide">Get Started</a>\n </div>';t.opts.emailMode&&(o='<div>\n <a href="#" role="button" style="margin-top: ;margin-right: ;margin-bottom: ;margin-left: ;display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgb(220, 220, 220); color: rgb(0, 0, 0); border-color: rgb(220, 220, 220); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 400; font-size: 14px; letter-spacing: 3px;">Read More</a> &nbsp;\n <a href="#" role="button" style="display: inline-block; text-decoration: none; transition: all 0.16s ease 0s; border-style: solid; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-color: rgb(53, 53, 53); border-width: 2px; border-radius: 0px; padding: 13px 28px; line-height: 21px; text-transform: uppercase; font-weight: 600; font-size: 14px; letter-spacing: 3px; color: rgb(53, 53, 53);">Get Started</a>\n </div>'),e.addContent(o,i)})),r=n.querySelector(".add-spacer"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="spacer height-80"></div>',t)})),r=n.querySelector(".add-line"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent("<hr>",t)})),r=n.querySelector(".add-code"),o.addEventListener(r,"click",(()=>{let i='<div class="row"><div class="column full" data-noedit data-html="'+encodeURIComponent("<h1 id=\"{id}\">Lorem ipsum</h1><p>This is a code block. You can edit this block using the source dialog.</p><script>var docReady = function (fn) {var stateCheck = setInterval(function () {if (document.readyState !== \"complete\") return;clearInterval(stateCheck);try{fn()}catch(e){}}, 1);};docReady(function() {document.querySelector('#{id}').innerHTML ='<b>Hello World..!</b>';});<\/script>")+'"></div></div>',o=t.opts.snippetPathReplace,n=t.opts.row,s=t.opts.cols;if(""!==n&&12===s.length&&(i=i.replace(new RegExp("row clearfix","g"),"row"),i=i.replace(new RegExp('"row',"g"),'"'+n),i=i.replace(new RegExp("column full","g"),s[11]),i=i.replace(new RegExp("column half","g"),s[5]),i=i.replace(new RegExp("column third","g"),s[3]),i=i.replace(new RegExp("column fourth","g"),s[2]),i=i.replace(new RegExp("column fifth","g"),s[1]),i=i.replace(new RegExp("column sixth","g"),s[1]),i=i.replace(new RegExp("column two-third","g"),s[7]),i=i.replace(new RegExp("column two-fourth","g"),s[8]),i=i.replace(new RegExp("column two-fifth","g"),s[9]),i=i.replace(new RegExp("column two-sixth","g"),s[9])),i=i.replace(/{id}/g,e.makeId()),t.opts.onAdd&&(i=t.opts.onAdd(i)),o.length>0&&""!==o[0]){let t=new RegExp(o[0],"g");i=i.replace(t,o[1])}t.addSnippet(i,!1,!0)})),r=n.querySelector(".add-table"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<table class="default" style="border-collapse:collapse;width:100%;">\n <thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </thead>\n <tr>\n <td style="vertical-align:top;"><br></td>\n <td style="vertical-align:top;"><br></td>\n </tr>\n </table>',t)})),r=n.querySelector(".add-icon"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div style="text-align: center;">\n <i class="icon ion-android-alarm-clock size-80"></i>\n </div>',t)})),r=n.querySelector(".add-social"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="is-social" style="text-align: center;">\n <a href="https://twitter.com/"><i class="icon ion-social-twitter" style="margin-right: 1em"></i></a>\n <a href="https://www.facebook.com/"><i class="icon ion-social-facebook" style="margin-right: 1em"></i></a>\n <a href="mailto:you@example.com"><i class="icon ion-android-drafts"></i></a>\n </div>',t)})),r=n.querySelector(".add-map"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&amp;hl=en&amp;sll=-7.981898,112.626504&amp;sspn=0.009084,0.016512&amp;oq=melbourne&amp;hnear=Melbourne+Victoria,+Australia&amp;t=m&amp;z=10&amp;output=embed"></iframe>\n </div>',t)})),r=n.querySelector(".add-youtube"),o.addEventListener(r,"click",(()=>{const t=n.getAttribute("data-mode");e.addContent('<div class="embed-responsive embed-responsive-16by9">\n <iframe width="560" height="315" src="https://www.youtube.com/embed/P5yHEKqx86U?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>\n </div>',t)})),r=n.querySelector(".add-video"),o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetPath}example.mp4" type="video/mp4"></video>`;t.opts.snippetSampleVideo&&(o=`<video style="width: 100%;" loop="" autoplay="">\n <source src="${t.opts.snippetSampleVideo}" type="video/mp4"></video>`),e.addContent(o,i)})),r=n.querySelector(".add-audio"),o.addEventListener(r,"click",(()=>{const i=n.getAttribute("data-mode");let o=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetPath}example.mp3" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`;t.opts.snippetSampleAudio&&(o=`<div style="display:flex;width:100%;position:relative;margin:15px 0;background:transparent;">\n <audio controls="" style="width:100%">\n <source src="${t.opts.snippetSampleAudio}" type="audio/mpeg">\n Your browser does not support the audio element.\n </audio>\n </div>`),e.addContent(o,i)}));const a=new Ei(t);r=n.querySelector(".add-more"),o.addEventListener(r,"click",(()=>{let t=i.querySelector(".snippets");e.showModal(t,!1,null,!1);const o=t.querySelector("iframe");""===o.contentWindow.document.body.innerHTML&&(o.srcdoc=a.getSnippetsHtml()),e.hidePop(n)}))}return n};class Ai{constructor(t){this.builder=t;const e=this.builder.util,i=this.builder.builderStuff;this.util=e,this.builderStuff=i;const o=this.builder.dom;this.dom=o,this.rowTool=new qi(t)}moveColumnPrevious(){const t=this.util.cellSelected();t&&t.previousElementSibling&&(this.builder.uo.saveForUndo(),t.parentElement.insertBefore(t,t.previousElementSibling),this.builder.opts.onChange())}moveColumnNext(){let t=this.util;const e=t.cellSelected();if(!e)return;const i=t.cellNext(e);i&&(this.builder.uo.saveForUndo(),e.parentElement.insertBefore(i,e),this.builder.opts.onChange())}moveColumnUp(){let t=this.builder,e=this.util;const i=e.cellSelected();if(!i)return;let o=i.parentNode,n=3;if(o.querySelector(".is-row-overlay")&&(n=4),o.childElementCount-n==1){if(!o.previousElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),o.previousElementSibling.childElementCount>=e+n||o.previousElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),o.parentNode.insertBefore(o,o.previousElementSibling),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=o.previousElementSibling.querySelector(".is-row-tool");o.previousElementSibling.removeChild(e),e=o.previousElementSibling.querySelector(".is-rowadd-tool"),o.previousElementSibling.removeChild(e),e=o.previousElementSibling.querySelector(".is-col-tool"),o.previousElementSibling.removeChild(e),o.previousElementSibling.appendChild(i),o.parentNode.removeChild(o);let n=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(n),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var s=o.cloneNode(!0);s.innerHTML="",s.appendChild(i),o.parentNode.insertBefore(s,o);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{i.click()}),30),this.builder.opts.onChange()}o=i.parentNode,e.fixLayout(o),o.nextElementSibling&&e.fixLayout(o.nextElementSibling)}moveColumnDown(){let t=this.builder,e=this.util,i=this.dom;const o=e.cellSelected();if(!o)return;let n=o.parentNode,s=3;if(n.querySelector(".is-row-overlay")&&(s=4),n.childElementCount-s==1){if(!n.nextElementSibling)return;{let e=4;if(this.builder.maxColumns&&(e=this.builder.maxColumns),n.nextElementSibling.childElementCount>=e+s||n.nextElementSibling.hasAttribute("data-protected"))return this.builder.uo.saveForUndo(),n.parentNode.insertBefore(n.nextElementSibling,n),void this.builder.opts.onChange();{this.builder.uo.saveForUndo();let e=n.nextElementSibling.querySelector(".is-row-tool");n.nextElementSibling.removeChild(e),e=n.nextElementSibling.querySelector(".is-rowadd-tool"),n.nextElementSibling.removeChild(e),e=n.nextElementSibling.querySelector(".is-col-tool"),n.nextElementSibling.removeChild(e),n.nextElementSibling.appendChild(o),n.parentNode.removeChild(n);let i=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(i),setTimeout((()=>{o.click()}),30),this.builder.opts.onChange()}}}else{this.builder.uo.saveForUndo();var l=n.cloneNode(!0);l.innerHTML="",l.appendChild(o),i.moveAfter(l,n);let e=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(e),setTimeout((()=>{o.click()}),30),this.builder.opts.onChange()}n=o.parentNode,e.fixLayout(n),n.previousElementSibling&&e.fixLayout(n.previousElementSibling)}duplicateColumn(){let t=this.builder,e=this.util,i=this.dom;const o=e.cellSelected();if(!o)return;this.builder.uo.saveForUndo();var n=o.cloneNode(!0);i.removeClass(n,"cell-active"),n.removeAttribute("data-click"),this.builder.opts.enableDragResize&&(o.style.width="",o.style.flex="");let s=o.parentNode,l=3;s.querySelector(".is-row-overlay")&&(l=4);let r=4;if(this.builder.maxColumns&&(r=this.builder.maxColumns),s.childElementCount>=r+l)return alert(e.out("You have reached the maximum number of columns")),!1;s.insertBefore(n,o),e.fixLayout(s);let a=this.builder.doc.querySelector(".builder-active");t.applyBehaviorOn(a),setTimeout((()=>{o.click()}),30),this.builder.opts.onChange()}removeColumn(){let t=this.util;const e=t.cellSelected();if(!e)return;let i=e.parentNode,o=3;i.querySelector(".is-row-overlay")&&(o=4),t.confirm(t.out("Are you sure you want to delete this block?"),(n=>{n&&(this.builder.uo.saveForUndo(),i.childElementCount-o==1?(i.parentNode.removeChild(i),t.checkEmpty()):(i.removeChild(e),t.fixLayout(i)),t.clearActiveCell(),this.builder.opts.onChange())}))}removeColClasses(t){t.classList.remove("full"),t.classList.remove("two-third"),t.classList.remove("two-fourth"),t.classList.remove("two-fifth"),t.classList.remove("two-sixth"),t.classList.remove("half"),t.classList.remove("third"),t.classList.remove("fourth"),t.classList.remove("fifth"),t.classList.remove("sixth"),t.classList.remove("seventh"),t.classList.remove("eighth"),t.classList.remove("ninth"),t.classList.remove("tenth"),t.classList.remove("eleventh"),t.classList.remove("twelfth")}getAllColumns(t){let e=[],i=this.dom;i.elementChildren(t.parentNode).forEach((o=>{i.hasClass(o,"is-row-tool")||i.hasClass(o,"is-col-tool")||i.hasClass(o,"is-rowadd-tool")||i.hasClass(o,"is-row-overlay")||t!==o&&e.push(o)}));return[t].concat(e)}getCellWidth(t){return t.classList.contains("two-third")?66.666:t.classList.contains("two-fourth")?75:t.classList.contains("two-fifth")?80:t.classList.contains("two-sixth")?83.333:t.classList.contains("half")?50:t.classList.contains("third")?33.333:t.classList.contains("fourth")?25:t.classList.contains("fifth")?20:t.classList.contains("sixth")?16.666:t.classList.contains("seventh")?14.2857:t.classList.contains("eighth")?12.5:t.classList.contains("ninth")?11.111:t.classList.contains("tenth")?10:t.classList.contains("eleventh")?9.09:!!t.classList.contains("twelfth")&&8.333}resizeColumn(t,e,i){let o=this.getCellWidth(t);if(!o){o=parseFloat(window.getComputedStyle(t).getPropertyValue("width"))/parseFloat(window.getComputedStyle(t.parentNode).getPropertyValue("width"))*100}if(e){if(3===i){if(o>=28&&o<=30)return"33.333%";if(o>30&&o<38)return"40%";if(o>=68&&o<=90)return"75%"}if(4===i&&o>=48&&o<=90)return"60%";if(5===i&&o>=38&&o<=90)return"50%";if(6===i){if(o>=10&&o<13)return"16.666%";if(o>=28&&o<=90)return"40%"}if(7===i&&o>=23&&o<=90)return"30%";if(8===i&&o>=13&&o<=90)return"20%";if(o>=78&&o<=90)return"90%";if(o>=73&&o<78)return"80%";if(o>=68&&o<73)return"75%";if(o>=58&&o<68)return"70%";if(o>=48&&o<58)return"60%";if(o>=38&&o<48)return"50%";if(o>=28&&o<38)return"40%";if(o>=23&&o<28)return"30%";if(o>=18&&o<23)return"25%";if(o>=13&&o<18)return"20%";if(o>=10&&o<13)return"15%"}else{if(3===i){if(o>35&&o<=43)return"33.333%";if(o>33&&o<=35)return"30%"}if(6===i&&o>18&&o<=23)return"16.666%";if(o>93&&o<=100)return"90%";if(o>83&&o<=93)return"80%";if(o>78&&o<=83)return"75%";if(o>73&&o<=78)return"70%";if(o>63&&o<=73)return"60%";if(o>53&&o<=63)return"50%";if(o>43&&o<=53)return"40%";if(o>33&&o<=43)return"30%";if(o>28&&o<=33)return"25%";if(o>23&&o<=28)return"20%";if(o>18&&o<=23)return"15%";if(o>=10&&o<=18)return"10%"}return!1}increaseColumn(){let t,e,i=this.builder,o=this.util,n=this.dom,s=o.cellSelected();if(!s)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(s);if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(s,!0,t.length);if(e){s.style.width=e,s.style.flex="0 0 auto",this.removeColClasses(s);for(let i=1;i<t.length;i++){let o=t[i];o!==s&&(o.getAttribute("data-html")?2===t.length&&(o.style.width=100-parseFloat(e)+"%",o.style.flex="0 0 auto"):(o.style.width="",o.style.flex=""),this.removeColClasses(o))}}this.builder.opts.onChange()}return}let l=this.getAllColumns(s);l[1]&&(t=l[1]),l[2]&&(e=l[2]);const r=i.opts.row;let a=i.opts.cols;const d=i.opts.colsizes;if(""!==r&&a.length>0&&d.length>0){if(e)for(let i=0;i<d.length;i++){let o=d[i];for(let i=0;i<o.length;i++)if(3===o[i].length&&n.hasClass(s,o[i][0])&&n.hasClass(t,o[i][1])&&n.hasClass(e,o[i][2])&&i+1!==o.length)return this.builder.uo.saveForUndo(),n.removeClass(s,o[i][0]),n.removeClass(t,o[i][1]),n.removeClass(e,o[i][2]),n.addClass(s,o[i+1][0]),n.addClass(t,o[i+1][1]),n.addClass(e,o[i+1][2]),void this.builder.opts.onChange()}for(let e=0;e<d.length;e++){let i=d[e];for(let e=0;e<i.length;e++)if(2===i[e].length&&n.hasClass(s,i[e][0])&&n.hasClass(t,i[e][1])&&e+1!==i.length)return this.builder.uo.saveForUndo(),n.removeClass(s,i[e][0]),n.removeClass(t,i[e][1]),n.addClass(s,i[e+1][0]),n.addClass(t,i[e+1][1]),void this.builder.opts.onChange()}}else if(""!==r&&a.length>0&&(-1!==s.className.indexOf("col-md-")||(-1!==s.className.indexOf("col-sm-")?a=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==s.className.indexOf("col-xs-")?a=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==s.className.indexOf("col-lg-")?a=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==s.className.indexOf("col-xl-")?a=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==s.className.indexOf("col-xxl-")&&(a=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!n.hasClass(s,a[11]))){if(n.hasClass(s,a[11]))return;if(n.hasClass(t,a[0]))return;this.builder.uo.saveForUndo(),n.hasClass(s,a[10])?(n.removeClass(s,a[10]),n.addClass(s,a[11])):n.hasClass(s,a[9])?(n.removeClass(s,a[9]),n.addClass(s,a[10])):n.hasClass(s,a[8])?(n.removeClass(s,a[8]),n.addClass(s,a[9])):n.hasClass(s,a[7])?(n.removeClass(s,a[7]),n.addClass(s,a[8])):n.hasClass(s,a[6])?(n.removeClass(s,a[6]),n.addClass(s,a[7])):n.hasClass(s,a[5])?(n.removeClass(s,a[5]),n.addClass(s,a[6])):n.hasClass(s,a[4])?(n.removeClass(s,a[4]),n.addClass(s,a[5])):n.hasClass(s,a[3])?(n.removeClass(s,a[3]),n.addClass(s,a[4])):n.hasClass(s,a[2])?(n.removeClass(s,a[2]),n.addClass(s,a[3])):n.hasClass(s,a[1])?(n.removeClass(s,a[1]),n.addClass(s,a[2])):n.hasClass(s,a[0])&&(n.removeClass(s,a[0]),n.addClass(s,a[1])),n.hasClass(t,a[1])?(n.removeClass(t,a[1]),n.addClass(t,a[0])):n.hasClass(t,a[2])?(n.removeClass(t,a[2]),n.addClass(t,a[1])):n.hasClass(t,a[3])?(n.removeClass(t,a[3]),n.addClass(t,a[2])):n.hasClass(t,a[4])?(n.removeClass(t,a[4]),n.addClass(t,a[3])):n.hasClass(t,a[5])?(n.removeClass(t,a[5]),n.addClass(t,a[4])):n.hasClass(t,a[6])?(n.removeClass(t,a[6]),n.addClass(t,a[5])):n.hasClass(t,a[7])?(n.removeClass(t,a[7]),n.addClass(t,a[6])):n.hasClass(t,a[8])?(n.removeClass(t,a[8]),n.addClass(t,a[7])):n.hasClass(t,a[9])?(n.removeClass(t,a[9]),n.addClass(t,a[8])):n.hasClass(t,a[10])?(n.removeClass(t,a[10]),n.addClass(t,a[9])):n.hasClass(t,a[11])&&(n.removeClass(t,a[11]),n.addClass(t,a[10])),this.builder.opts.onChange()}}decreaseColumn(){let t=this.builder,e=this.util,i=this.dom;const o=e.cellSelected();if(!o)return;if(this.builder.useDefaultGrid){let t=this.getAllColumns(o);if(t.length>1&&t.length<9){this.builder.uo.saveForUndo();let e=this.resizeColumn(o,!1,t.length);if(e){o.style.width=e,o.style.flex="0 0 auto",this.removeColClasses(o);for(let i=1;i<t.length;i++){let n=t[i];n!==o&&(n.getAttribute("data-html")?2===t.length&&(n.style.width=100-parseFloat(e)+"%",n.style.flex="0 0 auto"):(n.style.width="",n.style.flex=""),this.removeColClasses(n))}}this.builder.opts.onChange()}return}let n,s,l=this.getAllColumns(o);l[1]&&(n=l[1]),l[2]&&(s=l[2]);const r=t.opts.row;let a=t.opts.cols;const d=t.opts.colsizes;if(""!==r&&a.length>0&&d.length>0){if(s)for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(3===e[t].length&&i.hasClass(o,e[t][0])&&i.hasClass(n,e[t][1])&&i.hasClass(s,e[t][2])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(o,e[t][0]),i.removeClass(n,e[t][1]),i.removeClass(s,e[t][2]),i.addClass(o,e[t-1][0]),i.addClass(n,e[t-1][1]),i.addClass(s,e[t-1][2]),void this.builder.opts.onChange()}for(let t=0;t<d.length;t++){let e=d[t];for(let t=0;t<e.length;t++)if(2===e[t].length&&i.hasClass(o,e[t][0])&&i.hasClass(n,e[t][1])&&0!==t)return this.builder.uo.saveForUndo(),i.removeClass(o,e[t][0]),i.removeClass(n,e[t][1]),i.addClass(o,e[t-1][0]),i.addClass(n,e[t-1][1]),void this.builder.opts.onChange()}}else if(""!==r&&a.length>0&&(-1!==o.className.indexOf("col-md-")||(-1!==o.className.indexOf("col-sm-")?a=["col-sm-1","col-sm-2","col-sm-3","col-sm-4","col-sm-5","col-sm-6","col-sm-7","col-sm-8","col-sm-9","col-sm-10","col-sm-11","col-sm-12"]:-1!==o.className.indexOf("col-xs-")?a=["col-xs-1","col-xs-2","col-xs-3","col-xs-4","col-xs-5","col-xs-6","col-xs-7","col-xs-8","col-xs-9","col-xs-10","col-xs-11","col-xs-12"]:-1!==o.className.indexOf("col-lg-")?a=["col-lg-1","col-lg-2","col-lg-3","col-lg-4","col-lg-5","col-lg-6","col-lg-7","col-lg-8","col-lg-9","col-lg-10","col-lg-11","col-lg-12"]:-1!==o.className.indexOf("col-xl-")?a=["col-xl-1","col-xl-2","col-xl-3","col-xl-4","col-xl-5","col-xl-6","col-xl-7","col-xl-8","col-xl-9","col-xl-10","col-xl-11","col-xl-12"]:-1!==o.className.indexOf("col-xxl-")&&(a=["col-xxl-1","col-xxl-2","col-xxl-3","col-xxl-4","col-xxl-5","col-xxl-6","col-xxl-7","col-xxl-8","col-xxl-9","col-xxl-10","col-xxl-11","col-xxl-12"])),!i.hasClass(o,a[11]))){if(i.hasClass(o,a[0]))return;if(i.hasClass(n,a[11]))return;this.builder.uo.saveForUndo(),i.hasClass(o,a[11])?(i.removeClass(o,a[11]),i.addClass(o,a[10])):i.hasClass(o,a[10])?(i.removeClass(o,a[10]),i.addClass(o,a[9])):i.hasClass(o,a[9])?(i.removeClass(o,a[9]),i.addClass(o,a[8])):i.hasClass(o,a[8])?(i.removeClass(o,a[8]),i.addClass(o,a[7])):i.hasClass(o,a[7])?(i.removeClass(o,a[7]),i.addClass(o,a[6])):i.hasClass(o,a[6])?(i.removeClass(o,a[6]),i.addClass(o,a[5])):i.hasClass(o,a[5])?(i.removeClass(o,a[5]),i.addClass(o,a[4])):i.hasClass(o,a[4])?(i.removeClass(o,a[4]),i.addClass(o,a[3])):i.hasClass(o,a[3])?(i.removeClass(o,a[3]),i.addClass(o,a[2])):i.hasClass(o,a[2])?(i.removeClass(o,a[2]),i.addClass(o,a[1])):i.hasClass(o,a[1])&&(i.removeClass(o,a[1]),i.addClass(o,a[0])),i.hasClass(n,a[0])?(i.removeClass(n,a[0]),i.addClass(n,a[1])):i.hasClass(n,a[1])?(i.removeClass(n,a[1]),i.addClass(n,a[2])):i.hasClass(n,a[2])?(i.removeClass(n,a[2]),i.addClass(n,a[3])):i.hasClass(n,a[3])?(i.removeClass(n,a[3]),i.addClass(n,a[4])):i.hasClass(n,a[4])?(i.removeClass(n,a[4]),i.addClass(n,a[5])):i.hasClass(n,a[5])?(i.removeClass(n,a[5]),i.addClass(n,a[6])):i.hasClass(n,a[6])?(i.removeClass(n,a[6]),i.addClass(n,a[7])):i.hasClass(n,a[7])?(i.removeClass(n,a[7]),i.addClass(n,a[8])):i.hasClass(n,a[8])?(i.removeClass(n,a[8]),i.addClass(n,a[9])):i.hasClass(n,a[9])?(i.removeClass(n,a[9]),i.addClass(n,a[10])):i.hasClass(n,a[10])&&(i.removeClass(n,a[10]),i.addClass(n,a[11])),this.builder.opts.onChange()}}removeRow(){let t,e=this.util,i=this.dom,o=e.cellSelected();t=o?o.parentNode:e.rowSelected(),t&&(i.removeClass(t,"row-outline"),e.confirm(e.out("Are you sure you want to delete this block?"),(t=>{let i,o=e.cellSelected();i=o?o.parentNode:e.rowSelected(),i&&t&&(this.builder.uo.saveForUndo(),i.parentNode.removeChild(i),e.checkEmpty(),e.clearActiveCell(),this.builder.opts.onChange())})))}moveRowUp(){let t,e=this.util,i=this.dom,o=e.cellSelected();if(t=o?o.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.previousElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t,t.previousElementSibling),this.rowTool.position(t),this.builder.opts.onChange();else{let o=t.parentNode,n=null;const s=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(s,(s=>{if(s.innerHTML===o.innerHTML&&n)return i.moveAfter(t,n.lastChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;n=s}))}}moveRowDown(){let t,e=this.util,i=this.dom,o=e.cellSelected();if(t=o?o.parentNode:e.rowSelected(),t)if(i.removeClass(t,"row-outline"),t.nextElementSibling)this.builder.uo.saveForUndo(),t.parentNode.insertBefore(t.nextElementSibling,t),this.rowTool.position(t),this.builder.opts.onChange();else{let i=t.parentNode,o=!1;const n=document.querySelectorAll(this.builder.opts.container);Array.prototype.forEach.call(n,(n=>{if(o)return n.insertBefore(t,n.firstChild),this.rowTool.position(t),e.checkEmpty(),this.builder.opts.onChange(),!1;n.innerHTML===i.innerHTML&&(o=!0)}))}}duplicateRow(){let t,e=this.builder,i=this.util,o=this.dom,n=i.cellSelected();if(t=n?n.parentNode:i.rowSelected(),!t)return;o.removeClass(t,"row-outline"),this.builder.uo.saveForUndo();const s=t.cloneNode(!0);s.removeChild(s.querySelector(".is-row-tool")),s.removeChild(s.querySelector(".is-col-tool"));let l=o.elementChildren(s);l.forEach((t=>{t.removeAttribute("data-click"),t.classList.contains("cell-active")&&(e.activeCol=t)})),o.moveAfter(s,t),o.removeClass(t,"row-active"),o.removeClass(t,"row-outline"),l=o.elementChildren(t),l.forEach((t=>{o.removeClass(t,"cell-active")}));let r=this.builder.doc.querySelector(".builder-active");e.applyBehaviorOn(r),this.rowTool.position(s),this.builder.opts.onChange()}}class qi{constructor(t){this.builder=t;const e=this.builder.dom;this.dom=e}position(t){let e=this.dom;const i=this.builder.builderStuff;let o=t.querySelector(".is-row-tool"),n=i.querySelector(".rowmore");e.addClass(n,"transition1");const s=o.querySelector(".row-more"),l=this.builder.util.getElementPosition(s);let r=l.top,a=l.left;n.style.top=r-8+"px",e.removeClass(n,"arrow-bottom"),e.removeClass(n,"arrow-left"),e.removeClass(n,"arrow-right"),e.removeClass(n,"center"),e.removeClass(n,"right"),e.removeClass(n,"left"),"right"===this.builder.opts.rowTool?(n.style.left=a-n.offsetWidth-10+"px",e.addClass(n,"arrow-right"),e.addClass(n,"left")):(n.style.left=a+35+"px",e.addClass(n,"arrow-left"),e.addClass(n,"left")),setTimeout((()=>{e.removeClass(n,"transition1")}),300)}}let Ti,Mi,Oi,Ri,Bi,Ii,$i,Ni;class zi{constructor(t={}){this.opts=t;const e=document.querySelectorAll(this.opts.selector);Array.prototype.forEach.call(e,(t=>{t.setAttribute("draggable",""),t.addEventListener("touchstart",this.dragStart,{passive:!0}),t.addEventListener("touchend",this.dragEnd,!1),t.addEventListener("mousedown",this.dragStart,!1),t.addEventListener("mouseup",this.dragEnd,!1)})),document.addEventListener("touchmove",this.drag,!1),document.addEventListener("mousemove",this.drag,!1)}dragStart(t){var e,i;t.target.hasAttribute("draggable")&&(t.target.parentNode.style.transition="none",$i=!0,Ni=t.target.parentElement,Ni.getAttribute("data-xOffset")?e=Ni.getAttribute("data-xOffset"):(Ni.setAttribute("data-xOffset",0),e=0),Ni.getAttribute("data-yOffset")?i=Ni.getAttribute("data-yOffset"):(Ni.setAttribute("data-yOffset",0),i=0),"touchstart"===t.type?(Ti=t.touches[0].clientX-e,Mi=t.touches[0].clientY-i):(Ti=t.clientX-e,Mi=t.clientY-i),Ni.setAttribute("data-initialX",Ti),Ni.setAttribute("data-initialY",Mi))}dragEnd(t){t.target.hasAttribute("draggable")&&Ni&&(t.target.parentNode.style.transition="",Oi=Ni.getAttribute("data-currentX"),Ri=Ni.getAttribute("data-currentY"),Ti=Oi,Mi=Ri,Ni.setAttribute("data-initialX",Ti),Ni.setAttribute("data-initialY",Mi),$i=!1)}drag(t){if($i){t.preventDefault();var e=Ni.getAttribute("data-initialX"),i=Ni.getAttribute("data-initialY");"touchmove"===t.type?(Oi=t.touches[0].clientX-e,Ri=t.touches[0].clientY-i):(Oi=t.clientX-e,Ri=t.clientY-i),Ni.style.transform="translate3d("+Oi+"px, "+Ri+"px, 0)",Ni.setAttribute("data-currentX",Oi),Ni.setAttribute("data-currentY",Ri),Bi=Oi,Ii=Ri,Ni.setAttribute("data-xOffset",Bi),Ni.setAttribute("data-yOffset",Ii)}}isTouchSupport(){return"ontouchstart"in window||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0}}
14
14
  /**!
15
15
  * Sortable 1.14.0
16
16
  * @author RubaXa <trash@rubaxa.org>