@creaditor/newsletter-starterkit 1.0.53 → 1.0.55

package/dist/1260.creaditor.bundle.js

@@ -1,76 +1,68 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[1260],{91260(t,e,r){r.r(e),r.d(e,{BlockEditor:()=>g});var o=r(59929),i=r(86319),d=r(9507),n=r(49937),a=r(83235);const s=JSON.parse('["3g2","3gp","aaf","asf","avchd","avi","drc","flv","m2v","m3u8","m4p","m4v","mkv","mng","mov","mp2","mp4","mpe","mpeg","mpg","mpv","mxf","nsv","ogg","ogv","qt","rm","rmvb","roq","svi","vob","webm","wmv","yuv"]');var c=r(9334),p=r(96374);const l=[{id:"video-background",name:"video",thumb:"https://i.ytimg.com/vi/RhlQvbvMg-0/hqdefault.jpg?sqp=-oaymwEWCKgBEF5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLCKBaHlpHj3ghOXWjB2br9kHjPg7w",group:["section-component"],type:"video",preset:{installed:!1,component:"cdtr-background-video",properties:{type:"video",url:"https://www.youtube.com/watch?v=RhlQvbvMg-0",loop:!0,volume:0,controls:0,muted:!0,playing:!0,config:{playerVars:{showinfo:0,controls:0,playsinline:0}},style:{zIndex:0,width:window.innerWidth+500,height:window.innerWidth-560,pointerEvents:"none",transform:"translate(-10%,-0%)"}}}},{id:"images-background",name:"some-images",thumb:"http://demos.creative-tim.com/paper-kit-2/assets/img/antoine-barres.jpg",group:["section-component"],type:"images",preset:{tags:[],installed:!1,type:"images",component:"cdtr-images-preset",properties:{src:"http://demos.creative-tim.com/paper-kit-2/assets/img/antoine-barres.jpg,https://images.pexels.com/photos/1408221/pexels-photo-1408221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",style:{backgroundAttachment:"local",backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundSize:"cover"}}}}];r.e(4217).then(r.bind(r,94217));class g extends o.WF{constructor(t){super(),this.onChangeBakgroundExpanding=t=>{const e=t.target.checked;d.Ay.store().execCommand("expand_image_for_outlook",!e)},this.getInnerBlocks=()=>{const t=[],e=this.component.parent("section");return e&&e.children.forEach(e=>{const r=i.M.get("components",e);r&&"block"===r.type&&t.push(r)}),t},this.onChangeWidth=this.onChangeWidth.bind(this),this.getInnerBlocks=this.getInnerBlocks.bind(this),this.isBackgroundImage=!1,this.backgroundVideo="",this.galleryOpened=!1,this.onChangeBakgroundExpanding=this.onChangeBakgroundExpanding.bind(this),this.tabs=[{text:"background"},{text:"design",selected:!0},{text:"settings"}],this.tabName="design",this.maxWidth=0,this.background="",this.padding={topValue:0,bottomValue:0,leftValue:0,rightValue:0},this.margin={topValue:0,bottomValue:0},this.borderStyle="solid",this.borderWidth=0,this.borderColor="#000",this.theme=i.M.get("theme"),this.connectWith=this.connectWith.bind(this),this.cmds={onchangeRadius:t=>{d.Ay.store().execCommand("style",{...t.target.json})},toggleResponsive:t=>{this.noResponsive=!t.target.checked,d.Ay.store().execCommand("noResponsive",this.noResponsive)},onChangeBorderStyle:t=>{this.borderStyle=t.target.borderStyle||"",this.borderWidth=t.target.borderWidth||1,this.borderColor=t.target.borderColor||"#000",this.borderRadius=t.target.borderRadius||0;t.target.json;d.Ay.store().execCommand("style",{borderStyle:this.borderStyle,borderColor:this.borderColor,borderTopWidth:t.target.borderTopWidth||"0px",borderBottomWidth:t.target.borderBottomWidth||"0px",borderLeftWidth:t.target.borderLeftWidth||"0px",borderRightWidth:t.target.borderRightWidth||"0px",borderTopRightRadius:parseInt(t.target.borderTopRightRadius||0)+"px",borderTopLeftRadius:parseInt(t.target.borderTopLeftRadius||0)+"px",borderBottomRightRadius:parseInt(t.target.borderBottomRightRadius||0)+"px",borderBottomLeftRadius:parseInt(t.target.borderBottomLeftRadius||0)+"px",borderRadius:null})},onRemoveBackgroundVideo:()=>{this.backgroundVideo="",this.backgroundInstance={},d.Ay.store().execCommand("background","transparent")},onChangeBackgroundVideo:t=>{const e=t.target.value;let r;if((0,a.A)(e)){const t=l.find(t=>"images"===t.type);t.preset.properties.src=e,r=t.preset}else if(function(t){const e=(/(?:\.([^.]+))?$/.exec(t.toLowerCase())??[])[1]??"";return-1!==s.findIndex(t=>t===e)}(e));else if(function(t){if(t&&t.match(/^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/))return!0;return!1}(e)){const t=l.find(t=>"video"===t.type);t.preset.properties.url=e,delete t.preset.properties.videoPath,r=t.preset}r&&(d.Ay.store().execCommand("background",JSON.parse(JSON.stringify(r))),d.Ay.store().execCommand("style",{background:null})),this.backgroundVideo=e},onChangeImage:t=>{const e=t.detail,r=[];Array.isArray(e)?e.forEach(t=>r.push(t.src)):r.push(e.src),this.cmds.onChangeBackgroundVideo({target:{value:r.join(",")}}),this.galleryOpened=!1},onChangeHeight:t=>{const e=t.target.value;d.Ay.store().execCommand("style",{height:e+"%"}),this.height=e},onChangeMargin:t=>{const e=t.target.value,r=t.target.direction;"all"===r?(d.Ay.store().execCommand("style",{marginTop:e+"px",marginBottom:e+"px"}),this.margin={topValue:e,bottomValue:e}):d.Ay.store().execCommand("style",{[(0,c.A)(`margin-${r.toLowerCase()}`)]:e+"px"})},onChangePadding:t=>{const e=t.target.value,r=t.target.direction,o=(0,c.A)(`padding-${r.toLowerCase()}`);"all"===r?(d.Ay.store().execCommand("style",{padding:null,"padding-top":null,"padding-bottom":null,"padding-left":null,"padding-right":null,paddingTop:e+"px",paddingBottom:e+"px",paddingLeft:e+"px",paddingRight:e+"px","padding-right":null,"padding-left":null,"padding-top":null,"padding-bottom":null}),this.padding={topValue:e,bottomValue:e,leftValue:e,rightValue:e}):(d.Ay.store().execCommand("style",{[o]:e+"px",[`padding-${r.toLowerCase()}`]:null}),this.props.style={[o]:e+"px"},this[`padding${r.toLowerCase()}`]=e)},onChangebackground(t){const e=t.target.value;this.background=e;d.Ay.components.forEach(t=>{const r=t.find("text");if(r&&!r.closest("card")){let t=r.tiptap.getAttributes("textStyle").color;if(!t){const e=r.element.querySelector("p,h1,h2,h3,h4,h5,h6");e&&(t=window.getComputedStyle(e).color)}if(t){if("transparent"===t)return;if(!t.includes("var(--")&&!e.includes("var(--")&&"transparent"!==e&&"rgba(0, 0, 0, 0)"!==e&&"rgb(0, 0, 0)"!==e){const o=(0,p.w)(t,e);r.tiptap.chain().selectAll().setColor(o).run()}}}}),d.Ay.store().execCommand("style",{background:e,backgroundColor:null});"web"!==i.M.get("config","channel")&&d.Ay.store().execCommand("background",null)}}}onChangeImageBackgroundProp(t){const e=t.detail,{key:r,value:o}=e;if(this.props.background){const t=JSON.parse(JSON.stringify(this.props.background)),e=t.properties;if(!e.style[r])throw new Error(`${r} is not a valid property`);e.style[r]=o,d.Ay.store().execCommand("background",t)}}connectedCallback(){super.connectedCallback(),this.connectWith(),d.Ay.on("update",this.connectWith)}disconnectedCallback(){super.disconnectedCallback(),d.Ay.off("update",this.connectWith)}onChangeWidth(t){let e=t.target.value;e<500&&(e=500),e>1e3&&(e=1e3);const r=this.getInnerBlocks();d.Ay.store().execCommand2({transactions:[{key:"style",value:{width:e+"px",maxWidth:"100%"}}],update:[...r]}),this.maxWidth=e}connectWith(){const t=d.Ay.components[d.Ay.components.length-1];if(this.component=t,t&&"block"===t.type){this.props=t.props;let{style:e}=this.props;e||(e={}),t.props||(t.props={}),t.props.style||(t.props.style={}),this.expand_image_for_outlook=!!t.props.expand_image_for_outlook,this.boxShadow=t.props.style.boxShadow,this.borderStyle=t.props.style.borderStyle,this.borderWidth=t.props.style.borderWidth,this.borderTopRightRadius=parseInt(t.props.style.borderTopRightRadius),this.borderTopLeftRadius=parseInt(t.props.style.borderTopLeftRadius),this.borderBottomRightRadius=parseInt(t.props.style.borderBottomRightRadius),this.borderBottomLeftRadius=parseInt(t.props.style.borderBottomLeftRadius),this.borderTopWidth=parseInt(t.props.style.borderTopWidth),this.borderBottomWidth=parseInt(t.props.style.borderBottomWidth),this.borderLeftWidth=parseInt(t.props.style.borderLeftWidth),this.borderRightWidth=parseInt(t.props.style.borderRightWidth),this.borderColor=t.props.style.borderColor;const r=t.props.background;if(this.isBackgroundImage="images"===r?.type,this.noResponsive=!!t.props.noResponsive,this.isBackgroundImage){const t=r.properties;this.backgroundAttachment=t.style.backgroundAttachment,this.backgroundPosition=t.style.backgroundPosition,this.backgroundRepeat=t.style.backgroundRepeat,this.backgroundSize=t.style.backgroundSize}this.backgroundInstance=r,this.backgroundVideo=r?.properties?.src||r?.properties?.url||"";const o=t.element,i=window.getComputedStyle(o);this.maxWidth=parseInt(i.width),this.width=parseInt(e.width,10)||this.maxWidth,this.background=e.background||e.backgroundImage||i.backgroundColor,e.backgroundImage&&(this.background=`url(${e.backgroundImage})`),this.padding={topValue:parseInt(i.paddingTop),bottomValue:parseInt(i.paddingBottom),leftValue:parseInt(i.paddingLeft),rightValue:parseInt(i.paddingRight)},this.margin={topValue:parseInt(i.marginTop),bottomValue:parseInt(i.marginBottom)}}}changeTab(t){this.tabName=t.target.value}render(){const t=i.M.get("config","channel");return o.qy`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[1260],{91260(t,e,o){o.r(e),o.d(e,{BlockEditor:()=>g});var r=o(59929),i=o(86319),n=o(36565),a=o(49937),s=o(83235);const d=JSON.parse('["3g2","3gp","aaf","asf","avchd","avi","drc","flv","m2v","m3u8","m4p","m4v","mkv","mng","mov","mp2","mp4","mpe","mpeg","mpg","mpv","mxf","nsv","ogg","ogv","qt","rm","rmvb","roq","svi","vob","webm","wmv","yuv"]');var c=o(9334),l=o(96374);const p=[{id:"video-background",name:"video",thumb:"https://i.ytimg.com/vi/RhlQvbvMg-0/hqdefault.jpg?sqp=-oaymwEWCKgBEF5IWvKriqkDCQgBFQAAiEIYAQ==&rs=AOn4CLCKBaHlpHj3ghOXWjB2br9kHjPg7w",group:["section-component"],type:"video",preset:{installed:!1,component:"cdtr-background-video",properties:{type:"video",url:"https://www.youtube.com/watch?v=RhlQvbvMg-0",loop:!0,volume:0,controls:0,muted:!0,playing:!0,config:{playerVars:{showinfo:0,controls:0,playsinline:0}},style:{zIndex:0,width:window.innerWidth+500,height:window.innerWidth-560,pointerEvents:"none",transform:"translate(-10%,-0%)"}}}},{id:"images-background",name:"some-images",thumb:"http://demos.creative-tim.com/paper-kit-2/assets/img/antoine-barres.jpg",group:["section-component"],type:"images",preset:{tags:[],installed:!1,type:"images",component:"cdtr-images-preset",properties:{src:"http://demos.creative-tim.com/paper-kit-2/assets/img/antoine-barres.jpg,https://images.pexels.com/photos/1408221/pexels-photo-1408221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",style:{backgroundAttachment:"local",backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundSize:"cover"}}}}];o(12258),o(15155);o.e(4217).then(o.bind(o,94217));class g extends r.WF{constructor(t){super(),this.onChangeBakgroundExpanding=t=>{const e=t.target.checked;n.Ay.store().execCommand("expand_image_for_outlook",!e)},this.getInnerBlocks=()=>{const t=[],e=this.component.parent();return e&&"section"===e.type?(e.children.forEach(e=>{const o=i.M.get("components",e);o&&"block"===o.type&&t.push(o)}),t):[this.component]},this.onChangeWidth=this.onChangeWidth.bind(this),this.getInnerBlocks=this.getInnerBlocks.bind(this),this.isBackgroundImage=!1,this.backgroundVideo="",this.galleryOpened=!1,this._sectionsExpanded=!1,this.onChangeBakgroundExpanding=this.onChangeBakgroundExpanding.bind(this);const e=i.M.get("config","channel");this.tabs=[{text:"background"},{text:"design",selected:!0},..."web"===e?[{text:"animations"}]:[],{text:"settings"}],this.tabName="design",this.maxWidth=0,this.background="",this.padding={topValue:0,bottomValue:0,leftValue:0,rightValue:0},this.margin={topValue:0,bottomValue:0},this.borderStyle="solid",this.borderWidth=0,this.borderColor="#000",this.theme=i.M.get("theme"),this.connectWith=this.connectWith.bind(this),this.cmds={onchangeRadius:t=>{n.Ay.store().execCommand("style",{...t.target.json})},toggleResponsive:t=>{this.noResponsive=!t.target.checked,n.Ay.store().execCommand("noResponsive",this.noResponsive)},onChangeBorderStyle:t=>{this.borderStyle=t.target.borderStyle||"",this.borderWidth=t.target.borderWidth||1,this.borderColor=t.target.borderColor||"#000",this.borderRadius=t.target.borderRadius||0;t.target.json;n.Ay.store().execCommand("style",{borderStyle:this.borderStyle,borderColor:this.borderColor,borderTopWidth:t.target.borderTopWidth||"0px",borderBottomWidth:t.target.borderBottomWidth||"0px",borderLeftWidth:t.target.borderLeftWidth||"0px",borderRightWidth:t.target.borderRightWidth||"0px",borderTopRightRadius:parseInt(t.target.borderTopRightRadius||0)+"px",borderTopLeftRadius:parseInt(t.target.borderTopLeftRadius||0)+"px",borderBottomRightRadius:parseInt(t.target.borderBottomRightRadius||0)+"px",borderBottomLeftRadius:parseInt(t.target.borderBottomLeftRadius||0)+"px",borderRadius:null})},onRemoveBackgroundVideo:()=>{this.backgroundVideo="",this.backgroundInstance={},n.Ay.store().execCommand("background","transparent")},onChangeBackgroundVideo:t=>{const e=t.target.value;let o;if((0,s.A)(e)){const t=p.find(t=>"images"===t.type);t.preset.properties.src=e,o=t.preset}else if(function(t){const e=(/(?:\.([^.]+))?$/.exec(t.toLowerCase())??[])[1]??"";return-1!==d.findIndex(t=>t===e)}(e));else if(function(t){if(t&&t.match(/^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/))return!0;return!1}(e)){const t=p.find(t=>"video"===t.type);t.preset.properties.url=e,delete t.preset.properties.videoPath,o=t.preset}o&&(n.Ay.store().execCommand("background",JSON.parse(JSON.stringify(o))),n.Ay.store().execCommand("style",{background:null})),this.backgroundVideo=e},onChangeImage:t=>{const e=t.detail,o=[];Array.isArray(e)?e.forEach(t=>o.push(t.src)):o.push(e.src),this.cmds.onChangeBackgroundVideo({target:{value:o.join(",")}}),this.galleryOpened=!1},onChangeHeight:t=>{const e=t.target.value;n.Ay.store().execCommand("style",{height:e+"%"}),this.height=e},onChangeMargin:t=>{const e=t.target.value,o=t.target.direction;"all"===o?(n.Ay.store().execCommand("style",{marginTop:e+"px",marginBottom:e+"px"}),this.margin={topValue:e,bottomValue:e}):n.Ay.store().execCommand("style",{[(0,c.A)(`margin-${o.toLowerCase()}`)]:e+"px"})},onChangePadding:t=>{const e=t.target.value,o=t.target.direction,r=(0,c.A)(`padding-${o.toLowerCase()}`);"all"===o?(n.Ay.store().execCommand("style",{padding:null,"padding-top":null,"padding-bottom":null,"padding-left":null,"padding-right":null,paddingTop:e+"px",paddingBottom:e+"px",paddingLeft:e+"px",paddingRight:e+"px","padding-right":null,"padding-left":null,"padding-top":null,"padding-bottom":null}),this.padding={topValue:e,bottomValue:e,leftValue:e,rightValue:e}):(n.Ay.store().execCommand("style",{[r]:e+"px",[`padding-${o.toLowerCase()}`]:null}),this.props.style={[r]:e+"px"},this[`padding${o.toLowerCase()}`]=e)},onChangebackground(t){const e=t.target.value;this.background=e;n.Ay.components.forEach(t=>{const o=t.find("text");if(o&&!o.closest("card")){let t=o.tiptap.getAttributes("textStyle").color;if(!t){const e=o.element.querySelector("p,h1,h2,h3,h4,h5,h6");e&&(t=window.getComputedStyle(e).color)}if(t){if("transparent"===t)return;if(!t.includes("var(--")&&!e.includes("var(--")&&"transparent"!==e&&"rgba(0, 0, 0, 0)"!==e&&"rgb(0, 0, 0)"!==e){const r=(0,l.w)(t,e);o.tiptap.chain().selectAll().setColor(r).run()}}}}),n.Ay.store().execCommand("style",{background:e,backgroundColor:null});"web"!==i.M.get("config","channel")&&n.Ay.store().execCommand("background",null)}}}onChangeImageBackgroundProp(t){const e=t.detail,{key:o,value:r}=e;if(this.props.background){const t=JSON.parse(JSON.stringify(this.props.background)),e=t.properties;if(!e.style[o])throw new Error(`${o} is not a valid property`);e.style[o]=r,n.Ay.store().execCommand("background",t)}}connectedCallback(){super.connectedCallback(),this.connectWith(),n.Ay.on("update",this.connectWith)}disconnectedCallback(){super.disconnectedCallback(),n.Ay.off("update",this.connectWith)}onChangeWidth(t){let e=t.target.value;e<500&&(e=500),e>1e3&&(e=1e3);const o=this.getInnerBlocks();n.Ay.store().execCommand2({transactions:[{key:"style",value:{width:e+"px",maxWidth:"100%"}}],update:[...o]}),this.maxWidth=e}connectWith(){const t=n.Ay.components[n.Ay.components.length-1];if(this.component=t,t&&"block"===t.type){this.props=t.props;let{style:e}=this.props;e||(e={}),t.props||(t.props={}),t.props.style||(t.props.style={}),this.expand_image_for_outlook=!!t.props.expand_image_for_outlook,this.boxShadow=t.props.style.boxShadow,this.borderStyle=t.props.style.borderStyle,this.borderWidth=t.props.style.borderWidth,this.borderTopRightRadius=parseInt(t.props.style.borderTopRightRadius),this.borderTopLeftRadius=parseInt(t.props.style.borderTopLeftRadius),this.borderBottomRightRadius=parseInt(t.props.style.borderBottomRightRadius),this.borderBottomLeftRadius=parseInt(t.props.style.borderBottomLeftRadius),this.borderTopWidth=parseInt(t.props.style.borderTopWidth),this.borderBottomWidth=parseInt(t.props.style.borderBottomWidth),this.borderLeftWidth=parseInt(t.props.style.borderLeftWidth),this.borderRightWidth=parseInt(t.props.style.borderRightWidth),this.borderColor=t.props.style.borderColor;const o=t.props.background;if(this.isBackgroundImage="images"===o?.type,this.noResponsive=!!t.props.noResponsive,this.modalable=!!t.props.modalable,this.modalName=t.props.modalName||"",this.isBackgroundImage){const t=o.properties;this.backgroundAttachment=t.style.backgroundAttachment,this.backgroundPosition=t.style.backgroundPosition,this.backgroundRepeat=t.style.backgroundRepeat,this.backgroundSize=t.style.backgroundSize}this.backgroundInstance=o,this.backgroundVideo=o?.properties?.src||o?.properties?.url||"";const r=t.element,i=window.getComputedStyle(r);this.maxWidth=parseInt(i.width),this.width=parseInt(e.width,10)||this.maxWidth,this.background=e.background||e.backgroundImage||i.backgroundColor,e.backgroundImage&&(this.background=`url(${e.backgroundImage})`),this.padding={topValue:parseInt(i.paddingTop),bottomValue:parseInt(i.paddingBottom),leftValue:parseInt(i.paddingLeft),rightValue:parseInt(i.paddingRight)},this.margin={topValue:parseInt(i.marginTop),bottomValue:parseInt(i.marginBottom)}}}changeTab(t){this.tabName=t.target.value}_toggleModalable(t){this.modalable=t,n.Ay.store().execCommand("modalable",this.modalable)}_setModalName(t){this.modalName=t,n.Ay.store().execCommand("modalName",t)}_onToggleAll(){this._sectionsExpanded=!this._sectionsExpanded,this.shadowRoot.querySelectorAll("cdtr-editor-section").forEach(t=>{t.open=this._sectionsExpanded})}render(){const t=i.M.get("config","channel");return r.qy`
       <cdtr-editor-tabs .tabs=${this.tabs} @tabChanged=${this.changeTab}>
         <div slot="content">
-          ${"background"===this.tabName?o.qy` <cdtr-editor-container>
-                  <cdtr-row justify="space-between">
-                    <cdtr-col sm="5"
-                      ><paper-button
-                        class="gallery"
-                        raised
-                        @click=${()=>this.galleryOpened=!0}
-                        ><lang-text
-                          text="openGalleryImage"
-                        ></lang-text></paper-button
-                    ></cdtr-col>
-                    <cdtr-col sm="5">
-                      <paper-button
-                        class="backgrounds"
-                        raised
-                        @click=${()=>n.A.dispatch("open_add_menu",{type:"backgrounds",disabledOptions:!0,target:d.Ay.components[0]})}
-                        ><lang-text
-                          text="backgrounds"
-                        ></lang-text></paper-button
-                    ></cdtr-col>
-                  </cdtr-row>
-                </cdtr-editor-container>
-                ${this.isBackgroundImage&&"web"===t?o.qy`<cdtr-editor-container>
-                      <background-editor-plugin
+          <div style="display:flex;justify-content:flex-start;padding:12px 16px 4px;">
+            <span
+              @click=${()=>this._onToggleAll()}
+              @mouseover=${t=>{t.currentTarget.style.color="#333",t.currentTarget.style.textDecoration="underline"}}
+              @mouseout=${t=>{t.currentTarget.style.color="#555",t.currentTarget.style.textDecoration="none"}}
+              style="display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#555;cursor:pointer;font-family:inherit;"
+            >
+              <lang-text text=${this._sectionsExpanded?"collapse_all":"expand_all"}></lang-text>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="7 8 12 3 17 8"></polyline>
+                <polyline points="7 16 12 21 17 16"></polyline>
+              </svg>
+            </span>
+          </div>
+          ${"background"===this.tabName?r.qy`
+                <cdtr-editor-section label="backgroundColor" .open=${!0}>
+                  <cdtr-color-swatch-group
+                    .columns=${1}
+                    .items=${[{title:"backgroundColor",allowGradient:"web"===t,value:this.background||"#ffffff",onChange:t=>this.cmds.onChangebackground(t)}]}
+                  ></cdtr-color-swatch-group>
+                </cdtr-editor-section>
+
+                <cdtr-editor-section label="backgrounds" .open=${!0}>
+                  <div style="display:flex;gap:8px;">
+                    <paper-button
+                      class="gallery"
+                      @click=${()=>this.galleryOpened=!0}
+                      ><lang-text
+                        text="openGalleryImage"
+                      ></lang-text></paper-button>
+                    <paper-button
+                      class="backgrounds"
+                      @click=${()=>a.A.dispatch("open_add_menu",{type:"backgrounds",disabledOptions:!0,target:n.Ay.components[0]})}
+                      ><lang-text
+                        text="backgrounds"
+                      ></lang-text></paper-button>
+                  </div>
+                  ${this.isBackgroundImage&&"web"===t?r.qy`<background-editor-plugin
+                        style="margin-top:8px;"
                         backgroundAttachment=${this.backgroundAttachment}
                         backgroundPosition=${this.backgroundPosition}
                         backgroundRepeat=${this.backgroundRepeat}
                         backgroundSize=${this.backgroundSize}
                         @change=${this.onChangeImageBackgroundProp}
-                      ></background-editor-plugin
-                    ></cdtr-editor-container>`:null}
-                <cdtr-editor-container>
-                  <cdtr-row>
-                    <cdtr-title
-                      ><lang-text
-                        text="add_urlAddress_from_media_site"
-                      ></lang-text
-                    ></cdtr-title>
-                  </cdtr-row>
-                  <cdtr-row>
-                    <cdtr-input
-                      .value="${this.backgroundVideo}"
-                      @input=${this.cmds.onChangeBackgroundVideo}
-                      style="width:100%;direction:ltr;text-align:left;"
-                      placeholder="https://"
-                    ></cdtr-input>
-                    ${"object"==typeof this.backgroundInstance&&this.backgroundInstance?.component?o.qy`<paper-button
-                          style=" font-size: 13px;
-   padding: 0;
-   text-align: var(--text-align-locale);
-   direction: var(--direction-locale);
-   justify-content: flex-start;
-   color:red;
-   margin: 0;"
-                          @click=${this.cmds.onRemoveBackgroundVideo}
-                          ><lang-text text="remove_background_movie"></lang-text
-                        ></paper-button>`:null}
-                  </cdtr-row>
-                </cdtr-editor-container>
-                <cdtr-divider></cdtr-divider>
-                <cdtr-editor-container>
-                  <cdtr-colorpicker-editor
-                    .hasAlpha=${"web"===t}
-                    @change=${this.cmds.onChangebackground}
-                    .value=${this.background}
-                    text="backgroundColor"
-                  ></cdtr-colorpicker-editor>
-                </cdtr-editor-container>
-                <cdtr-divider></cdtr-divider>
-                <cdtr-editor-container>
+                      ></background-editor-plugin>`:null}
+                </cdtr-editor-section>
+
+                <cdtr-editor-section label="add_urlAddress_from_media_site" .open=${!1}>
+                  <cdtr-input
+                    .value="${this.backgroundVideo}"
+                    @input=${this.cmds.onChangeBackgroundVideo}
+                    style="width:100%;direction:ltr;text-align:left;"
+                    placeholder="https://"
+                  ></cdtr-input>
+                  ${"object"==typeof this.backgroundInstance&&this.backgroundInstance?.component?r.qy`<paper-button
+                        style="font-size:12px;padding:0;text-align:var(--text-align-locale);direction:var(--direction-locale);justify-content:flex-start;color:red;margin:4px 0 0;text-transform:none;"
+                        @click=${this.cmds.onRemoveBackgroundVideo}
+                        ><lang-text text="remove_background_movie"></lang-text
+                      ></paper-button>`:null}
+                </cdtr-editor-section>
+
+                <cdtr-editor-section label="settings" .open=${!1}>
                   <cdtr-checkbox
                     @change=${t=>this.onChangeBakgroundExpanding(t)}
                     .checked=${this.expand_image_for_outlook}
@@ -85,18 +77,16 @@
                       text="expand_image_for_outlook_description"
                     ></lang-text>
                   </h6>
-                </cdtr-editor-container>
-                <cdtr-divider></cdtr-divider>`:null}
-          ${"design"===this.tabName?o.qy`
-                <cdtr-editor-container>
-                  <cdtr-colorpicker-editor
-                    .hasAlpha=${!1}
-                    @change=${this.cmds.onChangebackground}
-                    .value=${this.background}
-                    text="backgroundColor"
-                  ></cdtr-colorpicker-editor>
-                </cdtr-editor-container>
-                <cdtr-editor-container>
+                </cdtr-editor-section>`:null}
+          ${"design"===this.tabName?r.qy`
+                <cdtr-editor-section label="backgroundColor" .open=${!0}>
+                  <cdtr-color-swatch-group
+                    .columns=${1}
+                    .items=${[{title:"backgroundColor",allowGradient:"web"===t,value:this.background||"#ffffff",onChange:t=>this.cmds.onChangebackground(t)}]}
+                  ></cdtr-color-swatch-group>
+                </cdtr-editor-section>
+
+                <cdtr-editor-section label="width" .open=${!0}>
                   <cdtr-width-editor
                     text="width"
                     unit="px"
@@ -109,53 +99,23 @@
                   <p style="font-size:12px">
                     <lang-text whiteSpace="" text="email_600"></lang-text>
                   </p>
-                </cdtr-editor-container>
-                <cdtr-divider></cdtr-divider>
-                <cdtr-editor-container>
-                  <cdtr-row justify="center">
-                    <cdtr-col sm="12"
-                      ><cdtr-title style="display:block" class="align-lang"
-                        ><lang-text text="padding"></lang-text></cdtr-title
-                    ></cdtr-col>
-                    <cdtr-col sm="6"
-                      ><cdtr-spacing
-                        .topValue="${this.padding.topValue}"
-                        .bottomValue="${this.padding.bottomValue}"
-                        .leftValue="${this.padding.leftValue}"
-                        .rightValue="${this.padding.rightValue}"
-                        isLock=${!1}
-                        max="500"
-                        @input=${this.cmds.onChangePadding}
-                      ></cdtr-spacing
-                    ></cdtr-col>
-                  </cdtr-row>
-                </cdtr-editor-container>
+                </cdtr-editor-section>
 
-                <cdtr-divider></cdtr-divider>
-                <cdtr-editor-container>
-                  <cdtr-row alignItems="center" justify="space-between">
-                    <cdtr-col>
-                      <cdtr-title>
-                        <lang-text text="no_responsive"></lang-text>
-                      </cdtr-title>
-                    </cdtr-col>
-                    <cdtr-col sm="1">
-                      <cdtr-checkbox
-                        @change=${this.cmds.toggleResponsive}
-                        .checked="${this.noResponsive}"
-                      ></cdtr-checkbox>
-                    </cdtr-col>
+                <cdtr-editor-section label="padding" .open=${!0}>
+                  <cdtr-row justify="center">
+                    <cdtr-spacing
+                      .topValue="${this.padding.topValue}"
+                      .bottomValue="${this.padding.bottomValue}"
+                      .leftValue="${this.padding.leftValue}"
+                      .rightValue="${this.padding.rightValue}"
+                      isLock=${!1}
+                      max="500"
+                      @input=${this.cmds.onChangePadding}
+                    ></cdtr-spacing>
                   </cdtr-row>
-                </cdtr-editor-container>
-                <!-- <cdtr-divider></cdtr-divider>
-                <cdtr-editor-container>
-                  <cdtr-radius-editor
-                    @input=${this.cmds.onchangeRadius}
-                  ></cdtr-radius-editor>
-                </cdtr-editor-container> -->
-                <cdtr-divider></cdtr-divider>
+                </cdtr-editor-section>
 
-                <cdtr-editor-container>
+                <cdtr-editor-section label="border_design" .open=${!1}>
                   <cdtr-border-editor
                     .borderStyle=${this.borderStyle}
                     .borderWidth=${this.borderWidth}
@@ -170,11 +130,63 @@
                     .borderBottomLeftRadius=${this.borderBottomLeftRadius}
                     @change=${this.cmds.onChangeBorderStyle}
                   ></cdtr-border-editor>
-                </cdtr-editor-container>
+                </cdtr-editor-section>
+
+                <cdtr-editor-section label="settings" .open=${!1}>
+                  <cdtr-row alignItems="center" justify="space-between">
+                    <cdtr-col>
+                      <cdtr-title>
+                        <lang-text text="no_responsive"></lang-text>
+                      </cdtr-title>
+                    </cdtr-col>
+                    <cdtr-col sm="1">
+                      <cdtr-checkbox
+                        @change=${this.cmds.toggleResponsive}
+                        .checked="${this.noResponsive}"
+                      ></cdtr-checkbox>
+                    </cdtr-col>
+                  </cdtr-row>
+                  ${"web"===t?r.qy`
+                        <cdtr-row alignItems="center" justify="space-between">
+                          <cdtr-col
+                            style="cursor:pointer"
+                            @click=${()=>this._toggleModalable(!this.modalable)}
+                          >
+                            <cdtr-tooltip content="modal_hidden_on_view">
+                              <cdtr-title>
+                                <lang-text text="mark_as_modal"></lang-text>
+                              </cdtr-title>
+                            </cdtr-tooltip>
+                          </cdtr-col>
+                          <cdtr-col sm="1">
+                            <cdtr-checkbox
+                              @change=${t=>this._toggleModalable(!t.target.checked)}
+                              .checked="${this.modalable}"
+                            ></cdtr-checkbox>
+                          </cdtr-col>
+                        </cdtr-row>
+                        ${this.modalable?r.qy`
+                              <cdtr-title style="display:block;margin-top:8px">
+                                <lang-text text="modal_name"></lang-text>
+                              </cdtr-title>
+                              <cdtr-input
+                                style="width:100%"
+                                .value=${this.modalName||""}
+                                .placeholder=${i.M.get("lang","modal_name")||""}
+                                @change=${t=>this._setModalName(t.target.value)}
+                              ></cdtr-input>
+                              <p
+                                style="font-size:12px;color:#888;line-height:1.5;margin:4px 0 0;font-style:italic;"
+                              >
+                                <lang-text text="modal_name_hint"></lang-text>
+                              </p>
+                            `:null}
+                      `:null}
+                </cdtr-editor-section>
               `:null}
 
-          <!-- ${"typography"===this.tabName?o.qy` <cdtr-text-editor-plugin></cdtr-text-editor-plugin> `:null} -->
-          <!-- ${"spacing"===this.tabName?o.qy`
+          <!-- ${"typography"===this.tabName?r.qy` <cdtr-text-editor-plugin></cdtr-text-editor-plugin> `:null} -->
+          <!-- ${"spacing"===this.tabName?r.qy`
                 <cdtr-editor-container>
                   <cdtr-row justify="center">
                     <cdtr-col sm="12"
@@ -222,13 +234,170 @@
         .opened=${this.galleryOpened}
         @file=${this.cmds.onChangeImage}
       ></cdtr-gallery>
-    `}}g.styles=o.AH`
+    `}}g.styles=r.AH`
+    paper-button.gallery,
+    paper-button.backgrounds {
+      text-transform: none;
+      font-size: 12.5px;
+      font-weight: 500;
+      letter-spacing: 0.01em;
+      border-radius: 6px;
+      padding: 6px 12px;
+      min-width: 0;
+    }
     paper-button.gallery {
       background: var(--primary);
       color: var(--primary-text);
     }
     paper-button.backgrounds {
-      background: BLACK;
+      background: #333;
       color: #fff;
     }
-  `,g.properties={maxWidth:{type:Number},backgroundInstance:{type:Object},padding:{type:Object},margin:{type:Object},tabs:{type:Array},tabName:{type:String},galleryOpened:{type:Boolean},backgroundVideo:{type:String,reflect:!0},isBackgroundImage:{type:Boolean},backgroundAttachment:{type:String},backgroundPosition:{type:String},backgroundRepeat:{type:String},backgroundSize:{type:String},noResponsive:{type:Boolean},borderStyle:{type:String},borderWidth:{type:Number},borderColor:{type:String},borderTopRightRadius:{type:Number},borderTopLeftRadius:{type:Number},borderBottomRightRadius:{type:Number},borderBottomLeftRadius:{type:Number},borderTopWidth:{type:Number},borderBottomWidth:{type:Number},borderLeftWidth:{type:Number},borderRightWidth:{type:Number}},customElements.define("block-editor",g)}}]);
+  `,g.properties={maxWidth:{type:Number},backgroundInstance:{type:Object},padding:{type:Object},margin:{type:Object},tabs:{type:Array},tabName:{type:String},galleryOpened:{type:Boolean},backgroundVideo:{type:String,reflect:!0},isBackgroundImage:{type:Boolean},backgroundAttachment:{type:String},backgroundPosition:{type:String},backgroundRepeat:{type:String},backgroundSize:{type:String},noResponsive:{type:Boolean},modalable:{type:Boolean},modalName:{type:String},borderStyle:{type:String},borderWidth:{type:Number},borderColor:{type:String},borderTopRightRadius:{type:Number},borderTopLeftRadius:{type:Number},borderBottomRightRadius:{type:Number},borderBottomLeftRadius:{type:Number},borderTopWidth:{type:Number},borderBottomWidth:{type:Number},borderLeftWidth:{type:Number},borderRightWidth:{type:Number},_sectionsExpanded:{type:Boolean,state:!0}},customElements.define("block-editor",g)},15155(t,e,o){o.d(e,{A:()=>a});var r=o(59929),i=o(57176);class n extends r.WF{constructor(){super(),this.items=[],this.columns=2}async openPicker(t){const e=this.shadowRoot.querySelector(`#picker-${t}`);if(!e)return;await e.updateComplete;const o=e.shadowRoot?.querySelector("color-playground");if(o)if(await o.updateComplete,"function"==typeof o.openColorpicker)o.openColorpicker();else{(o.shadowRoot?.querySelector('[role="button"]')||o.shadowRoot?.querySelector("div")||o).click()}}render(){const t=1===this.columns?"grid single-col":"grid";return r.qy`
+      <div class="${t}">
+        ${(this.items||[]).map((t,e)=>r.qy`
+            <div class="swatch-item" @click=${()=>this.openPicker(e)}>
+              <div
+                class="swatch-circle"
+                style="background: ${t.value||"#fff"}"
+              ></div>
+              <span class="swatch-label">
+                <lang-text text="${t.title}"></lang-text>
+              </span>
+              <div class="hidden-picker">
+                <cdtr-colorpicker-editor
+                  id="picker-${e}"
+                  .hasAlpha=${!1}
+                  .allowGradient=${!0===t.allowGradient}
+                  @change=${t.onChange}
+                  .value=${t.value}
+                  text="${t.title}"
+                ></cdtr-colorpicker-editor>
+              </div>
+            </div>
+          `)}
+      </div>
+    `}}n.styles=[i.L,r.AH`
+    :host {
+      display: block;
+      direction: var(--direction-locale, ltr);
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+    .grid.single-col {
+      grid-template-columns: 1fr;
+    }
+    .swatch-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 10px;
+      background: #f6f6f8;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.15s ease;
+      min-width: 0;
+      overflow: hidden;
+      position: relative;
+    }
+    .swatch-item:hover {
+      background: #eeeff1;
+    }
+    .swatch-label {
+      font-size: 11px;
+      color: #555;
+      font-weight: 500;
+      line-height: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      flex: 1;
+    }
+    .hidden-picker {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0,0,0,0);
+      pointer-events: none;
+    }
+  `],n.properties={items:{type:Array},columns:{type:Number}},customElements.define("cdtr-color-swatch-group",n);const a=t=>r.qy`
+  <cdtr-color-swatch-group
+    .items=${t.items}
+    .columns=${t.columns||2}
+  ></cdtr-color-swatch-group>
+`},12258(t,e,o){o.d(e,{A:()=>a});var r=o(59929),i=o(40648);class n extends r.WF{constructor(){super(),this.label="",this.open=!0,this.persistKey=""}toggle(){this.open=!this.open,(0,i.Q)(this.persistKey,this.open)}render(){return r.qy`
+      <div class="section">
+        <div class="header" @click=${this.toggle}>
+          <span class="title"><lang-text text="${this.label}"></lang-text></span>
+          <svg class="chevron ${this.open?"open":""}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </div>
+        <div class="content ${this.open?"open":""}">
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `}}n.styles=r.AH`
+    :host {
+      display: block;
+      direction: var(--direction-locale, ltr);
+      --editor-container-inline-padding: 0;
+    }
+    .section {
+      border-bottom: 1px solid #eaeaee;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .title {
+      font-size: 12.5px;
+      font-weight: 600;
+      color: #222;
+      letter-spacing: 0.01em;
+    }
+    .chevron {
+      width: 16px;
+      height: 16px;
+      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
+      color: #ccc;
+    }
+    .header:hover .chevron {
+      color: #888;
+    }
+    .chevron.open {
+      transform: rotate(180deg);
+    }
+    .content {
+      overflow: hidden;
+      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+      max-height: 0;
+      opacity: 0;
+    }
+    .content.open {
+      max-height: 1200px;
+      opacity: 1;
+    }
+    .content-inner {
+      padding: 0 16px 12px 16px;
+    }
+  `,n.properties={label:{type:String},open:{type:Boolean},persistKey:{type:String}},customElements.define("cdtr-editor-section",n);const a=(t,e)=>r.qy`
+  <cdtr-editor-section
+    .label=${t.label}
+    .open=${!1!==t.open}
+    .persistKey=${t.persistKey||""}
+  >
+    ${e}
+  </cdtr-editor-section>
+`},40648(t,e,o){o.d(e,{Q:()=>a,i:()=>n});const r="cdtr:section-open";function i(){try{const t=localStorage.getItem(r);return t?JSON.parse(t):{}}catch(t){return{}}}function n(t){if(!t)return;const e=i();return Object.prototype.hasOwnProperty.call(e,t)?!!e[t]:void 0}function a(t,e){if(!t)return;const o=i();o[t]=!!e,function(t){try{localStorage.setItem(r,JSON.stringify(t))}catch(t){}}(o)}}}]);