builder-settings-types 0.0.90 → 0.0.91
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.
- package/dist/builder-settings-types.cjs.js +24 -24
- package/dist/builder-settings-types.es.js +159 -154
- package/dist/index.d.ts +4 -1
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(h=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(h|=0));for(;h--;)t+=A[e[h]&63];return t};function R(h,t){for(const e in h)if(h.hasOwnProperty(e)){const i=h[e];t(e,i)}}const x=class x{constructor(t){this.elementRef=null,this.isHidden=!1,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.hideCondition=t.hideCondition,Object.assign(this,t.settings)}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}setOnChange(t){return this.onChange=t,R(this.settings,(e,i)=>{i.setOnChange(
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(h=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(h|=0));for(;h--;)t+=A[e[h]&63];return t};function R(h,t){for(const e in h)if(h.hasOwnProperty(e)){const i=h[e];t(e,i)}}const x=class x{constructor(t){this.elementRef=null,this.isHidden=!1,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.hideCondition=t.hideCondition,Object.assign(this,t.settings)}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}setOnChange(t){return this.onChange=t,R(this.settings,(e,i)=>{i.setOnChange(n=>{t(n),this.updateVisibility()})}),this}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 n=this.settings[i];n instanceof x?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof x?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,x.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 r=document.createElement("span");r.className="group-icon",r.innerHTML=this.icon,i.appendChild(r)}const n=document.createElement("h3");n.textContent=this.title,i.appendChild(n);const s=document.createElement("div");if(s.className="actions-section",this.description&&this.isCollapsed){const r=document.createElement("span");r.className="info-marker",r.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"/>
|
|
5
5
|
</svg>
|
|
6
|
-
`,r.title=this.description,
|
|
6
|
+
`,r.title=this.description,s.appendChild(r)}const o=document.createElement("span");o.className="setting-group-arrow",o.innerHTML=`
|
|
7
7
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8
8
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
9
|
</svg>
|
|
10
|
-
`,this.isCollapsed&&o.classList.add("rotated"),
|
|
10
|
+
`,this.isCollapsed&&o.classList.add("rotated"),s.appendChild(o);const a=document.createElement("div");if(a.className="setting-group-content",this.isCollapsed&&(a.classList.add("collapsed"),e.classList.add("collapsed-view"),o.classList.add("rotated"),t.classList.add("collapsed")),this.isMain&&a.classList.add("main-content"),this.description&&!this.isCollapsed){const r=document.createElement("div");r.className="setting-group-description",r.textContent=this.description,a.appendChild(r)}const l=()=>{this.isCollapsed=!this.isCollapsed,a.classList.toggle("collapsed"),e.classList.toggle("collapsed-view"),o.classList.toggle("rotated"),t.classList.toggle("collapsed",this.isCollapsed),e.setAttribute("aria-expanded",(!this.isCollapsed).toString());const r=a.querySelector(".setting-group-description"),u=s.querySelector(".info-marker");if(this.description)if(this.isCollapsed){if(r&&r.remove(),!u){const d=document.createElement("span");d.className="info-marker",d.innerHTML=`
|
|
11
11
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
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,
|
|
15
|
+
`,d.title=this.description,s.insertBefore(d,o)}}else{if(!r){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,a.insertBefore(d,a.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];a.appendChild(u.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",a.appendChild(r)}return e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(a),this.elementRef=t,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()}};x.hiddenElements=new Set;let f=x;function $(h){switch(h){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class m{constructor(t={}){this.props=t,this.id=t.id||I(),this.value=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const o=document.createElement("div");if(o.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);o.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);o.appendChild(a)}e.appendChild(o)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");this.inputEl=n,n.value=String(t.value||$(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"";const s=o=>{const a=o.target;let l=a.value;switch(t.inputType){case"number":l=Number(a.value);break;case"color":l=a.value;break;case"date":l=a.value;break;case"select":l=a.value;break;case"text":l=a.value;break;case"button":l=a.value;break;default:l=a.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return n.addEventListener("input",s),n.addEventListener("change",s),t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class y 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 T="<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 S extends y{constructor(t){super({...t,icon:t.icon||T,title:t.title||"Color"}),this.inputType="color"}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${n}`}rgbToHex(t){const[e,i,n]=t.split(",").map(o=>parseInt(o.trim()));if(isNaN(e)||isNaN(i)||isNaN(n))return"#000000";const s=o=>{const a=o.toString(16);return a.length===1?"0"+a:a};return`#${s(e)}${s(i)}${s(n)}`}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||T),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const o=d=>{const g=d.value.split(",").map(O=>parseInt(O.trim()));if(g.length!==3||g.some(isNaN))return d.style.border="1px solid red",!1;const[p,C,L]=g,E=p>=0&&p<=255&&C>=0&&C<=255&&L>=0&&L<=255;return d.style.border=E?"":"1px solid red",E},a=document.createElement("div");a.className="color-preview",a.style.backgroundColor=this.value?`rgb(${this.value})`:"";const l=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),c=l.querySelector("input"),r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=r.querySelector("input");return c.oninput=d=>{var p;let g=d.target.value.trim();o(c)&&(this.value=g,(p=this.onChange)==null||p.call(this,g),u.value=this.rgbToHex(g),a.style.backgroundColor=`rgb(${g})`)},u.oninput=d=>{var C;const g=d.target.value,p=this.hexToRgb(g);this.value=p,(C=this.onChange)==null||C.call(this,p),c.value=p,a.style.backgroundColor=`rgb(${p})`},s.appendChild(a),s.appendChild(r),s.appendChild(l),t.appendChild(e),t.appendChild(s),this.value&&(c.value=this.value,u.value=this.rgbToHex(this.value),a.style.backgroundColor=`rgb(${this.value})`),t}}class v extends m{constructor(t={}){super(t),this.inputType="number"}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 o=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(s.value);l<o&&(l=o),l>a&&(l=a),s.value=String(l)})},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.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class b extends v{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||_,title:t.title||"Opacity"}),this.inputType="number"}}const _=`
|
|
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="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
18
18
|
<path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
|
|
@@ -24,7 +24,7 @@
|
|
|
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 N 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
|
|
27
|
+
`;class N 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 s=document.createElement("div");if(s.className="icon-container",this.props.icon){const o=this.createIcon(this.props.icon);s.appendChild(o)}if(this.props.title){const o=this.createLabel(this.props.title);s.appendChild(o)}t.appendChild(s)}else{const s=document.createElement("div");t.appendChild(s)}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 s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((s,o)=>{const a=this.createOption(s,o);a.onclick=l=>this.selectOption(l,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=G,t.appendChild(n),this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=s=>{var o,a;this.isOpen&&!t.contains(s.target)&&(this.isOpen=!1,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var s,o,a;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=n.name,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((c,r)=>{r===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=n=>{this.buttonEl&&this.selectOption(n,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 B 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,13 +45,13 @@
|
|
|
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(
|
|
48
|
+
`}].forEach(s=>{const o=document.createElement("button");o.className="align-option-button",o.innerHTML=s.icon,this.value===s.name&&o.classList.add("selected"),o.addEventListener("click",()=>{var a;i.querySelectorAll(".align-option-button").forEach(l=>l.classList.remove("selected")),o.classList.add("selected"),this.value=s.name,(a=this.onChange)==null||a.call(this,this.value)}),i.appendChild(o)}),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 v({title:"Width",default:this.value.width,suffix:"px",minValue:this.minWidth,maxValue:this.maxWidth,icon:F}),this.heightSetting=new v({title:"Height",default:this.value.height,suffix:"px",minValue:this.minHeight,maxValue:this.maxHeight,icon:U}),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:n}=this.value;n>0&&(this.aspectRatio=i/n)}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>`:`
|
|
52
52
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
53
53
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.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"/>
|
|
54
|
-
</svg>`}setValue(t){if(t&&typeof t.width=="number"&&typeof t.height=="number"){let e=Math.max(this.minWidth,t.width);this.maxWidth&&(e=Math.min(this.maxWidth,e));let i=Math.max(this.minHeight,t.height);this.maxHeight&&(i=Math.min(this.maxHeight,i)),this.value={width:e,height:i},this.locked&&this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.isUpdating=!0;try{this.widthSetting.setValue(this.value.width),this.heightSetting.setValue(this.value.height)}finally{this.isUpdating=!1}}}draw(){const t=document.createElement("div");t.className="dimension-setting-container",this.locked&&t.classList.add("aspect-locked");const e=this.widthSetting.draw(),i=this.heightSetting.draw(),
|
|
54
|
+
</svg>`}setValue(t){if(t&&typeof t.width=="number"&&typeof t.height=="number"){let e=Math.max(this.minWidth,t.width);this.maxWidth&&(e=Math.min(this.maxWidth,e));let i=Math.max(this.minHeight,t.height);this.maxHeight&&(i=Math.min(this.maxHeight,i)),this.value={width:e,height:i},this.locked&&this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.isUpdating=!0;try{this.widthSetting.setValue(this.value.width),this.heightSetting.setValue(this.value.height)}finally{this.isUpdating=!1}}}draw(){const t=document.createElement("div");t.className="dimension-setting-container",this.locked&&t.classList.add("aspect-locked");const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("button");return s.className="dimension-lock-icon",s.setAttribute("type","button"),s.setAttribute("aria-pressed",String(this.locked)),s.setAttribute("aria-label",this.locked?"Unlock aspect ratio":"Lock aspect ratio"),s.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio",s.innerHTML=this.getLockSVG(this.locked),s.onclick=o=>{o.preventDefault(),this.toggleLock(s)},n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}isLocked(){return this.locked}setLocked(t){if(this.locked!==t){if(this.locked=t,this.locked&&this.value){const{width:i,height:n}=this.value;n>0&&(this.aspectRatio=i/n)}const e=document.querySelector(".dimension-setting-container .dimension-lock-icon");if(e instanceof HTMLElement){e.innerHTML=this.getLockSVG(this.locked),e.setAttribute("aria-pressed",String(this.locked)),e.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const i=e.closest(".dimension-setting-container");i&&(this.locked?i.classList.add("aspect-locked"):i.classList.remove("aspect-locked"))}}}}const F=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
55
55
|
<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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
56
56
|
</svg>`,U=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
57
57
|
<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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -68,16 +68,16 @@
|
|
|
68
68
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
|
|
69
69
|
<path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
70
70
|
</svg>
|
|
71
|
-
`;class W extends m{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl)}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl||!this.emptyStateEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),
|
|
71
|
+
`;class W extends m{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl)}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl||!this.emptyStateEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),n=e==null?void 0:e.querySelector(".preview-placeholder");t&&t!==""?(this.previewWrapper.classList.add("has-image"),this.previewEl.src=t,this.previewWrapper.style.display="block",n&&n instanceof HTMLElement&&(n.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
|
|
72
72
|
<span class="upload-icon">${H}</span>
|
|
73
73
|
<span class="upload-label">Replace</span>
|
|
74
|
-
`)):(this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewWrapper.style.display="none",
|
|
74
|
+
`)):(this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewWrapper.style.display="none",n&&n instanceof HTMLElement&&(n.style.display="none"),i&&(i.innerHTML=`
|
|
75
75
|
<span class="upload-icon">${H}</span>
|
|
76
76
|
<span class="upload-label">Upload</span>
|
|
77
|
-
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const c=document.createElement("div");if(c.className="icon-title-container",this.props.icon){const r=this.createIcon(this.props.icon);c.appendChild(r)}if(this.props.title){const r=this.createLabel(this.props.title);c.appendChild(r)}t.appendChild(c)}const i=document.createElement("div");i.className="preview-button-container";const
|
|
77
|
+
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const c=document.createElement("div");if(c.className="icon-title-container",this.props.icon){const r=this.createIcon(this.props.icon);c.appendChild(r)}if(this.props.title){const r=this.createLabel(this.props.title);c.appendChild(r)}t.appendChild(c)}const i=document.createElement("div");i.className="preview-button-container";const n=this.value&&this.value!=="";n||i.classList.add("no-image");const s=document.createElement("div");s.className="preview-placeholder",s.innerHTML=V,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.emptyStateEl=document.createElement("div"),this.emptyStateEl.className="empty-state",this.emptyStateEl.innerHTML=V,this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview";const o=document.createElement("button");o.className="delete-button",o.type="button",o.title="Delete image",o.innerHTML=z,this.previewWrapper.appendChild(this.emptyStateEl),this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(o);const a=document.createElement("button");a.className="upload-button",a.innerHTML=`
|
|
78
78
|
<span class="upload-icon">${H}</span>
|
|
79
79
|
<span class="upload-label">Upload</span>
|
|
80
|
-
`;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(
|
|
80
|
+
`;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(s),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(l),n?this.updatePreviewState(this.value):this.updatePreviewState(null),o.onclick=c=>{var r;c.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")},a.onclick=()=>{l.click()},l.onchange=async()=>{var r,u,d;const c=(r=l.files)==null?void 0:r[0];if(c)try{a.classList.add("loading"),a.disabled=!0;const g=new FormData,p=this.props.formFieldName||"file";g.append(p,c,c.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const L=this.props.requestMethod||"POST",E={...this.props.requestHeaders||{}},k=await(await fetch(C,{method:L,body:g,headers:E})).json();let w;if(this.props.parseResponse)w=this.props.parseResponse(k);else if(w=(u=k==null?void 0:k.data)==null?void 0:u.url,!w)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=w,this.updatePreviewState(w),(d=this.onChange)==null||d.call(this,w)}catch(g){console.error("Error uploading file:",g),this.updatePreviewState(null)}finally{a.classList.remove("loading"),a.disabled=!1}},t}}class D extends m{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new v({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const Z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
81
81
|
<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"/>
|
|
82
82
|
</svg>`;class J extends m{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new v({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:P}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const P=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
83
83
|
<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"/>
|
|
@@ -85,9 +85,9 @@
|
|
|
85
85
|
<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">
|
|
86
86
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
87
87
|
</svg>
|
|
88
|
-
`;class Q extends m{constructor(t={}){super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.initializeOptions(t),t.default!==void 0&&(this.value=t.default,this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),t.onChange&&this.setOnChange(t.onChange),t.
|
|
88
|
+
`;class Q extends m{constructor(t={}){super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.initializeOptions(t),t.default!==void 0&&(this.value=t.default,this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}initializeOptions(t){this.hasInitializedOptions||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?(this.isLoading=!0,t.default!==void 0&&(this.value=t.default)):t.default!==void 0&&(this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t.default))),this.hasInitializedOptions=!0)}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const n=document.createElement("input");return n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",i.appendChild(n),this.selectedOptionIndex===e&&(n.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 s=document.createElement("div");s.className="select-label",s.textContent=this.props.title,e.appendChild(s);const o=document.createElement("span");o.className="select-value",this.isLoading?o.textContent=this.props.loadingText||"Loading options...":o.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(o)}else{const s=document.createElement("span");this.isLoading?s.textContent=this.props.loadingText||"Loading options...":s.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(s)}e.onclick=()=>{var s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.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((s,o)=>{const a=this.createOption(s,o);a.onclick=l=>this.selectApiOption(l,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=X,t.appendChild(n),n.onclick=()=>{var s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(o=>JSON.stringify(o.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{const o=new Set(this._options.map(l=>JSON.stringify(l.value))),a=s.filter(l=>!o.has(JSON.stringify(l.value)));this._options.push(...a),this.isLoading=!1,this.value!==void 0&&this.selectedOptionIndex===null&&(this.selectedOptionIndex=this._options.findIndex(l=>JSON.stringify(l.value)===JSON.stringify(this.value))),this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),t}selectApiOption(t,e,i){var s,o;const n=this._options[e];if(n){const a=n.value;this.value=a,this.onChange&&this.onChange(a),this.detectChangeCallback&&this.detectChangeCallback(a),this.selectedOptionIndex=e,this.isOpen=!1,this.updateButtonText(),(s=this.optionsListEl)==null||s.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-api-radio").forEach((c,r)=>{c.checked=r===e})}}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-api-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);this.selectedOptionIndex===e&&i.classList.add("selected"),i.onclick=n=>{this.buttonEl&&this.selectApiOption(n,e,this.buttonEl)},i.tabIndex=0,i.addEventListener("keydown",n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this.buttonEl&&this.selectApiOption(n,e,this.buttonEl))}),this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;const e=this.buttonEl.querySelector(".select-value"),i=this.buttonEl.classList.contains("has-label"),n=this.buttonEl.querySelector(".select-label");if(this.isLoading){this.buttonEl.classList.add("loading");const o=this.props.loadingText||"Loading options...";if(e)e.textContent=o;else if(i&&this.props.title&&!n){this.buttonEl.innerHTML="";const a=document.createElement("div");a.className="select-label",a.textContent=this.props.title,this.buttonEl.appendChild(a);const l=document.createElement("span");l.className="select-value",l.textContent=o,this.buttonEl.appendChild(l)}else this.buttonEl.textContent=o;return}this.buttonEl.classList.remove("loading","error");let s;if(t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),s=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?s=this._options[this.selectedOptionIndex].name:s="Select an option",e)e.textContent=s;else if(i&&this.props.title&&!n){this.buttonEl.innerHTML="";const o=document.createElement("div");o.className="select-label",o.textContent=this.props.title,this.buttonEl.appendChild(o);const a=document.createElement("span");a.className="select-value",a.textContent=s,this.buttonEl.appendChild(a)}else this.buttonEl.textContent=s}setDetectChange(t){this.detectChangeCallback=t}}class Y extends m{constructor(t){super(t),this.inputType="text",this.value=t.default??!1}draw(){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 o=document.createElement("span");o.className="toggle-icon",o.innerHTML=this.props.icon,e.appendChild(o)}if(this.props.title){const o=document.createElement("span");o.textContent=this.props.title,e.appendChild(o)}t.appendChild(e);const i=document.createElement("label");i.className="toggle-switch";const n=document.createElement("input");n.type="checkbox",n.checked=this.value??!1,n.addEventListener("change",()=>{this.value=n.checked,this.onChange&&this.onChange(this.value)});const s=document.createElement("span");return s.className="toggle-slider",i.appendChild(n),i.appendChild(s),t.appendChild(i),t}}const K=`<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
89
89
|
<path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
90
|
-
</svg>`;class tt extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const
|
|
90
|
+
</svg>`;class tt extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const n=document.createElement("div");n.classList.add("gap-label-container");const s=document.createElement("div");s.classList.add("gap-setting-icon"),s.innerHTML=this.props.icon||K,n.appendChild(s);const o=document.createElement("label");o.classList.add("gap-input-label"),o.textContent=t,n.appendChild(o),i.appendChild(n);const a=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var C;const d=this.props.minValue??0,g=this.props.maxValue??100;let p=Number(u.value);p<d&&(p=d),p>g&&(p=g),u.value=String(p),this.value=p,this.inputValues[t]=p,console.log(`Gap Setting (${t}): ${p}${this.props.suffix||""}`),(C=this.onChange)==null||C.call(this,p)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:a});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const c=l.querySelector("input.gap-setting-input");c&&(c.style.paddingRight="35px");const r=document.createElement("span");return r.className="suffix-label",r.textContent=this.props.suffix,l.appendChild(r),i.appendChild(l),i}}const et=`
|
|
91
91
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
92
92
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
93
93
|
</svg>
|
|
@@ -95,9 +95,9 @@
|
|
|
95
95
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
96
96
|
<path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
97
97
|
</svg>
|
|
98
|
-
`;class st extends f{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new v({title:"Size",icon:it,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new S({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new b({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new v({title:"Radius",icon:et,default:(t==null?void 0:t.radius)??12,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,
|
|
98
|
+
`;class st extends f{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new v({title:"Size",icon:it,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new S({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new b({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new v({title:"Radius",icon:et,default:(t==null?void 0:t.radius)??12,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,n=this.settings.size.value??0;return`
|
|
99
99
|
border-color: ${t};
|
|
100
|
-
border-width: ${
|
|
100
|
+
border-width: ${n}px;
|
|
101
101
|
border-radius: ${i}px;
|
|
102
102
|
opacity: ${e/100};
|
|
103
103
|
`}}const nt=`
|
|
@@ -112,18 +112,18 @@
|
|
|
112
112
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
113
113
|
<path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
114
114
|
</svg>
|
|
115
|
-
`;class lt extends f{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new S({default:t.colorDefault??"0, 0, 30"}),opacity:new b({default:t.colorOpacityDefault??100}),fontFamily:new N({title:"Font",icon:nt,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new N({title:"Weight",icon:ot,default:t.fontWeightDefault??"400",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new v({title:"Size",icon:at,default:t.fontSizeDefault??12,suffix:"px"}),align:new B({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",
|
|
115
|
+
`;class lt extends f{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new S({default:t.colorDefault??"0, 0, 30"}),opacity:new b({default:t.colorOpacityDefault??100}),fontFamily:new N({title:"Font",icon:nt,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new N({title:"Weight",icon:ot,default:t.fontWeightDefault??"400",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new v({title:"Size",icon:at,default:t.fontSizeDefault??12,suffix:"px"}),align:new B({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",n=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,o=this.settings.align.value??"left";return`
|
|
116
116
|
color: ${t};
|
|
117
117
|
opacity: ${e/100};
|
|
118
118
|
font-family: ${i};
|
|
119
|
-
font-weight: ${
|
|
120
|
-
font-size: ${
|
|
119
|
+
font-weight: ${n};
|
|
120
|
+
font-size: ${s}px;
|
|
121
121
|
text-align: ${o};
|
|
122
|
-
`}}class M 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=a=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(a.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(a.max=String(this.props.maxValue)),this.props.className&&a.classList.add(this.props.className),a.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,c=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(a.value);r<l&&(r=l),r>c&&(r=c),a.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
|
|
122
|
+
`}}class M 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=a=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(a.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(a.max=String(this.props.maxValue)),this.props.className&&a.classList.add(this.props.className),a.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,c=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(a.value);r<l&&(r=l),r>c&&(r=c),a.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 n=i.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,i.appendChild(s);const o=i.querySelector("input");return o&&(o.oninput=a=>{const l=a.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const c=Number(l);isNaN(c)||(this.value=c)}this.onChange&&this.onChange(this.value)}),i}}class rt 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:ht,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new M({title:"Right",icon:ct,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new M({title:"Bottom",icon:dt,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new M({title:"Left",icon:pt,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,n=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
|
|
123
123
|
margin-top: ${t};
|
|
124
124
|
margin-right: ${e};
|
|
125
125
|
margin-bottom: ${i};
|
|
126
|
-
margin-left: ${
|
|
126
|
+
margin-left: ${n};
|
|
127
127
|
`}}const ht=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
128
128
|
<path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
129
129
|
</svg>`,ct=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
133
133
|
</svg>`,pt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
134
134
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
135
|
-
</svg>`;class ut extends f{constructor(t,e,i){super({title:`Tab ${t+1}`,hideCondition:i==null?void 0:i.hideCondition,collapsed:i==null?void 0:i.collapsed,settings:{name:new y({title:"Tab Name",default:`Tab ${t+1}`}),content:new y({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const
|
|
135
|
+
</svg>`;class ut extends f{constructor(t,e,i){super({title:`Tab ${t+1}`,hideCondition:i==null?void 0:i.hideCondition,collapsed:i==null?void 0:i.collapsed,settings:{name:new y({title:"Tab Name",default:`Tab ${t+1}`}),content:new y({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const n=document.createElement("div");n.className="tab-delete-container";const s=document.createElement("button");s.className="tab-delete-button",s.innerHTML=`
|
|
136
136
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
|
|
137
137
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
138
138
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
<path d="M14 11v6"></path>
|
|
141
141
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
142
142
|
</svg>
|
|
143
|
-
`,
|
|
143
|
+
`,s.onclick=()=>{var a;return(a=this.onDeleteCallback)==null?void 0:a.call(this)},n.appendChild(s);const o=i.querySelector("h3");o?o.insertAdjacentElement("afterend",n):i.appendChild(n)}return t}}class gt extends f{constructor(t){super({title:"Tabs",settings:{},hideCondition:t==null?void 0:t.hideCondition,collapsed:t==null?void 0:t.collapsed}),this.tabs=[],this._el=null,this.addTab()}addTab(t){const e=this.tabs.length,i=new ut(e,()=>this.removeTab(i),t);this.tabs.push(i),this.settings[`Tab ${e+1}`]=i}removeTab(t){const e=this.tabs.indexOf(t);e>=0&&(this.tabs.splice(e,1),delete this.settings[`Tab ${e+1}`],this.relabelTabs(),this.rerender())}relabelTabs(){this.settings={},this.tabs.forEach((t,e)=>{t.title=`Tab ${e+1}`,this.settings[`Tab ${e+1}`]=t})}draw(){const t=super.draw();this._el=t;const e=document.createElement("div");e.className="tabs-add-btn-container";const i=document.createElement("button");return i.className="tabs-add-button",i.innerHTML=`
|
|
144
144
|
<span class="add-icon">
|
|
145
145
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
|
|
146
146
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
@@ -153,12 +153,12 @@
|
|
|
153
153
|
</svg>
|
|
154
154
|
</span>
|
|
155
155
|
<span class="add-label">Add Tab</span>
|
|
156
|
-
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class mt extends f{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new W({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new b({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new S({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"}),opacityBG:new b({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,
|
|
156
|
+
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class mt extends f{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new W({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new b({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new S({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"}),opacityBG:new b({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[n,s,o,a]=i;e.innerHTML="",e.appendChild(n),e.appendChild(s);const l=document.createElement("div");return l.className="bgset-or-label",l.textContent="OR",e.appendChild(l),e.appendChild(o),e.appendChild(a),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"0, 0, 30",n=this.settings.opacityBG.value??100;return t?`
|
|
157
157
|
background-image: url("${t}");
|
|
158
158
|
background-size: cover;
|
|
159
159
|
background-position: center;
|
|
160
160
|
opacity: ${e/100};
|
|
161
161
|
`:`
|
|
162
162
|
background-color: ${i};
|
|
163
|
-
opacity: ${
|
|
163
|
+
opacity: ${n/100};
|
|
164
164
|
`}}exports.AlignSetting=B;exports.BackgroundSettingSet=mt;exports.BorderSettingSet=st;exports.ButtonSetting=j;exports.ColorSetting=S;exports.DimensionSetting=q;exports.GapSetting=tt;exports.HeaderTypographySettingSet=lt;exports.HeightSetting=D;exports.MarginSettingGroup=rt;exports.NumberSetting=v;exports.OpacitySetting=b;exports.SelectApiSettings=Q;exports.SelectSetting=N;exports.Setting=m;exports.SettingGroup=f;exports.StringSetting=y;exports.TabsContainerGroup=gt;exports.Toggle=Y;exports.UploadSetting=W;exports.WidthSetting=J;exports.iterateSettings=R;
|
|
@@ -28,8 +28,8 @@ const x = class x {
|
|
|
28
28
|
}
|
|
29
29
|
setOnChange(t) {
|
|
30
30
|
return this.onChange = t, B(this.settings, (e, i) => {
|
|
31
|
-
i.setOnChange((
|
|
32
|
-
t(
|
|
31
|
+
i.setOnChange((n) => {
|
|
32
|
+
t(n), this.updateVisibility();
|
|
33
33
|
});
|
|
34
34
|
}), this;
|
|
35
35
|
}
|
|
@@ -44,8 +44,8 @@ const x = class x {
|
|
|
44
44
|
const e = {};
|
|
45
45
|
for (const i in this.settings)
|
|
46
46
|
if (this.settings.hasOwnProperty(i)) {
|
|
47
|
-
const
|
|
48
|
-
|
|
47
|
+
const n = this.settings[i];
|
|
48
|
+
n instanceof x ? e[i] = n.getValues() : e[i] = n.value;
|
|
49
49
|
}
|
|
50
50
|
return e;
|
|
51
51
|
} else {
|
|
@@ -66,24 +66,24 @@ const x = class x {
|
|
|
66
66
|
const r = document.createElement("span");
|
|
67
67
|
r.className = "group-icon", r.innerHTML = this.icon, i.appendChild(r);
|
|
68
68
|
}
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
const
|
|
72
|
-
if (
|
|
69
|
+
const n = document.createElement("h3");
|
|
70
|
+
n.textContent = this.title, i.appendChild(n);
|
|
71
|
+
const s = document.createElement("div");
|
|
72
|
+
if (s.className = "actions-section", this.description && this.isCollapsed) {
|
|
73
73
|
const r = document.createElement("span");
|
|
74
74
|
r.className = "info-marker", r.innerHTML = `
|
|
75
75
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
76
76
|
<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"
|
|
77
77
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
78
78
|
</svg>
|
|
79
|
-
`, r.title = this.description,
|
|
79
|
+
`, r.title = this.description, s.appendChild(r);
|
|
80
80
|
}
|
|
81
81
|
const o = document.createElement("span");
|
|
82
82
|
o.className = "setting-group-arrow", o.innerHTML = `
|
|
83
83
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
84
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
85
85
|
</svg>
|
|
86
|
-
`, this.isCollapsed && o.classList.add("rotated"),
|
|
86
|
+
`, this.isCollapsed && o.classList.add("rotated"), s.appendChild(o);
|
|
87
87
|
const a = document.createElement("div");
|
|
88
88
|
if (a.className = "setting-group-content", this.isCollapsed && (a.classList.add("collapsed"), e.classList.add("collapsed-view"), o.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && a.classList.add("main-content"), this.description && !this.isCollapsed) {
|
|
89
89
|
const r = document.createElement("div");
|
|
@@ -96,7 +96,7 @@ const x = class x {
|
|
|
96
96
|
);
|
|
97
97
|
const r = a.querySelector(
|
|
98
98
|
".setting-group-description"
|
|
99
|
-
), u =
|
|
99
|
+
), u = s.querySelector(".info-marker");
|
|
100
100
|
if (this.description)
|
|
101
101
|
if (this.isCollapsed) {
|
|
102
102
|
if (r && r.remove(), !u) {
|
|
@@ -106,7 +106,7 @@ const x = class x {
|
|
|
106
106
|
<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"
|
|
107
107
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
108
108
|
</svg>
|
|
109
|
-
`, d.title = this.description,
|
|
109
|
+
`, d.title = this.description, s.insertBefore(d, o);
|
|
110
110
|
}
|
|
111
111
|
} else {
|
|
112
112
|
if (!r) {
|
|
@@ -131,7 +131,7 @@ const x = class x {
|
|
|
131
131
|
const r = document.createElement("div");
|
|
132
132
|
r.className = "setting-group-empty", r.textContent = "No settings in this group", a.appendChild(r);
|
|
133
133
|
}
|
|
134
|
-
return e.appendChild(i), e.appendChild(
|
|
134
|
+
return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(a), this.elementRef = t, t;
|
|
135
135
|
}
|
|
136
136
|
collapse() {
|
|
137
137
|
if (!this.elementRef || this.isCollapsed) return;
|
|
@@ -189,7 +189,7 @@ class m {
|
|
|
189
189
|
return this.onChange = t, this;
|
|
190
190
|
}
|
|
191
191
|
setValue(t) {
|
|
192
|
-
this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t);
|
|
192
|
+
this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t), this.props.detectChange && this.props.detectChange(t);
|
|
193
193
|
}
|
|
194
194
|
createInput(t) {
|
|
195
195
|
t = { ...this.props.inputProps, ...t };
|
|
@@ -208,9 +208,9 @@ class m {
|
|
|
208
208
|
}
|
|
209
209
|
const i = document.createElement("div");
|
|
210
210
|
i.className = t.wrapperClassName || "";
|
|
211
|
-
const
|
|
212
|
-
this.inputEl =
|
|
213
|
-
const
|
|
211
|
+
const n = document.createElement("input");
|
|
212
|
+
this.inputEl = n, n.value = String(t.value || W(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "";
|
|
213
|
+
const s = (o) => {
|
|
214
214
|
const a = o.target;
|
|
215
215
|
let l = a.value;
|
|
216
216
|
switch (t.inputType) {
|
|
@@ -235,9 +235,9 @@ class m {
|
|
|
235
235
|
default:
|
|
236
236
|
l = a.value;
|
|
237
237
|
}
|
|
238
|
-
this.value = l, this.onChange && this.onChange(this.value);
|
|
238
|
+
this.value = l, this.onChange && this.onChange(this.value), this.props.detectChange && this.props.detectChange(this.value);
|
|
239
239
|
};
|
|
240
|
-
return
|
|
240
|
+
return n.addEventListener("input", s), n.addEventListener("change", s), t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
|
|
241
241
|
}
|
|
242
242
|
createLabel(t, e) {
|
|
243
243
|
const i = document.createElement("span");
|
|
@@ -279,27 +279,27 @@ class S extends H {
|
|
|
279
279
|
}
|
|
280
280
|
hexToRgb(t) {
|
|
281
281
|
t = t.replace("#", "");
|
|
282
|
-
const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16),
|
|
283
|
-
return `${e}, ${i}, ${
|
|
282
|
+
const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
|
|
283
|
+
return `${e}, ${i}, ${n}`;
|
|
284
284
|
}
|
|
285
285
|
rgbToHex(t) {
|
|
286
|
-
const [e, i,
|
|
287
|
-
if (isNaN(e) || isNaN(i) || isNaN(
|
|
288
|
-
const
|
|
286
|
+
const [e, i, n] = t.split(",").map((o) => parseInt(o.trim()));
|
|
287
|
+
if (isNaN(e) || isNaN(i) || isNaN(n)) return "#000000";
|
|
288
|
+
const s = (o) => {
|
|
289
289
|
const a = o.toString(16);
|
|
290
290
|
return a.length === 1 ? "0" + a : a;
|
|
291
291
|
};
|
|
292
|
-
return `#${
|
|
292
|
+
return `#${s(e)}${s(i)}${s(n)}`;
|
|
293
293
|
}
|
|
294
294
|
draw() {
|
|
295
295
|
const t = document.createElement("div");
|
|
296
296
|
t.className = "color-setting-wrapper";
|
|
297
297
|
const e = document.createElement("div");
|
|
298
298
|
e.className = "icon-container";
|
|
299
|
-
const i = this.createIcon(this.props.icon || O),
|
|
300
|
-
e.appendChild(i), e.appendChild(
|
|
301
|
-
const
|
|
302
|
-
|
|
299
|
+
const i = this.createIcon(this.props.icon || O), n = this.createLabel(this.title || "Color");
|
|
300
|
+
e.appendChild(i), e.appendChild(n);
|
|
301
|
+
const s = document.createElement("div");
|
|
302
|
+
s.className = "color-input-wrapper";
|
|
303
303
|
const o = (d) => {
|
|
304
304
|
const g = d.value.split(",").map((N) => parseInt(N.trim()));
|
|
305
305
|
if (g.length !== 3 || g.some(isNaN))
|
|
@@ -325,7 +325,7 @@ class S extends H {
|
|
|
325
325
|
var C;
|
|
326
326
|
const g = d.target.value, p = this.hexToRgb(g);
|
|
327
327
|
this.value = p, (C = this.onChange) == null || C.call(this, p), c.value = p, a.style.backgroundColor = `rgb(${p})`;
|
|
328
|
-
},
|
|
328
|
+
}, s.appendChild(a), s.appendChild(r), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (c.value = this.value, u.value = this.rgbToHex(this.value), a.style.backgroundColor = `rgb(${this.value})`), t;
|
|
329
329
|
}
|
|
330
330
|
}
|
|
331
331
|
class v extends m {
|
|
@@ -333,11 +333,11 @@ class v extends m {
|
|
|
333
333
|
super(t), this.inputType = "number";
|
|
334
334
|
}
|
|
335
335
|
draw() {
|
|
336
|
-
const t = (
|
|
337
|
-
this.props.minValue !== void 0 && (
|
|
336
|
+
const t = (s) => {
|
|
337
|
+
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", () => {
|
|
338
338
|
const o = this.props.minValue ?? Number.MIN_SAFE_INTEGER, a = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
339
|
-
let l = Number(
|
|
340
|
-
l < o && (l = o), l > a && (l = a),
|
|
339
|
+
let l = Number(s.value);
|
|
340
|
+
l < o && (l = o), l > a && (l = a), s.value = String(l);
|
|
341
341
|
});
|
|
342
342
|
}, e = this.createInput({
|
|
343
343
|
value: this.value,
|
|
@@ -355,8 +355,8 @@ class v extends m {
|
|
|
355
355
|
"input.number-setting-input"
|
|
356
356
|
);
|
|
357
357
|
i && (i.style.paddingRight = "35px");
|
|
358
|
-
const
|
|
359
|
-
return
|
|
358
|
+
const n = document.createElement("span");
|
|
359
|
+
return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
|
|
360
360
|
}
|
|
361
361
|
}
|
|
362
362
|
class M extends v {
|
|
@@ -397,44 +397,44 @@ class V extends m {
|
|
|
397
397
|
draw() {
|
|
398
398
|
const t = document.createElement("div");
|
|
399
399
|
if (t.classList.add("select-container"), this.container = t, this.props.icon || this.props.title) {
|
|
400
|
-
const
|
|
401
|
-
if (
|
|
400
|
+
const s = document.createElement("div");
|
|
401
|
+
if (s.className = "icon-container", this.props.icon) {
|
|
402
402
|
const o = this.createIcon(this.props.icon);
|
|
403
|
-
|
|
403
|
+
s.appendChild(o);
|
|
404
404
|
}
|
|
405
405
|
if (this.props.title) {
|
|
406
406
|
const o = this.createLabel(this.props.title);
|
|
407
|
-
|
|
407
|
+
s.appendChild(o);
|
|
408
408
|
}
|
|
409
|
-
t.appendChild(
|
|
409
|
+
t.appendChild(s);
|
|
410
410
|
} else {
|
|
411
|
-
const
|
|
412
|
-
t.appendChild(
|
|
411
|
+
const s = document.createElement("div");
|
|
412
|
+
t.appendChild(s);
|
|
413
413
|
}
|
|
414
414
|
const e = document.createElement("div");
|
|
415
415
|
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 = () => {
|
|
416
|
-
var
|
|
417
|
-
this.isLoading || (this.isOpen = !this.isOpen, (
|
|
416
|
+
var s, o;
|
|
417
|
+
this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
|
|
418
418
|
}, t.appendChild(e), this.buttonEl = e;
|
|
419
419
|
const i = document.createElement("ul");
|
|
420
|
-
i.classList.add("select-options"), this._options.forEach((
|
|
421
|
-
const a = this.createOption(
|
|
420
|
+
i.classList.add("select-options"), this._options.forEach((s, o) => {
|
|
421
|
+
const a = this.createOption(s, o);
|
|
422
422
|
a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
|
|
423
423
|
}), t.appendChild(i);
|
|
424
|
-
const
|
|
425
|
-
return
|
|
426
|
-
this._options.push(...
|
|
427
|
-
}).catch((
|
|
428
|
-
console.error("Failed to fetch async options:",
|
|
429
|
-
})), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (
|
|
424
|
+
const n = document.createElement("div");
|
|
425
|
+
return n.classList.add("svg-container"), n.innerHTML = $, t.appendChild(n), this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
426
|
+
this._options.push(...s), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
|
|
427
|
+
}).catch((s) => {
|
|
428
|
+
console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
429
|
+
})), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (s) => {
|
|
430
430
|
var o, a;
|
|
431
|
-
this.isOpen && !t.contains(
|
|
431
|
+
this.isOpen && !t.contains(s.target) && (this.isOpen = !1, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"));
|
|
432
432
|
}, document.addEventListener("click", this.clickOutsideListener), t;
|
|
433
433
|
}
|
|
434
434
|
selectOption(t, e, i) {
|
|
435
|
-
var
|
|
436
|
-
const
|
|
437
|
-
|
|
435
|
+
var s, o, a;
|
|
436
|
+
const n = this._options[e];
|
|
437
|
+
n && (this.value = n.value, (s = this.onChange) == null || s.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = n.name, (o = this.optionsListEl) == null || o.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((c, r) => {
|
|
438
438
|
r === e ? c.classList.add("selected") : c.classList.remove("selected");
|
|
439
439
|
}));
|
|
440
440
|
}
|
|
@@ -447,8 +447,8 @@ class V extends m {
|
|
|
447
447
|
}
|
|
448
448
|
this._options.forEach((t, e) => {
|
|
449
449
|
const i = this.createOption(t, e);
|
|
450
|
-
i.onclick = (
|
|
451
|
-
this.buttonEl && this.selectOption(
|
|
450
|
+
i.onclick = (n) => {
|
|
451
|
+
this.buttonEl && this.selectOption(n, e, this.buttonEl);
|
|
452
452
|
}, this.optionsListEl.appendChild(i);
|
|
453
453
|
});
|
|
454
454
|
}
|
|
@@ -511,11 +511,11 @@ class _ extends m {
|
|
|
511
511
|
</svg>
|
|
512
512
|
`
|
|
513
513
|
}
|
|
514
|
-
].forEach((
|
|
514
|
+
].forEach((s) => {
|
|
515
515
|
const o = document.createElement("button");
|
|
516
|
-
o.className = "align-option-button", o.innerHTML =
|
|
516
|
+
o.className = "align-option-button", o.innerHTML = s.icon, this.value === s.name && o.classList.add("selected"), o.addEventListener("click", () => {
|
|
517
517
|
var a;
|
|
518
|
-
i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), o.classList.add("selected"), this.value =
|
|
518
|
+
i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), o.classList.add("selected"), this.value = s.name, (a = this.onChange) == null || a.call(this, this.value);
|
|
519
519
|
}), i.appendChild(o);
|
|
520
520
|
}), t.appendChild(i), t;
|
|
521
521
|
}
|
|
@@ -580,8 +580,8 @@ class ot extends m {
|
|
|
580
580
|
}
|
|
581
581
|
toggleLock(t) {
|
|
582
582
|
if (this.locked = !this.locked, this.locked && this.value) {
|
|
583
|
-
const { width: i, height:
|
|
584
|
-
|
|
583
|
+
const { width: i, height: n } = this.value;
|
|
584
|
+
n > 0 && (this.aspectRatio = i / n);
|
|
585
585
|
}
|
|
586
586
|
t.innerHTML = this.getLockSVG(this.locked), t.setAttribute("aria-pressed", String(this.locked)), t.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio";
|
|
587
587
|
const e = t.closest(".dimension-setting-container");
|
|
@@ -615,15 +615,15 @@ class ot extends m {
|
|
|
615
615
|
draw() {
|
|
616
616
|
const t = document.createElement("div");
|
|
617
617
|
t.className = "dimension-setting-container", this.locked && t.classList.add("aspect-locked");
|
|
618
|
-
const e = this.widthSetting.draw(), i = this.heightSetting.draw(),
|
|
619
|
-
|
|
620
|
-
const
|
|
621
|
-
return
|
|
618
|
+
const e = this.widthSetting.draw(), i = this.heightSetting.draw(), n = document.createElement("div");
|
|
619
|
+
n.className = "dimension-bracket";
|
|
620
|
+
const s = document.createElement("button");
|
|
621
|
+
return s.className = "dimension-lock-icon", s.setAttribute("type", "button"), s.setAttribute("aria-pressed", String(this.locked)), s.setAttribute(
|
|
622
622
|
"aria-label",
|
|
623
623
|
this.locked ? "Unlock aspect ratio" : "Lock aspect ratio"
|
|
624
|
-
),
|
|
625
|
-
o.preventDefault(), this.toggleLock(
|
|
626
|
-
},
|
|
624
|
+
), s.title = this.locked ? "Unlock aspect ratio" : "Lock aspect ratio", s.innerHTML = this.getLockSVG(this.locked), s.onclick = (o) => {
|
|
625
|
+
o.preventDefault(), this.toggleLock(s);
|
|
626
|
+
}, n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
|
|
627
627
|
}
|
|
628
628
|
isLocked() {
|
|
629
629
|
return this.locked;
|
|
@@ -631,8 +631,8 @@ class ot extends m {
|
|
|
631
631
|
setLocked(t) {
|
|
632
632
|
if (this.locked !== t) {
|
|
633
633
|
if (this.locked = t, this.locked && this.value) {
|
|
634
|
-
const { width: i, height:
|
|
635
|
-
|
|
634
|
+
const { width: i, height: n } = this.value;
|
|
635
|
+
n > 0 && (this.aspectRatio = i / n);
|
|
636
636
|
}
|
|
637
637
|
const e = document.querySelector(
|
|
638
638
|
".dimension-setting-container .dimension-lock-icon"
|
|
@@ -669,13 +669,13 @@ class F extends m {
|
|
|
669
669
|
}
|
|
670
670
|
updatePreviewState(t = null) {
|
|
671
671
|
if (!this.previewWrapper || !this.previewEl || !this.emptyStateEl) return;
|
|
672
|
-
const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"),
|
|
672
|
+
const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), n = e == null ? void 0 : e.querySelector(
|
|
673
673
|
".preview-placeholder"
|
|
674
674
|
);
|
|
675
|
-
t && t !== "" ? (this.previewWrapper.classList.add("has-image"), this.previewEl.src = t, this.previewWrapper.style.display = "block",
|
|
675
|
+
t && t !== "" ? (this.previewWrapper.classList.add("has-image"), this.previewEl.src = t, this.previewWrapper.style.display = "block", n && n instanceof HTMLElement && (n.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
|
|
676
676
|
<span class="upload-icon">${y}</span>
|
|
677
677
|
<span class="upload-label">Replace</span>
|
|
678
|
-
`)) : (this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewWrapper.style.display = "none",
|
|
678
|
+
`)) : (this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewWrapper.style.display = "none", n && n instanceof HTMLElement && (n.style.display = "none"), i && (i.innerHTML = `
|
|
679
679
|
<span class="upload-icon">${y}</span>
|
|
680
680
|
<span class="upload-label">Upload</span>
|
|
681
681
|
`));
|
|
@@ -698,10 +698,10 @@ class F extends m {
|
|
|
698
698
|
}
|
|
699
699
|
const i = document.createElement("div");
|
|
700
700
|
i.className = "preview-button-container";
|
|
701
|
-
const
|
|
702
|
-
|
|
703
|
-
const
|
|
704
|
-
|
|
701
|
+
const n = this.value && this.value !== "";
|
|
702
|
+
n || i.classList.add("no-image");
|
|
703
|
+
const s = document.createElement("div");
|
|
704
|
+
s.className = "preview-placeholder", s.innerHTML = T, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = T, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
|
|
705
705
|
const o = document.createElement("button");
|
|
706
706
|
o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML = q, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(o);
|
|
707
707
|
const a = document.createElement("button");
|
|
@@ -710,7 +710,7 @@ class F extends m {
|
|
|
710
710
|
<span class="upload-label">Upload</span>
|
|
711
711
|
`;
|
|
712
712
|
const l = document.createElement("input");
|
|
713
|
-
return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(
|
|
713
|
+
return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), t.appendChild(l), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = (c) => {
|
|
714
714
|
var r;
|
|
715
715
|
c.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
|
|
716
716
|
}, a.onclick = () => {
|
|
@@ -788,7 +788,7 @@ class lt extends m {
|
|
|
788
788
|
}
|
|
789
789
|
const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
790
790
|
<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"/>
|
|
791
|
-
</svg>`,
|
|
791
|
+
</svg>`, D = `
|
|
792
792
|
<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">
|
|
793
793
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
794
794
|
</svg>
|
|
@@ -797,7 +797,7 @@ class rt extends m {
|
|
|
797
797
|
constructor(t = {}) {
|
|
798
798
|
super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.hasInitializedOptions = !1, this.initializeOptions(t), t.default !== void 0 && (this.value = t.default, this.selectedOptionIndex = this._options.findIndex(
|
|
799
799
|
(e) => JSON.stringify(e.value) === JSON.stringify(t.default)
|
|
800
|
-
)), t.onChange && this.setOnChange(t.onChange), t.
|
|
800
|
+
)), t.onChange && this.setOnChange(t.onChange), t.detectChange && (this.detectChangeCallback = t.detectChange);
|
|
801
801
|
}
|
|
802
802
|
initializeOptions(t) {
|
|
803
803
|
this.hasInitializedOptions || (this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync ? (this.isLoading = !0, t.default !== void 0 && (this.value = t.default)) : t.default !== void 0 && (this.selectedOptionIndex = this._options.findIndex(
|
|
@@ -807,8 +807,8 @@ class rt extends m {
|
|
|
807
807
|
createOption(t, e) {
|
|
808
808
|
const i = document.createElement("li");
|
|
809
809
|
i.classList.add("select-api-option"), i.textContent = t.name, i.dataset.index = String(e);
|
|
810
|
-
const
|
|
811
|
-
return
|
|
810
|
+
const n = document.createElement("input");
|
|
811
|
+
return n.type = "radio", n.classList.add("select-api-radio"), n.name = "select-api-radio-group", i.appendChild(n), this.selectedOptionIndex === e && (n.checked = !0), i;
|
|
812
812
|
}
|
|
813
813
|
draw() {
|
|
814
814
|
const t = document.createElement("div");
|
|
@@ -816,46 +816,48 @@ class rt extends m {
|
|
|
816
816
|
const e = document.createElement("div");
|
|
817
817
|
if (e.classList.add("select-api-button"), this.props.title) {
|
|
818
818
|
e.classList.add("has-label");
|
|
819
|
-
const
|
|
820
|
-
|
|
819
|
+
const s = document.createElement("div");
|
|
820
|
+
s.className = "select-label", s.textContent = this.props.title, e.appendChild(s);
|
|
821
821
|
const o = document.createElement("span");
|
|
822
822
|
o.className = "select-value", this.isLoading ? o.textContent = this.props.loadingText || "Loading options..." : o.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(o);
|
|
823
|
-
} else
|
|
824
|
-
|
|
823
|
+
} else {
|
|
824
|
+
const s = document.createElement("span");
|
|
825
|
+
this.isLoading ? s.textContent = this.props.loadingText || "Loading options..." : s.textContent = this.selectedOptionIndex !== null ? this._options[this.selectedOptionIndex].name : "Select an option", e.appendChild(s);
|
|
826
|
+
}
|
|
825
827
|
e.onclick = () => {
|
|
826
|
-
var
|
|
827
|
-
this.isLoading || (this.isOpen = !this.isOpen, (
|
|
828
|
+
var s, o;
|
|
829
|
+
this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
|
|
828
830
|
}, t.appendChild(e), this.buttonEl = e;
|
|
829
831
|
const i = document.createElement("ul");
|
|
830
|
-
i.classList.add("select-api-options"), this._options.forEach((
|
|
831
|
-
const a = this.createOption(
|
|
832
|
+
i.classList.add("select-api-options"), this._options.forEach((s, o) => {
|
|
833
|
+
const a = this.createOption(s, o);
|
|
832
834
|
a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
|
|
833
835
|
}), t.appendChild(i);
|
|
834
|
-
const
|
|
835
|
-
return
|
|
836
|
-
var
|
|
837
|
-
this.isLoading || (this.isOpen = !this.isOpen, (
|
|
838
|
-
}, this.optionsListEl = i, this.svgContainer =
|
|
839
|
-
this._options.push(...
|
|
836
|
+
const n = document.createElement("div");
|
|
837
|
+
return n.classList.add("svg-container"), n.innerHTML = D, t.appendChild(n), n.onclick = () => {
|
|
838
|
+
var s, o;
|
|
839
|
+
this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
|
|
840
|
+
}, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
841
|
+
this._options.push(...s), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
|
|
840
842
|
(o) => JSON.stringify(o.value) === JSON.stringify(this.value)
|
|
841
843
|
)), this.updateOptionsList(), this.updateButtonText();
|
|
842
|
-
}).catch((
|
|
843
|
-
console.error("Failed to fetch async options:",
|
|
844
|
-
})) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((
|
|
845
|
-
const o = new Set(this._options.map((l) => JSON.stringify(l.value))), a =
|
|
844
|
+
}).catch((s) => {
|
|
845
|
+
console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
846
|
+
})) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
847
|
+
const o = new Set(this._options.map((l) => JSON.stringify(l.value))), a = s.filter((l) => !o.has(JSON.stringify(l.value)));
|
|
846
848
|
this._options.push(...a), this.isLoading = !1, this.value !== void 0 && this.selectedOptionIndex === null && (this.selectedOptionIndex = this._options.findIndex(
|
|
847
849
|
(l) => JSON.stringify(l.value) === JSON.stringify(this.value)
|
|
848
850
|
)), this.updateOptionsList(), this.updateButtonText();
|
|
849
|
-
}).catch((
|
|
850
|
-
console.error("Failed to fetch async options:",
|
|
851
|
+
}).catch((s) => {
|
|
852
|
+
console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
851
853
|
})), t;
|
|
852
854
|
}
|
|
853
855
|
selectApiOption(t, e, i) {
|
|
854
|
-
var
|
|
855
|
-
const
|
|
856
|
-
if (
|
|
857
|
-
const a =
|
|
858
|
-
this.value = a, this.onChange && this.onChange(a), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (
|
|
856
|
+
var s, o;
|
|
857
|
+
const n = this._options[e];
|
|
858
|
+
if (n) {
|
|
859
|
+
const a = n.value;
|
|
860
|
+
this.value = a, this.onChange && this.onChange(a), this.detectChangeCallback && this.detectChangeCallback(a), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (s = this.optionsListEl) == null || s.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
|
|
859
861
|
".select-api-radio"
|
|
860
862
|
).forEach((c, r) => {
|
|
861
863
|
c.checked = r === e;
|
|
@@ -871,23 +873,23 @@ class rt extends m {
|
|
|
871
873
|
}
|
|
872
874
|
this._options.forEach((t, e) => {
|
|
873
875
|
const i = this.createOption(t, e);
|
|
874
|
-
this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (
|
|
875
|
-
this.buttonEl && this.selectApiOption(
|
|
876
|
-
}, i.tabIndex = 0, i.addEventListener("keydown", (
|
|
877
|
-
(
|
|
876
|
+
this.selectedOptionIndex === e && i.classList.add("selected"), i.onclick = (n) => {
|
|
877
|
+
this.buttonEl && this.selectApiOption(n, e, this.buttonEl);
|
|
878
|
+
}, i.tabIndex = 0, i.addEventListener("keydown", (n) => {
|
|
879
|
+
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), this.buttonEl && this.selectApiOption(n, e, this.buttonEl));
|
|
878
880
|
}), this.optionsListEl.appendChild(i);
|
|
879
881
|
});
|
|
880
882
|
}
|
|
881
883
|
}
|
|
882
884
|
updateButtonText(t) {
|
|
883
885
|
if (!this.buttonEl) return;
|
|
884
|
-
const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"),
|
|
886
|
+
const e = this.buttonEl.querySelector(".select-value"), i = this.buttonEl.classList.contains("has-label"), n = this.buttonEl.querySelector(".select-label");
|
|
885
887
|
if (this.isLoading) {
|
|
886
888
|
this.buttonEl.classList.add("loading");
|
|
887
889
|
const o = this.props.loadingText || "Loading options...";
|
|
888
890
|
if (e)
|
|
889
891
|
e.textContent = o;
|
|
890
|
-
else if (i && this.props.title && !
|
|
892
|
+
else if (i && this.props.title && !n) {
|
|
891
893
|
this.buttonEl.innerHTML = "";
|
|
892
894
|
const a = document.createElement("div");
|
|
893
895
|
a.className = "select-label", a.textContent = this.props.title, this.buttonEl.appendChild(a);
|
|
@@ -898,17 +900,20 @@ class rt extends m {
|
|
|
898
900
|
return;
|
|
899
901
|
}
|
|
900
902
|
this.buttonEl.classList.remove("loading", "error");
|
|
901
|
-
let
|
|
902
|
-
if (t ? ((t.includes("Failed") || t.includes("Error")) && this.buttonEl.classList.add("error"),
|
|
903
|
-
e.textContent =
|
|
904
|
-
else if (i && this.props.title && !
|
|
903
|
+
let s;
|
|
904
|
+
if (t ? ((t.includes("Failed") || t.includes("Error")) && this.buttonEl.classList.add("error"), s = t) : this.selectedOptionIndex !== null && this._options[this.selectedOptionIndex] ? s = this._options[this.selectedOptionIndex].name : s = "Select an option", e)
|
|
905
|
+
e.textContent = s;
|
|
906
|
+
else if (i && this.props.title && !n) {
|
|
905
907
|
this.buttonEl.innerHTML = "";
|
|
906
908
|
const o = document.createElement("div");
|
|
907
909
|
o.className = "select-label", o.textContent = this.props.title, this.buttonEl.appendChild(o);
|
|
908
910
|
const a = document.createElement("span");
|
|
909
|
-
a.className = "select-value", a.textContent =
|
|
911
|
+
a.className = "select-value", a.textContent = s, this.buttonEl.appendChild(a);
|
|
910
912
|
} else
|
|
911
|
-
this.buttonEl.textContent =
|
|
913
|
+
this.buttonEl.textContent = s;
|
|
914
|
+
}
|
|
915
|
+
setDetectChange(t) {
|
|
916
|
+
this.detectChangeCallback = t;
|
|
912
917
|
}
|
|
913
918
|
}
|
|
914
919
|
class ht extends m {
|
|
@@ -930,15 +935,15 @@ class ht extends m {
|
|
|
930
935
|
t.appendChild(e);
|
|
931
936
|
const i = document.createElement("label");
|
|
932
937
|
i.className = "toggle-switch";
|
|
933
|
-
const
|
|
934
|
-
|
|
935
|
-
this.value =
|
|
938
|
+
const n = document.createElement("input");
|
|
939
|
+
n.type = "checkbox", n.checked = this.value ?? !1, n.addEventListener("change", () => {
|
|
940
|
+
this.value = n.checked, this.onChange && this.onChange(this.value);
|
|
936
941
|
});
|
|
937
|
-
const
|
|
938
|
-
return
|
|
942
|
+
const s = document.createElement("span");
|
|
943
|
+
return s.className = "toggle-slider", i.appendChild(n), i.appendChild(s), t.appendChild(i), t;
|
|
939
944
|
}
|
|
940
945
|
}
|
|
941
|
-
const
|
|
946
|
+
const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
942
947
|
<path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
943
948
|
</svg>`;
|
|
944
949
|
class ct extends m {
|
|
@@ -975,12 +980,12 @@ class ct extends m {
|
|
|
975
980
|
createGapInput(t, e) {
|
|
976
981
|
const i = document.createElement("div");
|
|
977
982
|
i.classList.add("gap-input-wrapper");
|
|
978
|
-
const s = document.createElement("div");
|
|
979
|
-
s.classList.add("gap-label-container");
|
|
980
983
|
const n = document.createElement("div");
|
|
981
|
-
n.classList.add("gap-
|
|
984
|
+
n.classList.add("gap-label-container");
|
|
985
|
+
const s = document.createElement("div");
|
|
986
|
+
s.classList.add("gap-setting-icon"), s.innerHTML = this.props.icon || Z, n.appendChild(s);
|
|
982
987
|
const o = document.createElement("label");
|
|
983
|
-
o.classList.add("gap-input-label"), o.textContent = t,
|
|
988
|
+
o.classList.add("gap-input-label"), o.textContent = t, n.appendChild(o), i.appendChild(n);
|
|
984
989
|
const a = (u) => {
|
|
985
990
|
this.props.minValue !== void 0 && (u.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (u.max = String(this.props.maxValue)), this.props.className && u.classList.add(this.props.className), u.addEventListener("input", () => {
|
|
986
991
|
var C;
|
|
@@ -1047,10 +1052,10 @@ class dt extends f {
|
|
|
1047
1052
|
* Optional helper to generate CSS from the current settings.
|
|
1048
1053
|
*/
|
|
1049
1054
|
getCssCode() {
|
|
1050
|
-
const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.radius.value ?? 0,
|
|
1055
|
+
const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.radius.value ?? 0, n = this.settings.size.value ?? 0;
|
|
1051
1056
|
return `
|
|
1052
1057
|
border-color: ${t};
|
|
1053
|
-
border-width: ${
|
|
1058
|
+
border-width: ${n}px;
|
|
1054
1059
|
border-radius: ${i}px;
|
|
1055
1060
|
opacity: ${e / 100};
|
|
1056
1061
|
`;
|
|
@@ -1120,13 +1125,13 @@ class pt extends f {
|
|
|
1120
1125
|
});
|
|
1121
1126
|
}
|
|
1122
1127
|
getCssCode() {
|
|
1123
|
-
const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi",
|
|
1128
|
+
const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", n = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, o = this.settings.align.value ?? "left";
|
|
1124
1129
|
return `
|
|
1125
1130
|
color: ${t};
|
|
1126
1131
|
opacity: ${e / 100};
|
|
1127
1132
|
font-family: ${i};
|
|
1128
|
-
font-weight: ${
|
|
1129
|
-
font-size: ${
|
|
1133
|
+
font-weight: ${n};
|
|
1134
|
+
font-size: ${s}px;
|
|
1130
1135
|
text-align: ${o};
|
|
1131
1136
|
`;
|
|
1132
1137
|
}
|
|
@@ -1158,12 +1163,12 @@ class k extends m {
|
|
|
1158
1163
|
if (!this.props.suffix || this.props.suffix === "none")
|
|
1159
1164
|
return i;
|
|
1160
1165
|
i.classList.add("suffix-wrapper");
|
|
1161
|
-
const
|
|
1166
|
+
const n = i.querySelector(
|
|
1162
1167
|
"input.number-setting-input"
|
|
1163
1168
|
);
|
|
1164
|
-
|
|
1165
|
-
const
|
|
1166
|
-
|
|
1169
|
+
n && (n.style.paddingRight = "35px");
|
|
1170
|
+
const s = document.createElement("span");
|
|
1171
|
+
s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
|
|
1167
1172
|
const o = i.querySelector("input");
|
|
1168
1173
|
return o && (o.oninput = (a) => {
|
|
1169
1174
|
const l = a.target.value.trim();
|
|
@@ -1212,12 +1217,12 @@ class ut extends f {
|
|
|
1212
1217
|
});
|
|
1213
1218
|
}
|
|
1214
1219
|
getCssCode() {
|
|
1215
|
-
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,
|
|
1220
|
+
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, n = typeof this.settings.marginLeft.value == "number" ? `${this.settings.marginLeft.value}px` : this.settings.marginLeft.value;
|
|
1216
1221
|
return `
|
|
1217
1222
|
margin-top: ${t};
|
|
1218
1223
|
margin-right: ${e};
|
|
1219
1224
|
margin-bottom: ${i};
|
|
1220
|
-
margin-left: ${
|
|
1225
|
+
margin-left: ${n};
|
|
1221
1226
|
`;
|
|
1222
1227
|
}
|
|
1223
1228
|
}
|
|
@@ -1253,10 +1258,10 @@ class st extends f {
|
|
|
1253
1258
|
e && e.parentElement && e.parentElement.removeChild(e);
|
|
1254
1259
|
const i = t.querySelector(".setting-group-title");
|
|
1255
1260
|
if (i) {
|
|
1256
|
-
const
|
|
1257
|
-
|
|
1258
|
-
const
|
|
1259
|
-
|
|
1261
|
+
const n = document.createElement("div");
|
|
1262
|
+
n.className = "tab-delete-container";
|
|
1263
|
+
const s = document.createElement("button");
|
|
1264
|
+
s.className = "tab-delete-button", s.innerHTML = `
|
|
1260
1265
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
|
|
1261
1266
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
1262
1267
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
@@ -1264,12 +1269,12 @@ class st extends f {
|
|
|
1264
1269
|
<path d="M14 11v6"></path>
|
|
1265
1270
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
1266
1271
|
</svg>
|
|
1267
|
-
`,
|
|
1272
|
+
`, s.onclick = () => {
|
|
1268
1273
|
var a;
|
|
1269
1274
|
return (a = this.onDeleteCallback) == null ? void 0 : a.call(this);
|
|
1270
|
-
},
|
|
1275
|
+
}, n.appendChild(s);
|
|
1271
1276
|
const o = i.querySelector("h3");
|
|
1272
|
-
o ? o.insertAdjacentElement("afterend",
|
|
1277
|
+
o ? o.insertAdjacentElement("afterend", n) : i.appendChild(n);
|
|
1273
1278
|
}
|
|
1274
1279
|
return t;
|
|
1275
1280
|
}
|
|
@@ -1396,8 +1401,8 @@ class mt extends f {
|
|
|
1396
1401
|
draw() {
|
|
1397
1402
|
const t = super.draw(), e = t.querySelector(".setting-group-content");
|
|
1398
1403
|
if (!e) return t;
|
|
1399
|
-
const i = Array.from(e.children), [
|
|
1400
|
-
e.innerHTML = "", e.appendChild(
|
|
1404
|
+
const i = Array.from(e.children), [n, s, o, a] = i;
|
|
1405
|
+
e.innerHTML = "", e.appendChild(n), e.appendChild(s);
|
|
1401
1406
|
const l = document.createElement("div");
|
|
1402
1407
|
return l.className = "bgset-or-label", l.textContent = "OR", e.appendChild(l), e.appendChild(o), e.appendChild(a), t;
|
|
1403
1408
|
}
|
|
@@ -1405,7 +1410,7 @@ class mt extends f {
|
|
|
1405
1410
|
* Helper method to generate CSS based on the current settings.
|
|
1406
1411
|
*/
|
|
1407
1412
|
getCssCode() {
|
|
1408
|
-
const t = this.settings.backgroundImage.value || "", e = this.settings.opacity.value ?? 100, i = this.settings.backgroundColor.value || "0, 0, 30",
|
|
1413
|
+
const t = this.settings.backgroundImage.value || "", e = this.settings.opacity.value ?? 100, i = this.settings.backgroundColor.value || "0, 0, 30", n = this.settings.opacityBG.value ?? 100;
|
|
1409
1414
|
return t ? `
|
|
1410
1415
|
background-image: url("${t}");
|
|
1411
1416
|
background-size: cover;
|
|
@@ -1413,7 +1418,7 @@ class mt extends f {
|
|
|
1413
1418
|
opacity: ${e / 100};
|
|
1414
1419
|
` : `
|
|
1415
1420
|
background-color: ${i};
|
|
1416
|
-
opacity: ${
|
|
1421
|
+
opacity: ${n / 100};
|
|
1417
1422
|
`;
|
|
1418
1423
|
}
|
|
1419
1424
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -310,7 +310,7 @@ export declare interface SelectApiSettingProps<T = any> extends SettingProps<T>
|
|
|
310
310
|
getOptionsAsync?: () => Promise<SelectApiOption[]>;
|
|
311
311
|
loadingText?: string;
|
|
312
312
|
onChange?: (value: T) => void;
|
|
313
|
-
|
|
313
|
+
detectChange?: (value: T | undefined) => void;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
316
|
export declare class SelectApiSettings<T = any> extends Setting<T, SelectApiSettingProps<T>> {
|
|
@@ -324,6 +324,7 @@ export declare class SelectApiSettings<T = any> extends Setting<T, SelectApiSett
|
|
|
324
324
|
private isLoading;
|
|
325
325
|
private container;
|
|
326
326
|
private hasInitializedOptions;
|
|
327
|
+
private detectChangeCallback?;
|
|
327
328
|
constructor(props?: SelectApiSettingProps<T>);
|
|
328
329
|
private initializeOptions;
|
|
329
330
|
private createOption;
|
|
@@ -331,6 +332,7 @@ export declare class SelectApiSettings<T = any> extends Setting<T, SelectApiSett
|
|
|
331
332
|
private selectApiOption;
|
|
332
333
|
private updateOptionsList;
|
|
333
334
|
private updateButtonText;
|
|
335
|
+
setDetectChange(callback: (value: T | undefined) => void): void;
|
|
334
336
|
}
|
|
335
337
|
|
|
336
338
|
export declare interface SelectOption {
|
|
@@ -429,6 +431,7 @@ export declare interface SettingProps<T> {
|
|
|
429
431
|
icon?: string;
|
|
430
432
|
inputProps?: InputProps;
|
|
431
433
|
id?: string;
|
|
434
|
+
detectChange?: (value: T | undefined) => void;
|
|
432
435
|
}
|
|
433
436
|
|
|
434
437
|
export declare class StringSetting extends Setting<string, StringSettingsProps> {
|
package/package.json
CHANGED