builder-settings-types 0.0.91 → 0.0.92
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(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
|
|
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 b=class b{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 b?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof b?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,b.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");if(i.className="title-section",this.icon){const 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"/>
|
|
@@ -7,12 +7,12 @@
|
|
|
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"),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
|
|
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 p=document.createElement("span");p.className="info-marker",p.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
|
-
`,
|
|
15
|
+
`,p.title=this.description,s.insertBefore(p,o)}}else{if(!r){const p=document.createElement("div");p.className="setting-group-description",p.textContent=this.description,a.insertBefore(p,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()}};b.hiddenElements=new Set;let v=b;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 C{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 C{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",this.detectChange=t.detectChange}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=p=>{const g=p.value.split(",").map(O=>parseInt(O.trim()));if(g.length!==3||g.some(isNaN))return p.style.border="1px solid red",!1;const[d,m,f]=g,E=d>=0&&d<=255&&m>=0&&m<=255&&f>=0&&f<=255;return p.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=p=>{var d;let g=p.target.value.trim();o(c)&&(this.value=g,(d=this.onChange)==null||d.call(this,g),u.value=this.rgbToHex(g),a.style.backgroundColor=`rgb(${g})`)},u.oninput=p=>{var m,f;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(m=this.onChange)==null||m.call(this,d),(f=this.detectChange)==null||f.call(this,d),c.value=d,a.style.backgroundColor=`rgb(${d})`},u.onchange=p=>{var m,f;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(m=this.onChange)==null||m.call(this,d),(f=this.detectChange)==null||f.call(this,d),c.value=d,a.style.backgroundColor=`rgb(${d})`},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 w extends C{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 L extends w{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
|
|
27
|
+
`;class N extends C{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 C{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
|
|
28
28
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
29
29
|
<path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
|
|
30
30
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
<path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
|
|
46
46
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
47
47
|
</svg>
|
|
48
|
-
`}].forEach(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
|
|
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 C{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 C{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.aspectRatio=1,this.isUpdating=!1;const e=t.width||100,i=t.height||100;this.value||(this.value={width:e,height:i}),this.minWidth=Math.max(1,t.minWidth||1),this.maxWidth=t.maxWidth,this.minHeight=Math.max(1,t.minHeight||1),this.maxHeight=t.maxHeight,this.locked=t.locked??!1,(!this.value.width||this.value.width<1)&&(this.value.width=1),(!this.value.height||this.value.height<1)&&(this.value.height=1),this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.widthSetting=new w({title:"Width",default:this.value.width,suffix:"px",minValue:this.minWidth,maxValue:this.maxWidth,icon:F}),this.heightSetting=new w({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>`:`
|
|
@@ -68,7 +68,7 @@
|
|
|
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
|
|
71
|
+
`;class W extends C{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
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=`
|
|
@@ -77,17 +77,17 @@
|
|
|
77
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(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,
|
|
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,p;const c=(r=l.files)==null?void 0:r[0];if(c)try{a.classList.add("loading"),a.disabled=!0;const g=new FormData,d=this.props.formFieldName||"file";g.append(d,c,c.name);const m=this.props.uploadUrl;if(!m)throw new Error("No uploadUrl provided to UploadSetting.");const f=this.props.requestMethod||"POST",E={...this.props.requestHeaders||{}},k=await(await fetch(m,{method:f,body:g,headers:E})).json();let x;if(this.props.parseResponse)x=this.props.parseResponse(k);else if(x=(u=k==null?void 0:k.data)==null?void 0:u.url,!x)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=x,this.updatePreviewState(x),(p=this.onChange)==null||p.call(this,x)}catch(g){console.error("Error uploading file:",g),this.updatePreviewState(null)}finally{a.classList.remove("loading"),a.disabled=!1}},t}}class D extends C{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new w({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
|
-
</svg>`;class J extends
|
|
82
|
+
</svg>`;class J extends C{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new w({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"/>
|
|
84
84
|
</svg>`,X=`
|
|
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
|
|
88
|
+
`;class Q extends C{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 C{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
|
|
90
|
+
</svg>`;class tt extends C{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 m;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(m=this.onChange)==null||m.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer: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,7 +95,7 @@
|
|
|
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
|
|
98
|
+
`;class st extends v{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new w({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 L({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new w({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
100
|
border-width: ${n}px;
|
|
101
101
|
border-radius: ${i}px;
|
|
@@ -112,14 +112,14 @@
|
|
|
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
|
|
115
|
+
`;class lt extends v{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 L({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 w({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
119
|
font-weight: ${n};
|
|
120
120
|
font-size: ${s}px;
|
|
121
121
|
text-align: ${o};
|
|
122
|
-
`}}class M extends
|
|
122
|
+
`}}class M extends C{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 v{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};
|
|
@@ -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
|
|
135
|
+
</svg>`;class ut extends v{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
|
-
`,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
|
|
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 v{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,7 +153,7 @@
|
|
|
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
|
|
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 v{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 L({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new S({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"}),opacityBG:new L({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;
|
|
@@ -161,4 +161,4 @@
|
|
|
161
161
|
`:`
|
|
162
162
|
background-color: ${i};
|
|
163
163
|
opacity: ${n/100};
|
|
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=
|
|
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=w;exports.OpacitySetting=L;exports.SelectApiSettings=Q;exports.SelectSetting=N;exports.Setting=C;exports.SettingGroup=v;exports.StringSetting=y;exports.TabsContainerGroup=gt;exports.Toggle=Y;exports.UploadSetting=W;exports.WidthSetting=J;exports.iterateSettings=R;
|
|
@@ -12,7 +12,7 @@ function B(h, t) {
|
|
|
12
12
|
t(e, i);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
const
|
|
15
|
+
const b = class b {
|
|
16
16
|
constructor(t) {
|
|
17
17
|
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);
|
|
18
18
|
}
|
|
@@ -45,17 +45,17 @@ const x = class x {
|
|
|
45
45
|
for (const i in this.settings)
|
|
46
46
|
if (this.settings.hasOwnProperty(i)) {
|
|
47
47
|
const n = this.settings[i];
|
|
48
|
-
n instanceof
|
|
48
|
+
n instanceof b ? e[i] = n.getValues() : e[i] = n.value;
|
|
49
49
|
}
|
|
50
50
|
return e;
|
|
51
51
|
} else {
|
|
52
52
|
const e = this.settings[t];
|
|
53
|
-
return e ? e instanceof
|
|
53
|
+
return e ? e instanceof b ? e.getValues() : e.value : void 0;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
draw() {
|
|
57
57
|
const t = document.createElement("div");
|
|
58
|
-
t.className = "setting-group", t.id = `setting-group-${this.id}`,
|
|
58
|
+
t.className = "setting-group", t.id = `setting-group-${this.id}`, b.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
|
|
59
59
|
const e = document.createElement("div");
|
|
60
60
|
e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
|
|
61
61
|
"aria-expanded",
|
|
@@ -100,19 +100,19 @@ const x = class x {
|
|
|
100
100
|
if (this.description)
|
|
101
101
|
if (this.isCollapsed) {
|
|
102
102
|
if (r && r.remove(), !u) {
|
|
103
|
-
const
|
|
104
|
-
|
|
103
|
+
const p = document.createElement("span");
|
|
104
|
+
p.className = "info-marker", p.innerHTML = `
|
|
105
105
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
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
|
-
`,
|
|
109
|
+
`, p.title = this.description, s.insertBefore(p, o);
|
|
110
110
|
}
|
|
111
111
|
} else {
|
|
112
112
|
if (!r) {
|
|
113
|
-
const
|
|
114
|
-
|
|
115
|
-
|
|
113
|
+
const p = document.createElement("div");
|
|
114
|
+
p.className = "setting-group-description", p.textContent = this.description, a.insertBefore(
|
|
115
|
+
p,
|
|
116
116
|
a.firstChild
|
|
117
117
|
);
|
|
118
118
|
}
|
|
@@ -158,8 +158,8 @@ const x = class x {
|
|
|
158
158
|
this.isHidden ? this.show() : this.hide();
|
|
159
159
|
}
|
|
160
160
|
};
|
|
161
|
-
|
|
162
|
-
let
|
|
161
|
+
b.hiddenElements = /* @__PURE__ */ new Set();
|
|
162
|
+
let v = b;
|
|
163
163
|
function W(h) {
|
|
164
164
|
switch (h) {
|
|
165
165
|
case "number":
|
|
@@ -178,7 +178,7 @@ function W(h) {
|
|
|
178
178
|
return "";
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
|
-
class
|
|
181
|
+
class C {
|
|
182
182
|
constructor(t = {}) {
|
|
183
183
|
this.props = t, this.id = t.id || I(), this.value = this.props.default, this.title = t.title || "";
|
|
184
184
|
}
|
|
@@ -248,7 +248,7 @@ class m {
|
|
|
248
248
|
return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
|
|
249
249
|
}
|
|
250
250
|
}
|
|
251
|
-
class H extends
|
|
251
|
+
class H extends C {
|
|
252
252
|
constructor(t = {}) {
|
|
253
253
|
super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
|
|
254
254
|
}
|
|
@@ -275,7 +275,7 @@ class S extends H {
|
|
|
275
275
|
...t,
|
|
276
276
|
icon: t.icon || O,
|
|
277
277
|
title: t.title || "Color"
|
|
278
|
-
}), this.inputType = "color";
|
|
278
|
+
}), this.inputType = "color", this.detectChange = t.detectChange;
|
|
279
279
|
}
|
|
280
280
|
hexToRgb(t) {
|
|
281
281
|
t = t.replace("#", "");
|
|
@@ -300,12 +300,12 @@ class S extends H {
|
|
|
300
300
|
e.appendChild(i), e.appendChild(n);
|
|
301
301
|
const s = document.createElement("div");
|
|
302
302
|
s.className = "color-input-wrapper";
|
|
303
|
-
const o = (
|
|
304
|
-
const g =
|
|
303
|
+
const o = (p) => {
|
|
304
|
+
const g = p.value.split(",").map((N) => parseInt(N.trim()));
|
|
305
305
|
if (g.length !== 3 || g.some(isNaN))
|
|
306
|
-
return
|
|
307
|
-
const [
|
|
308
|
-
return
|
|
306
|
+
return p.style.border = "1px solid red", !1;
|
|
307
|
+
const [d, m, f] = g, L = d >= 0 && d <= 255 && m >= 0 && m <= 255 && f >= 0 && f <= 255;
|
|
308
|
+
return p.style.border = L ? "" : "1px solid red", L;
|
|
309
309
|
}, a = document.createElement("div");
|
|
310
310
|
a.className = "color-preview", a.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
|
|
311
311
|
const l = this.createInput({
|
|
@@ -317,18 +317,22 @@ class S extends H {
|
|
|
317
317
|
inputType: this.inputType,
|
|
318
318
|
inputClassName: "color-picker"
|
|
319
319
|
}), u = r.querySelector("input");
|
|
320
|
-
return c.oninput = (
|
|
321
|
-
var
|
|
322
|
-
let g =
|
|
323
|
-
o(c) && (this.value = g, (
|
|
324
|
-
}, u.oninput = (
|
|
325
|
-
var
|
|
326
|
-
const g =
|
|
327
|
-
this.value =
|
|
320
|
+
return c.oninput = (p) => {
|
|
321
|
+
var d;
|
|
322
|
+
let g = p.target.value.trim();
|
|
323
|
+
o(c) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), a.style.backgroundColor = `rgb(${g})`);
|
|
324
|
+
}, u.oninput = (p) => {
|
|
325
|
+
var m, f;
|
|
326
|
+
const g = p.target.value, d = this.hexToRgb(g);
|
|
327
|
+
this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), c.value = d, a.style.backgroundColor = `rgb(${d})`;
|
|
328
|
+
}, u.onchange = (p) => {
|
|
329
|
+
var m, f;
|
|
330
|
+
const g = p.target.value, d = this.hexToRgb(g);
|
|
331
|
+
this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), c.value = d, a.style.backgroundColor = `rgb(${d})`;
|
|
328
332
|
}, 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
333
|
}
|
|
330
334
|
}
|
|
331
|
-
class
|
|
335
|
+
class w extends C {
|
|
332
336
|
constructor(t = {}) {
|
|
333
337
|
super(t), this.inputType = "number";
|
|
334
338
|
}
|
|
@@ -359,7 +363,7 @@ class v extends m {
|
|
|
359
363
|
return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
|
|
360
364
|
}
|
|
361
365
|
}
|
|
362
|
-
class M extends
|
|
366
|
+
class M extends w {
|
|
363
367
|
constructor(t) {
|
|
364
368
|
super({
|
|
365
369
|
...t,
|
|
@@ -383,7 +387,7 @@ const A = `
|
|
|
383
387
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
384
388
|
</svg>
|
|
385
389
|
`;
|
|
386
|
-
class V extends
|
|
390
|
+
class V extends C {
|
|
387
391
|
constructor(t = {}) {
|
|
388
392
|
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) {
|
|
389
393
|
const e = this._options.findIndex((i) => i.value === this.value);
|
|
@@ -467,7 +471,7 @@ class V extends m {
|
|
|
467
471
|
this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), super.destroy();
|
|
468
472
|
}
|
|
469
473
|
}
|
|
470
|
-
class _ extends
|
|
474
|
+
class _ extends C {
|
|
471
475
|
constructor(t = {}) {
|
|
472
476
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
473
477
|
}
|
|
@@ -520,7 +524,7 @@ class _ extends m {
|
|
|
520
524
|
}), t.appendChild(i), t;
|
|
521
525
|
}
|
|
522
526
|
}
|
|
523
|
-
class nt extends
|
|
527
|
+
class nt extends C {
|
|
524
528
|
constructor(t) {
|
|
525
529
|
super(t), this.inputType = "button";
|
|
526
530
|
}
|
|
@@ -533,21 +537,21 @@ class nt extends m {
|
|
|
533
537
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
534
538
|
}
|
|
535
539
|
}
|
|
536
|
-
class ot extends
|
|
540
|
+
class ot extends C {
|
|
537
541
|
constructor(t = {}) {
|
|
538
542
|
super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
|
|
539
543
|
const e = t.width || 100, i = t.height || 100;
|
|
540
544
|
this.value || (this.value = {
|
|
541
545
|
width: e,
|
|
542
546
|
height: i
|
|
543
|
-
}), 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
|
|
547
|
+
}), this.minWidth = Math.max(1, t.minWidth || 1), this.maxWidth = t.maxWidth, this.minHeight = Math.max(1, t.minHeight || 1), this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, (!this.value.width || this.value.width < 1) && (this.value.width = 1), (!this.value.height || this.value.height < 1) && (this.value.height = 1), this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new w({
|
|
544
548
|
title: "Width",
|
|
545
549
|
default: this.value.width,
|
|
546
550
|
suffix: "px",
|
|
547
551
|
minValue: this.minWidth,
|
|
548
552
|
maxValue: this.maxWidth,
|
|
549
553
|
icon: j
|
|
550
|
-
}), this.heightSetting = new
|
|
554
|
+
}), this.heightSetting = new w({
|
|
551
555
|
title: "Height",
|
|
552
556
|
default: this.value.height,
|
|
553
557
|
suffix: "px",
|
|
@@ -663,7 +667,7 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
663
667
|
<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"/>
|
|
664
668
|
</svg>
|
|
665
669
|
`;
|
|
666
|
-
class F extends
|
|
670
|
+
class F extends C {
|
|
667
671
|
constructor(t = {}) {
|
|
668
672
|
super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
|
|
669
673
|
}
|
|
@@ -716,29 +720,29 @@ class F extends m {
|
|
|
716
720
|
}, a.onclick = () => {
|
|
717
721
|
l.click();
|
|
718
722
|
}, l.onchange = async () => {
|
|
719
|
-
var r, u,
|
|
723
|
+
var r, u, p;
|
|
720
724
|
const c = (r = l.files) == null ? void 0 : r[0];
|
|
721
725
|
if (c)
|
|
722
726
|
try {
|
|
723
727
|
a.classList.add("loading"), a.disabled = !0;
|
|
724
|
-
const g = new FormData(),
|
|
725
|
-
g.append(
|
|
726
|
-
const
|
|
727
|
-
if (!
|
|
728
|
+
const g = new FormData(), d = this.props.formFieldName || "file";
|
|
729
|
+
g.append(d, c, c.name);
|
|
730
|
+
const m = this.props.uploadUrl;
|
|
731
|
+
if (!m)
|
|
728
732
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
729
|
-
const
|
|
730
|
-
method:
|
|
733
|
+
const f = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(m, {
|
|
734
|
+
method: f,
|
|
731
735
|
body: g,
|
|
732
736
|
headers: L
|
|
733
737
|
})).json();
|
|
734
|
-
let
|
|
738
|
+
let x;
|
|
735
739
|
if (this.props.parseResponse)
|
|
736
|
-
|
|
737
|
-
else if (
|
|
740
|
+
x = this.props.parseResponse(E);
|
|
741
|
+
else if (x = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !x)
|
|
738
742
|
throw new Error(
|
|
739
743
|
"No URL found in response. Provide a parseResponse if needed."
|
|
740
744
|
);
|
|
741
|
-
this.value =
|
|
745
|
+
this.value = x, this.updatePreviewState(x), (p = this.onChange) == null || p.call(this, x);
|
|
742
746
|
} catch (g) {
|
|
743
747
|
console.error("Error uploading file:", g), this.updatePreviewState(null);
|
|
744
748
|
} finally {
|
|
@@ -747,9 +751,9 @@ class F extends m {
|
|
|
747
751
|
}, t;
|
|
748
752
|
}
|
|
749
753
|
}
|
|
750
|
-
class at extends
|
|
754
|
+
class at extends C {
|
|
751
755
|
constructor(t = {}) {
|
|
752
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
756
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
|
|
753
757
|
title: "Height",
|
|
754
758
|
default: this.value,
|
|
755
759
|
suffix: "px",
|
|
@@ -768,9 +772,9 @@ class at extends m {
|
|
|
768
772
|
const z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
769
773
|
<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"/>
|
|
770
774
|
</svg>`;
|
|
771
|
-
class lt extends
|
|
775
|
+
class lt extends C {
|
|
772
776
|
constructor(t = {}) {
|
|
773
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
777
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new w({
|
|
774
778
|
title: "Width",
|
|
775
779
|
default: this.value,
|
|
776
780
|
suffix: "px",
|
|
@@ -793,7 +797,7 @@ const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
793
797
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
794
798
|
</svg>
|
|
795
799
|
`;
|
|
796
|
-
class rt extends
|
|
800
|
+
class rt extends C {
|
|
797
801
|
constructor(t = {}) {
|
|
798
802
|
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
803
|
(e) => JSON.stringify(e.value) === JSON.stringify(t.default)
|
|
@@ -916,7 +920,7 @@ class rt extends m {
|
|
|
916
920
|
this.detectChangeCallback = t;
|
|
917
921
|
}
|
|
918
922
|
}
|
|
919
|
-
class ht extends
|
|
923
|
+
class ht extends C {
|
|
920
924
|
constructor(t) {
|
|
921
925
|
super(t), this.inputType = "text", this.value = t.default ?? !1;
|
|
922
926
|
}
|
|
@@ -946,7 +950,7 @@ class ht extends m {
|
|
|
946
950
|
const Z = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
947
951
|
<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"/>
|
|
948
952
|
</svg>`;
|
|
949
|
-
class ct extends
|
|
953
|
+
class ct extends C {
|
|
950
954
|
constructor(t = {}) {
|
|
951
955
|
super(t), this.inputType = "number", this.inputValues = {};
|
|
952
956
|
}
|
|
@@ -988,10 +992,10 @@ class ct extends m {
|
|
|
988
992
|
o.classList.add("gap-input-label"), o.textContent = t, n.appendChild(o), i.appendChild(n);
|
|
989
993
|
const a = (u) => {
|
|
990
994
|
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", () => {
|
|
991
|
-
var
|
|
992
|
-
const
|
|
993
|
-
let
|
|
994
|
-
|
|
995
|
+
var m;
|
|
996
|
+
const p = this.props.minValue ?? 0, g = this.props.maxValue ?? 100;
|
|
997
|
+
let d = Number(u.value);
|
|
998
|
+
d < p && (d = p), d > g && (d = g), u.value = String(d), this.value = d, this.inputValues[t] = d, console.log(`Gap Setting (${t}): ${d}${this.props.suffix || ""}`), (m = this.onChange) == null || m.call(this, d);
|
|
995
999
|
});
|
|
996
1000
|
}, l = this.createInput({
|
|
997
1001
|
value: e,
|
|
@@ -1018,14 +1022,14 @@ const J = `
|
|
|
1018
1022
|
<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"/>
|
|
1019
1023
|
</svg>
|
|
1020
1024
|
`;
|
|
1021
|
-
class dt extends
|
|
1025
|
+
class dt extends v {
|
|
1022
1026
|
constructor(t) {
|
|
1023
1027
|
super({
|
|
1024
1028
|
title: "Border",
|
|
1025
1029
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
1026
1030
|
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1027
1031
|
settings: {
|
|
1028
|
-
size: new
|
|
1032
|
+
size: new w({
|
|
1029
1033
|
title: "Size",
|
|
1030
1034
|
icon: P,
|
|
1031
1035
|
default: (t == null ? void 0 : t.size) ?? 0,
|
|
@@ -1039,7 +1043,7 @@ class dt extends f {
|
|
|
1039
1043
|
minValue: 0,
|
|
1040
1044
|
maxValue: 100
|
|
1041
1045
|
}),
|
|
1042
|
-
radius: new
|
|
1046
|
+
radius: new w({
|
|
1043
1047
|
title: "Radius",
|
|
1044
1048
|
icon: J,
|
|
1045
1049
|
default: (t == null ? void 0 : t.radius) ?? 12,
|
|
@@ -1074,7 +1078,7 @@ const X = `
|
|
|
1074
1078
|
<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"/>
|
|
1075
1079
|
</svg>
|
|
1076
1080
|
`;
|
|
1077
|
-
class pt extends
|
|
1081
|
+
class pt extends v {
|
|
1078
1082
|
constructor(t = {}) {
|
|
1079
1083
|
super({
|
|
1080
1084
|
title: t.title || "Typography",
|
|
@@ -1111,7 +1115,7 @@ class pt extends f {
|
|
|
1111
1115
|
getOptions: t.fontWeightGetOptions,
|
|
1112
1116
|
getOptionsAsync: t.fontWeightGetOptionsAsync
|
|
1113
1117
|
}),
|
|
1114
|
-
fontSize: new
|
|
1118
|
+
fontSize: new w({
|
|
1115
1119
|
title: "Size",
|
|
1116
1120
|
icon: Y,
|
|
1117
1121
|
default: t.fontSizeDefault ?? 12,
|
|
@@ -1136,7 +1140,7 @@ class pt extends f {
|
|
|
1136
1140
|
`;
|
|
1137
1141
|
}
|
|
1138
1142
|
}
|
|
1139
|
-
class k extends
|
|
1143
|
+
class k extends C {
|
|
1140
1144
|
constructor(t) {
|
|
1141
1145
|
super({
|
|
1142
1146
|
...t,
|
|
@@ -1182,7 +1186,7 @@ class k extends m {
|
|
|
1182
1186
|
}), i;
|
|
1183
1187
|
}
|
|
1184
1188
|
}
|
|
1185
|
-
class ut extends
|
|
1189
|
+
class ut extends v {
|
|
1186
1190
|
constructor(t) {
|
|
1187
1191
|
super({
|
|
1188
1192
|
title: "Margins",
|
|
@@ -1235,7 +1239,7 @@ const K = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
1235
1239
|
</svg>`, it = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1236
1240
|
<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"/>
|
|
1237
1241
|
</svg>`;
|
|
1238
|
-
class st extends
|
|
1242
|
+
class st extends v {
|
|
1239
1243
|
constructor(t, e, i) {
|
|
1240
1244
|
super({
|
|
1241
1245
|
title: `Tab ${t + 1}`,
|
|
@@ -1279,7 +1283,7 @@ class st extends f {
|
|
|
1279
1283
|
return t;
|
|
1280
1284
|
}
|
|
1281
1285
|
}
|
|
1282
|
-
class gt extends
|
|
1286
|
+
class gt extends v {
|
|
1283
1287
|
// Store the rendered element
|
|
1284
1288
|
constructor(t) {
|
|
1285
1289
|
super({
|
|
@@ -1348,7 +1352,7 @@ class gt extends f {
|
|
|
1348
1352
|
}));
|
|
1349
1353
|
}
|
|
1350
1354
|
}
|
|
1351
|
-
class mt extends
|
|
1355
|
+
class mt extends v {
|
|
1352
1356
|
/**
|
|
1353
1357
|
* Constructs a new BackgroundSettingSet.
|
|
1354
1358
|
*
|
|
@@ -1433,12 +1437,12 @@ export {
|
|
|
1433
1437
|
pt as HeaderTypographySettingSet,
|
|
1434
1438
|
at as HeightSetting,
|
|
1435
1439
|
ut as MarginSettingGroup,
|
|
1436
|
-
|
|
1440
|
+
w as NumberSetting,
|
|
1437
1441
|
M as OpacitySetting,
|
|
1438
1442
|
rt as SelectApiSettings,
|
|
1439
1443
|
V as SelectSetting,
|
|
1440
|
-
|
|
1441
|
-
|
|
1444
|
+
C as Setting,
|
|
1445
|
+
v as SettingGroup,
|
|
1442
1446
|
H as StringSetting,
|
|
1443
1447
|
gt as TabsContainerGroup,
|
|
1444
1448
|
ht as Toggle,
|
package/dist/index.d.ts
CHANGED
|
@@ -99,6 +99,7 @@ export declare interface ButtonSettingProps extends SettingProps<void> {
|
|
|
99
99
|
|
|
100
100
|
export declare class ColorSetting extends StringSetting {
|
|
101
101
|
inputType: InputTypes;
|
|
102
|
+
detectChange?: (value: string | undefined) => void;
|
|
102
103
|
constructor(props: ColorSettingProps);
|
|
103
104
|
private hexToRgb;
|
|
104
105
|
private rgbToHex;
|
|
@@ -106,6 +107,7 @@ export declare class ColorSetting extends StringSetting {
|
|
|
106
107
|
}
|
|
107
108
|
|
|
108
109
|
export declare interface ColorSettingProps extends StringSettingsProps {
|
|
110
|
+
detectChange?: (value: string | undefined) => void;
|
|
109
111
|
}
|
|
110
112
|
|
|
111
113
|
export declare class DimensionSetting extends Setting<DimensionValue, DimensionSettingProps> {
|
package/package.json
CHANGED