builder-settings-types 0.0.421 → 0.0.423

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

@@ -320,7 +320,7 @@
       font-size: 14px;
       font-weight: 500;
       cursor: pointer;
-    `;const h=()=>{a.style.opacity="0",setTimeout(()=>a.remove(),200)};c.addEventListener("click",h),a.addEventListener("click",u=>{u.target===a&&h()}),f.addEventListener("click",()=>{var u,p;e.rules.forEach(m=>{const d=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),g=this.addItemCfg.createItem(d,m);if(Hn(g)){const x=`${this.addItemCfg.keyPrefix}${d}`;this.addSetting(x,g)}}),(p=(u=this.addItemCfg)==null?void 0:u.excelImport)!=null&&p.onImport&&this.addItemCfg.excelImport.onImport(e.rules),h()}),l.appendChild(c),l.appendChild(f),n.appendChild(i),n.appendChild(s),n.appendChild(o),n.appendChild(l),a.appendChild(n),document.body.appendChild(a)}escapeHtml(e){const r=document.createElement("div");return r.textContent=e,r.innerHTML}getNextIndexFromPrefix(e){const r=new Set(Object.keys(this.settings).filter(n=>n.startsWith(e)).map(n=>{const i=Number(n.slice(e.length));return Number.isFinite(i)?i:-1}).filter(n=>n>=0));let a=0;for(;r.has(a);)a+=1;return a}calculateChanges(e,r){const a={};return new Set([...Object.keys(e),...Object.keys(r)]).forEach(i=>{const s=e[i],o=r[i];JSON.stringify(s)!==JSON.stringify(o)&&(a[i]={from:s,to:o})}),a}getValues(e){if(e===void 0){const r={$id:this.$id};for(const a in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,a)){const n=this.settings[a];if(He(n))r[a]=n.getValues();else{const i=n,s=i.getValue?i.getValue():i.value;r[a]=s}}return r}else{const r=this.settings[e];if(!r)return;if(He(r))return r.getValues();const a=r;return a.getValue?a.getValue():a.value}}getValuesForJson(e){var r;if(e===void 0){if(this.includeGetJson===!1)return null;const a={};for(const n in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,n)){const i=this.settings[n];if(He(i)){const s=i.getValuesForJson();s!==null&&(a[n]=s)}else{const s=i;if(s.includeGetJson!==!1)if(i instanceof na){const o=i.getRawValue();a[n]=o?Zt(o):null}else a[n]=s.value}}return(this.hide===!0||((r=this==null?void 0:this.groupProps)==null?void 0:r.hide)===!0)&&(a.hide=!0),a}else{const a=this.settings[e];if(!a)return;if(He(a))return a.includeGetJson===!1?null:a.getValuesForJson();{const n=a;if(n.includeGetJson===!1)return null;if(a instanceof na){const i=a.getRawValue();return i?Zt(i):null}return Zi(n.value)}}}getDefaultValues(e){if(e===void 0){const r={};for(const a in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,a)){const n=this.settings[a];if(He(n))r[a]=n.getDefaultValues();else{const i=n;r[a]=i.default!==void 0?i.default:i.value}}return r}else{const r=this.settings[e];if(!r)return;if(He(r))return r.getDefaultValues();const a=r;return a.default!==void 0?a.default:a.value}}draw(){var c;const e=document.createElement("div");e.className="setting-group",e.id=`setting-group-${this.id}`,e.setAttribute("data-setting-id",this.$id),li.hiddenElements.add(e),this.hide&&(e.style.display="none"),this.isMain&&e.classList.add("main-group"),this.custom&&e.classList.add("custom_class"),Vn(e,this.nestingLevel);const r=document.createElement("div");r.className="setting-group-title",this.isCollapsed&&r.classList.add("collapsed-view"),r.setAttribute("role","button"),r.setAttribute("aria-expanded",(!this.isCollapsed).toString()),r.setAttribute("tabindex","0");const a=document.createElement("div");a.className="title-section";const n=document.createElement("h3");n.textContent=this.title,a.appendChild(n);const i=document.createElement("div");i.className="actions-section";const s=document.createElement("div");s.className="setting-group-content",this.isCollapsed&&(s.classList.add("collapsed"),r.classList.add("collapsed-view"),e.classList.add("collapsed")),this.isMain&&s.classList.add("main-content");const o=()=>{this.isCollapsed=!this.isCollapsed,s.classList.toggle("collapsed"),r.classList.toggle("collapsed-view"),e.classList.toggle("collapsed",this.isCollapsed),r.setAttribute("aria-expanded",(!this.isCollapsed).toString())};if(r.onkeydown=f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),o())},Object.keys(this.settings).length>0){for(const f in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,f)){const h=this.settings[f];He(h)&&typeof h.setNestingLevel=="function"&&h.setNestingLevel(this.nestingLevel+1);const u=h.draw();He(h)&&h.deleteItemCfg&&this.addDeleteButtonToElement(u,f,h),s.appendChild(u)}}else{const f=document.createElement("div");f.className="setting-group-empty",f.textContent="No settings in this group",s.appendChild(f)}if(this.addItemCfg){const f=document.createElement("div");f.className="sg-buttons-container",f.style.cssText=`
+    `;const h=()=>{a.style.opacity="0",setTimeout(()=>a.remove(),200)};c.addEventListener("click",h),a.addEventListener("click",u=>{u.target===a&&h()}),f.addEventListener("click",()=>{var u,p;e.rules.forEach(m=>{const d=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),g=this.addItemCfg.createItem(d,m);if(Hn(g)){const x=`${this.addItemCfg.keyPrefix}${d}`;this.addSetting(x,g)}}),(p=(u=this.addItemCfg)==null?void 0:u.excelImport)!=null&&p.onImport&&this.addItemCfg.excelImport.onImport(e.rules),h()}),l.appendChild(c),l.appendChild(f),n.appendChild(i),n.appendChild(s),n.appendChild(o),n.appendChild(l),a.appendChild(n),document.body.appendChild(a)}escapeHtml(e){const r=document.createElement("div");return r.textContent=e,r.innerHTML}getNextIndexFromPrefix(e){const r=new Set(Object.keys(this.settings).filter(n=>n.startsWith(e)).map(n=>{const i=Number(n.slice(e.length));return Number.isFinite(i)?i:-1}).filter(n=>n>=0));let a=0;for(;r.has(a);)a+=1;return a}calculateChanges(e,r){const a={};return new Set([...Object.keys(e),...Object.keys(r)]).forEach(i=>{const s=e[i],o=r[i];JSON.stringify(s)!==JSON.stringify(o)&&(a[i]={from:s,to:o})}),a}getValues(e){if(e===void 0){const r={$id:this.$id,isRootNode:this.isRootNode};for(const a in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,a)){const n=this.settings[a];if(He(n))r[a]=n.getValues();else{const i=n,s=i.getValue?i.getValue():i.value;r[a]=s}}return r}else{const r=this.settings[e];if(!r)return;if(He(r))return r.getValues();const a=r;return a.getValue?a.getValue():a.value}}getValuesForJson(e){var r;if(e===void 0){if(this.includeGetJson===!1)return null;const a={};for(const n in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,n)){const i=this.settings[n];if(He(i)){const s=i.getValuesForJson();s!==null&&(a[n]=s)}else{const s=i;if(s.includeGetJson!==!1)if(i instanceof na){const o=i.getRawValue();a[n]=o?Zt(o):null}else a[n]=s.value}}return(this.hide===!0||((r=this==null?void 0:this.groupProps)==null?void 0:r.hide)===!0)&&(a.hide=!0),a}else{const a=this.settings[e];if(!a)return;if(He(a))return a.includeGetJson===!1?null:a.getValuesForJson();{const n=a;if(n.includeGetJson===!1)return null;if(a instanceof na){const i=a.getRawValue();return i?Zt(i):null}return Zi(n.value)}}}getDefaultValues(e){if(e===void 0){const r={};for(const a in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,a)){const n=this.settings[a];if(He(n))r[a]=n.getDefaultValues();else{const i=n;r[a]=i.default!==void 0?i.default:i.value}}return r}else{const r=this.settings[e];if(!r)return;if(He(r))return r.getDefaultValues();const a=r;return a.default!==void 0?a.default:a.value}}draw(){var c;const e=document.createElement("div");e.className="setting-group",e.id=`setting-group-${this.id}`,e.setAttribute("data-setting-id",this.$id),li.hiddenElements.add(e),this.hide&&(e.style.display="none"),this.isMain&&e.classList.add("main-group"),this.custom&&e.classList.add("custom_class"),Vn(e,this.nestingLevel);const r=document.createElement("div");r.className="setting-group-title",this.isCollapsed&&r.classList.add("collapsed-view"),r.setAttribute("role","button"),r.setAttribute("aria-expanded",(!this.isCollapsed).toString()),r.setAttribute("tabindex","0");const a=document.createElement("div");a.className="title-section";const n=document.createElement("h3");n.textContent=this.title,a.appendChild(n);const i=document.createElement("div");i.className="actions-section";const s=document.createElement("div");s.className="setting-group-content",this.isCollapsed&&(s.classList.add("collapsed"),r.classList.add("collapsed-view"),e.classList.add("collapsed")),this.isMain&&s.classList.add("main-content");const o=()=>{this.isCollapsed=!this.isCollapsed,s.classList.toggle("collapsed"),r.classList.toggle("collapsed-view"),e.classList.toggle("collapsed",this.isCollapsed),r.setAttribute("aria-expanded",(!this.isCollapsed).toString())};if(r.onkeydown=f=>{(f.key==="Enter"||f.key===" ")&&(f.preventDefault(),o())},Object.keys(this.settings).length>0){for(const f in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,f)){const h=this.settings[f];He(h)&&typeof h.setNestingLevel=="function"&&h.setNestingLevel(this.nestingLevel+1);const u=h.draw();He(h)&&h.deleteItemCfg&&this.addDeleteButtonToElement(u,f,h),s.appendChild(u)}}else{const f=document.createElement("div");f.className="setting-group-empty",f.textContent="No settings in this group",s.appendChild(f)}if(this.addItemCfg){const f=document.createElement("div");f.className="sg-buttons-container",f.style.cssText=`
         display: flex;
         flex-direction: column;
         gap: 8px;
@@ -563,14 +563,7 @@
   <svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" class="feather feather-chevron-down">
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
-`;class k3 extends Ae{constructor(e={}){if(super(e),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.selectedOptionIndex=null,e.default!==void 0&&(this.value=e.default),this.initializeOptions(e),!e.getOptionsAsync&&this.value!==void 0){const r=this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value));r!==-1&&(this.selectedOptionIndex=r)}e.onChange&&this.setOnChange(e.onChange),e.detectChange&&(this.detectChangeCallback=e.detectChange)}initializeOptions(e){this.hasInitializedOptions&&!e.getOptionsAsync||(this._options=[],e.options&&(this._options=[...e.options]),e.getOptions&&this._options.push(...e.getOptions()),e.getOptionsAsync?this.isLoading=!0:this.hasInitializedOptions=!0)}createOption(e,r){const a=document.createElement("li");a.classList.add("select-api-option"),a.dataset.index=String(r);const n=document.createElement("input");n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",this.selectedOptionIndex===r&&(n.checked=!0);const i=document.createElement("span");return i.classList.add("select-api-option-text"),i.textContent=e.name,a.appendChild(n),a.appendChild(i),a}draw(){const e=document.createElement("div");e.classList.add("select-api-container"),this.container=e;const r=document.createElement("div");if(r.classList.add("select-api-button"),this.getDataPropsPath()&&r.setAttribute("data-test-id",this.getDataPropsPath()),this.props.title){r.classList.add("has-label");const i=document.createElement("div");i.className="select-label",i.textContent=this.props.title,r.appendChild(i);const s=document.createElement("span");if(s.className="select-value",this.isLoading)s.textContent=this.props.loadingText||"Loading options...";else{const o=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,l=o&&typeof o.name=="string"?o.name:"Select an option";s.textContent=l}r.appendChild(s)}else{const i=document.createElement("span");if(this.isLoading)i.textContent=this.props.loadingText||"Loading options...";else{const s=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,o=s&&typeof s.name=="string"?s.name:"Select an option";i.textContent=o}r.appendChild(i)}r.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},e.appendChild(r),this.buttonEl=r;const a=document.createElement("ul");a.classList.add("select-api-options"),this._options.forEach((i,s)=>{const o=this.createOption(i,s);o.onclick=l=>this.selectApiOption(l,s,r),a.appendChild(o)}),e.appendChild(a);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=y3,e.appendChild(n),n.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},this.optionsListEl=a,this.svgContainer=n,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.hasInitializedOptions=!0,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})),e}getJson(e=!0){return JSON.stringify(e?{}:{value:this.value},null,2)}selectApiOption(e,r,a){var o,l,c;const n=e.target,i=n.querySelector(".select-api-radio")||((o=n.closest(".select-api-option"))==null?void 0:o.querySelector(".select-api-radio"));i&&(i.checked=!0);const s=this._options[r].value;this.setValue(s),this.isOpen=!1,(l=this.optionsListEl)==null||l.classList.remove("open"),(c=this.svgContainer)==null||c.classList.remove("open")}updateOptionsList(){!this.optionsListEl||!this.buttonEl||(this.optionsListEl.innerHTML="",this._options.forEach((e,r)=>{var n;const a=this.createOption(e,r);a.onclick=i=>{this.buttonEl&&this.selectApiOption(i,r,this.buttonEl)},(n=this.optionsListEl)==null||n.appendChild(a)}))}updateButtonText(e,r=!1){if(!this.buttonEl)return;const a=this.buttonEl.querySelector(".select-value")||this.buttonEl.firstChild;if(a)if(r)a.textContent=e||"Error",this.buttonEl.classList.add("error"),this.buttonEl.setAttribute("disabled","true"),this.optionsListEl&&this.optionsListEl.classList.remove("open"),this.svgContainer&&(this.svgContainer.style.display="none");else if(this.isLoading)a.textContent=this.props.loadingText||"Loading options...",this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="");else{const n=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,i=n&&typeof n.name=="string"?n.name:"Select an option";a.textContent=e||i,this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="")}}update(e=!1){var r;if(this.selectedOptionIndex=this.value!==void 0?this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value)):null,this.updateOptionsList(),this.updateButtonText(),e&&this.value!==void 0){(r=this.onChange)==null||r.call(this,this.value);const a=this.props.detectChange||this.detectChangeCallback;a==null||a(this.value)}}setDetectChange(e){this.detectChangeCallback=e,this.props.detectChange=e}setValue(e){super.setValue(e),this.selectedOptionIndex=this._options.findIndex(r=>JSON.stringify(r.value)===JSON.stringify(e)),this.updateButtonText(),this.updateOptionsList(),this.detectChangeCallback&&this.detectChangeCallback!==this.props.detectChange&&this.detectChangeCallback(e)}}class _3 extends Ae{constructor(e){var r,a;super(e),this.inputType="text",this.value=e.default??((a=(r=e.options)==null?void 0:r[0])==null?void 0:a.value)??"",this.detectChangeCallback=e.detectChange}draw(){var s,o;const e=document.createElement("div");e.className="toggle-setting-container",this.props.icon&&e.classList.add("toggle-with-icon");const r=document.createElement("div");if(r.className="toggle-label",this.props.icon){const l=document.createElement("span");l.className="toggle-icon",l.innerHTML=this.props.icon,r.appendChild(l)}if(this.props.title){const l=document.createElement("span");l.textContent=this.props.title,r.appendChild(l)}e.appendChild(r);const a=document.createElement("label");a.className="toggle-switch";const n=document.createElement("input");n.type="checkbox",n.checked=((o=(s=this.props.options)==null?void 0:s.find(l=>l.value===this.value))==null?void 0:o.status)??!1,this.getDataPropsPath()&&n.setAttribute("data-test-id",this.getDataPropsPath()),n.addEventListener("change",()=>{var c,f;const l=((f=(c=this.props.options)==null?void 0:c.find(h=>h.status===n.checked))==null?void 0:f.value)??"";this.value=l,this.onChange&&this.onChange(this.value),this.detectChangeCallback&&this.detectChangeCallback(this.value)});const i=document.createElement("span");if(i.className="toggle-slider",this.props.activeColor||this.props.inactiveColor){const l=document.createElement("style"),c=this.props.activeColor||"#4CAF50",f=this.props.inactiveColor||"#ccc";l.textContent=`
-        .toggle-switch input:checked + .toggle-slider {
-          background-color: ${c};
-        }
-        .toggle-switch .toggle-slider {
-          background-color: ${f};
-        }
-      `,document.head.appendChild(l)}if(a.appendChild(n),a.appendChild(i),e.appendChild(a),this.props.description){e.classList.add("toggle-has-description");const l=document.createElement("p");l.className="toggle-description",l.textContent=this.props.description,e.appendChild(l)}return e}setDetectChange(e){this.detectChangeCallback=e}}const T3=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+`;class k3 extends Ae{constructor(e={}){if(super(e),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.selectedOptionIndex=null,e.default!==void 0&&(this.value=e.default),this.initializeOptions(e),!e.getOptionsAsync&&this.value!==void 0){const r=this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value));r!==-1&&(this.selectedOptionIndex=r)}e.onChange&&this.setOnChange(e.onChange),e.detectChange&&(this.detectChangeCallback=e.detectChange)}initializeOptions(e){this.hasInitializedOptions&&!e.getOptionsAsync||(this._options=[],e.options&&(this._options=[...e.options]),e.getOptions&&this._options.push(...e.getOptions()),e.getOptionsAsync?this.isLoading=!0:this.hasInitializedOptions=!0)}createOption(e,r){const a=document.createElement("li");a.classList.add("select-api-option"),a.dataset.index=String(r);const n=document.createElement("input");n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",this.selectedOptionIndex===r&&(n.checked=!0);const i=document.createElement("span");return i.classList.add("select-api-option-text"),i.textContent=e.name,a.appendChild(n),a.appendChild(i),a}draw(){const e=document.createElement("div");e.classList.add("select-api-container"),this.container=e;const r=document.createElement("div");if(r.classList.add("select-api-button"),this.getDataPropsPath()&&r.setAttribute("data-test-id",this.getDataPropsPath()),this.props.title){r.classList.add("has-label");const i=document.createElement("div");i.className="select-label",i.textContent=this.props.title,r.appendChild(i);const s=document.createElement("span");if(s.className="select-value",this.isLoading)s.textContent=this.props.loadingText||"Loading options...";else{const o=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,l=o&&typeof o.name=="string"?o.name:"Select an option";s.textContent=l}r.appendChild(s)}else{const i=document.createElement("span");if(this.isLoading)i.textContent=this.props.loadingText||"Loading options...";else{const s=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,o=s&&typeof s.name=="string"?s.name:"Select an option";i.textContent=o}r.appendChild(i)}r.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},e.appendChild(r),this.buttonEl=r;const a=document.createElement("ul");a.classList.add("select-api-options"),this._options.forEach((i,s)=>{const o=this.createOption(i,s);o.onclick=l=>this.selectApiOption(l,s,r),a.appendChild(o)}),e.appendChild(a);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=y3,e.appendChild(n),n.onclick=()=>{var i,s;this.isLoading||(this.isOpen=!this.isOpen,(i=this.optionsListEl)==null||i.classList.toggle("open",this.isOpen),(s=this.svgContainer)==null||s.classList.toggle("open",this.isOpen))},this.optionsListEl=a,this.svgContainer=n,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.hasInitializedOptions=!0,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(i=>{const s=new Set(this._options.map(l=>JSON.stringify(l.value))),o=i.filter(l=>!s.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.value!==void 0){const l=this._options.findIndex(c=>JSON.stringify(c.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(i=>{console.error("Failed to fetch async options:",i),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})),e}getJson(e=!0){return JSON.stringify(e?{}:{value:this.value},null,2)}selectApiOption(e,r,a){var o,l,c;const n=e.target,i=n.querySelector(".select-api-radio")||((o=n.closest(".select-api-option"))==null?void 0:o.querySelector(".select-api-radio"));i&&(i.checked=!0);const s=this._options[r].value;this.setValue(s),this.isOpen=!1,(l=this.optionsListEl)==null||l.classList.remove("open"),(c=this.svgContainer)==null||c.classList.remove("open")}updateOptionsList(){!this.optionsListEl||!this.buttonEl||(this.optionsListEl.innerHTML="",this._options.forEach((e,r)=>{var n;const a=this.createOption(e,r);a.onclick=i=>{this.buttonEl&&this.selectApiOption(i,r,this.buttonEl)},(n=this.optionsListEl)==null||n.appendChild(a)}))}updateButtonText(e,r=!1){if(!this.buttonEl)return;const a=this.buttonEl.querySelector(".select-value")||this.buttonEl.firstChild;if(a)if(r)a.textContent=e||"Error",this.buttonEl.classList.add("error"),this.buttonEl.setAttribute("disabled","true"),this.optionsListEl&&this.optionsListEl.classList.remove("open"),this.svgContainer&&(this.svgContainer.style.display="none");else if(this.isLoading)a.textContent=this.props.loadingText||"Loading options...",this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="");else{const n=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,i=n&&typeof n.name=="string"?n.name:"Select an option";a.textContent=e||i,this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="")}}update(e=!1){var r;if(this.selectedOptionIndex=this.value!==void 0?this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value)):null,this.updateOptionsList(),this.updateButtonText(),e&&this.value!==void 0){(r=this.onChange)==null||r.call(this,this.value);const a=this.props.detectChange||this.detectChangeCallback;a==null||a(this.value)}}setDetectChange(e){this.detectChangeCallback=e,this.props.detectChange=e}setValue(e){super.setValue(e),this.selectedOptionIndex=this._options.findIndex(r=>JSON.stringify(r.value)===JSON.stringify(e)),this.updateButtonText(),this.updateOptionsList(),this.detectChangeCallback&&this.detectChangeCallback!==this.props.detectChange&&this.detectChangeCallback(e)}}class _3 extends Ae{constructor(e){var r;super(e),this.inputType="text",e.options?this.value=e.default??((r=e.options[0])==null?void 0:r.value)??"":this.value=e.default??!1}draw(){var s;const e=document.createElement("div");e.className="toggle-setting-container",this.props.icon&&e.classList.add("toggle-with-icon");const r=document.createElement("div");if(r.className="toggle-label",this.props.icon){const o=document.createElement("span");o.className="toggle-icon",o.innerHTML=this.props.icon,r.appendChild(o)}if(this.props.title){const o=document.createElement("span");o.textContent=this.props.title,r.appendChild(o)}e.appendChild(r);const a=document.createElement("label");a.className="toggle-switch";const n=document.createElement("input");n.type="checkbox",this.props.options?n.checked=((s=this.props.options.find(o=>o.value===this.value))==null?void 0:s.status)??!1:n.checked=this.value??!1,n.addEventListener("change",()=>{var o;this.props.options?this.value=((o=this.props.options.find(l=>l.status===n.checked))==null?void 0:o.value)??"":this.value=n.checked,this.onChange&&this.onChange(this.value)});const i=document.createElement("span");if(i.className="toggle-slider",a.appendChild(n),a.appendChild(i),e.appendChild(a),this.props.description){e.classList.add("toggle-has-description");const o=document.createElement("p");o.className="toggle-description",o.textContent=this.props.description,e.appendChild(o)}return e}}const T3=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
 </svg>`;class S3 extends Ae{constructor(e={}){e.rowGap=e.rowGap??!0,e.columnGap=e.columnGap??!0,e.title=e.title??"Gap",e.icon=e.icon??T3,e.suffix=e.suffix??"px",e.minValue=e.minValue??0,super(e),this.inputType="number",this.inputValues={},this.mobileValue=e.mobile,this.value=this.validateValue(e.default??0),e.rowGap&&(this.inputValues.row=this.value),e.columnGap&&(this.inputValues.column=this.value)}draw(){const e=document.createElement("div");e.className=`setting-container ${this.props.className||""}`,e.id=this.id;const r=document.createElement("div");r.className="setting-label-input-wrapper";const a=document.createElement("label");a.className="setting-label",a.setAttribute("for",this.id+"-input");const n=document.createElement("span");if(n.textContent=this.props.title??"Gap",a.appendChild(n),this.props.icon){const o=document.createElement("span");o.className="setting-icon",o.innerHTML=this.props.icon,a.insertBefore(o,n)}const i=document.createElement("div");i.className=`setting-input-wrapper ${this.props.wrapperClassName||""}`,i.classList.add("gap-setting-wrapper");const s=document.createElement("div");return s.className="gap-inputs-container",this.props.rowGap&&s.appendChild(this.createGapInput("row","Row")),this.props.columnGap&&s.appendChild(this.createGapInput("column","Col")),i.appendChild(s),r.appendChild(a),r.appendChild(i),e.appendChild(r),e}createGapInput(e,r){const a=document.createElement("div");a.className="gap-input-wrapper";const n=document.createElement("input");if(n.type="number",n.className=`gap-input gap-${e}-input ${this.props.inputClassName||""}`,n.id=`${this.id}-${e}-input`,n.min=String(this.props.minValue??0),this.props.maxValue!==void 0&&(n.max=String(this.props.maxValue)),n.step=String(this.props.step??1),n.value=String(this.inputValues[e]??this.value),n.title=r,this.getDataPropsPath()&&n.setAttribute("data-test-id",`${this.getDataPropsPath()}_${e}`),n.addEventListener("input",i=>{const s=i.target;let o=parseFloat(s.value);o=this.validateValue(o),String(o)!==s.value&&(s.value=String(o)),this.inputValues[e]=o,this.setValue(o)}),n.addEventListener("blur",i=>{var l,c;const s=i.target;let o=parseFloat(s.value);o=this.validateValue(o),String(o)!==s.value&&(s.value=String(o),this.inputValues[e]=o,this.setValue(o)),(c=(l=this.props).onBlur)==null||c.call(l)}),a.appendChild(n),this.props.suffix&&this.props.suffix!=="none"){const i=document.createElement("span");i.className="gap-suffix",i.textContent=this.props.suffix,a.appendChild(i),n.style.paddingRight="30px"}return a}validateValue(e){(e==null||isNaN(e))&&(e=this.props.default??0);const r=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let n=Number(e);return n<r&&(n=r),n>a&&(n=a),n}getMobileValue(){return this.mobileValue}setMobileValue(e){this.mobileValue=e,e!==void 0&&this.setValue(e)}}const b3=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M2.25 11.75H15.75M5.85 2.75H12.15C13.4101 2.75 14.0402 2.75 14.5215 2.99524C14.9448 3.21095 15.289 3.55516 15.5048 3.97852C15.75 4.45982 15.75 5.08988 15.75 6.35V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V6.35C2.25 5.08988 2.25 4.45982 2.49524 3.97852C2.71095 3.55516 3.05516 3.21095 3.47852 2.99524C3.95982 2.75 4.58988 2.75 5.85 2.75Z" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
@@ -649,4 +642,4 @@
         opacity: ${r/100};
       `:`
         background-color: ${a};
-      `}}class Q3 extends Yt{constructor(e){super({title:(e==null?void 0:e.title)??"Image",collapsed:e==null?void 0:e.collapsed,settings:{image:new gn({...e==null?void 0:e.uploadProps,default:(e==null?void 0:e.image)??""}),width:new Vc({default:(e==null?void 0:e.width)??1e3,mobile:e==null?void 0:e.widthMobile}),height:new Bc({default:(e==null?void 0:e.height)??300,mobile:e==null?void 0:e.heightMobile})}})}}exports.AlignSetting=Dc;exports.AnimationSetting=V3;exports.BackgroundSettingSet=Z3;exports.BorderSettingSet=W3;exports.ButtonSetting=I4;exports.ColorSetting=Qt;exports.ColorWithOpacitySetting=Yr;exports.DimensionSetting=N4;exports.ExcelRulesService=za;exports.ExcelTranslationService=ts;exports.GapSetting=S3;exports.GradientSetting=na;exports.HeaderTypographySettingSet=X3;exports.HeightSetting=Bc;exports.HtmlSetting=L4;exports.ImageMapSetting=Qi;exports.ImageSettingSet=Q3;exports.MarginBottomSetting=L3;exports.MarginSettingGroup=j3;exports.MarginTopSetting=A3;exports.MultiLanguageSetting=qr;exports.NumberSetting=or;exports.OpacitySetting=Pc;exports.RootSettingGroup=k4;exports.SelectApiSettings=k3;exports.SelectSetting=ii;exports.Setting=Ae;exports.SettingGroup=Yt;exports.StringSetting=Oc;exports.TabSettingGroup=zs;exports.TabsSettingGroup=zs;exports.Toggle=_3;exports.TranslationManager=B3;exports.UploadSetting=gn;exports.WidthSetting=Vc;exports.asSettingGroupWithSettings=T4;exports.createSettingGroup=Mc;exports.createTabSettingGroup=_4;exports.isSetting=pr;exports.isSettingChild=Hn;exports.isSettingGroup=He;exports.iterateSettings=Xr;
+      `}}class Q3 extends Yt{constructor(e){super({title:(e==null?void 0:e.title)??"Image",collapsed:e==null?void 0:e.collapsed,settings:{image:new gn({...e==null?void 0:e.uploadProps,default:(e==null?void 0:e.image)??""}),width:new Vc({default:(e==null?void 0:e.width)??1e3,mobile:e==null?void 0:e.widthMobile}),height:new Bc({default:(e==null?void 0:e.height)??300,mobile:e==null?void 0:e.heightMobile})}})}}exports.AlignSetting=Dc;exports.AnimationSetting=V3;exports.BackgroundSettingSet=Z3;exports.BorderSettingSet=W3;exports.ButtonSetting=I4;exports.ColorSetting=Qt;exports.ColorWithOpacitySetting=Yr;exports.DimensionSetting=N4;exports.ExcelRulesService=za;exports.ExcelTranslationService=ts;exports.GapSetting=S3;exports.GradientSetting=na;exports.HeaderTypographySettingSet=X3;exports.HeightSetting=Bc;exports.HtmlSetting=L4;exports.ImageMapSetting=Qi;exports.ImageSettingSet=Q3;exports.MarginBottomSetting=L3;exports.MarginSettingGroup=j3;exports.MarginTopSetting=A3;exports.MultiLanguageSetting=qr;exports.NumberSetting=or;exports.OpacitySetting=Pc;exports.RootSettingGroup=k4;exports.SelectApiSettings=k3;exports.SelectSetting=ii;exports.Setting=Ae;exports.SettingGroup=Yt;exports.StringSetting=Oc;exports.TabSettingGroup=zs;exports.TabsSettingGroup=zs;exports.ToggleSettings=_3;exports.TranslationManager=B3;exports.UploadSetting=gn;exports.WidthSetting=Vc;exports.asSettingGroupWithSettings=T4;exports.createSettingGroup=Mc;exports.createTabSettingGroup=_4;exports.isSetting=pr;exports.isSettingChild=Hn;exports.isSettingGroup=He;exports.iterateSettings=Xr;

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

@@ -27335,7 +27335,10 @@ const si = class si {
   }
   getValues(e) {
     if (e === void 0) {
-      const r = { $id: this.$id };
+      const r = {
+        $id: this.$id,
+        isRootNode: this.isRootNode
+      };
       for (const a in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, a)) {
           const n = this.settings[a];
@@ -29756,53 +29759,38 @@ class $3 extends Ae {
 }
 class W3 extends Ae {
   constructor(e) {
-    var r, a;
-    super(e), this.inputType = "text", this.value = e.default ?? ((a = (r = e.options) == null ? void 0 : r[0]) == null ? void 0 : a.value) ?? "", this.detectChangeCallback = e.detectChange;
+    var r;
+    super(e), this.inputType = "text", e.options ? this.value = e.default ?? ((r = e.options[0]) == null ? void 0 : r.value) ?? "" : this.value = e.default ?? !1;
   }
   draw() {
-    var s, o;
+    var s;
     const e = document.createElement("div");
     e.className = "toggle-setting-container", this.props.icon && e.classList.add("toggle-with-icon");
     const r = document.createElement("div");
     if (r.className = "toggle-label", this.props.icon) {
-      const l = document.createElement("span");
-      l.className = "toggle-icon", l.innerHTML = this.props.icon, r.appendChild(l);
+      const o = document.createElement("span");
+      o.className = "toggle-icon", o.innerHTML = this.props.icon, r.appendChild(o);
     }
     if (this.props.title) {
-      const l = document.createElement("span");
-      l.textContent = this.props.title, r.appendChild(l);
+      const o = document.createElement("span");
+      o.textContent = this.props.title, r.appendChild(o);
     }
     e.appendChild(r);
     const a = document.createElement("label");
     a.className = "toggle-switch";
     const n = document.createElement("input");
-    n.type = "checkbox", n.checked = ((o = (s = this.props.options) == null ? void 0 : s.find((l) => l.value === this.value)) == null ? void 0 : o.status) ?? !1, this.getDataPropsPath() && n.setAttribute("data-test-id", this.getDataPropsPath()), n.addEventListener("change", () => {
-      var c, f;
-      const l = ((f = (c = this.props.options) == null ? void 0 : c.find((h) => h.status === n.checked)) == null ? void 0 : f.value) ?? "";
-      this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
+    n.type = "checkbox", this.props.options ? n.checked = ((s = this.props.options.find((o) => o.value === this.value)) == null ? void 0 : s.status) ?? !1 : n.checked = this.value ?? !1, n.addEventListener("change", () => {
+      var o;
+      this.props.options ? this.value = ((o = this.props.options.find((l) => l.status === n.checked)) == null ? void 0 : o.value) ?? "" : this.value = n.checked, this.onChange && this.onChange(this.value);
     });
     const i = document.createElement("span");
-    if (i.className = "toggle-slider", this.props.activeColor || this.props.inactiveColor) {
-      const l = document.createElement("style"), c = this.props.activeColor || "#4CAF50", f = this.props.inactiveColor || "#ccc";
-      l.textContent = `
-        .toggle-switch input:checked + .toggle-slider {
-          background-color: ${c};
-        }
-        .toggle-switch .toggle-slider {
-          background-color: ${f};
-        }
-      `, document.head.appendChild(l);
-    }
-    if (a.appendChild(n), a.appendChild(i), e.appendChild(a), this.props.description) {
+    if (i.className = "toggle-slider", a.appendChild(n), a.appendChild(i), e.appendChild(a), this.props.description) {
       e.classList.add("toggle-has-description");
-      const l = document.createElement("p");
-      l.className = "toggle-description", l.textContent = this.props.description, e.appendChild(l);
+      const o = document.createElement("p");
+      o.className = "toggle-description", o.textContent = this.props.description, e.appendChild(o);
     }
     return e;
   }
-  setDetectChange(e) {
-    this.detectChangeCallback = e;
-  }
 }
 const x3 = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" strokeWidth="1.33333" strokeLinecap="round" strokeLinejoin="round"/>
@@ -31102,7 +31090,7 @@ export {
   v4 as StringSetting,
   g4 as TabSettingGroup,
   g4 as TabsSettingGroup,
-  W3 as Toggle,
+  W3 as ToggleSettings,
   j3 as TranslationManager,
   ai as UploadSetting,
   p3 as WidthSetting,

package/dist/settings/toggle-settings/toggleSettings.d.ts

@@ -3,20 +3,15 @@ export interface ToggleValue {
     value: string;
     status: boolean;
 }
-export interface ToggleSettingProps extends SettingProps<string> {
+export interface ToggleSettingProps extends SettingProps<boolean | string> {
     title?: string;
     icon?: string;
-    default?: string;
+    default?: boolean | string;
     options?: ToggleValue[];
-    activeColor?: string;
-    inactiveColor?: string;
     description?: string;
-    detectChange?: (value: string | undefined) => void;
 }
-export declare class Toggle extends Setting<string, ToggleSettingProps> {
+export declare class ToggleSettings extends Setting<boolean | string, ToggleSettingProps> {
     inputType: InputTypes;
-    private detectChangeCallback?;
     constructor(props: ToggleSettingProps);
     draw(): HTMLElement;
-    setDetectChange(callback: (value: string | undefined) => void): void;
 }

package/dist/types/index.d.ts

@@ -71,6 +71,7 @@ export type SettingsToProps<T> = T extends TabSettingGroup<infer S> ? {
     } ? V : undefined;
 } & {
     $id: string;
+    isRootNode?: boolean;
 } : never;
 export type GetSettings<T> = T extends {
     settings: SettingGroup<infer S>;

package/package.json

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