builder-settings-types 0.0.251 → 0.0.253
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
font-weight: 500;
|
|
71
71
|
cursor: pointer;
|
|
72
72
|
transition: all 0.2s;
|
|
73
|
-
`,o.addEventListener("mouseenter",()=>{o.style.backgroundColor="#f9fafb",o.style.borderColor="#9ca3af"}),o.addEventListener("mouseleave",()=>{o.style.backgroundColor="white",o.style.borderColor="#d1d5db"}),l.addEventListener("mouseenter",()=>{l.style.backgroundColor="#dc2626"}),l.addEventListener("mouseleave",()=>{l.style.backgroundColor="#ef4444"});const r=()=>{e.style.opacity="0",i.style.transform="scale(0.95)",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},200)};o.addEventListener("click",()=>{r(),t(!1)}),l.addEventListener("click",()=>{r(),t(!0)}),e.addEventListener("click",d=>{d.target===e&&(r(),t(!1))});const h=d=>{d.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",h))};document.addEventListener("keydown",h),a.appendChild(o),a.appendChild(l),i.appendChild(s),i.appendChild(n),i.appendChild(a),e.appendChild(i),document.body.appendChild(e),requestAnimationFrame(()=>{e.style.opacity="1",i.style.transform="scale(1)"}),setTimeout(()=>l.focus(),100)})}getNextIndexFromPrefix(t){const e=Object.keys(this.settings).filter(i=>i.startsWith(t)).map(i=>{const s=Number(i.slice(t.length));return Number.isFinite(s)?s:-1}).filter(i=>i>=0);return e.length?Math.max(...e)+1:0}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];g(s)?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?g(e)?e.getValues():e.value:void 0}}getValuesForJson(t){if(t===void 0){if(this.includeGetJson===!1)return null;const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(g(s))
|
|
73
|
+
`,o.addEventListener("mouseenter",()=>{o.style.backgroundColor="#f9fafb",o.style.borderColor="#9ca3af"}),o.addEventListener("mouseleave",()=>{o.style.backgroundColor="white",o.style.borderColor="#d1d5db"}),l.addEventListener("mouseenter",()=>{l.style.backgroundColor="#dc2626"}),l.addEventListener("mouseleave",()=>{l.style.backgroundColor="#ef4444"});const r=()=>{e.style.opacity="0",i.style.transform="scale(0.95)",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},200)};o.addEventListener("click",()=>{r(),t(!1)}),l.addEventListener("click",()=>{r(),t(!0)}),e.addEventListener("click",d=>{d.target===e&&(r(),t(!1))});const h=d=>{d.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",h))};document.addEventListener("keydown",h),a.appendChild(o),a.appendChild(l),i.appendChild(s),i.appendChild(n),i.appendChild(a),e.appendChild(i),document.body.appendChild(e),requestAnimationFrame(()=>{e.style.opacity="1",i.style.transform="scale(1)"}),setTimeout(()=>l.focus(),100)})}getNextIndexFromPrefix(t){const e=Object.keys(this.settings).filter(i=>i.startsWith(t)).map(i=>{const s=Number(i.slice(t.length));return Number.isFinite(s)?s:-1}).filter(i=>i>=0);return e.length?Math.max(...e)+1:0}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];g(s)?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?g(e)?e.getValues():e.value:void 0}}getValuesForJson(t){if(t===void 0){if(this.includeGetJson===!1)return null;const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(g(s)){const n=s.getValuesForJson();n!==null&&(e[i]=n)}else{const n=s;n.includeGetJson!==!1&&(e[i]=n.value)}}return e}else{const e=this.settings[t];if(!e)return;if(g(e))return e.includeGetJson===!1?null:e.getValuesForJson();{const i=e;return i.includeGetJson===!1?null:i.value}}}getDefaultValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(g(s))e[i]=s.getDefaultValues();else{const n=s;e[i]=n.default!==void 0?n.default:n.value}}return e}else{const e=this.settings[t];if(!e)return;if(g(e))return e.getDefaultValues();const i=e;return i.default!==void 0?i.default:i.value}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,V.hiddenElements.add(t),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),k(t,this.nestingLevel);const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");i.className="title-section";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="actions-section";const a=document.createElement("span");a.className="setting-group-arrow",a.innerHTML=`
|
|
74
74
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
75
75
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
76
76
|
</svg>
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
xmlns="http://www.w3.org/2000/svg">
|
|
80
80
|
<path d="M8 3.333v9.334M3.333 8h9.334" stroke="currentColor"
|
|
81
81
|
stroke-width="1.5" stroke-linecap="round"/>
|
|
82
|
-
</svg>`;h.innerHTML=`${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,h.addEventListener("click",u=>{u.stopPropagation(),u.preventDefault();const b=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),y=this.addItemCfg.createItem(b);if(O(y)){const E=`${this.addItemCfg.keyPrefix}${b}`;this.addSetting(E,y)}}),o.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,P.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};V.hiddenElements=new Set;let v=V;function U(c){return new
|
|
82
|
+
</svg>`;h.innerHTML=`${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,h.addEventListener("click",u=>{u.stopPropagation(),u.preventDefault();const b=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),y=this.addItemCfg.createItem(b);if(O(y)){const E=`${this.addItemCfg.keyPrefix}${b}`;this.addSetting(E,y)}}),o.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,P.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};V.hiddenElements=new Set;let v=V;function U(c){return new T(c)}class T extends v{constructor(t){super(t);const e=Object.keys(this.settings)[0];this.activeTabId=e||""}getActiveTabId(){return this.activeTabId}switchToTab(t){this.settings[t]&&(this.activeTabId=t,this.updateTabUI())}updateTabUI(){if(!this.tabsContainer||!this.contentContainers)return;this.tabsContainer.querySelectorAll(".tab-button").forEach(e=>{e.getAttribute("data-tab-id")===this.activeTabId?e.classList.add("active"):e.classList.remove("active")}),Object.entries(this.contentContainers).forEach(([e,i])=>{e===this.activeTabId?i.classList.add("active"):i.classList.remove("active")})}draw(){const t=super.draw();t.classList.add("tabs-settings-container");const e=t.querySelector(".setting-group-content");if(!e)return t;e.innerHTML="";const i=document.createElement("div");i.className="tabs-title";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="tabs-header",this.tabsContainer=n;const a=document.createElement("div");if(a.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((o,l)=>{const r=document.createElement("button");r.className="tab-button",r.type="button",r.setAttribute("data-tab-id",o),r.textContent=o,r.addEventListener("click",()=>this.switchToTab(o)),n.appendChild(r);const h=document.createElement("div");h.className="tab-panel",this.contentContainers[o]=h;const d=this.settings[o];d&&(g(d)&&typeof d.setNestingLevel=="function"&&d.setNestingLevel(this.getNestingLevel()+1),h.appendChild(d.draw())),a.appendChild(h),l===0&&!this.activeTabId&&(this.activeTabId=o)}),e.appendChild(i),e.appendChild(n),e.appendChild(a),!this.activeTabId){const o=Object.keys(this.settings)[0];this.activeTabId=o||""}return this.updateTabUI(),t}}function B(c){return new v(c)}function J(c){return c}class $ extends p{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const q="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class m extends ${constructor(t){super({...t,icon:t.icon||q,title:t.title||"Color",default:t.default?m.normalizeColorValue(t.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("#")?m.normalizeHexValue(t):t.includes(",")?m.rgbToHexStatic(t):m.normalizeHexValue(t)}static normalizeHexValue(t){return t=t.replace("#",""),t.length===3&&(t=t.split("").map(e=>e+e).join("")),t.length!==6?(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(t)?`#${t.toLowerCase()}`:(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000")}static rgbToHexStatic(t){const e=t.split(",").map(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#000000";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=h=>{const d=h.toString(16);return d.length===1?"0"+d:d};return`#${r(a)}${r(o)}${r(l)}`}setValue(t){if(t===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof t=="string"){const e=m.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=e),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}draw(){const t=document.createElement("div");if(t.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const l=document.createElement("div");if(l.className="icon-container",this.props.icon){const r=document.createElement("span");r.className="input-icon",r.innerHTML=this.props.icon,l.appendChild(r)}if(this.props.title){const r=document.createElement("span");r.className="input-label",r.textContent=this.props.title,l.appendChild(r)}t.appendChild(l)}const e=document.createElement("div");e.className="color-input-wrapper";const i=l=>{const r=l.value.trim();if(!r)return e.classList.remove("error"),!0;const d=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(r);return d?e.classList.remove("error"):e.classList.add("error"),d},s=document.createElement("input");s.type="color",s.className="color-picker",s.value=this.value||"#000000",s.setAttribute("aria-label","Choose color"),s.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&s.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=s;const n=document.createElement("div");n.className="color-preview";const a=this.value||"#000000";n.style.backgroundColor=a;const o=document.createElement("input");return o.type="text",o.className="color-text-input",o.value=this.value||"",o.placeholder="#000000",o.setAttribute("pattern","#[0-9A-Fa-f]{6}"),o.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),o.setAttribute("aria-label","Hex color value"),o.setAttribute("maxlength","7"),this.getDataPropsPath()&&o.setAttribute("data-test-id",`${this.getDataPropsPath()}_text`),this.textInputEl=o,this.textInputEl.addEventListener("input",l=>{var h,d;let r=l.target.value.trim();if(this.textInputEl&&i(this.textInputEl)){const u=m.normalizeColorValue(r);this.value=u,(h=this.onChange)==null||h.call(this,u),(d=this.detectChange)==null||d.call(this,u),this.colorInputEl&&(this.colorInputEl.value=u),n.style.backgroundColor=u}}),this.colorInputEl.addEventListener("input",l=>{var d,u;const r=l.target.value,h=m.normalizeColorValue(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=h,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",l=>{var d,u;const r=l.target.value,h=m.normalizeColorValue(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=h}),e.appendChild(s),e.appendChild(n),e.appendChild(o),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?m.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const Z=`
|
|
83
83
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
84
84
|
<path d="M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
85
85
|
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
<svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
|
|
93
93
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
94
94
|
</svg>
|
|
95
|
-
`;class S extends p{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,this.resizeListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}setValue(t){super.setValue(t);const e=this._options.findIndex(i=>i.value===t);e>=0?this.selectedOptionIndex=e:this.selectedOptionIndex=null,this.updateButtonText()}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.getDataPropsPath()&&e.setAttribute("data-test-id",this.getDataPropsPath()),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,this.isOpen?this.checkDropdownPosition():this.cleanupDropdownPosition(),(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),document.body.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=Y,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.cleanupDropdownPosition())},document.addEventListener("click",this.clickOutsideListener),this.resizeListener&&window.removeEventListener("resize",this.resizeListener),this.resizeListener=()=>{this.isOpen&&this.checkDropdownPosition()},window.addEventListener("resize",this.resizeListener),t}checkDropdownPosition(){if(!this.optionsListEl||!this.buttonEl||!this.container)return;const t=this.buttonEl.getBoundingClientRect();this.optionsListEl.classList.remove("dropdown-up"),this.optionsListEl.style.position="fixed",this.optionsListEl.style.top=`${t.bottom+2}px`,this.optionsListEl.style.bottom="auto",this.optionsListEl.style.left=`${t.left}px`,this.optionsListEl.style.right="auto",this.optionsListEl.style.width=`${t.width}px`;const e=Math.min(this._options.length*40+12,280);if(window.innerHeight-t.bottom<e){const s=Math.max(10,window.innerHeight-e-10);this.optionsListEl.style.top=`${s}px`}}selectOption(t,e,i){var n,a
|
|
95
|
+
`;class S extends p{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,this.resizeListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}setValue(t){super.setValue(t);const e=this._options.findIndex(i=>i.value===t);e>=0?this.selectedOptionIndex=e:this.selectedOptionIndex=null,this.updateButtonText()}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.getDataPropsPath()&&e.setAttribute("data-test-id",this.getDataPropsPath()),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,this.isOpen?this.checkDropdownPosition():this.cleanupDropdownPosition(),(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),document.body.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=Y,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.cleanupDropdownPosition())},document.addEventListener("click",this.clickOutsideListener),this.resizeListener&&window.removeEventListener("resize",this.resizeListener),this.resizeListener=()=>{this.isOpen&&this.checkDropdownPosition()},window.addEventListener("resize",this.resizeListener),t}checkDropdownPosition(){if(!this.optionsListEl||!this.buttonEl||!this.container)return;const t=this.buttonEl.getBoundingClientRect();this.optionsListEl.classList.remove("dropdown-up"),this.optionsListEl.style.position="fixed",this.optionsListEl.style.top=`${t.bottom+2}px`,this.optionsListEl.style.bottom="auto",this.optionsListEl.style.left=`${t.left}px`,this.optionsListEl.style.right="auto",this.optionsListEl.style.width=`${t.width}px`;const e=Math.min(this._options.length*40+12,280);if(window.innerHeight-t.bottom<e){const s=Math.max(10,window.innerHeight-e-10);this.optionsListEl.style.top=`${s}px`}}selectOption(t,e,i){var n,a;const s=this._options[e];s&&(this.setValue(s.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(n=this.optionsListEl)==null||n.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.cleanupDropdownPosition(),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((l,r)=>{r===e?l.classList.add("selected"):l.classList.remove("selected")}))}cleanupDropdownPosition(){this.optionsListEl&&(this.optionsListEl.style.position="",this.optionsListEl.style.top="",this.optionsListEl.style.bottom="",this.optionsListEl.style.left="",this.optionsListEl.style.right="",this.optionsListEl.style.width="")}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=s=>{this.buttonEl&&this.selectOption(s,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null),this.cleanupDropdownPosition(),this.optionsListEl&&this.optionsListEl.parentNode&&this.optionsListEl.parentNode.removeChild(this.optionsListEl),super.destroy()}}class F extends p{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
|
|
96
96
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
97
97
|
<path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
|
|
98
98
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
<!-- Top-left dot -->
|
|
156
156
|
<circle cx="6.7" cy="6.7" r="1.5" fill="#02CC59" opacity="0.3"/>
|
|
157
157
|
</svg>
|
|
158
|
-
`;class
|
|
158
|
+
`;class H extends p{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,this.errorContainer=null,this.messageListener=null,this.loadingSpinner=null,this.props.delete===void 0&&(this.props.delete=!0),this.props.maxFileSizeMB===void 0&&(this.props.maxFileSizeMB=5),!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl),this.setupMessageListener()}setupMessageListener(){this.messageListener=t=>{var e;if(t.data&&t.data.type==="FILE_MANAGER_IMAGE_SELECTED"&&t.data.settingId===this.id){const i=t.data.imageUrl;i&&typeof i=="string"&&(this.value=i,this.updatePreviewState(i),(e=this.onChange)==null||e.call(this,i),this.hideError())}},window.addEventListener("message",this.messageListener)}cleanupMessageListener(){this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null)}setValue(t){super.setValue(t),this.previewWrapper&&this.previewEl&&this.updatePreviewState(t)}destroy(){this.cleanupMessageListener()}showError(t){this.errorContainer&&(this.errorContainer.textContent=t,this.errorContainer.style.display="block",setTimeout(()=>{this.errorContainer&&(this.errorContainer.style.display="none")},5e3))}hideError(){this.errorContainer&&(this.errorContainer.style.display="none")}showLoading(){!this.previewWrapper||!this.loadingSpinner||(this.previewWrapper.classList.add("loading"),this.previewWrapper.style.display="flex",this.loadingSpinner.style.display="block",this.previewEl&&(this.previewEl.style.display="none"))}hideLoading(){!this.previewWrapper||!this.loadingSpinner||(this.previewWrapper.classList.remove("loading"),this.loadingSpinner.style.display="none")}validateFileSize(t){const e=(this.props.maxFileSizeMB||5)*1024*1024;if(t.size>e){const i=this.props.maxFileSizeMB||5,s=(t.size/(1024*1024)).toFixed(1);return this.showError(`File size (${s}MB) exceeds maximum limit of ${i}MB`),!1}return!0}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),s=e==null?void 0:e.querySelector(".preview-placeholder");if(t&&t!==""){this.showLoading(),s&&s instanceof HTMLElement&&(s.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
|
|
159
159
|
<span class="upload-icon">${I}</span>
|
|
160
160
|
<span class="upload-label">Replace</span>
|
|
161
161
|
`);const n=()=>{this.hideLoading(),this.previewWrapper.classList.add("has-image"),this.previewEl.style.display="block",this.previewEl.removeEventListener("load",n),this.previewEl.removeEventListener("error",a)},a=()=>{this.hideLoading(),this.showError("Failed to load image. Please try again."),this.previewWrapper.classList.remove("has-image"),this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),this.previewEl.removeEventListener("load",n),this.previewEl.removeEventListener("error",a)};this.previewEl.addEventListener("load",n),this.previewEl.addEventListener("error",a),this.previewEl.src=t}else this.hideLoading(),this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),i&&(i.innerHTML=`
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
</svg>`;class ft extends f{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||mt,title:t.title||"Margin Bottom",default:t.default??20,wrapperClassName:"margin-bottom-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}const vt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
187
187
|
<path d="M15.75 7.25H2.25m9.9 9h-6.3c-1.26 0-1.89 0-2.371-.245a2.25 2.25 0 0 1-.984-.983c-.245-.482-.245-1.112-.245-2.372v-6.3c0-1.26 0-1.89.245-2.371a2.25 2.25 0 0 1 .984-.984c.48-.245 1.11-.245 2.371-.245h6.3c1.26 0 1.89 0 2.371.245.424.216.768.56.984.984.245.48.245 1.11.245 2.371v6.3c0 1.26 0 1.89-.245 2.371-.216.424-.56.768-.984.984-.48.245-1.11.245-2.371.245"
|
|
188
188
|
stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
189
|
-
</svg>`;class Ct extends f{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||vt,title:t.title||"Margin Top",default:t.default??20,wrapperClassName:"margin-top-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}class wt extends p{constructor(t){super(t),this.inputType={},this.container=null,this.defaultLanguage="",this.uploadSettings=new Map,t.default?this.value={...t.default}:this.value||(this.value={}),this.defaultLanguage=t.languages.includes(p.DefaultLanguage)?p.DefaultLanguage:t.languages[0];const e=t.defaultValue||`Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;t.languages.forEach(i=>{var s,n;i in(this.value||{})||(this.value||(this.value={}),i===this.defaultLanguage&&e?this.value[i]=((s=t.default)==null?void 0:s[i])||e:this.value[i]=((n=t.default)==null?void 0:n[i])||"")})}capitalizeFirstLetter(t){return String(t).charAt(0).toUpperCase()+String(t).slice(1)}measureTextWidth(t,e){this.textMeasureCanvas||(this.textMeasureCanvas=document.createElement("canvas"));const i=this.textMeasureCanvas.getContext("2d");if(!i)return t.length*10;const s=`${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`.trim();return i.font=s,i.measureText(t).width}adaptPlaceholderToSingleLine(t,e){const i=window.getComputedStyle(t),s=parseFloat(i.paddingLeft)||0,n=parseFloat(i.paddingRight)||0,a=parseFloat(i.borderLeftWidth)||0,o=parseFloat(i.borderRightWidth)||0,l=Math.max(0,t.clientWidth-s-n-a-o);if(l<=0){t.placeholder=e;return}if(this.measureTextWidth(e,i)<=l){t.placeholder=e;return}const h="...";let d=0,u=e.length,b=0;for(;d<=u;){const E=Math.floor((d+u)/2),R=e.slice(0,E).trimEnd()+h;this.measureTextWidth(R,i)<=l?(b=E,d=E+1):u=E-1}const y=e.slice(0,b).trimEnd()+h;t.placeholder=y}autosizeTextarea(t,e=3){t.style.height="auto";const i=window.getComputedStyle(t),s=parseFloat(i.lineHeight)||20,n=parseFloat(i.paddingTop)+parseFloat(i.paddingBottom),a=parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth),o=s*e+n+a,l=Math.min(t.scrollHeight||44,o);t.style.height=`${l}px`,t.scrollHeight>o?t.style.overflowY="auto":t.style.overflowY="hidden"}createTextareaRow(t,e){const i=document.createElement("div");i.classList.add("simple-multi-language-row");const s=document.createElement("label");if(s.classList.add("simple-language-label"),s.textContent=t.toUpperCase(),s.setAttribute("for",`textarea-${t}`),i.appendChild(s),this.props.multiImg){const n=new
|
|
189
|
+
</svg>`;class Ct extends f{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||vt,title:t.title||"Margin Top",default:t.default??20,wrapperClassName:"margin-top-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}class wt extends p{constructor(t){super(t),this.inputType={},this.container=null,this.defaultLanguage="",this.uploadSettings=new Map,t.default?this.value={...t.default}:this.value||(this.value={}),this.defaultLanguage=t.languages.includes(p.DefaultLanguage)?p.DefaultLanguage:t.languages[0];const e=t.defaultValue||`Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;t.languages.forEach(i=>{var s,n;i in(this.value||{})||(this.value||(this.value={}),i===this.defaultLanguage&&e?this.value[i]=((s=t.default)==null?void 0:s[i])||e:this.value[i]=((n=t.default)==null?void 0:n[i])||"")})}capitalizeFirstLetter(t){return String(t).charAt(0).toUpperCase()+String(t).slice(1)}measureTextWidth(t,e){this.textMeasureCanvas||(this.textMeasureCanvas=document.createElement("canvas"));const i=this.textMeasureCanvas.getContext("2d");if(!i)return t.length*10;const s=`${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`.trim();return i.font=s,i.measureText(t).width}adaptPlaceholderToSingleLine(t,e){const i=window.getComputedStyle(t),s=parseFloat(i.paddingLeft)||0,n=parseFloat(i.paddingRight)||0,a=parseFloat(i.borderLeftWidth)||0,o=parseFloat(i.borderRightWidth)||0,l=Math.max(0,t.clientWidth-s-n-a-o);if(l<=0){t.placeholder=e;return}if(this.measureTextWidth(e,i)<=l){t.placeholder=e;return}const h="...";let d=0,u=e.length,b=0;for(;d<=u;){const E=Math.floor((d+u)/2),R=e.slice(0,E).trimEnd()+h;this.measureTextWidth(R,i)<=l?(b=E,d=E+1):u=E-1}const y=e.slice(0,b).trimEnd()+h;t.placeholder=y}autosizeTextarea(t,e=3){t.style.height="auto";const i=window.getComputedStyle(t),s=parseFloat(i.lineHeight)||20,n=parseFloat(i.paddingTop)+parseFloat(i.paddingBottom),a=parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth),o=s*e+n+a,l=Math.min(t.scrollHeight||44,o);t.style.height=`${l}px`,t.scrollHeight>o?t.style.overflowY="auto":t.style.overflowY="hidden"}createTextareaRow(t,e){const i=document.createElement("div");i.classList.add("simple-multi-language-row");const s=document.createElement("label");if(s.classList.add("simple-language-label"),s.textContent=t.toUpperCase(),s.setAttribute("for",`textarea-${t}`),i.appendChild(s),this.props.multiImg){const n=new H({defaultUrl:e||"",title:"",id:`${this.id}_upload_${t}`});n.setOnChange(o=>{this.updateLanguageValue(t,o),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(o)}),this.uploadSettings.set(t,n);const a=n.draw();a.classList.add("simple-language-upload"),i.appendChild(a)}else{const n=document.createElement("textarea");n.id=`textarea-${t}`,n.classList.add("simple-language-textarea"),n.value=e||"",n.rows=1,n.style.overflowY="hidden";let a=this.props.placeholder||"Enter text in {language}...";a.includes("{language}")&&(a=a.replace("{language}",t.toUpperCase())),n.setAttribute("data-full-placeholder",a),this.adaptPlaceholderToSingleLine(n,a),this.getDataPropsPath()&&n.setAttribute("data-test-id",`${this.getDataPropsPath()}_${t}`),n.addEventListener("input",l=>{const r=l.target;this.updateLanguageValue(t,r.value),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(r.value),this.autosizeTextarea(r,3);const h=n.getAttribute("data-full-placeholder")||"";h&&this.adaptPlaceholderToSingleLine(n,h)}),i.appendChild(n),(l=>(typeof queueMicrotask=="function"?queueMicrotask:r=>setTimeout(r,0))(l))(()=>{this.autosizeTextarea(n,3);const l=n.getAttribute("data-full-placeholder")||"";l&&this.adaptPlaceholderToSingleLine(n,l)})}return i}updateLanguageValue(t,e){this.value||(this.value={});const i={...this.value,[t]:e};this.setValue(i)}updateOtherLanguagePlaceholders(t){this.container&&this.props.languages.forEach(e=>{var s,n;if(e===this.defaultLanguage)return;const i=(s=this.container)==null?void 0:s.querySelector(`#textarea-${e}`);if(i&&(!i.value||i.value.trim()==="")){const a=t||((n=this.props.placeholder)==null?void 0:n.replace("{language}",e.toUpperCase()))||`Enter text in ${e.toUpperCase()}...`;i.setAttribute("data-full-placeholder",a),this.adaptPlaceholderToSingleLine(i,a)}})}draw(){const t=document.createElement("div");if(t.classList.add("simple-multi-language-wrapper"),this.props.title){const s=document.createElement("div");s.classList.add("simple-multi-language-title"),s.textContent=this.props.title,t.appendChild(s)}const e=document.createElement("div");e.classList.add("simple-multi-language-content"),this.props.languages.forEach(s=>{var o;const n=((o=this.value)==null?void 0:o[s])||"",a=this.createTextareaRow(s,n);e.appendChild(a)}),t.appendChild(e),this.container=t;const i=()=>{if(!this.container)return;this.container.querySelectorAll(".simple-language-textarea").forEach(n=>{const a=n.getAttribute("data-full-placeholder")||"";a&&this.adaptPlaceholderToSingleLine(n,a)})};return window.addEventListener("resize",i),t}setValue(t){super.setValue(t),this.container&&this.props.languages.forEach(e=>{var i;if(this.props.multiImg){const s=this.uploadSettings.get(e);s&&s.setValue((t==null?void 0:t[e])||"")}else{const s=(i=this.container)==null?void 0:i.querySelector(`#textarea-${e}`);if(s){s.value=(t==null?void 0:t[e])||"",this.autosizeTextarea(s,3);const n=s.getAttribute("data-full-placeholder")||"";n&&this.adaptPlaceholderToSingleLine(s,n)}}})}}class bt extends p{constructor(t={}){super(t),this.inputType="select";const e=[{name:"None",value:"none"},{name:"Fade",value:"fade 1.5s ease-in-out infinite"},{name:"Slide",value:"slide 1.5s ease-in-out infinite"},{name:"Zoom",value:"zoom 1.5s ease-in-out infinite"},{name:"Bounce",value:"bounce 1.5s ease-in-out infinite"},{name:"Pulse",value:"pulse 1.5s ease-in-out infinite"}];this.selectSetting=new S({title:this.title||"Animation",options:e,default:this.props.default||"none"}),this.selectSetting.onChange=i=>{var s;this.value=i,(s=this.onChange)==null||s.call(this,i)}}draw(){return this.selectSetting.draw()}destroy(){this.selectSetting.destroy(),super.destroy()}}const Et=`
|
|
190
190
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
191
191
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
192
192
|
</svg>
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
font-weight: ${i};
|
|
217
217
|
font-size: ${s}px;
|
|
218
218
|
text-align: ${n};
|
|
219
|
-
`}}class L extends p{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,r=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(o.value);h<l&&(h=l),h>r&&(h=r),o.value=String(h)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const r=Number(l);isNaN(r)||(this.value=r)}this.onChange&&this.onChange(this.value)}),i}}class Vt extends v{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,settings:{marginTop:new L({title:"Top",icon:It,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new L({title:"Right",icon:Nt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new L({title:"Bottom",icon:Ot,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new L({title:"Left",icon:
|
|
219
|
+
`}}class L extends p{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,r=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(o.value);h<l&&(h=l),h>r&&(h=r),o.value=String(h)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const r=Number(l);isNaN(r)||(this.value=r)}this.onChange&&this.onChange(this.value)}),i}}class Vt extends v{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,settings:{marginTop:new L({title:"Top",icon:It,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new L({title:"Right",icon:Nt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new L({title:"Bottom",icon:Ot,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new L({title:"Left",icon:Tt,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,s=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
|
|
220
220
|
margin-top: ${t};
|
|
221
221
|
margin-right: ${e};
|
|
222
222
|
margin-bottom: ${i};
|
|
@@ -227,13 +227,13 @@
|
|
|
227
227
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
228
228
|
</svg>`,Ot=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
229
229
|
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
230
|
-
</svg>`,
|
|
230
|
+
</svg>`,Tt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
231
231
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
232
|
-
</svg>`;class
|
|
232
|
+
</svg>`;class Ht extends v{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,settings:{backgroundImage:new H({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new D({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new C({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,n,a]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);const o=document.createElement("div");return o.className="bgset-or-label",o.textContent="OR",e.appendChild(o),e.appendChild(a),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"#000000";return t?`
|
|
233
233
|
background-image: url("${t}");
|
|
234
234
|
background-size: cover;
|
|
235
235
|
background-position: center;
|
|
236
236
|
opacity: ${e/100};
|
|
237
237
|
`:`
|
|
238
238
|
background-color: ${i};
|
|
239
|
-
`}}exports.AlignSetting=F;exports.AnimationSetting=bt;exports.BackgroundSettingSet=
|
|
239
|
+
`}}exports.AlignSetting=F;exports.AnimationSetting=bt;exports.BackgroundSettingSet=Ht;exports.BorderSettingSet=yt;exports.ButtonSetting=Q;exports.ColorSetting=m;exports.ColorWithOpacitySetting=C;exports.DimensionSetting=tt;exports.GapSetting=gt;exports.HeaderTypographySettingSet=St;exports.HeightSetting=ot;exports.HtmlSetting=K;exports.MarginBottomSetting=ft;exports.MarginSettingGroup=Vt;exports.MarginTopSetting=Ct;exports.MultiLanguageSetting=wt;exports.NumberSetting=f;exports.OpacitySetting=D;exports.SelectApiSettings=dt;exports.SelectSetting=S;exports.Setting=p;exports.SettingGroup=v;exports.StringSetting=$;exports.TabSettingGroup=T;exports.TabsSettingGroup=T;exports.Toggle=ut;exports.UploadSetting=H;exports.WidthSetting=rt;exports.asSettingGroupWithSettings=J;exports.createSettingGroup=B;exports.createTabSettingGroup=U;exports.isSetting=w;exports.isSettingChild=O;exports.isSettingGroup=g;exports.iterateSettings=x;
|
|
@@ -651,11 +651,12 @@ const V = class V {
|
|
|
651
651
|
for (const i in this.settings)
|
|
652
652
|
if (Object.prototype.hasOwnProperty.call(this.settings, i)) {
|
|
653
653
|
const s = this.settings[i];
|
|
654
|
-
if (g(s))
|
|
655
|
-
|
|
656
|
-
|
|
654
|
+
if (g(s)) {
|
|
655
|
+
const n = s.getValuesForJson();
|
|
656
|
+
n !== null && (e[i] = n);
|
|
657
|
+
} else {
|
|
657
658
|
const n = s;
|
|
658
|
-
n.includeGetJson
|
|
659
|
+
n.includeGetJson !== !1 && (e[i] = n.value);
|
|
659
660
|
}
|
|
660
661
|
}
|
|
661
662
|
return e;
|
|
@@ -1306,10 +1307,10 @@ class N extends p {
|
|
|
1306
1307
|
}
|
|
1307
1308
|
}
|
|
1308
1309
|
selectOption(t, e, i) {
|
|
1309
|
-
var n, a
|
|
1310
|
+
var n, a;
|
|
1310
1311
|
const s = this._options[e];
|
|
1311
|
-
s && (this.
|
|
1312
|
-
|
|
1312
|
+
s && (this.setValue(s.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = s.name, (n = this.optionsListEl) == null || n.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((l, r) => {
|
|
1313
|
+
r === e ? l.classList.add("selected") : l.classList.remove("selected");
|
|
1313
1314
|
}));
|
|
1314
1315
|
}
|
|
1315
1316
|
/**
|
|
@@ -1599,6 +1600,9 @@ class P extends p {
|
|
|
1599
1600
|
cleanupMessageListener() {
|
|
1600
1601
|
this.messageListener && (window.removeEventListener("message", this.messageListener), this.messageListener = null);
|
|
1601
1602
|
}
|
|
1603
|
+
setValue(t) {
|
|
1604
|
+
super.setValue(t), this.previewWrapper && this.previewEl && this.updatePreviewState(t);
|
|
1605
|
+
}
|
|
1602
1606
|
destroy() {
|
|
1603
1607
|
this.cleanupMessageListener();
|
|
1604
1608
|
}
|
|
@@ -2166,7 +2170,11 @@ class St extends p {
|
|
|
2166
2170
|
const s = (i = this.container) == null ? void 0 : i.querySelector(
|
|
2167
2171
|
`#textarea-${e}`
|
|
2168
2172
|
);
|
|
2169
|
-
|
|
2173
|
+
if (s) {
|
|
2174
|
+
s.value = (t == null ? void 0 : t[e]) || "", this.autosizeTextarea(s, 3);
|
|
2175
|
+
const n = s.getAttribute("data-full-placeholder") || "";
|
|
2176
|
+
n && this.adaptPlaceholderToSingleLine(s, n);
|
|
2177
|
+
}
|
|
2170
2178
|
}
|
|
2171
2179
|
});
|
|
2172
2180
|
}
|
|
@@ -20,6 +20,7 @@ export declare class UploadSetting extends Setting<string, UploadSettingProps> {
|
|
|
20
20
|
constructor(props?: UploadSettingProps);
|
|
21
21
|
private setupMessageListener;
|
|
22
22
|
private cleanupMessageListener;
|
|
23
|
+
setValue(newValue: string): void;
|
|
23
24
|
destroy(): void;
|
|
24
25
|
private showError;
|
|
25
26
|
private hideError;
|
package/package.json
CHANGED