builder-settings-types 0.0.35 → 0.0.38

package/dist/builder-settings-types.cjs.js

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function g(l,t){for(const e in l)if(l.hasOwnProperty(e)){const s=l[e];t(e,s)}}class C{setOnChange(t){this.onChange=t,g(this.settings,(e,s)=>{s.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 s=document.createElement("h3");s.textContent=this.title;const n=document.createElement("span");n.className="setting-group-arrow",n.innerHTML=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function w(o,t){for(const e in o)if(o.hasOwnProperty(e)){const i=o[e];t(e,i)}}class f{setOnChange(t){this.onChange=t,w(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=`
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-    `;const i=document.createElement("div");i.className="setting-group-content";for(const a in this.settings){const u=this.settings[a].draw();i.appendChild(u)}return e.onclick=()=>{i.classList.toggle("collapsed"),n.classList.toggle("rotated")},e.appendChild(s),e.appendChild(n),t.appendChild(e),t.appendChild(i),t}}function v(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]}}class m{constructor(t={}){this.props=t,this.value=this.props.default,this.title=t.title||"",this.value=t.default}setOnChange(t){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){let 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 s=document.createElement("div");s.className=t.inputClassName||"";const n=document.createElement("input");return n.value=t.value||v(t.inputType),n.type=t.inputType,n.oninput=i=>{const a=i.target;let c=a.value;t.inputType==="number"?c=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(c=a.value),this.value=c,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),s.appendChild(n),e.appendChild(s),e}createLabel(t,e){const s=document.createElement("span");return s.textContent=t,s.className="input-label "+(e||""),s}createIcon(t,e){const s=document.createElement("span");return s.className="input-icon "+(e||""),s.innerHTML=t,s}}class h extends m{constructor(t={}){super(t),this.inputType="number"}draw(){const t=e=>{this.props.minValue!==void 0&&(e.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(e.max=String(this.props.maxValue)),this.props.className&&e.classList.add(this.props.className),e.addEventListener("input",()=>{const s=this.props.minValue??Number.MIN_SAFE_INTEGER,n=this.props.maxValue??Number.MAX_SAFE_INTEGER;let i=Number(e.value);i<s&&(i=s),i>n&&(i=n),e.value=String(i)})};return 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})}}class w extends C{constructor(){super({title:"Margin",settings:{margin:new h({title:"Margin All"}),marginTop:new h({title:"Margin Top"}),marginRight:new h({title:"Margin Right"}),marginBottom:new h({title:"Margin Bottom"}),marginLeft:new h({title:"Margin Left"})}})}getCssCode(){return`
+    `;const n=document.createElement("div");n.className="setting-group-content";for(const a in this.settings){const h=this.settings[a].draw();n.appendChild(h)}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(o){switch(o){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0]}}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){let 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=t.value||N(t.inputType),s.type=t.inputType,s.className=t.inputClassName||"",s.oninput=n=>{const a=n.target;let l=a.value;t.inputType==="number"?l=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(l=a.value),this.value=l,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 u extends g{constructor(t={}){super(t),this.inputType="number"}draw(){const t=e=>{this.props.minValue!==void 0&&(e.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(e.max=String(this.props.maxValue)),this.props.className&&e.classList.add(this.props.className),e.addEventListener("input",()=>{const i=this.props.minValue??Number.MIN_SAFE_INTEGER,s=this.props.maxValue??Number.MAX_SAFE_INTEGER;let n=Number(e.value);n<i&&(n=i),n>s&&(n=s),e.value=String(n)})};return 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})}}class x extends f{constructor(){super({title:"Margin",settings:{margin:new u({title:"Margin All"}),marginTop:new u({title:"Margin Top"}),marginRight:new u({title:"Margin Right"}),marginBottom:new u({title:"Margin Bottom"}),marginLeft:new u({title:"Margin Left"})}})}getCssCode(){return`
 		margin-botton: ${this.settings.marginBottom.value}px;
 		margin-top: ${this.settings.marginTop.value}px;
 		margin-right: ${this.settings.marginRight.value}px;
 		margin-left: ${this.settings.marginLeft.value}px;
-		`}}class N extends m{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 s=this.createIcon(this.icon),n=this.createLabel("Color");n.className="color-text",e.appendChild(s),e.appendChild(n);const i=document.createElement("div");i.className="color-input-wrapper";let a,c;a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:p=>{p.oninput=r=>{var d;let o=r.target.value;this.value=o,(d=this.onChange)==null||d.call(this,o),u.style.backgroundColor=o}}}),c=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:p=>{p.oninput=r=>{var d;let o=r.target.value;this.value=o,(d=this.onChange)==null||d.call(this,o),u.style.backgroundColor=o}}});const u=document.createElement("div");return u.className="color-preview",u.style.backgroundColor=this.value||"",c.oninput=p=>{var o;let r=p.target.value;this.value=r,(o=this.onChange)==null||o.call(this,r),u.style.backgroundColor=r},a.oninput=p=>{var o;let r=p.target.value;this.value=r,(o=this.onChange)==null||o.call(this,r),u.style.backgroundColor=r},i.appendChild(u),i.appendChild(a),i.appendChild(c),t.appendChild(e),t.appendChild(i),t}}class f extends m{constructor(t={}){super(t),this.inputType="text"}draw(){return this.createInput({value:this.value,inputType:this.inputType})}}class y extends h{constructor(t){super({...t,minValue:0,maxValue:100,icon:x,title:t.title||"Opacity",inputClassName:"number-setting-input",wrapperClassName:"opacity-setting-wrapper"}),this.inputType="number"}}const x=`
+		`}}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,l;const h=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,d=p=>h.test(p.value)?(p.style.border="",!0):(p.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value.trim();if(!d(p))return;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-picker")[0];C.value=c,r.style.backgroundColor=c}}}),l=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-text-input")[0];C.value=c,r.style.backgroundColor=c,d(C)}}});const r=document.createElement("div");return r.className="color-preview",r.style.backgroundColor=this.value||"",n.appendChild(r),n.appendChild(l),n.appendChild(a),t.appendChild(e),t.appendChild(n),t}}class E extends g{constructor(t={}){super(t),this.inputType="text"}draw(){return this.createInput({value:this.value,inputType:this.inputType})}}class S extends u{constructor(t){super({...t,minValue:0,maxValue:100,icon:b,title:t.title||"Opacity"}),this.inputType="number"}}const b=`
 			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 				<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"/>
 				<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"/>
 			</svg>
-		`;class b extends m{constructor(t={}){super(t),this.inputType="select"}draw(){const t=document.createElement("div");if(t.classList.add("custom-select-container"),this.props.title){const n=document.createElement("label");n.textContent=this.props.title,n.classList.add("custom-select-title"),t.appendChild(n)}if(this.props.icon){const n=document.createElement("span");n.innerHTML=this.props.icon,n.classList.add("custom-select-icon"),t.appendChild(n)}const e=document.createElement("select");e.classList.add("custom-select"),e.onchange=n=>{var i;(i=this.onChange)==null||i.call(this,n.target.value)};let s=[];return this.props.getOptions&&(s=this.props.getOptions()),this.props.options&&s.push(...this.props.options),s.forEach(({value:n,name:i})=>{const a=document.createElement("option");a.value=n,a.textContent=i,e.appendChild(a)}),this.props.value&&(e.value=this.props.value),t.appendChild(e),t}}exports.ColorSetting=N;exports.MarginSettingGroup=w;exports.NumberSetting=h;exports.OpacitySetting=y;exports.SelectSetting=b;exports.Setting=m;exports.SettingGroup=C;exports.StringSetting=f;exports.iterateSettings=g;
+		`;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 l,h;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=d=>{var r;(r=this.onChange)==null||r.call(this,d.target.value)},[...this.props.options||[],...((h=(l=this.props).getOptions)==null?void 0:h.call(l))||[]].forEach(d=>{const r=this.createOption(d);n.appendChild(r)}),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=u;exports.OpacitySetting=S;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=f;exports.StringSetting=E;exports.iterateSettings=w;

package/dist/builder-settings-types.css

@@ -1 +1 @@
-.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{margin-bottom:8px;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;overflow:hidden;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}.icon-container .input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.icon-container .input-label{color:var(--color-text)}.number-setting-wrapper{display:flex;justify-content:space-between;align-items:center;gap:16px}.number-setting-input{width:120px;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.icon-container{display:flex;align-items:center;gap:.25rem}.color-text{color:var(--color-text)}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:60%;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;border:1px solid #ccc;margin-right:6px}.opacity-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.opacity-setting-input{width:120px;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg)}.custom-select-container{display:flex;flex-direction:column;gap:4px;max-width:200px}.custom-select-title{font-size:14px;font-weight:700;color:#333}.custom-select-icon{display:flex;align-items:center}.custom-select{padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;cursor:pointer}.custom-select:focus{border-color:#007bff;outline:none}
+.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{margin-bottom:8px;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;overflow:hidden;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}.icon-container .input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.icon-container .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;justify-content:space-between;align-items:center}.number-setting-wrapper 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)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-setting-wrapper .color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-setting-wrapper .color-input-wrapper .color-text-input{border:none;outline:none;width:100%;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-setting-wrapper .color-input-wrapper .color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-setting-wrapper .color-input-wrapper .color-preview{width:100%;height:25px;border-radius:4px}.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}

package/dist/builder-settings-types.es.js

@@ -1,14 +1,14 @@
-function g(l, t) {
-  for (const e in l)
-    if (l.hasOwnProperty(e)) {
-      const s = l[e];
-      t(e, s);
+function w(o, t) {
+  for (const e in o)
+    if (o.hasOwnProperty(e)) {
+      const i = o[e];
+      t(e, i);
     }
 }
-class C {
+class f {
   setOnChange(t) {
-    this.onChange = t, g(this.settings, (e, s) => {
-      s.setOnChange(t);
+    this.onChange = t, w(this.settings, (e, i) => {
+      i.setOnChange(t);
     });
   }
   constructor(t) {
@@ -19,27 +19,27 @@ class C {
     t.className = "setting-group";
     const e = document.createElement("div");
     e.className = "setting-group-title";
-    const s = document.createElement("h3");
-    s.textContent = this.title;
-    const n = document.createElement("span");
-    n.className = "setting-group-arrow", n.innerHTML = `
+    const i = document.createElement("h3");
+    i.textContent = this.title;
+    const s = document.createElement("span");
+    s.className = "setting-group-arrow", s.innerHTML = `
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     `;
-    const i = document.createElement("div");
-    i.className = "setting-group-content";
+    const n = document.createElement("div");
+    n.className = "setting-group-content";
     for (const a in this.settings) {
       const u = this.settings[a].draw();
-      i.appendChild(u);
+      n.appendChild(u);
     }
     return e.onclick = () => {
-      i.classList.toggle("collapsed"), n.classList.toggle("rotated");
-    }, e.appendChild(s), e.appendChild(n), t.appendChild(e), t.appendChild(i), t;
+      n.classList.toggle("collapsed"), s.classList.toggle("rotated");
+    }, e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
   }
 }
-function v(l) {
-  switch (l) {
+function N(o) {
+  switch (o) {
     case "number":
       return 0;
     case "text":
@@ -52,56 +52,59 @@ function v(l) {
       return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
   }
 }
-class m {
+class C {
   constructor(t = {}) {
-    this.props = t, this.value = this.props.default, this.title = t.title || "", this.value = t.default;
+    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 n = document.createElement("div");
+      if (n.className = "icon-container", t.icon) {
         let a = this.createIcon(t.icon, t.iconClassName);
-        i.appendChild(a);
+        n.appendChild(a);
       }
       if (t.title) {
         const a = this.createLabel(t.title, t.labelClassName);
-        i.appendChild(a);
+        n.appendChild(a);
       }
-      e.appendChild(i);
+      e.appendChild(n);
     }
-    const s = document.createElement("div");
-    s.className = t.inputClassName || "";
-    const n = document.createElement("input");
-    return n.value = t.value || v(t.inputType), n.type = t.inputType, n.oninput = (i) => {
-      const a = i.target;
-      let c = a.value;
-      t.inputType === "number" ? c = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (c = a.value), this.value = c, this.onChange && this.onChange(this.value);
-    }, t.inputCustomizer && t.inputCustomizer(n), s.appendChild(n), e.appendChild(s), e;
+    const i = document.createElement("div");
+    i.className = t.wrapperClassName || "";
+    const s = document.createElement("input");
+    return this.inputEl = s, s.value = t.value || N(t.inputType), s.type = t.inputType, s.className = t.inputClassName || "", s.oninput = (n) => {
+      const a = n.target;
+      let l = a.value;
+      t.inputType === "number" ? l = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (l = a.value), this.value = l, this.onChange && this.onChange(this.value);
+    }, t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
   }
   createLabel(t, e) {
-    const s = document.createElement("span");
-    return s.textContent = t, s.className = "input-label " + (e || ""), s;
+    const i = document.createElement("span");
+    return i.textContent = t, i.className = "input-label " + (e || ""), i;
   }
   createIcon(t, e) {
-    const s = document.createElement("span");
-    return s.className = "input-icon " + (e || ""), s.innerHTML = t, s;
+    const i = document.createElement("span");
+    return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
   }
 }
-class h extends m {
+class d extends C {
   constructor(t = {}) {
     super(t), this.inputType = "number";
   }
   draw() {
     const t = (e) => {
       this.props.minValue !== void 0 && (e.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (e.max = String(this.props.maxValue)), this.props.className && e.classList.add(this.props.className), e.addEventListener("input", () => {
-        const s = this.props.minValue ?? Number.MIN_SAFE_INTEGER, n = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
-        let i = Number(e.value);
-        i < s && (i = s), i > n && (i = n), e.value = String(i);
+        const i = this.props.minValue ?? Number.MIN_SAFE_INTEGER, s = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
+        let n = Number(e.value);
+        n < i && (n = i), n > s && (n = s), e.value = String(n);
       });
     };
     return this.createInput({
@@ -115,16 +118,16 @@ class h extends m {
     });
   }
 }
-class N extends C {
+class E extends f {
   constructor() {
     super({
       title: "Margin",
       settings: {
-        margin: new h({ title: "Margin All" }),
-        marginTop: new h({ title: "Margin Top" }),
-        marginRight: new h({ title: "Margin Right" }),
-        marginBottom: new h({ title: "Margin Bottom" }),
-        marginLeft: new h({ title: "Margin Left" })
+        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" })
       }
     });
   }
@@ -137,7 +140,7 @@ class N extends C {
 		`;
   }
 }
-class f extends m {
+class y extends C {
   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>";
   }
@@ -147,48 +150,49 @@ class f extends m {
     t.className = "color-setting-wrapper";
     const e = document.createElement("div");
     e.className = "icon-container";
-    const s = this.createIcon(this.icon), n = this.createLabel("Color");
-    n.className = "color-text", e.appendChild(s), e.appendChild(n);
-    const i = document.createElement("div");
-    i.className = "color-input-wrapper";
-    let a, c;
+    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, l;
+    const u = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, h = (p) => u.test(p.value) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
     a = this.createInput({
       value: this.value,
       inputType: "text",
       inputClassName: "color-text-input",
-      // icon: this.icon,
       inputCustomizer: (p) => {
-        p.oninput = (r) => {
-          var d;
-          let o = r.target.value;
-          this.value = o, (d = this.onChange) == null || d.call(this, o), u.style.backgroundColor = o;
+        p.oninput = (v) => {
+          var m;
+          let c = v.target.value.trim();
+          if (!h(p)) return;
+          this.value = c, (m = this.onChange) == null || m.call(this, c);
+          const g = document.getElementsByClassName(
+            "color-picker"
+          )[0];
+          g.value = c, r.style.backgroundColor = c;
         };
       }
-    }), c = this.createInput({
+    }), l = this.createInput({
       value: this.value,
       inputType: this.inputType,
       inputClassName: "color-picker",
       inputCustomizer: (p) => {
-        p.oninput = (r) => {
-          var d;
-          let o = r.target.value;
-          this.value = o, (d = this.onChange) == null || d.call(this, o), u.style.backgroundColor = o;
+        p.oninput = (v) => {
+          var m;
+          let c = v.target.value;
+          this.value = c, (m = this.onChange) == null || m.call(this, c);
+          const g = document.getElementsByClassName(
+            "color-text-input"
+          )[0];
+          g.value = c, r.style.backgroundColor = c, h(g);
         };
       }
     });
-    const u = document.createElement("div");
-    return u.className = "color-preview", u.style.backgroundColor = this.value || "", c.oninput = (p) => {
-      var o;
-      let r = p.target.value;
-      this.value = r, (o = this.onChange) == null || o.call(this, r), u.style.backgroundColor = r;
-    }, a.oninput = (p) => {
-      var o;
-      let r = p.target.value;
-      this.value = r, (o = this.onChange) == null || o.call(this, r), u.style.backgroundColor = r;
-    }, i.appendChild(u), i.appendChild(a), i.appendChild(c), t.appendChild(e), t.appendChild(i), t;
+    const r = document.createElement("div");
+    return r.className = "color-preview", r.style.backgroundColor = this.value || "", n.appendChild(r), n.appendChild(l), n.appendChild(a), t.appendChild(e), t.appendChild(n), t;
   }
 }
-class x extends m {
+class b extends C {
   constructor(t = {}) {
     super(t), this.inputType = "text";
   }
@@ -199,59 +203,65 @@ class x extends m {
     });
   }
 }
-class E extends h {
+class T extends d {
   constructor(t) {
     super({
       ...t,
       minValue: 0,
       maxValue: 100,
-      icon: w,
-      title: t.title || "Opacity",
-      inputClassName: "number-setting-input",
-      wrapperClassName: "opacity-setting-wrapper"
+      icon: x,
+      title: t.title || "Opacity"
     }), this.inputType = "number";
   }
 }
-const w = `
+const x = `
 			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 				<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"/>
 				<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"/>
 			</svg>
 		`;
-class y extends m {
+class L extends C {
   constructor(t = {}) {
-    super(t), this.inputType = "select";
+    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 l, u;
     const t = document.createElement("div");
-    if (t.classList.add("custom-select-container"), this.props.title) {
-      const n = document.createElement("label");
-      n.textContent = this.props.title, n.classList.add("custom-select-title"), t.appendChild(n);
-    }
-    if (this.props.icon) {
-      const n = document.createElement("span");
-      n.innerHTML = this.props.icon, n.classList.add("custom-select-icon"), t.appendChild(n);
-    }
-    const e = document.createElement("select");
-    e.classList.add("custom-select"), e.onchange = (n) => {
-      var i;
-      (i = this.onChange) == null || i.call(this, n.target.value);
-    };
-    let s = [];
-    return this.props.getOptions && (s = this.props.getOptions()), this.props.options && s.push(...this.props.options), s.forEach(({ value: n, name: i }) => {
-      const a = document.createElement("option");
-      a.value = n, a.textContent = i, e.appendChild(a);
-    }), this.props.value && (e.value = this.props.value), t.appendChild(e), t;
+    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 r;
+      (r = this.onChange) == null || r.call(this, h.target.value);
+    }, [
+      ...this.props.options || [],
+      ...((u = (l = this.props).getOptions) == null ? void 0 : u.call(l)) || []
+    ].forEach((h) => {
+      const r = this.createOption(h);
+      n.appendChild(r);
+    }), this.value && (n.value = this.value), e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
   }
 }
 export {
-  f as ColorSetting,
-  N as MarginSettingGroup,
-  h as NumberSetting,
-  E as OpacitySetting,
-  y as SelectSetting,
-  m as Setting,
-  C as SettingGroup,
-  x as StringSetting,
-  g as iterateSettings
+  y as ColorSetting,
+  E as MarginSettingGroup,
+  d as NumberSetting,
+  T as OpacitySetting,
+  L as SelectSetting,
+  C as Setting,
+  f as SettingGroup,
+  b as StringSetting,
+  w as iterateSettings
 };

package/dist/index.d.ts

@@ -70,11 +70,15 @@ declare type Primitive = string | number | boolean | symbol | bigint | null | un
 export declare class SelectSetting extends Setting<string, SelectSettingProps> {
     inputType: InputTypes;
     constructor(props?: SelectSettingProps);
+    createOption(o: {
+        value: string;
+        name: string;
+    }): HTMLOptionElement;
+    selectNode: HTMLSelectElement | undefined;
     draw(): HTMLElement;
 }
 
 export declare interface SelectSettingProps extends SettingProps<string> {
-    value?: string;
     options?: {
         value: string;
         name: string;
@@ -83,16 +87,22 @@ export declare interface SelectSettingProps extends SettingProps<string> {
         value: string;
         name: string;
     }[];
+    getOptionsAsync?: () => Promise<{
+        value: string;
+        name: string;
+    }[]>;
 }
 
 export declare abstract class Setting<T, P extends SettingProps<T>> implements IDrawable, IChangable<T> {
     protected props: P;
+    protected inputEl?: HTMLInputElement;
     value: T | undefined;
     title: string | undefined;
     abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
     onChange: ((value: T) => void) | undefined;
     constructor(props?: P);
     setOnChange(onChange: (value: T) => void): void;
+    setValue(newValue: T): void;
     abstract draw(): HTMLElement;
     createInput(props: InputProps): HTMLElement;
     createLabel(title: string, className?: string): HTMLSpanElement;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "builder-settings-types",
 	"description": "builder settings",
-	"version": "0.0.35",
+	"version": "0.0.38",
 	"type": "module",
 	"main": "dist/builder-settings-types.cjs.js",
 	"module": "dist/builder-settings-types.es.js",