builder-settings-types 0.0.266 → 0.0.267

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

@@ -21,6 +21,7 @@ export type SettingGroupProps<TSettings extends SettingsMap> = {
     addItem?: AddItemConfig;
     deleteItem?: DeleteItemConfig;
     dataProps?: string;
+    hide?: boolean;
 };
 export declare function iterateSettings<TSettings extends SettingsMap>(settings: TSettings, callback: SettingIteratorCallback<TSettings>): void;
 export type SettingGroupWithSettings<TSettings extends SettingsMap> = SettingGroup<TSettings> & TSettings;
@@ -52,6 +53,7 @@ export declare class SettingGroup<TSettings extends SettingsMap> implements IDra
     private deleteItemCfg?;
     private dataProps?;
     private dataPropsPath;
+    private hide;
     constructor(groupProps: SettingGroupProps<TSettings>);
     private propagateNestingLevel;
     getNestingLevel(): number;

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ut="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let lt=(p=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(p|=0));for(;p--;)t+=ut[e[p]&63];return t};function gt(p){let t=0,e=p.parentElement;for(;e;)e.classList.contains("setting-group")&&e!==p&&t++,e=e.parentElement;return t}function Z(p,t){const e=Math.min(Math.max(t,0),5);p.setAttribute("data-nesting-level",e.toString()),e>0?p.style.setProperty("--visual-indent",`${e*2}px`):(p.style.removeProperty("--visual-indent"),p.style.marginLeft="")}function et(p,t=0){p.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;Z(s,n),et(s,n)})}const mt={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class ft{constructor(t={}){this.observedElements=new Set,this.config={...mt,...t},this.config.enableAutoDetection&&this.setupAutoDetection()}setupAutoDetection(){this.observer=new MutationObserver(t=>{let e=!1;t.forEach(i=>{i.type==="childList"&&i.addedNodes.forEach(s=>{s instanceof HTMLElement&&(s.classList.contains("setting-group")?[s]:Array.from(s.querySelectorAll(".setting-group"))).length>0&&(e=!0)})}),e&&this.updateAllNesting()}),this.observer.observe(document.body,{childList:!0,subtree:!0})}trackElement(t){this.observedElements.add(t),this.updateElementNesting(t)}untrackElement(t){this.observedElements.delete(t)}updateElementNesting(t){const e=gt(t);this.applyNestingWithConfig(t,e)}updateAllNesting(){this.observedElements.forEach(t=>{t.isConnected?this.updateElementNesting(t):this.observedElements.delete(t)})}applyNestingWithConfig(t,e){const i=Math.min(Math.max(e,0),this.config.maxLevel);if(t.setAttribute("data-nesting-level",i.toString()),i>0){const s=i*this.config.visualIndentMultiplier;t.style.setProperty("--visual-indent",`${s}px`)}else t.style.removeProperty("--visual-indent"),t.style.marginLeft=""}recalculateNesting(t=document.body){t.querySelectorAll(".setting-group").forEach(i=>{const s=i;this.updateElementNesting(s),this.trackElement(s)})}getNestingStats(){const t={};return this.observedElements.forEach(e=>{const i=parseInt(e.getAttribute("data-nesting-level")||"0",10);t[i]=(t[i]||0)+1}),t}destroy(){this.observer&&(this.observer.disconnect(),this.observer=void 0),this.observedElements.clear()}}const ot=new ft;function X(p){if(p===null||typeof p!="object")return p;if(p instanceof Date)return new Date(p.getTime());if(p instanceof Array)return p.map(t=>X(t));if(typeof p=="object"){const t={};for(const e in p)Object.prototype.hasOwnProperty.call(p,e)&&(t[e]=X(p[e]));return t}return p}function vt(p){switch(p){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class S{constructor(t={}){this.props=t,this.dataPropsPath="",this.id=t.id||lt(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||"",this.includeGetJson=t.includeGetJson!==void 0?t.includeGetJson:!0}static SetUploadUrl(t){globalThis.DefaultUploadUrl=t,S.DefaultUploadUrl=t}static SetDefaultLanguage(t){globalThis.DefaultLanguage=t,S.DefaultLanguage=t}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setOnBlur(t){return this.onBlur=t,this}setDataPropsPath(t){this.dataPropsPath=t}getDataPropsPath(){return this.dataPropsPath}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}clone(){const t=this.constructor,e=X(this.props),i=new t(e);return i.value=X(this.value),i}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const a=document.createElement("div");if(a.className="icon-container",t.icon){const l=this.createIcon(t.icon,t.iconClassName);a.appendChild(l)}if(t.title){const l=this.createLabel(t.title,t.labelClassName);a.appendChild(l)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||vt(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",this.dataPropsPath&&s.setAttribute("data-test-id",this.dataPropsPath);const n=a=>{const l=a.target;let r=l.value;switch(t.inputType){case"number":r=Number(l.value);break;case"color":r=l.value;break;case"date":r=l.value;break;case"select":r=l.value;break;case"text":r=l.value;break;case"button":r=l.value;break;default:r=l.value}this.value=r,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)},o=a=>{a.target,this.onBlur&&this.onBlur(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),s.addEventListener("blur",o),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function j(p){return p instanceof S}function N(p){return p instanceof W}function it(p){return j(p)||N(p)}function q(p,t){for(const e in p)if(Object.prototype.hasOwnProperty.call(p,e)){const i=p[e];t(e,i)}}const K=class K{constructor(t){this.elementRef=null,this.isHidden=!1,this.custom=!1,this.initialValues={},this.changeTimeout=null,this.isHandlingChange=!1,this.changeHandlers=new Set,this.blurTimeout=null,this.lastChangeTime=0,this.handleBlur=()=>{},this.pendingBlurHandler=null,this.originalDefaultValues={},this.nestingLevel=0,this.dataPropsPath="",this.id=t.id||lt(),this.title=t.title,this.settings=t.settings,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.nestingLevel=0,this.includeGetJson=t.includeGetJson??!0,this.addItemCfg=t.addItem,this.deleteItemCfg=t.deleteItem,this.dataProps=t.dataProps,this.dataPropsPath=t.dataProps||"",Object.assign(this,t.settings),this.initialValues=this.getValues(),this.originalDefaultValues=this.getDefaultValues(),this.propagateNestingLevel(),this.propagateDataPropsPath()}propagateNestingLevel(){const t=this.nestingLevel+1;q(this.settings,(e,i)=>{N(i)&&(i.nestingLevel=t,i.propagateNestingLevel())})}getNestingLevel(){return this.nestingLevel}setNestingLevel(t){this.nestingLevel=t,this.propagateNestingLevel(),this.elementRef&&this.updateNestingStyles()}getDataPropsPath(){return this.dataPropsPath}setDataPropsPath(t){this.dataPropsPath=t,this.propagateDataPropsPath()}propagateDataPropsPath(){q(this.settings,(t,e)=>{const i=String(t),s=this.dataPropsPath?`${this.dataPropsPath}_${i}`:i;(N(e)||j(e)&&typeof e.setDataPropsPath=="function")&&e.setDataPropsPath(s)})}updateNestingStyles(){this.elementRef&&(Z(this.elementRef,this.nestingLevel),et(this.elementRef,this.nestingLevel))}forceChildUIRefresh(){Object.entries(this.settings).forEach(([t,e])=>{try{if(N(e)){const i=e.getValues();e.setValue(i)}else if(typeof e.setValue=="function"){const i=e.value;i!==void 0&&e.setValue(i)}}catch(i){console.warn(`Error refreshing UI for setting ${t}:`,i)}})}removeSetting(t){var s;const e=this.settings[t];if(!e)return;if(delete this.settings[t],this.elementRef){const n=this.elementRef.querySelector(".setting-group-content");if(n){const o=Array.from(n.querySelectorAll(".setting-group, .setting"));for(const a of o){const l=a.id;if(l&&"id"in e&&typeof e.id=="string"&&l.includes(e.id)){a.remove();break}}}}typeof e.cleanup=="function"&&e.cleanup(),this.updateNestingStyles();const i=this.getValues();this.initialValues=i,(s=this.onChange)==null||s.call(this,i)}updateVisibility(){this.elementRef}clone(){const t={};q(this.settings,(s,n)=>{const o=String(s);typeof n.clone=="function"?t[o]=n.clone():(console.warn(`Setting with key '${o}' does not have a clone method. Copying reference.`),t[o]=n)});const e={title:this.title,settings:t,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,includeGetJson:this.includeGetJson,addItem:this.addItemCfg,deleteItem:this.deleteItemCfg,dataProps:this.dataProps},i=rt(e);return i.initialValues=this.getValues(),i}resetDefault(){const t=this.originalDefaultValues;this.setValue(t),this.onChange&&this.onChange(this.getValues())}setMobileValues(t){!t||typeof t!="object"||(Object.entries(t).forEach(([e,i])=>{const s=this.settings[e];s&&(N(s)||j(s))&&typeof s.setMobileValue=="function"&&s.setMobileValue(i)}),this.setValue(t),this.onChange&&this.onChange(this.getValues()))}getMobileValues(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(N(s))e[i]=s.getMobileValues();else{const n=s;e[i]=n.mobileValue!==void 0?n.mobileValue:n.value}}return e}else{const e=this.settings[t];if(!e)return;if(N(e))return e.getMobileValues();const i=e;return i.mobileValue!==void 0?i.mobileValue:i.value}}setOnChange(t){this.onChange=t;const e=()=>{this.isHandlingChange||(this.isHandlingChange=!0,this.changeTimeout&&clearTimeout(this.changeTimeout),this.changeTimeout=setTimeout(()=>{const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&(this.lastChangeTime=Date.now(),this.initialValues=i,t(i),this.updateVisibility()),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),q(this.settings,(i,s)=>{var n;if(N(s))s.setOnChange(()=>{const o=this.getValues();this.initialValues=o,t(o)}),this.changeHandlers.add(()=>t(this.getValues()));else if(j(s)){const o=()=>e();this.changeHandlers.add(o),s.setOnChange(o)}else{const o=()=>e();this.changeHandlers.add(o),(n=s.setOnChange)==null||n.call(s,o)}}),this}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}setValue(t){if(!t||typeof t!="object")return;Object.entries(t).forEach(([i,s])=>{let n=this.settings[i];if(!n&&this.addItemCfg&&i.startsWith(this.addItemCfg.keyPrefix)){const o=i.slice(this.addItemCfg.keyPrefix.length),a=Number(o);if(Number.isFinite(a)){const l=this.addItemCfg.createItem(a);it(l)&&(this.addSetting(i,l),n=l)}}n&&(N(n)||j(n))&&typeof n.setValue=="function"&&n.setValue(s)}),setTimeout(()=>{this.forceChildUIRefresh()},0);const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}wireChild(t){var i;const e=()=>{var n;const s=this.getValues();this.initialValues=s,(n=this.onChange)==null||n.call(this,s),this.updateVisibility()};N(t)?t.setOnChange(()=>e()):j(t)?t.setOnChange(()=>e()):(i=t.setOnChange)==null||i.call(t,()=>e())}addSetting(t,e){var s,n;if(this.settings[t]=e,this.wireChild(e),this.elementRef){const o=this.elementRef.querySelector(".setting-group-content");if(o){N(e)&&typeof e.setNestingLevel=="function"&&e.setNestingLevel(this.nestingLevel+1);const a=e.draw(),l=this.deleteItemCfg??this.addItemCfg;if(l){const h=l.keyPrefix??((s=this.addItemCfg)==null?void 0:s.keyPrefix);h&&t.startsWith(h)&&this.addDeleteButtonToElement(a,t)}const r=o.querySelector(".sg-add-button-bottom");r?o.insertBefore(a,r):o.appendChild(a),ot.trackElement(a),Z(a,this.nestingLevel+1),et(a,this.nestingLevel+1);const c=a.style.display;a.style.display="none",a.offsetHeight,a.style.display=c,this.updateNestingStyles()}}const i=this.getValues();this.initialValues=i,(n=this.onChange)==null||n.call(this,i)}addDeleteButtonToElement(t,e,i){let s=null;try{s=t.querySelector(":scope > .setting-group-title")}catch{s=null}if(!s){const r=Array.from(t.querySelectorAll(".setting-group-title"));for(const c of r)if(c.closest(".setting-group")===t){s=c;break}s||(s=r[0]??null)}if(!s)return;const n=s.querySelector(".actions-section");if(!n)return;const o=document.createElement("button");o.type="button",o.className="sg-delete-button",i?i.deleteItemCfg:this.deleteItemCfg??this.addItemCfg,o.title="Delete",o.style.cssText=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ut="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let lt=(p=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(p|=0));for(;p--;)t+=ut[e[p]&63];return t};function gt(p){let t=0,e=p.parentElement;for(;e;)e.classList.contains("setting-group")&&e!==p&&t++,e=e.parentElement;return t}function Z(p,t){const e=Math.min(Math.max(t,0),5);p.setAttribute("data-nesting-level",e.toString()),e>0?p.style.setProperty("--visual-indent",`${e*2}px`):(p.style.removeProperty("--visual-indent"),p.style.marginLeft="")}function et(p,t=0){p.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;Z(s,n),et(s,n)})}const mt={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class ft{constructor(t={}){this.observedElements=new Set,this.config={...mt,...t},this.config.enableAutoDetection&&this.setupAutoDetection()}setupAutoDetection(){this.observer=new MutationObserver(t=>{let e=!1;t.forEach(i=>{i.type==="childList"&&i.addedNodes.forEach(s=>{s instanceof HTMLElement&&(s.classList.contains("setting-group")?[s]:Array.from(s.querySelectorAll(".setting-group"))).length>0&&(e=!0)})}),e&&this.updateAllNesting()}),this.observer.observe(document.body,{childList:!0,subtree:!0})}trackElement(t){this.observedElements.add(t),this.updateElementNesting(t)}untrackElement(t){this.observedElements.delete(t)}updateElementNesting(t){const e=gt(t);this.applyNestingWithConfig(t,e)}updateAllNesting(){this.observedElements.forEach(t=>{t.isConnected?this.updateElementNesting(t):this.observedElements.delete(t)})}applyNestingWithConfig(t,e){const i=Math.min(Math.max(e,0),this.config.maxLevel);if(t.setAttribute("data-nesting-level",i.toString()),i>0){const s=i*this.config.visualIndentMultiplier;t.style.setProperty("--visual-indent",`${s}px`)}else t.style.removeProperty("--visual-indent"),t.style.marginLeft=""}recalculateNesting(t=document.body){t.querySelectorAll(".setting-group").forEach(i=>{const s=i;this.updateElementNesting(s),this.trackElement(s)})}getNestingStats(){const t={};return this.observedElements.forEach(e=>{const i=parseInt(e.getAttribute("data-nesting-level")||"0",10);t[i]=(t[i]||0)+1}),t}destroy(){this.observer&&(this.observer.disconnect(),this.observer=void 0),this.observedElements.clear()}}const ot=new ft;function X(p){if(p===null||typeof p!="object")return p;if(p instanceof Date)return new Date(p.getTime());if(p instanceof Array)return p.map(t=>X(t));if(typeof p=="object"){const t={};for(const e in p)Object.prototype.hasOwnProperty.call(p,e)&&(t[e]=X(p[e]));return t}return p}function vt(p){switch(p){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class S{constructor(t={}){this.props=t,this.dataPropsPath="",this.id=t.id||lt(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||"",this.includeGetJson=t.includeGetJson!==void 0?t.includeGetJson:!0}static SetUploadUrl(t){globalThis.DefaultUploadUrl=t,S.DefaultUploadUrl=t}static SetDefaultLanguage(t){globalThis.DefaultLanguage=t,S.DefaultLanguage=t}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setOnBlur(t){return this.onBlur=t,this}setDataPropsPath(t){this.dataPropsPath=t}getDataPropsPath(){return this.dataPropsPath}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}clone(){const t=this.constructor,e=X(this.props),i=new t(e);return i.value=X(this.value),i}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const a=document.createElement("div");if(a.className="icon-container",t.icon){const l=this.createIcon(t.icon,t.iconClassName);a.appendChild(l)}if(t.title){const l=this.createLabel(t.title,t.labelClassName);a.appendChild(l)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||vt(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",this.dataPropsPath&&s.setAttribute("data-test-id",this.dataPropsPath);const n=a=>{const l=a.target;let r=l.value;switch(t.inputType){case"number":r=Number(l.value);break;case"color":r=l.value;break;case"date":r=l.value;break;case"select":r=l.value;break;case"text":r=l.value;break;case"button":r=l.value;break;default:r=l.value}this.value=r,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)},o=a=>{a.target,this.onBlur&&this.onBlur(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),s.addEventListener("blur",o),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function j(p){return p instanceof S}function N(p){return p instanceof W}function it(p){return j(p)||N(p)}function q(p,t){for(const e in p)if(Object.prototype.hasOwnProperty.call(p,e)){const i=p[e];t(e,i)}}const K=class K{constructor(t){this.elementRef=null,this.isHidden=!1,this.custom=!1,this.initialValues={},this.changeTimeout=null,this.isHandlingChange=!1,this.changeHandlers=new Set,this.blurTimeout=null,this.lastChangeTime=0,this.handleBlur=()=>{},this.pendingBlurHandler=null,this.originalDefaultValues={},this.nestingLevel=0,this.dataPropsPath="",this.hide=!1,this.id=t.id||lt(),this.title=t.title,this.settings=t.settings,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.nestingLevel=0,this.includeGetJson=t.includeGetJson??!0,this.addItemCfg=t.addItem,this.deleteItemCfg=t.deleteItem,this.dataProps=t.dataProps,this.dataPropsPath=t.dataProps||"",this.hide=t.hide??!1,Object.assign(this,t.settings),this.initialValues=this.getValues(),this.originalDefaultValues=this.getDefaultValues(),this.propagateNestingLevel(),this.propagateDataPropsPath()}propagateNestingLevel(){const t=this.nestingLevel+1;q(this.settings,(e,i)=>{N(i)&&(i.nestingLevel=t,i.propagateNestingLevel())})}getNestingLevel(){return this.nestingLevel}setNestingLevel(t){this.nestingLevel=t,this.propagateNestingLevel(),this.elementRef&&this.updateNestingStyles()}getDataPropsPath(){return this.dataPropsPath}setDataPropsPath(t){this.dataPropsPath=t,this.propagateDataPropsPath()}propagateDataPropsPath(){q(this.settings,(t,e)=>{const i=String(t),s=this.dataPropsPath?`${this.dataPropsPath}_${i}`:i;(N(e)||j(e)&&typeof e.setDataPropsPath=="function")&&e.setDataPropsPath(s)})}updateNestingStyles(){this.elementRef&&(Z(this.elementRef,this.nestingLevel),et(this.elementRef,this.nestingLevel))}forceChildUIRefresh(){Object.entries(this.settings).forEach(([t,e])=>{try{if(N(e)){const i=e.getValues();e.setValue(i)}else if(typeof e.setValue=="function"){const i=e.value;i!==void 0&&e.setValue(i)}}catch(i){console.warn(`Error refreshing UI for setting ${t}:`,i)}})}removeSetting(t){var s;const e=this.settings[t];if(!e)return;if(delete this.settings[t],this.elementRef){const n=this.elementRef.querySelector(".setting-group-content");if(n){const o=Array.from(n.querySelectorAll(".setting-group, .setting"));for(const a of o){const l=a.id;if(l&&"id"in e&&typeof e.id=="string"&&l.includes(e.id)){a.remove();break}}}}typeof e.cleanup=="function"&&e.cleanup(),this.updateNestingStyles();const i=this.getValues();this.initialValues=i,(s=this.onChange)==null||s.call(this,i)}updateVisibility(){this.elementRef}clone(){const t={};q(this.settings,(s,n)=>{const o=String(s);typeof n.clone=="function"?t[o]=n.clone():(console.warn(`Setting with key '${o}' does not have a clone method. Copying reference.`),t[o]=n)});const e={title:this.title,settings:t,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,includeGetJson:this.includeGetJson,addItem:this.addItemCfg,deleteItem:this.deleteItemCfg,dataProps:this.dataProps},i=rt(e);return i.initialValues=this.getValues(),i}resetDefault(){const t=this.originalDefaultValues;this.setValue(t),this.onChange&&this.onChange(this.getValues())}setMobileValues(t){!t||typeof t!="object"||(Object.entries(t).forEach(([e,i])=>{const s=this.settings[e];s&&(N(s)||j(s))&&typeof s.setMobileValue=="function"&&s.setMobileValue(i)}),this.setValue(t),this.onChange&&this.onChange(this.getValues()))}getMobileValues(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(N(s))e[i]=s.getMobileValues();else{const n=s;e[i]=n.mobileValue!==void 0?n.mobileValue:n.value}}return e}else{const e=this.settings[t];if(!e)return;if(N(e))return e.getMobileValues();const i=e;return i.mobileValue!==void 0?i.mobileValue:i.value}}setOnChange(t){this.onChange=t;const e=()=>{this.isHandlingChange||(this.isHandlingChange=!0,this.changeTimeout&&clearTimeout(this.changeTimeout),this.changeTimeout=setTimeout(()=>{const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&(this.lastChangeTime=Date.now(),this.initialValues=i,t(i),this.updateVisibility()),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),q(this.settings,(i,s)=>{var n;if(N(s))s.setOnChange(()=>{const o=this.getValues();this.initialValues=o,t(o)}),this.changeHandlers.add(()=>t(this.getValues()));else if(j(s)){const o=()=>e();this.changeHandlers.add(o),s.setOnChange(o)}else{const o=()=>e();this.changeHandlers.add(o),(n=s.setOnChange)==null||n.call(s,o)}}),this}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}setValue(t){if(!t||typeof t!="object")return;Object.entries(t).forEach(([i,s])=>{let n=this.settings[i];if(!n&&this.addItemCfg&&i.startsWith(this.addItemCfg.keyPrefix)){const o=i.slice(this.addItemCfg.keyPrefix.length),a=Number(o);if(Number.isFinite(a)){const l=this.addItemCfg.createItem(a);it(l)&&(this.addSetting(i,l),n=l)}}n&&(N(n)||j(n))&&typeof n.setValue=="function"&&n.setValue(s)}),setTimeout(()=>{this.forceChildUIRefresh()},0);const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}wireChild(t){var i;const e=()=>{var n;const s=this.getValues();this.initialValues=s,(n=this.onChange)==null||n.call(this,s),this.updateVisibility()};N(t)?t.setOnChange(()=>e()):j(t)?t.setOnChange(()=>e()):(i=t.setOnChange)==null||i.call(t,()=>e())}addSetting(t,e){var s,n;if(this.settings[t]=e,this.wireChild(e),this.elementRef){const o=this.elementRef.querySelector(".setting-group-content");if(o){N(e)&&typeof e.setNestingLevel=="function"&&e.setNestingLevel(this.nestingLevel+1);const a=e.draw(),l=this.deleteItemCfg??this.addItemCfg;if(l){const h=l.keyPrefix??((s=this.addItemCfg)==null?void 0:s.keyPrefix);h&&t.startsWith(h)&&this.addDeleteButtonToElement(a,t)}const r=o.querySelector(".sg-add-button-bottom");r?o.insertBefore(a,r):o.appendChild(a),ot.trackElement(a),Z(a,this.nestingLevel+1),et(a,this.nestingLevel+1);const c=a.style.display;a.style.display="none",a.offsetHeight,a.style.display=c,this.updateNestingStyles()}}const i=this.getValues();this.initialValues=i,(n=this.onChange)==null||n.call(this,i)}addDeleteButtonToElement(t,e,i){let s=null;try{s=t.querySelector(":scope > .setting-group-title")}catch{s=null}if(!s){const r=Array.from(t.querySelectorAll(".setting-group-title"));for(const c of r)if(c.closest(".setting-group")===t){s=c;break}s||(s=r[0]??null)}if(!s)return;const n=s.querySelector(".actions-section");if(!n)return;const o=document.createElement("button");o.type="button",o.className="sg-delete-button",i?i.deleteItemCfg:this.deleteItemCfg??this.addItemCfg,o.title="Delete",o.style.cssText=`
       background: none;
       border: none;
       cursor: pointer;
@@ -70,7 +70,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",h=>{h.target===e&&(r(),t(!1))});const c=h=>{h.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",c))};document.addEventListener("keydown",c),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=Object.keys(this.settings).filter(i=>i.startsWith(t)).map(i=>{const s=Number(i.slice(t.length));return Number.isFinite(s)?s:-1}).filter(i=>i>=0);return e.length?Math.max(...e)+1:0}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(N(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(N(e))return e.getValues();const i=e;return i.getValue?i.getValue():i.value}}getValuesForJson(t){if(t===void 0){if(this.includeGetJson===!1)return null;const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(N(s)){const n=s.getValuesForJson();n!==null&&(e[i]=n)}else{const n=s;n.includeGetJson!==!1&&(e[i]=n.value)}}return e}else{const e=this.settings[t];if(!e)return;if(N(e))return e.includeGetJson===!1?null:e.getValuesForJson();{const i=e;return i.includeGetJson===!1?null:i.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(N(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(N(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}`,K.hiddenElements.add(t),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),Z(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",h=>{h.target===e&&(r(),t(!1))});const c=h=>{h.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",c))};document.addEventListener("keydown",c),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=Object.keys(this.settings).filter(i=>i.startsWith(t)).map(i=>{const s=Number(i.slice(t.length));return Number.isFinite(s)?s:-1}).filter(i=>i>=0);return e.length?Math.max(...e)+1:0}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(N(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(N(e))return e.getValues();const i=e;return i.getValue?i.getValue():i.value}}getValuesForJson(t){if(t===void 0){if(this.includeGetJson===!1)return null;const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(N(s)){const n=s.getValuesForJson();n!==null&&(e[i]=n)}else{const n=s;n.includeGetJson!==!1&&(e[i]=n.value)}}return this.hide&&(e.hide=!0),e}else{const e=this.settings[t];if(!e)return;if(N(e))return e.includeGetJson===!1?null:e.getValuesForJson();{const i=e;return i.includeGetJson===!1?null:i.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(N(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(N(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}`,K.hiddenElements.add(t),this.hide&&(t.style.display="none"),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),Z(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>

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

@@ -252,7 +252,7 @@ function q(p, t) {
 const Y = class Y {
   constructor(t) {
     this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastChangeTime = 0, this.handleBlur = () => {
-    }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.id = t.id || ot(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.nestingLevel = 0, this.includeGetJson = t.includeGetJson ?? !0, this.addItemCfg = t.addItem, this.deleteItemCfg = t.deleteItem, this.dataProps = t.dataProps, this.dataPropsPath = t.dataProps || "", Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
+    }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.hide = !1, this.id = t.id || ot(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.nestingLevel = 0, this.includeGetJson = t.includeGetJson ?? !0, this.addItemCfg = t.addItem, this.deleteItemCfg = t.deleteItem, this.dataProps = t.dataProps, this.dataPropsPath = t.dataProps || "", this.hide = t.hide ?? !1, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
   }
   propagateNestingLevel() {
     const t = this.nestingLevel + 1;
@@ -667,7 +667,7 @@ const Y = class Y {
             n.includeGetJson !== !1 && (e[i] = n.value);
           }
         }
-      return e;
+      return this.hide && (e.hide = !0), e;
     } else {
       const e = this.settings[t];
       if (!e) return;
@@ -703,7 +703,7 @@ const Y = class Y {
   }
   draw() {
     const t = document.createElement("div");
-    t.className = "setting-group", t.id = `setting-group-${this.id}`, Y.hiddenElements.add(t), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), Z(t, this.nestingLevel);
+    t.className = "setting-group", t.id = `setting-group-${this.id}`, Y.hiddenElements.add(t), this.hide && (t.style.display = "none"), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), Z(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",
@@ -1217,7 +1217,7 @@ const Ct = `
   <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="1.5" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;
-class Et extends G {
+class yt extends G {
   constructor(t = {}) {
     const e = {
       title: "Opacity",
@@ -1238,7 +1238,7 @@ class Et extends G {
     this.mobileValue = t, t !== void 0 && this.setValue(t);
   }
 }
-const yt = `
+const Et = `
   <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>
@@ -1287,7 +1287,7 @@ class et extends I {
       a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
     }), document.body.appendChild(i);
     const s = document.createElement("div");
-    return s.classList.add("svg-container"), s.innerHTML = yt, 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 = Et, 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");
@@ -2261,23 +2261,23 @@ function nt(p) {
         }
         for (let u = 0; u < d.length; u++) {
           const g = d[u];
-          let C = "", m = 0, E = 100;
+          let C = "", m = 0, y = 100;
           const f = g.match(
             /rgba?\(([^)]+)\)(?:\s*(\d+(?:\.\d+)?)%)?/
           );
           if (f) {
-            const y = f[1].split(",").map((b) => b.trim()), V = parseInt(y[0]), A = parseInt(y[1]), B = parseInt(y[2]), L = y[3] ? parseFloat(y[3]) : 1;
-            C = `#${V.toString(16).padStart(2, "0")}${A.toString(16).padStart(2, "0")}${B.toString(16).padStart(2, "0")}`, E = Math.round(L * 100), f[2] ? m = parseFloat(f[2]) : m = d.length === 1 ? 0 : Math.round(u / (d.length - 1) * 100);
+            const E = f[1].split(",").map((b) => b.trim()), V = parseInt(E[0]), A = parseInt(E[1]), B = parseInt(E[2]), L = E[3] ? parseFloat(E[3]) : 1;
+            C = `#${V.toString(16).padStart(2, "0")}${A.toString(16).padStart(2, "0")}${B.toString(16).padStart(2, "0")}`, y = Math.round(L * 100), f[2] ? m = parseFloat(f[2]) : m = d.length === 1 ? 0 : Math.round(u / (d.length - 1) * 100);
           } else {
-            const y = g.match(
+            const E = g.match(
               /#([a-fA-F0-9]{3,8})(?:\s*(\d+(?:\.\d+)?)%)?/
             );
-            y && (C = `#${y[1]}`, y[2] ? m = parseFloat(y[2]) : m = d.length === 1 ? 0 : Math.round(u / (d.length - 1) * 100));
+            E && (C = `#${E[1]}`, E[2] ? m = parseFloat(E[2]) : m = d.length === 1 ? 0 : Math.round(u / (d.length - 1) * 100));
           }
           C && h.push({
             color: C,
             position: m,
-            opacity: E
+            opacity: y
           });
         }
         if (h.length === 0) {
@@ -2285,14 +2285,14 @@ function nt(p) {
             /(#[a-fA-F0-9]{3,8}|rgba?\([^)]+\))/g
           );
           u && u.forEach((g, C) => {
-            let m = "", E = 100;
+            let m = "", y = 100;
             if (g.startsWith("#"))
               m = g;
             else {
               const f = g.match(/rgba?\(([^)]+)\)/);
               if (f) {
-                const y = f[1].split(",").map((b) => b.trim()), V = parseInt(y[0]), A = parseInt(y[1]), B = parseInt(y[2]), L = y[3] ? parseFloat(y[3]) : 1;
-                m = `#${V.toString(16).padStart(2, "0")}${A.toString(16).padStart(2, "0")}${B.toString(16).padStart(2, "0")}`, E = Math.round(L * 100);
+                const E = f[1].split(",").map((b) => b.trim()), V = parseInt(E[0]), A = parseInt(E[1]), B = parseInt(E[2]), L = E[3] ? parseFloat(E[3]) : 1;
+                m = `#${V.toString(16).padStart(2, "0")}${A.toString(16).padStart(2, "0")}${B.toString(16).padStart(2, "0")}`, y = Math.round(L * 100);
               }
             }
             if (m) {
@@ -2300,7 +2300,7 @@ function nt(p) {
               h.push({
                 color: m,
                 position: f,
-                opacity: E
+                opacity: y
               });
             }
           });
@@ -2359,14 +2359,14 @@ class Pt {
     C.value = "hex", C.textContent = "HEX";
     const m = document.createElement("option");
     m.value = "rgb", m.textContent = "RGB";
-    const E = document.createElement("option");
-    E.value = "hsl", E.textContent = "HSL", g.appendChild(C), g.appendChild(m), g.appendChild(E);
+    const y = document.createElement("option");
+    y.value = "hsl", y.textContent = "HSL", g.appendChild(C), g.appendChild(m), g.appendChild(y);
     const f = document.createElement("input");
     f.type = "text", f.className = "color-picker-color-input", f.value = this.currentColor, this.hexInput = f;
-    const y = document.createElement("div");
-    y.className = "color-picker-input-container";
+    const E = document.createElement("div");
+    E.className = "color-picker-input-container";
     const V = document.createElement("button");
-    return V.className = "color-picker-copy-inside", V.textContent = "Copy", V.addEventListener("click", () => this.copyToClipboard()), y.appendChild(f), y.appendChild(V), u.appendChild(g), u.appendChild(y), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(h), t.appendChild(u), this.setupEyedropper(l), this.setupEventListeners(), t.addEventListener("click", (A) => {
+    return V.className = "color-picker-copy-inside", V.textContent = "Copy", V.addEventListener("click", () => this.copyToClipboard()), E.appendChild(f), E.appendChild(V), u.appendChild(g), u.appendChild(E), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(h), t.appendChild(u), this.setupEyedropper(l), this.setupEventListeners(), t.addEventListener("click", (A) => {
       A.stopPropagation();
     }), t;
   }
@@ -2564,8 +2564,8 @@ class Pt {
       h.preventDefault(), h.stopPropagation();
       const d = h.clientX - s, u = h.clientY - n;
       let g = o + d, C = a + u;
-      const m = window.innerWidth, E = window.innerHeight, f = e.offsetWidth, y = e.offsetHeight;
-      g = Math.max(8, Math.min(m - f - 8, g)), C = Math.max(8, Math.min(E - y - 8, C)), e.style.left = `${g}px`, e.style.top = `${C}px`;
+      const m = window.innerWidth, y = window.innerHeight, f = e.offsetWidth, E = e.offsetHeight;
+      g = Math.max(8, Math.min(m - f - 8, g)), C = Math.max(8, Math.min(y - E - 8, C)), e.style.left = `${g}px`, e.style.top = `${C}px`;
     }, c = (h) => {
       i && (i = !1, h.preventDefault(), h.stopPropagation(), e.classList.remove("dragging"), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", c), document.body.style.userSelect = "");
     };
@@ -2902,14 +2902,14 @@ class se extends I {
     C.value = "hex", C.textContent = "HEX";
     const m = document.createElement("option");
     m.value = "rgb", m.textContent = "RGB";
-    const E = document.createElement("option");
-    E.value = "hsl", E.textContent = "HSL", g.appendChild(C), g.appendChild(m), g.appendChild(E);
+    const y = document.createElement("option");
+    y.value = "hsl", y.textContent = "HSL", g.appendChild(C), g.appendChild(m), g.appendChild(y);
     const f = document.createElement("input");
     f.type = "text", f.className = "color-picker-color-input", f.value = t;
-    const y = document.createElement("div");
-    y.className = "color-picker-input-container";
+    const E = document.createElement("div");
+    E.className = "color-picker-input-container";
     const V = document.createElement("button");
-    return V.className = "color-picker-copy-inside", V.textContent = "Copy", y.appendChild(f), y.appendChild(V), u.appendChild(g), u.appendChild(y), s.appendChild(n), s.appendChild(a), s.appendChild(h), s.appendChild(u), this.setupEmbeddedColorPicker(
+    return V.className = "color-picker-copy-inside", V.textContent = "Copy", E.appendChild(f), E.appendChild(V), u.appendChild(g), u.appendChild(E), s.appendChild(n), s.appendChild(a), s.appendChild(h), s.appendChild(u), this.setupEmbeddedColorPicker(
       n,
       o,
       r,
@@ -2958,10 +2958,10 @@ class se extends I {
     C.value = "hsl", C.textContent = "HSL", d.appendChild(u), d.appendChild(g), d.appendChild(C);
     const m = document.createElement("input");
     m.type = "text", m.className = "color-picker-color-input", m.value = t;
-    const E = document.createElement("div");
-    E.className = "color-picker-input-container";
+    const y = document.createElement("div");
+    y.className = "color-picker-input-container";
     const f = document.createElement("button");
-    return f.className = "color-picker-copy-inside", f.textContent = "Copy", E.appendChild(m), E.appendChild(f), h.appendChild(d), h.appendChild(E), s.appendChild(n), s.appendChild(a), s.appendChild(h), this.setupEmbeddedColorPicker(
+    return f.className = "color-picker-copy-inside", f.textContent = "Copy", y.appendChild(m), y.appendChild(f), h.appendChild(d), h.appendChild(y), s.appendChild(n), s.appendChild(a), s.appendChild(h), this.setupEmbeddedColorPicker(
       n,
       o,
       r,
@@ -2980,7 +2980,7 @@ class se extends I {
     const { h: u, s: g, v: C } = this.hexToHsv(r);
     let m = c;
     s.style.left = `${u / 360 * 100}%`, e.style.left = `${g * 100}%`, e.style.top = `${(1 - C) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${u}, 100%, 50%))`;
-    const E = (v, w = m) => {
+    const y = (v, w = m) => {
       d = v, m = Math.round(w), f(), h(v, m);
     }, f = () => {
       const v = n.value, { h: w, s: x, v: k } = this.hexToHsv(d);
@@ -2999,15 +2999,15 @@ class se extends I {
           )}%, ${Math.round(K * 100)}%)`;
           break;
       }
-    }, y = () => parseFloat(s.style.left || "0%") / 100 * 360, V = (v, w) => {
-      const x = y(), k = this.hsvToHex(x, v, w);
-      E(k, m);
+    }, E = () => parseFloat(s.style.left || "0%") / 100 * 360, V = (v, w) => {
+      const x = E(), k = this.hsvToHex(x, v, w);
+      y(k, m);
     }, A = (v) => {
       v = Math.max(0.1, Math.min(358.9, v));
       const w = parseFloat(e.style.left || "50%") / 100, x = parseFloat(e.style.top || "50%") / 100;
       t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${v}, 100%, 50%))`;
       const k = w, T = 1 - x, $ = this.hsvToHex(v, k, T);
-      E($, m);
+      y($, m);
     }, B = (v) => {
       v.stopPropagation();
       const w = t.getBoundingClientRect(), x = Math.max(0, Math.min(1, (v.clientX - w.left) / w.width)), k = Math.max(0, Math.min(1, (v.clientY - w.top) / w.height));
@@ -3054,7 +3054,7 @@ class se extends I {
       }
       if (k) {
         const { h: T, s: $, v: W } = this.hexToHsv(k);
-        s.style.left = `${T / 360 * 100}%`, e.style.left = `${$ * 100}%`, e.style.top = `${(1 - W) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${T}, 100%, 50%))`, E(k, m);
+        s.style.left = `${T / 360 * 100}%`, e.style.left = `${$ * 100}%`, e.style.top = `${(1 - W) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${T}, 100%, 50%))`, y(k, m);
       }
     }, O = (v) => {
       f();
@@ -3070,7 +3070,7 @@ class se extends I {
       if ("EyeDropper" in window)
         try {
           const x = (await new window.EyeDropper().open()).sRGBHex, { h: k, s: T, v: $ } = this.hexToHsv(x);
-          s.style.left = `${k / 360 * 100}%`, e.style.left = `${T * 100}%`, e.style.top = `${(1 - $) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${k}, 100%, 50%))`, E(x, m);
+          s.style.left = `${k / 360 * 100}%`, e.style.left = `${T * 100}%`, e.style.top = `${(1 - $) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${k}, 100%, 50%))`, y(x, m);
         } catch (v) {
           console.log("User cancelled eyedropper or error occurred:", v);
         }
@@ -3137,22 +3137,22 @@ class se extends I {
 <path d="M14.1333 12.4667H0.8M0.8 12.4667L4.13333 9.13332M0.8 12.4667L4.13333 15.8M0.8 4.13332H14.1333M14.1333 4.13332L10.8 0.799988M14.1333 4.13332L10.8 7.46665" stroke="#919EAB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
 `, l.title = "Flip gradient", i.addEventListener("change", (m) => {
-      const E = m.target.value;
-      this.switchType(E === "radial" ? "radial" : "linear");
+      const y = m.target.value;
+      this.switchType(y === "radial" ? "radial" : "linear");
     }), o.addEventListener("input", (m) => {
-      const E = m.target.value, f = parseInt(E);
+      const y = m.target.value, f = parseInt(y);
       if (this.value && !isNaN(f)) {
-        const y = Math.max(0, Math.min(360, f));
-        this.value.angle = y, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+        const E = Math.max(0, Math.min(360, f));
+        this.value.angle = E, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
       }
     }), o.addEventListener("focus", (m) => {
-      const E = m.target;
-      E.value = E.value.replace(/[^0-9-]/g, ""), setTimeout(() => E.select(), 0);
+      const y = m.target;
+      y.value = y.value.replace(/[^0-9-]/g, ""), setTimeout(() => y.select(), 0);
     }), o.addEventListener("blur", (m) => {
-      var y;
-      const E = m.target;
-      let f = parseInt(E.value);
-      isNaN(f) && (f = ((y = this.value) == null ? void 0 : y.angle) ?? 0), f = Math.max(0, Math.min(360, f)), this.value && (this.value.angle = f), E.value = `${f}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
+      var E;
+      const y = m.target;
+      let f = parseInt(y.value);
+      isNaN(f) && (f = ((E = this.value) == null ? void 0 : E.angle) ?? 0), f = Math.max(0, Math.min(360, f)), this.value && (this.value.angle = f), y.value = `${f}°`, this.updateGradientPreview(), this.updateUI(), this.triggerChange();
     }), l.addEventListener("click", () => {
       this.value && (this.value.stops = this.value.stops.map((m) => ({
         ...m,
@@ -3198,8 +3198,8 @@ class se extends I {
         passive: !1
       }), document.addEventListener("touchend", h), d.preventDefault();
     }, c = (d) => {
-      var E, f;
-      if (!s || !((f = (E = this.value) == null ? void 0 : E.stops) != null && f[i])) return;
+      var y, f;
+      if (!s || !((f = (y = this.value) == null ? void 0 : y.stops) != null && f[i])) return;
       const u = e.getBoundingClientRect(), C = (l(d) - n) / u.width * 100;
       let m = o + C;
       m = Math.max(0, Math.min(100, m)), this.value.stops[i].position = Math.round(m), t.style.left = `${m}%`, a && cancelAnimationFrame(a), a = requestAnimationFrame(() => {
@@ -3346,14 +3346,14 @@ class se extends I {
       C.className = "gstop-opacity-row";
       const m = document.createElement("span");
       m.className = "gstop-opacity-label", m.textContent = "Opacity";
-      const E = document.createElement("div");
-      E.className = "gstop-opacity-group";
+      const y = document.createElement("div");
+      y.className = "gstop-opacity-group";
       const f = document.createElement("input");
       f.type = "range", f.className = "gstop-opacity-slider", f.min = "0", f.max = "100", f.value = (s.opacity !== void 0 ? s.opacity : 100).toString();
-      const y = this.hexToRgb(s.color);
+      const E = this.hexToRgb(s.color);
       f.style.setProperty(
         "--slider-color",
-        `rgb(${y.r}, ${y.g}, ${y.b})`
+        `rgb(${E.r}, ${E.g}, ${E.b})`
       );
       const V = document.createElement("span");
       V.className = "gstop-opacity-value", V.textContent = `${s.opacity !== void 0 ? s.opacity : 100}%`;
@@ -3864,7 +3864,7 @@ class le extends z {
           ...t == null ? void 0 : t.uploadProps,
           default: (t == null ? void 0 : t.backgroundImage) ?? ""
         }),
-        opacity: new Et({
+        opacity: new yt({
           default: (t == null ? void 0 : t.opacity) ?? 100
         }),
         backgroundColor: new U({
@@ -3912,7 +3912,7 @@ export {
   te as MarginTopSetting,
   ee as MultiLanguageSetting,
   G as NumberSetting,
-  Et as OpacitySetting,
+  yt as OpacitySetting,
   Xt as SelectApiSettings,
   et as SelectSetting,
   I as Setting,

package/package.json

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