builder-settings-types 0.0.308 → 0.0.310

package/dist/base/settings-group/settingsGroup.d.ts

@@ -102,6 +102,10 @@ export declare class TabSettingGroup<TSettings extends SettingsMap = SettingsMap
     constructor(groupProps: SettingGroupProps<TSettings>);
     getActiveTabId(): string;
     switchToTab(tabId: string): void;
+    getValues(): ExtractSettingValues<TSettings> & {
+        activeTabId: string;
+    };
+    getValues<K extends keyof TSettings>(childKey: K): unknown;
     private updateTabUI;
     draw(): HTMLElement;
 }

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

@@ -79,7 +79,7 @@
          xmlns="http://www.w3.org/2000/svg">
       <path d="M8 3.333v9.334M3.333 8h9.334" stroke="currentColor"
             stroke-width="1.5" stroke-linecap="round"/>
-    </svg>`;p.innerHTML=`${c}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,p.addEventListener("click",d=>{d.stopPropagation(),d.preventDefault();const u=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),g=this.addItemCfg.createItem(u);if(et(g)){const f=`${this.addItemCfg.keyPrefix}${u}`;this.addSetting(f,g)}}),o.appendChild(p)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,at.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};Y.hiddenElements=new Set;let T=Y;function St(h){return new st(h)}class st extends T{constructor(t){super(t);const e=Object.keys(this.settings)[0];this.activeTabId=e||""}getActiveTabId(){return this.activeTabId}switchToTab(t){this.settings[t]&&(this.activeTabId=t,this.updateTabUI())}updateTabUI(){if(!this.tabsContainer||!this.contentContainers)return;this.tabsContainer.querySelectorAll(".tab-button").forEach(e=>{e.getAttribute("data-tab-id")===this.activeTabId?e.classList.add("active"):e.classList.remove("active")}),Object.entries(this.contentContainers).forEach(([e,i])=>{e===this.activeTabId?i.classList.add("active"):i.classList.remove("active")})}draw(){const t=super.draw();t.classList.add("tabs-settings-container");const e=t.querySelector(".setting-group-content");if(!e)return t;e.innerHTML="";const i=document.createElement("div");i.className="tabs-title";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="tabs-header",this.tabsContainer=n;const a=document.createElement("div");if(a.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((o,l)=>{const r=document.createElement("button");r.className="tab-button",r.type="button",r.setAttribute("data-tab-id",o),r.textContent=o,r.addEventListener("click",()=>this.switchToTab(o)),n.appendChild(r);const p=document.createElement("div");p.className="tab-panel",this.contentContainers[o]=p;const c=this.settings[o];c&&(L(c)&&typeof c.setNestingLevel=="function"&&c.setNestingLevel(this.getNestingLevel()+1),p.appendChild(c.draw())),a.appendChild(p),l===0&&!this.activeTabId&&(this.activeTabId=o)}),e.appendChild(i),e.appendChild(n),e.appendChild(a),!this.activeTabId){const o=Object.keys(this.settings)[0];this.activeTabId=o||""}return this.updateTabUI(),t}}function dt(h){return new T(h)}function Nt(h){return h}class pt extends x{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const It="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class S extends pt{constructor(t){super({...t,icon:t.icon||It,title:t.title||"Color",default:t.default?S.normalizeColorValue(t.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("var(--")?t:t.startsWith("#")?S.normalizeHexValue(t):t.includes(",")?S.rgbToHexStatic(t):S.normalizeHexValue(t)}static normalizeHexValue(t){return t=t.replace("#",""),t.length===3&&(t=t.split("").map(e=>e+e).join("")),t.length!==6?(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(t)?`#${t.toLowerCase()}`:(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000")}static rgbToHexStatic(t){const e=t.split(",").map(p=>parseInt(p.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#000000";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=p=>{const c=p.toString(16);return c.length===1?"0"+c:c};return`#${r(a)}${r(o)}${r(l)}`}setValue(t){if(t===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof t=="string"){const e=S.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=e),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}draw(){const t=document.createElement("div");if(t.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const g=document.createElement("div");if(g.className="icon-container",this.props.icon){const f=document.createElement("span");f.className="input-icon",f.innerHTML=this.props.icon,g.appendChild(f)}if(this.props.title){const f=document.createElement("span");f.className="input-label",f.textContent=this.props.title,g.appendChild(f)}t.appendChild(g)}const e=document.createElement("div");e.className="color-input-wrapper";const i=document.createElement("div");i.className="color-setting-tabs",i.style.display="flex",i.style.marginBottom="8px",i.style.gap="4px";const s=document.createElement("button");s.className="color-tab active",s.textContent="Solid";const n=document.createElement("button");n.className="color-tab",n.textContent="Global",i.appendChild(s),i.appendChild(n);const a=document.createElement("div");a.className="color-content-solid";const o=document.createElement("div");o.className="color-content-global",o.style.display="none",o.style.display="grid",o.style.gridTemplateColumns="repeat(auto-fill, minmax(30px, 1fr))",o.style.gap="8px";const l=()=>{try{if(console.log("ColorSetting: renderGlobalOptions called"),o.innerHTML="",!x){console.error("ColorSetting: Setting class is undefined");const f=document.createElement("div");f.textContent="Error: System error (Setting undefined)",o.appendChild(f);return}const g=x.GlobalVariables||{};if(console.log("ColorSetting: GlobalVariables:",g),!g||Object.keys(g).length===0){const f=document.createElement("div");f.textContent="No global colors defined",f.style.gridColumn="1 / -1",f.style.fontSize="12px",f.style.color="#666",o.appendChild(f);return}Object.entries(g).forEach(([f,m])=>{const v=document.createElement("button");v.className="global-color-btn",v.title=f,v.style.width="30px",v.style.height="30px",v.style.borderRadius="50%",v.style.border="1px solid #ddd",v.style.backgroundColor=m,v.style.cursor="pointer",this.value===`var(--${f})`&&(v.style.border="2px solid #2196f3"),v.addEventListener("click",C=>{var E,M;C.preventDefault();const w=`var(--${f})`;this.value=w,(E=this.onChange)==null||E.call(this,w),(M=this.detectChange)==null||M.call(this,w),Array.from(o.children).forEach(y=>{y.style.border="1px solid #ddd"}),v.style.border="2px solid #2196f3",c.style.backgroundColor=m}),o.appendChild(v)})}catch(g){console.error("ColorSetting: Error in renderGlobalOptions",g),o.innerHTML="Error loading global options"}};l(),s.addEventListener("click",g=>{g.preventDefault(),s.classList.add("active"),n.classList.remove("active"),a.style.display="flex",o.style.display="none",this.value&&this.value.startsWith("var(--")}),n.addEventListener("click",g=>{g.preventDefault(),n.classList.add("active"),s.classList.remove("active"),a.style.display="none",o.style.display="grid",l()}),this.value&&this.value.startsWith("var(--")?n.click():s.click();const r=g=>{const f=g.value.trim();if(!f)return e.classList.remove("error"),!0;const v=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(f);return v?e.classList.remove("error"):e.classList.add("error"),v},p=document.createElement("input");p.type="color",p.className="color-picker",p.value=this.value&&!this.value.startsWith("var(--")?this.value:"#000000",p.setAttribute("aria-label","Choose color"),p.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&p.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=p;const c=document.createElement("div");c.className="color-preview";let d=this.value||"#000000";if(d.startsWith("var(--")){const g=d.replace("var(--","").replace(")","");d=(x.GlobalVariables||{})[g]||"#000000"}c.style.backgroundColor=d;const u=document.createElement("input");return u.type="text",u.className="color-text-input",u.value=this.value||"",u.placeholder="#000000",u.setAttribute("pattern","#[0-9A-Fa-f]{6}"),u.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),u.setAttribute("aria-label","Hex color value"),u.setAttribute("maxlength","7"),this.getDataPropsPath()&&u.setAttribute("data-test-id",`${this.getDataPropsPath()}_text`),this.textInputEl=u,this.textInputEl.addEventListener("input",g=>{var m,v;let f=g.target.value.trim();if(this.textInputEl&&r(this.textInputEl)){const C=S.normalizeColorValue(f);this.value=C,(m=this.onChange)==null||m.call(this,C),(v=this.detectChange)==null||v.call(this,C),this.colorInputEl&&(this.colorInputEl.value=C),c.style.backgroundColor=C}}),this.colorInputEl.addEventListener("input",g=>{var v,C;const f=g.target.value,m=S.normalizeColorValue(f);this.value=m,(v=this.onChange)==null||v.call(this,m),(C=this.detectChange)==null||C.call(this,m),this.textInputEl&&(this.textInputEl.value=m),c.style.backgroundColor=m,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",g=>{var v,C;const f=g.target.value,m=S.normalizeColorValue(f);this.value=m,(v=this.onChange)==null||v.call(this,m),(C=this.detectChange)==null||C.call(this,m),this.textInputEl&&(this.textInputEl.value=m),c.style.backgroundColor=m}),a.appendChild(p),a.appendChild(c),a.appendChild(u),e.appendChild(i),e.appendChild(a),e.appendChild(o),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?S.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const Vt=`
+    </svg>`;p.innerHTML=`${c}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,p.addEventListener("click",d=>{d.stopPropagation(),d.preventDefault();const u=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),g=this.addItemCfg.createItem(u);if(et(g)){const f=`${this.addItemCfg.keyPrefix}${u}`;this.addSetting(f,g)}}),o.appendChild(p)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,at.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};Y.hiddenElements=new Set;let T=Y;function St(h){return new st(h)}class st extends T{constructor(t){super(t);const e=Object.keys(this.settings)[0];this.activeTabId=e||""}getActiveTabId(){return this.activeTabId}switchToTab(t){this.settings[t]&&(this.activeTabId=t,this.updateTabUI())}getValues(t){return t!==void 0?super.getValues(t):{...super.getValues(),activeTabId:this.activeTabId}}updateTabUI(){if(!this.tabsContainer||!this.contentContainers)return;this.tabsContainer.querySelectorAll(".tab-button").forEach(e=>{e.getAttribute("data-tab-id")===this.activeTabId?e.classList.add("active"):e.classList.remove("active")}),Object.entries(this.contentContainers).forEach(([e,i])=>{e===this.activeTabId?i.classList.add("active"):i.classList.remove("active")})}draw(){const t=super.draw();t.classList.add("tabs-settings-container");const e=t.querySelector(".setting-group-content");if(!e)return t;e.innerHTML="";const i=document.createElement("div");i.className="tabs-title";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="tabs-header",this.tabsContainer=n;const a=document.createElement("div");if(a.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((o,l)=>{const r=document.createElement("button");r.className="tab-button",r.type="button",r.setAttribute("data-tab-id",o),r.textContent=o,r.addEventListener("click",()=>this.switchToTab(o)),n.appendChild(r);const p=document.createElement("div");p.className="tab-panel",this.contentContainers[o]=p;const c=this.settings[o];c&&(L(c)&&typeof c.setNestingLevel=="function"&&c.setNestingLevel(this.getNestingLevel()+1),p.appendChild(c.draw())),a.appendChild(p),l===0&&!this.activeTabId&&(this.activeTabId=o)}),e.appendChild(i),e.appendChild(n),e.appendChild(a),!this.activeTabId){const o=Object.keys(this.settings)[0];this.activeTabId=o||""}return this.updateTabUI(),t}}function dt(h){return new T(h)}function Nt(h){return h}class pt extends x{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const It="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class S extends pt{constructor(t){super({...t,icon:t.icon||It,title:t.title||"Color",default:t.default?S.normalizeColorValue(t.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("var(--")?t:t.startsWith("#")?S.normalizeHexValue(t):t.includes(",")?S.rgbToHexStatic(t):S.normalizeHexValue(t)}static normalizeHexValue(t){return t=t.replace("#",""),t.length===3&&(t=t.split("").map(e=>e+e).join("")),t.length!==6?(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(t)?`#${t.toLowerCase()}`:(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000")}static rgbToHexStatic(t){const e=t.split(",").map(p=>parseInt(p.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#000000";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=p=>{const c=p.toString(16);return c.length===1?"0"+c:c};return`#${r(a)}${r(o)}${r(l)}`}setValue(t){if(t===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof t=="string"){const e=S.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=e),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}draw(){const t=document.createElement("div");if(t.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const g=document.createElement("div");if(g.className="icon-container",this.props.icon){const f=document.createElement("span");f.className="input-icon",f.innerHTML=this.props.icon,g.appendChild(f)}if(this.props.title){const f=document.createElement("span");f.className="input-label",f.textContent=this.props.title,g.appendChild(f)}t.appendChild(g)}const e=document.createElement("div");e.className="color-input-wrapper";const i=document.createElement("div");i.className="color-setting-tabs",i.style.display="flex",i.style.marginBottom="8px",i.style.gap="4px";const s=document.createElement("button");s.className="color-tab active",s.textContent="Solid";const n=document.createElement("button");n.className="color-tab",n.textContent="Global",i.appendChild(s),i.appendChild(n);const a=document.createElement("div");a.className="color-content-solid";const o=document.createElement("div");o.className="color-content-global",o.style.display="none",o.style.display="grid",o.style.gridTemplateColumns="repeat(auto-fill, minmax(30px, 1fr))",o.style.gap="8px";const l=()=>{try{if(console.log("ColorSetting: renderGlobalOptions called"),o.innerHTML="",!x){console.error("ColorSetting: Setting class is undefined");const f=document.createElement("div");f.textContent="Error: System error (Setting undefined)",o.appendChild(f);return}const g=x.GlobalVariables||{};if(console.log("ColorSetting: GlobalVariables:",g),!g||Object.keys(g).length===0){const f=document.createElement("div");f.textContent="No global colors defined",f.style.gridColumn="1 / -1",f.style.fontSize="12px",f.style.color="#666",o.appendChild(f);return}Object.entries(g).forEach(([f,m])=>{const v=document.createElement("button");v.className="global-color-btn",v.title=f,v.style.width="30px",v.style.height="30px",v.style.borderRadius="50%",v.style.border="1px solid #ddd",v.style.backgroundColor=m,v.style.cursor="pointer",this.value===`var(--${f})`&&(v.style.border="2px solid #2196f3"),v.addEventListener("click",C=>{var E,M;C.preventDefault();const w=`var(--${f})`;this.value=w,(E=this.onChange)==null||E.call(this,w),(M=this.detectChange)==null||M.call(this,w),Array.from(o.children).forEach(y=>{y.style.border="1px solid #ddd"}),v.style.border="2px solid #2196f3",c.style.backgroundColor=m}),o.appendChild(v)})}catch(g){console.error("ColorSetting: Error in renderGlobalOptions",g),o.innerHTML="Error loading global options"}};l(),s.addEventListener("click",g=>{g.preventDefault(),s.classList.add("active"),n.classList.remove("active"),a.style.display="flex",o.style.display="none",this.value&&this.value.startsWith("var(--")}),n.addEventListener("click",g=>{g.preventDefault(),n.classList.add("active"),s.classList.remove("active"),a.style.display="none",o.style.display="grid",l()}),this.value&&this.value.startsWith("var(--")?n.click():s.click();const r=g=>{const f=g.value.trim();if(!f)return e.classList.remove("error"),!0;const v=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(f);return v?e.classList.remove("error"):e.classList.add("error"),v},p=document.createElement("input");p.type="color",p.className="color-picker",p.value=this.value&&!this.value.startsWith("var(--")?this.value:"#000000",p.setAttribute("aria-label","Choose color"),p.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&p.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=p;const c=document.createElement("div");c.className="color-preview";let d=this.value||"#000000";if(d.startsWith("var(--")){const g=d.replace("var(--","").replace(")","");d=(x.GlobalVariables||{})[g]||"#000000"}c.style.backgroundColor=d;const u=document.createElement("input");return u.type="text",u.className="color-text-input",u.value=this.value||"",u.placeholder="#000000",u.setAttribute("pattern","#[0-9A-Fa-f]{6}"),u.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),u.setAttribute("aria-label","Hex color value"),u.setAttribute("maxlength","7"),this.getDataPropsPath()&&u.setAttribute("data-test-id",`${this.getDataPropsPath()}_text`),this.textInputEl=u,this.textInputEl.addEventListener("input",g=>{var m,v;let f=g.target.value.trim();if(this.textInputEl&&r(this.textInputEl)){const C=S.normalizeColorValue(f);this.value=C,(m=this.onChange)==null||m.call(this,C),(v=this.detectChange)==null||v.call(this,C),this.colorInputEl&&(this.colorInputEl.value=C),c.style.backgroundColor=C}}),this.colorInputEl.addEventListener("input",g=>{var v,C;const f=g.target.value,m=S.normalizeColorValue(f);this.value=m,(v=this.onChange)==null||v.call(this,m),(C=this.detectChange)==null||C.call(this,m),this.textInputEl&&(this.textInputEl.value=m),c.style.backgroundColor=m,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",g=>{var v,C;const f=g.target.value,m=S.normalizeColorValue(f);this.value=m,(v=this.onChange)==null||v.call(this,m),(C=this.detectChange)==null||C.call(this,m),this.textInputEl&&(this.textInputEl.value=m),c.style.backgroundColor=m}),a.appendChild(p),a.appendChild(c),a.appendChild(u),e.appendChild(i),e.appendChild(a),e.appendChild(o),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?S.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const Vt=`
 <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"/>
   <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>

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

@@ -873,6 +873,12 @@ class wt extends H {
   switchToTab(t) {
     this.settings[t] && (this.activeTabId = t, this.updateTabUI());
   }
+  getValues(t) {
+    return t !== void 0 ? super.getValues(t) : {
+      ...super.getValues(),
+      activeTabId: this.activeTabId
+    };
+  }
   updateTabUI() {
     if (!this.tabsContainer || !this.contentContainers) return;
     this.tabsContainer.querySelectorAll(".tab-button").forEach((e) => {

package/package.json

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