builder-settings-types 0.0.115 → 0.0.117

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

@@ -94,7 +94,7 @@
         }
       `,document.head.appendChild(l)}return i.appendChild(s),i.appendChild(n),t.appendChild(i),t}setDetectChange(t){this.detectChangeCallback=t}}const tt=`<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;class et extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||tt,s.appendChild(n);const a=document.createElement("label");a.classList.add("gap-input-label"),a.textContent=t,s.appendChild(a),i.appendChild(s);const o=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var f;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(f=this.onChange)==null||f.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:o});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const c=l.querySelector("input.gap-setting-input");c&&(c.style.paddingRight="35px");const r=document.createElement("span");return r.className="suffix-label",r.textContent=this.props.suffix,l.appendChild(r),i.appendChild(l),i}}class it extends m{constructor(t){var e;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");super(t),this.inputType="tabs",this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainer=null,this.previousTabId="",this.tabValues=new Map,this.settingGroups=new Map,this.tabs=t.tabs,this.activeTabId=t.activeTabId||((e=this.tabs[0])==null?void 0:e.id)||"",this.previousTabId=this.activeTabId,this.onStateChangeCallback=t.onStateChange,this.value={},this.tabs.forEach(i=>{if(i.custom){const s={};Object.entries(i.settings).forEach(([n,a])=>{a instanceof m?s[n]=a.value:a instanceof C&&(s[n]=a.getValues())}),this.tabValues.set(i.id,s),this.value[i.id]=s}else{const s=new C({title:i.title||i.label,collapsed:i.collapsed,settings:i.settings,description:i.description,icon:i.icon,main:i.main,custom:i.custom,hideCondition:i.hideCondition,onBlur:i.onBlur});this.settingGroups.set(i.id,s);const n=s.getValues();this.tabValues.set(i.id,n),this.value[i.id]=n}}),t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}draw(){const t=document.createElement("div");t.classList.add("tabs-settings-container"),this.props.className&&t.classList.add(this.props.className);const e=document.createElement("div");e.classList.add("tabs-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)}),t.appendChild(e);const i=document.createElement("div");return i.classList.add("tab-content"),this.contentContainer=i,this.tabs.forEach(s=>{const n=document.createElement("div");if(n.classList.add("tab-panel"),s.id===this.activeTabId&&n.classList.add("active"),s.custom)Object.entries(s.settings).forEach(([a,o])=>{if(o instanceof m)n.appendChild(o.draw()),o.setOnChange(()=>{this.updateTabValues(s.id),this.handleTabChange(s.id)});else if(o instanceof C){const l=o.draw();n.appendChild(l),this.addChangeListeners(o,s.id)}});else{const a=this.settingGroups.get(s.id);if(a){const o=a.draw();n.appendChild(o),this.addChangeListeners(a,s.id)}}i.appendChild(n)}),t.appendChild(i),t}addChangeListeners(t,e){const i=t.settings;Object.values(i).forEach(s=>{s instanceof C?this.addChangeListeners(s,e):s.setOnChange(()=>{this.updateTabValues(e),this.handleTabChange(e)})})}updateTabValues(t){const e=this.tabs.find(i=>i.id===t);if(e)if(e.custom){const i={};Object.entries(e.settings).forEach(([s,n])=>{n instanceof m?i[s]=n.value:n instanceof C&&(i[s]=n.getValues())}),this.tabValues.set(t,i),this.value={...this.value,[t]:i}}else{const i=this.settingGroups.get(t);if(i){const s=i.getValues();this.tabValues.set(t,s),this.value={...this.value,[t]:s}}}}handleTabChange(t){var s,n;const e=this.tabValues.get(t)||{};(s=this.onStateChangeCallback)==null||s.call(this,t,e);const i={tabId:t,contentValues:e,previousTabId:this.previousTabId};(n=this.onChangeCallback)==null||n.call(this,i),this.detectChangeCallback&&this.detectChangeCallback(i)}handleTabClick(t){var i;if(t===this.activeTabId)return;this.previousTabId=this.activeTabId,this.activeTabId=t;const e=(i=this.tabsContainer)==null?void 0:i.querySelectorAll(".tab-button");if(e==null||e.forEach(s=>{var n;s instanceof HTMLElement&&s.classList.toggle("active",s.textContent===((n=this.tabs.find(a=>a.id===t))==null?void 0:n.label))}),this.contentContainer){const s=this.contentContainer.querySelectorAll(".tab-panel"),n=this.tabs.findIndex(o=>o.id===this.previousTabId),a=this.tabs.findIndex(o=>o.id===t);s.forEach((o,l)=>{o instanceof HTMLElement&&(l===a?(o.classList.add("active"),o.classList.remove("slide-left","slide-right")):l===n?(o.classList.remove("active"),o.classList.add(a>n?"slide-left":"slide-right")):o.classList.remove("active","slide-left","slide-right"))})}this.handleTabChange(t)}setOnChange(t){return this.onChangeCallback=t,this}setDetectChange(t){return this.detectChangeCallback=t,this}setOnStateChange(t){return this.onStateChangeCallback=t,this}}const st=`
+</svg>`;class et extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||tt,s.appendChild(n);const a=document.createElement("label");a.classList.add("gap-input-label"),a.textContent=t,s.appendChild(a),i.appendChild(s);const o=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var f;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(f=this.onChange)==null||f.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:o});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const c=l.querySelector("input.gap-setting-input");c&&(c.style.paddingRight="35px");const r=document.createElement("span");return r.className="suffix-label",r.textContent=this.props.suffix,l.appendChild(r),i.appendChild(l),i}}class it extends m{constructor(t){var e;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");super(t),this.inputType="tabs",this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainer=null,this.previousTabId="",this.tabValues=new Map,this.settingGroups=new Map,this.tabs=t.tabs,this.activeTabId=t.activeTabId||((e=this.tabs[0])==null?void 0:e.id)||"",this.previousTabId=this.activeTabId,this.onStateChangeCallback=t.onStateChange,this.value={},this.tabs.forEach(i=>{if(i.custom){const s={};Object.entries(i.settings).forEach(([n,a])=>{a instanceof m?s[n]=a.value:a instanceof C&&(s[n]=a.getValues())}),this.tabValues.set(i.id,s),this.value[i.id]=s}else{const s=new C({title:i.title||i.label,collapsed:i.collapsed,settings:i.settings,description:i.description,icon:i.icon,main:i.main,custom:i.custom,hideCondition:i.hideCondition,onBlur:i.onBlur});this.settingGroups.set(i.id,s);const n=s.getValues();this.tabValues.set(i.id,n),this.value[i.id]=n}}),t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}draw(){const t=document.createElement("div");t.classList.add("tabs-settings-container"),this.props.className&&t.classList.add(this.props.className);const e=document.createElement("div");e.classList.add("tabs-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)}),t.appendChild(e);const i=document.createElement("div");return i.classList.add("tab-content"),this.contentContainer=i,this.tabs.forEach(s=>{const n=document.createElement("div");if(n.classList.add("tab-panel"),s.id===this.activeTabId&&n.classList.add("active"),s.custom)Object.entries(s.settings).forEach(([a,o])=>{if(o instanceof m)n.appendChild(o.draw()),o.setOnChange(()=>{this.updateTabValues(s.id),this.handleTabChange(s.id)});else if(o instanceof C){const l=o.draw();n.appendChild(l),this.addChangeListeners(o,s.id)}});else{const a=this.settingGroups.get(s.id);if(a){const o=a.draw();n.appendChild(o),this.addChangeListeners(a,s.id)}}i.appendChild(n)}),t.appendChild(i),t}addChangeListeners(t,e){const i=t.settings;Object.values(i).forEach(s=>{s instanceof C?this.addChangeListeners(s,e):s.setOnChange(()=>{this.updateTabValues(e),this.handleTabChange(e)})})}updateTabValues(t){const e=this.tabs.find(i=>i.id===t);if(e){if(e.custom){const i={};Object.entries(e.settings).forEach(([s,n])=>{n instanceof m?i[s]=n.value:n instanceof C&&(i[s]=n.getValues())}),this.tabValues.set(t,i),this.value={...this.value,[t]:i}}else{const i=this.settingGroups.get(t);if(i){const s=i.getValues();this.tabValues.set(t,s),this.value={...this.value,[t]:s}}}this.detectChangeCallback&&this.detectChangeCallback(t)}}handleTabChange(t){var s,n;const e=this.tabValues.get(t)||{};(s=this.onStateChangeCallback)==null||s.call(this,t,e);const i={tabId:t,contentValues:e,previousTabId:this.previousTabId};(n=this.onChangeCallback)==null||n.call(this,i)}redrawContent(t){if(!this.contentContainer)return;this.contentContainer.innerHTML="";const e=this.tabs.find(s=>s.id===t);if(!e)return;const i=document.createElement("div");if(i.classList.add("tab-panel","active"),e.custom)Object.entries(e.settings).forEach(([s,n])=>{if(n instanceof m)i.appendChild(n.draw()),n.setOnChange(()=>{this.updateTabValues(e.id),this.handleTabChange(e.id)});else if(n instanceof C){const a=n.draw();i.appendChild(a),this.addChangeListeners(n,e.id)}});else{const s=this.settingGroups.get(e.id);if(s){const n=s.draw();i.appendChild(n),this.addChangeListeners(s,e.id)}}this.contentContainer.appendChild(i)}handleTabClick(t){var i;if(t===this.activeTabId)return;this.previousTabId=this.activeTabId,this.activeTabId=t;const e=(i=this.tabsContainer)==null?void 0:i.querySelectorAll(".tab-button");e==null||e.forEach(s=>{if(s instanceof HTMLElement){const n=this.tabs.find(a=>a.label===s.textContent);s.classList.toggle("active",(n==null?void 0:n.id)===t)}}),this.redrawContent(t),this.handleTabChange(t)}setOnChange(t){return this.onChangeCallback=t,this}setDetectChange(t){return this.detectChangeCallback=t,this}setOnStateChange(t){return this.onStateChangeCallback=t,this}getActiveTabValue(){return this.tabValues.get(this.activeTabId)}}const st=`
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

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

@@ -233,7 +233,7 @@ const w = class w {
   }
 };
 w.hiddenElements = /* @__PURE__ */ new Set();
-let f = w;
+let C = w;
 function y(h) {
   if (h === null || typeof h != "object")
     return h;
@@ -400,7 +400,7 @@ class N extends O {
       const g = p.value.split(",").map((H) => parseInt(H.trim()));
       if (g.length !== 3 || g.some(isNaN))
         return p.style.border = "1px solid red", !1;
-      const [d, C, v] = g, L = d >= 0 && d <= 255 && C >= 0 && C <= 255 && v >= 0 && v <= 255;
+      const [d, f, v] = g, L = d >= 0 && d <= 255 && f >= 0 && f <= 255 && v >= 0 && v <= 255;
       return p.style.border = L ? "" : "1px solid red", L;
     }, o = document.createElement("div");
     o.className = "color-preview", o.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
@@ -418,13 +418,13 @@ class N extends O {
       let g = p.target.value.trim();
       a(c) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
     }, u.oninput = (p) => {
-      var C, v;
+      var f, v;
       const g = p.target.value, d = this.hexToRgb(g);
-      this.value = d, (C = this.onChange) == null || C.call(this, d), (v = this.detectChange) == null || v.call(this, d), c.value = d, o.style.backgroundColor = `rgb(${d})`;
+      this.value = d, (f = this.onChange) == null || f.call(this, d), (v = this.detectChange) == null || v.call(this, d), c.value = d, o.style.backgroundColor = `rgb(${d})`;
     }, u.onchange = (p) => {
-      var C, v;
+      var f, v;
       const g = p.target.value, d = this.hexToRgb(g);
-      this.value = d, (C = this.onChange) == null || C.call(this, d), (v = this.detectChange) == null || v.call(this, d), c.value = d, o.style.backgroundColor = `rgb(${d})`;
+      this.value = d, (f = this.onChange) == null || f.call(this, d), (v = this.detectChange) == null || v.call(this, d), c.value = d, o.style.backgroundColor = `rgb(${d})`;
     }, n.appendChild(o), n.appendChild(r), n.appendChild(l), t.appendChild(e), t.appendChild(n), this.value && (c.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
   }
 }
@@ -474,12 +474,12 @@ class M extends b {
       ...t,
       minValue: 0,
       maxValue: 100,
-      icon: t.icon || W,
+      icon: t.icon || G,
       title: t.title || "Opacity"
     }), this.inputType = "number";
   }
 }
-const W = `
+const G = `
 			<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.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
@@ -487,7 +487,7 @@ const W = `
   <path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
   <path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
 </svg>
-		`, $ = `
+		`, W = `
   <svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
@@ -531,7 +531,7 @@ class I extends m {
       o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
     }), t.appendChild(i);
     const s = document.createElement("div");
-    return s.classList.add("svg-container"), s.innerHTML = $, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
+    return s.classList.add("svg-container"), s.innerHTML = W, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
       this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
     }).catch((n) => {
       console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
@@ -576,7 +576,7 @@ class I extends m {
     this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), super.destroy();
   }
 }
-class G extends m {
+class $ extends m {
   constructor(t = {}) {
     super(t), this.inputType = "button", this.value || (this.value = "center");
   }
@@ -831,8 +831,8 @@ class U extends m {
       if (c)
         try {
           o.classList.add("loading"), o.disabled = !0;
-          const d = new FormData(), C = this.props.formFieldName || "file";
-          d.append(C, c, c.name);
+          const d = new FormData(), f = this.props.formFieldName || "file";
+          d.append(f, c, c.name);
           const v = this.props.uploadUrl;
           if (!v)
             throw new Error("No uploadUrl provided to UploadSetting.");
@@ -1105,10 +1105,10 @@ class pt extends m {
     a.classList.add("gap-input-label"), a.textContent = t, s.appendChild(a), i.appendChild(s);
     const o = (u) => {
       this.props.minValue !== void 0 && (u.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (u.max = String(this.props.maxValue)), this.props.className && u.classList.add(this.props.className), u.addEventListener("input", () => {
-        var C;
+        var f;
         const p = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
         let d = Number(u.value);
-        d < p && (d = p), d > g && (d = g), u.value = String(d), this.value = d, this.inputValues[t] = d, console.log(`Gap Setting (${t}): ${d}${this.props.suffix || ""}`), (C = this.onChange) == null || C.call(this, d);
+        d < p && (d = p), d > g && (d = g), u.value = String(d), this.value = d, this.inputValues[t] = d, console.log(`Gap Setting (${t}): ${d}${this.props.suffix || ""}`), (f = this.onChange) == null || f.call(this, d);
       });
     }, l = this.createInput({
       value: e,
@@ -1135,10 +1135,10 @@ class ut extends m {
       if (i.custom) {
         const s = {};
         Object.entries(i.settings).forEach(([n, a]) => {
-          a instanceof m ? s[n] = a.value : a instanceof f && (s[n] = a.getValues());
+          a instanceof m ? s[n] = a.value : a instanceof C && (s[n] = a.getValues());
         }), this.tabValues.set(i.id, s), this.value[i.id] = s;
       } else {
-        const s = new f({
+        const s = new C({
           title: i.title || i.label,
           collapsed: i.collapsed,
           settings: i.settings,
@@ -1172,7 +1172,7 @@ class ut extends m {
             n.appendChild(o.draw()), o.setOnChange(() => {
               this.updateTabValues(s.id), this.handleTabChange(s.id);
             });
-          else if (o instanceof f) {
+          else if (o instanceof C) {
             const l = o.draw();
             n.appendChild(l), this.addChangeListeners(o, s.id);
           }
@@ -1190,18 +1190,18 @@ class ut extends m {
   addChangeListeners(t, e) {
     const i = t.settings;
     Object.values(i).forEach((s) => {
-      s instanceof f ? this.addChangeListeners(s, e) : s.setOnChange(() => {
+      s instanceof C ? this.addChangeListeners(s, e) : s.setOnChange(() => {
         this.updateTabValues(e), this.handleTabChange(e);
       });
     });
   }
   updateTabValues(t) {
     const e = this.tabs.find((i) => i.id === t);
-    if (e)
+    if (e) {
       if (e.custom) {
         const i = {};
         Object.entries(e.settings).forEach(([s, n]) => {
-          n instanceof m ? i[s] = n.value : n instanceof f && (i[s] = n.getValues());
+          n instanceof m ? i[s] = n.value : n instanceof C && (i[s] = n.getValues());
         }), this.tabValues.set(t, i), this.value = {
           ...this.value,
           [t]: i
@@ -1216,6 +1216,8 @@ class ut extends m {
           };
         }
       }
+      this.detectChangeCallback && this.detectChangeCallback(t);
+    }
   }
   handleTabChange(t) {
     var s, n;
@@ -1226,30 +1228,45 @@ class ut extends m {
       contentValues: e,
       previousTabId: this.previousTabId
     };
-    (n = this.onChangeCallback) == null || n.call(this, i), this.detectChangeCallback && this.detectChangeCallback(i);
+    (n = this.onChangeCallback) == null || n.call(this, i);
+  }
+  redrawContent(t) {
+    if (!this.contentContainer) return;
+    this.contentContainer.innerHTML = "";
+    const e = this.tabs.find((s) => s.id === t);
+    if (!e) return;
+    const i = document.createElement("div");
+    if (i.classList.add("tab-panel", "active"), e.custom)
+      Object.entries(e.settings).forEach(([s, n]) => {
+        if (n instanceof m)
+          i.appendChild(n.draw()), n.setOnChange(() => {
+            this.updateTabValues(e.id), this.handleTabChange(e.id);
+          });
+        else if (n instanceof C) {
+          const a = n.draw();
+          i.appendChild(a), this.addChangeListeners(n, e.id);
+        }
+      });
+    else {
+      const s = this.settingGroups.get(e.id);
+      if (s) {
+        const n = s.draw();
+        i.appendChild(n), this.addChangeListeners(s, e.id);
+      }
+    }
+    this.contentContainer.appendChild(i);
   }
   handleTabClick(t) {
     var i;
     if (t === this.activeTabId) return;
     this.previousTabId = this.activeTabId, this.activeTabId = t;
     const e = (i = this.tabsContainer) == null ? void 0 : i.querySelectorAll(".tab-button");
-    if (e == null || e.forEach((s) => {
-      var n;
-      s instanceof HTMLElement && s.classList.toggle(
-        "active",
-        s.textContent === ((n = this.tabs.find((a) => a.id === t)) == null ? void 0 : n.label)
-      );
-    }), this.contentContainer) {
-      const s = this.contentContainer.querySelectorAll(".tab-panel"), n = this.tabs.findIndex(
-        (o) => o.id === this.previousTabId
-      ), a = this.tabs.findIndex((o) => o.id === t);
-      s.forEach((o, l) => {
-        o instanceof HTMLElement && (l === a ? (o.classList.add("active"), o.classList.remove("slide-left", "slide-right")) : l === n ? (o.classList.remove("active"), o.classList.add(
-          a > n ? "slide-left" : "slide-right"
-        )) : o.classList.remove("active", "slide-left", "slide-right"));
-      });
-    }
-    this.handleTabChange(t);
+    e == null || e.forEach((s) => {
+      if (s instanceof HTMLElement) {
+        const n = this.tabs.find((a) => a.label === s.textContent);
+        s.classList.toggle("active", (n == null ? void 0 : n.id) === t);
+      }
+    }), this.redrawContent(t), this.handleTabChange(t);
   }
   setOnChange(t) {
     return this.onChangeCallback = t, this;
@@ -1260,6 +1277,10 @@ class ut extends m {
   setOnStateChange(t) {
     return this.onStateChangeCallback = t, this;
   }
+  // Helper method to get the value of the active tab
+  getActiveTabValue() {
+    return this.tabValues.get(this.activeTabId);
+  }
 }
 const J = `
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
@@ -1270,7 +1291,7 @@ const J = `
   <path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-class gt extends f {
+class gt extends C {
   constructor(t) {
     super({
       title: "Border",
@@ -1326,7 +1347,7 @@ const Q = `
   <path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `;
-class mt extends f {
+class mt extends C {
   constructor(t = {}) {
     super({
       title: t.title || "Typography",
@@ -1369,7 +1390,7 @@ class mt extends f {
           default: t.fontSizeDefault ?? 12,
           suffix: "px"
         }),
-        align: new G({
+        align: new $({
           title: "Align",
           default: t.alignDefault ?? "center"
         })
@@ -1434,7 +1455,7 @@ class k extends m {
     }), i;
   }
 }
-class Ct extends f {
+class Ct extends C {
   constructor(t) {
     super({
       title: "Margins",
@@ -1487,7 +1508,7 @@ const tt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
 </svg>`, st = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class nt extends f {
+class nt extends C {
   constructor(t, e, i) {
     super({
       title: `Tab ${t + 1}`,
@@ -1531,7 +1552,7 @@ class nt extends f {
     return t;
   }
 }
-class ft extends f {
+class ft extends C {
   // Store the rendered element
   constructor(t) {
     super({
@@ -1600,7 +1621,7 @@ class ft extends f {
     }));
   }
 }
-class vt extends f {
+class vt extends C {
   /**
    * Constructs a new BackgroundSettingSet.
    *
@@ -1675,7 +1696,7 @@ class vt extends f {
   }
 }
 export {
-  G as AlignSetting,
+  $ as AlignSetting,
   vt as BackgroundSettingSet,
   gt as BorderSettingSet,
   ot as ButtonSetting,
@@ -1690,7 +1711,7 @@ export {
   ct as SelectApiSettings,
   I as SelectSetting,
   m as Setting,
-  f as SettingGroup,
+  C as SettingGroup,
   O as StringSetting,
   ft as TabsContainerGroup,
   ut as TabsSettings,

package/dist/index.d.ts

@@ -546,10 +546,12 @@ export declare class TabsSettings<T = any> extends Setting<T, TabsSettingsProps<
     private addChangeListeners;
     private updateTabValues;
     private handleTabChange;
+    private redrawContent;
     private handleTabClick;
     setOnChange(onChange: (value: T) => void): this;
     setDetectChange(detectChange: (value: T | undefined) => void): this;
     setOnStateChange(onStateChange: (tabId: string, values: Record<string, any>) => void): this;
+    getActiveTabValue(): Record<string, any> | undefined;
 }
 
 declare interface TabsSettingsProps<T = TabChangeValue> extends SettingProps<T> {

package/package.json

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