builder-settings-types 0.0.103 → 0.0.104

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

@@ -85,14 +85,14 @@
   <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" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
-`;class Q extends m{constructor(t={}){super(t),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.initializeOptions(t),t.default!==void 0&&(this.value=t.default,this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}initializeOptions(t){this.hasInitializedOptions||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?(this.isLoading=!0,t.default!==void 0&&(this.value=t.default)):t.default!==void 0&&(this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),this.hasInitializedOptions=!0)}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const s=document.createElement("input");return s.type="radio",s.classList.add("select-api-radio"),s.name="select-api-radio-group",i.appendChild(s),this.selectedOptionIndex===e&&(s.checked=!0),i}draw(){const t=document.createElement("div");t.classList.add("select-api-container"),this.container=t;const e=document.createElement("div");if(e.classList.add("select-api-button"),this.props.title){e.classList.add("has-label");const n=document.createElement("div");n.className="select-label",n.textContent=this.props.title,e.appendChild(n);const a=document.createElement("span");a.className="select-value",this.isLoading?a.textContent=this.props.loadingText||"Loading options...":a.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(a)}else{const n=document.createElement("span");this.isLoading?n.textContent=this.props.loadingText||"Loading options...":n.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(n)}e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-api-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectApiOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=X,t.appendChild(s),s.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{const a=new Set(this._options.map(l=>JSON.stringify(l.value))),o=n.filter(l=>!a.has(JSON.stringify(l.value)));this._options.push(...o),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(l=>JSON.stringify(l.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),t}selectApiOption(t,e,i){var n,a;const s=this._options[e];if(s){const o=s.value;this.value=o,this.onChange&&this.onChange(o),this.detectChangeCallback&&this.detectChangeCallback(o),this.selectedOptionIndex=e,this.isOpen=!1,this.updateButtonText(),(n=this.optionsListEl)==null||n.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-api-radio").forEach((r,h)=>{r.checked=h===e})}}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-api-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);this.selectedOptionIndex===e&&i.classList.add("selected"),i.onclick=s=>{this.buttonEl&&this.selectApiOption(s,e,this.buttonEl)},i.tabIndex=0,i.addEventListener("keydown",s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this.buttonEl&&this.selectApiOption(s,e,this.buttonEl))}),this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;const e=this.buttonEl.querySelector(".select-value"),i=this.buttonEl.classList.contains("has-label"),s=this.buttonEl.querySelector(".select-label");if(this.isLoading){this.buttonEl.classList.add("loading");const a=this.props.loadingText||"Loading options...";if(e)e.textContent=a;else if(i&&this.props.title&&!s){this.buttonEl.innerHTML="";const o=document.createElement("div");o.className="select-label",o.textContent=this.props.title,this.buttonEl.appendChild(o);const l=document.createElement("span");l.className="select-value",l.textContent=a,this.buttonEl.appendChild(l)}else this.buttonEl.textContent=a;return}this.buttonEl.classList.remove("loading","error");let n;if(t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),n=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?n=this._options[this.selectedOptionIndex].name:n="Select an option",e)e.textContent=n;else if(i&&this.props.title&&!s){this.buttonEl.innerHTML="";const a=document.createElement("div");a.className="select-label",a.textContent=this.props.title,this.buttonEl.appendChild(a);const o=document.createElement("span");o.className="select-value",o.textContent=n,this.buttonEl.appendChild(o)}else this.buttonEl.textContent=n}setDetectChange(t){this.detectChangeCallback=t}}class Y extends m{constructor(t){var e,i;super(t),this.inputType="text",this.value=t.default??((i=(e=t.options)==null?void 0:e[0])==null?void 0:i.value)??""}draw(){var a,o;const t=document.createElement("div");t.className="toggle-setting-container",this.props.icon&&t.classList.add("toggle-with-icon");const e=document.createElement("div");if(e.className="toggle-label",this.props.icon){const l=document.createElement("span");l.className="toggle-icon",l.innerHTML=this.props.icon,e.appendChild(l)}if(this.props.title){const l=document.createElement("span");l.textContent=this.props.title,e.appendChild(l)}t.appendChild(e);const i=document.createElement("label");i.className="toggle-switch";const s=document.createElement("input");s.type="checkbox",s.checked=((o=(a=this.props.options)==null?void 0:a.find(l=>l.value===this.value))==null?void 0:o.status)??!1,s.addEventListener("change",()=>{var r,h;const l=((h=(r=this.props.options)==null?void 0:r.find(u=>u.status===s.checked))==null?void 0:h.value)??"";this.value=l,this.onChange&&this.onChange(this.value)});const n=document.createElement("span");if(n.className="toggle-slider",this.props.activeColor||this.props.inactiveColor){const l=document.createElement("style"),r=this.props.activeColor||"#4CAF50",h=this.props.inactiveColor||"#ccc";l.textContent=`
+`;class Q extends m{constructor(t={}){super(t),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.initializeOptions(t),t.default!==void 0&&(this.value=t.default,this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}initializeOptions(t){this.hasInitializedOptions||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?(this.isLoading=!0,t.default!==void 0&&(this.value=t.default)):t.default!==void 0&&(this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),this.hasInitializedOptions=!0)}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const s=document.createElement("input");return s.type="radio",s.classList.add("select-api-radio"),s.name="select-api-radio-group",i.appendChild(s),this.selectedOptionIndex===e&&(s.checked=!0),i}draw(){const t=document.createElement("div");t.classList.add("select-api-container"),this.container=t;const e=document.createElement("div");if(e.classList.add("select-api-button"),this.props.title){e.classList.add("has-label");const n=document.createElement("div");n.className="select-label",n.textContent=this.props.title,e.appendChild(n);const a=document.createElement("span");a.className="select-value",this.isLoading?a.textContent=this.props.loadingText||"Loading options...":a.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(a)}else{const n=document.createElement("span");this.isLoading?n.textContent=this.props.loadingText||"Loading options...":n.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(n)}e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-api-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectApiOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=X,t.appendChild(s),s.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(a=>JSON.stringify(a.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{const a=new Set(this._options.map(l=>JSON.stringify(l.value))),o=n.filter(l=>!a.has(JSON.stringify(l.value)));this._options.push(...o),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(l=>JSON.stringify(l.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),t}selectApiOption(t,e,i){var n,a;const s=this._options[e];if(s){const o=s.value;this.value=o,this.onChange&&this.onChange(o),this.detectChangeCallback&&this.detectChangeCallback(o),this.selectedOptionIndex=e,this.isOpen=!1,this.updateButtonText(),(n=this.optionsListEl)==null||n.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-api-radio").forEach((r,h)=>{r.checked=h===e})}}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-api-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);this.selectedOptionIndex===e&&i.classList.add("selected"),i.onclick=s=>{this.buttonEl&&this.selectApiOption(s,e,this.buttonEl)},i.tabIndex=0,i.addEventListener("keydown",s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this.buttonEl&&this.selectApiOption(s,e,this.buttonEl))}),this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;const e=this.buttonEl.querySelector(".select-value"),i=this.buttonEl.classList.contains("has-label"),s=this.buttonEl.querySelector(".select-label");if(this.isLoading){this.buttonEl.classList.add("loading");const a=this.props.loadingText||"Loading options...";if(e)e.textContent=a;else if(i&&this.props.title&&!s){this.buttonEl.innerHTML="";const o=document.createElement("div");o.className="select-label",o.textContent=this.props.title,this.buttonEl.appendChild(o);const l=document.createElement("span");l.className="select-value",l.textContent=a,this.buttonEl.appendChild(l)}else this.buttonEl.textContent=a;return}this.buttonEl.classList.remove("loading","error");let n;if(t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),n=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?n=this._options[this.selectedOptionIndex].name:n="Select an option",e)e.textContent=n;else if(i&&this.props.title&&!s){this.buttonEl.innerHTML="";const a=document.createElement("div");a.className="select-label",a.textContent=this.props.title,this.buttonEl.appendChild(a);const o=document.createElement("span");o.className="select-value",o.textContent=n,this.buttonEl.appendChild(o)}else this.buttonEl.textContent=n}setDetectChange(t){this.detectChangeCallback=t}}class Y extends m{constructor(t){var e,i;super(t),this.inputType="text",this.value=t.default??((i=(e=t.options)==null?void 0:e[0])==null?void 0:i.value)??"",this.detectChangeCallback=t.detectChange}draw(){var a,o;const t=document.createElement("div");t.className="toggle-setting-container",this.props.icon&&t.classList.add("toggle-with-icon");const e=document.createElement("div");if(e.className="toggle-label",this.props.icon){const l=document.createElement("span");l.className="toggle-icon",l.innerHTML=this.props.icon,e.appendChild(l)}if(this.props.title){const l=document.createElement("span");l.textContent=this.props.title,e.appendChild(l)}t.appendChild(e);const i=document.createElement("label");i.className="toggle-switch";const s=document.createElement("input");s.type="checkbox",s.checked=((o=(a=this.props.options)==null?void 0:a.find(l=>l.value===this.value))==null?void 0:o.status)??!1,s.addEventListener("change",()=>{var r,h;const l=((h=(r=this.props.options)==null?void 0:r.find(u=>u.status===s.checked))==null?void 0:h.value)??"";this.value=l,this.onChange&&this.onChange(this.value),this.detectChangeCallback&&this.detectChangeCallback(this.value)});const n=document.createElement("span");if(n.className="toggle-slider",this.props.activeColor||this.props.inactiveColor){const l=document.createElement("style"),r=this.props.activeColor||"#4CAF50",h=this.props.inactiveColor||"#ccc";l.textContent=`
         .toggle-switch input:checked + .toggle-slider {
           background-color: ${r};
         }
         .toggle-switch .toggle-slider {
           background-color: ${h};
         }
-      `,document.head.appendChild(l)}return i.appendChild(s),i.appendChild(n),t.appendChild(i),t}}const K=`<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      `,document.head.appendChild(l)}return i.appendChild(s),i.appendChild(n),t.appendChild(i),t}setDetectChange(t){this.detectChangeCallback=t}}const K=`<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;class tt extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||K,s.appendChild(n);const a=document.createElement("label");a.classList.add("gap-input-label"),a.textContent=t,s.appendChild(a),i.appendChild(s);const o=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var f;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(f=this.onChange)==null||f.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:o});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const r=l.querySelector("input.gap-setting-input");r&&(r.style.paddingRight="35px");const h=document.createElement("span");return h.className="suffix-label",h.textContent=this.props.suffix,l.appendChild(h),i.appendChild(l),i}}class et extends m{constructor(t){var e;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");super(t),this.inputType="tabs",this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainer=null,this.previousTabId="",this.tabValues=new Map,this.settingGroups=new Map,this.tabs=t.tabs,this.activeTabId=t.activeTabId||((e=this.tabs[0])==null?void 0:e.id)||"",this.previousTabId=this.activeTabId,this.onStateChangeCallback=t.onStateChange,this.value={},this.tabs.forEach(i=>{if(i.custom){const s={};Object.entries(i.settings).forEach(([n,a])=>{a instanceof m?s[n]=a.value:a instanceof C&&(s[n]=a.getValues())}),this.tabValues.set(i.id,s),this.value[i.id]=s}else{const s=new C({title:i.title||i.label,collapsed:i.collapsed,settings:i.settings,description:i.description,icon:i.icon,main:i.main,custom:i.custom,hideCondition:i.hideCondition,onBlur:i.onBlur});this.settingGroups.set(i.id,s);const n=s.getValues();this.tabValues.set(i.id,n),this.value[i.id]=n}}),t.onChange&&this.setOnChange(t.onChange)}draw(){const t=document.createElement("div");t.classList.add("tabs-settings-container"),this.props.className&&t.classList.add(this.props.className);const e=document.createElement("div");e.classList.add("tabs-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)}),t.appendChild(e);const i=document.createElement("div");return i.classList.add("tab-content"),this.contentContainer=i,this.tabs.forEach(s=>{const n=document.createElement("div");if(n.classList.add("tab-panel"),s.id===this.activeTabId&&n.classList.add("active"),s.custom)Object.entries(s.settings).forEach(([a,o])=>{if(o instanceof m)n.appendChild(o.draw()),o.setOnChange(()=>{this.updateTabValues(s.id),this.handleTabChange(s.id)});else if(o instanceof C){const l=o.draw();n.appendChild(l),this.addChangeListeners(o,s.id)}});else{const a=this.settingGroups.get(s.id);if(a){const o=a.draw();n.appendChild(o),this.addChangeListeners(a,s.id)}}i.appendChild(n)}),t.appendChild(i),t}addChangeListeners(t,e){const i=t.settings;Object.values(i).forEach(s=>{s instanceof C?this.addChangeListeners(s,e):s.setOnChange(()=>{this.updateTabValues(e),this.handleTabChange(e)})})}updateTabValues(t){const e=this.tabs.find(i=>i.id===t);if(e)if(e.custom){const i={};Object.entries(e.settings).forEach(([s,n])=>{n instanceof m?i[s]=n.value:n instanceof C&&(i[s]=n.getValues())}),this.tabValues.set(t,i),this.value={...this.value,[t]:i}}else{const i=this.settingGroups.get(t);if(i){const s=i.getValues();this.tabValues.set(t,s),this.value={...this.value,[t]:s}}}}handleTabChange(t){var i,s;const e=this.tabValues.get(t)||{};(i=this.onStateChangeCallback)==null||i.call(this,t,e),(s=this.onChangeCallback)==null||s.call(this,{tabId:t,contentValues:e,previousTabId:this.previousTabId})}handleTabClick(t){var i;if(t===this.activeTabId)return;this.previousTabId=this.activeTabId,this.activeTabId=t;const e=(i=this.tabsContainer)==null?void 0:i.querySelectorAll(".tab-button");if(e==null||e.forEach(s=>{var n;s instanceof HTMLElement&&s.classList.toggle("active",s.textContent===((n=this.tabs.find(a=>a.id===t))==null?void 0:n.label))}),this.contentContainer){const s=this.contentContainer.querySelectorAll(".tab-panel"),n=this.tabs.findIndex(o=>o.id===this.previousTabId),a=this.tabs.findIndex(o=>o.id===t);s.forEach((o,l)=>{o instanceof HTMLElement&&(l===a?(o.classList.add("active"),o.classList.remove("slide-left","slide-right")):l===n?(o.classList.remove("active"),o.classList.add(a>n?"slide-left":"slide-right")):o.classList.remove("active","slide-left","slide-right"))})}this.handleTabChange(t)}setOnChange(t){return this.onChangeCallback=t,this}setOnStateChange(t){return this.onStateChangeCallback=t,this}}const it=`
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">

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

@@ -976,7 +976,7 @@ class rt extends m {
 class ct extends m {
   constructor(t) {
     var e, i;
-    super(t), this.inputType = "text", this.value = t.default ?? ((i = (e = t.options) == null ? void 0 : e[0]) == null ? void 0 : i.value) ?? "";
+    super(t), this.inputType = "text", this.value = t.default ?? ((i = (e = t.options) == null ? void 0 : e[0]) == null ? void 0 : i.value) ?? "", this.detectChangeCallback = t.detectChange;
   }
   draw() {
     var a, o;
@@ -998,7 +998,7 @@ class ct extends m {
     s.type = "checkbox", s.checked = ((o = (a = this.props.options) == null ? void 0 : a.find((l) => l.value === this.value)) == null ? void 0 : o.status) ?? !1, s.addEventListener("change", () => {
       var r, h;
       const l = ((h = (r = this.props.options) == null ? void 0 : r.find((u) => u.status === s.checked)) == null ? void 0 : h.value) ?? "";
-      this.value = l, this.onChange && this.onChange(this.value);
+      this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
     });
     const n = document.createElement("span");
     if (n.className = "toggle-slider", this.props.activeColor || this.props.inactiveColor) {
@@ -1014,6 +1014,9 @@ class ct extends m {
     }
     return i.appendChild(s), i.appendChild(n), t.appendChild(i), t;
   }
+  setDetectChange(t) {
+    this.detectChangeCallback = t;
+  }
 }
 const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>

package/dist/index.d.ts

@@ -559,8 +559,10 @@ declare interface TabsSettingsProps<T = TabChangeValue> extends SettingProps<T>
 
 export declare class Toggle extends Setting<string, ToggleSettingProps> {
     inputType: InputTypes;
+    private detectChangeCallback?;
     constructor(props: ToggleSettingProps);
     draw(): HTMLElement;
+    setDetectChange(callback: (value: string | undefined) => void): void;
 }
 
 export declare interface ToggleSettingProps extends SettingProps<string> {
@@ -570,6 +572,7 @@ export declare interface ToggleSettingProps extends SettingProps<string> {
     options?: ToggleValue[];
     activeColor?: string;
     inactiveColor?: string;
+    detectChange?: (value: string | undefined) => void;
 }
 
 export declare interface ToggleValue {

package/package.json

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