@creaditor/web-starterkit 1.0.20 → 1.0.21

package/dist/7654.creaditor.bundle.js

@@ -1,4 +1,4 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7654],{12258(e,t,o){o.d(t,{A:()=>r});var n=o(59929),s=o(40648);class i extends n.WF{constructor(){super(),this.label="",this.open=!0,this.persistKey=""}toggle(){this.open=!this.open,(0,s.Q)(this.persistKey,this.open)}render(){return n.qy`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7654],{12258(e,t,o){o.d(t,{A:()=>a});var s=o(59929),r=o(40648);class n extends s.WF{constructor(){super(),this.label="",this.open=!0,this.persistKey=""}toggle(){this.open=!this.open,(0,r.Q)(this.persistKey,this.open)}render(){return s.qy`
       <div class="section">
         <div class="header" @click=${this.toggle}>
           <span class="title"><lang-text text="${this.label}"></lang-text></span>
@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-    `}}i.styles=n.AH`
+    `}}n.styles=s.AH`
     :host {
       display: block;
       direction: var(--direction-locale, ltr);
@@ -60,7 +60,7 @@
     .content-inner {
       padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
     }
-  `,i.properties={label:{type:String,reflect:!0,attribute:"data-label"},open:{type:Boolean,reflect:!0},persistKey:{type:String}},customElements.define("cdtr-editor-section",i);const r=(e,t)=>n.qy`
+  `,n.properties={label:{type:String,reflect:!0,attribute:"data-label"},open:{type:Boolean,reflect:!0},persistKey:{type:String}},customElements.define("cdtr-editor-section",n);const a=(e,t)=>s.qy`
   <cdtr-editor-section
     .label=${e.label}
     .open=${!1!==e.open}
@@ -68,32 +68,39 @@
   >
     ${t}
   </cdtr-editor-section>
-`},37654(e,t,o){o.r(t),o.d(t,{SettingEditor:()=>c});var n=o(59929),s=o(86319),i=o(36565);o(12258);const r=n.JW`<path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.99C2.44 18 2 17.55 2 17V4.01C2 3.45 2.46 3 2.99 3H21.01C21.56 3 22 3.45 22 4.01V17C22 17.55 21.54 18 21.01 18H13Z"/>`,a=n.JW`<path d="M4 6H20V18H4V6ZM2 5C2 4.45 2.45 4 3 4H21C21.55 4 22 4.45 22 5V19C22 19.55 21.55 20 21 20H3C2.45 20 2 19.55 2 19V5ZM17 11C17 11.55 17.45 12 18 12C18.55 12 19 11.55 19 11C19 10.45 18.55 10 18 10C17.45 10 17 10.45 17 11Z"/>`,l=n.JW`<path d="M7 4V20H17V4H7ZM6 2H18C18.55 2 19 2.45 19 3V21C19 21.55 18.55 22 18 22H6C5.45 22 5 21.55 5 21V3C5 2.45 5.45 2 6 2ZM12 17C12.55 17 13 17.45 13 18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18C11 17.45 11.45 17 12 17Z"/>`;class c extends n.WF{constructor(){super(),this.onInspect=this.onInspect.bind(this),this.name="",this.element_ID=" ",this.cmds={onToggleDisplayMode:(e,t)=>{i.Ay.store().execCommand(`show_on_${e}`,t),this[`show_on_${e}`]=t},onChangeElementID(e){i.Ay.store().execCommand("element_ID",e.target.value)},onChangeName(e){i.Ay.store().execCommand("name",e.target.value)}}}onInspect(){if(i.Ay.components.length>0){const e=i.Ay.components[0].props;this.show_on_desktop=!!e.show_on_desktop,this.show_on_tablet=!!e.show_on_tablet,this.show_on_mobile=!!e.show_on_mobile,this.name=e.name||"",this.element_ID=e.element_ID||""}}connectedCallback(){super.connectedCallback(),i.Ay.on("select",this.onInspect),i.Ay.on("update",this.onInspect),this.onInspect()}disconnectedCallback(){super.disconnectedCallback(),i.Ay.off("select",this.onInspect),i.Ay.off("update",this.onInspect)}render(){const e=i.Ay.getSelectedComponent();if(!e||0===e.length)return n.qy``;const t="block"===e[0].type,o="web"===s.M.get("config","channel")||t;return n.qy`
-      ${o?n.qy`<cdtr-editor-section label="display_mode" .open=${!0}>
+`},37654(e,t,o){o.r(t),o.d(t,{SettingEditor:()=>c});var s=o(59929),r=o(86319),n=o(36565);o(12258);const a=s.JW`<path d="M4 16H20V5H4V16ZM13 18V20H17V22H7V20H11V18H2.99C2.44 18 2 17.55 2 17V4.01C2 3.45 2.46 3 2.99 3H21.01C21.56 3 22 3.45 22 4.01V17C22 17.55 21.54 18 21.01 18H13Z"/>`,i=s.JW`<path d="M4 6H20V18H4V6ZM2 5C2 4.45 2.45 4 3 4H21C21.55 4 22 4.45 22 5V19C22 19.55 21.55 20 21 20H3C2.45 20 2 19.55 2 19V5ZM17 11C17 11.55 17.45 12 18 12C18.55 12 19 11.55 19 11C19 10.45 18.55 10 18 10C17.45 10 17 10.45 17 11Z"/>`,l=s.JW`<path d="M7 4V20H17V4H7ZM6 2H18C18.55 2 19 2.45 19 3V21C19 21.55 18.55 22 18 22H6C5.45 22 5 21.55 5 21V3C5 2.45 5.45 2 6 2ZM12 17C12.55 17 13 17.45 13 18C13 18.55 12.55 19 12 19C11.45 19 11 18.55 11 18C11 17.45 11.45 17 12 17Z"/>`;class c extends s.WF{constructor(){super(),this.onInspect=this.onInspect.bind(this),this.name="",this.element_ID=" ",this.cmds={onToggleDisplayMode:(e,t)=>{n.Ay.store().execCommand(`show_on_${e}`,t),this[`show_on_${e}`]=t},onChangeElementID(e){n.Ay.store().execCommand("element_ID",e.target.value)},onChangeName(e){n.Ay.store().execCommand("name",e.target.value)}}}onInspect(){if(n.Ay.components.length>0){const e=n.Ay.components[0].props;this.show_on_desktop=!!e.show_on_desktop,this.show_on_tablet=!!e.show_on_tablet,this.show_on_mobile=!!e.show_on_mobile,this.name=e.name||"",this.element_ID=e.element_ID||""}}connectedCallback(){super.connectedCallback(),n.Ay.on("select",this.onInspect),n.Ay.on("update",this.onInspect),this.onInspect()}disconnectedCallback(){super.disconnectedCallback(),n.Ay.off("select",this.onInspect),n.Ay.off("update",this.onInspect)}renderCheck(){return s.qy`<svg class="check" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="12" cy="12" r="12" fill="currentColor"></circle>
+      <path d="M7 12.5l3.2 3.2L17 9" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>`}render(){const e=n.Ay.getSelectedComponent();if(!e||0===e.length)return s.qy``;const t="block"===e[0].type,o="web"===r.M.get("config","channel")||t;return s.qy`
+      ${o?s.qy`<cdtr-editor-section label="display_mode" .open=${!0}>
+              <span class="device-toggle-title"><lang-text text="show_element_on"></lang-text></span>
               <div class="device-toggle-row">
                 <div
                   class="device-toggle-btn ${this.show_on_desktop?"active":""}"
                   @click=${()=>this.cmds.onToggleDisplayMode("desktop",!this.show_on_desktop)}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${r}</svg>
+                  ${this.renderCheck()}
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${a}</svg>
                   <lang-text text="desktop"></lang-text>
                 </div>
                 <div
                   class="device-toggle-btn ${this.show_on_tablet?"active":""}"
                   @click=${()=>this.cmds.onToggleDisplayMode("tablet",!this.show_on_tablet)}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${a}</svg>
+                  ${this.renderCheck()}
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${i}</svg>
                   <lang-text text="tablet"></lang-text>
                 </div>
                 <div
                   class="device-toggle-btn ${this.show_on_mobile?"active":""}"
                   @click=${()=>this.cmds.onToggleDisplayMode("mobile",!this.show_on_mobile)}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${l}</svg>
+                  ${this.renderCheck()}
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${l}</svg>
                   <lang-text text="mobile"></lang-text>
                 </div>
               </div>
-          </cdtr-editor-section>`:n.qy``}
+          </cdtr-editor-section>`:s.qy``}
       <cdtr-editor-section label="properties" .open=${!0}>
           <cdtr-row mt="1">
             <cdtr-title><lang-text text="name"></lang-text></cdtr-title>
@@ -120,38 +127,72 @@
             ></cdtr-input>
           </cdtr-row>
       </cdtr-editor-section>
-    `}}c.properties={name:{},element_ID:{},show_on_desktop:{},show_on_tablet:{},show_on_mobile:{}},c.styles=n.AH`
+    `}}c.properties={name:{},element_ID:{},show_on_desktop:{},show_on_tablet:{},show_on_mobile:{}},c.styles=s.AH`
     :host {
       direction: var(--direction-locale);
     }
+    .device-toggle-title {
+      display: block;
+      margin-bottom: var(--space-2, 8px);
+      font-size: var(--text-sm, 13px);
+      font-weight: 600;
+      color: var(--color-text, #333);
+    }
     .device-toggle-row {
       display: flex;
       gap: var(--space-2, 8px);
     }
     .device-toggle-btn {
+      position: relative;
+      flex: 1 1 0;
       display: flex;
+      flex-direction: column;
       align-items: center;
-      gap: var(--space-1, 4px);
-      padding: var(--space-2, 8px) var(--space-3, 12px);
-      border: none;
-      border-radius: var(--radius-sm, 6px);
+      justify-content: center;
+      gap: var(--space-2, 8px);
+      padding: var(--space-3, 12px) var(--space-2, 8px);
+      border: 1px solid var(--color-border, #e6e6ea);
+      border-radius: var(--radius-md, 10px);
       cursor: pointer;
       color: var(--color-text-faint, #bbb);
-      background: var(--color-bg-muted, #f4f4f6);
+      background: var(--color-bg, #fff);
       transition: background var(--duration-fast, 120ms) var(--ease-default, ease),
-                  color var(--duration-fast, 120ms) var(--ease-default, ease);
+                  color var(--duration-fast, 120ms) var(--ease-default, ease),
+                  border-color var(--duration-fast, 120ms) var(--ease-default, ease),
+                  box-shadow var(--duration-fast, 120ms) var(--ease-default, ease);
       font-size: var(--text-xs, 12px);
+      font-weight: 500;
+      text-align: center;
     }
     .device-toggle-btn:hover {
-      background: #eaeaed;
+      border-color: var(--color-border-strong, #d0d0d6);
       color: var(--color-text-muted, #888);
+      background: var(--color-bg-muted, #f7f7f9);
     }
     .device-toggle-btn svg {
+      width: 22px;
+      height: 22px;
       fill: currentColor;
       flex-shrink: 0;
     }
     .device-toggle-btn.active {
+      border-color: var(--color-primary, #6366f1);
       background: var(--color-primary-soft, rgba(99, 102, 241, 0.08));
       color: var(--color-primary, #6366f1);
     }
+    .device-toggle-btn .check {
+      position: absolute;
+      top: 6px;
+      inset-inline-end: 6px;
+      width: 14px;
+      height: 14px;
+      opacity: 0;
+      transform: scale(0.6);
+      transition: opacity var(--duration-fast, 120ms) var(--ease-default, ease),
+                  transform var(--duration-fast, 120ms) var(--ease-default, ease);
+    }
+    .device-toggle-btn.active .check {
+      opacity: 1;
+      transform: scale(1);
+    }
   `,customElements.define("cdtr-setting-editor",c)}}]);

package/dist/8141.creaditor.bundle.js

@@ -1,5 +1,4 @@
-/*! For license information please see 8141.creaditor.bundle.js.LICENSE.txt */
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[8141],{68141(e,t,s){s.r(t),s.d(t,{ImagesPreset:()=>o});var r=s(59929),i=s(64749),n=s(70980);class o extends r.WF{constructor(){super(),this.index=0}render(){"string"!=typeof this.src&&(this.src="");const e=this.src.split(",");e.length>1&&setTimeout(()=>{const t=this.shadowRoot.querySelector(".background");t.classList.remove("fade-in"),this.index<e.length-1?this.index++:this.index=0,t&&setTimeout(()=>{t.classList.add("fade-in"),setTimeout(()=>{t.classList.remove("fade-in")},1e3)},0)},4500);const t=(0,i.t)(this.getAttribute("style"));return t.backgroundImage=`url(${e[this.index]})`,r.qy`<div style="${(0,n.W)(t)}" class="background"></div>`}}o.properties={src:{type:String},index:{type:Number},style:{type:String}},o.styles=r.AH`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[8141],{68141(e,t,s){s.r(t),s.d(t,{ImagesPreset:()=>o});var i=s(59929),r=s(64749),n=s(70980);class o extends i.WF{constructor(){super(),this.index=0}render(){"string"!=typeof this.src&&(this.src="");const e=this.src.split(",");e.length>1&&setTimeout(()=>{const t=this.shadowRoot.querySelector(".background");t.classList.remove("fade-in"),this.index<e.length-1?this.index++:this.index=0,t&&setTimeout(()=>{t.classList.add("fade-in"),setTimeout(()=>{t.classList.remove("fade-in")},1e3)},0)},4500);const t=(0,r.t)(this.getAttribute("style"));return t.backgroundImage=`url(${e[this.index]})`,i.qy`<div style="${(0,n.W)(t)}" class="background"></div>`}}o.properties={src:{type:String},index:{type:Number},style:{type:String}},o.styles=i.AH`
     .background {
       background-position: center center;
       background-size: cover;
@@ -18,4 +17,4 @@
         opacity: 1;
       }
     }
-  `,customElements.define("cdtr-images-preset",o)},70980(e,t,s){s.d(t,{W:()=>d});var r=s(80181),i=s(16655);const n="important",o=" !"+n,d=(0,i.u$)(class extends i.WL{constructor(e){if(super(e),e.type!==i.OA.ATTRIBUTE||"style"!==e.name||e.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce((t,s)=>{const r=e[s];return null==r?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${r};`},"")}update(e,[t]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)null==t[e]&&(this.ft.delete(e),e.includes("-")?s.removeProperty(e):s[e]=null);for(const e in t){const r=t[e];if(null!=r){this.ft.add(e);const t="string"==typeof r&&r.endsWith(o);e.includes("-")||t?s.setProperty(e,t?r.slice(0,-11):r,t?n:""):s[e]=r}}return r.c0}})}}]);
+  `,customElements.define("cdtr-images-preset",o)}}]);