builder-settings-types 0.0.98 → 0.0.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(r=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(r|=0));for(;r--;)t+=A[e[r]&63];return t};function B(r,t){for(const e in r)if(r.hasOwnProperty(e)){const i=r[e];t(e,i)}}const b=class b{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.lastValues={},this.lastChangeTime=0,this.CHANGE_DEBOUNCE=100,this.handleBlur=()=>{},this.id=t.id||I(),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,Object.assign(this,t.settings),this.initialValues=this.getValues()}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();this.lastChangeTime=Date.now(),t(i),this.updateVisibility(),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),B(this.settings,(i,s)=>{const n=()=>{this.isHandlingChange||e()};this.changeHandlers.add(n),s instanceof b,s.setOnChange(n)}),this}setOnBlur(t){return this.onBlur=t,this.elementRef&&(this.elementRef.removeEventListener("focusout",this.handleBlur),this.handleBlur=e=>{this.blurTimeout&&clearTimeout(this.blurTimeout);const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&Date.now()-this.lastChangeTime>this.CHANGE_DEBOUNCE&&(t(),this.updateVisibility(),this.initialValues=i)},this.elementRef.addEventListener("focusout",this.handleBlur,!0)),this}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}calculateChanges(t,e){const i={};for(const s in e)if(e.hasOwnProperty(s))if(typeof e[s]=="object"&&e[s]!==null){const n=this.calculateChanges(t[s]||{},e[s]);Object.keys(n).length>0&&(i[s]=n)}else t[s]!==e[s]&&(i[s]={from:t[s],to:e[s]});return i}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof b?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof b?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,b.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");if(i.className="title-section",this.icon){const h=document.createElement("span");h.className="group-icon",h.innerHTML=this.icon,i.appendChild(h)}this.custom&&t.classList.add("custom_class");const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");if(n.className="actions-section",this.description&&this.isCollapsed){const h=document.createElement("span");h.className="info-marker",h.innerHTML=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(r=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(r|=0));for(;r--;)t+=A[e[r]&63];return t};function B(r,t){for(const e in r)if(r.hasOwnProperty(e)){const i=r[e];t(e,i)}}const b=class b{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.lastValues={},this.lastChangeTime=0,this.CHANGE_DEBOUNCE=100,this.handleBlur=()=>{},this.id=t.id||I(),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,Object.assign(this,t.settings),this.initialValues=this.getValues()}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(),t(i),this.updateVisibility(),this.initialValues=i),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),B(this.settings,(i,s)=>{const n=()=>{this.isHandlingChange||e()};this.changeHandlers.add(n),s instanceof b,s.setOnChange(n)}),this}setOnBlur(t){return this.onBlur=t,this.elementRef&&(this.elementRef.removeEventListener("focusout",this.handleBlur),this.handleBlur=e=>{this.blurTimeout&&clearTimeout(this.blurTimeout);const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&Date.now()-this.lastChangeTime>this.CHANGE_DEBOUNCE&&(t(),this.updateVisibility(),this.initialValues=i)},this.elementRef.addEventListener("focusout",this.handleBlur,!0)),this}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}calculateChanges(t,e){const i={};for(const s in e)if(e.hasOwnProperty(s))if(typeof e[s]=="object"&&e[s]!==null){const n=this.calculateChanges(t[s]||{},e[s]);Object.keys(n).length>0&&(i[s]=n)}else t[s]!==e[s]&&(i[s]={from:t[s],to:e[s]});return i}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof b?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof b?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,b.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");if(i.className="title-section",this.icon){const h=document.createElement("span");h.className="group-icon",h.innerHTML=this.icon,i.appendChild(h)}this.custom&&t.classList.add("custom_class");const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");if(n.className="actions-section",this.description&&this.isCollapsed){const h=document.createElement("span");h.className="info-marker",h.innerHTML=`
2
2
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
3
3
  <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"
4
4
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
@@ -20,11 +20,11 @@
20
20
  <path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
21
21
  <path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
22
22
  </svg>
23
- `,_=`
23
+ `,j=`
24
24
  <svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
25
25
  <polyline points="6 9 12 15 18 9"></polyline>
26
26
  </svg>
27
- `;class T extends m{constructor(t={}){if(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.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",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-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=_,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var n,a,o;const s=this._options[e];s&&(this.value=s.value,(n=this.onChange)==null||n.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((c,h)=>{h===e?c.classList.add("selected"):c.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=s=>{this.buttonEl&&this.selectOption(s,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class R extends m{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
27
+ `;class T extends m{constructor(t={}){if(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.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",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-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=j,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var n,a,o;const s=this._options[e];s&&(this.value=s.value,(n=this.onChange)==null||n.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((c,h)=>{h===e?c.classList.add("selected"):c.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=s=>{this.buttonEl&&this.selectOption(s,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class R extends m{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
28
28
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
29
29
  <path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
30
30
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
@@ -45,7 +45,7 @@
45
45
  <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
46
46
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
47
47
  </svg>
48
- `}].forEach(n=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=n.icon,this.value===n.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(l=>l.classList.remove("selected")),a.classList.add("selected"),this.value=n.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class j extends m{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class q extends m{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.aspectRatio=1,this.isUpdating=!1;const e=t.width||100,i=t.height||100;this.value||(this.value={width:e,height:i}),this.minWidth=Math.max(1,t.minWidth||1),this.maxWidth=t.maxWidth,this.minHeight=Math.max(1,t.minHeight||1),this.maxHeight=t.maxHeight,this.locked=t.locked??!1,(!this.value.width||this.value.width<1)&&(this.value.width=1),(!this.value.height||this.value.height<1)&&(this.value.height=1),this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.widthSetting=new w({title:"Width",default:this.value.width,suffix:"px",minValue:this.minWidth,maxValue:this.maxWidth,icon:U}),this.heightSetting=new w({title:"Height",default:this.value.height,suffix:"px",minValue:this.minHeight,maxValue:this.maxHeight,icon:D}),this.widthSetting.setOnChange(this.handleWidthChange.bind(this)),this.heightSetting.setOnChange(this.handleHeightChange.bind(this))}handleWidthChange(t){if(!this.isUpdating){(isNaN(t)||t<this.minWidth)&&(t=this.minWidth),this.maxWidth&&t>this.maxWidth&&(t=this.maxWidth),this.isUpdating=!0;try{let e=t,i=this.value.height;this.locked&&this.aspectRatio>0&&(i=Math.round(e/this.aspectRatio),i<this.minHeight?(i=this.minHeight,e=Math.round(i*this.aspectRatio),e<this.minWidth?(e=this.minWidth,i>0&&(this.aspectRatio=e/i)):this.maxWidth&&e>this.maxWidth&&(e=this.maxWidth,i>0&&(this.aspectRatio=e/i))):this.maxHeight&&i>this.maxHeight&&(i=this.maxHeight,e=Math.round(i*this.aspectRatio),e<this.minWidth?(e=this.minWidth,i>0&&(this.aspectRatio=e/i)):this.maxWidth&&e>this.maxWidth&&(e=this.maxWidth,i>0&&(this.aspectRatio=e/i)))),this.value={width:e,height:i},this.widthSetting.setValue(e),this.locked&&this.heightSetting.setValue(i),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}handleHeightChange(t){if(!this.isUpdating){(isNaN(t)||t<this.minHeight)&&(t=this.minHeight),this.maxHeight&&t>this.maxHeight&&(t=this.maxHeight),this.isUpdating=!0;try{let e=t,i=this.value.width;this.locked&&this.aspectRatio>0&&(i=Math.round(e*this.aspectRatio),i<this.minWidth?(i=this.minWidth,e=Math.round(i/this.aspectRatio),e<this.minHeight?(e=this.minHeight,e>0&&(this.aspectRatio=i/e)):this.maxHeight&&e>this.maxHeight&&(e=this.maxHeight,e>0&&(this.aspectRatio=i/e))):this.maxWidth&&i>this.maxWidth&&(i=this.maxWidth,e=Math.round(i/this.aspectRatio),e<this.minHeight?(e=this.minHeight,e>0&&(this.aspectRatio=i/e)):this.maxHeight&&e>this.maxHeight&&(e=this.maxHeight,e>0&&(this.aspectRatio=i/e)))),this.value={width:i,height:e},this.locked&&this.widthSetting.setValue(i),this.heightSetting.setValue(e),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}toggleLock(t){if(this.locked=!this.locked,this.locked&&this.value){const{width:i,height:s}=this.value;s>0&&(this.aspectRatio=i/s)}t.innerHTML=this.getLockSVG(this.locked),t.setAttribute("aria-pressed",String(this.locked)),t.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const e=t.closest(".dimension-setting-container");e&&(this.locked?e.classList.add("aspect-locked"):e.classList.remove("aspect-locked"))}getLockSVG(t){return t?`
48
+ `}].forEach(n=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=n.icon,this.value===n.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(l=>l.classList.remove("selected")),a.classList.add("selected"),this.value=n.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class _ extends m{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class q extends m{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.aspectRatio=1,this.isUpdating=!1;const e=t.width||100,i=t.height||100;this.value||(this.value={width:e,height:i}),this.minWidth=Math.max(1,t.minWidth||1),this.maxWidth=t.maxWidth,this.minHeight=Math.max(1,t.minHeight||1),this.maxHeight=t.maxHeight,this.locked=t.locked??!1,(!this.value.width||this.value.width<1)&&(this.value.width=1),(!this.value.height||this.value.height<1)&&(this.value.height=1),this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.widthSetting=new w({title:"Width",default:this.value.width,suffix:"px",minValue:this.minWidth,maxValue:this.maxWidth,icon:U}),this.heightSetting=new w({title:"Height",default:this.value.height,suffix:"px",minValue:this.minHeight,maxValue:this.maxHeight,icon:D}),this.widthSetting.setOnChange(this.handleWidthChange.bind(this)),this.heightSetting.setOnChange(this.handleHeightChange.bind(this))}handleWidthChange(t){if(!this.isUpdating){(isNaN(t)||t<this.minWidth)&&(t=this.minWidth),this.maxWidth&&t>this.maxWidth&&(t=this.maxWidth),this.isUpdating=!0;try{let e=t,i=this.value.height;this.locked&&this.aspectRatio>0&&(i=Math.round(e/this.aspectRatio),i<this.minHeight?(i=this.minHeight,e=Math.round(i*this.aspectRatio),e<this.minWidth?(e=this.minWidth,i>0&&(this.aspectRatio=e/i)):this.maxWidth&&e>this.maxWidth&&(e=this.maxWidth,i>0&&(this.aspectRatio=e/i))):this.maxHeight&&i>this.maxHeight&&(i=this.maxHeight,e=Math.round(i*this.aspectRatio),e<this.minWidth?(e=this.minWidth,i>0&&(this.aspectRatio=e/i)):this.maxWidth&&e>this.maxWidth&&(e=this.maxWidth,i>0&&(this.aspectRatio=e/i)))),this.value={width:e,height:i},this.widthSetting.setValue(e),this.locked&&this.heightSetting.setValue(i),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}handleHeightChange(t){if(!this.isUpdating){(isNaN(t)||t<this.minHeight)&&(t=this.minHeight),this.maxHeight&&t>this.maxHeight&&(t=this.maxHeight),this.isUpdating=!0;try{let e=t,i=this.value.width;this.locked&&this.aspectRatio>0&&(i=Math.round(e*this.aspectRatio),i<this.minWidth?(i=this.minWidth,e=Math.round(i/this.aspectRatio),e<this.minHeight?(e=this.minHeight,e>0&&(this.aspectRatio=i/e)):this.maxHeight&&e>this.maxHeight&&(e=this.maxHeight,e>0&&(this.aspectRatio=i/e))):this.maxWidth&&i>this.maxWidth&&(i=this.maxWidth,e=Math.round(i/this.aspectRatio),e<this.minHeight?(e=this.minHeight,e>0&&(this.aspectRatio=i/e)):this.maxHeight&&e>this.maxHeight&&(e=this.maxHeight,e>0&&(this.aspectRatio=i/e)))),this.value={width:i,height:e},this.locked&&this.widthSetting.setValue(i),this.heightSetting.setValue(e),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}toggleLock(t){if(this.locked=!this.locked,this.locked&&this.value){const{width:i,height:s}=this.value;s>0&&(this.aspectRatio=i/s)}t.innerHTML=this.getLockSVG(this.locked),t.setAttribute("aria-pressed",String(this.locked)),t.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const e=t.closest(".dimension-setting-container");e&&(this.locked?e.classList.add("aspect-locked"):e.classList.remove("aspect-locked"))}getLockSVG(t){return t?`
49
49
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
50
50
  <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
51
51
  </svg>`:`
@@ -161,4 +161,4 @@
161
161
  `:`
162
162
  background-color: ${i};
163
163
  opacity: ${s/100};
164
- `}}exports.AlignSetting=R;exports.BackgroundSettingSet=Ct;exports.BorderSettingSet=nt;exports.ButtonSetting=j;exports.ColorSetting=H;exports.DimensionSetting=q;exports.GapSetting=tt;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=z;exports.MarginSettingGroup=rt;exports.NumberSetting=w;exports.OpacitySetting=L;exports.SelectApiSettings=Q;exports.SelectSetting=T;exports.Setting=m;exports.SettingGroup=f;exports.StringSetting=y;exports.TabsContainerGroup=mt;exports.TabsSettings=et;exports.Toggle=Y;exports.UploadSetting=W;exports.WidthSetting=J;exports.iterateSettings=B;
164
+ `}}exports.AlignSetting=R;exports.BackgroundSettingSet=Ct;exports.BorderSettingSet=nt;exports.ButtonSetting=_;exports.ColorSetting=H;exports.DimensionSetting=q;exports.GapSetting=tt;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=z;exports.MarginSettingGroup=rt;exports.NumberSetting=w;exports.OpacitySetting=L;exports.SelectApiSettings=Q;exports.SelectSetting=T;exports.Setting=m;exports.SettingGroup=f;exports.StringSetting=y;exports.TabsContainerGroup=mt;exports.TabsSettings=et;exports.Toggle=Y;exports.UploadSetting=W;exports.WidthSetting=J;exports.iterateSettings=B;
@@ -31,8 +31,11 @@ const b = class b {
31
31
  this.onChange = t;
32
32
  const e = () => {
33
33
  this.isHandlingChange || (this.isHandlingChange = !0, this.changeTimeout && clearTimeout(this.changeTimeout), this.changeTimeout = setTimeout(() => {
34
- const i = this.getValues();
35
- this.lastChangeTime = Date.now(), t(i), this.updateVisibility(), this.isHandlingChange = !1;
34
+ const i = this.getValues(), s = this.calculateChanges(
35
+ this.initialValues,
36
+ i
37
+ );
38
+ Object.keys(s).length > 0 && (this.lastChangeTime = Date.now(), t(i), this.updateVisibility(), this.initialValues = i), this.isHandlingChange = !1;
36
39
  }, 50));
37
40
  };
38
41
  return this.changeHandlers.clear(), R(this.settings, (i, s) => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "builder-settings-types",
3
3
  "description": "builder settings",
4
- "version": "0.0.98",
4
+ "version": "0.0.99",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",
@@ -30,6 +30,7 @@
30
30
  "license": "MIT",
31
31
  "author": "onAim",
32
32
  "dependencies": {
33
+ "builder-settings-types": "^0.0.98",
33
34
  "nanoid": "^5.1.0",
34
35
  "vite-plugin-dts": "^4.5.0"
35
36
  }