builder-settings-types 0.0.34 → 0.0.38

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

@@ -1,10 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function d(o,t){for(const e in o)if(o.hasOwnProperty(e)){const n=o[e];t(e,n)}}class m{setOnChange(t){this.onChange=t,d(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 a=document.createElement("span");a.className="setting-group-arrow",a.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 s in this.settings){const c=this.settings[s].draw();i.appendChild(c)}return e.onclick=()=>{i.classList.toggle("collapsed"),a.classList.toggle("rotated")},e.appendChild(n),e.appendChild(a),t.appendChild(e),t.appendChild(i),t}}class g{constructor(t={}){this.props=t,this.value=this.props.default,this.title=t.title||"Setting",this.value=t.default}setOnChange(t){this.onChange=t}createInput(t,e){const n=document.createElement("input");return n.value=t,n.type=e,n.oninput=a=>{const i=a.target;let s=i.value;e==="number"?s=Number(i.value):(e==="color"||e==="date")&&(s=i.value),this.value=s,this.onChange&&this.onChange(this.value)},n}}class u extends g{constructor(t={}){super(t),this.props=t,this.inputType="number"}draw(){const t=document.createElement("div"),e=document.createElement("label");e.textContent=this.title??"";const n=this.createInput(this.value,this.inputType);return t.appendChild(e),t.appendChild(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),t}}class C extends m{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`
+    `;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 v extends g{constructor(t){super(t),this.inputType="color"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const n=document.createElement("span");n.innerHTML="<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>";const a=document.createElement("span");a.textContent="Color",a.className="color-text",e.appendChild(n),e.appendChild(a);const i=document.createElement("div");i.className="color-input-wrapper";let s,l;s=this.createInput(this.value,"text"),s.className="color-text-input",l=this.createInput(this.value,this.inputType),l.className="color-picker",l.id="id";const c=document.createElement("div");return c.className="color-preview",c.style.backgroundColor=this.value||"",l.oninput=h=>{var p;let r=h.target.value;this.value=r,s.value=r,(p=this.onChange)==null||p.call(this,r),c.style.backgroundColor=r},s.oninput=h=>{var p;let r=h.target.value;this.value=r,l.value=r,(p=this.onChange)==null||p.call(this,r),c.style.backgroundColor=r},i.appendChild(c),i.appendChild(s),i.appendChild(l),t.appendChild(e),t.appendChild(i),t}}class w extends g{constructor(t={}){super(t),this.inputType="text"}draw(){return this.createInput(this.value,this.inputType)}}exports.ColorSetting=v;exports.MarginSettingGroup=C;exports.NumberSetting=u;exports.Setting=g;exports.SettingGroup=m;exports.StringSetting=w;exports.iterateSettings=d;
+		`}}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 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;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg);margin-bottom:8px}.setting-group .setting-group{background-color:var(--color-white)!important}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:8px 0}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .2s ease}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{margin-top:8px}.setting-group-content.collapsed{display:none}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:8px}.icon-container{display:flex;align-items:center;gap:.25rem}.color-text{color:var(--color-text)}.color-input-wrapper{display:flex;align-items:center;border:1px solid #d0d5dd;border-radius:.5rem;padding:.5rem .5rem .5rem .25rem;height:1.5625rem;width:120px;position:relative}.color-text-input{border:none;outline:none;width:100%;font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px;border:1px solid #ccc;margin-right:6px}
+.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 d(o, t) {
+function w(o, t) {
   for (const e in o)
     if (o.hasOwnProperty(e)) {
-      const n = o[e];
-      t(e, n);
+      const i = o[e];
+      t(e, i);
     }
 }
-class m {
+class f {
   setOnChange(t) {
-    this.onChange = t, d(this.settings, (e, n) => {
-      n.setOnChange(t);
+    this.onChange = t, w(this.settings, (e, i) => {
+      i.setOnChange(t);
     });
   }
   constructor(t) {
@@ -19,62 +19,115 @@ class m {
     t.className = "setting-group";
     const e = document.createElement("div");
     e.className = "setting-group-title";
-    const n = document.createElement("h3");
-    n.textContent = this.title;
-    const a = document.createElement("span");
-    a.className = "setting-group-arrow", a.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";
-    for (const s in this.settings) {
-      const c = this.settings[s].draw();
-      i.appendChild(c);
+    const n = document.createElement("div");
+    n.className = "setting-group-content";
+    for (const a in this.settings) {
+      const u = this.settings[a].draw();
+      n.appendChild(u);
     }
     return e.onclick = () => {
-      i.classList.toggle("collapsed"), a.classList.toggle("rotated");
-    }, e.appendChild(n), e.appendChild(a), 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 N(o) {
+  switch (o) {
+    case "number":
+      return 0;
+    case "text":
+      return "";
+    case "select":
+      return null;
+    case "color":
+      return "#000000";
+    case "date":
+      return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
   }
 }
-class g {
+class C {
   constructor(t = {}) {
-    this.props = t, this.value = this.props.default, this.title = t.title || "Setting", this.value = t.default;
+    this.props = t, this.value = this.props.default, this.title = t.title || "";
   }
   setOnChange(t) {
     this.onChange = t;
   }
-  createInput(t, e) {
-    const n = document.createElement("input");
-    return n.value = t, n.type = e, n.oninput = (a) => {
-      const i = a.target;
-      let s = i.value;
-      e === "number" ? s = Number(i.value) : (e === "color" || e === "date") && (s = i.value), this.value = s, this.onChange && this.onChange(this.value);
-    }, n;
+  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 {
+class d extends C {
   constructor(t = {}) {
-    super(t), this.props = t, this.inputType = "number";
+    super(t), this.inputType = "number";
   }
   draw() {
-    const t = document.createElement("div"), e = document.createElement("label");
-    e.textContent = this.title ?? "";
-    const n = this.createInput(this.value, this.inputType);
-    return t.appendChild(e), t.appendChild(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), t;
+    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 C extends m {
+class E 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" })
+        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" })
       }
     });
   }
@@ -87,9 +140,9 @@ class C extends m {
 		`;
   }
 }
-class v extends g {
+class y extends C {
   constructor(t) {
-    super(t), this.inputType = "color";
+    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>";
   }
   // onChange?: (color: string) => void
   draw() {
@@ -97,40 +150,118 @@ class v extends g {
     t.className = "color-setting-wrapper";
     const e = document.createElement("div");
     e.className = "icon-container";
-    const n = document.createElement("span");
-    n.innerHTML = "<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>";
-    const a = document.createElement("span");
-    a.textContent = "Color", a.className = "color-text", e.appendChild(n), e.appendChild(a);
-    const i = document.createElement("div");
-    i.className = "color-input-wrapper";
-    let s, l;
-    s = this.createInput(this.value, "text"), s.className = "color-text-input", l = this.createInput(this.value, this.inputType), l.className = "color-picker", l.id = "id";
-    const c = document.createElement("div");
-    return c.className = "color-preview", c.style.backgroundColor = this.value || "", l.oninput = (h) => {
-      var p;
-      let r = h.target.value;
-      this.value = r, s.value = r, (p = this.onChange) == null || p.call(this, r), c.style.backgroundColor = r;
-    }, s.oninput = (h) => {
-      var p;
-      let r = h.target.value;
-      this.value = r, l.value = r, (p = this.onChange) == null || p.call(this, r), c.style.backgroundColor = r;
-    }, i.appendChild(c), i.appendChild(s), i.appendChild(l), t.appendChild(e), t.appendChild(i), t;
+    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",
+      inputCustomizer: (p) => {
+        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;
+        };
+      }
+    }), 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 g = document.getElementsByClassName(
+            "color-text-input"
+          )[0];
+          g.value = c, r.style.backgroundColor = c, h(g);
+        };
+      }
+    });
+    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 w extends g {
+class b extends C {
   constructor(t = {}) {
     super(t), this.inputType = "text";
   }
   draw() {
-    return this.createInput(this.value, this.inputType);
+    return this.createInput({
+      value: this.value,
+      inputType: this.inputType
+    });
+  }
+}
+class T extends d {
+  constructor(t) {
+    super({
+      ...t,
+      minValue: 0,
+      maxValue: 100,
+      icon: x,
+      title: t.title || "Opacity"
+    }), this.inputType = "number";
+  }
+}
+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 L extends C {
+  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, u;
+    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 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 {
-  v as ColorSetting,
-  C as MarginSettingGroup,
-  u as NumberSetting,
-  g as Setting,
-  m as SettingGroup,
-  w as StringSetting,
-  d 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

@@ -1,6 +1,7 @@
-export declare class ColorSetting extends Setting<string> {
+export declare class ColorSetting extends Setting<string, ColorSettingProps> {
     inputType: InputTypes;
     constructor(props: ColorSettingProps);
+    icon: string;
     draw(): HTMLElement;
 }
 
@@ -15,9 +16,21 @@ export declare interface IDrawable {
     draw(): HTMLElement;
 }
 
+declare type InputProps = {
+    iconClassName?: string;
+    labelClassName?: string;
+    value: any;
+    inputType: InputTypes;
+    title?: string;
+    icon?: string;
+    inputCustomizer?: (input: HTMLInputElement) => void;
+    inputClassName?: string;
+    wrapperClassName?: string;
+};
+
 export declare type InputTypes = 'number' | 'text' | 'select' | 'color' | 'date';
 
-export declare function iterateSettings<T extends Record<string, Setting<any> | SettingGroup<any>>>(settings: T, callback: (key: string, setting: Setting<any> | SettingGroup<any>) => void): void;
+export declare function iterateSettings<T extends Record<string, Setting<any, any> | SettingGroup<any>>>(settings: T, callback: (key: string, setting: Setting<any, any> | SettingGroup<any>) => void): void;
 
 export declare class MarginSettingGroup extends SettingGroup<{
     margin: NumberSetting;
@@ -30,34 +43,73 @@ export declare class MarginSettingGroup extends SettingGroup<{
     getCssCode(): string;
 }
 
-export declare interface NumberInputProps extends SettingProps<number> {
+export declare class NumberSetting extends Setting<number, NumberSettingsProps> {
+    inputType: InputTypes;
+    constructor(props?: NumberSettingsProps);
+    draw(): HTMLElement;
+}
+
+export declare interface NumberSettingsProps extends SettingProps<number> {
     minValue?: number;
     maxValue?: number;
     className?: string;
+    inputClassName?: string;
+    wrapperClassName?: string;
 }
 
-export declare class NumberSetting extends Setting<number> {
-    protected props: NumberInputProps;
+export declare class OpacitySetting extends NumberSetting {
     inputType: InputTypes;
-    constructor(props?: NumberInputProps);
-    draw(): HTMLElement;
+    constructor(props: OpacitySettingProps);
+}
+
+export declare interface OpacitySettingProps extends NumberSettingsProps {
 }
 
 declare type Primitive = string | number | boolean | symbol | bigint | null | undefined;
 
-export declare abstract class Setting<T> implements IDrawable, IChangable<T> {
-    protected props: SettingProps<T>;
+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> {
+    options?: {
+        value: string;
+        name: string;
+    }[];
+    getOptions?: () => {
+        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?: SettingProps<T>);
+    constructor(props?: P);
     setOnChange(onChange: (value: T) => void): void;
+    setValue(newValue: T): void;
     abstract draw(): HTMLElement;
-    createInput(value: any, inputType: InputTypes): HTMLInputElement;
+    createInput(props: InputProps): HTMLElement;
+    createLabel(title: string, className?: string): HTMLSpanElement;
+    createIcon(icon: string, className?: string): HTMLSpanElement;
 }
 
-export declare class SettingGroup<T extends Record<string, Setting<any> | SettingGroup<any>>> implements IDrawable, IChangable<T> {
+export declare class SettingGroup<T extends Record<string, Setting<any, any> | SettingGroup<any>>> implements IDrawable, IChangable<T> {
     title: string;
     settings: T;
     onChange?: ((value: T) => void) | undefined;
@@ -75,17 +127,19 @@ export declare interface SettingProps<T> {
     default?: T;
     title?: string;
     placeholder?: string;
+    icon?: string;
+    inputProps?: InputProps;
 }
 
-export declare interface StringInputProps extends SettingProps<string> {
-    maxLength?: number;
-    value?: string;
-}
-
-export declare class StringSetting extends Setting<string> {
+export declare class StringSetting extends Setting<string, StringSettingsProps> {
     inputType: InputTypes;
-    constructor(props?: StringInputProps);
+    constructor(props?: StringSettingsProps);
     draw(): HTMLElement;
 }
 
+export declare interface StringSettingsProps extends SettingProps<string> {
+    maxLength?: number;
+    value?: string;
+}
+
 export { }

package/package.json

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