builder-settings-types 0.0.357 → 0.0.358

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

@@ -97,7 +97,7 @@
         font-weight: 500;
         cursor: pointer;
         transition: all 0.2s;
-      `,a.addEventListener("mouseenter",()=>{a.style.backgroundColor="#f9fafb",a.style.borderColor="#9ca3af"}),a.addEventListener("mouseleave",()=>{a.style.backgroundColor="white",a.style.borderColor="#d1d5db"}),l.addEventListener("mouseenter",()=>{l.style.backgroundColor="#dc2626"}),l.addEventListener("mouseleave",()=>{l.style.backgroundColor="#ef4444"});const r=()=>{e.style.opacity="0",i.style.transform="scale(0.95)",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},200)};a.addEventListener("click",()=>{r(),t(!1)}),l.addEventListener("click",()=>{r(),t(!0)}),e.addEventListener("click",d=>{d.target===e&&(r(),t(!1))});const h=d=>{d.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",h))};document.addEventListener("keydown",h),o.appendChild(a),o.appendChild(l),i.appendChild(s),i.appendChild(n),i.appendChild(o),e.appendChild(i),document.body.appendChild(e),requestAnimationFrame(()=>{e.style.opacity="1",i.style.transform="scale(1)"}),setTimeout(()=>l.focus(),100)})}getNextIndexFromPrefix(t){const e=new Set(Object.keys(this.settings).filter(s=>s.startsWith(t)).map(s=>{const n=Number(s.slice(t.length));return Number.isFinite(n)?n:-1}).filter(s=>s>=0));let i=0;for(;e.has(i);)i+=1;return i}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const o=t[n],a=e[n];JSON.stringify(o)!==JSON.stringify(a)&&(i[n]={from:o,to:a})}),i}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(M(s))e[i]=s.getValues();else{const n=s;e[i]=n.getValue?n.getValue():n.value}}return e}else{const e=this.settings[t];if(!e)return;if(M(e))return e.getValues();const i=e;return i.getValue?i.getValue():i.value}}getValuesForJson(t){var e;if(t===void 0){if(this.includeGetJson===!1)return null;const i={};for(const s in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,s)){const n=this.settings[s];if(M(n)){const o=n.getValuesForJson();o!==null&&(i[s]=o)}else{const o=n;if(o.includeGetJson!==!1)if(n instanceof j){const a=n.getRawValue();i[s]=a?T(a):null}else i[s]=o.value}}return(this.hide===!0||((e=this==null?void 0:this.groupProps)==null?void 0:e.hide)===!0)&&(i.hide=!0),i}else{const i=this.settings[t];if(!i)return;if(M(i))return i.includeGetJson===!1?null:i.getValuesForJson();{const s=i;if(s.includeGetJson===!1)return null;if(i instanceof j){const n=i.getRawValue();return n?T(n):null}return s.value}}}getDefaultValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(M(s))e[i]=s.getDefaultValues();else{const n=s;e[i]=n.default!==void 0?n.default:n.value}}return e}else{const e=this.settings[t];if(!e)return;if(M(e))return e.getDefaultValues();const i=e;return i.default!==void 0?i.default:i.value}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,at.hiddenElements.add(t),this.hide&&(t.style.display="none"),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),Q(t,this.nestingLevel);const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");i.className="title-section";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="actions-section";const o=document.createElement("span");o.className="setting-group-arrow",o.innerHTML=`
+      `,a.addEventListener("mouseenter",()=>{a.style.backgroundColor="#f9fafb",a.style.borderColor="#9ca3af"}),a.addEventListener("mouseleave",()=>{a.style.backgroundColor="white",a.style.borderColor="#d1d5db"}),l.addEventListener("mouseenter",()=>{l.style.backgroundColor="#dc2626"}),l.addEventListener("mouseleave",()=>{l.style.backgroundColor="#ef4444"});const r=()=>{e.style.opacity="0",i.style.transform="scale(0.95)",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},200)};a.addEventListener("click",()=>{r(),t(!1)}),l.addEventListener("click",()=>{r(),t(!0)}),e.addEventListener("click",d=>{d.target===e&&(r(),t(!1))});const h=d=>{d.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",h))};document.addEventListener("keydown",h),o.appendChild(a),o.appendChild(l),i.appendChild(s),i.appendChild(n),i.appendChild(o),e.appendChild(i),document.body.appendChild(e),requestAnimationFrame(()=>{e.style.opacity="1",i.style.transform="scale(1)"}),setTimeout(()=>l.focus(),100)})}getNextIndexFromPrefix(t){const e=new Set(Object.keys(this.settings).filter(s=>s.startsWith(t)).map(s=>{const n=Number(s.slice(t.length));return Number.isFinite(n)?n:-1}).filter(s=>s>=0));let i=0;for(;e.has(i);)i+=1;return i}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const o=t[n],a=e[n];JSON.stringify(o)!==JSON.stringify(a)&&(i[n]={from:o,to:a})}),i}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(M(s))e[i]=s.getValues();else{const n=s;e[i]=n.getValue?n.getValue():n.value}}return{...e,$id:this.id}}else{const e=this.settings[t];if(!e)return;if(M(e))return e.getValues();const i=e;return{...i.getValue?i.getValue():i.value,$id:this.id}}}getValuesForJson(t){var e;if(t===void 0){if(this.includeGetJson===!1)return null;const i={$id:this.id};for(const s in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,s)){const n=this.settings[s];if(M(n)){const o=n.getValuesForJson();o!==null&&(i[s]=o)}else{const o=n;if(o.includeGetJson!==!1)if(n instanceof j){const a=n.getRawValue();i[s]=a?T(a):null}else i[s]=o.value}}return(this.hide===!0||((e=this==null?void 0:this.groupProps)==null?void 0:e.hide)===!0)&&(i.hide=!0),i}else{const i=this.settings[t];if(!i)return;if(M(i))return i.includeGetJson===!1?null:i.getValuesForJson();{const s=i;if(s.includeGetJson===!1)return null;if(i instanceof j){const n=i.getRawValue();return n?T(n):null}return s.value}}}getDefaultValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(M(s))e[i]=s.getDefaultValues();else{const n=s;e[i]=n.default!==void 0?n.default:n.value}}return e}else{const e=this.settings[t];if(!e)return;if(M(e))return e.getDefaultValues();const i=e;return i.default!==void 0?i.default:i.value}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,at.hiddenElements.add(t),this.hide&&(t.style.display="none"),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),Q(t,this.nestingLevel);const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");i.className="title-section";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="actions-section";const o=document.createElement("span");o.className="setting-group-arrow",o.innerHTML=`
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
@@ -106,7 +106,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>`;h.innerHTML=`${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,h.addEventListener("click",p=>{p.stopPropagation(),p.preventDefault();const u=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),C=this.addItemCfg.createItem(u);if(ht(C)){const m=`${this.addItemCfg.keyPrefix}${u}`;this.addSetting(m,C)}}),a.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(a),this.elementRef=t,Ct.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(a=>n.includes(a))&&n.length===1){const a=n[0];i=e[a]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};at.hiddenElements=new Set;let H=at;function se(c){return new vt(c)}class vt extends H{constructor(t){super(t);const e=Object.keys(this.settings)[0];this.activeTabId=e||""}getActiveTabId(){return this.activeTabId}switchToTab(t){var i;if(!this.settings[t]||this.activeTabId===t)return;this.activeTabId=t,this.updateTabUI();const e=this.getValues();this.initialValues=e,(i=this.onChange)==null||i.call(this,e)}getValues(t){if(t!==void 0)return super.getValues(t);const e=super.getValues();return console.log("idddddddddddddddddd",this.id),{...e,activeTabId:this.activeTabId,id:this.id}}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 o=document.createElement("div");if(o.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((a,l)=>{const r=document.createElement("button");r.className="tab-button",r.type="button",r.setAttribute("data-tab-id",a),r.textContent=a,r.addEventListener("click",()=>this.switchToTab(a)),n.appendChild(r);const h=document.createElement("div");h.className="tab-panel",this.contentContainers[a]=h;const d=this.settings[a];d&&(M(d)&&typeof d.setNestingLevel=="function"&&d.setNestingLevel(this.getNestingLevel()+1),h.appendChild(d.draw())),o.appendChild(h),l===0&&!this.activeTabId&&(this.activeTabId=a)}),e.appendChild(i),e.appendChild(n),e.appendChild(o),!this.activeTabId){const a=Object.keys(this.settings)[0];this.activeTabId=a||""}return this.updateTabUI(),t}}function Ot(c){return new H(c)}function ne(c){return c}class Ht extends w{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 oe="<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 P extends Ht{constructor(t){super({...t,icon:t.icon||oe,title:t.title||"Color",default:t.default?P.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("#")?P.normalizeHexValue(t):t.includes(",")?P.rgbToHexStatic(t):P.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(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#000000";const[i,s,n]=e,o=Math.max(0,Math.min(255,i)),a=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=h=>{const d=h.toString(16);return d.length===1?"0"+d:d};return`#${r(o)}${r(a)}${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=P.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 m=document.createElement("div");if(m.className="icon-container",this.props.icon){const g=document.createElement("span");g.className="input-icon",g.innerHTML=this.props.icon,m.appendChild(g)}if(this.props.title){const g=document.createElement("span");g.className="input-label",g.textContent=this.props.title,m.appendChild(g)}t.appendChild(m)}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 o=document.createElement("div");o.className="color-content-solid";const a=document.createElement("div");a.className="color-content-global",a.style.display="none",a.style.display="grid",a.style.gridTemplateColumns="repeat(auto-fill, minmax(30px, 1fr))",a.style.gap="8px";const l=()=>{try{if(console.log("ColorSetting: renderGlobalOptions called"),a.innerHTML="",!w){console.error("ColorSetting: Setting class is undefined");const g=document.createElement("div");g.textContent="Error: System error (Setting undefined)",a.appendChild(g);return}const m=w.GlobalVariables||{};if(console.log("ColorSetting: GlobalVariables:",m),!m||Object.keys(m).length===0){const g=document.createElement("div");g.textContent="No global colors defined",g.style.gridColumn="1 / -1",g.style.fontSize="12px",g.style.color="#666",a.appendChild(g);return}Object.entries(m).forEach(([g,f])=>{const v=document.createElement("button");v.className="global-color-btn",v.title=g,v.style.width="30px",v.style.height="30px",v.style.borderRadius="50%",v.style.border="1px solid #ddd",v.style.backgroundColor=f,v.style.cursor="pointer",this.value===`var(--${g})`&&(v.style.border="2px solid #2196f3"),v.addEventListener("click",y=>{var k,x;y.preventDefault();const b=`var(--${g})`;this.value=b,(k=this.onChange)==null||k.call(this,b),(x=this.detectChange)==null||x.call(this,b),Array.from(a.children).forEach(E=>{E.style.border="1px solid #ddd"}),v.style.border="2px solid #2196f3",d.style.backgroundColor=f}),a.appendChild(v)})}catch(m){console.error("ColorSetting: Error in renderGlobalOptions",m),a.innerHTML="Error loading global options"}};l(),s.addEventListener("click",m=>{m.preventDefault(),s.classList.add("active"),n.classList.remove("active"),o.style.display="flex",a.style.display="none",this.value&&this.value.startsWith("var(--")}),n.addEventListener("click",m=>{m.preventDefault(),n.classList.add("active"),s.classList.remove("active"),o.style.display="none",a.style.display="grid",l()}),this.value&&this.value.startsWith("var(--")?n.click():s.click();const r=m=>{const g=m.value.trim();if(!g)return e.classList.remove("error"),!0;const v=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(g);return v?e.classList.remove("error"):e.classList.add("error"),v},h=document.createElement("input");h.type="color",h.className="color-picker",h.value=this.value&&!this.value.startsWith("var(--")?this.value:"#000000",h.setAttribute("aria-label","Choose color"),h.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&h.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=h;const d=document.createElement("div");d.className="color-preview";let p=this.value||"#000000";if(p.startsWith("var(--")){const m=p.replace("var(--","").replace(")","");p=(w.GlobalVariables||{})[m]||"#000000"}d.style.backgroundColor=p;const u=document.createElement("input");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;const C=m=>{var f,v;let g=m.trim();if(g&&!g.startsWith("#")&&!g.startsWith("var(")&&/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(g)&&(g="#"+g,this.textInputEl&&(this.textInputEl.value=g)),this.textInputEl&&r(this.textInputEl)){const y=P.normalizeColorValue(g);this.value=y,(f=this.onChange)==null||f.call(this,y),(v=this.detectChange)==null||v.call(this,y),this.colorInputEl&&(this.colorInputEl.value=y),d.style.backgroundColor=y}};return this.textInputEl.addEventListener("input",m=>{const g=m.target.value;C(g)}),this.textInputEl.addEventListener("paste",m=>{var f;m.preventDefault();const g=((f=m.clipboardData)==null?void 0:f.getData("text"))||"";this.textInputEl&&(this.textInputEl.value=g.trim(),C(g))}),this.textInputEl.addEventListener("keydown",m=>{var g,f,v;m.key==="Enter"&&(m.preventDefault(),C(((g=this.textInputEl)==null?void 0:g.value)||""),(f=this.textInputEl)==null||f.blur()),m.key==="Escape"&&(this.textInputEl&&this.value&&(this.textInputEl.value=this.value),(v=this.textInputEl)==null||v.blur(),e.classList.remove("error"))}),this.colorInputEl.addEventListener("input",m=>{var v,y;const g=m.target.value,f=P.normalizeColorValue(g);this.value=f,(v=this.onChange)==null||v.call(this,f),(y=this.detectChange)==null||y.call(this,f),this.textInputEl&&(this.textInputEl.value=f),d.style.backgroundColor=f,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",m=>{var v,y;const g=m.target.value,f=P.normalizeColorValue(g);this.value=f,(v=this.onChange)==null||v.call(this,f),(y=this.detectChange)==null||y.call(this,f),this.textInputEl&&(this.textInputEl.value=f),d.style.backgroundColor=f}),o.appendChild(h),o.appendChild(d),o.appendChild(u),e.appendChild(i),e.appendChild(o),e.appendChild(a),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?P.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 ae=`
+    </svg>`;h.innerHTML=`${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,h.addEventListener("click",p=>{p.stopPropagation(),p.preventDefault();const u=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),C=this.addItemCfg.createItem(u);if(ht(C)){const m=`${this.addItemCfg.keyPrefix}${u}`;this.addSetting(m,C)}}),a.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(a),this.elementRef=t,Ct.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(a=>n.includes(a))&&n.length===1){const a=n[0];i=e[a]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};at.hiddenElements=new Set;let H=at;function se(c){return new vt(c)}class vt extends H{constructor(t){super(t);const e=Object.keys(this.settings)[0];this.activeTabId=e||""}getActiveTabId(){return this.activeTabId}switchToTab(t){var i;if(!this.settings[t]||this.activeTabId===t)return;this.activeTabId=t,this.updateTabUI();const e=this.getValues();this.initialValues=e,(i=this.onChange)==null||i.call(this,e)}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 o=document.createElement("div");if(o.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((a,l)=>{const r=document.createElement("button");r.className="tab-button",r.type="button",r.setAttribute("data-tab-id",a),r.textContent=a,r.addEventListener("click",()=>this.switchToTab(a)),n.appendChild(r);const h=document.createElement("div");h.className="tab-panel",this.contentContainers[a]=h;const d=this.settings[a];d&&(M(d)&&typeof d.setNestingLevel=="function"&&d.setNestingLevel(this.getNestingLevel()+1),h.appendChild(d.draw())),o.appendChild(h),l===0&&!this.activeTabId&&(this.activeTabId=a)}),e.appendChild(i),e.appendChild(n),e.appendChild(o),!this.activeTabId){const a=Object.keys(this.settings)[0];this.activeTabId=a||""}return this.updateTabUI(),t}}function Ot(c){return new H(c)}function ne(c){return c}class Ht extends w{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 oe="<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 P extends Ht{constructor(t){super({...t,icon:t.icon||oe,title:t.title||"Color",default:t.default?P.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("#")?P.normalizeHexValue(t):t.includes(",")?P.rgbToHexStatic(t):P.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(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#000000";const[i,s,n]=e,o=Math.max(0,Math.min(255,i)),a=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=h=>{const d=h.toString(16);return d.length===1?"0"+d:d};return`#${r(o)}${r(a)}${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=P.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 m=document.createElement("div");if(m.className="icon-container",this.props.icon){const g=document.createElement("span");g.className="input-icon",g.innerHTML=this.props.icon,m.appendChild(g)}if(this.props.title){const g=document.createElement("span");g.className="input-label",g.textContent=this.props.title,m.appendChild(g)}t.appendChild(m)}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 o=document.createElement("div");o.className="color-content-solid";const a=document.createElement("div");a.className="color-content-global",a.style.display="none",a.style.display="grid",a.style.gridTemplateColumns="repeat(auto-fill, minmax(30px, 1fr))",a.style.gap="8px";const l=()=>{try{if(console.log("ColorSetting: renderGlobalOptions called"),a.innerHTML="",!w){console.error("ColorSetting: Setting class is undefined");const g=document.createElement("div");g.textContent="Error: System error (Setting undefined)",a.appendChild(g);return}const m=w.GlobalVariables||{};if(console.log("ColorSetting: GlobalVariables:",m),!m||Object.keys(m).length===0){const g=document.createElement("div");g.textContent="No global colors defined",g.style.gridColumn="1 / -1",g.style.fontSize="12px",g.style.color="#666",a.appendChild(g);return}Object.entries(m).forEach(([g,f])=>{const v=document.createElement("button");v.className="global-color-btn",v.title=g,v.style.width="30px",v.style.height="30px",v.style.borderRadius="50%",v.style.border="1px solid #ddd",v.style.backgroundColor=f,v.style.cursor="pointer",this.value===`var(--${g})`&&(v.style.border="2px solid #2196f3"),v.addEventListener("click",y=>{var k,x;y.preventDefault();const b=`var(--${g})`;this.value=b,(k=this.onChange)==null||k.call(this,b),(x=this.detectChange)==null||x.call(this,b),Array.from(a.children).forEach(E=>{E.style.border="1px solid #ddd"}),v.style.border="2px solid #2196f3",d.style.backgroundColor=f}),a.appendChild(v)})}catch(m){console.error("ColorSetting: Error in renderGlobalOptions",m),a.innerHTML="Error loading global options"}};l(),s.addEventListener("click",m=>{m.preventDefault(),s.classList.add("active"),n.classList.remove("active"),o.style.display="flex",a.style.display="none",this.value&&this.value.startsWith("var(--")}),n.addEventListener("click",m=>{m.preventDefault(),n.classList.add("active"),s.classList.remove("active"),o.style.display="none",a.style.display="grid",l()}),this.value&&this.value.startsWith("var(--")?n.click():s.click();const r=m=>{const g=m.value.trim();if(!g)return e.classList.remove("error"),!0;const v=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(g);return v?e.classList.remove("error"):e.classList.add("error"),v},h=document.createElement("input");h.type="color",h.className="color-picker",h.value=this.value&&!this.value.startsWith("var(--")?this.value:"#000000",h.setAttribute("aria-label","Choose color"),h.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&h.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=h;const d=document.createElement("div");d.className="color-preview";let p=this.value||"#000000";if(p.startsWith("var(--")){const m=p.replace("var(--","").replace(")","");p=(w.GlobalVariables||{})[m]||"#000000"}d.style.backgroundColor=p;const u=document.createElement("input");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;const C=m=>{var f,v;let g=m.trim();if(g&&!g.startsWith("#")&&!g.startsWith("var(")&&/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(g)&&(g="#"+g,this.textInputEl&&(this.textInputEl.value=g)),this.textInputEl&&r(this.textInputEl)){const y=P.normalizeColorValue(g);this.value=y,(f=this.onChange)==null||f.call(this,y),(v=this.detectChange)==null||v.call(this,y),this.colorInputEl&&(this.colorInputEl.value=y),d.style.backgroundColor=y}};return this.textInputEl.addEventListener("input",m=>{const g=m.target.value;C(g)}),this.textInputEl.addEventListener("paste",m=>{var f;m.preventDefault();const g=((f=m.clipboardData)==null?void 0:f.getData("text"))||"";this.textInputEl&&(this.textInputEl.value=g.trim(),C(g))}),this.textInputEl.addEventListener("keydown",m=>{var g,f,v;m.key==="Enter"&&(m.preventDefault(),C(((g=this.textInputEl)==null?void 0:g.value)||""),(f=this.textInputEl)==null||f.blur()),m.key==="Escape"&&(this.textInputEl&&this.value&&(this.textInputEl.value=this.value),(v=this.textInputEl)==null||v.blur(),e.classList.remove("error"))}),this.colorInputEl.addEventListener("input",m=>{var v,y;const g=m.target.value,f=P.normalizeColorValue(g);this.value=f,(v=this.onChange)==null||v.call(this,f),(y=this.detectChange)==null||y.call(this,f),this.textInputEl&&(this.textInputEl.value=f),d.style.backgroundColor=f,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",m=>{var v,y;const g=m.target.value,f=P.normalizeColorValue(g);this.value=f,(v=this.onChange)==null||v.call(this,f),(y=this.detectChange)==null||y.call(this,f),this.textInputEl&&(this.textInputEl.value=f),d.style.backgroundColor=f}),o.appendChild(h),o.appendChild(d),o.appendChild(u),e.appendChild(i),e.appendChild(o),e.appendChild(a),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?P.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 ae=`
 <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

@@ -2320,20 +2320,20 @@ const ot = class ot {
             e[i] = n.getValue ? n.getValue() : n.value;
           }
         }
-      return e;
+      return { ...e, $id: this.id };
     } else {
       const e = this.settings[t];
       if (!e) return;
       if (M(e)) return e.getValues();
       const i = e;
-      return i.getValue ? i.getValue() : i.value;
+      return { ...i.getValue ? i.getValue() : i.value, $id: this.id };
     }
   }
   getValuesForJson(t) {
     var e;
     if (t === void 0) {
       if (this.includeGetJson === !1) return null;
-      const i = {};
+      const i = { $id: this.id };
       for (const s in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, s)) {
           const n = this.settings[s];
@@ -2517,13 +2517,9 @@ class Xt extends $ {
     this.initialValues = e, (i = this.onChange) == null || i.call(this, e);
   }
   getValues(t) {
-    if (t !== void 0)
-      return super.getValues(t);
-    const e = super.getValues();
-    return console.log("idddddddddddddddddd", this.id), {
-      ...e,
-      activeTabId: this.activeTabId,
-      id: this.id
+    return t !== void 0 ? super.getValues(t) : {
+      ...super.getValues(),
+      activeTabId: this.activeTabId
     };
   }
   updateTabUI() {

package/package.json

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