builder-settings-types 0.0.223 → 0.0.224

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let O=(h=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(h|=0));for(;h--;)t+=F[e[h]&63];return t};function k(h){if(h===null||typeof h!="object")return h;if(h instanceof Date)return new Date(h.getTime());if(Array.isArray(h)){const i=[];for(let s=0;s<h.length;s++)i[s]=k(h[s]);return i}const t={};for(const i in h)Object.prototype.hasOwnProperty.call(h,i)&&(t[i]=k(h[i]));const e=Object.getPrototypeOf(h);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function G(h){switch(h){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 g{constructor(t={}){this.props=t,this.id=t.id||O(),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){window.DefaultUploadUrl=t,g.DefaultUploadUrl=t}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setOnBlur(t){return this.onBlur=t,this}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=k(this.props),i=new t(e);return i.value=k(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 o=document.createElement("div");if(o.className="icon-container",t.icon){const l=this.createIcon(t.icon,t.iconClassName);o.appendChild(l)}if(t.title){const l=this.createLabel(t.title,t.labelClassName);o.appendChild(l)}e.appendChild(o)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||G(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=o=>{const l=o.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)},a=o=>{o.target,this.onBlur&&this.onBlur(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),s.addEventListener("blur",a),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(h){let t=0,e=h.parentElement;for(;e;)e.classList.contains("setting-group")&&e!==h&&t++,e=e.parentElement;return t}function L(h,t){const e=Math.min(Math.max(t,0),5);h.setAttribute("data-nesting-level",e.toString()),e>0?h.style.setProperty("--visual-indent",`${e*2}px`):(h.style.removeProperty("--visual-indent"),h.style.marginLeft="")}function I(h,t=0){h.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;L(s,n),I(s,n)})}const z={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class P{constructor(t={}){this.observedElements=new Set,this.config={...z,...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=j(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 N=new P;function b(h,t){for(const e in h)if(Object.prototype.hasOwnProperty.call(h,e)){const i=h[e];t(e,i)}}const p=class p{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.parentNestingLevel=0,this.id=t.id||O(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,this.parentNestingLevel=t.parentNestingLevel??0,this.nestingLevel=this.parentNestingLevel,this.includeGetJson=t.includeGetJson??!0,this.addItemCfg=t.addItem,this.deleteItemCfg=t.deleteItem,Object.assign(this,t.settings),this.initialValues=this.getValues(),this.originalDefaultValues=this.getDefaultValues(),this.propagateNestingLevel()}propagateNestingLevel(){const t=this.nestingLevel+1;b(this.settings,(e,i)=>{i instanceof p&&(i.parentNestingLevel=this.nestingLevel,i.nestingLevel=t,i.propagateNestingLevel())})}getNestingLevel(){return this.nestingLevel}setNestingLevel(t){this.nestingLevel=t,this.propagateNestingLevel(),this.elementRef&&this.updateNestingStyles()}updateNestingStyles(){this.elementRef&&(L(this.elementRef,this.nestingLevel),I(this.elementRef,this.nestingLevel))}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}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(),b(this.settings,(i,s)=>{var n;if(s instanceof p)s.setOnChange(()=>{const a=this.getValues();this.initialValues=a,t(a)}),this.changeHandlers.add(()=>t(this.getValues()));else if(s instanceof g){const a=()=>e();this.changeHandlers.add(a),s.setOnChange(a)}else{const a=()=>e();this.changeHandlers.add(a),(n=s.setOnChange)==null||n.call(s,a)}}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>t(),100))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&(this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef.addEventListener("focusout",this.handleBlur,!0)),b(this.settings,(t,e)=>{e instanceof p&&e.setOnBlur(()=>{this.onBlur&&this.onBlur()})})}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()}clone(){const t={};b(this.settings,(s,n)=>{typeof n.clone=="function"?t[s]=n.clone():(console.warn(`Setting with key '${s}' does not have a clone method. Copying reference.`),t[s]=n)});const e={title:this.title,settings:t,description:this.description,icon:this.icon,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,hideCondition:this.hideCondition,parentNestingLevel:this.parentNestingLevel,includeGetJson:this.includeGetJson,addItem:this.addItemCfg,deleteItem:this.deleteItemCfg},i=T(e);return i.initialValues=this.getValues(),i}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 a=i.slice(this.addItemCfg.keyPrefix.length),o=Number(a);if(Number.isFinite(o)){const l=this.addItemCfg.createItem(o);this.addSetting(i,l),n=l}}n&&(n instanceof p||n instanceof g)&&typeof n.setValue=="function"&&n.setValue(s)}),setTimeout(()=>{this.forceChildUIRefresh()},0);const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}forceChildUIRefresh(){Object.entries(this.settings).forEach(([t,e])=>{try{if(e instanceof p){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)}})}wireChild(t){var i,s,n;const e=()=>{var o;const a=this.getValues();this.initialValues=a,(o=this.onChange)==null||o.call(this,a),this.updateVisibility()};t instanceof p?(t.setOnChange(()=>e()),(i=t.setOnBlur)==null||i.call(t,()=>{var a;return(a=this.onBlur)==null?void 0:a.call(this)})):t instanceof g?(t.setOnChange(()=>e()),(s=t.setOnBlur)==null||s.call(t,()=>{var a;return(a=this.onBlur)==null?void 0:a.call(this)})):(n=t.setOnChange)==null||n.call(t,()=>e())}addSetting(t,e){var s,n;if(this.settings[t]=e,this.wireChild(e),this.elementRef){const a=this.elementRef.querySelector(".setting-group-content");if(a){e instanceof p&&e.setNestingLevel(this.nestingLevel+1);const o=e.draw(),l=this.deleteItemCfg??this.addItemCfg;if(l&&l.showDeleteButton!==!1){const c=l.keyPrefix??((s=this.addItemCfg)==null?void 0:s.keyPrefix);c&&t.startsWith(c)&&this.addDeleteButtonToElement(o,t)}const r=a.querySelector(".sg-add-button-bottom");r?a.insertBefore(o,r):a.appendChild(o),N.trackElement(o),L(o,this.nestingLevel+1),I(o,this.nestingLevel+1);const d=o.style.display;o.style.display="none",o.offsetHeight,o.style.display=d,this.updateNestingStyles()}}const i=this.getValues();this.initialValues=i,(n=this.onChange)==null||n.call(this,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 a=Array.from(n.querySelectorAll(".setting-group, .setting"));for(const o of a){const l=o.id;if(l&&l.includes(e.id)){o.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)}addDeleteButtonToElement(t,e){let i=null;try{i=t.querySelector(":scope > .setting-group-title")}catch{i=null}if(!i){const r=Array.from(t.querySelectorAll(".setting-group-title"));for(const d of r)if(d.closest(".setting-group")===t){i=d;break}i||(i=r[0]??null)}if(!i)return;const s=i.querySelector(".actions-section");if(!s)return;const n=document.createElement("button");n.type="button",n.className="sg-delete-button";const a=this.deleteItemCfg??this.addItemCfg;n.title=(a==null?void 0:a.deleteButtonLabel)||"Delete",n.style.cssText=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let O=(h=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(h|=0));for(;h--;)t+=F[e[h]&63];return t};function k(h){if(h===null||typeof h!="object")return h;if(h instanceof Date)return new Date(h.getTime());if(Array.isArray(h)){const i=[];for(let s=0;s<h.length;s++)i[s]=k(h[s]);return i}const t={};for(const i in h)Object.prototype.hasOwnProperty.call(h,i)&&(t[i]=k(h[i]));const e=Object.getPrototypeOf(h);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function G(h){switch(h){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 g{constructor(t={}){this.props=t,this.id=t.id||O(),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){window.DefaultUploadUrl=t,g.DefaultUploadUrl=t}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setOnBlur(t){return this.onBlur=t,this}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=k(this.props),i=new t(e);return i.value=k(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 o=document.createElement("div");if(o.className="icon-container",t.icon){const l=this.createIcon(t.icon,t.iconClassName);o.appendChild(l)}if(t.title){const l=this.createLabel(t.title,t.labelClassName);o.appendChild(l)}e.appendChild(o)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||G(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=o=>{const l=o.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)},a=o=>{o.target,this.onBlur&&this.onBlur(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),s.addEventListener("blur",a),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(h){let t=0,e=h.parentElement;for(;e;)e.classList.contains("setting-group")&&e!==h&&t++,e=e.parentElement;return t}function L(h,t){const e=Math.min(Math.max(t,0),5);h.setAttribute("data-nesting-level",e.toString()),e>0?h.style.setProperty("--visual-indent",`${e*2}px`):(h.style.removeProperty("--visual-indent"),h.style.marginLeft="")}function I(h,t=0){h.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;L(s,n),I(s,n)})}const z={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class P{constructor(t={}){this.observedElements=new Set,this.config={...z,...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=j(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 N=new P;function b(h,t){for(const e in h)if(Object.prototype.hasOwnProperty.call(h,e)){const i=h[e];t(e,i)}}const p=class p{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.parentNestingLevel=0,this.id=t.id||O(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,this.parentNestingLevel=t.parentNestingLevel??0,this.nestingLevel=this.parentNestingLevel,this.includeGetJson=t.includeGetJson??!0,this.addItemCfg=t.addItem,this.deleteItemCfg=t.deleteItem,Object.assign(this,t.settings),this.initialValues=this.getValues(),this.originalDefaultValues=this.getDefaultValues(),this.propagateNestingLevel()}propagateNestingLevel(){const t=this.nestingLevel+1;b(this.settings,(e,i)=>{i instanceof p&&(i.parentNestingLevel=this.nestingLevel,i.nestingLevel=t,i.propagateNestingLevel())})}getNestingLevel(){return this.nestingLevel}setNestingLevel(t){this.nestingLevel=t,this.propagateNestingLevel(),this.elementRef&&this.updateNestingStyles()}updateNestingStyles(){this.elementRef&&(L(this.elementRef,this.nestingLevel),I(this.elementRef,this.nestingLevel))}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}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(),b(this.settings,(i,s)=>{var n;if(s instanceof p)s.setOnChange(()=>{const a=this.getValues();this.initialValues=a,t(a)}),this.changeHandlers.add(()=>t(this.getValues()));else if(s instanceof g){const a=()=>e();this.changeHandlers.add(a),s.setOnChange(a)}else{const a=()=>e();this.changeHandlers.add(a),(n=s.setOnChange)==null||n.call(s,a)}}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>t(),100))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&(this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef.addEventListener("focusout",this.handleBlur,!0)),b(this.settings,(t,e)=>{e instanceof p&&e.setOnBlur(()=>{this.onBlur&&this.onBlur()})})}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()}clone(){const t={};b(this.settings,(s,n)=>{typeof n.clone=="function"?t[s]=n.clone():(console.warn(`Setting with key '${s}' does not have a clone method. Copying reference.`),t[s]=n)});const e={title:this.title,settings:t,description:this.description,icon:this.icon,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,hideCondition:this.hideCondition,parentNestingLevel:this.parentNestingLevel,includeGetJson:this.includeGetJson,addItem:this.addItemCfg,deleteItem:this.deleteItemCfg},i=T(e);return i.initialValues=this.getValues(),i}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 a=i.slice(this.addItemCfg.keyPrefix.length),o=Number(a);if(Number.isFinite(o)){const l=this.addItemCfg.createItem(o);this.addSetting(i,l),n=l}}n&&(n instanceof p||n instanceof g)&&typeof n.setValue=="function"&&n.setValue(s)}),setTimeout(()=>{this.forceChildUIRefresh()},0);const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}forceChildUIRefresh(){Object.entries(this.settings).forEach(([t,e])=>{try{if(e instanceof p){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)}})}wireChild(t){var i,s,n;const e=()=>{var o;const a=this.getValues();this.initialValues=a,(o=this.onChange)==null||o.call(this,a),this.updateVisibility()};t instanceof p?(t.setOnChange(()=>e()),(i=t.setOnBlur)==null||i.call(t,()=>{var a;return(a=this.onBlur)==null?void 0:a.call(this)})):t instanceof g?(t.setOnChange(()=>e()),(s=t.setOnBlur)==null||s.call(t,()=>{var a;return(a=this.onBlur)==null?void 0:a.call(this)})):(n=t.setOnChange)==null||n.call(t,()=>e())}addSetting(t,e){var s,n;if(this.settings[t]=e,this.wireChild(e),this.elementRef){const a=this.elementRef.querySelector(".setting-group-content");if(a){e instanceof p&&e.setNestingLevel(this.nestingLevel+1);const o=e.draw(),l=this.deleteItemCfg??this.addItemCfg;if(l&&l.showDeleteButton!==!1){const c=l.keyPrefix??((s=this.addItemCfg)==null?void 0:s.keyPrefix);c&&t.startsWith(c)&&this.addDeleteButtonToElement(o,t)}const r=a.querySelector(".sg-add-button-bottom");r?a.insertBefore(o,r):a.appendChild(o),N.trackElement(o),L(o,this.nestingLevel+1),I(o,this.nestingLevel+1);const d=o.style.display;o.style.display="none",o.offsetHeight,o.style.display=d,this.updateNestingStyles()}}const i=this.getValues();this.initialValues=i,(n=this.onChange)==null||n.call(this,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 a=Array.from(n.querySelectorAll(".setting-group, .setting"));for(const o of a){const l=o.id;if(l&&l.includes(e.id)){o.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)}addDeleteButtonToElement(t,e,i){let s=null;try{s=t.querySelector(":scope > .setting-group-title")}catch{s=null}if(!s){const d=Array.from(t.querySelectorAll(".setting-group-title"));for(const c of d)if(c.closest(".setting-group")===t){s=c;break}s||(s=d[0]??null)}if(!s)return;const n=s.querySelector(".actions-section");if(!n)return;const a=document.createElement("button");a.type="button",a.className="sg-delete-button";const o=i?i.deleteItemCfg:this.deleteItemCfg??this.addItemCfg;a.title=(o==null?void 0:o.deleteButtonLabel)||"Delete",a.style.cssText=`
       background: none;
       border: none;
       cursor: pointer;
@@ -10,12 +10,12 @@
       justify-content: center;
       border-radius: 4px;
       transition: background-color 0.2s;
-    `;const o=(a==null?void 0:a.deleteButtonIconSvg)||`
+    `;const l=(o==null?void 0:o.deleteButtonIconSvg)||`
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M2 4h12M5.333 4V2.667a1.333 1.333 0 0 1 1.334-1.334h2.666a1.333 1.333 0 0 1 1.334 1.334V4m2 0v9.333a1.333 1.333 0 0 1-1.334 1.334H4.667a1.333 1.333 0 0 1-1.334-1.334V4h8.667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
         <path d="M6.667 7.333v4M9.333 7.333v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-    `;n.innerHTML=o,n.addEventListener("mouseenter",()=>{n.style.backgroundColor="#fef2f2"}),n.addEventListener("mouseleave",()=>{n.style.backgroundColor="transparent"}),n.addEventListener("click",r=>{r.stopPropagation(),r.preventDefault(),this.showDeleteConfirmation().then(d=>{d&&this.removeSetting(e)})});const l=s.querySelector(".setting-group-arrow");l?s.insertBefore(n,l):s.appendChild(n)}showDeleteConfirmation(){return new Promise(t=>{const e=document.createElement("div");e.className="sg-modal-overlay",e.style.cssText=`
+    `;a.innerHTML=l,a.addEventListener("mouseenter",()=>{a.style.backgroundColor="#fef2f2"}),a.addEventListener("mouseleave",()=>{a.style.backgroundColor="transparent"}),a.addEventListener("click",d=>{d.stopPropagation(),d.preventDefault(),this.showDeleteConfirmation().then(c=>{c&&(i&&i.deleteItemCfg?this.removeSetting(e):this.removeSetting(e))})});const r=n.querySelector(".setting-group-arrow");r?n.insertBefore(a,r):n.appendChild(a)}showDeleteConfirmation(){return new Promise(t=>{const e=document.createElement("div");e.className="sg-modal-overlay",e.style.cssText=`
         position: fixed;
         top: 0;
         left: 0;
@@ -84,7 +84,7 @@
                 <path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
                   stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
-            `,m.title=this.description,n.insertBefore(m,a)}}else{if(!c){const m=document.createElement("div");m.className="setting-group-description",m.textContent=this.description,o.insertBefore(m,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=c=>{(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),l())},Object.keys(this.settings).length>0){for(const c in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,c)){const u=this.settings[c];u instanceof p&&u.setNestingLevel(this.nestingLevel+1);const m=u.draw();if(u instanceof p&&u.deleteItemCfg)this.addDeleteButtonToElement(m,c);else{const E=this.deleteItemCfg??this.addItemCfg;if(E&&E.showDeleteButton!==!1){const x=E.keyPrefix??((d=this.addItemCfg)==null?void 0:d.keyPrefix);x&&c.startsWith(x)&&this.addDeleteButtonToElement(m,c)}}o.appendChild(m)}}else{const c=document.createElement("div");c.className="setting-group-empty",c.textContent="No settings in this group",o.appendChild(c)}if(this.addItemCfg){const c=document.createElement("button");c.type="button",c.className="sg-add-button-bottom",c.style.marginTop="8px";const u=this.addItemCfg.buttonIconSvg??`
+            `,m.title=this.description,n.insertBefore(m,a)}}else{if(!c){const m=document.createElement("div");m.className="setting-group-description",m.textContent=this.description,o.insertBefore(m,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=c=>{(c.key==="Enter"||c.key===" ")&&(c.preventDefault(),l())},Object.keys(this.settings).length>0){for(const c in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,c)){const u=this.settings[c];u instanceof p&&u.setNestingLevel(this.nestingLevel+1);const m=u.draw();if(u instanceof p&&u.deleteItemCfg)this.addDeleteButtonToElement(m,c,u);else{const E=this.deleteItemCfg??this.addItemCfg;if(E&&E.showDeleteButton!==!1){const x=E.keyPrefix??((d=this.addItemCfg)==null?void 0:d.keyPrefix);x&&c.startsWith(x)&&this.addDeleteButtonToElement(m,c)}}o.appendChild(m)}}else{const c=document.createElement("div");c.className="setting-group-empty",c.textContent="No settings in this group",o.appendChild(c)}if(this.addItemCfg){const c=document.createElement("button");c.type="button",c.className="sg-add-button-bottom",c.style.marginTop="8px";const u=this.addItemCfg.buttonIconSvg??`
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
          xmlns="http://www.w3.org/2000/svg">
       <path d="M8 3.333v9.334M3.333 8h9.334" stroke="currentColor"

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

@@ -438,31 +438,31 @@ const p = class p {
     const i = this.getValues();
     this.initialValues = i, (s = this.onChange) == null || s.call(this, i);
   }
-  addDeleteButtonToElement(t, e) {
-    let i = null;
+  addDeleteButtonToElement(t, e, i) {
+    let s = null;
     try {
-      i = t.querySelector(":scope > .setting-group-title");
+      s = t.querySelector(":scope > .setting-group-title");
     } catch {
-      i = null;
+      s = null;
     }
-    if (!i) {
-      const r = Array.from(
+    if (!s) {
+      const d = Array.from(
         t.querySelectorAll(".setting-group-title")
       );
-      for (const d of r)
-        if (d.closest(".setting-group") === t) {
-          i = d;
+      for (const c of d)
+        if (c.closest(".setting-group") === t) {
+          s = c;
           break;
         }
-      i || (i = r[0] ?? null);
+      s || (s = d[0] ?? null);
     }
-    if (!i) return;
-    const s = i.querySelector(".actions-section");
     if (!s) return;
-    const n = document.createElement("button");
-    n.type = "button", n.className = "sg-delete-button";
-    const a = this.deleteItemCfg ?? this.addItemCfg;
-    n.title = (a == null ? void 0 : a.deleteButtonLabel) || "Delete", n.style.cssText = `
+    const n = s.querySelector(".actions-section");
+    if (!n) return;
+    const a = document.createElement("button");
+    a.type = "button", a.className = "sg-delete-button";
+    const o = i ? i.deleteItemCfg : this.deleteItemCfg ?? this.addItemCfg;
+    a.title = (o == null ? void 0 : o.deleteButtonLabel) || "Delete", a.style.cssText = `
       background: none;
       border: none;
       cursor: pointer;
@@ -475,23 +475,23 @@ const p = class p {
       border-radius: 4px;
       transition: background-color 0.2s;
     `;
-    const o = (a == null ? void 0 : a.deleteButtonIconSvg) || `
+    const l = (o == null ? void 0 : o.deleteButtonIconSvg) || `
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M2 4h12M5.333 4V2.667a1.333 1.333 0 0 1 1.334-1.334h2.666a1.333 1.333 0 0 1 1.334 1.334V4m2 0v9.333a1.333 1.333 0 0 1-1.334 1.334H4.667a1.333 1.333 0 0 1-1.334-1.334V4h8.667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
         <path d="M6.667 7.333v4M9.333 7.333v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     `;
-    n.innerHTML = o, n.addEventListener("mouseenter", () => {
-      n.style.backgroundColor = "#fef2f2";
-    }), n.addEventListener("mouseleave", () => {
-      n.style.backgroundColor = "transparent";
-    }), n.addEventListener("click", (r) => {
-      r.stopPropagation(), r.preventDefault(), this.showDeleteConfirmation().then((d) => {
-        d && this.removeSetting(e);
+    a.innerHTML = l, a.addEventListener("mouseenter", () => {
+      a.style.backgroundColor = "#fef2f2";
+    }), a.addEventListener("mouseleave", () => {
+      a.style.backgroundColor = "transparent";
+    }), a.addEventListener("click", (d) => {
+      d.stopPropagation(), d.preventDefault(), this.showDeleteConfirmation().then((c) => {
+        c && (i && i.deleteItemCfg ? this.removeSetting(e) : this.removeSetting(e));
       });
     });
-    const l = s.querySelector(".setting-group-arrow");
-    l ? s.insertBefore(n, l) : s.appendChild(n);
+    const r = n.querySelector(".setting-group-arrow");
+    r ? n.insertBefore(a, r) : n.appendChild(a);
   }
   showDeleteConfirmation() {
     return new Promise((t) => {
@@ -776,7 +776,11 @@ const p = class p {
           u instanceof p && u.setNestingLevel(this.nestingLevel + 1);
           const m = u.draw();
           if (u instanceof p && u.deleteItemCfg)
-            this.addDeleteButtonToElement(m, c);
+            this.addDeleteButtonToElement(
+              m,
+              c,
+              u
+            );
           else {
             const E = this.deleteItemCfg ?? this.addItemCfg;
             if (E && E.showDeleteButton !== !1) {

package/package.json

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