builder-settings-types 0.0.87 → 0.0.89
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 +35 -35
- package/dist/builder-settings-types.es.js +148 -138
- package/dist/index.d.ts +6 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});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 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(s=>{t(s),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 s=this.settings[i];s instanceof x?e[i]=s.getValues():e[i]=s.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 s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");if(n.className="actions-section",this.description&&this.isCollapsed){const 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"/>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
13
13
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`,d.title=this.description,n.insertBefore(d,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(n),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.
|
|
15
|
+
`,d.title=this.description,n.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(n),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)}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 s=document.createElement("input");this.inputEl=s,s.value=String(t.value||$(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=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)};return s.addEventListener("input",n),s.addEventListener("change",n),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),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),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}rgbToHex(t){const[e,i,s]=t.split(",").map(o=>parseInt(o.trim()));if(isNaN(e)||isNaN(i)||isNaN(s))return"#000000";const n=o=>{const a=o.toString(16);return a.length===1?"0"+a:a};return`#${n(e)}${n(i)}${n(s)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||T),s=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.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})`},n.appendChild(a),n.appendChild(r),n.appendChild(l),t.appendChild(e),t.appendChild(n),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=n=>{this.props.minValue!==void 0&&(n.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(n.max=String(this.props.maxValue)),this.props.className&&n.classList.add(this.props.className),n.addEventListener("input",()=>{const o=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(n.value);l<o&&(l=o),l>a&&(l=a),n.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 s=document.createElement("span");return s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s),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"/>
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
<path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
|
|
21
21
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
22
22
|
</svg>
|
|
23
|
-
|
|
23
|
+
`,G=`
|
|
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
|
|
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 n=document.createElement("div");if(n.className="icon-container",this.props.icon){const o=this.createIcon(this.props.icon);n.appendChild(o)}if(this.props.title){const o=this.createLabel(this.props.title);n.appendChild(o)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var n,o;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.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((n,o)=>{const a=this.createOption(n,o);a.onclick=l=>this.selectOption(l,o,e),i.appendChild(a)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=G,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var o,a;this.isOpen&&!t.contains(n.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 n,o,a;const s=this._options[e];s&&(this.value=s.value,(n=this.onChange)==null||n.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(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=s=>{this.buttonEl&&this.selectOption(s,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class 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,94 +45,94 @@
|
|
|
45
45
|
<path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
|
|
46
46
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
47
47
|
</svg>
|
|
48
|
-
`}].forEach(n=>{const o=document.createElement("button");o.className="align-option-button",o.innerHTML=n.icon,this.value===n.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=n.name,(a=this.onChange)==null||a.call(this,this.value)}),i.appendChild(o)}),t.appendChild(i),t}}class
|
|
48
|
+
`}].forEach(n=>{const o=document.createElement("button");o.className="align-option-button",o.innerHTML=n.icon,this.value===n.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=n.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:s}=this.value;s>0&&(this.aspectRatio=i/s)}t.innerHTML=this.getLockSVG(this.locked),t.setAttribute("aria-pressed",String(this.locked)),t.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const e=t.closest(".dimension-setting-container");e&&(this.locked?e.classList.add("aspect-locked"):e.classList.remove("aspect-locked"))}getLockSVG(t){return t?`
|
|
49
49
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
50
50
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
51
51
|
</svg>`:`
|
|
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(),s=document.createElement("div");s.className="dimension-bracket";const n=document.createElement("button");return n.className="dimension-lock-icon",n.setAttribute("type","button"),n.setAttribute("aria-pressed",String(this.locked)),n.setAttribute("aria-label",this.locked?"Unlock aspect ratio":"Lock aspect ratio"),n.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio",n.innerHTML=this.getLockSVG(this.locked),n.onclick=o=>{o.preventDefault(),this.toggleLock(n)},s.appendChild(n),t.appendChild(e),t.appendChild(s),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:s}=this.value;s>0&&(this.aspectRatio=i/s)}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
|
|
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(),s=document.createElement("div");s.className="dimension-bracket";const n=document.createElement("button");return n.className="dimension-lock-icon",n.setAttribute("type","button"),n.setAttribute("aria-pressed",String(this.locked)),n.setAttribute("aria-label",this.locked?"Unlock aspect ratio":"Lock aspect ratio"),n.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio",n.innerHTML=this.getLockSVG(this.locked),n.onclick=o=>{o.preventDefault(),this.toggleLock(n)},s.appendChild(n),t.appendChild(e),t.appendChild(s),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:s}=this.value;s>0&&(this.aspectRatio=i/s)}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
|
-
</svg>`,
|
|
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"/>
|
|
58
|
-
</svg>`,
|
|
58
|
+
</svg>`,H=`
|
|
59
59
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
60
60
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
61
61
|
</svg>
|
|
62
|
-
`,
|
|
62
|
+
`,V=`
|
|
63
63
|
<svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
64
64
|
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
65
65
|
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
66
66
|
</svg>
|
|
67
|
-
`,
|
|
67
|
+
`,z=`
|
|
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
|
|
72
|
-
<span class="upload-icon">${
|
|
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"),s=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",s&&s instanceof HTMLElement&&(s.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
|
|
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",s&&s instanceof HTMLElement&&(s.style.display="none"),i&&(i.innerHTML=`
|
|
75
|
-
<span class="upload-icon">${
|
|
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 s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");n.className="preview-placeholder",n.innerHTML=
|
|
78
|
-
<span class="upload-icon">${
|
|
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 s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");n.className="preview-placeholder",n.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
|
+
<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(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(l),s?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
|
|
80
|
+
`;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(l),s?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
|
-
</svg>`;class
|
|
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"/>
|
|
84
|
-
</svg>`,
|
|
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
|
|
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)}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 s=document.createElement("input");return s.type="radio",s.classList.add("select-api-radio"),s.name="select-api-radio-group",i.appendChild(s),this.selectedOptionIndex===e&&(s.checked=!0),i}draw(){const t=document.createElement("div");t.classList.add("select-api-container"),this.container=t;const e=document.createElement("div");if(e.classList.add("select-api-button"),this.props.title){e.classList.add("has-label");const n=document.createElement("div");n.className="select-label",n.textContent=this.props.title,e.appendChild(n);const 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 this.isLoading?e.textContent=this.props.loadingText||"Loading options...":e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option";e.onclick=()=>{var n,o;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.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((n,o)=>{const a=this.createOption(n,o);a.onclick=l=>this.selectApiOption(l,o,e),i.appendChild(a)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=X,t.appendChild(s),s.onclick=()=>{var n,o;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),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(n=>{console.error("Failed to fetch async options:",n),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(n=>{const o=new Set(this._options.map(l=>JSON.stringify(l.value))),a=n.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(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),t}selectApiOption(t,e,i){var n,o;const s=this._options[e];if(s){const a=s.value;this.value=a,this.onChange&&this.onChange(a),this.selectedOptionIndex=e,this.isOpen=!1,this.updateButtonText(),(n=this.optionsListEl)==null||n.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=s=>{this.buttonEl&&this.selectApiOption(s,e,this.buttonEl)},i.tabIndex=0,i.addEventListener("keydown",s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),this.buttonEl&&this.selectApiOption(s,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"),s=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&&!s){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 n;if(t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),n=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?n=this._options[this.selectedOptionIndex].name:n="Select an option",e)e.textContent=n;else if(i&&this.props.title&&!s){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=n,this.buttonEl.appendChild(a)}else this.buttonEl.textContent=n}}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 s=document.createElement("input");s.type="checkbox",s.checked=this.value??!1,s.addEventListener("change",()=>{this.value=s.checked,this.onChange&&this.onChange(this.value)});const n=document.createElement("span");return n.className="toggle-slider",i.appendChild(s),i.appendChild(n),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
|
|
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 s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||K,s.appendChild(n);const o=document.createElement("label");o.classList.add("gap-input-label"),o.textContent=t,s.appendChild(o),i.appendChild(s);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>
|
|
94
|
-
`,
|
|
94
|
+
`,it=`
|
|
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
|
|
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,s=this.settings.size.value??0;return`
|
|
99
99
|
border-color: ${t};
|
|
100
100
|
border-width: ${s}px;
|
|
101
101
|
border-radius: ${i}px;
|
|
102
102
|
opacity: ${e/100};
|
|
103
|
-
`}}const
|
|
103
|
+
`}}const nt=`
|
|
104
104
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
105
105
|
<path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
106
106
|
</svg>
|
|
107
|
-
`,
|
|
107
|
+
`,ot=`
|
|
108
108
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
109
109
|
<path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
110
110
|
</svg>
|
|
111
|
-
`,
|
|
111
|
+
`,at=`
|
|
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
|
|
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",s=this.settings.fontWeight.value??"bold",n=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: ${s};
|
|
120
120
|
font-size: ${n}px;
|
|
121
121
|
text-align: ${o};
|
|
122
|
-
`}}class
|
|
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 s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const 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,s=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
126
|
margin-left: ${s};
|
|
127
|
-
`}}const
|
|
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
|
-
</svg>`,ht=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
130
|
-
<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.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
131
129
|
</svg>`,ct=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
132
|
-
<path d="
|
|
130
|
+
<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.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
133
131
|
</svg>`,dt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
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
|
+
</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
|
|
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 s=document.createElement("div");s.className="tab-delete-container";const n=document.createElement("button");n.className="tab-delete-button",n.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
|
-
`,n.onclick=()=>{var a;return(a=this.onDeleteCallback)==null?void 0:a.call(this)},s.appendChild(n);const o=i.querySelector("h3");o?o.insertAdjacentElement("afterend",s):i.appendChild(s)}return t}}class
|
|
143
|
+
`,n.onclick=()=>{var a;return(a=this.onDeleteCallback)==null?void 0:a.call(this)},s.appendChild(n);const o=i.querySelector("h3");o?o.insertAdjacentElement("afterend",s):i.appendChild(s)}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,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
|
|
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,n,o,a]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);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",s=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: ${s/100};
|
|
164
|
-
`}}exports.AlignSetting=B;exports.BackgroundSettingSet=
|
|
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;
|
|
@@ -1,53 +1,61 @@
|
|
|
1
|
-
const
|
|
2
|
-
let
|
|
1
|
+
const R = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
+
let I = (h = 21) => {
|
|
3
3
|
let t = "", e = crypto.getRandomValues(new Uint8Array(h |= 0));
|
|
4
4
|
for (; h--; )
|
|
5
|
-
t +=
|
|
5
|
+
t += R[e[h] & 63];
|
|
6
6
|
return t;
|
|
7
7
|
};
|
|
8
|
-
function
|
|
8
|
+
function B(h, t) {
|
|
9
9
|
for (const e in h)
|
|
10
10
|
if (h.hasOwnProperty(e)) {
|
|
11
11
|
const i = h[e];
|
|
12
12
|
t(e, i);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
class
|
|
15
|
+
const x = class x {
|
|
16
16
|
constructor(t) {
|
|
17
|
-
this.elementRef = null, this.id = t.id ||
|
|
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
|
+
}
|
|
19
|
+
static hide() {
|
|
20
|
+
this.hiddenElements.forEach((t) => {
|
|
21
|
+
t && (t.style.display = "none");
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
static show() {
|
|
25
|
+
this.hiddenElements.forEach((t) => {
|
|
26
|
+
t && (t.style.display = "");
|
|
27
|
+
});
|
|
18
28
|
}
|
|
19
29
|
setOnChange(t) {
|
|
20
|
-
return this.onChange = t,
|
|
30
|
+
return this.onChange = t, B(this.settings, (e, i) => {
|
|
21
31
|
i.setOnChange((s) => {
|
|
22
32
|
t(s), this.updateVisibility();
|
|
23
33
|
});
|
|
24
34
|
}), this;
|
|
25
35
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
// console.log(this.elementRef)
|
|
33
|
-
// }
|
|
36
|
+
hide() {
|
|
37
|
+
this.elementRef && (this.elementRef.style.display = "none", this.isHidden = !0);
|
|
38
|
+
}
|
|
39
|
+
show() {
|
|
40
|
+
this.elementRef && (this.elementRef.style.display = "", this.isHidden = !1);
|
|
41
|
+
}
|
|
34
42
|
getValues(t) {
|
|
35
43
|
if (t === void 0) {
|
|
36
44
|
const e = {};
|
|
37
45
|
for (const i in this.settings)
|
|
38
46
|
if (this.settings.hasOwnProperty(i)) {
|
|
39
47
|
const s = this.settings[i];
|
|
40
|
-
s instanceof
|
|
48
|
+
s instanceof x ? e[i] = s.getValues() : e[i] = s.value;
|
|
41
49
|
}
|
|
42
50
|
return e;
|
|
43
51
|
} else {
|
|
44
52
|
const e = this.settings[t];
|
|
45
|
-
return e ? e instanceof
|
|
53
|
+
return e ? e instanceof x ? e.getValues() : e.value : void 0;
|
|
46
54
|
}
|
|
47
55
|
}
|
|
48
56
|
draw() {
|
|
49
57
|
const t = document.createElement("div");
|
|
50
|
-
t.className = "setting-group", t.id = `setting-group-${this.id}`, this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
|
|
58
|
+
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");
|
|
51
59
|
const e = document.createElement("div");
|
|
52
60
|
e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
|
|
53
61
|
"aria-expanded",
|
|
@@ -147,10 +155,12 @@ class v {
|
|
|
147
155
|
this.elementRef && this.hideCondition && (this.elementRef.style.display = this.hideCondition() ? "none" : "");
|
|
148
156
|
}
|
|
149
157
|
toggle() {
|
|
150
|
-
this.
|
|
158
|
+
this.isHidden ? this.show() : this.hide();
|
|
151
159
|
}
|
|
152
|
-
}
|
|
153
|
-
|
|
160
|
+
};
|
|
161
|
+
x.hiddenElements = /* @__PURE__ */ new Set();
|
|
162
|
+
let f = x;
|
|
163
|
+
function W(h) {
|
|
154
164
|
switch (h) {
|
|
155
165
|
case "number":
|
|
156
166
|
return 0;
|
|
@@ -170,7 +180,7 @@ function B(h) {
|
|
|
170
180
|
}
|
|
171
181
|
class m {
|
|
172
182
|
constructor(t = {}) {
|
|
173
|
-
this.props = t, this.id = t.id ||
|
|
183
|
+
this.props = t, this.id = t.id || I(), this.value = this.props.default, this.title = t.title || "";
|
|
174
184
|
}
|
|
175
185
|
destroy() {
|
|
176
186
|
throw new Error("Method not implemented.");
|
|
@@ -199,7 +209,7 @@ class m {
|
|
|
199
209
|
const i = document.createElement("div");
|
|
200
210
|
i.className = t.wrapperClassName || "";
|
|
201
211
|
const s = document.createElement("input");
|
|
202
|
-
this.inputEl = s, s.value = String(t.value ||
|
|
212
|
+
this.inputEl = s, s.value = String(t.value || W(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "";
|
|
203
213
|
const n = (o) => {
|
|
204
214
|
const a = o.target;
|
|
205
215
|
let l = a.value;
|
|
@@ -238,7 +248,7 @@ class m {
|
|
|
238
248
|
return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
|
|
239
249
|
}
|
|
240
250
|
}
|
|
241
|
-
class
|
|
251
|
+
class H extends m {
|
|
242
252
|
constructor(t = {}) {
|
|
243
253
|
super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
|
|
244
254
|
}
|
|
@@ -258,12 +268,12 @@ class y extends m {
|
|
|
258
268
|
});
|
|
259
269
|
}
|
|
260
270
|
}
|
|
261
|
-
const
|
|
262
|
-
class
|
|
271
|
+
const O = "<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>";
|
|
272
|
+
class S extends H {
|
|
263
273
|
constructor(t) {
|
|
264
274
|
super({
|
|
265
275
|
...t,
|
|
266
|
-
icon: t.icon ||
|
|
276
|
+
icon: t.icon || O,
|
|
267
277
|
title: t.title || "Color"
|
|
268
278
|
}), this.inputType = "color";
|
|
269
279
|
}
|
|
@@ -286,16 +296,16 @@ class H extends y {
|
|
|
286
296
|
t.className = "color-setting-wrapper";
|
|
287
297
|
const e = document.createElement("div");
|
|
288
298
|
e.className = "icon-container";
|
|
289
|
-
const i = this.createIcon(this.props.icon ||
|
|
299
|
+
const i = this.createIcon(this.props.icon || O), s = this.createLabel(this.title || "Color");
|
|
290
300
|
e.appendChild(i), e.appendChild(s);
|
|
291
301
|
const n = document.createElement("div");
|
|
292
302
|
n.className = "color-input-wrapper";
|
|
293
303
|
const o = (d) => {
|
|
294
|
-
const g = d.value.split(",").map((
|
|
304
|
+
const g = d.value.split(",").map((N) => parseInt(N.trim()));
|
|
295
305
|
if (g.length !== 3 || g.some(isNaN))
|
|
296
306
|
return d.style.border = "1px solid red", !1;
|
|
297
|
-
const [p, C,
|
|
298
|
-
return d.style.border =
|
|
307
|
+
const [p, C, b] = g, L = p >= 0 && p <= 255 && C >= 0 && C <= 255 && b >= 0 && b <= 255;
|
|
308
|
+
return d.style.border = L ? "" : "1px solid red", L;
|
|
299
309
|
}, a = document.createElement("div");
|
|
300
310
|
a.className = "color-preview", a.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
|
|
301
311
|
const l = this.createInput({
|
|
@@ -318,7 +328,7 @@ class H extends y {
|
|
|
318
328
|
}, n.appendChild(a), n.appendChild(r), n.appendChild(l), t.appendChild(e), t.appendChild(n), this.value && (c.value = this.value, u.value = this.rgbToHex(this.value), a.style.backgroundColor = `rgb(${this.value})`), t;
|
|
319
329
|
}
|
|
320
330
|
}
|
|
321
|
-
class
|
|
331
|
+
class v extends m {
|
|
322
332
|
constructor(t = {}) {
|
|
323
333
|
super(t), this.inputType = "number";
|
|
324
334
|
}
|
|
@@ -349,18 +359,18 @@ class f extends m {
|
|
|
349
359
|
return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
|
|
350
360
|
}
|
|
351
361
|
}
|
|
352
|
-
class
|
|
362
|
+
class M extends v {
|
|
353
363
|
constructor(t) {
|
|
354
364
|
super({
|
|
355
365
|
...t,
|
|
356
366
|
minValue: 0,
|
|
357
367
|
maxValue: 100,
|
|
358
|
-
icon: t.icon ||
|
|
368
|
+
icon: t.icon || A,
|
|
359
369
|
title: t.title || "Opacity"
|
|
360
370
|
}), this.inputType = "number";
|
|
361
371
|
}
|
|
362
372
|
}
|
|
363
|
-
const
|
|
373
|
+
const A = `
|
|
364
374
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
365
375
|
<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"/>
|
|
366
376
|
<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"/>
|
|
@@ -368,12 +378,12 @@ const W = `
|
|
|
368
378
|
<path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
|
|
369
379
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
370
380
|
</svg>
|
|
371
|
-
`,
|
|
381
|
+
`, $ = `
|
|
372
382
|
<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">
|
|
373
383
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
374
384
|
</svg>
|
|
375
385
|
`;
|
|
376
|
-
class
|
|
386
|
+
class V extends m {
|
|
377
387
|
constructor(t = {}) {
|
|
378
388
|
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) {
|
|
379
389
|
const e = this._options.findIndex((i) => i.value === this.value);
|
|
@@ -412,7 +422,7 @@ class O extends m {
|
|
|
412
422
|
a.onclick = (l) => this.selectOption(l, o, e), i.appendChild(a);
|
|
413
423
|
}), t.appendChild(i);
|
|
414
424
|
const s = document.createElement("div");
|
|
415
|
-
return s.classList.add("svg-container"), s.innerHTML =
|
|
425
|
+
return s.classList.add("svg-container"), s.innerHTML = $, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
|
|
416
426
|
this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
|
|
417
427
|
}).catch((n) => {
|
|
418
428
|
console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
@@ -510,7 +520,7 @@ class _ extends m {
|
|
|
510
520
|
}), t.appendChild(i), t;
|
|
511
521
|
}
|
|
512
522
|
}
|
|
513
|
-
class
|
|
523
|
+
class nt extends m {
|
|
514
524
|
constructor(t) {
|
|
515
525
|
super(t), this.inputType = "button";
|
|
516
526
|
}
|
|
@@ -523,21 +533,21 @@ class st extends m {
|
|
|
523
533
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
524
534
|
}
|
|
525
535
|
}
|
|
526
|
-
class
|
|
536
|
+
class ot extends m {
|
|
527
537
|
constructor(t = {}) {
|
|
528
538
|
super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
|
|
529
539
|
const e = t.width || 100, i = t.height || 100;
|
|
530
540
|
this.value || (this.value = {
|
|
531
541
|
width: e,
|
|
532
542
|
height: i
|
|
533
|
-
}), 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
|
|
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 v({
|
|
534
544
|
title: "Width",
|
|
535
545
|
default: this.value.width,
|
|
536
546
|
suffix: "px",
|
|
537
547
|
minValue: this.minWidth,
|
|
538
548
|
maxValue: this.maxWidth,
|
|
539
|
-
icon:
|
|
540
|
-
}), this.heightSetting = new
|
|
549
|
+
icon: j
|
|
550
|
+
}), this.heightSetting = new v({
|
|
541
551
|
title: "Height",
|
|
542
552
|
default: this.value.height,
|
|
543
553
|
suffix: "px",
|
|
@@ -635,25 +645,25 @@ class nt extends m {
|
|
|
635
645
|
}
|
|
636
646
|
}
|
|
637
647
|
}
|
|
638
|
-
const
|
|
648
|
+
const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
639
649
|
<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"/>
|
|
640
650
|
</svg>`, G = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
641
651
|
<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"/>
|
|
642
|
-
</svg>`,
|
|
652
|
+
</svg>`, y = `
|
|
643
653
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
644
654
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
645
655
|
</svg>
|
|
646
|
-
`,
|
|
656
|
+
`, T = `
|
|
647
657
|
<svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
648
658
|
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
649
659
|
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
650
660
|
</svg>
|
|
651
|
-
`,
|
|
661
|
+
`, q = `
|
|
652
662
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
|
|
653
663
|
<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"/>
|
|
654
664
|
</svg>
|
|
655
665
|
`;
|
|
656
|
-
class
|
|
666
|
+
class F extends m {
|
|
657
667
|
constructor(t = {}) {
|
|
658
668
|
super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
|
|
659
669
|
}
|
|
@@ -663,10 +673,10 @@ class q extends m {
|
|
|
663
673
|
".preview-placeholder"
|
|
664
674
|
);
|
|
665
675
|
t && t !== "" ? (this.previewWrapper.classList.add("has-image"), this.previewEl.src = t, this.previewWrapper.style.display = "block", s && s instanceof HTMLElement && (s.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
|
|
666
|
-
<span class="upload-icon">${
|
|
676
|
+
<span class="upload-icon">${y}</span>
|
|
667
677
|
<span class="upload-label">Replace</span>
|
|
668
678
|
`)) : (this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "none"), i && (i.innerHTML = `
|
|
669
|
-
<span class="upload-icon">${
|
|
679
|
+
<span class="upload-icon">${y}</span>
|
|
670
680
|
<span class="upload-label">Upload</span>
|
|
671
681
|
`));
|
|
672
682
|
}
|
|
@@ -691,12 +701,12 @@ class q extends m {
|
|
|
691
701
|
const s = this.value && this.value !== "";
|
|
692
702
|
s || i.classList.add("no-image");
|
|
693
703
|
const n = document.createElement("div");
|
|
694
|
-
n.className = "preview-placeholder", n.innerHTML =
|
|
704
|
+
n.className = "preview-placeholder", n.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";
|
|
695
705
|
const o = document.createElement("button");
|
|
696
|
-
o.className = "delete-button", o.type = "button", o.title = "Delete image", o.innerHTML =
|
|
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);
|
|
697
707
|
const a = document.createElement("button");
|
|
698
708
|
a.className = "upload-button", a.innerHTML = `
|
|
699
|
-
<span class="upload-icon">${
|
|
709
|
+
<span class="upload-icon">${y}</span>
|
|
700
710
|
<span class="upload-label">Upload</span>
|
|
701
711
|
`;
|
|
702
712
|
const l = document.createElement("input");
|
|
@@ -716,15 +726,15 @@ class q extends m {
|
|
|
716
726
|
const C = this.props.uploadUrl;
|
|
717
727
|
if (!C)
|
|
718
728
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
719
|
-
const
|
|
720
|
-
method:
|
|
729
|
+
const b = this.props.requestMethod || "POST", L = { ...this.props.requestHeaders || {} }, E = await (await fetch(C, {
|
|
730
|
+
method: b,
|
|
721
731
|
body: g,
|
|
722
|
-
headers:
|
|
732
|
+
headers: L
|
|
723
733
|
})).json();
|
|
724
734
|
let w;
|
|
725
735
|
if (this.props.parseResponse)
|
|
726
|
-
w = this.props.parseResponse(
|
|
727
|
-
else if (w = (u =
|
|
736
|
+
w = this.props.parseResponse(E);
|
|
737
|
+
else if (w = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !w)
|
|
728
738
|
throw new Error(
|
|
729
739
|
"No URL found in response. Provide a parseResponse if needed."
|
|
730
740
|
);
|
|
@@ -737,15 +747,15 @@ class q extends m {
|
|
|
737
747
|
}, t;
|
|
738
748
|
}
|
|
739
749
|
}
|
|
740
|
-
class
|
|
750
|
+
class at extends m {
|
|
741
751
|
constructor(t = {}) {
|
|
742
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
752
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
|
|
743
753
|
title: "Height",
|
|
744
754
|
default: this.value,
|
|
745
755
|
suffix: "px",
|
|
746
756
|
minValue: t.minHeight ?? 1,
|
|
747
757
|
maxValue: t.maxHeight,
|
|
748
|
-
icon:
|
|
758
|
+
icon: z
|
|
749
759
|
}), this.numberSetting.setOnChange((e) => {
|
|
750
760
|
var i;
|
|
751
761
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -755,18 +765,18 @@ class ot extends m {
|
|
|
755
765
|
return this.numberSetting.draw();
|
|
756
766
|
}
|
|
757
767
|
}
|
|
758
|
-
const
|
|
768
|
+
const z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
759
769
|
<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"/>
|
|
760
770
|
</svg>`;
|
|
761
|
-
class
|
|
771
|
+
class lt extends m {
|
|
762
772
|
constructor(t = {}) {
|
|
763
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
773
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
|
|
764
774
|
title: "Width",
|
|
765
775
|
default: this.value,
|
|
766
776
|
suffix: "px",
|
|
767
777
|
minValue: t.minWidth ?? 0,
|
|
768
778
|
maxValue: t.maxWidth,
|
|
769
|
-
icon:
|
|
779
|
+
icon: U
|
|
770
780
|
}), this.numberSetting.setOnChange((e) => {
|
|
771
781
|
var i;
|
|
772
782
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -776,14 +786,14 @@ class at extends m {
|
|
|
776
786
|
return this.numberSetting.draw();
|
|
777
787
|
}
|
|
778
788
|
}
|
|
779
|
-
const
|
|
789
|
+
const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
780
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"/>
|
|
781
|
-
</svg>`,
|
|
791
|
+
</svg>`, Z = `
|
|
782
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">
|
|
783
793
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
784
794
|
</svg>
|
|
785
795
|
`;
|
|
786
|
-
class
|
|
796
|
+
class rt extends m {
|
|
787
797
|
constructor(t = {}) {
|
|
788
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(
|
|
789
799
|
(e) => JSON.stringify(e.value) === JSON.stringify(t.default)
|
|
@@ -822,7 +832,7 @@ class lt extends m {
|
|
|
822
832
|
a.onclick = (l) => this.selectApiOption(l, o, e), i.appendChild(a);
|
|
823
833
|
}), t.appendChild(i);
|
|
824
834
|
const s = document.createElement("div");
|
|
825
|
-
return s.classList.add("svg-container"), s.innerHTML =
|
|
835
|
+
return s.classList.add("svg-container"), s.innerHTML = Z, t.appendChild(s), s.onclick = () => {
|
|
826
836
|
var n, o;
|
|
827
837
|
this.isLoading || (this.isOpen = !this.isOpen, (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
|
|
828
838
|
}, this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
|
|
@@ -901,7 +911,7 @@ class lt extends m {
|
|
|
901
911
|
this.buttonEl.textContent = n;
|
|
902
912
|
}
|
|
903
913
|
}
|
|
904
|
-
class
|
|
914
|
+
class ht extends m {
|
|
905
915
|
constructor(t) {
|
|
906
916
|
super(t), this.inputType = "text", this.value = t.default ?? !1;
|
|
907
917
|
}
|
|
@@ -928,10 +938,10 @@ class rt extends m {
|
|
|
928
938
|
return n.className = "toggle-slider", i.appendChild(s), i.appendChild(n), t.appendChild(i), t;
|
|
929
939
|
}
|
|
930
940
|
}
|
|
931
|
-
const
|
|
941
|
+
const D = `<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
932
942
|
<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"/>
|
|
933
943
|
</svg>`;
|
|
934
|
-
class
|
|
944
|
+
class ct extends m {
|
|
935
945
|
constructor(t = {}) {
|
|
936
946
|
super(t), this.inputType = "number", this.inputValues = {};
|
|
937
947
|
}
|
|
@@ -968,7 +978,7 @@ class ht extends m {
|
|
|
968
978
|
const s = document.createElement("div");
|
|
969
979
|
s.classList.add("gap-label-container");
|
|
970
980
|
const n = document.createElement("div");
|
|
971
|
-
n.classList.add("gap-setting-icon"), n.innerHTML = this.props.icon ||
|
|
981
|
+
n.classList.add("gap-setting-icon"), n.innerHTML = this.props.icon || D, s.appendChild(n);
|
|
972
982
|
const o = document.createElement("label");
|
|
973
983
|
o.classList.add("gap-input-label"), o.textContent = t, s.appendChild(o), i.appendChild(s);
|
|
974
984
|
const a = (u) => {
|
|
@@ -994,39 +1004,39 @@ class ht extends m {
|
|
|
994
1004
|
return r.className = "suffix-label", r.textContent = this.props.suffix, l.appendChild(r), i.appendChild(l), i;
|
|
995
1005
|
}
|
|
996
1006
|
}
|
|
997
|
-
const
|
|
1007
|
+
const J = `
|
|
998
1008
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
999
1009
|
<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"/>
|
|
1000
1010
|
</svg>
|
|
1001
|
-
`,
|
|
1011
|
+
`, P = `
|
|
1002
1012
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1003
1013
|
<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"/>
|
|
1004
1014
|
</svg>
|
|
1005
1015
|
`;
|
|
1006
|
-
class
|
|
1016
|
+
class dt extends f {
|
|
1007
1017
|
constructor(t) {
|
|
1008
1018
|
super({
|
|
1009
1019
|
title: "Border",
|
|
1010
1020
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
1011
1021
|
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1012
1022
|
settings: {
|
|
1013
|
-
size: new
|
|
1023
|
+
size: new v({
|
|
1014
1024
|
title: "Size",
|
|
1015
|
-
icon:
|
|
1025
|
+
icon: P,
|
|
1016
1026
|
default: (t == null ? void 0 : t.size) ?? 0,
|
|
1017
1027
|
suffix: "px"
|
|
1018
1028
|
}),
|
|
1019
|
-
color: new
|
|
1029
|
+
color: new S({
|
|
1020
1030
|
default: (t == null ? void 0 : t.color) ?? "0, 0, 30"
|
|
1021
1031
|
}),
|
|
1022
|
-
opacity: new
|
|
1032
|
+
opacity: new M({
|
|
1023
1033
|
default: (t == null ? void 0 : t.opacity) ?? 100,
|
|
1024
1034
|
minValue: 0,
|
|
1025
1035
|
maxValue: 100
|
|
1026
1036
|
}),
|
|
1027
|
-
radius: new
|
|
1037
|
+
radius: new v({
|
|
1028
1038
|
title: "Radius",
|
|
1029
|
-
icon:
|
|
1039
|
+
icon: J,
|
|
1030
1040
|
default: (t == null ? void 0 : t.radius) ?? 12,
|
|
1031
1041
|
suffix: "px"
|
|
1032
1042
|
})
|
|
@@ -1046,35 +1056,35 @@ class ct extends v {
|
|
|
1046
1056
|
`;
|
|
1047
1057
|
}
|
|
1048
1058
|
}
|
|
1049
|
-
const
|
|
1059
|
+
const X = `
|
|
1050
1060
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
1051
1061
|
<path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1052
1062
|
</svg>
|
|
1053
|
-
`,
|
|
1063
|
+
`, Q = `
|
|
1054
1064
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1055
1065
|
<path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1056
1066
|
</svg>
|
|
1057
|
-
`,
|
|
1067
|
+
`, Y = `
|
|
1058
1068
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1059
1069
|
<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"/>
|
|
1060
1070
|
</svg>
|
|
1061
1071
|
`;
|
|
1062
|
-
class
|
|
1072
|
+
class pt extends f {
|
|
1063
1073
|
constructor(t = {}) {
|
|
1064
1074
|
super({
|
|
1065
1075
|
title: t.title || "Typography",
|
|
1066
1076
|
collapsed: t.collapsed,
|
|
1067
1077
|
hideCondition: t.hideCondition,
|
|
1068
1078
|
settings: {
|
|
1069
|
-
color: new
|
|
1079
|
+
color: new S({
|
|
1070
1080
|
default: t.colorDefault ?? "0, 0, 30"
|
|
1071
1081
|
}),
|
|
1072
|
-
opacity: new
|
|
1082
|
+
opacity: new M({
|
|
1073
1083
|
default: t.colorOpacityDefault ?? 100
|
|
1074
1084
|
}),
|
|
1075
|
-
fontFamily: new
|
|
1085
|
+
fontFamily: new V({
|
|
1076
1086
|
title: "Font",
|
|
1077
|
-
icon:
|
|
1087
|
+
icon: X,
|
|
1078
1088
|
default: t.fontFamilyDefault ?? "Satoshi",
|
|
1079
1089
|
options: t.fontFamilyOptions ?? [
|
|
1080
1090
|
{ name: "Satoshi", value: "Satoshi" },
|
|
@@ -1084,9 +1094,9 @@ class dt extends v {
|
|
|
1084
1094
|
getOptions: t.fontFamilyGetOptions,
|
|
1085
1095
|
getOptionsAsync: t.fontFamilyGetOptionsAsync
|
|
1086
1096
|
}),
|
|
1087
|
-
fontWeight: new
|
|
1097
|
+
fontWeight: new V({
|
|
1088
1098
|
title: "Weight",
|
|
1089
|
-
icon:
|
|
1099
|
+
icon: Q,
|
|
1090
1100
|
default: t.fontWeightDefault ?? "400",
|
|
1091
1101
|
options: t.fontWeightOptions ?? [
|
|
1092
1102
|
{ name: "Regular", value: "400" },
|
|
@@ -1096,9 +1106,9 @@ class dt extends v {
|
|
|
1096
1106
|
getOptions: t.fontWeightGetOptions,
|
|
1097
1107
|
getOptionsAsync: t.fontWeightGetOptionsAsync
|
|
1098
1108
|
}),
|
|
1099
|
-
fontSize: new
|
|
1109
|
+
fontSize: new v({
|
|
1100
1110
|
title: "Size",
|
|
1101
|
-
icon:
|
|
1111
|
+
icon: Y,
|
|
1102
1112
|
default: t.fontSizeDefault ?? 12,
|
|
1103
1113
|
suffix: "px"
|
|
1104
1114
|
}),
|
|
@@ -1121,7 +1131,7 @@ class dt extends v {
|
|
|
1121
1131
|
`;
|
|
1122
1132
|
}
|
|
1123
1133
|
}
|
|
1124
|
-
class
|
|
1134
|
+
class k extends m {
|
|
1125
1135
|
constructor(t) {
|
|
1126
1136
|
super({
|
|
1127
1137
|
...t,
|
|
@@ -1167,34 +1177,34 @@ class E extends m {
|
|
|
1167
1177
|
}), i;
|
|
1168
1178
|
}
|
|
1169
1179
|
}
|
|
1170
|
-
class
|
|
1180
|
+
class ut extends f {
|
|
1171
1181
|
constructor(t) {
|
|
1172
1182
|
super({
|
|
1173
1183
|
title: "Margins",
|
|
1174
1184
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
1175
1185
|
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1176
1186
|
settings: {
|
|
1177
|
-
marginTop: new
|
|
1187
|
+
marginTop: new k({
|
|
1178
1188
|
title: "Top",
|
|
1179
|
-
icon:
|
|
1189
|
+
icon: K,
|
|
1180
1190
|
suffix: "px",
|
|
1181
1191
|
default: (t == null ? void 0 : t.marginTop) ?? "auto"
|
|
1182
1192
|
}),
|
|
1183
|
-
marginRight: new
|
|
1193
|
+
marginRight: new k({
|
|
1184
1194
|
title: "Right",
|
|
1185
|
-
icon:
|
|
1195
|
+
icon: tt,
|
|
1186
1196
|
suffix: "px",
|
|
1187
1197
|
default: (t == null ? void 0 : t.marginRight) ?? 0
|
|
1188
1198
|
}),
|
|
1189
|
-
marginBottom: new
|
|
1199
|
+
marginBottom: new k({
|
|
1190
1200
|
title: "Bottom",
|
|
1191
|
-
icon:
|
|
1201
|
+
icon: et,
|
|
1192
1202
|
suffix: "px",
|
|
1193
1203
|
default: (t == null ? void 0 : t.marginBottom) ?? 0
|
|
1194
1204
|
}),
|
|
1195
|
-
marginLeft: new
|
|
1205
|
+
marginLeft: new k({
|
|
1196
1206
|
title: "Left",
|
|
1197
|
-
icon:
|
|
1207
|
+
icon: it,
|
|
1198
1208
|
suffix: "px",
|
|
1199
1209
|
default: (t == null ? void 0 : t.marginLeft) ?? 0
|
|
1200
1210
|
})
|
|
@@ -1211,27 +1221,27 @@ class pt extends v {
|
|
|
1211
1221
|
`;
|
|
1212
1222
|
}
|
|
1213
1223
|
}
|
|
1214
|
-
const
|
|
1224
|
+
const K = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1215
1225
|
<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"/>
|
|
1216
|
-
</svg>`, K = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1217
|
-
<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.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1218
1226
|
</svg>`, tt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1219
|
-
<path d="
|
|
1227
|
+
<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.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1220
1228
|
</svg>`, et = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1229
|
+
<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"/>
|
|
1230
|
+
</svg>`, it = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1221
1231
|
<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"/>
|
|
1222
1232
|
</svg>`;
|
|
1223
|
-
class
|
|
1233
|
+
class st extends f {
|
|
1224
1234
|
constructor(t, e, i) {
|
|
1225
1235
|
super({
|
|
1226
1236
|
title: `Tab ${t + 1}`,
|
|
1227
1237
|
hideCondition: i == null ? void 0 : i.hideCondition,
|
|
1228
1238
|
collapsed: i == null ? void 0 : i.collapsed,
|
|
1229
1239
|
settings: {
|
|
1230
|
-
name: new
|
|
1240
|
+
name: new H({
|
|
1231
1241
|
title: "Tab Name",
|
|
1232
1242
|
default: `Tab ${t + 1}`
|
|
1233
1243
|
}),
|
|
1234
|
-
content: new
|
|
1244
|
+
content: new H({
|
|
1235
1245
|
title: "Content",
|
|
1236
1246
|
default: ""
|
|
1237
1247
|
})
|
|
@@ -1264,7 +1274,7 @@ class it extends v {
|
|
|
1264
1274
|
return t;
|
|
1265
1275
|
}
|
|
1266
1276
|
}
|
|
1267
|
-
class
|
|
1277
|
+
class gt extends f {
|
|
1268
1278
|
// Store the rendered element
|
|
1269
1279
|
constructor(t) {
|
|
1270
1280
|
super({
|
|
@@ -1276,7 +1286,7 @@ class ut extends v {
|
|
|
1276
1286
|
}
|
|
1277
1287
|
/** Adds a new tab. */
|
|
1278
1288
|
addTab(t) {
|
|
1279
|
-
const e = this.tabs.length, i = new
|
|
1289
|
+
const e = this.tabs.length, i = new st(
|
|
1280
1290
|
e,
|
|
1281
1291
|
() => this.removeTab(i),
|
|
1282
1292
|
t
|
|
@@ -1333,7 +1343,7 @@ class ut extends v {
|
|
|
1333
1343
|
}));
|
|
1334
1344
|
}
|
|
1335
1345
|
}
|
|
1336
|
-
class
|
|
1346
|
+
class mt extends f {
|
|
1337
1347
|
/**
|
|
1338
1348
|
* Constructs a new BackgroundSettingSet.
|
|
1339
1349
|
*
|
|
@@ -1364,17 +1374,17 @@ class gt extends v {
|
|
|
1364
1374
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
1365
1375
|
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1366
1376
|
settings: {
|
|
1367
|
-
backgroundImage: new
|
|
1377
|
+
backgroundImage: new F({
|
|
1368
1378
|
...t == null ? void 0 : t.uploadProps,
|
|
1369
1379
|
default: (t == null ? void 0 : t.backgroundImage) ?? ""
|
|
1370
1380
|
}),
|
|
1371
|
-
opacity: new
|
|
1381
|
+
opacity: new M({
|
|
1372
1382
|
default: (t == null ? void 0 : t.opacity) ?? 100
|
|
1373
1383
|
}),
|
|
1374
|
-
backgroundColor: new
|
|
1384
|
+
backgroundColor: new S({
|
|
1375
1385
|
default: (t == null ? void 0 : t.backgroundColor) ?? "0, 0, 30"
|
|
1376
1386
|
}),
|
|
1377
|
-
opacityBG: new
|
|
1387
|
+
opacityBG: new M({
|
|
1378
1388
|
default: (t == null ? void 0 : t.opacityBG) ?? 100
|
|
1379
1389
|
})
|
|
1380
1390
|
}
|
|
@@ -1409,25 +1419,25 @@ class gt extends v {
|
|
|
1409
1419
|
}
|
|
1410
1420
|
export {
|
|
1411
1421
|
_ as AlignSetting,
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1422
|
+
mt as BackgroundSettingSet,
|
|
1423
|
+
dt as BorderSettingSet,
|
|
1424
|
+
nt as ButtonSetting,
|
|
1425
|
+
S as ColorSetting,
|
|
1426
|
+
ot as DimensionSetting,
|
|
1427
|
+
ct as GapSetting,
|
|
1428
|
+
pt as HeaderTypographySettingSet,
|
|
1429
|
+
at as HeightSetting,
|
|
1430
|
+
ut as MarginSettingGroup,
|
|
1431
|
+
v as NumberSetting,
|
|
1432
|
+
M as OpacitySetting,
|
|
1433
|
+
rt as SelectApiSettings,
|
|
1434
|
+
V as SelectSetting,
|
|
1425
1435
|
m as Setting,
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1436
|
+
f as SettingGroup,
|
|
1437
|
+
H as StringSetting,
|
|
1438
|
+
gt as TabsContainerGroup,
|
|
1439
|
+
ht as Toggle,
|
|
1440
|
+
F as UploadSetting,
|
|
1441
|
+
lt as WidthSetting,
|
|
1442
|
+
B as iterateSettings
|
|
1433
1443
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -394,8 +394,14 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
394
394
|
private isMain;
|
|
395
395
|
private elementRef;
|
|
396
396
|
private hideCondition?;
|
|
397
|
+
private static hiddenElements;
|
|
398
|
+
private isHidden;
|
|
397
399
|
constructor(groupProps: SettingGroupProps<T>);
|
|
400
|
+
static hide(): void;
|
|
401
|
+
static show(): void;
|
|
398
402
|
setOnChange(onChange: (value: T) => void): SettingGroup<T>;
|
|
403
|
+
hide(): void;
|
|
404
|
+
show(): void;
|
|
399
405
|
getValues<K extends keyof T>(childKey?: K): any;
|
|
400
406
|
draw(): HTMLElement;
|
|
401
407
|
collapse(): void;
|
package/package.json
CHANGED