builder-settings-types 0.0.139 → 0.0.140
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
|
-
`,d.title=this.description,n.insertBefore(d,a)}}else{if(!r){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,o.insertBefore(d,o.firstChild)}u&&u.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 u=this.settings[r];o.appendChild(u.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 m{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=d=>{const g=d.value.split(",").map(I=>parseInt(I.trim()));if(g.length!==3||g.some(isNaN))return d.style.border="1px solid red",!1;const[p,C,v]=g,
|
|
15
|
+
`,d.title=this.description,n.insertBefore(d,a)}}else{if(!r){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,o.insertBefore(d,o.firstChild)}u&&u.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 u=this.settings[r];o.appendChild(u.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 m{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=d=>{const g=d.value.split(",").map(I=>parseInt(I.trim()));if(g.length!==3||g.some(isNaN))return d.style.border="1px solid red",!1;const[p,C,v]=g,y=p>=0&&p<=255&&C>=0&&C<=255&&v>=0&&v<=255;return d.style.border=y?"":"1px solid red",y},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");h.readOnly=!0;const r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=r.querySelector("input");return h.oninput=d=>{var p;let g=d.target.value.trim();a(h)&&(this.value=g,(p=this.onChange)==null||p.call(this,g),u.value=this.rgbToHex(g),o.style.backgroundColor=`rgb(${g})`)},u.oninput=d=>{var C,v;const g=d.target.value,p=this.hexToRgb(g);this.value=p,(C=this.onChange)==null||C.call(this,p),(v=this.detectChange)==null||v.call(this,p),h.value=p,o.style.backgroundColor=`rgb(${p})`},u.onchange=d=>{var C,v;const g=d.target.value,p=this.hexToRgb(g);this.value=p,(C=this.onChange)==null||C.call(this,p),(v=this.detectChange)==null||v.call(this,p),h.value=p,o.style.backgroundColor=`rgb(${p})`},n.appendChild(o),n.appendChild(r),n.appendChild(l),t.appendChild(e),t.appendChild(n),this.value&&(h.value=this.value,u.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class b extends m{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",l=>{var h;l.relatedTarget&&t.contains(l.relatedTarget)||(h=this.onBlur)==null||h.call(this)},!0);const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const l=document.createElement("div");if(l.className="icon-title-container",this.props.icon){const h=this.createIcon(this.props.icon);l.appendChild(h)}if(this.props.title){const h=this.createLabel(this.props.title);l.appendChild(h)}t.appendChild(l)}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");if(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",this.props.delete){const l=document.createElement("button");l.className="delete-button",l.type="button",l.title="Delete image",l.innerHTML=P,this.previewWrapper.appendChild(l),l.onclick=h=>{var r;h.stopPropagation(),this.value="",o.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")}}this.previewWrapper.appendChild(this.previewEl);const a=document.createElement("button");a.className="upload-button",a.innerHTML=`
|
|
74
74
|
<span class="upload-icon">${O}</span>
|
|
75
75
|
<span class="upload-label">Upload</span>
|
|
76
|
-
`;const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(o),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=()=>{o.click()},o.onchange=async()=>{var h,r,u,d;const l=(h=o.files)==null?void 0:h[0];if(l)try{a.classList.add("loading"),a.disabled=!0;const g=new FormData,p=this.props.formFieldName||"file";g.append(p,l,l.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const v=this.props.requestMethod||"POST",
|
|
76
|
+
`;const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(o),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=()=>{o.click()},o.onchange=async()=>{var h,r,u,d;const l=(h=o.files)==null?void 0:h[0];if(l)try{a.classList.add("loading"),a.disabled=!0;const g=new FormData,p=this.props.formFieldName||"file";g.append(p,l,l.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const v=this.props.requestMethod||"POST",y={...this.props.requestHeaders||{}},k=await(await fetch(C,{method:v,body:g,headers:y})).json();console.log("Upload response:",k);let x;if(this.props.parseResponse)x=this.props.parseResponse(k);else if(x=(r=k==null?void 0:k.data)==null?void 0:r.url,!x)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",x),this.value=x,this.updatePreviewState(x),(u=this.onChange)==null||u.call(this,x),(d=this.onBlur)==null||d.call(this)}catch(g){console.error("Error uploading file:",g)}finally{a.classList.remove("loading"),a.disabled=!1,o.value=""}else o.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"/>
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
<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">
|
|
82
82
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
83
83
|
</svg>
|
|
84
|
-
`;class K 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.hasInitializedOptions=!1,this.selectedOptionIndex=null,t.default!==void 0&&(this.value=t.default),this.initializeOptions(t),!t.getOptionsAsync&&this.value!==void 0){const e=this._options.findIndex(i=>JSON.stringify(i.value)===JSON.stringify(this.value));e!==-1&&(this.selectedOptionIndex=e)}t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}initializeOptions(t){this.hasInitializedOptions&&!t.getOptionsAsync||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?this.isLoading=!0: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");if(a.className="select-value",this.isLoading)a.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
|
|
84
|
+
`;class K 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.hasInitializedOptions=!1,this.selectedOptionIndex=null,t.default!==void 0&&(this.value=t.default),this.initializeOptions(t),!t.getOptionsAsync&&this.value!==void 0){const e=this._options.findIndex(i=>JSON.stringify(i.value)===JSON.stringify(this.value));e!==-1&&(this.selectedOptionIndex=e)}t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}initializeOptions(t){this.hasInitializedOptions&&!t.getOptionsAsync||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?this.isLoading=!0: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");if(a.className="select-value",this.isLoading)a.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";a.textContent=l}e.appendChild(a)}else{const n=document.createElement("span");if(this.isLoading)n.textContent=this.props.loadingText||"Loading options...";else{const a=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,o=a&&typeof a.name=="string"?a.name:"Select an option";n.textContent=o}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=Y,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=>{const a=new Set(this._options.map(l=>JSON.stringify(l.value))),o=n.filter(l=>!a.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(h=>JSON.stringify(h.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),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(n=>{const a=new Set(this._options.map(l=>JSON.stringify(l.value))),o=n.filter(l=>!a.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.value!==void 0){const l=this._options.findIndex(h=>JSON.stringify(h.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})),t}selectApiOption(t,e,i){var l,h,r,u;const s=t.target,n=s.querySelector(".select-api-radio")||((l=s.closest(".select-api-option"))==null?void 0:l.querySelector(".select-api-radio"));n&&(n.checked=!0),this.selectedOptionIndex=e;const a=this._options[e].value;this.value=a;const o=i.querySelector(".select-value");if(o)o.textContent=this._options[e].name;else{const d=i.firstChild;d&&d.tagName==="SPAN"&&(d.textContent=this._options[e].name)}this.isOpen=!1,(h=this.optionsListEl)==null||h.classList.remove("open"),(r=this.svgContainer)==null||r.classList.remove("open"),(u=this.onChange)==null||u.call(this,a),this.detectChangeCallback&&this.detectChangeCallback(a)}updateOptionsList(){!this.optionsListEl||!this.buttonEl||(this.optionsListEl.innerHTML="",this._options.forEach((t,e)=>{var s;const i=this.createOption(t,e);i.onclick=n=>{this.buttonEl&&this.selectApiOption(n,e,this.buttonEl)},(s=this.optionsListEl)==null||s.appendChild(i)}))}updateButtonText(t,e=!1){if(!this.buttonEl)return;const i=this.buttonEl.querySelector(".select-value")||this.buttonEl.firstChild;if(i)if(e)i.textContent=t||"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)i.textContent=this.props.loadingText||"Loading options...",this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="");else{const s=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,n=s&&typeof s.name=="string"?s.name:"Select an option";i.textContent=t||n,this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="")}}setDetectChange(t){this.detectChangeCallback=t}setValue(t){this.value=t,this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t)),this.updateButtonText()}}class tt 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 h,r;const l=((r=(h=this.props.options)==null?void 0:h.find(u=>u.status===s.checked))==null?void 0:r.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"),h=this.props.activeColor||"#4CAF50",r=this.props.inactiveColor||"#ccc";l.textContent=`
|
|
85
85
|
.toggle-switch input:checked + .toggle-slider {
|
|
86
86
|
background-color: ${h};
|
|
87
87
|
}
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
font-weight: ${s};
|
|
125
125
|
font-size: ${n}px;
|
|
126
126
|
text-align: ${a};
|
|
127
|
-
`}}class
|
|
127
|
+
`}}class V extends m{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`
|
|
128
128
|
margin-top: ${t};
|
|
129
129
|
margin-right: ${e};
|
|
130
130
|
margin-bottom: ${i};
|
|
@@ -963,8 +963,8 @@ class dt extends m {
|
|
|
963
963
|
if (a.className = "select-value", this.isLoading)
|
|
964
964
|
a.textContent = this.props.loadingText || "Loading options...";
|
|
965
965
|
else {
|
|
966
|
-
const o = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null;
|
|
967
|
-
a.textContent =
|
|
966
|
+
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";
|
|
967
|
+
a.textContent = l;
|
|
968
968
|
}
|
|
969
969
|
e.appendChild(a);
|
|
970
970
|
} else {
|
|
@@ -972,8 +972,8 @@ class dt extends m {
|
|
|
972
972
|
if (this.isLoading)
|
|
973
973
|
n.textContent = this.props.loadingText || "Loading options...";
|
|
974
974
|
else {
|
|
975
|
-
const a = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null;
|
|
976
|
-
n.textContent =
|
|
975
|
+
const a = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null, o = a && typeof a.name == "string" ? a.name : "Select an option";
|
|
976
|
+
n.textContent = o;
|
|
977
977
|
}
|
|
978
978
|
e.appendChild(n);
|
|
979
979
|
}
|
|
@@ -1049,8 +1049,8 @@ class dt extends m {
|
|
|
1049
1049
|
else if (this.isLoading)
|
|
1050
1050
|
i.textContent = this.props.loadingText || "Loading options...", this.buttonEl.classList.remove("error"), this.buttonEl.removeAttribute("disabled"), this.svgContainer && (this.svgContainer.style.display = "");
|
|
1051
1051
|
else {
|
|
1052
|
-
const s = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null;
|
|
1053
|
-
i.textContent = t ||
|
|
1052
|
+
const s = this.selectedOptionIndex !== null && this._options && this.selectedOptionIndex >= 0 && this.selectedOptionIndex < this._options.length ? this._options[this.selectedOptionIndex] : null, n = s && typeof s.name == "string" ? s.name : "Select an option";
|
|
1053
|
+
i.textContent = t || n, this.buttonEl.classList.remove("error"), this.buttonEl.removeAttribute("disabled"), this.svgContainer && (this.svgContainer.style.display = "");
|
|
1054
1054
|
}
|
|
1055
1055
|
}
|
|
1056
1056
|
setDetectChange(t) {
|
package/package.json
CHANGED