builder-settings-types 0.0.133 → 0.0.134

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.
@@ -12,7 +12,7 @@
12
12
  <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"
13
13
  stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
14
14
  </svg>
15
- `,u.title=this.description,n.insertBefore(u,a)}}else{if(!r){const u=document.createElement("div");u.className="setting-group-description",u.textContent=this.description,o.insertBefore(u,o.firstChild)}p&&p.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const p=this.settings[r];o.appendChild(p.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};w.hiddenElements=new Set;let f=w;class S extends g{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const B="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class H extends S{constructor(t){super({...t,icon:t.icon||B,title:t.title||"Color"}),this.inputType="color",this.detectChange=t.detectChange}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}rgbToHex(t){const[e,i,s]=t.split(",").map(a=>parseInt(a.trim()));if(isNaN(e)||isNaN(i)||isNaN(s))return"#000000";const n=a=>{const o=a.toString(16);return o.length===1?"0"+o:o};return`#${n(e)}${n(i)}${n(s)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||B),s=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";const a=u=>{const m=u.value.split(",").map(N=>parseInt(N.trim()));if(m.length!==3||m.some(isNaN))return u.style.border="1px solid red",!1;const[d,v,C]=m,M=d>=0&&d<=255&&v>=0&&v<=255&&C>=0&&C<=255;return u.style.border=M?"":"1px solid red",M},o=document.createElement("div");o.className="color-preview",o.style.backgroundColor=this.value?`rgb(${this.value})`:"";const l=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=l.querySelector("input"),r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),p=r.querySelector("input");return h.oninput=u=>{var d;let m=u.target.value.trim();a(h)&&(this.value=m,(d=this.onChange)==null||d.call(this,m),p.value=this.rgbToHex(m),o.style.backgroundColor=`rgb(${m})`)},p.oninput=u=>{var v,C;const m=u.target.value,d=this.hexToRgb(m);this.value=d,(v=this.onChange)==null||v.call(this,d),(C=this.detectChange)==null||C.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},p.onchange=u=>{var v,C;const m=u.target.value,d=this.hexToRgb(m);this.value=d,(v=this.onChange)==null||v.call(this,d),(C=this.detectChange)==null||C.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},n.appendChild(o),n.appendChild(r),n.appendChild(l),t.appendChild(e),t.appendChild(n),this.value&&(h.value=this.value,p.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class b extends g{constructor(t){super(t),this.inputType="number",this.inputElement=null,this.mobileValue=t.mobile,this.validateProps(),this.value=this.validateValue(this.value)}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const n=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let o=Number(s.value);o<n&&(o=n),o>a&&(o=a),String(o)!==s.value&&(s.value=String(o)),this.setValue(o)}),s.addEventListener("blur",()=>{var a,o;const n=this.validateValue(Number(s.value));n!==Number(s.value)&&(s.value=String(n),this.setValue(n)),(o=(a=this.props).onBlur)==null||o.call(a)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(this.inputElement=e.querySelector("input.number-setting-input"),!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper"),this.inputElement&&(this.inputElement.style.paddingRight="35px");const i=document.createElement("span");return i.className="suffix-label",i.textContent=this.props.suffix,e.appendChild(i),e}setValue(t){const e=this.validateValue(t);super.setValue(e),this.inputElement&&this.inputElement.value!==String(e)&&(this.inputElement.value=String(e??""))}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}validateProps(){this.props.minValue!==void 0&&(this.props.default??0)<this.props.minValue&&console.warn(`Default value ${this.props.default} is less than minValue ${this.props.minValue}`),this.props.maxValue!==void 0&&(this.props.default??0)>this.props.maxValue&&console.warn(`Default value ${this.props.default} is greater than maxValue ${this.props.maxValue}`)}}const W=`
15
+ `,u.title=this.description,n.insertBefore(u,a)}}else{if(!r){const u=document.createElement("div");u.className="setting-group-description",u.textContent=this.description,o.insertBefore(u,o.firstChild)}p&&p.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const p=this.settings[r];o.appendChild(p.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};w.hiddenElements=new Set;let f=w;class S extends g{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const B="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class H extends S{constructor(t){super({...t,icon:t.icon||B,title:t.title||"Color"}),this.inputType="color",this.detectChange=t.detectChange}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}rgbToHex(t){const[e,i,s]=t.split(",").map(a=>parseInt(a.trim()));if(isNaN(e)||isNaN(i)||isNaN(s))return"#000000";const n=a=>{const o=a.toString(16);return o.length===1?"0"+o:o};return`#${n(e)}${n(i)}${n(s)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||B),s=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";const a=u=>{const m=u.value.split(",").map(N=>parseInt(N.trim()));if(m.length!==3||m.some(isNaN))return u.style.border="1px solid red",!1;const[d,v,C]=m,V=d>=0&&d<=255&&v>=0&&v<=255&&C>=0&&C<=255;return u.style.border=V?"":"1px solid red",V},o=document.createElement("div");o.className="color-preview",o.style.backgroundColor=this.value?`rgb(${this.value})`:"";const l=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=l.querySelector("input"),r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),p=r.querySelector("input");return h.oninput=u=>{var d;let m=u.target.value.trim();a(h)&&(this.value=m,(d=this.onChange)==null||d.call(this,m),p.value=this.rgbToHex(m),o.style.backgroundColor=`rgb(${m})`)},p.oninput=u=>{var v,C;const m=u.target.value,d=this.hexToRgb(m);this.value=d,(v=this.onChange)==null||v.call(this,d),(C=this.detectChange)==null||C.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},p.onchange=u=>{var v,C;const m=u.target.value,d=this.hexToRgb(m);this.value=d,(v=this.onChange)==null||v.call(this,d),(C=this.detectChange)==null||C.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},n.appendChild(o),n.appendChild(r),n.appendChild(l),t.appendChild(e),t.appendChild(n),this.value&&(h.value=this.value,p.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class b extends g{constructor(t){super(t),this.inputType="number",this.inputElement=null,this.mobileValue=t.mobile,this.validateProps(),this.value=this.validateValue(this.value)}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const n=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let o=Number(s.value);o<n&&(o=n),o>a&&(o=a),String(o)!==s.value&&(s.value=String(o)),this.setValue(o)}),s.addEventListener("blur",()=>{var a,o;const n=this.validateValue(Number(s.value));n!==Number(s.value)&&(s.value=String(n),this.setValue(n)),(o=(a=this.props).onBlur)==null||o.call(a)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(this.inputElement=e.querySelector("input.number-setting-input"),!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper"),this.inputElement&&(this.inputElement.style.paddingRight="35px");const i=document.createElement("span");return i.className="suffix-label",i.textContent=this.props.suffix,e.appendChild(i),e}setValue(t){const e=this.validateValue(t);super.setValue(e),this.inputElement&&this.inputElement.value!==String(e)&&(this.inputElement.value=String(e??""))}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}setMobileValue(t){this.mobileValue=t}validateProps(){this.props.minValue!==void 0&&(this.props.default??0)<this.props.minValue&&console.warn(`Default value ${this.props.default} is less than minValue ${this.props.minValue}`),this.props.maxValue!==void 0&&(this.props.default??0)>this.props.maxValue&&console.warn(`Default value ${this.props.default} is greater than maxValue ${this.props.maxValue}`)}}const W=`
16
16
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
17
17
  <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
18
18
  <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -73,7 +73,7 @@
73
73
  `))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",h=>{var r;h.relatedTarget&&t.contains(h.relatedTarget)||(r=this.onBlur)==null||r.call(this)},!0);const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const h=document.createElement("div");if(h.className="icon-title-container",this.props.icon){const r=this.createIcon(this.props.icon);h.appendChild(r)}if(this.props.title){const r=this.createLabel(this.props.title);h.appendChild(r)}t.appendChild(h)}const i=document.createElement("div");i.className="preview-button-container";const s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");n.className="preview-placeholder",n.innerHTML=z,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview";const a=document.createElement("button");a.className="delete-button",a.type="button",a.title="Delete image",a.innerHTML=P,this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(a);const o=document.createElement("button");o.className="upload-button",o.innerHTML=`
74
74
  <span class="upload-icon">${O}</span>
75
75
  <span class="upload-label">Upload</span>
76
- `;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(o),t.appendChild(i),t.appendChild(l),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=h=>{var r;h.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var r,p,u,m;const h=(r=l.files)==null?void 0:r[0];if(h)try{o.classList.add("loading"),o.disabled=!0;const d=new FormData,v=this.props.formFieldName||"file";d.append(v,h,h.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const M=this.props.requestMethod||"POST",N={...this.props.requestHeaders||{}},k=await(await fetch(C,{method:M,body:d,headers:N})).json();console.log("Upload response:",k);let E;if(this.props.parseResponse)E=this.props.parseResponse(k);else if(E=(p=k==null?void 0:k.data)==null?void 0:p.url,!E)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",E),this.value=E,this.updatePreviewState(E),(u=this.onChange)==null||u.call(this,E),(m=this.onBlur)==null||m.call(this)}catch(d){console.error("Error uploading file:",d),this.updatePreviewState(null)}finally{o.classList.remove("loading"),o.disabled=!1}},t}}class Z extends b{constructor(t={}){const e={title:t.title||"Height",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||J,...t};super(e),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}}const J=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
76
+ `;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(o),t.appendChild(i),t.appendChild(l),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=h=>{var r;h.stopPropagation(),this.value="",l.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var r,p,u,m;const h=(r=l.files)==null?void 0:r[0];if(h)try{o.classList.add("loading"),o.disabled=!0;const d=new FormData,v=this.props.formFieldName||"file";d.append(v,h,h.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const V=this.props.requestMethod||"POST",N={...this.props.requestHeaders||{}},k=await(await fetch(C,{method:V,body:d,headers:N})).json();console.log("Upload response:",k);let E;if(this.props.parseResponse)E=this.props.parseResponse(k);else if(E=(p=k==null?void 0:k.data)==null?void 0:p.url,!E)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",E),this.value=E,this.updatePreviewState(E),(u=this.onChange)==null||u.call(this,E),(m=this.onBlur)==null||m.call(this)}catch(d){console.error("Error uploading file:",d)}finally{o.classList.remove("loading"),o.disabled=!1,l.value=""}else l.value=""},t}}class Z extends b{constructor(t={}){const e={title:t.title||"Height",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||J,...t};super(e),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}}const J=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
77
77
  <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
78
78
  </svg>`;class X extends b{constructor(t={}){const e={title:t.title||"Width",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||Q,...t};super(e),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}}const Q=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
79
79
  <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
@@ -124,7 +124,7 @@
124
124
  font-weight: ${s};
125
125
  font-size: ${n}px;
126
126
  text-align: ${a};
127
- `}}class V extends g{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,h=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(o.value);r<l&&(r=l),r>h&&(r=h),o.value=String(r)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const h=Number(l);isNaN(h)||(this.value=h)}this.onChange&&this.onChange(this.value)}),i}}class ut extends f{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{marginTop:new V({title:"Top",icon:pt,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new V({title:"Right",icon:gt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new V({title:"Bottom",icon:mt,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new V({title:"Left",icon:ft,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,s=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
127
+ `}}class M extends g{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,h=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(o.value);r<l&&(r=l),r>h&&(r=h),o.value=String(r)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const h=Number(l);isNaN(h)||(this.value=h)}this.onChange&&this.onChange(this.value)}),i}}class ut extends f{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{marginTop:new M({title:"Top",icon:pt,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new M({title:"Right",icon:gt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new M({title:"Bottom",icon:mt,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new M({title:"Left",icon:ft,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,s=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
128
128
  margin-top: ${t};
129
129
  margin-right: ${e};
130
130
  margin-bottom: ${i};
@@ -478,6 +478,9 @@ class b extends g {
478
478
  getMobileValue() {
479
479
  return this.mobileValue;
480
480
  }
481
+ setMobileValue(t) {
482
+ this.mobileValue = t;
483
+ }
481
484
  validateProps() {
482
485
  this.props.minValue !== void 0 && (this.props.default ?? 0) < this.props.minValue && console.warn(`Default value ${this.props.default} is less than minValue ${this.props.minValue}`), this.props.maxValue !== void 0 && (this.props.default ?? 0) > this.props.maxValue && console.warn(`Default value ${this.props.default} is greater than maxValue ${this.props.maxValue}`);
483
486
  }
@@ -840,7 +843,7 @@ class U extends g {
840
843
  const l = document.createElement("input");
841
844
  return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), t.appendChild(l), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = (h) => {
842
845
  var r;
843
- h.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
846
+ h.stopPropagation(), this.value = "", l.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
844
847
  }, o.onclick = () => {
845
848
  l.click();
846
849
  }, l.onchange = async () => {
@@ -869,10 +872,12 @@ class U extends g {
869
872
  );
870
873
  console.log("Final URL:", E), this.value = E, this.updatePreviewState(E), (u = this.onChange) == null || u.call(this, E), (m = this.onBlur) == null || m.call(this);
871
874
  } catch (d) {
872
- console.error("Error uploading file:", d), this.updatePreviewState(null);
875
+ console.error("Error uploading file:", d);
873
876
  } finally {
874
- o.classList.remove("loading"), o.disabled = !1;
877
+ o.classList.remove("loading"), o.disabled = !1, l.value = "";
875
878
  }
879
+ else
880
+ l.value = "";
876
881
  }, t;
877
882
  }
878
883
  }
package/dist/index.d.ts CHANGED
@@ -294,6 +294,7 @@ export declare class NumberSetting extends Setting<number, NumberSettingsProps>
294
294
  setValue(value: number | undefined): void;
295
295
  private validateValue;
296
296
  getMobileValue(): number | undefined;
297
+ setMobileValue(value: number | undefined): void;
297
298
  private validateProps;
298
299
  }
299
300
 
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.133",
4
+ "version": "0.0.134",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",