builder-settings-types 0.0.84 → 0.0.85
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.
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
13
13
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`,d.title=this.description,s.insertBefore(d,o)}}else{if(!l){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,a.insertBefore(d,a.firstChild)}g&&g.remove()}};if(e.onclick=r,e.onkeydown=l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),r())},Object.keys(this.settings).length>0){for(const l in this.settings)if(this.settings.hasOwnProperty(l)){const g=this.settings[l];a.appendChild(g.draw())}}else{const l=document.createElement("div");l.className="setting-group-empty",l.textContent="No settings in this group",a.appendChild(l)}return e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(a),this.elementRef=t,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"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isCollapsed?this.expand():this.collapse()}}function A(h){switch(h){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class u{constructor(t={}){this.props=t,this.id=t.id||V(),this.value=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const s=document.createElement("div");if(s.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);s.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);s.appendChild(o)}e.appendChild(s)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");return this.inputEl=n,n.value=String(t.value||A(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const o=s.target;let a=o.value;t.inputType==="number"?a=Number(o.value):(t.inputType==="color"||t.inputType==="date")&&(a=o.value),this.value=a,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class M extends u{constructor(t={}){super(t),this.inputType="text"}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
|
|
15
|
+
`,d.title=this.description,s.insertBefore(d,o)}}else{if(!l){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,a.insertBefore(d,a.firstChild)}g&&g.remove()}};if(e.onclick=r,e.onkeydown=l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),r())},Object.keys(this.settings).length>0){for(const l in this.settings)if(this.settings.hasOwnProperty(l)){const g=this.settings[l];a.appendChild(g.draw())}}else{const l=document.createElement("div");l.className="setting-group-empty",l.textContent="No settings in this group",a.appendChild(l)}return e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(a),this.elementRef=t,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"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isCollapsed?this.expand():this.collapse()}}function A(h){switch(h){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class u{constructor(t={}){this.props=t,this.id=t.id||V(),this.value=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const s=document.createElement("div");if(s.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);s.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);s.appendChild(o)}e.appendChild(s)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");return this.inputEl=n,n.value=String(t.value||A(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const o=s.target;let a=o.value;t.inputType==="number"?a=Number(o.value):(t.inputType==="color"||t.inputType==="date")&&(a=o.value),this.value=a,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class M extends u{constructor(t={}){super(t),this.inputType="text"}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 N="<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 y extends M{constructor(t){super({...t,icon:t.icon||N,title:t.title||"Color"}),this.inputType="color"}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${n}`}rgbToHex(t){const[e,i,n]=t.split(",").map(o=>parseInt(o.trim()));if(isNaN(e)||isNaN(i)||isNaN(n))return"#000000";const s=o=>{const a=o.toString(16);return a.length===1?"0"+a:a};return`#${s(e)}${s(i)}${s(n)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||N),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const o=d=>{const p=d.value.split(",").map(O=>parseInt(O.trim()));if(p.length!==3||p.some(isNaN))return d.style.border="1px solid red",!1;const[m,f,b]=p,L=m>=0&&m<=255&&f>=0&&f<=255&&b>=0&&b<=255;return d.style.border=L?"":"1px solid red",L},a=document.createElement("div");a.className="color-preview",a.style.backgroundColor=this.value?`rgb(${this.value})`:"";const r=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),c=r.querySelector("input"),l=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),g=l.querySelector("input");return c.oninput=d=>{var m;let p=d.target.value.trim();o(c)&&(this.value=p,(m=this.onChange)==null||m.call(this,p),g.value=this.rgbToHex(p),a.style.backgroundColor=`rgb(${p})`)},g.oninput=d=>{var f;const p=d.target.value,m=this.hexToRgb(p);this.value=m,(f=this.onChange)==null||f.call(this,m),c.value=m,a.style.backgroundColor=`rgb(${m})`},s.appendChild(a),s.appendChild(l),s.appendChild(r),t.appendChild(e),t.appendChild(s),this.value&&(c.value=this.value,g.value=this.rgbToHex(this.value),a.style.backgroundColor=`rgb(${this.value})`),t}}class v extends u{constructor(t={}){super(t),this.inputType="number"}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const o=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(s.value);r<o&&(r=o),r>a&&(r=a),s.value=String(r)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class x extends v{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||_,title:t.title||"Opacity"}),this.inputType="number"}}const _=`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
17
17
|
<path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
18
18
|
<path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
<path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
|
|
21
21
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
22
22
|
</svg>
|
|
23
|
-
|
|
23
|
+
`,$=`
|
|
24
24
|
<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">
|
|
25
25
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
26
26
|
</svg>
|
|
27
|
-
`;class
|
|
27
|
+
`;class H extends u{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,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)}}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 s=document.createElement("div");if(s.className="icon-container",this.props.icon){const o=this.createIcon(this.props.icon);s.appendChild(o)}if(this.props.title){const o=this.createLabel(this.props.title);s.appendChild(o)}t.appendChild(s)}else{const s=document.createElement("div");t.appendChild(s)}const e=document.createElement("div");e.classList.add("select-button"),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 s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((s,o)=>{const a=this.createOption(s,o);a.onclick=r=>this.selectOption(r,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=$,t.appendChild(n),this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=s=>{var o,a;this.isOpen&&!t.contains(s.target)&&(this.isOpen=!1,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var s,o,a;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=n.name,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((c,l)=>{l===e?c.classList.add("selected"):c.classList.remove("selected")}))}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=n=>{this.buttonEl&&this.selectOption(n,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),super.destroy()}}class B extends u{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:`
|
|
28
28
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
29
29
|
<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"
|
|
30
30
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
56
56
|
</svg>`,G=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
57
57
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
|
-
</svg>`,
|
|
58
|
+
</svg>`,S=`
|
|
59
59
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
60
60
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
61
61
|
</svg>
|
|
@@ -69,23 +69,23 @@
|
|
|
69
69
|
<path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
70
70
|
</svg>
|
|
71
71
|
`;class R extends u{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl)}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl||!this.emptyStateEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),n=e==null?void 0:e.querySelector(".preview-placeholder");t&&t!==""?(this.previewWrapper.classList.add("has-image"),this.previewEl.src=t,this.previewWrapper.style.display="block",n&&n instanceof HTMLElement&&(n.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
|
|
72
|
-
<span class="upload-icon">${
|
|
72
|
+
<span class="upload-icon">${S}</span>
|
|
73
73
|
<span class="upload-label">Replace</span>
|
|
74
74
|
`)):(this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewWrapper.style.display="none",n&&n instanceof HTMLElement&&(n.style.display="none"),i&&(i.innerHTML=`
|
|
75
|
-
<span class="upload-icon">${
|
|
75
|
+
<span class="upload-icon">${S}</span>
|
|
76
76
|
<span class="upload-label">Upload</span>
|
|
77
77
|
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const c=document.createElement("div");if(c.className="icon-title-container",this.props.icon){const l=this.createIcon(this.props.icon);c.appendChild(l)}if(this.props.title){const l=this.createLabel(this.props.title);c.appendChild(l)}t.appendChild(c)}const i=document.createElement("div");i.className="preview-button-container";const n=this.value&&this.value!=="";n||i.classList.add("no-image");const s=document.createElement("div");s.className="preview-placeholder",s.innerHTML=T,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.emptyStateEl=document.createElement("div"),this.emptyStateEl.className="empty-state",this.emptyStateEl.innerHTML=T,this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview";const o=document.createElement("button");o.className="delete-button",o.type="button",o.title="Delete image",o.innerHTML=U,this.previewWrapper.appendChild(this.emptyStateEl),this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(o);const a=document.createElement("button");a.className="upload-button",a.innerHTML=`
|
|
78
|
-
<span class="upload-icon">${
|
|
78
|
+
<span class="upload-icon">${S}</span>
|
|
79
79
|
<span class="upload-label">Upload</span>
|
|
80
80
|
`;const r=document.createElement("input");return r.type="file",r.accept="image/*",r.style.display="none",i.appendChild(s),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(r),n?this.updatePreviewState(this.value):this.updatePreviewState(null),o.onclick=c=>{var l;c.stopPropagation(),this.value="",this.updatePreviewState(null),(l=this.onChange)==null||l.call(this,"")},a.onclick=()=>{r.click()},r.onchange=async()=>{var l,g,d;const c=(l=r.files)==null?void 0:l[0];if(c)try{a.classList.add("loading"),a.disabled=!0;const p=new FormData,m=this.props.formFieldName||"file";p.append(m,c,c.name);const f=this.props.uploadUrl;if(!f)throw new Error("No uploadUrl provided to UploadSetting.");const b=this.props.requestMethod||"POST",L={...this.props.requestHeaders||{}},E=await(await fetch(f,{method:b,body:p,headers:L})).json();let w;if(this.props.parseResponse)w=this.props.parseResponse(E);else if(w=(g=E==null?void 0:E.data)==null?void 0:g.url,!w)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=w,this.updatePreviewState(w),(d=this.onChange)==null||d.call(this,w)}catch(p){console.error("Error uploading file:",p),this.updatePreviewState(null)}finally{a.classList.remove("loading"),a.disabled=!1}},t}}class z extends u{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new v({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const Z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
81
81
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
82
|
-
</svg>`;class D extends u{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new v({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:
|
|
82
|
+
</svg>`;class D extends u{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new v({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:J}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const J=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
83
83
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
84
|
-
</svg>`,
|
|
84
|
+
</svg>`,P=`
|
|
85
85
|
<svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" 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">
|
|
86
86
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
87
87
|
</svg>
|
|
88
|
-
`;class X extends u{constructor(t={}){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.hasInitializedOptions=!1,this.initializeOptions(t)}initializeOptions(t){this.hasInitializedOptions||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync
|
|
88
|
+
`;class X extends u{constructor(t={}){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.hasInitializedOptions=!1,this.initializeOptions(t),t.default!==void 0&&(this.value=t.default,this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default)))}initializeOptions(t){this.hasInitializedOptions||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?(this.isLoading=!0,t.default!==void 0&&(this.value=t.default)):t.default!==void 0&&(this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),this.hasInitializedOptions=!0)}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const n=document.createElement("input");return n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",i.appendChild(n),this.selectedOptionIndex===e&&(n.checked=!0),i}draw(){const t=document.createElement("div");t.classList.add("select-api-container"),this.container=t;const e=document.createElement("div");if(e.classList.add("select-api-button"),this.props.title){e.classList.add("has-label");const s=document.createElement("div");s.className="select-label",s.textContent=this.props.title,e.appendChild(s);const o=document.createElement("span");o.className="select-value",this.isLoading?o.textContent=this.props.loadingText||"Loading options...":o.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(o)}else this.isLoading?e.textContent=this.props.loadingText||"Loading options...":e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option";e.onclick=()=>{var s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-api-options"),this._options.forEach((s,o)=>{const a=this.createOption(s,o);a.onclick=r=>this.selectApiOption(r,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=P,t.appendChild(n),n.onclick=()=>{var s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(o=>JSON.stringify(o.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{const o=new Set(this._options.map(r=>JSON.stringify(r.value))),a=s.filter(r=>!o.has(JSON.stringify(r.value)));this._options.push(...a),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(r=>JSON.stringify(r.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),t}selectApiOption(t,e,i){var s,o,a;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,this.updateButtonText(),(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-api-radio").forEach((c,l)=>{c.checked=l===e}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-api-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);this.selectedOptionIndex===e&&i.classList.add("selected"),i.onclick=n=>{this.buttonEl&&this.selectApiOption(n,e,this.buttonEl)},i.tabIndex=0,i.addEventListener("keydown",n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this.buttonEl&&this.selectApiOption(n,e,this.buttonEl))}),this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;const e=this.buttonEl.querySelector(".select-value"),i=this.buttonEl.classList.contains("has-label"),n=this.buttonEl.querySelector(".select-label");if(this.isLoading){this.buttonEl.classList.add("loading");const o=this.props.loadingText||"Loading options...";if(e)e.textContent=o;else if(i&&this.props.title&&!n){this.buttonEl.innerHTML="";const a=document.createElement("div");a.className="select-label",a.textContent=this.props.title,this.buttonEl.appendChild(a);const r=document.createElement("span");r.className="select-value",r.textContent=o,this.buttonEl.appendChild(r)}else this.buttonEl.textContent=o;return}this.buttonEl.classList.remove("loading","error");let s;if(t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),s=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?s=this._options[this.selectedOptionIndex].name:s="Select an option",e)e.textContent=s;else if(i&&this.props.title&&!n){this.buttonEl.innerHTML="";const o=document.createElement("div");o.className="select-label",o.textContent=this.props.title,this.buttonEl.appendChild(o);const a=document.createElement("span");a.className="select-value",a.textContent=s,this.buttonEl.appendChild(a)}else this.buttonEl.textContent=s}}class Q extends u{constructor(t){super(t),this.inputType="text",this.value=t.default??!1}draw(){const t=document.createElement("div");t.className="toggle-setting-container",this.props.icon&&t.classList.add("toggle-with-icon");const e=document.createElement("div");if(e.className="toggle-label",this.props.icon){const o=document.createElement("span");o.className="toggle-icon",o.innerHTML=this.props.icon,e.appendChild(o)}if(this.props.title){const o=document.createElement("span");o.textContent=this.props.title,e.appendChild(o)}t.appendChild(e);const i=document.createElement("label");i.className="toggle-switch";const n=document.createElement("input");n.type="checkbox",n.checked=this.value??!1,n.addEventListener("change",()=>{this.value=n.checked,this.onChange&&this.onChange(this.value)});const s=document.createElement("span");return s.className="toggle-slider",i.appendChild(n),i.appendChild(s),t.appendChild(i),t}}const Y=`
|
|
89
89
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
90
90
|
<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"/>
|
|
91
91
|
</svg>
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
111
111
|
<path d="M6 5.75H12M9 5.75V13.25M5.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.75H5.85C4.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.35V12.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.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
112
112
|
</svg>
|
|
113
|
-
`;class nt extends C{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new y({default:t.colorDefault??"0, 0, 30"}),opacity:new x({default:t.colorOpacityDefault??100}),fontFamily:new
|
|
113
|
+
`;class nt extends C{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new y({default:t.colorDefault??"0, 0, 30"}),opacity:new x({default:t.colorOpacityDefault??100}),fontFamily:new H({title:"Font",icon:et,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new H({title:"Weight",icon:it,default:t.fontWeightDefault??"400",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new v({title:"Size",icon:st,default:t.fontSizeDefault??12,suffix:"px"}),align:new B({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",n=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,o=this.settings.align.value??"left";return`
|
|
114
114
|
color: ${t};
|
|
115
115
|
opacity: ${e/100};
|
|
116
116
|
font-family: ${i};
|
|
@@ -159,4 +159,4 @@
|
|
|
159
159
|
`:`
|
|
160
160
|
background-color: ${i};
|
|
161
161
|
opacity: ${n/100};
|
|
162
|
-
`}}exports.AlignSetting=B;exports.BackgroundSettingSet=pt;exports.BorderSettingSet=tt;exports.ButtonSetting=j;exports.ColorSetting=y;exports.DimensionSetting=q;exports.HeaderTypographySettingSet=nt;exports.HeightSetting=z;exports.MarginSettingGroup=ot;exports.NumberSetting=v;exports.OpacitySetting=x;exports.SelectApiSettings=X;exports.SelectSetting=
|
|
162
|
+
`}}exports.AlignSetting=B;exports.BackgroundSettingSet=pt;exports.BorderSettingSet=tt;exports.ButtonSetting=j;exports.ColorSetting=y;exports.DimensionSetting=q;exports.HeaderTypographySettingSet=nt;exports.HeightSetting=z;exports.MarginSettingGroup=ot;exports.NumberSetting=v;exports.OpacitySetting=x;exports.SelectApiSettings=X;exports.SelectSetting=H;exports.Setting=u;exports.SettingGroup=C;exports.StringSetting=M;exports.TabsContainerGroup=dt;exports.Toggle=Q;exports.UploadSetting=R;exports.WidthSetting=D;exports.iterateSettings=I;
|
|
@@ -226,12 +226,12 @@ class y extends m {
|
|
|
226
226
|
});
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
|
-
const
|
|
229
|
+
const O = "<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>";
|
|
230
230
|
class H extends y {
|
|
231
231
|
constructor(t) {
|
|
232
232
|
super({
|
|
233
233
|
...t,
|
|
234
|
-
icon: t.icon ||
|
|
234
|
+
icon: t.icon || O,
|
|
235
235
|
title: t.title || "Color"
|
|
236
236
|
}), this.inputType = "color";
|
|
237
237
|
}
|
|
@@ -254,7 +254,7 @@ class H extends y {
|
|
|
254
254
|
t.className = "color-setting-wrapper";
|
|
255
255
|
const e = document.createElement("div");
|
|
256
256
|
e.className = "icon-container";
|
|
257
|
-
const i = this.createIcon(this.props.icon ||
|
|
257
|
+
const i = this.createIcon(this.props.icon || O), n = this.createLabel(this.title || "Color");
|
|
258
258
|
e.appendChild(i), e.appendChild(n);
|
|
259
259
|
const s = document.createElement("div");
|
|
260
260
|
s.className = "color-input-wrapper";
|
|
@@ -341,7 +341,7 @@ const W = `
|
|
|
341
341
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
342
342
|
</svg>
|
|
343
343
|
`;
|
|
344
|
-
class
|
|
344
|
+
class N extends m {
|
|
345
345
|
constructor(t = {}) {
|
|
346
346
|
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, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
|
|
347
347
|
const e = this._options.findIndex((i) => i.value === this.value);
|
|
@@ -425,7 +425,7 @@ class O extends m {
|
|
|
425
425
|
this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), super.destroy();
|
|
426
426
|
}
|
|
427
427
|
}
|
|
428
|
-
class
|
|
428
|
+
class _ extends m {
|
|
429
429
|
constructor(t = {}) {
|
|
430
430
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
431
431
|
}
|
|
@@ -504,7 +504,7 @@ class st extends m {
|
|
|
504
504
|
suffix: "px",
|
|
505
505
|
minValue: this.minWidth,
|
|
506
506
|
maxValue: this.maxWidth,
|
|
507
|
-
icon:
|
|
507
|
+
icon: $
|
|
508
508
|
}), this.heightSetting = new f({
|
|
509
509
|
title: "Height",
|
|
510
510
|
default: this.value.height,
|
|
@@ -603,7 +603,7 @@ class st extends m {
|
|
|
603
603
|
}
|
|
604
604
|
}
|
|
605
605
|
}
|
|
606
|
-
const
|
|
606
|
+
const $ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
607
607
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
608
608
|
</svg>`, j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
609
609
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -753,10 +753,14 @@ const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
753
753
|
`;
|
|
754
754
|
class at extends m {
|
|
755
755
|
constructor(t = {}) {
|
|
756
|
-
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.hasInitializedOptions = !1, this.initializeOptions(t)
|
|
756
|
+
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.hasInitializedOptions = !1, this.initializeOptions(t), t.default !== void 0 && (this.value = t.default, this.selectedOptionIndex = this._options.findIndex(
|
|
757
|
+
(e) => JSON.stringify(e.value) === JSON.stringify(t.default)
|
|
758
|
+
));
|
|
757
759
|
}
|
|
758
760
|
initializeOptions(t) {
|
|
759
|
-
this.hasInitializedOptions || (this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync
|
|
761
|
+
this.hasInitializedOptions || (this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync ? (this.isLoading = !0, t.default !== void 0 && (this.value = t.default)) : t.default !== void 0 && (this.selectedOptionIndex = this._options.findIndex(
|
|
762
|
+
(e) => JSON.stringify(e.value) === JSON.stringify(t.default)
|
|
763
|
+
)), this.hasInitializedOptions = !0);
|
|
760
764
|
}
|
|
761
765
|
createOption(t, e) {
|
|
762
766
|
const i = document.createElement("li");
|
|
@@ -790,12 +794,16 @@ class at extends m {
|
|
|
790
794
|
var s, o;
|
|
791
795
|
this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
|
|
792
796
|
}, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
793
|
-
this._options.push(...s), this.isLoading = !1, this.
|
|
797
|
+
this._options.push(...s), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
|
|
798
|
+
(o) => JSON.stringify(o.value) === JSON.stringify(this.value)
|
|
799
|
+
)), this.updateOptionsList(), this.updateButtonText();
|
|
794
800
|
}).catch((s) => {
|
|
795
801
|
console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
796
802
|
})) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
797
803
|
const o = new Set(this._options.map((r) => JSON.stringify(r.value))), a = s.filter((r) => !o.has(JSON.stringify(r.value)));
|
|
798
|
-
this._options.push(...a), this.isLoading = !1, this.
|
|
804
|
+
this._options.push(...a), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
|
|
805
|
+
(r) => JSON.stringify(r.value) === JSON.stringify(this.value)
|
|
806
|
+
)), this.updateOptionsList(), this.updateButtonText();
|
|
799
807
|
}).catch((s) => {
|
|
800
808
|
console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
801
809
|
})), t;
|
|
@@ -937,11 +945,11 @@ class rt extends C {
|
|
|
937
945
|
`;
|
|
938
946
|
}
|
|
939
947
|
}
|
|
940
|
-
const
|
|
948
|
+
const J = `
|
|
941
949
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
942
950
|
<path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
943
951
|
</svg>
|
|
944
|
-
`,
|
|
952
|
+
`, P = `
|
|
945
953
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
946
954
|
<path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
947
955
|
</svg>
|
|
@@ -963,9 +971,9 @@ class ht extends C {
|
|
|
963
971
|
opacity: new k({
|
|
964
972
|
default: t.colorOpacityDefault ?? 100
|
|
965
973
|
}),
|
|
966
|
-
fontFamily: new
|
|
974
|
+
fontFamily: new N({
|
|
967
975
|
title: "Font",
|
|
968
|
-
icon:
|
|
976
|
+
icon: J,
|
|
969
977
|
default: t.fontFamilyDefault ?? "Satoshi",
|
|
970
978
|
options: t.fontFamilyOptions ?? [
|
|
971
979
|
{ name: "Satoshi", value: "Satoshi" },
|
|
@@ -975,9 +983,9 @@ class ht extends C {
|
|
|
975
983
|
getOptions: t.fontFamilyGetOptions,
|
|
976
984
|
getOptionsAsync: t.fontFamilyGetOptionsAsync
|
|
977
985
|
}),
|
|
978
|
-
fontWeight: new
|
|
986
|
+
fontWeight: new N({
|
|
979
987
|
title: "Weight",
|
|
980
|
-
icon:
|
|
988
|
+
icon: P,
|
|
981
989
|
default: t.fontWeightDefault ?? "400",
|
|
982
990
|
options: t.fontWeightOptions ?? [
|
|
983
991
|
{ name: "Regular", value: "400" },
|
|
@@ -993,7 +1001,7 @@ class ht extends C {
|
|
|
993
1001
|
default: t.fontSizeDefault ?? 12,
|
|
994
1002
|
suffix: "px"
|
|
995
1003
|
}),
|
|
996
|
-
align: new
|
|
1004
|
+
align: new _({
|
|
997
1005
|
title: "Align",
|
|
998
1006
|
default: t.alignDefault ?? "center"
|
|
999
1007
|
})
|
|
@@ -1299,7 +1307,7 @@ class pt extends C {
|
|
|
1299
1307
|
}
|
|
1300
1308
|
}
|
|
1301
1309
|
export {
|
|
1302
|
-
|
|
1310
|
+
_ as AlignSetting,
|
|
1303
1311
|
pt as BackgroundSettingSet,
|
|
1304
1312
|
rt as BorderSettingSet,
|
|
1305
1313
|
it as ButtonSetting,
|
|
@@ -1311,7 +1319,7 @@ export {
|
|
|
1311
1319
|
f as NumberSetting,
|
|
1312
1320
|
k as OpacitySetting,
|
|
1313
1321
|
at as SelectApiSettings,
|
|
1314
|
-
|
|
1322
|
+
N as SelectSetting,
|
|
1315
1323
|
m as Setting,
|
|
1316
1324
|
C as SettingGroup,
|
|
1317
1325
|
y as StringSetting,
|
package/package.json
CHANGED