builder-settings-types 0.0.64 → 0.0.66

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.
Files changed (5) hide show
  1. package/dist/builder-settings-types.cjs.js +36 -32
  2. package/dist/builder-settings-types.es.js +203 -160
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +24 -0
  5. package/package.json +1 -1
package/dist/builder-settings-types.cjs.js CHANGED
@@ -1,8 +1,8 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let E=(l=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(l|=0));for(;l--;)t+=V[e[l]&63];return t};function S(l,t){for(const e in l)if(l.hasOwnProperty(e)){const n=l[e];t(e,n)}}class g{constructor(t){this.id=t.id||E(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,S(this.settings,(e,n)=>{n.setOnChange(t)}),this}getValues(t){if(t===void 0){const e={};for(const n in this.settings)if(this.settings.hasOwnProperty(n)){const i=this.settings[n];i instanceof g?e[n]=i.getValues():e[n]=i.value}return e}else{const e=this.settings[t];return e?e instanceof g?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const n=document.createElement("h3");n.textContent=this.title;const i=document.createElement("span");i.className="setting-group-arrow",i.innerHTML=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let S=(l=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(l|=0));for(;l--;)t+=V[e[l]&63];return t};function E(l,t){for(const e in l)if(l.hasOwnProperty(e)){const i=l[e];t(e,i)}}class C{constructor(t){this.id=t.id||S(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,E(this.settings,(e,i)=>{i.setOnChange(t)}),this}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof C?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof C?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const i=document.createElement("h3");i.textContent=this.title;const n=document.createElement("span");n.className="setting-group-arrow",n.innerHTML=`
2
2
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
3
3
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
4
4
  </svg>
5
- `,e.onclick=()=>{const o=t.querySelector(".setting-group-content");o&&(o.classList.toggle("collapsed"),i.classList.toggle("rotated"))},e.appendChild(n),e.appendChild(i);const s=document.createElement("div");s.className="setting-group-content";for(const o in this.settings)if(this.settings.hasOwnProperty(o)){const a=this.settings[o];s.appendChild(a.draw())}return t.appendChild(e),t.appendChild(s),t}}function T(l){switch(l){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 C{constructor(t={}){this.props=t,this.id=t.id||E(),this.value=this.props.default,this.title=t.title||""}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 n=document.createElement("div");n.className=t.wrapperClassName||"";const i=document.createElement("input");return this.inputEl=i,i.value=String(t.value||T(t.inputType)),i.type=t.inputType,i.placeholder=t.placeholder||"",i.className=t.inputClassName||"",i.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(i),n.appendChild(i),e.appendChild(n),e}createLabel(t,e){const n=document.createElement("span");return n.textContent=t,n.className="input-label "+(e||""),n}createIcon(t,e){const n=document.createElement("span");return n.className="input-icon "+(e||""),n.innerHTML=t,n}}class x extends C{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 y="<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 k extends x{constructor(t){super({...t,icon:t.icon||y,title:t.title||"Color"}),this.inputType="color"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const n=this.createIcon(this.props.icon||y),i=this.createLabel(this.title||"Color");e.appendChild(n),e.appendChild(i);const s=document.createElement("div");s.className="color-input-wrapper";const o=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,a=d=>{const c=d.value.startsWith("#")?d.value.slice(1):d.value;return o.test(c)?(d.style.border="",!0):(d.style.border="1px solid red",!1)},r=document.createElement("div");r.className="color-preview",r.style.backgroundColor=this.value||"";const h=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),u=h.querySelector("input"),w=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),f=w.querySelector("input");return u.oninput=d=>{var p;let c=d.target.value.trim();c.charAt(0)!=="#"&&(c="#"+c,u.value=c),a(u)&&(this.value=c,(p=this.onChange)==null||p.call(this,c),f.value=c,r.style.backgroundColor=c)},f.oninput=d=>{var p;let c=d.target.value;c.charAt(0)!=="#"&&(c="#"+c,f.value=c),this.value=c,(p=this.onChange)==null||p.call(this,c),u.value=c,r.style.backgroundColor=c,a(u)},s.appendChild(r),s.appendChild(w),s.appendChild(h),t.appendChild(e),t.appendChild(s),t}}class m extends C{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 n=e.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const i=document.createElement("span");return i.className="suffix-label",i.textContent=this.props.suffix,e.appendChild(i),e}}class M extends m{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||B,title:t.title||"Opacity"}),this.inputType="number"}}const B=`
5
+ `,e.onclick=()=>{const o=t.querySelector(".setting-group-content");o&&(o.classList.toggle("collapsed"),n.classList.toggle("rotated"))},e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="setting-group-content";for(const o in this.settings)if(this.settings.hasOwnProperty(o)){const a=this.settings[o];s.appendChild(a.draw())}return t.appendChild(e),t.appendChild(s),t}}function T(l){switch(l){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 p{constructor(t={}){this.props=t,this.id=t.id||S(),this.value=this.props.default,this.title=t.title||""}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||T(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 b extends p{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 y="<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 k extends b{constructor(t){super({...t,icon:t.icon||y,title:t.title||"Color"}),this.inputType="color"}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||y),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const o=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,a=d=>{const c=d.value.startsWith("#")?d.value.slice(1):d.value;return o.test(c)?(d.style.border="",!0):(d.style.border="1px solid red",!1)},r=document.createElement("div");r.className="color-preview",r.style.backgroundColor=this.value||"";const h=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),u=h.querySelector("input"),w=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),f=w.querySelector("input");return u.oninput=d=>{var g;let c=d.target.value.trim();c.charAt(0)!=="#"&&(c="#"+c,u.value=c),a(u)&&(this.value=c,(g=this.onChange)==null||g.call(this,c),f.value=c,r.style.backgroundColor=c)},f.oninput=d=>{var g;let c=d.target.value;c.charAt(0)!=="#"&&(c="#"+c,f.value=c),this.value=c,(g=this.onChange)==null||g.call(this,c),u.value=c,r.style.backgroundColor=c,a(u)},s.appendChild(r),s.appendChild(w),s.appendChild(h),t.appendChild(e),t.appendChild(s),t}}class m extends p{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 M extends m{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||B,title:t.title||"Opacity"}),this.inputType="number"}}const B=`
6
6
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
7
7
  <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"/>
8
8
  <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"/>
@@ -10,7 +10,7 @@
10
10
  <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"/>
11
11
  <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"/>
12
12
  </svg>
13
- `;class H extends C{constructor(t={}){super(t),this.inputType="select",this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&t.getOptionsAsync().then(e=>{this._options.push(...e),this.selectNode&&e.forEach((n,i)=>{const s=this._options.length-e.length+i;this.selectNode.appendChild(this.createOption(n,s))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t,e){const n=document.createElement("option");return n.value=String(e),n.textContent=t.name,n}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const i=this.createIcon(this.props.icon);n.appendChild(i)}if(this.props.title){const i=this.createLabel(this.props.title);n.appendChild(i)}t.appendChild(n)}const e=document.createElement("select");if(this.selectNode=e,e.classList.add("select"),this._options.forEach((n,i)=>{const s=this.createOption(n,i);e.appendChild(s)}),this.value!==void 0){const n=this._options.findIndex(i=>i.value===this.value);n>=0&&(e.value=String(n))}return e.onchange=n=>{var o;const i=Number(n.target.value),s=this._options[i];s&&(this.value=s.value,(o=this.onChange)==null||o.call(this,this.value))},t.appendChild(e),t}}class N extends C{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 n=document.createElement("div");return n.className="align-options-container",[{name:"left",icon:`
13
+ `;class H extends p{constructor(t={}){super(t),this.inputType="select",this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&t.getOptionsAsync().then(e=>{this._options.push(...e),this.selectNode&&e.forEach((i,n)=>{const s=this._options.length-e.length+n;this.selectNode.appendChild(this.createOption(i,s))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t,e){const i=document.createElement("option");return i.value=String(e),i.textContent=t.name,i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.props.icon||this.props.title){const i=document.createElement("div");if(i.className="icon-container",this.props.icon){const n=this.createIcon(this.props.icon);i.appendChild(n)}if(this.props.title){const n=this.createLabel(this.props.title);i.appendChild(n)}t.appendChild(i)}const e=document.createElement("select");if(this.selectNode=e,e.classList.add("select"),this._options.forEach((i,n)=>{const s=this.createOption(i,n);e.appendChild(s)}),this.value!==void 0){const i=this._options.findIndex(n=>n.value===this.value);i>=0&&(e.value=String(i))}return e.onchange=i=>{var o;const n=Number(i.target.value),s=this._options[n];s&&(this.value=s.value,(o=this.onChange)==null||o.call(this,this.value))},t.appendChild(e),t}}class N 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:`
14
14
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
15
15
  <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"
16
16
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
@@ -31,7 +31,7 @@
31
31
  <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
32
32
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
33
33
  </svg>
34
- `}].forEach(s=>{const o=document.createElement("button");o.className="align-option-button",o.innerHTML=s.icon,this.value===s.name&&o.classList.add("selected"),o.addEventListener("click",()=>{var a;n.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),o.classList.add("selected"),this.value=s.name,(a=this.onChange)==null||a.call(this,this.value)}),n.appendChild(o)}),t.appendChild(n),t}}class I extends C{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class O extends C{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new m({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:R}),this.heightSetting=new m({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:j}),this.widthSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,i=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(i=Math.round(n/this.aspectRatio),i<1&&(i=1)),this.value={width:n,height:i},i!==0&&(this.aspectRatio=n/i),(s=this.onChange)==null||s.call(this,this.value),this.heightSetting.setValue(i),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,i=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(i=Math.round(n*this.aspectRatio),i<1&&(i=1)),this.value={width:i,height:n},n!==0&&(this.aspectRatio=i/n),(s=this.onChange)==null||s.call(this,this.value),this.widthSetting.setValue(i),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,n=this.value.height;n!==0&&(this.aspectRatio=e/n)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return t?`
34
+ `}].forEach(s=>{const o=document.createElement("button");o.className="align-option-button",o.innerHTML=s.icon,this.value===s.name&&o.classList.add("selected"),o.addEventListener("click",()=>{var a;i.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),o.classList.add("selected"),this.value=s.name,(a=this.onChange)==null||a.call(this,this.value)}),i.appendChild(o)}),t.appendChild(i),t}}class I extends p{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class O extends p{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new m({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:R}),this.heightSetting=new m({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:j}),this.widthSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i/this.aspectRatio),n<1&&(n=1)),this.value={width:i,height:n},n!==0&&(this.aspectRatio=i/n),(s=this.onChange)==null||s.call(this,this.value),this.heightSetting.setValue(n),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i*this.aspectRatio),n<1&&(n=1)),this.value={width:n,height:i},i!==0&&(this.aspectRatio=n/i),(s=this.onChange)==null||s.call(this,this.value),this.widthSetting.setValue(n),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,i=this.value.height;i!==0&&(this.aspectRatio=e/i)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return t?`
35
35
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
36
36
  <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
37
37
  </svg>
@@ -39,63 +39,67 @@
39
39
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
40
40
  <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
41
41
  </svg>
42
- `}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),n=this.heightSetting.draw(),i=document.createElement("div");i.className="dimension-bracket";const s=document.createElement("span");return s.className="dimension-lock-icon",s.innerHTML=this.getLockSVG(this.locked),s.onclick=()=>this.toggleLock(s),i.appendChild(s),t.appendChild(e),t.appendChild(i),t.appendChild(n),t}}const R=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
42
+ `}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("span");return s.className="dimension-lock-icon",s.innerHTML=this.getLockSVG(this.locked),s.onclick=()=>this.toggleLock(s),n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}}const R=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
43
43
  <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"/>
44
44
  </svg>`,j=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
45
45
  <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"/>
46
- </svg>`,A=`
46
+ </svg>`,$=`
47
47
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
48
48
  <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"/>
49
49
  </svg>
50
- `;class L extends C{constructor(t={}){super(t),this.inputType="button",!this.value&&t.defaultUrl&&(this.value=t.defaultUrl)}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=document.createElement("img");e.className="upload-preview",e.src=this.value||this.props.defaultUrl||"";const n=document.createElement("button");n.className="upload-button",n.innerHTML=`
51
- <span class="upload-icon">${A}</span>
50
+ `;class L extends p{constructor(t={}){super(t),this.inputType="button",!this.value&&t.defaultUrl&&(this.value=t.defaultUrl)}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=document.createElement("img");e.className="upload-preview",e.src=this.value||this.props.defaultUrl||"";const i=document.createElement("button");i.className="upload-button",i.innerHTML=`
51
+ <span class="upload-icon">${$}</span>
52
52
  <span class="upload-label">Upload</span>
53
- `;const i=document.createElement("input");return i.type="file",i.accept="image/*",i.style.display="none",n.onclick=()=>{i.click()},i.onchange=async()=>{var o,a,r;const s=(o=i.files)==null?void 0:o[0];if(s)try{const h=new FormData,u=this.props.formFieldName||"file";h.append(u,s,s.name);const w=this.props.uploadUrl;if(!w)throw new Error("No uploadUrl provided to UploadSetting.");const f=this.props.requestMethod||"POST",d={...this.props.requestHeaders||{}},p=await(await fetch(w,{method:f,body:h,headers:d})).json();let v;if(this.props.parseResponse)v=this.props.parseResponse(p);else if(v=(a=p==null?void 0:p.data)==null?void 0:a.url,!v)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=v,e.src=v,(r=this.onChange)==null||r.call(this,v)}catch(h){console.error("Error uploading file:",h)}},t.appendChild(e),t.appendChild(n),t.appendChild(i),t}}const $=`
53
+ `;const n=document.createElement("input");return n.type="file",n.accept="image/*",n.style.display="none",i.onclick=()=>{n.click()},n.onchange=async()=>{var o,a,r;const s=(o=n.files)==null?void 0:o[0];if(s)try{const h=new FormData,u=this.props.formFieldName||"file";h.append(u,s,s.name);const w=this.props.uploadUrl;if(!w)throw new Error("No uploadUrl provided to UploadSetting.");const f=this.props.requestMethod||"POST",d={...this.props.requestHeaders||{}},g=await(await fetch(w,{method:f,body:h,headers:d})).json();let v;if(this.props.parseResponse)v=this.props.parseResponse(g);else if(v=(a=g==null?void 0:g.data)==null?void 0:a.url,!v)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=v,e.src=v,(r=this.onChange)==null||r.call(this,v)}catch(h){console.error("Error uploading file:",h)}},t.appendChild(e),t.appendChild(i),t.appendChild(n),t}}class A extends p{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new m({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:G}),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 G=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
54
+ <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"/>
55
+ </svg>`;class _ extends p{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new m({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:W}),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 W=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
56
+ <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"/>
57
+ </svg>`,U=`
54
58
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
55
59
  <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"/>
56
60
  </svg>
57
- `,G=`
61
+ `,F=`
58
62
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
59
63
  <path d="M6 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.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.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.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
60
64
  </svg>
61
- `;class _ extends g{constructor(t){super({title:"Border",settings:{color:new k({default:(t==null?void 0:t.color)??"#00141E"}),opacity:new M({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new m({title:"Radius",icon:$,default:(t==null?void 0:t.radius)??12,suffix:"px"}),size:new m({title:"Size",icon:G,default:(t==null?void 0:t.size)??0,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,n=this.settings.radius.value??0,i=this.settings.size.value??0;return`
65
+ `;class Z extends C{constructor(t){super({title:"Border",settings:{color:new k({default:(t==null?void 0:t.color)??"#00141E"}),opacity:new M({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new m({title:"Radius",icon:U,default:(t==null?void 0:t.radius)??12,suffix:"px"}),size:new m({title:"Size",icon:F,default:(t==null?void 0:t.size)??0,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,n=this.settings.size.value??0;return`
62
66
  border-color: ${t};
63
- border-width: ${i}px;
64
- border-radius: ${n}px;
67
+ border-width: ${n}px;
68
+ border-radius: ${i}px;
65
69
  opacity: ${e/100};
66
- `}}const U=`
70
+ `}}const z=`
67
71
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
68
72
  <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"/>
69
73
  </svg>
70
- `,F=`
74
+ `,q=`
71
75
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
72
76
  <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"/>
73
77
  </svg>
74
- `,W=`
78
+ `,D=`
75
79
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
76
80
  <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"/>
77
81
  </svg>
78
- `;class Z extends g{constructor(t={}){super({title:t.title||"Typography",settings:{color:new k({default:t.colorDefault??"#00141E"}),opacity:new M({default:t.colorOpacityDefault??100}),fontFamily:new H({title:"Font",icon:U,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:F,default:t.fontWeightDefault??"bold",options:t.fontWeightOptions??[{name:"Regular",value:"regular"},{name:"Medium",value:"medium"},{name:"Bold",value:"bold"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new m({title:"Size",icon:W,default:t.fontSizeDefault??12,suffix:"px"}),align:new N({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,n=this.settings.fontFamily.value??"Satoshi",i=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,o=this.settings.align.value??"left";return`
82
+ `;class P extends C{constructor(t={}){super({title:t.title||"Typography",settings:{color:new k({default:t.colorDefault??"#00141E"}),opacity:new M({default:t.colorOpacityDefault??100}),fontFamily:new H({title:"Font",icon:z,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:q,default:t.fontWeightDefault??"bold",options:t.fontWeightOptions??[{name:"Regular",value:"regular"},{name:"Medium",value:"medium"},{name:"Bold",value:"bold"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new m({title:"Size",icon:D,default:t.fontSizeDefault??12,suffix:"px"}),align:new N({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`
79
83
  color: ${t};
80
84
  opacity: ${e/100};
81
- font-family: ${n};
82
- font-weight: ${i};
85
+ font-family: ${i};
86
+ font-weight: ${n};
83
87
  font-size: ${s}px;
84
88
  text-align: ${o};
85
- `}}class b extends C{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=a=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(a.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(a.max=String(this.props.maxValue)),this.props.className&&a.classList.add(this.props.className),a.addEventListener("input",()=>{const r=this.props.minValue??Number.MIN_SAFE_INTEGER,h=this.props.maxValue??Number.MAX_SAFE_INTEGER;let u=Number(a.value);u<r&&(u=r),u>h&&(u=h),a.value=String(u)}))},n=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 n;n.classList.add("suffix-wrapper");const i=n.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,n.appendChild(s);const o=n.querySelector("input");return o&&(o.oninput=a=>{const r=a.target.value.trim();if(r.toLowerCase()==="auto")this.value="auto";else{const h=Number(r);isNaN(h)||(this.value=h)}this.onChange&&this.onChange(this.value)}),n}}class z extends g{constructor(t){super({title:"Margins",settings:{marginTop:new b({title:"Top",icon:q,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new b({title:"Right",icon:D,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new b({title:"Bottom",icon:P,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new b({title:"Left",icon:X,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,n=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,i=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
89
+ `}}class x 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=a=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(a.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(a.max=String(this.props.maxValue)),this.props.className&&a.classList.add(this.props.className),a.addEventListener("input",()=>{const r=this.props.minValue??Number.MIN_SAFE_INTEGER,h=this.props.maxValue??Number.MAX_SAFE_INTEGER;let u=Number(a.value);u<r&&(u=r),u>h&&(u=h),a.value=String(u)}))},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 n=i.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,i.appendChild(s);const o=i.querySelector("input");return o&&(o.oninput=a=>{const r=a.target.value.trim();if(r.toLowerCase()==="auto")this.value="auto";else{const h=Number(r);isNaN(h)||(this.value=h)}this.onChange&&this.onChange(this.value)}),i}}class X extends C{constructor(t){super({title:"Margins",settings:{marginTop:new x({title:"Top",icon:J,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new x({title:"Right",icon:Q,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new x({title:"Bottom",icon:Y,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new x({title:"Left",icon:K,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,n=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
86
90
  margin-top: ${t};
87
91
  margin-right: ${e};
88
- margin-bottom: ${n};
89
- margin-left: ${i};
90
- `}}const q=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
92
+ margin-bottom: ${i};
93
+ margin-left: ${n};
94
+ `}}const J=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
91
95
  <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
92
- </svg>`,D=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
96
+ </svg>`,Q=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
93
97
  <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"/>
94
- </svg>`,P=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
98
+ </svg>`,Y=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
95
99
  <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"/>
96
- </svg>`,X=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
100
+ </svg>`,K=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
97
101
  <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"/>
98
- </svg>`;class J extends g{constructor(t,e){super({title:`Tab ${t+1}`,settings:{name:new x({title:"Tab Name",default:`Tab ${t+1}`}),content:new x({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const n=t.querySelector(".setting-group-title");if(n){const i=document.createElement("div");i.className="tab-delete-container";const s=document.createElement("button");s.className="tab-delete-button",s.innerHTML=`
102
+ </svg>`;class tt extends C{constructor(t,e){super({title:`Tab ${t+1}`,settings:{name:new b({title:"Tab Name",default:`Tab ${t+1}`}),content:new b({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const n=document.createElement("div");n.className="tab-delete-container";const s=document.createElement("button");s.className="tab-delete-button",s.innerHTML=`
99
103
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
100
104
  <polyline points="3 6 5 6 21 6"></polyline>
101
105
  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
@@ -103,7 +107,7 @@
103
107
  <path d="M14 11v6"></path>
104
108
  <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
105
109
  </svg>
106
- `,s.onclick=()=>{var a;return(a=this.onDeleteCallback)==null?void 0:a.call(this)},i.appendChild(s);const o=n.querySelector("h3");o?o.insertAdjacentElement("afterend",i):n.appendChild(i)}return t}}class Q extends g{constructor(){super({title:"Tabs",settings:{}}),this.tabs=[],this._el=null,this.addTab()}addTab(){const t=this.tabs.length,e=new J(t,()=>this.removeTab(e));this.tabs.push(e),this.settings[`Tab ${t+1}`]=e}removeTab(t){const e=this.tabs.indexOf(t);e>=0&&(this.tabs.splice(e,1),delete this.settings[`Tab ${e+1}`],this.relabelTabs(),this.rerender())}relabelTabs(){this.settings={},this.tabs.forEach((t,e)=>{t.title=`Tab ${e+1}`,this.settings[`Tab ${e+1}`]=t})}draw(){const t=super.draw();this._el=t;const e=document.createElement("div");e.className="tabs-add-btn-container";const n=document.createElement("button");return n.className="tabs-add-button",n.innerHTML=`
110
+ `,s.onclick=()=>{var a;return(a=this.onDeleteCallback)==null?void 0:a.call(this)},n.appendChild(s);const o=i.querySelector("h3");o?o.insertAdjacentElement("afterend",n):i.appendChild(n)}return t}}class et extends C{constructor(){super({title:"Tabs",settings:{}}),this.tabs=[],this._el=null,this.addTab()}addTab(){const t=this.tabs.length,e=new tt(t,()=>this.removeTab(e));this.tabs.push(e),this.settings[`Tab ${t+1}`]=e}removeTab(t){const e=this.tabs.indexOf(t);e>=0&&(this.tabs.splice(e,1),delete this.settings[`Tab ${e+1}`],this.relabelTabs(),this.rerender())}relabelTabs(){this.settings={},this.tabs.forEach((t,e)=>{t.title=`Tab ${e+1}`,this.settings[`Tab ${e+1}`]=t})}draw(){const t=super.draw();this._el=t;const e=document.createElement("div");e.className="tabs-add-btn-container";const i=document.createElement("button");return i.className="tabs-add-button",i.innerHTML=`
107
111
  <span class="add-icon">
108
112
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
109
113
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
@@ -116,12 +120,12 @@
116
120
  </svg>
117
121
  </span>
118
122
  <span class="add-label">Add Tab</span>
119
- `,n.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(n),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const n=this.settings[e];t.appendChild(n.draw())}))}}class Y extends g{constructor(t){super({title:"Background Image",settings:{backgroundImage:new L({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new M({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new k({default:(t==null?void 0:t.backgroundColor)??"#00141E"}),opacityBG:new M({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const n=Array.from(e.children),[i,s,o,a]=n;e.innerHTML="",e.appendChild(i),e.appendChild(s);const r=document.createElement("div");return r.className="bgset-or-label",r.textContent="OR",e.appendChild(r),e.appendChild(o),e.appendChild(a),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,n=this.settings.backgroundColor.value||"#00141E",i=this.settings.opacityBG.value??100;return t?`
123
+ `,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class it extends C{constructor(t){super({title:"Background Image",settings:{backgroundImage:new L({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new M({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new k({default:(t==null?void 0:t.backgroundColor)??"#00141E"}),opacityBG:new M({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[n,s,o,a]=i;e.innerHTML="",e.appendChild(n),e.appendChild(s);const r=document.createElement("div");return r.className="bgset-or-label",r.textContent="OR",e.appendChild(r),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||"#00141E",n=this.settings.opacityBG.value??100;return t?`
120
124
  background-image: url("${t}");
121
125
  background-size: cover;
122
126
  background-position: center;
123
127
  opacity: ${e/100};
124
128
  `:`
125
- background-color: ${n};
126
- opacity: ${i/100};
127
- `}}exports.AlignSetting=N;exports.BackgroundSettingSet=Y;exports.BorderSettingSet=_;exports.ButtonSetting=I;exports.ColorSetting=k;exports.DimensionSetting=O;exports.HeaderTypographySettingSet=Z;exports.MarginSettingGroup=z;exports.NumberSetting=m;exports.OpacitySetting=M;exports.SelectSetting=H;exports.Setting=C;exports.SettingGroup=g;exports.StringSetting=x;exports.TabsContainerGroup=Q;exports.UploadSetting=L;exports.iterateSettings=S;
129
+ background-color: ${i};
130
+ opacity: ${n/100};
131
+ `}}exports.AlignSetting=N;exports.BackgroundSettingSet=it;exports.BorderSettingSet=Z;exports.ButtonSetting=I;exports.ColorSetting=k;exports.DimensionSetting=O;exports.HeaderTypographySettingSet=P;exports.HeightSetting=A;exports.MarginSettingGroup=X;exports.NumberSetting=m;exports.OpacitySetting=M;exports.SelectSetting=H;exports.Setting=p;exports.SettingGroup=C;exports.StringSetting=b;exports.TabsContainerGroup=et;exports.UploadSetting=L;exports.WidthSetting=_;exports.iterateSettings=E;
package/dist/builder-settings-types.es.js CHANGED
@@ -8,17 +8,17 @@ let E = (l = 21) => {
8
8
  function L(l, t) {
9
9
  for (const e in l)
10
10
  if (l.hasOwnProperty(e)) {
11
- const n = l[e];
12
- t(e, n);
11
+ const i = l[e];
12
+ t(e, i);
13
13
  }
14
14
  }
15
- class g {
15
+ class C {
16
16
  constructor(t) {
17
17
  this.id = t.id || E(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
18
18
  }
19
19
  setOnChange(t) {
20
- return this.onChange = t, L(this.settings, (e, n) => {
21
- n.setOnChange(t);
20
+ return this.onChange = t, L(this.settings, (e, i) => {
21
+ i.setOnChange(t);
22
22
  }), this;
23
23
  }
24
24
  /**
@@ -28,15 +28,15 @@ class g {
28
28
  getValues(t) {
29
29
  if (t === void 0) {
30
30
  const e = {};
31
- for (const n in this.settings)
32
- if (this.settings.hasOwnProperty(n)) {
33
- const i = this.settings[n];
34
- i instanceof g ? e[n] = i.getValues() : e[n] = i.value;
31
+ for (const i in this.settings)
32
+ if (this.settings.hasOwnProperty(i)) {
33
+ const n = this.settings[i];
34
+ n instanceof C ? e[i] = n.getValues() : e[i] = n.value;
35
35
  }
36
36
  return e;
37
37
  } else {
38
38
  const e = this.settings[t];
39
- return e ? e instanceof g ? e.getValues() : e.value : void 0;
39
+ return e ? e instanceof C ? e.getValues() : e.value : void 0;
40
40
  }
41
41
  }
42
42
  draw() {
@@ -44,17 +44,17 @@ class g {
44
44
  t.className = "setting-group";
45
45
  const e = document.createElement("div");
46
46
  e.className = "setting-group-title";
47
- const n = document.createElement("h3");
48
- n.textContent = this.title;
49
- const i = document.createElement("span");
50
- i.className = "setting-group-arrow", i.innerHTML = `
47
+ const i = document.createElement("h3");
48
+ i.textContent = this.title;
49
+ const n = document.createElement("span");
50
+ n.className = "setting-group-arrow", n.innerHTML = `
51
51
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
52
52
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
53
53
  </svg>
54
54
  `, e.onclick = () => {
55
55
  const o = t.querySelector(".setting-group-content");
56
- o && (o.classList.toggle("collapsed"), i.classList.toggle("rotated"));
57
- }, e.appendChild(n), e.appendChild(i);
56
+ o && (o.classList.toggle("collapsed"), n.classList.toggle("rotated"));
57
+ }, e.appendChild(i), e.appendChild(n);
58
58
  const s = document.createElement("div");
59
59
  s.className = "setting-group-content";
60
60
  for (const o in this.settings)
@@ -83,7 +83,7 @@ function S(l) {
83
83
  return "";
84
84
  }
85
85
  }
86
- class C {
86
+ class g {
87
87
  constructor(t = {}) {
88
88
  this.props = t, this.id = t.id || E(), this.value = this.props.default, this.title = t.title || "";
89
89
  }
@@ -108,25 +108,25 @@ class C {
108
108
  }
109
109
  e.appendChild(s);
110
110
  }
111
- const n = document.createElement("div");
112
- n.className = t.wrapperClassName || "";
113
- const i = document.createElement("input");
114
- return this.inputEl = i, i.value = String(t.value || S(t.inputType)), i.type = t.inputType, i.placeholder = t.placeholder || "", i.className = t.inputClassName || "", i.oninput = (s) => {
111
+ const i = document.createElement("div");
112
+ i.className = t.wrapperClassName || "";
113
+ const n = document.createElement("input");
114
+ return this.inputEl = n, n.value = String(t.value || S(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "", n.oninput = (s) => {
115
115
  const o = s.target;
116
116
  let a = o.value;
117
117
  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);
118
- }, t.inputCustomizer && t.inputCustomizer(i), n.appendChild(i), e.appendChild(n), e;
118
+ }, t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
119
119
  }
120
120
  createLabel(t, e) {
121
- const n = document.createElement("span");
122
- return n.textContent = t, n.className = "input-label " + (e || ""), n;
121
+ const i = document.createElement("span");
122
+ return i.textContent = t, i.className = "input-label " + (e || ""), i;
123
123
  }
124
124
  createIcon(t, e) {
125
- const n = document.createElement("span");
126
- return n.className = "input-icon " + (e || ""), n.innerHTML = t, n;
125
+ const i = document.createElement("span");
126
+ return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
127
127
  }
128
128
  }
129
- class b extends C {
129
+ class b extends g {
130
130
  constructor(t = {}) {
131
131
  super(t), this.inputType = "text";
132
132
  }
@@ -160,8 +160,8 @@ class k extends b {
160
160
  t.className = "color-setting-wrapper";
161
161
  const e = document.createElement("div");
162
162
  e.className = "icon-container";
163
- const n = this.createIcon(this.props.icon || H), i = this.createLabel(this.title || "Color");
164
- e.appendChild(n), e.appendChild(i);
163
+ const i = this.createIcon(this.props.icon || H), n = this.createLabel(this.title || "Color");
164
+ e.appendChild(i), e.appendChild(n);
165
165
  const s = document.createElement("div");
166
166
  s.className = "color-input-wrapper";
167
167
  const o = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, a = (d) => {
@@ -193,7 +193,7 @@ class k extends b {
193
193
  }, s.appendChild(r), s.appendChild(w), s.appendChild(h), t.appendChild(e), t.appendChild(s), t;
194
194
  }
195
195
  }
196
- class v extends C {
196
+ class m extends g {
197
197
  constructor(t = {}) {
198
198
  super(t), this.inputType = "number";
199
199
  }
@@ -216,15 +216,15 @@ class v extends C {
216
216
  if (!this.props.suffix || this.props.suffix === "none")
217
217
  return e;
218
218
  e.classList.add("suffix-wrapper");
219
- const n = e.querySelector(
219
+ const i = e.querySelector(
220
220
  "input.number-setting-input"
221
221
  );
222
- n && (n.style.paddingRight = "35px");
223
- const i = document.createElement("span");
224
- return i.className = "suffix-label", i.textContent = this.props.suffix, e.appendChild(i), e;
222
+ i && (i.style.paddingRight = "35px");
223
+ const n = document.createElement("span");
224
+ return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
225
225
  }
226
226
  }
227
- class x extends v {
227
+ class x extends m {
228
228
  constructor(t) {
229
229
  super({
230
230
  ...t,
@@ -244,51 +244,51 @@ const V = `
244
244
  <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"/>
245
245
  </svg>
246
246
  `;
247
- class y extends C {
247
+ class y extends g {
248
248
  constructor(t = {}) {
249
249
  super(t), this.inputType = "select", this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && t.getOptionsAsync().then((e) => {
250
- this._options.push(...e), this.selectNode && e.forEach((n, i) => {
251
- const s = this._options.length - e.length + i;
252
- this.selectNode.appendChild(this.createOption(n, s));
250
+ this._options.push(...e), this.selectNode && e.forEach((i, n) => {
251
+ const s = this._options.length - e.length + n;
252
+ this.selectNode.appendChild(this.createOption(i, s));
253
253
  });
254
254
  }).catch((e) => {
255
255
  console.error("Failed to fetch async options:", e);
256
256
  });
257
257
  }
258
258
  createOption(t, e) {
259
- const n = document.createElement("option");
260
- return n.value = String(e), n.textContent = t.name, n;
259
+ const i = document.createElement("option");
260
+ return i.value = String(e), i.textContent = t.name, i;
261
261
  }
262
262
  draw() {
263
263
  const t = document.createElement("div");
264
264
  if (t.classList.add("select-container"), this.props.icon || this.props.title) {
265
- const n = document.createElement("div");
266
- if (n.className = "icon-container", this.props.icon) {
267
- const i = this.createIcon(this.props.icon);
268
- n.appendChild(i);
265
+ const i = document.createElement("div");
266
+ if (i.className = "icon-container", this.props.icon) {
267
+ const n = this.createIcon(this.props.icon);
268
+ i.appendChild(n);
269
269
  }
270
270
  if (this.props.title) {
271
- const i = this.createLabel(this.props.title);
272
- n.appendChild(i);
271
+ const n = this.createLabel(this.props.title);
272
+ i.appendChild(n);
273
273
  }
274
- t.appendChild(n);
274
+ t.appendChild(i);
275
275
  }
276
276
  const e = document.createElement("select");
277
- if (this.selectNode = e, e.classList.add("select"), this._options.forEach((n, i) => {
278
- const s = this.createOption(n, i);
277
+ if (this.selectNode = e, e.classList.add("select"), this._options.forEach((i, n) => {
278
+ const s = this.createOption(i, n);
279
279
  e.appendChild(s);
280
280
  }), this.value !== void 0) {
281
- const n = this._options.findIndex((i) => i.value === this.value);
282
- n >= 0 && (e.value = String(n));
281
+ const i = this._options.findIndex((n) => n.value === this.value);
282
+ i >= 0 && (e.value = String(i));
283
283
  }
284
- return e.onchange = (n) => {
284
+ return e.onchange = (i) => {
285
285
  var o;
286
- const i = Number(n.target.value), s = this._options[i];
286
+ const n = Number(i.target.value), s = this._options[n];
287
287
  s && (this.value = s.value, (o = this.onChange) == null || o.call(this, this.value));
288
288
  }, t.appendChild(e), t;
289
289
  }
290
290
  }
291
- class T extends C {
291
+ class T extends g {
292
292
  constructor(t = {}) {
293
293
  super(t), this.inputType = "button", this.value || (this.value = "center");
294
294
  }
@@ -297,8 +297,8 @@ class T extends C {
297
297
  t.className = "align-setting-wrapper";
298
298
  const e = document.createElement("label");
299
299
  e.className = "align-setting-label", e.textContent = this.title || "Align", t.appendChild(e);
300
- const n = document.createElement("div");
301
- return n.className = "align-options-container", [
300
+ const i = document.createElement("div");
301
+ return i.className = "align-options-container", [
302
302
  {
303
303
  name: "left",
304
304
  icon: `
@@ -336,12 +336,12 @@ class T extends C {
336
336
  const o = document.createElement("button");
337
337
  o.className = "align-option-button", o.innerHTML = s.icon, this.value === s.name && o.classList.add("selected"), o.addEventListener("click", () => {
338
338
  var a;
339
- n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), o.classList.add("selected"), this.value = s.name, (a = this.onChange) == null || a.call(this, this.value);
340
- }), n.appendChild(o);
341
- }), t.appendChild(n), t;
339
+ i.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), o.classList.add("selected"), this.value = s.name, (a = this.onChange) == null || a.call(this, this.value);
340
+ }), i.appendChild(o);
341
+ }), t.appendChild(i), t;
342
342
  }
343
343
  }
344
- class q extends C {
344
+ class P extends g {
345
345
  constructor(t) {
346
346
  super(t), this.inputType = "button";
347
347
  }
@@ -354,9 +354,9 @@ class q extends C {
354
354
  return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
355
355
  }
356
356
  }
357
- class D extends C {
357
+ class X extends g {
358
358
  constructor(t = {}) {
359
- super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new v({
359
+ super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new m({
360
360
  title: "Width",
361
361
  default: this.value.width,
362
362
  suffix: "px",
@@ -365,7 +365,7 @@ class D extends C {
365
365
  maxValue: t.maxWidth,
366
366
  icon: I
367
367
  // SVG icon defined at the bottom.
368
- }), this.heightSetting = new v({
368
+ }), this.heightSetting = new m({
369
369
  title: "Height",
370
370
  default: this.value.height,
371
371
  suffix: "px",
@@ -376,14 +376,14 @@ class D extends C {
376
376
  var s;
377
377
  if (this.isUpdating || isNaN(e) || e < 1) return;
378
378
  this.isUpdating = !0;
379
- let n = e, i = this.value.height;
380
- this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (i = Math.round(n / this.aspectRatio), i < 1 && (i = 1)), this.value = { width: n, height: i }, i !== 0 && (this.aspectRatio = n / i), (s = this.onChange) == null || s.call(this, this.value), this.heightSetting.setValue(i), this.isUpdating = !1;
379
+ let i = e, n = this.value.height;
380
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (n = Math.round(i / this.aspectRatio), n < 1 && (n = 1)), this.value = { width: i, height: n }, n !== 0 && (this.aspectRatio = i / n), (s = this.onChange) == null || s.call(this, this.value), this.heightSetting.setValue(n), this.isUpdating = !1;
381
381
  }), this.heightSetting.setOnChange((e) => {
382
382
  var s;
383
383
  if (this.isUpdating || isNaN(e) || e < 1) return;
384
384
  this.isUpdating = !0;
385
- let n = e, i = this.value.width;
386
- this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (i = Math.round(n * this.aspectRatio), i < 1 && (i = 1)), this.value = { width: i, height: n }, n !== 0 && (this.aspectRatio = i / n), (s = this.onChange) == null || s.call(this, this.value), this.widthSetting.setValue(i), this.isUpdating = !1;
385
+ let i = e, n = this.value.width;
386
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (n = Math.round(i * this.aspectRatio), n < 1 && (n = 1)), this.value = { width: n, height: i }, i !== 0 && (this.aspectRatio = n / i), (s = this.onChange) == null || s.call(this, this.value), this.widthSetting.setValue(n), this.isUpdating = !1;
387
387
  });
388
388
  }
389
389
  /**
@@ -393,8 +393,8 @@ class D extends C {
393
393
  */
394
394
  toggleLock(t) {
395
395
  if (this.locked = !this.locked, this.locked) {
396
- const e = this.value.width, n = this.value.height;
397
- n !== 0 && (this.aspectRatio = e / n);
396
+ const e = this.value.width, i = this.value.height;
397
+ i !== 0 && (this.aspectRatio = e / i);
398
398
  }
399
399
  t.innerHTML = this.getLockSVG(this.locked);
400
400
  }
@@ -421,10 +421,10 @@ class D extends C {
421
421
  draw() {
422
422
  const t = document.createElement("div");
423
423
  t.className = "dimension-setting-container";
424
- const e = this.widthSetting.draw(), n = this.heightSetting.draw(), i = document.createElement("div");
425
- i.className = "dimension-bracket";
424
+ const e = this.widthSetting.draw(), i = this.heightSetting.draw(), n = document.createElement("div");
425
+ n.className = "dimension-bracket";
426
426
  const s = document.createElement("span");
427
- return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), i.appendChild(s), t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
427
+ return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
428
428
  }
429
429
  }
430
430
  const I = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
@@ -436,7 +436,7 @@ const I = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
436
436
  <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"/>
437
437
  </svg>
438
438
  `;
439
- class R extends C {
439
+ class R extends g {
440
440
  constructor(t = {}) {
441
441
  super(t), this.inputType = "button", !this.value && t.defaultUrl && (this.value = t.defaultUrl);
442
442
  }
@@ -445,17 +445,17 @@ class R extends C {
445
445
  t.className = "upload-setting-wrapper";
446
446
  const e = document.createElement("img");
447
447
  e.className = "upload-preview", e.src = this.value || this.props.defaultUrl || "";
448
- const n = document.createElement("button");
449
- n.className = "upload-button", n.innerHTML = `
448
+ const i = document.createElement("button");
449
+ i.className = "upload-button", i.innerHTML = `
450
450
  <span class="upload-icon">${O}</span>
451
451
  <span class="upload-label">Upload</span>
452
452
  `;
453
- const i = document.createElement("input");
454
- return i.type = "file", i.accept = "image/*", i.style.display = "none", n.onclick = () => {
455
- i.click();
456
- }, i.onchange = async () => {
453
+ const n = document.createElement("input");
454
+ return n.type = "file", n.accept = "image/*", n.style.display = "none", i.onclick = () => {
455
+ n.click();
456
+ }, n.onchange = async () => {
457
457
  var o, a, r;
458
- const s = (o = i.files) == null ? void 0 : o[0];
458
+ const s = (o = n.files) == null ? void 0 : o[0];
459
459
  if (s)
460
460
  try {
461
461
  const h = new FormData(), u = this.props.formFieldName || "file";
@@ -468,30 +468,71 @@ class R extends C {
468
468
  body: h,
469
469
  headers: d
470
470
  })).json();
471
- let m;
471
+ let v;
472
472
  if (this.props.parseResponse)
473
- m = this.props.parseResponse(p);
474
- else if (m = (a = p == null ? void 0 : p.data) == null ? void 0 : a.url, !m)
473
+ v = this.props.parseResponse(p);
474
+ else if (v = (a = p == null ? void 0 : p.data) == null ? void 0 : a.url, !v)
475
475
  throw new Error(
476
476
  "No URL found in response. Provide a parseResponse if needed."
477
477
  );
478
- this.value = m, e.src = m, (r = this.onChange) == null || r.call(this, m);
478
+ this.value = v, e.src = v, (r = this.onChange) == null || r.call(this, v);
479
479
  } catch (h) {
480
480
  console.error("Error uploading file:", h);
481
481
  }
482
- }, t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
482
+ }, t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
483
+ }
484
+ }
485
+ class J extends g {
486
+ constructor(t = {}) {
487
+ super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new m({
488
+ title: "Height",
489
+ default: this.value,
490
+ suffix: "px",
491
+ minValue: t.minHeight ?? 1,
492
+ maxValue: t.maxHeight,
493
+ icon: $
494
+ }), this.numberSetting.setOnChange((e) => {
495
+ var i;
496
+ isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
497
+ });
498
+ }
499
+ draw() {
500
+ return this.numberSetting.draw();
483
501
  }
484
502
  }
485
- const $ = `
503
+ const $ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
504
+ <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"/>
505
+ </svg>`;
506
+ class Q extends g {
507
+ constructor(t = {}) {
508
+ super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new m({
509
+ title: "Width",
510
+ default: this.value,
511
+ suffix: "px",
512
+ minValue: t.minWidth ?? 1,
513
+ maxValue: t.maxWidth,
514
+ icon: j
515
+ }), this.numberSetting.setOnChange((e) => {
516
+ var i;
517
+ isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
518
+ });
519
+ }
520
+ draw() {
521
+ return this.numberSetting.draw();
522
+ }
523
+ }
524
+ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
525
+ <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"/>
526
+ </svg>`, A = `
486
527
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
487
528
  <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"/>
488
529
  </svg>
489
- `, j = `
530
+ `, _ = `
490
531
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
491
532
  <path d="M6 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.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.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.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
492
533
  </svg>
493
534
  `;
494
- class P extends g {
535
+ class Y extends C {
495
536
  constructor(t) {
496
537
  super({
497
538
  title: "Border",
@@ -504,15 +545,15 @@ class P extends g {
504
545
  minValue: 0,
505
546
  maxValue: 100
506
547
  }),
507
- radius: new v({
548
+ radius: new m({
508
549
  title: "Radius",
509
- icon: $,
550
+ icon: A,
510
551
  default: (t == null ? void 0 : t.radius) ?? 12,
511
552
  suffix: "px"
512
553
  }),
513
- size: new v({
554
+ size: new m({
514
555
  title: "Size",
515
- icon: j,
556
+ icon: _,
516
557
  default: (t == null ? void 0 : t.size) ?? 0,
517
558
  suffix: "px"
518
559
  })
@@ -523,29 +564,29 @@ class P extends g {
523
564
  * Optional helper to generate CSS from the current settings.
524
565
  */
525
566
  getCssCode() {
526
- const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, n = this.settings.radius.value ?? 0, i = this.settings.size.value ?? 0;
567
+ const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.radius.value ?? 0, n = this.settings.size.value ?? 0;
527
568
  return `
528
569
  border-color: ${t};
529
- border-width: ${i}px;
530
- border-radius: ${n}px;
570
+ border-width: ${n}px;
571
+ border-radius: ${i}px;
531
572
  opacity: ${e / 100};
532
573
  `;
533
574
  }
534
575
  }
535
- const A = `
576
+ const G = `
536
577
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
537
578
  <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"/>
538
579
  </svg>
539
- `, _ = `
580
+ `, W = `
540
581
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
541
582
  <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"/>
542
583
  </svg>
543
- `, G = `
584
+ `, F = `
544
585
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
545
586
  <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"/>
546
587
  </svg>
547
588
  `;
548
- class X extends g {
589
+ class K extends C {
549
590
  constructor(t = {}) {
550
591
  super({
551
592
  title: t.title || "Typography",
@@ -558,7 +599,7 @@ class X extends g {
558
599
  }),
559
600
  fontFamily: new y({
560
601
  title: "Font",
561
- icon: A,
602
+ icon: G,
562
603
  default: t.fontFamilyDefault ?? "Satoshi",
563
604
  options: t.fontFamilyOptions ?? [
564
605
  { name: "Satoshi", value: "Satoshi" },
@@ -570,7 +611,7 @@ class X extends g {
570
611
  }),
571
612
  fontWeight: new y({
572
613
  title: "Weight",
573
- icon: _,
614
+ icon: W,
574
615
  default: t.fontWeightDefault ?? "bold",
575
616
  options: t.fontWeightOptions ?? [
576
617
  { name: "Regular", value: "regular" },
@@ -580,9 +621,9 @@ class X extends g {
580
621
  getOptions: t.fontWeightGetOptions,
581
622
  getOptionsAsync: t.fontWeightGetOptionsAsync
582
623
  }),
583
- fontSize: new v({
624
+ fontSize: new m({
584
625
  title: "Size",
585
- icon: G,
626
+ icon: F,
586
627
  default: t.fontSizeDefault ?? 12,
587
628
  suffix: "px"
588
629
  }),
@@ -594,18 +635,18 @@ class X extends g {
594
635
  });
595
636
  }
596
637
  getCssCode() {
597
- const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, n = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, o = this.settings.align.value ?? "left";
638
+ 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";
598
639
  return `
599
640
  color: ${t};
600
641
  opacity: ${e / 100};
601
- font-family: ${n};
602
- font-weight: ${i};
642
+ font-family: ${i};
643
+ font-weight: ${n};
603
644
  font-size: ${s}px;
604
645
  text-align: ${o};
605
646
  `;
606
647
  }
607
648
  }
608
- class M extends C {
649
+ class M extends g {
609
650
  constructor(t) {
610
651
  super({
611
652
  ...t,
@@ -619,7 +660,7 @@ class M extends C {
619
660
  let u = Number(a.value);
620
661
  u < r && (u = r), u > h && (u = h), a.value = String(u);
621
662
  }));
622
- }, n = this.createInput({
663
+ }, i = this.createInput({
623
664
  value: this.value,
624
665
  inputType: t,
625
666
  title: this.props.title,
@@ -630,15 +671,15 @@ class M extends C {
630
671
  placeholder: this.value === "auto" ? "auto" : ""
631
672
  });
632
673
  if (!this.props.suffix || this.props.suffix === "none")
633
- return n;
634
- n.classList.add("suffix-wrapper");
635
- const i = n.querySelector(
674
+ return i;
675
+ i.classList.add("suffix-wrapper");
676
+ const n = i.querySelector(
636
677
  "input.number-setting-input"
637
678
  );
638
- i && (i.style.paddingRight = "35px");
679
+ n && (n.style.paddingRight = "35px");
639
680
  const s = document.createElement("span");
640
- s.className = "suffix-label", s.textContent = this.props.suffix, n.appendChild(s);
641
- const o = n.querySelector("input");
681
+ s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
682
+ const o = i.querySelector("input");
642
683
  return o && (o.oninput = (a) => {
643
684
  const r = a.target.value.trim();
644
685
  if (r.toLowerCase() === "auto")
@@ -648,35 +689,35 @@ class M extends C {
648
689
  isNaN(h) || (this.value = h);
649
690
  }
650
691
  this.onChange && this.onChange(this.value);
651
- }), n;
692
+ }), i;
652
693
  }
653
694
  }
654
- class J extends g {
695
+ class tt extends C {
655
696
  constructor(t) {
656
697
  super({
657
698
  title: "Margins",
658
699
  settings: {
659
700
  marginTop: new M({
660
701
  title: "Top",
661
- icon: F,
702
+ icon: U,
662
703
  suffix: "px",
663
704
  default: (t == null ? void 0 : t.marginTop) ?? "auto"
664
705
  }),
665
706
  marginRight: new M({
666
707
  title: "Right",
667
- icon: U,
708
+ icon: Z,
668
709
  suffix: "px",
669
710
  default: (t == null ? void 0 : t.marginRight) ?? 0
670
711
  }),
671
712
  marginBottom: new M({
672
713
  title: "Bottom",
673
- icon: W,
714
+ icon: z,
674
715
  suffix: "px",
675
716
  default: (t == null ? void 0 : t.marginBottom) ?? 0
676
717
  }),
677
718
  marginLeft: new M({
678
719
  title: "Left",
679
- icon: Z,
720
+ icon: q,
680
721
  suffix: "px",
681
722
  default: (t == null ? void 0 : t.marginLeft) ?? 0
682
723
  })
@@ -684,25 +725,25 @@ class J extends g {
684
725
  });
685
726
  }
686
727
  getCssCode() {
687
- 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, n = typeof this.settings.marginBottom.value == "number" ? `${this.settings.marginBottom.value}px` : this.settings.marginBottom.value, i = typeof this.settings.marginLeft.value == "number" ? `${this.settings.marginLeft.value}px` : this.settings.marginLeft.value;
728
+ 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, n = typeof this.settings.marginLeft.value == "number" ? `${this.settings.marginLeft.value}px` : this.settings.marginLeft.value;
688
729
  return `
689
730
  margin-top: ${t};
690
731
  margin-right: ${e};
691
- margin-bottom: ${n};
692
- margin-left: ${i};
732
+ margin-bottom: ${i};
733
+ margin-left: ${n};
693
734
  `;
694
735
  }
695
736
  }
696
- const F = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
737
+ const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
697
738
  <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
698
- </svg>`, U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
739
+ </svg>`, Z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
699
740
  <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"/>
700
- </svg>`, W = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
741
+ </svg>`, z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
701
742
  <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"/>
702
- </svg>`, Z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
743
+ </svg>`, q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
703
744
  <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"/>
704
745
  </svg>`;
705
- class z extends g {
746
+ class D extends C {
706
747
  constructor(t, e) {
707
748
  super({
708
749
  title: `Tab ${t + 1}`,
@@ -721,10 +762,10 @@ class z extends g {
721
762
  draw() {
722
763
  const t = super.draw(), e = t.querySelector(".setting-group-arrow");
723
764
  e && e.parentElement && e.parentElement.removeChild(e);
724
- const n = t.querySelector(".setting-group-title");
725
- if (n) {
726
- const i = document.createElement("div");
727
- i.className = "tab-delete-container";
765
+ const i = t.querySelector(".setting-group-title");
766
+ if (i) {
767
+ const n = document.createElement("div");
768
+ n.className = "tab-delete-container";
728
769
  const s = document.createElement("button");
729
770
  s.className = "tab-delete-button", s.innerHTML = `
730
771
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
@@ -737,21 +778,21 @@ class z extends g {
737
778
  `, s.onclick = () => {
738
779
  var a;
739
780
  return (a = this.onDeleteCallback) == null ? void 0 : a.call(this);
740
- }, i.appendChild(s);
741
- const o = n.querySelector("h3");
742
- o ? o.insertAdjacentElement("afterend", i) : n.appendChild(i);
781
+ }, n.appendChild(s);
782
+ const o = i.querySelector("h3");
783
+ o ? o.insertAdjacentElement("afterend", n) : i.appendChild(n);
743
784
  }
744
785
  return t;
745
786
  }
746
787
  }
747
- class Q extends g {
788
+ class et extends C {
748
789
  // Store the rendered element
749
790
  constructor() {
750
791
  super({ title: "Tabs", settings: {} }), this.tabs = [], this._el = null, this.addTab();
751
792
  }
752
793
  /** Adds a new tab. */
753
794
  addTab() {
754
- const t = this.tabs.length, e = new z(t, () => this.removeTab(e));
795
+ const t = this.tabs.length, e = new D(t, () => this.removeTab(e));
755
796
  this.tabs.push(e), this.settings[`Tab ${t + 1}`] = e;
756
797
  }
757
798
  /** Removes a specific tab. */
@@ -774,8 +815,8 @@ class Q extends g {
774
815
  this._el = t;
775
816
  const e = document.createElement("div");
776
817
  e.className = "tabs-add-btn-container";
777
- const n = document.createElement("button");
778
- return n.className = "tabs-add-button", n.innerHTML = `
818
+ const i = document.createElement("button");
819
+ return i.className = "tabs-add-button", i.innerHTML = `
779
820
  <span class="add-icon">
780
821
  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
781
822
  <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
@@ -788,9 +829,9 @@ class Q extends g {
788
829
  </svg>
789
830
  </span>
790
831
  <span class="add-label">Add Tab</span>
791
- `, n.onclick = () => {
832
+ `, i.onclick = () => {
792
833
  this.addTab(), this.rerender();
793
- }, e.appendChild(n), t.appendChild(e), t;
834
+ }, e.appendChild(i), t.appendChild(e), t;
794
835
  }
795
836
  /**
796
837
  * Re-renders the inner settings content based on the current tabs.
@@ -799,12 +840,12 @@ class Q extends g {
799
840
  if (!this._el) return;
800
841
  const t = this._el.querySelector(".setting-group-content");
801
842
  t && (t.innerHTML = "", Object.keys(this.settings).forEach((e) => {
802
- const n = this.settings[e];
803
- t.appendChild(n.draw());
843
+ const i = this.settings[e];
844
+ t.appendChild(i.draw());
804
845
  }));
805
846
  }
806
847
  }
807
- class Y extends g {
848
+ class it extends C {
808
849
  /**
809
850
  * Constructs a new BackgroundSettingSet.
810
851
  *
@@ -855,8 +896,8 @@ class Y extends g {
855
896
  draw() {
856
897
  const t = super.draw(), e = t.querySelector(".setting-group-content");
857
898
  if (!e) return t;
858
- const n = Array.from(e.children), [i, s, o, a] = n;
859
- e.innerHTML = "", e.appendChild(i), e.appendChild(s);
899
+ const i = Array.from(e.children), [n, s, o, a] = i;
900
+ e.innerHTML = "", e.appendChild(n), e.appendChild(s);
860
901
  const r = document.createElement("div");
861
902
  return r.className = "bgset-or-label", r.textContent = "OR", e.appendChild(r), e.appendChild(o), e.appendChild(a), t;
862
903
  }
@@ -864,34 +905,36 @@ class Y extends g {
864
905
  * Helper method to generate CSS based on the current settings.
865
906
  */
866
907
  getCssCode() {
867
- const t = this.settings.backgroundImage.value || "", e = this.settings.opacity.value ?? 100, n = this.settings.backgroundColor.value || "#00141E", i = this.settings.opacityBG.value ?? 100;
908
+ const t = this.settings.backgroundImage.value || "", e = this.settings.opacity.value ?? 100, i = this.settings.backgroundColor.value || "#00141E", n = this.settings.opacityBG.value ?? 100;
868
909
  return t ? `
869
910
  background-image: url("${t}");
870
911
  background-size: cover;
871
912
  background-position: center;
872
913
  opacity: ${e / 100};
873
914
  ` : `
874
- background-color: ${n};
875
- opacity: ${i / 100};
915
+ background-color: ${i};
916
+ opacity: ${n / 100};
876
917
  `;
877
918
  }
878
919
  }
879
920
  export {
880
921
  T as AlignSetting,
881
- Y as BackgroundSettingSet,
882
- P as BorderSettingSet,
883
- q as ButtonSetting,
922
+ it as BackgroundSettingSet,
923
+ Y as BorderSettingSet,
924
+ P as ButtonSetting,
884
925
  k as ColorSetting,
885
- D as DimensionSetting,
886
- X as HeaderTypographySettingSet,
887
- J as MarginSettingGroup,
888
- v as NumberSetting,
926
+ X as DimensionSetting,
927
+ K as HeaderTypographySettingSet,
928
+ J as HeightSetting,
929
+ tt as MarginSettingGroup,
930
+ m as NumberSetting,
889
931
  x as OpacitySetting,
890
932
  y as SelectSetting,
891
- C as Setting,
892
- g as SettingGroup,
933
+ g as Setting,
934
+ C as SettingGroup,
893
935
  b as StringSetting,
894
- Q as TabsContainerGroup,
936
+ et as TabsContainerGroup,
895
937
  R as UploadSetting,
938
+ Q as WidthSetting,
896
939
  L as iterateSettings
897
940
  };
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{flex-direction:column;gap:8px;max-height:fit-content;display:flex;transition:max-height .3s ease-in-out,display .2s ease-in-out}.setting-group-content.collapsed{max-height:0;display:none}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.upload-preview{width:91px;height:71px;object-fit:cover;border-radius:4px}.upload-button{display:inline-flex;align-items:center;gap:4px;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Inter,serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{flex-direction:column;gap:8px;max-height:fit-content;display:flex;transition:max-height .3s ease-in-out,display .2s ease-in-out}.setting-group-content.collapsed{max-height:0;display:none}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.upload-preview{width:91px;height:71px;object-fit:cover;border-radius:4px}.upload-button{display:inline-flex;align-items:center;gap:4px;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.height-setting{display:flex;gap:8px}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:flex;gap:8px}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Inter,serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
package/dist/index.d.ts CHANGED
@@ -188,6 +188,18 @@ export declare class HeaderTypographySettingSet extends SettingGroup<{
188
188
  getCssCode(): string;
189
189
  }
190
190
 
191
+ export declare class HeightSetting extends Setting<number, HeightSettingProps> {
192
+ inputType: "number";
193
+ private numberSetting;
194
+ constructor(props?: HeightSettingProps);
195
+ draw(): HTMLElement;
196
+ }
197
+
198
+ export declare interface HeightSettingProps extends SettingProps<number> {
199
+ minHeight?: number;
200
+ maxHeight?: number;
201
+ }
202
+
191
203
  export declare interface IChangable<T> {
192
204
  setOnChange(onChange: (value: T) => void): void;
193
205
  }
@@ -402,4 +414,16 @@ export declare interface UploadSettingProps extends SettingProps<string> {
402
414
  parseResponse?: (responseData: any) => string;
403
415
  }
404
416
 
417
+ export declare class WidthSetting extends Setting<number, WidthSettingProps> {
418
+ inputType: "number";
419
+ private numberSetting;
420
+ constructor(props?: WidthSettingProps);
421
+ draw(): HTMLElement;
422
+ }
423
+
424
+ export declare interface WidthSettingProps extends SettingProps<number> {
425
+ minWidth?: number;
426
+ maxWidth?: number;
427
+ }
428
+
405
429
  export { }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "builder-settings-types",
3
3
  "description": "builder settings",
4
- "version": "0.0.64",
4
+ "version": "0.0.66",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",