builder-settings-types 0.0.55 → 0.0.57

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 (4) hide show
  1. package/dist/builder-settings-types.cjs.js +29 -16
  2. package/dist/builder-settings-types.es.js +140 -88
  3. package/dist/index.d.ts +29 -1
  4. package/package.json +1 -1
package/dist/builder-settings-types.cjs.js CHANGED
@@ -1,21 +1,21 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let x=(l=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(l|=0));for(;l--;)t+=k[e[l]&63];return t};function H(l,t){for(const e in l)if(l.hasOwnProperty(e)){const i=l[e];t(e,i)}}class m{constructor(t){this.id=t.id||x(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,H(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 m?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof m?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=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let x=(l=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(l|=0));for(;l--;)t+=E[e[l]&63];return t};function H(l,t){for(const e in l)if(l.hasOwnProperty(e)){const i=l[e];t(e,i)}}class g{constructor(t){this.id=t.id||x(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,H(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 g?e[i]=n.getValues():e[i]=n.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 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 a=t.querySelector(".setting-group-content");a&&(a.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 a in this.settings)if(this.settings.hasOwnProperty(a)){const o=this.settings[a];s.appendChild(o.draw())}return t.appendChild(e),t.appendChild(s),t}}function b(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 d{constructor(t={}){this.props=t,this.id=t.id||x(),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 a=this.createIcon(t.icon,t.iconClassName);s.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);s.appendChild(a)}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||b(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const a=s.target;let o=a.value;t.inputType==="number"?o=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(o=a.value),this.value=o,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 v extends d{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const r=this.props.minValue??Number.MIN_SAFE_INTEGER,h=this.props.maxValue??Number.MAX_SAFE_INTEGER;let u=Number(o.value);u<r&&(u=r),u>h&&(u=h),o.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 a=i.querySelector("input");return a&&(a.oninput=o=>{const r=o.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 E extends m{constructor(){super({title:"Margins",settings:{marginTop:new v({title:"Top",icon:L,suffix:"px",default:"auto"}),marginRight:new v({title:"Right",icon:S,suffix:"px",default:0}),marginBottom:new v({title:"Bottom",icon:y,suffix:"px",default:0}),marginLeft:new v({title:"Left",icon:V,suffix:"px",default: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`
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 L(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 d{constructor(t={}){this.props=t,this.id=t.id||x(),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||L(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 w extends d{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,u=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(a.value);h<r&&(h=r),h>u&&(h=u),a.value=String(h)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const 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 u=Number(r);isNaN(u)||(this.value=u)}this.onChange&&this.onChange(this.value)}),i}}class S extends g{constructor(t){super({title:"Margins",settings:{marginTop:new w({title:"Top",icon:y,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new w({title:"Right",icon:V,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new w({title:"Bottom",icon:T,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new w({title:"Left",icon:I,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`
6
6
  margin-top: ${t};
7
7
  margin-right: ${e};
8
8
  margin-bottom: ${i};
9
9
  margin-left: ${n};
10
- `}}const L=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
10
+ `}}const y=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
11
11
  <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"/>
12
- </svg>`,S=`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
13
- <path d="M4.625 0.75H4.6325M4.625 7.5H4.6325M4.625 14.25H4.6325M11.375 0.75H11.3825M11.375 7.5H11.3825M11.375 14.25H11.3825M8 0.75H8.0075M8 7.5H8.0075M8 14.25H8.0075M8 10.875H8.0075M8 4.125H8.0075M1.25 0.75H1.2575M1.25 7.5H1.2575M1.25 14.25H1.2575M1.25 10.875H1.2575M1.25 4.125H1.2575M14.75 14.25V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
14
- </svg>`,y=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
15
- <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"/>
16
12
  </svg>`,V=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
13
+ <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"/>
14
+ </svg>`,T=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
15
+ <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"/>
16
+ </svg>`,I=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
17
17
  <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"/>
18
- </svg>`;class N extends d{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 M="<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 T extends N{constructor(t){super({...t,icon:t.icon||M,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||M),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const a=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,o=p=>{const c=p.value.startsWith("#")?p.value.slice(1):p.value;return a.test(c)?(p.style.border="",!0):(p.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"),g=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),w=g.querySelector("input");return u.oninput=p=>{var C;let c=p.target.value.trim();c.charAt(0)!=="#"&&(c="#"+c,u.value=c),o(u)&&(this.value=c,(C=this.onChange)==null||C.call(this,c),w.value=c,r.style.backgroundColor=c)},w.oninput=p=>{var C;let c=p.target.value;c.charAt(0)!=="#"&&(c="#"+c,w.value=c),this.value=c,(C=this.onChange)==null||C.call(this,c),u.value=c,r.style.backgroundColor=c,o(u)},s.appendChild(r),s.appendChild(g),s.appendChild(h),t.appendChild(e),t.appendChild(s),t}}class f extends d{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 a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(s.value);r<a&&(r=a),r>o&&(r=o),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 I extends f{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||R,title:t.title||"Opacity"}),this.inputType="number"}}const R=`
18
+ </svg>`;class k extends d{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 M="<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 N extends k{constructor(t){super({...t,icon:t.icon||M,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||M),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=p=>{const c=p.value.startsWith("#")?p.value.slice(1):p.value;return o.test(c)?(p.style.border="",!0):(p.style.border="1px solid red",!1)},r=document.createElement("div");r.className="color-preview",r.style.backgroundColor=this.value||"";const u=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=u.querySelector("input"),m=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),f=m.querySelector("input");return h.oninput=p=>{var v;let c=p.target.value.trim();c.charAt(0)!=="#"&&(c="#"+c,h.value=c),a(h)&&(this.value=c,(v=this.onChange)==null||v.call(this,c),f.value=c,r.style.backgroundColor=c)},f.oninput=p=>{var v;let c=p.target.value;c.charAt(0)!=="#"&&(c="#"+c,f.value=c),this.value=c,(v=this.onChange)==null||v.call(this,c),h.value=c,r.style.backgroundColor=c,a(h)},s.appendChild(r),s.appendChild(m),s.appendChild(u),t.appendChild(e),t.appendChild(s),t}}class C extends d{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 b extends C{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||B,title:t.title||"Opacity"}),this.inputType="number"}}const B=`
19
19
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
20
20
  <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"/>
21
21
  <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"/>
@@ -23,7 +23,20 @@
23
23
  <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"/>
24
24
  <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"/>
25
25
  </svg>
26
- `;class B extends d{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 a;const n=Number(i.target.value),s=this._options[n];s&&(this.value=s.value,(a=this.onChange)==null||a.call(this,this.value))},t.appendChild(e),t}}class O extends d{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:`
26
+ `,R=`
27
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
28
+ <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"/>
29
+ </svg>
30
+ `,O=`
31
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
32
+ <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"/>
33
+ </svg>
34
+ `;class j extends g{constructor(t){super({title:"Border",settings:{color:new N({title:"Color",default:(t==null?void 0:t.color)??"#00141E"}),opacity:new b({title:"Opacity",default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new C({title:"Radius",icon:R,default:(t==null?void 0:t.radius)??12,suffix:"px"}),size:new C({title:"Size",icon:O,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`
35
+ border-color: ${t};
36
+ border-width: ${n}px;
37
+ border-radius: ${i}px;
38
+ opacity: ${e/100};
39
+ `}}class A extends d{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 Z extends d{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:`
27
40
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
28
41
  <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"
29
42
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
@@ -44,7 +57,7 @@
44
57
  <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"
45
58
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
46
59
  </svg>
47
- `}].forEach(s=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=s.icon,this.value===s.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=s.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class A extends d{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 j extends d{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 f({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:U}),this.heightSetting=new f({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),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?`
60
+ `}].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 U extends d{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 _ extends d{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 C({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:$}),this.heightSetting=new C({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:W}),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?`
48
61
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
49
62
  <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"/>
50
63
  </svg>
@@ -52,15 +65,15 @@
52
65
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
53
66
  <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"/>
54
67
  </svg>
55
- `}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 U=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
68
+ `}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 $=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
56
69
  <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>`,Z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
70
+ </svg>`,W=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
58
71
  <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"/>
59
- </svg>`,_=`
72
+ </svg>`,F=`
60
73
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
61
74
  <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"/>
62
75
  </svg>
63
- `;class W extends d{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=`
64
- <span class="upload-icon">${_}</span>
76
+ `;class z extends d{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=`
77
+ <span class="upload-icon">${F}</span>
65
78
  <span class="upload-label">Upload</span>
66
- `;const n=document.createElement("input");return n.type="file",n.accept="image/*",n.style.display="none",i.onclick=()=>{n.click()},n.onchange=()=>{var a;const s=(a=n.files)==null?void 0:a[0];if(s){const o=new FileReader;o.onload=r=>{var u,g;const h=(u=r.target)==null?void 0:u.result;this.value=h,e.src=h,(g=this.onChange)==null||g.call(this,h)},o.readAsDataURL(s)}},t.appendChild(e),t.appendChild(i),t.appendChild(n),t}}exports.AlignSetting=O;exports.ButtonSetting=A;exports.ColorSetting=T;exports.DimensionSetting=j;exports.MarginSettingGroup=E;exports.NumberSetting=f;exports.OpacitySetting=I;exports.SelectSetting=B;exports.Setting=d;exports.SettingGroup=m;exports.StringSetting=N;exports.UploadSetting=W;exports.iterateSettings=H;
79
+ `;const n=document.createElement("input");return n.type="file",n.accept="image/*",n.style.display="none",i.onclick=()=>{n.click()},n.onchange=()=>{var o;const s=(o=n.files)==null?void 0:o[0];if(s){const a=new FileReader;a.onload=r=>{var h,m;const u=(h=r.target)==null?void 0:h.result;this.value=u,e.src=u,(m=this.onChange)==null||m.call(this,u)},a.readAsDataURL(s)}},t.appendChild(e),t.appendChild(i),t.appendChild(n),t}}exports.AlignSetting=Z;exports.BorderSettingSet=j;exports.ButtonSetting=U;exports.ColorSetting=N;exports.DimensionSetting=_;exports.MarginSettingGroup=S;exports.NumberSetting=C;exports.OpacitySetting=b;exports.SelectSetting=A;exports.Setting=d;exports.SettingGroup=g;exports.StringSetting=k;exports.UploadSetting=z;exports.iterateSettings=H;
package/dist/builder-settings-types.es.js CHANGED
@@ -12,7 +12,7 @@ function k(l, t) {
12
12
  t(e, i);
13
13
  }
14
14
  }
15
- class v {
15
+ class m {
16
16
  constructor(t) {
17
17
  this.id = t.id || x(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
18
18
  }
@@ -31,12 +31,12 @@ class v {
31
31
  for (const i in this.settings)
32
32
  if (this.settings.hasOwnProperty(i)) {
33
33
  const n = this.settings[i];
34
- n instanceof v ? e[i] = n.getValues() : e[i] = n.value;
34
+ n instanceof m ? 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 v ? e.getValues() : e.value : void 0;
39
+ return e ? e instanceof m ? e.getValues() : e.value : void 0;
40
40
  }
41
41
  }
42
42
  draw() {
@@ -52,15 +52,15 @@ class v {
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
- const a = t.querySelector(".setting-group-content");
56
- a && (a.classList.toggle("collapsed"), n.classList.toggle("rotated"));
55
+ const o = t.querySelector(".setting-group-content");
56
+ o && (o.classList.toggle("collapsed"), n.classList.toggle("rotated"));
57
57
  }, e.appendChild(i), e.appendChild(n);
58
58
  const s = document.createElement("div");
59
59
  s.className = "setting-group-content";
60
- for (const a in this.settings)
61
- if (this.settings.hasOwnProperty(a)) {
62
- const o = this.settings[a];
63
- s.appendChild(o.draw());
60
+ for (const o in this.settings)
61
+ if (this.settings.hasOwnProperty(o)) {
62
+ const a = this.settings[o];
63
+ s.appendChild(a.draw());
64
64
  }
65
65
  return t.appendChild(e), t.appendChild(s), t;
66
66
  }
@@ -99,12 +99,12 @@ class d {
99
99
  if (e.className = t.wrapperClassName || "", t.title || t.icon) {
100
100
  const s = document.createElement("div");
101
101
  if (s.className = "icon-container", t.icon) {
102
- const a = this.createIcon(t.icon, t.iconClassName);
103
- s.appendChild(a);
102
+ const o = this.createIcon(t.icon, t.iconClassName);
103
+ s.appendChild(o);
104
104
  }
105
105
  if (t.title) {
106
- const a = this.createLabel(t.title, t.labelClassName);
107
- s.appendChild(a);
106
+ const o = this.createLabel(t.title, t.labelClassName);
107
+ s.appendChild(o);
108
108
  }
109
109
  e.appendChild(s);
110
110
  }
@@ -112,9 +112,9 @@ class d {
112
112
  i.className = t.wrapperClassName || "";
113
113
  const n = document.createElement("input");
114
114
  return this.inputEl = n, n.value = String(t.value || N(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "", n.oninput = (s) => {
115
- const a = s.target;
116
- let o = a.value;
117
- t.inputType === "number" ? o = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (o = a.value), this.value = o, this.onChange && this.onChange(this.value);
115
+ const o = s.target;
116
+ let a = o.value;
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
118
  }, t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
119
119
  }
120
120
  createLabel(t, e) {
@@ -126,7 +126,7 @@ class d {
126
126
  return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
127
127
  }
128
128
  }
129
- class m extends d {
129
+ class w extends d {
130
130
  constructor(t) {
131
131
  super({
132
132
  ...t,
@@ -134,11 +134,11 @@ class m extends d {
134
134
  }), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
135
135
  }
136
136
  draw() {
137
- const t = this.value === "auto" ? "text" : "number", e = (o) => {
138
- this.value !== "auto" && (this.props.minValue !== void 0 && (o.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (o.max = String(this.props.maxValue)), this.props.className && o.classList.add(this.props.className), o.addEventListener("input", () => {
137
+ const t = this.value === "auto" ? "text" : "number", e = (a) => {
138
+ 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", () => {
139
139
  const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER, u = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
140
- let h = Number(o.value);
141
- h < r && (h = r), h > u && (h = u), o.value = String(h);
140
+ let h = Number(a.value);
141
+ h < r && (h = r), h > u && (h = u), a.value = String(h);
142
142
  }));
143
143
  }, i = this.createInput({
144
144
  value: this.value,
@@ -159,9 +159,9 @@ class m extends d {
159
159
  n && (n.style.paddingRight = "35px");
160
160
  const s = document.createElement("span");
161
161
  s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
162
- const a = i.querySelector("input");
163
- return a && (a.oninput = (o) => {
164
- const r = o.target.value.trim();
162
+ const o = i.querySelector("input");
163
+ return o && (o.oninput = (a) => {
164
+ const r = a.target.value.trim();
165
165
  if (r.toLowerCase() === "auto")
166
166
  this.value = "auto";
167
167
  else {
@@ -172,34 +172,34 @@ class m extends d {
172
172
  }), i;
173
173
  }
174
174
  }
175
- class B extends v {
176
- constructor() {
175
+ class Z extends m {
176
+ constructor(t) {
177
177
  super({
178
178
  title: "Margins",
179
179
  settings: {
180
- marginTop: new m({
180
+ marginTop: new w({
181
181
  title: "Top",
182
- icon: E,
182
+ icon: b,
183
183
  suffix: "px",
184
- default: "auto"
184
+ default: (t == null ? void 0 : t.marginTop) ?? "auto"
185
185
  }),
186
- marginRight: new m({
186
+ marginRight: new w({
187
187
  title: "Right",
188
- icon: b,
188
+ icon: E,
189
189
  suffix: "px",
190
- default: 0
190
+ default: (t == null ? void 0 : t.marginRight) ?? 0
191
191
  }),
192
- marginBottom: new m({
192
+ marginBottom: new w({
193
193
  title: "Bottom",
194
194
  icon: L,
195
195
  suffix: "px",
196
- default: 0
196
+ default: (t == null ? void 0 : t.marginBottom) ?? 0
197
197
  }),
198
- marginLeft: new m({
198
+ marginLeft: new w({
199
199
  title: "Left",
200
200
  icon: y,
201
201
  suffix: "px",
202
- default: 0
202
+ default: (t == null ? void 0 : t.marginLeft) ?? 0
203
203
  })
204
204
  }
205
205
  });
@@ -214,16 +214,16 @@ class B extends v {
214
214
  `;
215
215
  }
216
216
  }
217
- const E = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
217
+ const b = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
218
218
  <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"/>
219
- </svg>`, b = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
220
- <path d="M4.625 0.75H4.6325M4.625 7.5H4.6325M4.625 14.25H4.6325M11.375 0.75H11.3825M11.375 7.5H11.3825M11.375 14.25H11.3825M8 0.75H8.0075M8 7.5H8.0075M8 14.25H8.0075M8 10.875H8.0075M8 4.125H8.0075M1.25 0.75H1.2575M1.25 7.5H1.2575M1.25 14.25H1.2575M1.25 10.875H1.2575M1.25 4.125H1.2575M14.75 14.25V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
219
+ </svg>`, E = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
220
+ <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"/>
221
221
  </svg>`, L = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
222
222
  <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"/>
223
223
  </svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
224
224
  <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"/>
225
225
  </svg>`;
226
- class S extends d {
226
+ class V extends d {
227
227
  constructor(t = {}) {
228
228
  super(t), this.inputType = "text";
229
229
  }
@@ -244,7 +244,7 @@ class S extends d {
244
244
  }
245
245
  }
246
246
  const M = "<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>";
247
- class O extends S {
247
+ class S extends V {
248
248
  constructor(t) {
249
249
  super({
250
250
  ...t,
@@ -261,9 +261,9 @@ class O extends S {
261
261
  e.appendChild(i), e.appendChild(n);
262
262
  const s = document.createElement("div");
263
263
  s.className = "color-input-wrapper";
264
- const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, o = (p) => {
264
+ const o = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, a = (p) => {
265
265
  const c = p.value.startsWith("#") ? p.value.slice(1) : p.value;
266
- return a.test(c) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
266
+ return o.test(c) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
267
267
  }, r = document.createElement("div");
268
268
  r.className = "color-preview", r.style.backgroundColor = this.value || "";
269
269
  const u = this.createInput({
@@ -282,24 +282,24 @@ class O extends S {
282
282
  return h.oninput = (p) => {
283
283
  var C;
284
284
  let c = p.target.value.trim();
285
- c.charAt(0) !== "#" && (c = "#" + c, h.value = c), o(h) && (this.value = c, (C = this.onChange) == null || C.call(this, c), f.value = c, r.style.backgroundColor = c);
285
+ c.charAt(0) !== "#" && (c = "#" + c, h.value = c), a(h) && (this.value = c, (C = this.onChange) == null || C.call(this, c), f.value = c, r.style.backgroundColor = c);
286
286
  }, f.oninput = (p) => {
287
287
  var C;
288
288
  let c = p.target.value;
289
- c.charAt(0) !== "#" && (c = "#" + c, f.value = c), this.value = c, (C = this.onChange) == null || C.call(this, c), h.value = c, r.style.backgroundColor = c, o(h);
289
+ c.charAt(0) !== "#" && (c = "#" + c, f.value = c), this.value = c, (C = this.onChange) == null || C.call(this, c), h.value = c, r.style.backgroundColor = c, a(h);
290
290
  }, s.appendChild(r), s.appendChild(g), s.appendChild(u), t.appendChild(e), t.appendChild(s), t;
291
291
  }
292
292
  }
293
- class w extends d {
293
+ class v extends d {
294
294
  constructor(t = {}) {
295
295
  super(t), this.inputType = "number";
296
296
  }
297
297
  draw() {
298
298
  const t = (s) => {
299
299
  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", () => {
300
- const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
300
+ const o = this.props.minValue ?? Number.MIN_SAFE_INTEGER, a = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
301
301
  let r = Number(s.value);
302
- r < a && (r = a), r > o && (r = o), s.value = String(r);
302
+ r < o && (r = o), r > a && (r = a), s.value = String(r);
303
303
  });
304
304
  }, e = this.createInput({
305
305
  value: this.value,
@@ -321,18 +321,18 @@ class w extends d {
321
321
  return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
322
322
  }
323
323
  }
324
- class A extends w {
324
+ class T extends v {
325
325
  constructor(t) {
326
326
  super({
327
327
  ...t,
328
328
  minValue: 0,
329
329
  maxValue: 100,
330
- icon: t.icon || V,
330
+ icon: t.icon || I,
331
331
  title: t.title || "Opacity"
332
332
  }), this.inputType = "number";
333
333
  }
334
334
  }
335
- const V = `
335
+ const I = `
336
336
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
337
337
  <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"/>
338
338
  <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"/>
@@ -340,8 +340,59 @@ const V = `
340
340
  <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"/>
341
341
  <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"/>
342
342
  </svg>
343
- `;
344
- class j extends d {
343
+ `, R = `
344
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
345
+ <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"/>
346
+ </svg>
347
+ `, B = `
348
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
349
+ <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"/>
350
+ </svg>
351
+ `;
352
+ class U extends m {
353
+ constructor(t) {
354
+ super({
355
+ title: "Border",
356
+ settings: {
357
+ color: new S({
358
+ title: "Color",
359
+ default: (t == null ? void 0 : t.color) ?? "#00141E"
360
+ }),
361
+ opacity: new T({
362
+ title: "Opacity",
363
+ default: (t == null ? void 0 : t.opacity) ?? 100,
364
+ minValue: 0,
365
+ maxValue: 100
366
+ }),
367
+ radius: new v({
368
+ title: "Radius",
369
+ icon: R,
370
+ default: (t == null ? void 0 : t.radius) ?? 12,
371
+ suffix: "px"
372
+ }),
373
+ size: new v({
374
+ title: "Size",
375
+ icon: B,
376
+ default: (t == null ? void 0 : t.size) ?? 0,
377
+ suffix: "px"
378
+ })
379
+ }
380
+ });
381
+ }
382
+ /**
383
+ * Optional helper to generate CSS from the current settings.
384
+ */
385
+ getCssCode() {
386
+ 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;
387
+ return `
388
+ border-color: ${t};
389
+ border-width: ${n}px;
390
+ border-radius: ${i}px;
391
+ opacity: ${e / 100};
392
+ `;
393
+ }
394
+ }
395
+ class _ extends d {
345
396
  constructor(t = {}) {
346
397
  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) => {
347
398
  this._options.push(...e), this.selectNode && e.forEach((i, n) => {
@@ -379,13 +430,13 @@ class j extends d {
379
430
  i >= 0 && (e.value = String(i));
380
431
  }
381
432
  return e.onchange = (i) => {
382
- var a;
433
+ var o;
383
434
  const n = Number(i.target.value), s = this._options[n];
384
- s && (this.value = s.value, (a = this.onChange) == null || a.call(this, this.value));
435
+ s && (this.value = s.value, (o = this.onChange) == null || o.call(this, this.value));
385
436
  }, t.appendChild(e), t;
386
437
  }
387
438
  }
388
- class Z extends d {
439
+ class $ extends d {
389
440
  constructor(t = {}) {
390
441
  super(t), this.inputType = "button", this.value || (this.value = "center");
391
442
  }
@@ -430,15 +481,15 @@ class Z extends d {
430
481
  `
431
482
  }
432
483
  ].forEach((s) => {
433
- const a = document.createElement("button");
434
- a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
435
- var o;
436
- i.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (o = this.onChange) == null || o.call(this, this.value);
437
- }), i.appendChild(a);
484
+ const o = document.createElement("button");
485
+ o.className = "align-option-button", o.innerHTML = s.icon, this.value === s.name && o.classList.add("selected"), o.addEventListener("click", () => {
486
+ var a;
487
+ 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);
488
+ }), i.appendChild(o);
438
489
  }), t.appendChild(i), t;
439
490
  }
440
491
  }
441
- class U extends d {
492
+ class W extends d {
442
493
  constructor(t) {
443
494
  super(t), this.inputType = "button";
444
495
  }
@@ -451,24 +502,24 @@ class U extends d {
451
502
  return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
452
503
  }
453
504
  }
454
- class _ extends d {
505
+ class F extends d {
455
506
  constructor(t = {}) {
456
- 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 w({
507
+ 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({
457
508
  title: "Width",
458
509
  default: this.value.width,
459
510
  suffix: "px",
460
511
  // Display "px" as the unit.
461
512
  minValue: t.minWidth ?? 1,
462
513
  maxValue: t.maxWidth,
463
- icon: T
514
+ icon: O
464
515
  // SVG icon defined at the bottom.
465
- }), this.heightSetting = new w({
516
+ }), this.heightSetting = new v({
466
517
  title: "Height",
467
518
  default: this.value.height,
468
519
  suffix: "px",
469
520
  minValue: t.minHeight ?? 1,
470
521
  maxValue: t.maxHeight,
471
- icon: I
522
+ icon: j
472
523
  }), this.widthSetting.setOnChange((e) => {
473
524
  var s;
474
525
  if (this.isUpdating || isNaN(e) || e < 1) return;
@@ -524,16 +575,16 @@ class _ extends d {
524
575
  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;
525
576
  }
526
577
  }
527
- const T = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
578
+ const O = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
528
579
  <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"/>
529
- </svg>`, I = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
580
+ </svg>`, j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
530
581
  <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"/>
531
- </svg>`, R = `
582
+ </svg>`, A = `
532
583
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
533
584
  <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"/>
534
585
  </svg>
535
586
  `;
536
- class W extends d {
587
+ class z extends d {
537
588
  constructor(t = {}) {
538
589
  super(t), this.inputType = "button", !this.value && t.defaultUrl && (this.value = t.defaultUrl);
539
590
  }
@@ -544,38 +595,39 @@ class W extends d {
544
595
  e.className = "upload-preview", e.src = this.value || this.props.defaultUrl || "";
545
596
  const i = document.createElement("button");
546
597
  i.className = "upload-button", i.innerHTML = `
547
- <span class="upload-icon">${R}</span>
598
+ <span class="upload-icon">${A}</span>
548
599
  <span class="upload-label">Upload</span>
549
600
  `;
550
601
  const n = document.createElement("input");
551
602
  return n.type = "file", n.accept = "image/*", n.style.display = "none", i.onclick = () => {
552
603
  n.click();
553
604
  }, n.onchange = () => {
554
- var a;
555
- const s = (a = n.files) == null ? void 0 : a[0];
605
+ var o;
606
+ const s = (o = n.files) == null ? void 0 : o[0];
556
607
  if (s) {
557
- const o = new FileReader();
558
- o.onload = (r) => {
608
+ const a = new FileReader();
609
+ a.onload = (r) => {
559
610
  var h, g;
560
611
  const u = (h = r.target) == null ? void 0 : h.result;
561
612
  this.value = u, e.src = u, (g = this.onChange) == null || g.call(this, u);
562
- }, o.readAsDataURL(s);
613
+ }, a.readAsDataURL(s);
563
614
  }
564
615
  }, t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
565
616
  }
566
617
  }
567
618
  export {
568
- Z as AlignSetting,
569
- U as ButtonSetting,
570
- O as ColorSetting,
571
- _ as DimensionSetting,
572
- B as MarginSettingGroup,
573
- w as NumberSetting,
574
- A as OpacitySetting,
575
- j as SelectSetting,
619
+ $ as AlignSetting,
620
+ U as BorderSettingSet,
621
+ W as ButtonSetting,
622
+ S as ColorSetting,
623
+ F as DimensionSetting,
624
+ Z as MarginSettingGroup,
625
+ v as NumberSetting,
626
+ T as OpacitySetting,
627
+ _ as SelectSetting,
576
628
  d as Setting,
577
- v as SettingGroup,
578
- S as StringSetting,
579
- W as UploadSetting,
629
+ m as SettingGroup,
630
+ V as StringSetting,
631
+ z as UploadSetting,
580
632
  k as iterateSettings
581
633
  };
package/dist/index.d.ts CHANGED
@@ -10,6 +10,29 @@ export declare interface AlignSettingProps extends SettingProps<AlignValue> {
10
10
 
11
11
  export declare type AlignValue = 'left' | 'center' | 'right';
12
12
 
13
+ /**
14
+ * A SettingGroup for configuring "Border" settings.
15
+ * It includes child settings for color, opacity, radius, and size.
16
+ * You can pass default values to override the internal defaults.
17
+ */
18
+ export declare class BorderSettingSet extends SettingGroup<{
19
+ color: ColorSetting;
20
+ opacity: NumberSetting;
21
+ radius: NumberSetting;
22
+ size: NumberSetting;
23
+ }> {
24
+ constructor(defaults?: {
25
+ color?: string;
26
+ opacity?: number;
27
+ radius?: number;
28
+ size?: number;
29
+ });
30
+ /**
31
+ * Optional helper to generate CSS from the current settings.
32
+ */
33
+ getCssCode(): string;
34
+ }
35
+
13
36
  export declare class ButtonSetting extends Setting<void, ButtonSettingProps> {
14
37
  inputType: InputTypes;
15
38
  constructor(props: ButtonSettingProps);
@@ -137,7 +160,12 @@ export declare class MarginSettingGroup extends SettingGroup<{
137
160
  marginBottom: MarginNumberSetting;
138
161
  marginLeft: MarginNumberSetting;
139
162
  }> {
140
- constructor();
163
+ constructor(defaults?: {
164
+ marginTop?: number | 'auto';
165
+ marginRight?: number | 'auto';
166
+ marginBottom?: number | 'auto';
167
+ marginLeft?: number | 'auto';
168
+ });
141
169
  getCssCode(): string;
142
170
  }
143
171
 
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.55",
4
+ "version": "0.0.57",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",