builder-settings-types 0.0.46 → 0.0.48

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 +33 -4
  2. package/dist/builder-settings-types.es.js +233 -90
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +83 -0
  5. package/package.json +1 -1
package/dist/builder-settings-types.cjs.js CHANGED
@@ -1,15 +1,44 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(r,t){for(const e in r)if(r.hasOwnProperty(e)){const i=r[e];t(e,i)}}class w{setOnChange(t){this.onChange=t,f(this.settings,(e,i)=>{i.setOnChange(t)})}constructor(t){this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}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 s=document.createElement("span");s.className="setting-group-arrow",s.innerHTML=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function w(l,t){for(const e in l)if(l.hasOwnProperty(e)){const n=l[e];t(e,n)}}class f{setOnChange(t){this.onChange=t,w(this.settings,(e,n)=>{n.setOnChange(t)})}constructor(t){this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}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 s=document.createElement("span");s.className="setting-group-arrow",s.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
- `;const n=document.createElement("div");n.className="setting-group-content";for(const a in this.settings){const l=this.settings[a].draw();n.appendChild(l)}return e.onclick=()=>{n.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}function N(r){switch(r){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 g{constructor(t={}){this.props=t,this.value=this.props.default,this.title=t.title||""}setOnChange(t){this.onChange=t}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 n=document.createElement("div");if(n.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);n.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);n.appendChild(a)}e.appendChild(n)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");return this.inputEl=s,s.value=String(t.value||N(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=n=>{const a=n.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(s),i.appendChild(s),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 d extends g{constructor(t={}){super(t),this.inputType="number"}draw(){const t=n=>{this.props.minValue!==void 0&&(n.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(n.max=String(this.props.maxValue)),this.props.className&&n.classList.add(this.props.className),n.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(n.value);l<a&&(l=a),l>o&&(l=o),n.value=String(l)})},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 s=document.createElement("span");return s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s),e}}class x extends w{constructor(){super({title:"Margin",settings:{margin:new d({title:"Margin All"}),marginTop:new d({title:"Margin Top"}),marginRight:new d({title:"Margin Right"}),marginBottom:new d({title:"Margin Bottom"}),marginLeft:new d({title:"Margin Left"})}})}getCssCode(){return`
5
+ `;const i=document.createElement("div");i.className="setting-group-content";for(const a in this.settings){const r=this.settings[a].draw();i.appendChild(r)}return e.onclick=()=>{i.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}function x(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.value=this.props.default,this.title=t.title||""}setOnChange(t){this.onChange=t}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 i=document.createElement("div");if(i.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);i.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);i.appendChild(a)}e.appendChild(i)}const n=document.createElement("div");n.className=t.wrapperClassName||"";const s=document.createElement("input");return this.inputEl=s,s.value=String(t.value||x(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=i=>{const a=i.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(s),n.appendChild(s),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 p extends d{constructor(t={}){super(t),this.inputType="number"}draw(){const t=i=>{this.props.minValue!==void 0&&(i.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(i.max=String(this.props.maxValue)),this.props.className&&i.classList.add(this.props.className),i.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(i.value);r<a&&(r=a),r>o&&(r=o),i.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 s=document.createElement("span");return s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s),e}}class k extends f{constructor(){super({title:"Margin",settings:{margin:new p({title:"Margin All"}),marginTop:new p({title:"Margin Top"}),marginRight:new p({title:"Margin Right"}),marginBottom:new p({title:"Margin Bottom"}),marginLeft:new p({title:"Margin Left"})}})}getCssCode(){return`
6
6
  margin-botton: ${this.settings.marginBottom.value}px;
7
7
  margin-top: ${this.settings.marginTop.value}px;
8
8
  margin-right: ${this.settings.marginRight.value}px;
9
9
  margin-left: ${this.settings.marginLeft.value}px;
10
- `}}class y extends g{constructor(t){super(t),this.inputType="color",this.icon="<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>"}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.icon),s=this.createLabel("Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";let a,o;const l=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,h=u=>l.test(u.value)?(u.style.border="",!0):(u.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:u=>{u.oninput=v=>{var m;let p=v.target.value.trim();if(!h(u))return;this.value=p,(m=this.onChange)==null||m.call(this,p);const C=document.getElementsByClassName("color-picker")[0];C.value=p,c.style.backgroundColor=p}}}),o=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:u=>{u.oninput=v=>{var m;let p=v.target.value;this.value=p,(m=this.onChange)==null||m.call(this,p);const C=document.getElementsByClassName("color-text-input")[0];C.value=p,c.style.backgroundColor=p,h(C)}}});const c=document.createElement("div");return c.className="color-preview",c.style.backgroundColor=this.value||"",n.appendChild(c),n.appendChild(o),n.appendChild(a),t.appendChild(e),t.appendChild(n),t}}class E extends g{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})}}class b extends d{constructor(t){super({...t,minValue:0,maxValue:100,icon:S,title:t.title||"Opacity"}),this.inputType="number"}}const S=`
10
+ `}}class N extends d{constructor(t){super(t),this.inputType="color",this.icon="<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>"}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.icon),s=this.createLabel("Color");e.appendChild(n),e.appendChild(s);const i=document.createElement("div");i.className="color-input-wrapper";let a,o;const r=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,g=u=>r.test(u.value)?(u.style.border="",!0):(u.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:u=>{u.oninput=v=>{var C;let h=v.target.value.trim();if(!g(u))return;this.value=h,(C=this.onChange)==null||C.call(this,h);const m=document.getElementsByClassName("color-picker")[0];m.value=h,c.style.backgroundColor=h}}}),o=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:u=>{u.oninput=v=>{var C;let h=v.target.value;this.value=h,(C=this.onChange)==null||C.call(this,h);const m=document.getElementsByClassName("color-text-input")[0];m.value=h,c.style.backgroundColor=h,g(m)}}});const c=document.createElement("div");return c.className="color-preview",c.style.backgroundColor=this.value||"",i.appendChild(c),i.appendChild(o),i.appendChild(a),t.appendChild(e),t.appendChild(i),t}}class L 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})}}class b extends p{constructor(t){super({...t,minValue:0,maxValue:100,icon:E,title:t.title||"Opacity"}),this.inputType="number"}}const E=`
11
11
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
12
12
  <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"/>
13
13
  <path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
14
14
  </svg>
15
- `;class T extends g{constructor(t={}){super(t),this.inputType="select",this.props.options||(this.props.options=[]),this.props.getOptionsAsync&&this.props.getOptionsAsync().then(e=>{this.props.options=[...this.props.options,...e],e.forEach(i=>{var s;(s=this.selectNode)==null||s.appendChild(this.createOption(i))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t){const e=document.createElement("option");return e.value=t.value,e.textContent=t.name,e}draw(){var o,l;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||""),s=this.createLabel(this.props.title||""),n=document.createElement("select");return this.selectNode=n,n.classList.add("select"),n.onchange=h=>{var c;this.value=h.target.value,(c=this.onChange)==null||c.call(this,h.target.value)},[...this.props.options||[],...((l=(o=this.props).getOptions)==null?void 0:l.call(o))||[]].forEach(h=>{const c=this.createOption(h);n.appendChild(c)}),this.value&&(n.value=this.value),e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}exports.ColorSetting=y;exports.MarginSettingGroup=x;exports.NumberSetting=d;exports.OpacitySetting=b;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=w;exports.StringSetting=E;exports.iterateSettings=f;
15
+ `;class S extends d{constructor(t={}){super(t),this.inputType="select",this.props.options||(this.props.options=[]),this.props.getOptionsAsync&&this.props.getOptionsAsync().then(e=>{this.props.options=[...this.props.options,...e],e.forEach(n=>{var s;(s=this.selectNode)==null||s.appendChild(this.createOption(n))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t){const e=document.createElement("option");return e.value=t.value,e.textContent=t.name,e}draw(){var o,r;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const n=this.createIcon(this.props.icon||""),s=this.createLabel(this.props.title||""),i=document.createElement("select");return this.selectNode=i,i.classList.add("select"),i.onchange=g=>{var c;this.value=g.target.value,(c=this.onChange)==null||c.call(this,g.target.value)},[...this.props.options||[],...((r=(o=this.props).getOptions)==null?void 0:r.call(o))||[]].forEach(g=>{const c=this.createOption(g);i.appendChild(c)}),this.value&&(i.value=this.value),e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}class M 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 n=document.createElement("div");return n.className="align-options-container",[{name:"left",icon:`
16
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
17
+ <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"
18
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
19
+ <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"
20
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
21
+ </svg>
22
+ `},{name:"center",icon:`
23
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
24
+ <path d="M12 7.5C12.6989 7.5 13.0484 7.5 13.324 7.38582C13.6916 7.23358 13.9836 6.94157 14.1358 6.57402C14.25 6.29837 14.25 5.94891 14.25 5.25C14.25 4.55109 14.25 4.20163 14.1358 3.92598C13.9836 3.55843 13.6916 3.26642 13.324 3.11418C13.0484 3 12.6989 3 12 3L6 3C5.30109 3 4.95163 3 4.67598 3.11418C4.30843 3.26642 4.01642 3.55843 3.86418 3.92597C3.75 4.20163 3.75 4.55109 3.75 5.25C3.75 5.94891 3.75 6.29837 3.86418 6.57402C4.01642 6.94157 4.30843 7.23358 4.67598 7.38582C4.95163 7.5 5.30109 7.5 6 7.5L12 7.5Z"
25
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
26
+ <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"
27
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
28
+ </svg>
29
+ `},{name:"right",icon:`
30
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
31
+ <path d="M13.5 7.5C14.1989 7.5 14.5484 7.5 14.824 7.38582C15.1916 7.23358 15.4836 6.94157 15.6358 6.57402C15.75 6.29837 15.75 5.94891 15.75 5.25C15.75 4.55109 15.75 4.20163 15.6358 3.92598C15.4836 3.55843 15.1916 3.26642 14.824 3.11418C14.5484 3 14.1989 3 13.5 3L7.5 3C6.80109 3 6.45163 3 6.17598 3.11418C5.80843 3.26642 5.51642 3.55843 5.36418 3.92597C5.25 4.20163 5.25 4.55109 5.25 5.25C5.25 5.94891 5.25 6.29837 5.36418 6.57402C5.51642 6.94157 5.80843 7.23358 6.17598 7.38582C6.45163 7.5 6.80109 7.5 7.5 7.5L13.5 7.5Z"
32
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
33
+ <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"
34
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
35
+ </svg>
36
+ `}].forEach(i=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=i.icon,this.value===i.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;n.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=i.name,(o=this.onChange)==null||o.call(this,this.value)}),n.appendChild(a)}),t.appendChild(n),t}}class y 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 T 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 p({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:V}),this.heightSetting=new p({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:I}),this.widthSetting.setOnChange(e=>{var i;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,s=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(s=Math.round(n/this.aspectRatio),s<1&&(s=1)),this.value={width:n,height:s},s!==0&&(this.aspectRatio=n/s),(i=this.onChange)==null||i.call(this,this.value),this.heightSetting.setValue(s),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var i;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,s=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(s=Math.round(n*this.aspectRatio),s<1&&(s=1)),this.value={width:s,height:n},n!==0&&(this.aspectRatio=s/n),(i=this.onChange)==null||i.call(this,this.value),this.widthSetting.setValue(s),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`
37
+ <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
38
+ <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"/>
39
+ </svg>
40
+ `}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),n=this.heightSetting.draw(),s=document.createElement("div");s.className="dimension-bracket";const i=document.createElement("span");return i.className="dimension-lock-icon",i.innerHTML=this.getLockSVG(this.locked),i.onclick=()=>this.toggleLock(i),s.appendChild(i),t.appendChild(e),t.appendChild(s),t.appendChild(n),t}}const V=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
41
+ <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"/>
42
+ </svg>`,I=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
43
+ <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"/>
44
+ </svg>`;exports.AlignSetting=M;exports.ButtonSetting=y;exports.ColorSetting=N;exports.DimensionSetting=T;exports.MarginSettingGroup=k;exports.NumberSetting=p;exports.OpacitySetting=b;exports.SelectSetting=S;exports.Setting=d;exports.SettingGroup=f;exports.StringSetting=L;exports.iterateSettings=w;
package/dist/builder-settings-types.es.js CHANGED
@@ -1,14 +1,14 @@
1
- function f(r, t) {
2
- for (const e in r)
3
- if (r.hasOwnProperty(e)) {
4
- const i = r[e];
5
- t(e, i);
1
+ function w(l, t) {
2
+ for (const e in l)
3
+ if (l.hasOwnProperty(e)) {
4
+ const n = l[e];
5
+ t(e, n);
6
6
  }
7
7
  }
8
- class w {
8
+ class f {
9
9
  setOnChange(t) {
10
- this.onChange = t, f(this.settings, (e, i) => {
11
- i.setOnChange(t);
10
+ this.onChange = t, w(this.settings, (e, n) => {
11
+ n.setOnChange(t);
12
12
  });
13
13
  }
14
14
  constructor(t) {
@@ -19,27 +19,27 @@ class w {
19
19
  t.className = "setting-group";
20
20
  const e = document.createElement("div");
21
21
  e.className = "setting-group-title";
22
- const i = document.createElement("h3");
23
- i.textContent = this.title;
22
+ const n = document.createElement("h3");
23
+ n.textContent = this.title;
24
24
  const s = document.createElement("span");
25
25
  s.className = "setting-group-arrow", s.innerHTML = `
26
26
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
27
27
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
28
28
  </svg>
29
29
  `;
30
- const n = document.createElement("div");
31
- n.className = "setting-group-content";
30
+ const i = document.createElement("div");
31
+ i.className = "setting-group-content";
32
32
  for (const a in this.settings) {
33
- const l = this.settings[a].draw();
34
- n.appendChild(l);
33
+ const r = this.settings[a].draw();
34
+ i.appendChild(r);
35
35
  }
36
36
  return e.onclick = () => {
37
- n.classList.toggle("collapsed"), s.classList.toggle("rotated");
38
- }, e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
37
+ i.classList.toggle("collapsed"), s.classList.toggle("rotated");
38
+ }, e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
39
39
  }
40
40
  }
41
- function x(r) {
42
- switch (r) {
41
+ function x(l) {
42
+ switch (l) {
43
43
  case "number":
44
44
  return 0;
45
45
  case "text":
@@ -70,45 +70,45 @@ class C {
70
70
  t = { ...this.props.inputProps, ...t };
71
71
  const e = document.createElement("div");
72
72
  if (e.className = t.wrapperClassName || "", t.title || t.icon) {
73
- const n = document.createElement("div");
74
- if (n.className = "icon-container", t.icon) {
73
+ const i = document.createElement("div");
74
+ if (i.className = "icon-container", t.icon) {
75
75
  const a = this.createIcon(t.icon, t.iconClassName);
76
- n.appendChild(a);
76
+ i.appendChild(a);
77
77
  }
78
78
  if (t.title) {
79
79
  const a = this.createLabel(t.title, t.labelClassName);
80
- n.appendChild(a);
80
+ i.appendChild(a);
81
81
  }
82
- e.appendChild(n);
82
+ e.appendChild(i);
83
83
  }
84
- const i = document.createElement("div");
85
- i.className = t.wrapperClassName || "";
84
+ const n = document.createElement("div");
85
+ n.className = t.wrapperClassName || "";
86
86
  const s = document.createElement("input");
87
- return this.inputEl = s, s.value = String(t.value || x(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", s.oninput = (n) => {
88
- const a = n.target;
87
+ return this.inputEl = s, s.value = String(t.value || x(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", s.oninput = (i) => {
88
+ const a = i.target;
89
89
  let o = a.value;
90
90
  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);
91
- }, t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
91
+ }, t.inputCustomizer && t.inputCustomizer(s), n.appendChild(s), e.appendChild(n), e;
92
92
  }
93
93
  createLabel(t, e) {
94
- const i = document.createElement("span");
95
- return i.textContent = t, i.className = "input-label " + (e || ""), i;
94
+ const n = document.createElement("span");
95
+ return n.textContent = t, n.className = "input-label " + (e || ""), n;
96
96
  }
97
97
  createIcon(t, e) {
98
- const i = document.createElement("span");
99
- return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
98
+ const n = document.createElement("span");
99
+ return n.className = "input-icon " + (e || ""), n.innerHTML = t, n;
100
100
  }
101
101
  }
102
- class d extends C {
102
+ class u extends C {
103
103
  constructor(t = {}) {
104
104
  super(t), this.inputType = "number";
105
105
  }
106
106
  draw() {
107
- const t = (n) => {
108
- this.props.minValue !== void 0 && (n.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (n.max = String(this.props.maxValue)), this.props.className && n.classList.add(this.props.className), n.addEventListener("input", () => {
107
+ const t = (i) => {
108
+ this.props.minValue !== void 0 && (i.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (i.max = String(this.props.maxValue)), this.props.className && i.classList.add(this.props.className), i.addEventListener("input", () => {
109
109
  const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
110
- let l = Number(n.value);
111
- l < a && (l = a), l > o && (l = o), n.value = String(l);
110
+ let r = Number(i.value);
111
+ r < a && (r = a), r > o && (r = o), i.value = String(r);
112
112
  });
113
113
  }, e = this.createInput({
114
114
  value: this.value,
@@ -122,24 +122,24 @@ class d extends C {
122
122
  if (!this.props.suffix || this.props.suffix === "none")
123
123
  return e;
124
124
  e.classList.add("suffix-wrapper");
125
- const i = e.querySelector(
125
+ const n = e.querySelector(
126
126
  "input.number-setting-input"
127
127
  );
128
- i && (i.style.paddingRight = "35px");
128
+ n && (n.style.paddingRight = "35px");
129
129
  const s = document.createElement("span");
130
130
  return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
131
131
  }
132
132
  }
133
- class E extends w {
133
+ class E extends f {
134
134
  constructor() {
135
135
  super({
136
136
  title: "Margin",
137
137
  settings: {
138
- margin: new d({ title: "Margin All" }),
139
- marginTop: new d({ title: "Margin Top" }),
140
- marginRight: new d({ title: "Margin Right" }),
141
- marginBottom: new d({ title: "Margin Bottom" }),
142
- marginLeft: new d({ title: "Margin Left" })
138
+ margin: new u({ title: "Margin All" }),
139
+ marginTop: new u({ title: "Margin Top" }),
140
+ marginRight: new u({ title: "Margin Right" }),
141
+ marginBottom: new u({ title: "Margin Bottom" }),
142
+ marginLeft: new u({ title: "Margin Left" })
143
143
  }
144
144
  });
145
145
  }
@@ -152,7 +152,7 @@ class E extends w {
152
152
  `;
153
153
  }
154
154
  }
155
- class y extends C {
155
+ class b extends C {
156
156
  constructor(t) {
157
157
  super(t), this.inputType = "color", this.icon = "<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>";
158
158
  }
@@ -162,49 +162,49 @@ class y extends C {
162
162
  t.className = "color-setting-wrapper";
163
163
  const e = document.createElement("div");
164
164
  e.className = "icon-container";
165
- const i = this.createIcon(this.icon), s = this.createLabel("Color");
166
- e.appendChild(i), e.appendChild(s);
167
- const n = document.createElement("div");
168
- n.className = "color-input-wrapper";
165
+ const n = this.createIcon(this.icon), s = this.createLabel("Color");
166
+ e.appendChild(n), e.appendChild(s);
167
+ const i = document.createElement("div");
168
+ i.className = "color-input-wrapper";
169
169
  let a, o;
170
- const l = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, h = (u) => l.test(u.value) ? (u.style.border = "", !0) : (u.style.border = "1px solid red", !1);
170
+ const r = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, d = (p) => r.test(p.value) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
171
171
  a = this.createInput({
172
172
  value: this.value,
173
173
  inputType: "text",
174
174
  inputClassName: "color-text-input",
175
- inputCustomizer: (u) => {
176
- u.oninput = (v) => {
177
- var m;
178
- let p = v.target.value.trim();
179
- if (!h(u)) return;
180
- this.value = p, (m = this.onChange) == null || m.call(this, p);
181
- const g = document.getElementsByClassName(
175
+ inputCustomizer: (p) => {
176
+ p.oninput = (v) => {
177
+ var g;
178
+ let h = v.target.value.trim();
179
+ if (!d(p)) return;
180
+ this.value = h, (g = this.onChange) == null || g.call(this, h);
181
+ const m = document.getElementsByClassName(
182
182
  "color-picker"
183
183
  )[0];
184
- g.value = p, c.style.backgroundColor = p;
184
+ m.value = h, c.style.backgroundColor = h;
185
185
  };
186
186
  }
187
187
  }), o = this.createInput({
188
188
  value: this.value,
189
189
  inputType: this.inputType,
190
190
  inputClassName: "color-picker",
191
- inputCustomizer: (u) => {
192
- u.oninput = (v) => {
193
- var m;
194
- let p = v.target.value;
195
- this.value = p, (m = this.onChange) == null || m.call(this, p);
196
- const g = document.getElementsByClassName(
191
+ inputCustomizer: (p) => {
192
+ p.oninput = (v) => {
193
+ var g;
194
+ let h = v.target.value;
195
+ this.value = h, (g = this.onChange) == null || g.call(this, h);
196
+ const m = document.getElementsByClassName(
197
197
  "color-text-input"
198
198
  )[0];
199
- g.value = p, c.style.backgroundColor = p, h(g);
199
+ m.value = h, c.style.backgroundColor = h, d(m);
200
200
  };
201
201
  }
202
202
  });
203
203
  const c = document.createElement("div");
204
- return c.className = "color-preview", c.style.backgroundColor = this.value || "", n.appendChild(c), n.appendChild(o), n.appendChild(a), t.appendChild(e), t.appendChild(n), t;
204
+ return c.className = "color-preview", c.style.backgroundColor = this.value || "", i.appendChild(c), i.appendChild(o), i.appendChild(a), t.appendChild(e), t.appendChild(i), t;
205
205
  }
206
206
  }
207
- class b extends C {
207
+ class M extends C {
208
208
  constructor(t = {}) {
209
209
  super(t), this.inputType = "text";
210
210
  }
@@ -224,29 +224,29 @@ class b extends C {
224
224
  });
225
225
  }
226
226
  }
227
- class L extends d {
227
+ class y extends u {
228
228
  constructor(t) {
229
229
  super({
230
230
  ...t,
231
231
  minValue: 0,
232
232
  maxValue: 100,
233
- icon: N,
233
+ icon: k,
234
234
  title: t.title || "Opacity"
235
235
  }), this.inputType = "number";
236
236
  }
237
237
  }
238
- const N = `
238
+ const k = `
239
239
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
240
240
  <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"/>
241
241
  <path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
242
242
  </svg>
243
243
  `;
244
- class T extends C {
244
+ class S extends C {
245
245
  constructor(t = {}) {
246
246
  super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
247
- this.props.options = [...this.props.options, ...e], e.forEach((i) => {
247
+ this.props.options = [...this.props.options, ...e], e.forEach((n) => {
248
248
  var s;
249
- (s = this.selectNode) == null || s.appendChild(this.createOption(i));
249
+ (s = this.selectNode) == null || s.appendChild(this.createOption(n));
250
250
  });
251
251
  }).catch((e) => {
252
252
  console.error("Failed to fetch async options:", e);
@@ -257,32 +257,175 @@ class T extends C {
257
257
  return e.value = t.value, e.textContent = t.name, e;
258
258
  }
259
259
  draw() {
260
- var o, l;
260
+ var o, r;
261
261
  const t = document.createElement("div");
262
262
  t.classList.add("select-container");
263
263
  const e = document.createElement("div");
264
264
  e.className = "icon-container";
265
- const i = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), n = document.createElement("select");
266
- return this.selectNode = n, n.classList.add("select"), n.onchange = (h) => {
265
+ const n = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), i = document.createElement("select");
266
+ return this.selectNode = i, i.classList.add("select"), i.onchange = (d) => {
267
267
  var c;
268
- this.value = h.target.value, (c = this.onChange) == null || c.call(this, h.target.value);
268
+ this.value = d.target.value, (c = this.onChange) == null || c.call(this, d.target.value);
269
269
  }, [
270
270
  ...this.props.options || [],
271
- ...((l = (o = this.props).getOptions) == null ? void 0 : l.call(o)) || []
272
- ].forEach((h) => {
273
- const c = this.createOption(h);
274
- n.appendChild(c);
275
- }), this.value && (n.value = this.value), e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
271
+ ...((r = (o = this.props).getOptions) == null ? void 0 : r.call(o)) || []
272
+ ].forEach((d) => {
273
+ const c = this.createOption(d);
274
+ i.appendChild(c);
275
+ }), this.value && (i.value = this.value), e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
276
+ }
277
+ }
278
+ class T extends C {
279
+ constructor(t = {}) {
280
+ super(t), this.inputType = "button", this.value || (this.value = "center");
281
+ }
282
+ draw() {
283
+ const t = document.createElement("div");
284
+ t.className = "align-setting-wrapper";
285
+ const e = document.createElement("label");
286
+ e.className = "align-setting-label", e.textContent = this.title || "Align", t.appendChild(e);
287
+ const n = document.createElement("div");
288
+ return n.className = "align-options-container", [
289
+ {
290
+ name: "left",
291
+ icon: `
292
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
293
+ <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"
294
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
295
+ <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"
296
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
297
+ </svg>
298
+ `
299
+ },
300
+ {
301
+ name: "center",
302
+ icon: `
303
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
304
+ <path d="M12 7.5C12.6989 7.5 13.0484 7.5 13.324 7.38582C13.6916 7.23358 13.9836 6.94157 14.1358 6.57402C14.25 6.29837 14.25 5.94891 14.25 5.25C14.25 4.55109 14.25 4.20163 14.1358 3.92598C13.9836 3.55843 13.6916 3.26642 13.324 3.11418C13.0484 3 12.6989 3 12 3L6 3C5.30109 3 4.95163 3 4.67598 3.11418C4.30843 3.26642 4.01642 3.55843 3.86418 3.92597C3.75 4.20163 3.75 4.55109 3.75 5.25C3.75 5.94891 3.75 6.29837 3.86418 6.57402C4.01642 6.94157 4.30843 7.23358 4.67598 7.38582C4.95163 7.5 5.30109 7.5 6 7.5L12 7.5Z"
305
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
306
+ <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"
307
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
308
+ </svg>
309
+ `
310
+ },
311
+ {
312
+ name: "right",
313
+ icon: `
314
+ <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
315
+ <path d="M13.5 7.5C14.1989 7.5 14.5484 7.5 14.824 7.38582C15.1916 7.23358 15.4836 6.94157 15.6358 6.57402C15.75 6.29837 15.75 5.94891 15.75 5.25C15.75 4.55109 15.75 4.20163 15.6358 3.92598C15.4836 3.55843 15.1916 3.26642 14.824 3.11418C14.5484 3 14.1989 3 13.5 3L7.5 3C6.80109 3 6.45163 3 6.17598 3.11418C5.80843 3.26642 5.51642 3.55843 5.36418 3.92597C5.25 4.20163 5.25 4.55109 5.25 5.25C5.25 5.94891 5.25 6.29837 5.36418 6.57402C5.51642 6.94157 5.80843 7.23358 6.17598 7.38582C6.45163 7.5 6.80109 7.5 7.5 7.5L13.5 7.5Z"
316
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
317
+ <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"
318
+ stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
319
+ </svg>
320
+ `
321
+ }
322
+ ].forEach((i) => {
323
+ const a = document.createElement("button");
324
+ a.className = "align-option-button", a.innerHTML = i.icon, this.value === i.name && a.classList.add("selected"), a.addEventListener("click", () => {
325
+ var o;
326
+ n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = i.name, (o = this.onChange) == null || o.call(this, this.value);
327
+ }), n.appendChild(a);
328
+ }), t.appendChild(n), t;
329
+ }
330
+ }
331
+ class V extends C {
332
+ constructor(t) {
333
+ super(t), this.inputType = "button";
334
+ }
335
+ draw() {
336
+ const t = document.createElement("button");
337
+ t.className = "button-setting " + (this.props.className || ""), t.textContent = this.props.label, t.addEventListener("click", () => {
338
+ this.props.onClick && this.props.onClick();
339
+ });
340
+ const e = document.createElement("div");
341
+ return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
342
+ }
343
+ }
344
+ class I extends C {
345
+ constructor(t = {}) {
346
+ 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 u({
347
+ title: "Width",
348
+ default: this.value.width,
349
+ suffix: "px",
350
+ // Display "px" as the unit.
351
+ minValue: t.minWidth ?? 1,
352
+ maxValue: t.maxWidth,
353
+ icon: N
354
+ // SVG icon defined at the bottom.
355
+ }), this.heightSetting = new u({
356
+ title: "Height",
357
+ default: this.value.height,
358
+ suffix: "px",
359
+ minValue: t.minHeight ?? 1,
360
+ maxValue: t.maxHeight,
361
+ icon: L
362
+ }), this.widthSetting.setOnChange((e) => {
363
+ var i;
364
+ if (this.isUpdating || isNaN(e) || e < 1) return;
365
+ this.isUpdating = !0;
366
+ let n = e, s = this.value.height;
367
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (s = Math.round(n / this.aspectRatio), s < 1 && (s = 1)), this.value = { width: n, height: s }, s !== 0 && (this.aspectRatio = n / s), (i = this.onChange) == null || i.call(this, this.value), this.heightSetting.setValue(s), this.isUpdating = !1;
368
+ }), this.heightSetting.setOnChange((e) => {
369
+ var i;
370
+ if (this.isUpdating || isNaN(e) || e < 1) return;
371
+ this.isUpdating = !0;
372
+ let n = e, s = this.value.width;
373
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (s = Math.round(n * this.aspectRatio), s < 1 && (s = 1)), this.value = { width: s, height: n }, n !== 0 && (this.aspectRatio = s / n), (i = this.onChange) == null || i.call(this, this.value), this.widthSetting.setValue(s), this.isUpdating = !1;
374
+ });
375
+ }
376
+ /**
377
+ * Toggles the locked state. When locking, it recalculates the aspect ratio
378
+ * based on the current width and height. Updates the lock icon accordingly.
379
+ * @param lockIcon The HTMLElement containing the lock icon SVG.
380
+ */
381
+ toggleLock(t) {
382
+ if (this.locked = !this.locked, this.locked) {
383
+ const e = this.value.width, n = this.value.height;
384
+ n !== 0 && (this.aspectRatio = e / n);
385
+ }
386
+ t.innerHTML = this.getLockSVG(this.locked);
387
+ }
388
+ /**
389
+ * Returns the appropriate SVG string for the lock icon based on lock state.
390
+ * @param isLocked Whether the dimension is currently locked.
391
+ */
392
+ getLockSVG(t) {
393
+ return `
394
+ <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
395
+ <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"/>
396
+ </svg>
397
+ `;
398
+ }
399
+ /**
400
+ * Renders the DimensionSetting component.
401
+ * It arranges the width and height NumberSettings with a bracket containing a lock icon.
402
+ * @returns {HTMLElement} The container element with the complete dimension control.
403
+ */
404
+ draw() {
405
+ const t = document.createElement("div");
406
+ t.className = "dimension-setting-container";
407
+ const e = this.widthSetting.draw(), n = this.heightSetting.draw(), s = document.createElement("div");
408
+ s.className = "dimension-bracket";
409
+ const i = document.createElement("span");
410
+ return i.className = "dimension-lock-icon", i.innerHTML = this.getLockSVG(this.locked), i.onclick = () => this.toggleLock(i), s.appendChild(i), t.appendChild(e), t.appendChild(s), t.appendChild(n), t;
276
411
  }
277
412
  }
413
+ const N = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
414
+ <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"/>
415
+ </svg>`, L = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
416
+ <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"/>
417
+ </svg>`;
278
418
  export {
279
- y as ColorSetting,
419
+ T as AlignSetting,
420
+ V as ButtonSetting,
421
+ b as ColorSetting,
422
+ I as DimensionSetting,
280
423
  E as MarginSettingGroup,
281
- d as NumberSetting,
282
- L as OpacitySetting,
283
- T as SelectSetting,
424
+ u as NumberSetting,
425
+ y as OpacitySetting,
426
+ S as SelectSetting,
284
427
  C as Setting,
285
- w as SettingGroup,
286
- b as StringSetting,
287
- f as iterateSettings
428
+ f as SettingGroup,
429
+ M as StringSetting,
430
+ w as iterateSettings
288
431
  };
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{display:flex;flex-direction:column;gap:8px;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.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}.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}.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}.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)}.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}: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}*{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{display:flex;flex-direction:column;gap:8px;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.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}.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}.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}.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)}.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;left:66px;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;left:4px}.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;left:4px}.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}: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}*{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
@@ -1,3 +1,28 @@
1
+ declare class AlignSetting_2 extends Setting<AlignValue, AlignSettingProps> {
2
+ inputType: InputTypes;
3
+ constructor(props?: AlignSettingProps);
4
+ draw(): HTMLElement;
5
+ }
6
+ export { AlignSetting_2 as AlignSetting }
7
+
8
+ export declare interface AlignSettingProps extends SettingProps<AlignValue> {
9
+ }
10
+
11
+ export declare type AlignValue = 'left' | 'center' | 'right';
12
+
13
+ export declare class ButtonSetting extends Setting<void, ButtonSettingProps> {
14
+ inputType: InputTypes;
15
+ constructor(props: ButtonSettingProps);
16
+ draw(): HTMLElement;
17
+ }
18
+
19
+ export declare interface ButtonSettingProps extends SettingProps<void> {
20
+ label: string;
21
+ onClick?: () => void;
22
+ className?: string;
23
+ wrapperClassName?: string;
24
+ }
25
+
1
26
  export declare class ColorSetting extends Setting<string, ColorSettingProps> {
2
27
  inputType: InputTypes;
3
28
  constructor(props: ColorSettingProps);
@@ -8,6 +33,64 @@ export declare class ColorSetting extends Setting<string, ColorSettingProps> {
8
33
  export declare interface ColorSettingProps extends SettingProps<string> {
9
34
  }
10
35
 
36
+ /**
37
+ * DimensionSetting is a composite control that manages two NumberSettings,
38
+ * one for width and one for height. It ensures that when locked, the aspect ratio
39
+ * is preserved. It also prevents infinite update loops via an isUpdating guard.
40
+ */
41
+ export declare class DimensionSetting extends Setting<DimensionValue, DimensionSettingProps> {
42
+ inputType: {
43
+ readonly width: "number";
44
+ readonly height: "number";
45
+ };
46
+ private widthSetting;
47
+ private heightSetting;
48
+ private locked;
49
+ private aspectRatio;
50
+ private isUpdating;
51
+ constructor(props?: DimensionSettingProps);
52
+ /**
53
+ * Toggles the locked state. When locking, it recalculates the aspect ratio
54
+ * based on the current width and height. Updates the lock icon accordingly.
55
+ * @param lockIcon The HTMLElement containing the lock icon SVG.
56
+ */
57
+ private toggleLock;
58
+ /**
59
+ * Returns the appropriate SVG string for the lock icon based on lock state.
60
+ * @param isLocked Whether the dimension is currently locked.
61
+ */
62
+ private getLockSVG;
63
+ /**
64
+ * Renders the DimensionSetting component.
65
+ * It arranges the width and height NumberSettings with a bracket containing a lock icon.
66
+ * @returns {HTMLElement} The container element with the complete dimension control.
67
+ */
68
+ draw(): HTMLElement;
69
+ }
70
+
71
+ /**
72
+ * DimensionSettingProps extends the base SettingProps.
73
+ * It allows specifying a locked state (for aspect ratio) and optional min/max constraints.
74
+ */
75
+ export declare interface DimensionSettingProps extends SettingProps<DimensionValue> {
76
+ /** When true, maintain the aspect ratio between width and height. */
77
+ locked?: boolean;
78
+ /** Optional minimum and maximum values for width and height. */
79
+ minWidth?: number;
80
+ maxWidth?: number;
81
+ minHeight?: number;
82
+ maxHeight?: number;
83
+ }
84
+
85
+ /**
86
+ * DimensionValue interface represents the two-dimensional size.
87
+ * Both width and height must be valid positive numbers.
88
+ */
89
+ export declare interface DimensionValue {
90
+ width: number;
91
+ height: number;
92
+ }
93
+
11
94
  export declare interface IChangable<T> {
12
95
  setOnChange(onChange: (value: T) => void): void;
13
96
  }
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.46",
4
+ "version": "0.0.48",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",