builder-settings-types 0.0.82 → 0.0.84
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 +30 -30
- package/dist/builder-settings-types.es.js +99 -42
- package/dist/index.css +1 -1
- package/dist/index.d.ts +34 -3
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let V=(h=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(h|=0));for(;h--;)t+=W[e[h]&63];return t};function I(h,t){for(const e in h)if(h.hasOwnProperty(e)){const i=h[e];t(e,i)}}class C{constructor(t){this.elementRef=null,this.id=t.id||V(),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,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,I(this.settings,(e,i)=>{i.setOnChange(t)}),this}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof C?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof C?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,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 l=document.createElement("span");l.className="group-icon",l.innerHTML=this.icon,i.appendChild(l)}const n=document.createElement("h3");n.textContent=this.title,i.appendChild(n);const s=document.createElement("div");if(s.className="actions-section",this.description&&this.isCollapsed){const l=document.createElement("span");l.className="info-marker",l.innerHTML=`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let V=(h=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(h|=0));for(;h--;)t+=W[e[h]&63];return t};function I(h,t){for(const e in h)if(h.hasOwnProperty(e)){const i=h[e];t(e,i)}}class C{constructor(t){this.elementRef=null,this.id=t.id||V(),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)}setOnChange(t){return this.onChange=t,I(this.settings,(e,i)=>{i.setOnChange(n=>{t(n),this.updateVisibility()})}),this}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof C?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof C?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");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");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 l=document.createElement("span");l.className="group-icon",l.innerHTML=this.icon,i.appendChild(l)}const n=document.createElement("h3");n.textContent=this.title,i.appendChild(n);const s=document.createElement("div");if(s.className="actions-section",this.description&&this.isCollapsed){const l=document.createElement("span");l.className="info-marker",l.innerHTML=`
|
|
2
2
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
3
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
4
4
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8
8
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
9
|
</svg>
|
|
10
|
-
`,this.isCollapsed&&o.classList.add("rotated"),s.appendChild(o);const a=document.createElement("div");if(a.className="setting-group-content",this.isCollapsed&&(a.classList.add("collapsed"),e.classList.add("collapsed-view"),o.classList.add("rotated"),t.classList.add("collapsed")),this.isMain&&a.classList.add("main-content"),this.description&&!this.isCollapsed){const l=document.createElement("div");l.className="setting-group-description",l.textContent=this.description,a.appendChild(l)}const r=()=>{this.isCollapsed=!this.isCollapsed,a.classList.toggle("collapsed"),e.classList.toggle("collapsed-view"),o.classList.toggle("rotated"),t.classList.toggle("collapsed",this.isCollapsed),e.setAttribute("aria-expanded",(!this.isCollapsed).toString());const l=a.querySelector(".setting-group-description"),
|
|
10
|
+
`,this.isCollapsed&&o.classList.add("rotated"),s.appendChild(o);const a=document.createElement("div");if(a.className="setting-group-content",this.isCollapsed&&(a.classList.add("collapsed"),e.classList.add("collapsed-view"),o.classList.add("rotated"),t.classList.add("collapsed")),this.isMain&&a.classList.add("main-content"),this.description&&!this.isCollapsed){const l=document.createElement("div");l.className="setting-group-description",l.textContent=this.description,a.appendChild(l)}const r=()=>{this.isCollapsed=!this.isCollapsed,a.classList.toggle("collapsed"),e.classList.toggle("collapsed-view"),o.classList.toggle("rotated"),t.classList.toggle("collapsed",this.isCollapsed),e.setAttribute("aria-expanded",(!this.isCollapsed).toString());const l=a.querySelector(".setting-group-description"),g=s.querySelector(".info-marker");if(this.description)if(this.isCollapsed){if(l&&l.remove(),!g){const d=document.createElement("span");d.className="info-marker",d.innerHTML=`
|
|
11
11
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
12
12
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
13
13
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`,d.title=this.description,s.insertBefore(d,o)}}else{if(!l){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,a.insertBefore(d,a.firstChild)}
|
|
15
|
+
`,d.title=this.description,s.insertBefore(d,o)}}else{if(!l){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,a.insertBefore(d,a.firstChild)}g&&g.remove()}};if(e.onclick=r,e.onkeydown=l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),r())},Object.keys(this.settings).length>0){for(const l in this.settings)if(this.settings.hasOwnProperty(l)){const g=this.settings[l];a.appendChild(g.draw())}}else{const l=document.createElement("div");l.className="setting-group-empty",l.textContent="No settings in this group",a.appendChild(l)}return e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(a),this.elementRef=t,t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isCollapsed?this.expand():this.collapse()}}function A(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 u{constructor(t={}){this.props=t,this.id=t.id||V(),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 s=document.createElement("div");if(s.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);s.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);s.appendChild(o)}e.appendChild(s)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");return this.inputEl=n,n.value=String(t.value||A(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const o=s.target;let a=o.value;t.inputType==="number"?a=Number(o.value):(t.inputType==="color"||t.inputType==="date")&&(a=o.value),this.value=a,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class M extends u{constructor(t={}){super(t),this.inputType="text"}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 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>";class y extends M{constructor(t){super({...t,icon:t.icon||O,title:t.title||"Color"}),this.inputType="color"}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${n}`}rgbToHex(t){const[e,i,n]=t.split(",").map(o=>parseInt(o.trim()));if(isNaN(e)||isNaN(i)||isNaN(n))return"#000000";const s=o=>{const a=o.toString(16);return a.length===1?"0"+a:a};return`#${s(e)}${s(i)}${s(n)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||O),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const o=d=>{const p=d.value.split(",").map(N=>parseInt(N.trim()));if(p.length!==3||p.some(isNaN))return d.style.border="1px solid red",!1;const[m,f,b]=p,L=m>=0&&m<=255&&f>=0&&f<=255&&b>=0&&b<=255;return d.style.border=L?"":"1px solid red",L},a=document.createElement("div");a.className="color-preview",a.style.backgroundColor=this.value?`rgb(${this.value})`:"";const r=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),c=r.querySelector("input"),l=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),g=l.querySelector("input");return c.oninput=d=>{var m;let p=d.target.value.trim();o(c)&&(this.value=p,(m=this.onChange)==null||m.call(this,p),g.value=this.rgbToHex(p),a.style.backgroundColor=`rgb(${p})`)},g.oninput=d=>{var f;const p=d.target.value,m=this.hexToRgb(p);this.value=m,(f=this.onChange)==null||f.call(this,m),c.value=m,a.style.backgroundColor=`rgb(${m})`},s.appendChild(a),s.appendChild(l),s.appendChild(r),t.appendChild(e),t.appendChild(s),this.value&&(c.value=this.value,g.value=this.rgbToHex(this.value),a.style.backgroundColor=`rgb(${this.value})`),t}}class v extends u{constructor(t={}){super(t),this.inputType="number"}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const o=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(s.value);r<o&&(r=o),r>a&&(r=a),s.value=String(r)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class x 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
|
+
`,_=`
|
|
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 S extends
|
|
27
|
+
`;class S extends u{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const s=document.createElement("div");if(s.className="icon-container",this.props.icon){const o=this.createIcon(this.props.icon);s.appendChild(o)}if(this.props.title){const o=this.createLabel(this.props.title);s.appendChild(o)}t.appendChild(s)}else{const s=document.createElement("div");t.appendChild(s)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((s,o)=>{const a=this.createOption(s,o);a.onclick=r=>this.selectOption(r,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=_,t.appendChild(n),this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=s=>{var o,a;this.isOpen&&!t.contains(s.target)&&(this.isOpen=!1,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var s,o,a;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=n.name,(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((c,l)=>{l===e?c.classList.add("selected"):c.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=n=>{this.buttonEl&&this.selectOption(n,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class B extends u{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,15 +45,15 @@
|
|
|
45
45
|
<path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
|
|
46
46
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
47
47
|
</svg>
|
|
48
|
-
`}].forEach(s=>{const o=document.createElement("button");o.className="align-option-button",o.innerHTML=s.icon,this.value===s.name&&o.classList.add("selected"),o.addEventListener("click",()=>{var a;i.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),o.classList.add("selected"),this.value=s.name,(a=this.onChange)==null||a.call(this,this.value)}),i.appendChild(o)}),t.appendChild(i),t}}class
|
|
48
|
+
`}].forEach(s=>{const o=document.createElement("button");o.className="align-option-button",o.innerHTML=s.icon,this.value===s.name&&o.classList.add("selected"),o.addEventListener("click",()=>{var a;i.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),o.classList.add("selected"),this.value=s.name,(a=this.onChange)==null||a.call(this,this.value)}),i.appendChild(o)}),t.appendChild(i),t}}class j extends u{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 u{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:G}),this.widthSetting.setOnChange(this.handleWidthChange.bind(this)),this.heightSetting.setOnChange(this.handleHeightChange.bind(this))}handleWidthChange(t){if(!this.isUpdating){(isNaN(t)||t<this.minWidth)&&(t=this.minWidth),this.maxWidth&&t>this.maxWidth&&(t=this.maxWidth),this.isUpdating=!0;try{let e=t,i=this.value.height;this.locked&&this.aspectRatio>0&&(i=Math.round(e/this.aspectRatio),i<this.minHeight?(i=this.minHeight,e=Math.round(i*this.aspectRatio),e<this.minWidth?(e=this.minWidth,i>0&&(this.aspectRatio=e/i)):this.maxWidth&&e>this.maxWidth&&(e=this.maxWidth,i>0&&(this.aspectRatio=e/i))):this.maxHeight&&i>this.maxHeight&&(i=this.maxHeight,e=Math.round(i*this.aspectRatio),e<this.minWidth?(e=this.minWidth,i>0&&(this.aspectRatio=e/i)):this.maxWidth&&e>this.maxWidth&&(e=this.maxWidth,i>0&&(this.aspectRatio=e/i)))),this.value={width:e,height:i},this.widthSetting.setValue(e),this.locked&&this.heightSetting.setValue(i),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}handleHeightChange(t){if(!this.isUpdating){(isNaN(t)||t<this.minHeight)&&(t=this.minHeight),this.maxHeight&&t>this.maxHeight&&(t=this.maxHeight),this.isUpdating=!0;try{let e=t,i=this.value.width;this.locked&&this.aspectRatio>0&&(i=Math.round(e*this.aspectRatio),i<this.minWidth?(i=this.minWidth,e=Math.round(i/this.aspectRatio),e<this.minHeight?(e=this.minHeight,e>0&&(this.aspectRatio=i/e)):this.maxHeight&&e>this.maxHeight&&(e=this.maxHeight,e>0&&(this.aspectRatio=i/e))):this.maxWidth&&i>this.maxWidth&&(i=this.maxWidth,e=Math.round(i/this.aspectRatio),e<this.minHeight?(e=this.minHeight,e>0&&(this.aspectRatio=i/e)):this.maxHeight&&e>this.maxHeight&&(e=this.maxHeight,e>0&&(this.aspectRatio=i/e)))),this.value={width:i,height:e},this.locked&&this.widthSetting.setValue(i),this.heightSetting.setValue(e),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}toggleLock(t){if(this.locked=!this.locked,this.locked&&this.value){const{width:i,height:n}=this.value;n>0&&(this.aspectRatio=i/n)}t.innerHTML=this.getLockSVG(this.locked),t.setAttribute("aria-pressed",String(this.locked)),t.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const e=t.closest(".dimension-setting-container");e&&(this.locked?e.classList.add("aspect-locked"):e.classList.remove("aspect-locked"))}getLockSVG(t){return t?`
|
|
49
49
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
50
50
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
51
51
|
</svg>`:`
|
|
52
52
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
53
53
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
54
|
-
</svg>`}setValue(t){if(t&&typeof t.width=="number"&&typeof t.height=="number"){let e=Math.max(this.minWidth,t.width);this.maxWidth&&(e=Math.min(this.maxWidth,e));let i=Math.max(this.minHeight,t.height);this.maxHeight&&(i=Math.min(this.maxHeight,i)),this.value={width:e,height:i},this.locked&&this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.isUpdating=!0;try{this.widthSetting.setValue(this.value.width),this.heightSetting.setValue(this.value.height)}finally{this.isUpdating=!1}}}draw(){const t=document.createElement("div");t.className="dimension-setting-container",this.locked&&t.classList.add("aspect-locked");const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("button");return s.className="dimension-lock-icon",s.setAttribute("type","button"),s.setAttribute("aria-pressed",String(this.locked)),s.setAttribute("aria-label",this.locked?"Unlock aspect ratio":"Lock aspect ratio"),s.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio",s.innerHTML=this.getLockSVG(this.locked),s.onclick=o=>{o.preventDefault(),this.toggleLock(s)},n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}isLocked(){return this.locked}setLocked(t){if(this.locked!==t){if(this.locked=t,this.locked&&this.value){const{width:i,height:n}=this.value;n>0&&(this.aspectRatio=i/n)}const e=document.querySelector(".dimension-setting-container .dimension-lock-icon");if(e instanceof HTMLElement){e.innerHTML=this.getLockSVG(this.locked),e.setAttribute("aria-pressed",String(this.locked)),e.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const i=e.closest(".dimension-setting-container");i&&(this.locked?i.classList.add("aspect-locked"):i.classList.remove("aspect-locked"))}}}}const
|
|
54
|
+
</svg>`}setValue(t){if(t&&typeof t.width=="number"&&typeof t.height=="number"){let e=Math.max(this.minWidth,t.width);this.maxWidth&&(e=Math.min(this.maxWidth,e));let i=Math.max(this.minHeight,t.height);this.maxHeight&&(i=Math.min(this.maxHeight,i)),this.value={width:e,height:i},this.locked&&this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.isUpdating=!0;try{this.widthSetting.setValue(this.value.width),this.heightSetting.setValue(this.value.height)}finally{this.isUpdating=!1}}}draw(){const t=document.createElement("div");t.className="dimension-setting-container",this.locked&&t.classList.add("aspect-locked");const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("button");return s.className="dimension-lock-icon",s.setAttribute("type","button"),s.setAttribute("aria-pressed",String(this.locked)),s.setAttribute("aria-label",this.locked?"Unlock aspect ratio":"Lock aspect ratio"),s.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio",s.innerHTML=this.getLockSVG(this.locked),s.onclick=o=>{o.preventDefault(),this.toggleLock(s)},n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}isLocked(){return this.locked}setLocked(t){if(this.locked!==t){if(this.locked=t,this.locked&&this.value){const{width:i,height:n}=this.value;n>0&&(this.aspectRatio=i/n)}const e=document.querySelector(".dimension-setting-container .dimension-lock-icon");if(e instanceof HTMLElement){e.innerHTML=this.getLockSVG(this.locked),e.setAttribute("aria-pressed",String(this.locked)),e.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const i=e.closest(".dimension-setting-container");i&&(this.locked?i.classList.add("aspect-locked"):i.classList.remove("aspect-locked"))}}}}const F=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
55
55
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
56
|
-
</svg>`,
|
|
56
|
+
</svg>`,G=`<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
58
|
</svg>`,H=`
|
|
59
59
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
@@ -64,73 +64,73 @@
|
|
|
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
|
+
`,U=`
|
|
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 R extends
|
|
71
|
+
`;class R extends u{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl)}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl||!this.emptyStateEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),n=e==null?void 0:e.querySelector(".preview-placeholder");t&&t!==""?(this.previewWrapper.classList.add("has-image"),this.previewEl.src=t,this.previewWrapper.style.display="block",n&&n instanceof HTMLElement&&(n.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
|
|
72
72
|
<span class="upload-icon">${H}</span>
|
|
73
73
|
<span class="upload-label">Replace</span>
|
|
74
74
|
`)):(this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewWrapper.style.display="none",n&&n instanceof HTMLElement&&(n.style.display="none"),i&&(i.innerHTML=`
|
|
75
75
|
<span class="upload-icon">${H}</span>
|
|
76
76
|
<span class="upload-label">Upload</span>
|
|
77
|
-
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const c=document.createElement("div");if(c.className="icon-title-container",this.props.icon){const l=this.createIcon(this.props.icon);c.appendChild(l)}if(this.props.title){const l=this.createLabel(this.props.title);c.appendChild(l)}t.appendChild(c)}const i=document.createElement("div");i.className="preview-button-container";const n=this.value&&this.value!=="";n||i.classList.add("no-image");const s=document.createElement("div");s.className="preview-placeholder",s.innerHTML=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";const o=document.createElement("button");o.className="delete-button",o.type="button",o.title="Delete image",o.innerHTML=
|
|
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 l=this.createIcon(this.props.icon);c.appendChild(l)}if(this.props.title){const l=this.createLabel(this.props.title);c.appendChild(l)}t.appendChild(c)}const i=document.createElement("div");i.className="preview-button-container";const n=this.value&&this.value!=="";n||i.classList.add("no-image");const s=document.createElement("div");s.className="preview-placeholder",s.innerHTML=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";const o=document.createElement("button");o.className="delete-button",o.type="button",o.title="Delete image",o.innerHTML=U,this.previewWrapper.appendChild(this.emptyStateEl),this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(o);const a=document.createElement("button");a.className="upload-button",a.innerHTML=`
|
|
78
78
|
<span class="upload-icon">${H}</span>
|
|
79
79
|
<span class="upload-label">Upload</span>
|
|
80
|
-
`;const r=document.createElement("input");return r.type="file",r.accept="image/*",r.style.display="none",i.appendChild(s),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(r),n?this.updatePreviewState(this.value):this.updatePreviewState(null),o.onclick=c=>{var l;c.stopPropagation(),this.value="",this.updatePreviewState(null),(l=this.onChange)==null||l.call(this,"")},a.onclick=()=>{r.click()},r.onchange=async()=>{var l,
|
|
80
|
+
`;const r=document.createElement("input");return r.type="file",r.accept="image/*",r.style.display="none",i.appendChild(s),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(r),n?this.updatePreviewState(this.value):this.updatePreviewState(null),o.onclick=c=>{var l;c.stopPropagation(),this.value="",this.updatePreviewState(null),(l=this.onChange)==null||l.call(this,"")},a.onclick=()=>{r.click()},r.onchange=async()=>{var l,g,d;const c=(l=r.files)==null?void 0:l[0];if(c)try{a.classList.add("loading"),a.disabled=!0;const p=new FormData,m=this.props.formFieldName||"file";p.append(m,c,c.name);const f=this.props.uploadUrl;if(!f)throw new Error("No uploadUrl provided to UploadSetting.");const b=this.props.requestMethod||"POST",L={...this.props.requestHeaders||{}},E=await(await fetch(f,{method:b,body:p,headers:L})).json();let w;if(this.props.parseResponse)w=this.props.parseResponse(E);else if(w=(g=E==null?void 0:E.data)==null?void 0:g.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(p){console.error("Error uploading file:",p),this.updatePreviewState(null)}finally{a.classList.remove("loading"),a.disabled=!1}},t}}class z extends u{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 D extends u{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>`,J=`
|
|
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 X extends u{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)}initializeOptions(t){this.hasInitializedOptions||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.hasInitializedOptions=!0)}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const n=document.createElement("input");return n.type="radio",n.classList.add("select-api-radio"),n.name="select-api-radio-group",i.appendChild(n),this.selectedOptionIndex===e&&(n.checked=!0),i}draw(){const t=document.createElement("div");t.classList.add("select-api-container"),this.container=t;const e=document.createElement("div");if(e.classList.add("select-api-button"),this.props.title){e.classList.add("has-label");const s=document.createElement("div");s.className="select-label",s.textContent=this.props.title,e.appendChild(s);const o=document.createElement("span");o.className="select-value",this.isLoading?o.textContent=this.props.loadingText||"Loading options...":o.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:"Select an option",e.appendChild(o)}else 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 s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-api-options"),this._options.forEach((s,o)=>{const a=this.createOption(s,o);a.onclick=r=>this.selectApiOption(r,o,e),i.appendChild(a)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=J,t.appendChild(n),n.onclick=()=>{var s,o;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(o=this.svgContainer)==null||o.classList.toggle("open",this.isOpen))},this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{const o=new Set(this._options.map(r=>JSON.stringify(r.value))),a=s.filter(r=>!o.has(JSON.stringify(r.value)));this._options.push(...a),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),t}selectApiOption(t,e,i){var s,o,a;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,this.updateButtonText(),(o=this.optionsListEl)==null||o.classList.remove("open"),(a=this.svgContainer)==null||a.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-api-radio").forEach((c,l)=>{c.checked=l===e}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-api-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);this.selectedOptionIndex===e&&i.classList.add("selected"),i.onclick=n=>{this.buttonEl&&this.selectApiOption(n,e,this.buttonEl)},i.tabIndex=0,i.addEventListener("keydown",n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this.buttonEl&&this.selectApiOption(n,e,this.buttonEl))}),this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;const e=this.buttonEl.querySelector(".select-value"),i=this.buttonEl.classList.contains("has-label"),n=this.buttonEl.querySelector(".select-label");if(this.isLoading){this.buttonEl.classList.add("loading");const o=this.props.loadingText||"Loading options...";if(e)e.textContent=o;else if(i&&this.props.title&&!n){this.buttonEl.innerHTML="";const a=document.createElement("div");a.className="select-label",a.textContent=this.props.title,this.buttonEl.appendChild(a);const r=document.createElement("span");r.className="select-value",r.textContent=o,this.buttonEl.appendChild(r)}else this.buttonEl.textContent=o;return}this.buttonEl.classList.remove("loading","error");let s;if(t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),s=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?s=this._options[this.selectedOptionIndex].name:s="Select an option",e)e.textContent=s;else if(i&&this.props.title&&!n){this.buttonEl.innerHTML="";const o=document.createElement("div");o.className="select-label",o.textContent=this.props.title,this.buttonEl.appendChild(o);const a=document.createElement("span");a.className="select-value",a.textContent=s,this.buttonEl.appendChild(a)}else this.buttonEl.textContent=s}}class Q extends u{constructor(t){super(t),this.inputType="text",this.value=t.default??!1}draw(){const t=document.createElement("div");t.className="toggle-setting-container",this.props.icon&&t.classList.add("toggle-with-icon");const e=document.createElement("div");if(e.className="toggle-label",this.props.icon){const o=document.createElement("span");o.className="toggle-icon",o.innerHTML=this.props.icon,e.appendChild(o)}if(this.props.title){const o=document.createElement("span");o.textContent=this.props.title,e.appendChild(o)}t.appendChild(e);const i=document.createElement("label");i.className="toggle-switch";const n=document.createElement("input");n.type="checkbox",n.checked=this.value??!1,n.addEventListener("change",()=>{this.value=n.checked,this.onChange&&this.onChange(this.value)});const s=document.createElement("span");return s.className="toggle-slider",i.appendChild(n),i.appendChild(s),t.appendChild(i),t}}const Y=`
|
|
89
89
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
90
90
|
<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"/>
|
|
91
91
|
</svg>
|
|
92
|
-
`,
|
|
92
|
+
`,K=`
|
|
93
93
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
94
94
|
<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"/>
|
|
95
95
|
</svg>
|
|
96
|
-
`;class
|
|
96
|
+
`;class tt extends C{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:K,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new y({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new x({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new v({title:"Radius",icon:Y,default:(t==null?void 0:t.radius)??12,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,n=this.settings.size.value??0;return`
|
|
97
97
|
border-color: ${t};
|
|
98
98
|
border-width: ${n}px;
|
|
99
99
|
border-radius: ${i}px;
|
|
100
100
|
opacity: ${e/100};
|
|
101
|
-
`}}const
|
|
101
|
+
`}}const et=`
|
|
102
102
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
103
103
|
<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"/>
|
|
104
104
|
</svg>
|
|
105
|
-
`,
|
|
105
|
+
`,it=`
|
|
106
106
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
107
107
|
<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"/>
|
|
108
108
|
</svg>
|
|
109
|
-
`,
|
|
109
|
+
`,st=`
|
|
110
110
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
111
111
|
<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"/>
|
|
112
112
|
</svg>
|
|
113
|
-
`;class
|
|
113
|
+
`;class nt extends C{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new y({default:t.colorDefault??"0, 0, 30"}),opacity:new x({default:t.colorOpacityDefault??100}),fontFamily:new S({title:"Font",icon:et,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 S({title:"Weight",icon:it,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:st,default:t.fontSizeDefault??12,suffix:"px"}),align:new B({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",n=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,o=this.settings.align.value??"left";return`
|
|
114
114
|
color: ${t};
|
|
115
115
|
opacity: ${e/100};
|
|
116
116
|
font-family: ${i};
|
|
117
117
|
font-weight: ${n};
|
|
118
118
|
font-size: ${s}px;
|
|
119
119
|
text-align: ${o};
|
|
120
|
-
`}}class k extends
|
|
120
|
+
`}}class k extends u{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 r=this.props.minValue??Number.MIN_SAFE_INTEGER,c=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(a.value);l<r&&(l=r),l>c&&(l=c),a.value=String(l)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const n=i.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,i.appendChild(s);const o=i.querySelector("input");return o&&(o.oninput=a=>{const r=a.target.value.trim();if(r.toLowerCase()==="auto")this.value="auto";else{const c=Number(r);isNaN(c)||(this.value=c)}this.onChange&&this.onChange(this.value)}),i}}class ot extends C{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{marginTop:new k({title:"Top",icon:at,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new k({title:"Right",icon:lt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new k({title:"Bottom",icon:rt,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new k({title:"Left",icon:ht,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,n=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
|
|
121
121
|
margin-top: ${t};
|
|
122
122
|
margin-right: ${e};
|
|
123
123
|
margin-bottom: ${i};
|
|
124
124
|
margin-left: ${n};
|
|
125
|
-
`}}const
|
|
125
|
+
`}}const at=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
126
126
|
<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"/>
|
|
127
|
-
</svg>`,at=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
128
|
-
<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"/>
|
|
129
127
|
</svg>`,lt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
130
|
-
<path d="
|
|
128
|
+
<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>`,rt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
130
|
+
<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"/>
|
|
131
|
+
</svg>`,ht=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
132
132
|
<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"/>
|
|
133
|
-
</svg>`;class
|
|
133
|
+
</svg>`;class ct extends C{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 M({title:"Tab Name",default:`Tab ${t+1}`}),content:new M({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const n=document.createElement("div");n.className="tab-delete-container";const s=document.createElement("button");s.className="tab-delete-button",s.innerHTML=`
|
|
134
134
|
<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">
|
|
135
135
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
136
136
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
<path d="M14 11v6"></path>
|
|
139
139
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
140
140
|
</svg>
|
|
141
|
-
`,s.onclick=()=>{var a;return(a=this.onDeleteCallback)==null?void 0:a.call(this)},n.appendChild(s);const o=i.querySelector("h3");o?o.insertAdjacentElement("afterend",n):i.appendChild(n)}return t}}class
|
|
141
|
+
`,s.onclick=()=>{var a;return(a=this.onDeleteCallback)==null?void 0:a.call(this)},n.appendChild(s);const o=i.querySelector("h3");o?o.insertAdjacentElement("afterend",n):i.appendChild(n)}return t}}class dt extends C{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 ct(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=`
|
|
142
142
|
<span class="add-icon">
|
|
143
143
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
|
|
144
144
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
</svg>
|
|
152
152
|
</span>
|
|
153
153
|
<span class="add-label">Add Tab</span>
|
|
154
|
-
`,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
|
|
154
|
+
`,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 pt extends C{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new R({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new x({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new y({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"}),opacityBG:new x({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[n,s,o,a]=i;e.innerHTML="",e.appendChild(n),e.appendChild(s);const r=document.createElement("div");return r.className="bgset-or-label",r.textContent="OR",e.appendChild(r),e.appendChild(o),e.appendChild(a),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"0, 0, 30",n=this.settings.opacityBG.value??100;return t?`
|
|
155
155
|
background-image: url("${t}");
|
|
156
156
|
background-size: cover;
|
|
157
157
|
background-position: center;
|
|
@@ -159,4 +159,4 @@
|
|
|
159
159
|
`:`
|
|
160
160
|
background-color: ${i};
|
|
161
161
|
opacity: ${n/100};
|
|
162
|
-
`}}exports.AlignSetting=B;exports.BackgroundSettingSet=
|
|
162
|
+
`}}exports.AlignSetting=B;exports.BackgroundSettingSet=pt;exports.BorderSettingSet=tt;exports.ButtonSetting=j;exports.ColorSetting=y;exports.DimensionSetting=q;exports.HeaderTypographySettingSet=nt;exports.HeightSetting=z;exports.MarginSettingGroup=ot;exports.NumberSetting=v;exports.OpacitySetting=x;exports.SelectApiSettings=X;exports.SelectSetting=S;exports.Setting=u;exports.SettingGroup=C;exports.StringSetting=M;exports.TabsContainerGroup=dt;exports.Toggle=Q;exports.UploadSetting=R;exports.WidthSetting=D;exports.iterateSettings=I;
|
|
@@ -14,11 +14,13 @@ function R(h, t) {
|
|
|
14
14
|
}
|
|
15
15
|
class C {
|
|
16
16
|
constructor(t) {
|
|
17
|
-
this.elementRef = null, this.id = t.id || V(), 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, Object.assign(this, t.settings);
|
|
17
|
+
this.elementRef = null, this.id = t.id || V(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.hideCondition = t.hideCondition, Object.assign(this, t.settings);
|
|
18
18
|
}
|
|
19
19
|
setOnChange(t) {
|
|
20
20
|
return this.onChange = t, R(this.settings, (e, i) => {
|
|
21
|
-
i.setOnChange(
|
|
21
|
+
i.setOnChange((n) => {
|
|
22
|
+
t(n), this.updateVisibility();
|
|
23
|
+
});
|
|
22
24
|
}), this;
|
|
23
25
|
}
|
|
24
26
|
getValues(t) {
|
|
@@ -37,7 +39,7 @@ class C {
|
|
|
37
39
|
}
|
|
38
40
|
draw() {
|
|
39
41
|
const t = document.createElement("div");
|
|
40
|
-
t.className = "setting-group", t.id = `setting-group-${this.id}`, this.isMain && t.classList.add("main-group");
|
|
42
|
+
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");
|
|
41
43
|
const e = document.createElement("div");
|
|
42
44
|
e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
|
|
43
45
|
"aria-expanded",
|
|
@@ -133,6 +135,9 @@ class C {
|
|
|
133
135
|
);
|
|
134
136
|
t && e && i && (this.isCollapsed = !1, t.classList.remove("collapsed"), e.classList.remove("rotated"), i.setAttribute("aria-expanded", "true"));
|
|
135
137
|
}
|
|
138
|
+
updateVisibility() {
|
|
139
|
+
this.elementRef && this.hideCondition && (this.elementRef.style.display = this.hideCondition() ? "none" : "");
|
|
140
|
+
}
|
|
136
141
|
toggle() {
|
|
137
142
|
this.isCollapsed ? this.expand() : this.collapse();
|
|
138
143
|
}
|
|
@@ -499,14 +504,14 @@ class st extends m {
|
|
|
499
504
|
suffix: "px",
|
|
500
505
|
minValue: this.minWidth,
|
|
501
506
|
maxValue: this.maxWidth,
|
|
502
|
-
icon:
|
|
507
|
+
icon: _
|
|
503
508
|
}), this.heightSetting = new f({
|
|
504
509
|
title: "Height",
|
|
505
510
|
default: this.value.height,
|
|
506
511
|
suffix: "px",
|
|
507
512
|
minValue: this.minHeight,
|
|
508
513
|
maxValue: this.maxHeight,
|
|
509
|
-
icon:
|
|
514
|
+
icon: j
|
|
510
515
|
}), this.widthSetting.setOnChange(this.handleWidthChange.bind(this)), this.heightSetting.setOnChange(this.handleHeightChange.bind(this));
|
|
511
516
|
}
|
|
512
517
|
handleWidthChange(t) {
|
|
@@ -598,9 +603,9 @@ class st extends m {
|
|
|
598
603
|
}
|
|
599
604
|
}
|
|
600
605
|
}
|
|
601
|
-
const
|
|
606
|
+
const _ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
602
607
|
<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"/>
|
|
603
|
-
</svg>`,
|
|
608
|
+
</svg>`, j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
604
609
|
<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"/>
|
|
605
610
|
</svg>`, M = `
|
|
606
611
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
@@ -616,7 +621,7 @@ const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
616
621
|
<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"/>
|
|
617
622
|
</svg>
|
|
618
623
|
`;
|
|
619
|
-
class
|
|
624
|
+
class F extends m {
|
|
620
625
|
constructor(t = {}) {
|
|
621
626
|
super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
|
|
622
627
|
}
|
|
@@ -708,7 +713,7 @@ class nt extends m {
|
|
|
708
713
|
suffix: "px",
|
|
709
714
|
minValue: t.minHeight ?? 1,
|
|
710
715
|
maxValue: t.maxHeight,
|
|
711
|
-
icon:
|
|
716
|
+
icon: z
|
|
712
717
|
}), this.numberSetting.setOnChange((e) => {
|
|
713
718
|
var i;
|
|
714
719
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -718,7 +723,7 @@ class nt extends m {
|
|
|
718
723
|
return this.numberSetting.draw();
|
|
719
724
|
}
|
|
720
725
|
}
|
|
721
|
-
const
|
|
726
|
+
const z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
722
727
|
<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"/>
|
|
723
728
|
</svg>`;
|
|
724
729
|
class ot extends m {
|
|
@@ -729,7 +734,7 @@ class ot extends m {
|
|
|
729
734
|
suffix: "px",
|
|
730
735
|
minValue: t.minWidth ?? 0,
|
|
731
736
|
maxValue: t.maxWidth,
|
|
732
|
-
icon:
|
|
737
|
+
icon: U
|
|
733
738
|
}), this.numberSetting.setOnChange((e) => {
|
|
734
739
|
var i;
|
|
735
740
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -739,16 +744,19 @@ class ot extends m {
|
|
|
739
744
|
return this.numberSetting.draw();
|
|
740
745
|
}
|
|
741
746
|
}
|
|
742
|
-
const
|
|
747
|
+
const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
743
748
|
<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"/>
|
|
744
|
-
</svg>`,
|
|
749
|
+
</svg>`, G = `
|
|
745
750
|
<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">
|
|
746
751
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
747
752
|
</svg>
|
|
748
753
|
`;
|
|
749
754
|
class at extends m {
|
|
750
755
|
constructor(t = {}) {
|
|
751
|
-
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,
|
|
756
|
+
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);
|
|
757
|
+
}
|
|
758
|
+
initializeOptions(t) {
|
|
759
|
+
this.hasInitializedOptions || (this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.hasInitializedOptions = !0);
|
|
752
760
|
}
|
|
753
761
|
createOption(t, e) {
|
|
754
762
|
const i = document.createElement("li");
|
|
@@ -778,13 +786,18 @@ class at extends m {
|
|
|
778
786
|
a.onclick = (r) => this.selectApiOption(r, o, e), i.appendChild(a);
|
|
779
787
|
}), t.appendChild(i);
|
|
780
788
|
const n = document.createElement("div");
|
|
781
|
-
return n.classList.add("svg-container"), n.innerHTML =
|
|
789
|
+
return n.classList.add("svg-container"), n.innerHTML = G, t.appendChild(n), n.onclick = () => {
|
|
782
790
|
var s, o;
|
|
783
791
|
this.isLoading || (this.isOpen = !this.isOpen, (s = this.optionsListEl) == null || s.classList.toggle("open", this.isOpen), (o = this.svgContainer) == null || o.classList.toggle("open", this.isOpen));
|
|
784
|
-
}, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
792
|
+
}, this.optionsListEl = i, this.svgContainer = n, this.props.getOptionsAsync && !this.hasInitializedOptions ? (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
785
793
|
this._options.push(...s), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
|
|
786
794
|
}).catch((s) => {
|
|
787
795
|
console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
796
|
+
})) : this.props.getOptionsAsync && this._options.length <= 1 && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((s) => {
|
|
797
|
+
const o = new Set(this._options.map((r) => JSON.stringify(r.value))), a = s.filter((r) => !o.has(JSON.stringify(r.value)));
|
|
798
|
+
this._options.push(...a), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
|
|
799
|
+
}).catch((s) => {
|
|
800
|
+
console.error("Failed to fetch async options:", s), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
788
801
|
})), t;
|
|
789
802
|
}
|
|
790
803
|
selectApiOption(t, e, i) {
|
|
@@ -845,24 +858,52 @@ class at extends m {
|
|
|
845
858
|
this.buttonEl.textContent = s;
|
|
846
859
|
}
|
|
847
860
|
}
|
|
848
|
-
|
|
861
|
+
class lt extends m {
|
|
862
|
+
constructor(t) {
|
|
863
|
+
super(t), this.inputType = "text", this.value = t.default ?? !1;
|
|
864
|
+
}
|
|
865
|
+
draw() {
|
|
866
|
+
const t = document.createElement("div");
|
|
867
|
+
t.className = "toggle-setting-container", this.props.icon && t.classList.add("toggle-with-icon");
|
|
868
|
+
const e = document.createElement("div");
|
|
869
|
+
if (e.className = "toggle-label", this.props.icon) {
|
|
870
|
+
const o = document.createElement("span");
|
|
871
|
+
o.className = "toggle-icon", o.innerHTML = this.props.icon, e.appendChild(o);
|
|
872
|
+
}
|
|
873
|
+
if (this.props.title) {
|
|
874
|
+
const o = document.createElement("span");
|
|
875
|
+
o.textContent = this.props.title, e.appendChild(o);
|
|
876
|
+
}
|
|
877
|
+
t.appendChild(e);
|
|
878
|
+
const i = document.createElement("label");
|
|
879
|
+
i.className = "toggle-switch";
|
|
880
|
+
const n = document.createElement("input");
|
|
881
|
+
n.type = "checkbox", n.checked = this.value ?? !1, n.addEventListener("change", () => {
|
|
882
|
+
this.value = n.checked, this.onChange && this.onChange(this.value);
|
|
883
|
+
});
|
|
884
|
+
const s = document.createElement("span");
|
|
885
|
+
return s.className = "toggle-slider", i.appendChild(n), i.appendChild(s), t.appendChild(i), t;
|
|
886
|
+
}
|
|
887
|
+
}
|
|
888
|
+
const Z = `
|
|
849
889
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
850
890
|
<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"/>
|
|
851
891
|
</svg>
|
|
852
|
-
`,
|
|
892
|
+
`, D = `
|
|
853
893
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
854
894
|
<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"/>
|
|
855
895
|
</svg>
|
|
856
896
|
`;
|
|
857
|
-
class
|
|
897
|
+
class rt extends C {
|
|
858
898
|
constructor(t) {
|
|
859
899
|
super({
|
|
860
900
|
title: "Border",
|
|
861
901
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
902
|
+
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
862
903
|
settings: {
|
|
863
904
|
size: new f({
|
|
864
905
|
title: "Size",
|
|
865
|
-
icon:
|
|
906
|
+
icon: D,
|
|
866
907
|
default: (t == null ? void 0 : t.size) ?? 0,
|
|
867
908
|
suffix: "px"
|
|
868
909
|
}),
|
|
@@ -876,7 +917,7 @@ class lt extends C {
|
|
|
876
917
|
}),
|
|
877
918
|
radius: new f({
|
|
878
919
|
title: "Radius",
|
|
879
|
-
icon:
|
|
920
|
+
icon: Z,
|
|
880
921
|
default: (t == null ? void 0 : t.radius) ?? 12,
|
|
881
922
|
suffix: "px"
|
|
882
923
|
})
|
|
@@ -900,20 +941,21 @@ const P = `
|
|
|
900
941
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
901
942
|
<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"/>
|
|
902
943
|
</svg>
|
|
903
|
-
`,
|
|
944
|
+
`, J = `
|
|
904
945
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
905
946
|
<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"/>
|
|
906
947
|
</svg>
|
|
907
|
-
`,
|
|
948
|
+
`, X = `
|
|
908
949
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
909
950
|
<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"/>
|
|
910
951
|
</svg>
|
|
911
952
|
`;
|
|
912
|
-
class
|
|
953
|
+
class ht extends C {
|
|
913
954
|
constructor(t = {}) {
|
|
914
955
|
super({
|
|
915
956
|
title: t.title || "Typography",
|
|
916
957
|
collapsed: t.collapsed,
|
|
958
|
+
hideCondition: t.hideCondition,
|
|
917
959
|
settings: {
|
|
918
960
|
color: new H({
|
|
919
961
|
default: t.colorDefault ?? "0, 0, 30"
|
|
@@ -935,7 +977,7 @@ class rt extends C {
|
|
|
935
977
|
}),
|
|
936
978
|
fontWeight: new O({
|
|
937
979
|
title: "Weight",
|
|
938
|
-
icon:
|
|
980
|
+
icon: J,
|
|
939
981
|
default: t.fontWeightDefault ?? "400",
|
|
940
982
|
options: t.fontWeightOptions ?? [
|
|
941
983
|
{ name: "Regular", value: "400" },
|
|
@@ -947,7 +989,7 @@ class rt extends C {
|
|
|
947
989
|
}),
|
|
948
990
|
fontSize: new f({
|
|
949
991
|
title: "Size",
|
|
950
|
-
icon:
|
|
992
|
+
icon: X,
|
|
951
993
|
default: t.fontSizeDefault ?? 12,
|
|
952
994
|
suffix: "px"
|
|
953
995
|
}),
|
|
@@ -1016,10 +1058,12 @@ class E extends m {
|
|
|
1016
1058
|
}), i;
|
|
1017
1059
|
}
|
|
1018
1060
|
}
|
|
1019
|
-
class
|
|
1061
|
+
class ct extends C {
|
|
1020
1062
|
constructor(t) {
|
|
1021
1063
|
super({
|
|
1022
1064
|
title: "Margins",
|
|
1065
|
+
collapsed: t == null ? void 0 : t.collapsed,
|
|
1066
|
+
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1023
1067
|
settings: {
|
|
1024
1068
|
marginTop: new E({
|
|
1025
1069
|
title: "Top",
|
|
@@ -1068,9 +1112,11 @@ const Q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
1068
1112
|
<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"/>
|
|
1069
1113
|
</svg>`;
|
|
1070
1114
|
class et extends C {
|
|
1071
|
-
constructor(t, e) {
|
|
1115
|
+
constructor(t, e, i) {
|
|
1072
1116
|
super({
|
|
1073
1117
|
title: `Tab ${t + 1}`,
|
|
1118
|
+
hideCondition: i == null ? void 0 : i.hideCondition,
|
|
1119
|
+
collapsed: i == null ? void 0 : i.collapsed,
|
|
1074
1120
|
settings: {
|
|
1075
1121
|
name: new y({
|
|
1076
1122
|
title: "Tab Name",
|
|
@@ -1109,15 +1155,24 @@ class et extends C {
|
|
|
1109
1155
|
return t;
|
|
1110
1156
|
}
|
|
1111
1157
|
}
|
|
1112
|
-
class
|
|
1158
|
+
class dt extends C {
|
|
1113
1159
|
// Store the rendered element
|
|
1114
|
-
constructor() {
|
|
1115
|
-
super({
|
|
1160
|
+
constructor(t) {
|
|
1161
|
+
super({
|
|
1162
|
+
title: "Tabs",
|
|
1163
|
+
settings: {},
|
|
1164
|
+
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1165
|
+
collapsed: t == null ? void 0 : t.collapsed
|
|
1166
|
+
}), this.tabs = [], this._el = null, this.addTab();
|
|
1116
1167
|
}
|
|
1117
1168
|
/** Adds a new tab. */
|
|
1118
|
-
addTab() {
|
|
1119
|
-
const
|
|
1120
|
-
|
|
1169
|
+
addTab(t) {
|
|
1170
|
+
const e = this.tabs.length, i = new et(
|
|
1171
|
+
e,
|
|
1172
|
+
() => this.removeTab(i),
|
|
1173
|
+
t
|
|
1174
|
+
);
|
|
1175
|
+
this.tabs.push(i), this.settings[`Tab ${e + 1}`] = i;
|
|
1121
1176
|
}
|
|
1122
1177
|
/** Removes a specific tab. */
|
|
1123
1178
|
removeTab(t) {
|
|
@@ -1169,7 +1224,7 @@ class ct extends C {
|
|
|
1169
1224
|
}));
|
|
1170
1225
|
}
|
|
1171
1226
|
}
|
|
1172
|
-
class
|
|
1227
|
+
class pt extends C {
|
|
1173
1228
|
/**
|
|
1174
1229
|
* Constructs a new BackgroundSettingSet.
|
|
1175
1230
|
*
|
|
@@ -1198,8 +1253,9 @@ class dt extends C {
|
|
|
1198
1253
|
super({
|
|
1199
1254
|
title: "Background Image",
|
|
1200
1255
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
1256
|
+
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1201
1257
|
settings: {
|
|
1202
|
-
backgroundImage: new
|
|
1258
|
+
backgroundImage: new F({
|
|
1203
1259
|
...t == null ? void 0 : t.uploadProps,
|
|
1204
1260
|
default: (t == null ? void 0 : t.backgroundImage) ?? ""
|
|
1205
1261
|
}),
|
|
@@ -1244,14 +1300,14 @@ class dt extends C {
|
|
|
1244
1300
|
}
|
|
1245
1301
|
export {
|
|
1246
1302
|
$ as AlignSetting,
|
|
1247
|
-
|
|
1248
|
-
|
|
1303
|
+
pt as BackgroundSettingSet,
|
|
1304
|
+
rt as BorderSettingSet,
|
|
1249
1305
|
it as ButtonSetting,
|
|
1250
1306
|
H as ColorSetting,
|
|
1251
1307
|
st as DimensionSetting,
|
|
1252
|
-
|
|
1308
|
+
ht as HeaderTypographySettingSet,
|
|
1253
1309
|
nt as HeightSetting,
|
|
1254
|
-
|
|
1310
|
+
ct as MarginSettingGroup,
|
|
1255
1311
|
f as NumberSetting,
|
|
1256
1312
|
k as OpacitySetting,
|
|
1257
1313
|
at as SelectApiSettings,
|
|
@@ -1259,8 +1315,9 @@ export {
|
|
|
1259
1315
|
m as Setting,
|
|
1260
1316
|
C as SettingGroup,
|
|
1261
1317
|
y as StringSetting,
|
|
1262
|
-
|
|
1263
|
-
|
|
1318
|
+
dt as TabsContainerGroup,
|
|
1319
|
+
lt as Toggle,
|
|
1320
|
+
F as UploadSetting,
|
|
1264
1321
|
ot as WidthSetting,
|
|
1265
1322
|
R as iterateSettings
|
|
1266
1323
|
};
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";.setting-group{padding:16px;display:flex;flex-direction:column;width:100%;gap:8px;border:1px solid var(--Gray-200, #eaecf0);border-radius:8px;background:#fff;margin:0 auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group .setting-group{width:100%;padding:8px;border:1px solid #d0d5dd;border-radius:8px;background-color:#fff;box-shadow:none;margin:0}.setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0}.setting-group .setting-group .setting-group-content.collapsed{padding:0}.setting-group .setting-group .setting-group{border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;border:1px solid #eaecf0}.setting-group .setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0;box-shadow:none}.setting-group .setting-group.collapsed{padding-bottom:0}.setting-group .setting-group .setting-group-content{padding:0}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title:hover,.setting-group-title:hover .setting-group-arrow{background-color:transparent}.setting-group-title h3{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);transition:transform .2s ease;color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;gap:8px;transition:max-height .3s ease-in-out;max-height:2000px;opacity:1;padding:0 16px 16px}.setting-group-content.collapsed{max-height:0;opacity:0;margin:0;padding:0;pointer-events:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-bottom:4px;margin-top:4px;background:#f8f8f8;border-radius:8px}.setting-group.main-group.collapsed{padding:0;background:transparent!important;border:none;box-shadow:none;margin:0}.setting-group.main-group.collapsed .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{font-weight:600;font-size:16px;color:#101828}.setting-group-content.main-content{width:100%;background:#f8f8f8;border:0;box-shadow:none;padding:0}.setting-divider{height:1px;width:100%;background-color:#f2f4f7;margin:4px 0}.setting-group-content>*{margin-bottom:8px}.setting-group-content>*:last-child{margin-bottom:0}.setting-group.active{border-color:#d6bbfb;box-shadow:0 0 0 4px #7f56d91a}.setting-group-empty{color:#667085;font-size:13px;font-style:italic;padding:12px 0;text-align:center}.setting-group-title.collapsed-view{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;height:36px;border-radius:8px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);margin-bottom:0;position:relative;overflow:hidden;cursor:pointer}.setting-group-title.collapsed-view:hover{border-color:var(--Gray-200, #eaecf0);box-shadow:none;background:#fff;transform:none}.setting-group.main-group .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group:not(.main-group) .setting-group-title.collapsed-view{height:36px;background:#fff;border:1px solid var(--Gray-200, #eaecf0)}.setting-group-title .title-section{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.setting-group-title .group-icon{display:flex;justify-content:center;align-items:center;color:var(--Gray-500, #667085);flex-shrink:0;width:20px;height:20px}.setting-group-title.collapsed-view h3{color:var(--Gray-800, #1d2939);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-title.collapsed-view .group-badge{display:flex;padding:2px 8px;justify-content:center;align-items:center;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px;margin-left:8px}.setting-group-title .actions-section{display:flex;align-items:center;gap:8px;margin-left:12px}.setting-group-title.collapsed-view .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title.collapsed-view:hover .setting-group-arrow{background-color:transparent;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title:hover .setting-group-arrow{background-color:var(--Gray-100, #f2f4f7)}.setting-group-title .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px}@media (max-width: 768px){.setting-group-title.collapsed-view{padding:10px 12px}.setting-group-title .title-section{gap:8px}.setting-group-title.collapsed-view .group-badge{display:none}}@media (max-width: 480px){.setting-group-title.collapsed-view h3{font-size:13px}.setting-group-title.collapsed-view .setting-group-arrow{width:24px;height:24px}.setting-group-title.collapsed-view{padding:0 10px}}.setting-group-title.collapsed-view.striped:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--Primary-100, #f4ebff)}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-label{position:absolute;right:8px;padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;justify-content:space-between;align-items:center;column-gap:12px;position:relative;width:100%}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.select-button{place-self:end;max-width:120px;width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:14px;font-weight:400;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-button.has-label{padding-top:0;height:33px}.select-button .select-label{position:absolute;top:8px;left:16px;color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px;pointer-events:none}.select-button .select-value{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #7f56d9;border-radius:50%;animation:select-spin 1s linear infinite;z-index:2}@keyframes select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-options{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-option:hover{background:#f9fafb}.select-option.selected{background:#f4ebff;color:#6941c6;font-weight:400}.svg-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.svg-container .svg-select{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center;z-index:1}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{transform:translate(-.25rem);width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#667085;z-index:1;border-radius:4px;transition:background-color .15s ease,color .15s ease}.dimension-setting-container.aspect-locked .dimension-bracket:before,.dimension-setting-container.aspect-locked .dimension-bracket:after{filter:hue-rotate(210deg) saturate(2)}@media (max-width: 480px){.dimension-bracket{right:100px}}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;gap:8px;width:100%}.icon-title-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.icon-title-container .input-label{color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500}.preview-button-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;gap:12px;border-radius:12px}.preview-button-container.no-image{justify-content:center}.preview-button-container.no-image .preview-placeholder{display:none}.preview-button-container.no-image .upload-button{width:100%;min-width:140px;flex-grow:1;margin:0 auto}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#d3d3d3;flex-shrink:0;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;background-position:center;background-size:146.165% 100%;background-repeat:no-repeat}.preview-wrapper.has-image .upload-preview{display:block;object-fit:contain;padding:2px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .empty-state{display:none}.upload-button{width:100%;height:40px;display:flex;padding:5px 4px;flex-direction:row;align-items:center;gap:4px;border-radius:12px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;flex-grow:0;justify-content:center;min-width:90px}.preview-wrapper:not(.has-image)+.upload-button{flex-grow:0}.upload-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-label{font-size:12px;font-weight:500;color:#344054}.delete-button{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;position:absolute;right:4px;top:4px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease;z-index:2}.delete-button svg{width:14px;height:14px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.upload-setting-wrapper.no-label .preview-button-container{grid-row:1}.preview-placeholder{display:flex;justify-content:center;align-items:center;width:91px;height:71px;border-radius:4px;background-color:#f2f4f7;flex-shrink:0}.preview-button-container:not(:has(.preview-wrapper.has-image)) .preview-placeholder{display:flex}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:#fff;cursor:pointer;font-size:14px;font-weight:500;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px!important}.select-api-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-api-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;font-size:10px;color:#667085;font-weight:500;pointer-events:none}.select-api-button .select-value{margin-top:6px}.select-api-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-api-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #7f56d9;border-radius:50%;animation:select-api-spin 1s linear infinite;z-index:2}.select-api-button.has-label.loading{padding-left:36px!important}.select-api-button.has-label.loading .select-value{padding-left:0}.select-api-button.has-label.loading:before{top:18px;left:10px}@keyframes select-api-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-api-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-api-options{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-api-options.open{display:flex;opacity:1;transform:translateY(0)}.select-api-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-api-option:hover{background:#f9fafb}.select-api-option.selected{background:#f4ebff;color:#6941c6;font-weight:500}.select-api-option.disabled{opacity:.6;cursor:not-allowed;color:#6e7891}.select-api-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #e4e7ec;background:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0;cursor:pointer}.select-api-radio:checked{border-color:#7f56d9;border-width:4px;background:#fff}.svg-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-container .svg-select-api{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-container .icon-container{display:none}.select-api-options::-webkit-scrollbar{width:6px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-api-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.select-api-option.empty-message:hover{background:transparent}.select-api-option:focus{outline:none;box-shadow:0 0 0 2px #7f56d9}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-api-options.open{display:flex;animation:fadeIn .2s ease forwards}.select-api-button.has-label{height:48px}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}:root{--color-border: #D5DCE5;--color-bg: #F8F8F8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";.setting-group{padding:16px;display:flex;flex-direction:column;width:100%;gap:8px;border:1px solid var(--Gray-200, #eaecf0);border-radius:8px;background:#fff;margin:0 auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group .setting-group{width:100%;padding:8px;border:1px solid #d0d5dd;border-radius:8px;background-color:#fff;box-shadow:none;margin:0}.setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0}.setting-group .setting-group .setting-group-content.collapsed{padding:0}.setting-group .setting-group .setting-group{border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;border:1px solid #eaecf0}.setting-group .setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0;box-shadow:none}.setting-group .setting-group.collapsed{padding-bottom:0}.setting-group .setting-group .setting-group-content{padding:0}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title:hover,.setting-group-title:hover .setting-group-arrow{background-color:transparent}.setting-group-title h3{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);transition:transform .2s ease;color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;gap:8px;transition:max-height .3s ease-in-out;max-height:2000px;opacity:1;padding:0 16px 16px}.setting-group-content.collapsed{max-height:0;opacity:0;margin:0;padding:0;pointer-events:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-bottom:4px;margin-top:4px;background:#f8f8f8;border-radius:8px}.setting-group.main-group.collapsed{padding:0;background:transparent!important;border:none;box-shadow:none;margin:0}.setting-group.main-group.collapsed .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{font-weight:600;font-size:16px;color:#101828}.setting-group-content.main-content{width:100%;background:#f8f8f8;border:0;box-shadow:none;padding:0}.setting-divider{height:1px;width:100%;background-color:#f2f4f7;margin:4px 0}.setting-group-content>*{margin-bottom:8px}.setting-group-content>*:last-child{margin-bottom:0}.setting-group.active{border-color:#d6bbfb;box-shadow:0 0 0 4px #7f56d91a}.setting-group-empty{color:#667085;font-size:13px;font-style:italic;padding:12px 0;text-align:center}.setting-group-title.collapsed-view{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;height:36px;border-radius:8px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);margin-bottom:0;position:relative;overflow:hidden;cursor:pointer}.setting-group-title.collapsed-view:hover{border-color:var(--Gray-200, #eaecf0);box-shadow:none;background:#fff;transform:none}.setting-group.main-group .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group:not(.main-group) .setting-group-title.collapsed-view{height:36px;background:#fff;border:1px solid var(--Gray-200, #eaecf0)}.setting-group-title .title-section{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.setting-group-title .group-icon{display:flex;justify-content:center;align-items:center;color:var(--Gray-500, #667085);flex-shrink:0;width:20px;height:20px}.setting-group-title.collapsed-view h3{color:var(--Gray-800, #1d2939);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-title.collapsed-view .group-badge{display:flex;padding:2px 8px;justify-content:center;align-items:center;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px;margin-left:8px}.setting-group-title .actions-section{display:flex;align-items:center;gap:8px;margin-left:12px}.setting-group-title.collapsed-view .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title.collapsed-view:hover .setting-group-arrow{background-color:transparent;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title:hover .setting-group-arrow{background-color:var(--Gray-100, #f2f4f7)}.setting-group-title .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px}@media (max-width: 768px){.setting-group-title.collapsed-view{padding:10px 12px}.setting-group-title .title-section{gap:8px}.setting-group-title.collapsed-view .group-badge{display:none}}@media (max-width: 480px){.setting-group-title.collapsed-view h3{font-size:13px}.setting-group-title.collapsed-view .setting-group-arrow{width:24px;height:24px}.setting-group-title.collapsed-view{padding:0 10px}}.setting-group-title.collapsed-view.striped:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--Primary-100, #f4ebff)}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-label{position:absolute;right:8px;padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;justify-content:space-between;align-items:center;column-gap:12px;position:relative;width:100%}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.select-button{place-self:end;max-width:120px;width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:14px;font-weight:400;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-button.has-label{padding-top:0;height:33px}.select-button .select-label{position:absolute;top:8px;left:16px;color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px;pointer-events:none}.select-button .select-value{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #7f56d9;border-radius:50%;animation:select-spin 1s linear infinite;z-index:2}@keyframes select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-options{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-option:hover{background:#f9fafb}.select-option.selected{background:#f4ebff;color:#6941c6;font-weight:400}.svg-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.svg-container .svg-select{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center;z-index:1}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{transform:translate(-.25rem);width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#667085;z-index:1;border-radius:4px;transition:background-color .15s ease,color .15s ease}.dimension-setting-container.aspect-locked .dimension-bracket:before,.dimension-setting-container.aspect-locked .dimension-bracket:after{filter:hue-rotate(210deg) saturate(2)}@media (max-width: 480px){.dimension-bracket{right:100px}}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;gap:8px;width:100%}.icon-title-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.icon-title-container .input-label{color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500}.preview-button-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;gap:12px;border-radius:12px}.preview-button-container.no-image{justify-content:center}.preview-button-container.no-image .preview-placeholder{display:none}.preview-button-container.no-image .upload-button{width:100%;min-width:140px;flex-grow:1;margin:0 auto}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#d3d3d3;flex-shrink:0;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;background-position:center;background-size:146.165% 100%;background-repeat:no-repeat}.preview-wrapper.has-image .upload-preview{display:block;object-fit:contain;padding:2px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .empty-state{display:none}.upload-button{width:100%;height:40px;display:flex;padding:5px 4px;flex-direction:row;align-items:center;gap:4px;border-radius:12px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;flex-grow:0;justify-content:center;min-width:90px}.preview-wrapper:not(.has-image)+.upload-button{flex-grow:0}.upload-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-label{font-size:12px;font-weight:500;color:#344054}.delete-button{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;position:absolute;right:4px;top:4px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease;z-index:2}.delete-button svg{width:14px;height:14px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.upload-setting-wrapper.no-label .preview-button-container{grid-row:1}.preview-placeholder{display:flex;justify-content:center;align-items:center;width:91px;height:71px;border-radius:4px;background-color:#f2f4f7;flex-shrink:0}.preview-button-container:not(:has(.preview-wrapper.has-image)) .preview-placeholder{display:flex}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:#fff;cursor:pointer;font-size:14px;font-weight:500;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px!important}.select-api-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-api-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;font-size:10px;color:#667085;font-weight:500;pointer-events:none}.select-api-button .select-value{margin-top:6px}.select-api-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-api-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #7f56d9;border-radius:50%;animation:select-api-spin 1s linear infinite;z-index:2}.select-api-button.has-label.loading{padding-left:36px!important}.select-api-button.has-label.loading .select-value{padding-left:0}.select-api-button.has-label.loading:before{top:18px;left:10px}@keyframes select-api-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-api-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-api-options{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px)}.select-api-options.open{display:flex;opacity:1;transform:translateY(0)}.select-api-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-api-option:hover{background:#f9fafb}.select-api-option.selected{background:#f4ebff;color:#6941c6;font-weight:500}.select-api-option.disabled{opacity:.6;cursor:not-allowed;color:#6e7891}.select-api-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #e4e7ec;background:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0;cursor:pointer}.select-api-radio:checked{border-color:#7f56d9;border-width:4px;background:#fff}.svg-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-container .svg-select-api{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-container .icon-container{display:none}.select-api-options::-webkit-scrollbar{width:6px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-api-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.select-api-option.empty-message:hover{background:transparent}.select-api-option:focus{outline:none;box-shadow:0 0 0 2px #7f56d9}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-api-options.open{display:flex;animation:fadeIn .2s ease forwards}.select-api-button.has-label{height:48px}.toggle-setting-container{display:flex;align-items:center;justify-content:space-between;padding:8px 0;width:100%}.toggle-label{font-size:14px;font-weight:500;color:#344054;margin-right:12px}.toggle-switch{position:relative;display:inline-block;width:40px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e4e7ec;transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#7f56d9}input:focus+.toggle-slider{box-shadow:0 0 1px #7f56d9}input:checked+.toggle-slider:before{transform:translate(16px)}.toggle-with-icon .toggle-label{display:flex;align-items:center;gap:8px}.toggle-icon{display:flex;align-items:center;justify-content:center;color:#667085}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}:root{--color-border: #D5DCE5;--color-bg: #F8F8F8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
|
package/dist/index.d.ts
CHANGED
|
@@ -47,6 +47,7 @@ export declare class BackgroundSettingSet extends SettingGroup<{
|
|
|
47
47
|
opacityBG?: number;
|
|
48
48
|
uploadProps?: UploadSettingProps;
|
|
49
49
|
collapsed?: boolean;
|
|
50
|
+
hideCondition?: () => boolean;
|
|
50
51
|
});
|
|
51
52
|
/**
|
|
52
53
|
* Override draw() to reorder the child settings and insert an "OR" label between the two sections.
|
|
@@ -75,6 +76,7 @@ export declare class BorderSettingSet extends SettingGroup<{
|
|
|
75
76
|
radius?: number;
|
|
76
77
|
size?: number;
|
|
77
78
|
collapsed?: boolean;
|
|
79
|
+
hideCondition?: () => boolean;
|
|
78
80
|
});
|
|
79
81
|
/**
|
|
80
82
|
* Optional helper to generate CSS from the current settings.
|
|
@@ -161,6 +163,7 @@ declare interface HeaderTypographySettings {
|
|
|
161
163
|
fontSizeDefault?: number;
|
|
162
164
|
alignDefault?: AlignValue;
|
|
163
165
|
collapsed?: boolean;
|
|
166
|
+
hideCondition?: () => boolean;
|
|
164
167
|
}
|
|
165
168
|
|
|
166
169
|
export declare class HeaderTypographySettingSet extends SettingGroup<{
|
|
@@ -239,6 +242,8 @@ export declare class MarginSettingGroup extends SettingGroup<{
|
|
|
239
242
|
marginRight?: number | 'auto';
|
|
240
243
|
marginBottom?: number | 'auto';
|
|
241
244
|
marginLeft?: number | 'auto';
|
|
245
|
+
collapsed?: boolean;
|
|
246
|
+
hideCondition?: () => boolean;
|
|
242
247
|
});
|
|
243
248
|
getCssCode(): string;
|
|
244
249
|
}
|
|
@@ -292,7 +297,9 @@ export declare class SelectApiSettings<T = any> extends Setting<T, SelectApiSett
|
|
|
292
297
|
private buttonEl;
|
|
293
298
|
private isLoading;
|
|
294
299
|
private container;
|
|
300
|
+
private hasInitializedOptions;
|
|
295
301
|
constructor(props?: SelectApiSettingProps<T>);
|
|
302
|
+
private initializeOptions;
|
|
296
303
|
private createOption;
|
|
297
304
|
draw(): HTMLElement;
|
|
298
305
|
private selectApiOption;
|
|
@@ -361,12 +368,14 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
361
368
|
private isCollapsed;
|
|
362
369
|
private isMain;
|
|
363
370
|
private elementRef;
|
|
371
|
+
private hideCondition?;
|
|
364
372
|
constructor(groupProps: SettingGroupProps<T>);
|
|
365
373
|
setOnChange(onChange: (value: T) => void): SettingGroup<T>;
|
|
366
374
|
getValues<K extends keyof T>(childKey?: K): any;
|
|
367
375
|
draw(): HTMLElement;
|
|
368
376
|
collapse(): void;
|
|
369
377
|
expand(): void;
|
|
378
|
+
updateVisibility(): void;
|
|
370
379
|
toggle(): void;
|
|
371
380
|
}
|
|
372
381
|
|
|
@@ -378,6 +387,7 @@ export declare type SettingGroupProps<T> = {
|
|
|
378
387
|
main?: boolean;
|
|
379
388
|
description?: string;
|
|
380
389
|
icon?: string;
|
|
390
|
+
hideCondition?: () => boolean;
|
|
381
391
|
};
|
|
382
392
|
|
|
383
393
|
export declare interface SettingProps<T> {
|
|
@@ -406,9 +416,15 @@ export declare interface StringSettingsProps extends SettingProps<string> {
|
|
|
406
416
|
export declare class TabsContainerGroup extends SettingGroup<Record<string, TabSettingGroup>> {
|
|
407
417
|
private tabs;
|
|
408
418
|
private _el;
|
|
409
|
-
constructor(
|
|
419
|
+
constructor(props?: {
|
|
420
|
+
hideCondition?: () => boolean;
|
|
421
|
+
collapsed?: boolean;
|
|
422
|
+
});
|
|
410
423
|
/** Adds a new tab. */
|
|
411
|
-
addTab(
|
|
424
|
+
addTab(props?: {
|
|
425
|
+
hideCondition?: () => boolean;
|
|
426
|
+
collapsed?: boolean;
|
|
427
|
+
}): void;
|
|
412
428
|
/** Removes a specific tab. */
|
|
413
429
|
removeTab(tab: TabSettingGroup): void;
|
|
414
430
|
/** Relabels tabs sequentially after removal. */
|
|
@@ -429,10 +445,25 @@ declare class TabSettingGroup extends SettingGroup<{
|
|
|
429
445
|
content: StringSetting;
|
|
430
446
|
}> {
|
|
431
447
|
private onDeleteCallback?;
|
|
432
|
-
constructor(index: number, onDelete: () => void
|
|
448
|
+
constructor(index: number, onDelete: () => void, props?: {
|
|
449
|
+
hideCondition?: () => boolean;
|
|
450
|
+
collapsed?: boolean;
|
|
451
|
+
});
|
|
433
452
|
draw(): HTMLElement;
|
|
434
453
|
}
|
|
435
454
|
|
|
455
|
+
export declare class Toggle extends Setting<boolean, ToggleSettingProps> {
|
|
456
|
+
inputType: InputTypes;
|
|
457
|
+
constructor(props: ToggleSettingProps);
|
|
458
|
+
draw(): HTMLElement;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
export declare interface ToggleSettingProps extends SettingProps<boolean> {
|
|
462
|
+
title?: string;
|
|
463
|
+
icon?: string;
|
|
464
|
+
default?: boolean;
|
|
465
|
+
}
|
|
466
|
+
|
|
436
467
|
export declare class UploadSetting extends Setting<string, UploadSettingProps> {
|
|
437
468
|
inputType: InputTypes;
|
|
438
469
|
private previewWrapper;
|
package/package.json
CHANGED