builder-settings-types 0.0.171 → 0.0.172
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let H=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=j[e[c]&63];return t};function k(c){if(c===null||typeof c!="object")return c;if(c instanceof Date)return new Date(c.getTime());if(Array.isArray(c)){const i=[];for(let s=0;s<c.length;s++)i[s]=k(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=k(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function W(c){switch(c){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 p{constructor(t={}){this.props=t,this.id=t.id||H(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setOnBlur(t){return this.onBlur=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}clone(){const t=this.constructor,e=k(this.props),i=new t(e);return i.value=k(this.value),i}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const o=document.createElement("div");if(o.className="icon-container",t.icon){const l=this.createIcon(t.icon,t.iconClassName);o.appendChild(l)}if(t.title){const l=this.createLabel(t.title,t.labelClassName);o.appendChild(l)}e.appendChild(o)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||W(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=o=>{const l=o.target;let r=l.value;switch(t.inputType){case"number":r=Number(l.value);break;case"color":r=l.value;break;case"date":r=l.value;break;case"select":r=l.value;break;case"text":r=l.value;break;case"button":r=l.value;break;default:r=l.value}this.value=r,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)},a=o=>{o.target,this.onBlur&&this.onBlur(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),s.addEventListener("blur",a),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function O(c){let t=0,e=c.parentElement;for(;e;)e.classList.contains("setting-group")&&e!==c&&t++,e=e.parentElement;return t}function T(c,t){const e=Math.min(Math.max(t,0),5);c.setAttribute("data-nesting-level",e.toString()),e>0?(c.style.setProperty("--visual-indent",`${e*2}px`),c.style.marginLeft="var(--visual-indent)"):(c.style.removeProperty("--visual-indent"),c.style.marginLeft="")}function I(c,t=0){c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;T(s,n),I(s,n)})}const _={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class D{constructor(t={}){this.observedElements=new Set,this.config={..._,...t},this.config.enableAutoDetection&&this.setupAutoDetection()}setupAutoDetection(){this.observer=new MutationObserver(t=>{let e=!1;t.forEach(i=>{i.type==="childList"&&i.addedNodes.forEach(s=>{s instanceof HTMLElement&&(s.classList.contains("setting-group")?[s]:Array.from(s.querySelectorAll(".setting-group"))).length>0&&(e=!0)})}),e&&this.updateAllNesting()}),this.observer.observe(document.body,{childList:!0,subtree:!0})}trackElement(t){this.observedElements.add(t),this.updateElementNesting(t)}untrackElement(t){this.observedElements.delete(t)}updateElementNesting(t){const e=O(t);this.applyNestingWithConfig(t,e)}updateAllNesting(){this.observedElements.forEach(t=>{t.isConnected?this.updateElementNesting(t):this.observedElements.delete(t)})}applyNestingWithConfig(t,e){const i=Math.min(Math.max(e,0),this.config.maxLevel);if(t.setAttribute("data-nesting-level",i.toString()),i>0){const s=i*this.config.visualIndentMultiplier;t.style.setProperty("--visual-indent",`${s}px`),t.style.marginLeft="var(--visual-indent)"}else t.style.removeProperty("--visual-indent"),t.style.marginLeft=""}recalculateNesting(t=document.body){t.querySelectorAll(".setting-group").forEach(i=>{const s=i;this.updateElementNesting(s),this.trackElement(s)})}getNestingStats(){const t={};return this.observedElements.forEach(e=>{const i=parseInt(e.getAttribute("data-nesting-level")||"0",10);t[i]=(t[i]||0)+1}),t}destroy(){this.observer&&(this.observer.disconnect(),this.observer=void 0),this.observedElements.clear()}}const q=new D;function E(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const g=class g{constructor(t){this.elementRef=null,this.isHidden=!1,this.custom=!1,this.initialValues={},this.changeTimeout=null,this.isHandlingChange=!1,this.changeHandlers=new Set,this.blurTimeout=null,this.lastValues={},this.lastChangeTime=0,this.CHANGE_DEBOUNCE=100,this.handleBlur=()=>{},this.pendingBlurHandler=null,this.originalDefaultValues={},this.nestingLevel=0,this.parentNestingLevel=0,this.id=t.id||H(),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.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,this.parentNestingLevel=t.parentNestingLevel??0,this.nestingLevel=this.parentNestingLevel,Object.assign(this,t.settings),this.initialValues=this.getValues(),this.originalDefaultValues=this.getDefaultValues(),this.propagateNestingLevel()}propagateNestingLevel(){const t=this.nestingLevel+1;E(this.settings,(e,i)=>{i instanceof g&&(i.parentNestingLevel=this.nestingLevel,i.nestingLevel=t,i.propagateNestingLevel())})}getNestingLevel(){return this.nestingLevel}setNestingLevel(t){this.nestingLevel=t,this.propagateNestingLevel(),this.elementRef&&this.updateNestingStyles()}updateNestingStyles(){this.elementRef&&(T(this.elementRef,this.nestingLevel),I(this.elementRef,this.nestingLevel))}autoDetectNestingLevel(){if(!this.elementRef)return;const t=O(this.elementRef);t!==this.nestingLevel&&this.setNestingLevel(t)}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}setOnChange(t){this.onChange=t;const e=()=>{this.isHandlingChange||(this.isHandlingChange=!0,this.changeTimeout&&clearTimeout(this.changeTimeout),this.changeTimeout=setTimeout(()=>{const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&(this.lastChangeTime=Date.now(),this.initialValues=i,t(i),this.updateVisibility()),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),E(this.settings,(i,s)=>{var n;if(s instanceof g)s.setOnChange(a=>{const o=this.getValues();this.initialValues=o,t(o)}),this.changeHandlers.add(()=>t(this.getValues()));else if(s instanceof p){const a=()=>{e()};this.changeHandlers.add(a),s.setOnChange(a)}else{const a=()=>{e()};this.changeHandlers.add(a),(n=s.setOnChange)==null||n.call(s,a)}}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>{t()},100))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef&&this.elementRef.addEventListener("focusout",this.handleBlur,!0),E(this.settings,(t,e)=>{e instanceof g&&e.setOnBlur(()=>{this.onBlur&&this.onBlur()})})}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}clone(){const t={};E(this.settings,(s,n)=>{typeof n.clone=="function"?t[s]=n.clone():(console.warn(`Setting with key '${s}' does not have a clone method. Copying reference.`),t[s]=n)});const e={title:this.title,settings:t,description:this.description,icon:this.icon,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,hideCondition:this.hideCondition,parentNestingLevel:this.parentNestingLevel},i=B(e);return i.initialValues=this.getValues(),i}setValue(t){if(!t||typeof t!="object")return;Object.entries(t).forEach(([i,s])=>{const n=this.settings[i];n&&(n instanceof g||n instanceof p)&&typeof n.setValue=="function"&&n.setValue(s)});const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof g?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof g?e.getValues():e.value:void 0}}getDefaultValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof g?e[i]=s.getDefaultValues():e[i]=s.default!==void 0?s.default:s.value}return e}else{const e=this.settings[t];return e?e instanceof g?e.getDefaultValues():e.default!==void 0?e.default:e.value:void 0}}getMobileValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];if(s instanceof g)e[i]=s.getMobileValues();else if(typeof s.getMobileValue=="function"){const n=s.getMobileValue();e[i]=n!==void 0?n:s.value}else e[i]=s.value}return e}else{const e=this.settings[t];if(!e)return;if(e instanceof g)return e.getMobileValues();if(typeof e.getMobileValue=="function"){const i=e.getMobileValue();return i!==void 0?i:e.value}else return e.value}}setMobileValues(t){if(!(!t||typeof t!="object")&&(Object.entries(t).forEach(([e,i])=>{const s=this.settings[e];s&&(s instanceof g?typeof i=="object"&&i!==null&&s.setMobileValues(i):typeof s.setMobileValue=="function"&&s.setMobileValue(i))}),this.setValue(t),this.onChange)){const e=this.getValues();this.onChange(e)}}resetDefault(){const t=this.originalDefaultValues;if(this.setValue(t),this.onChange){const e=this.getValues();this.onChange(e)}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,g.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),T(t,this.nestingLevel);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 h=document.createElement("span");h.className="group-icon",h.innerHTML=this.icon,i.appendChild(h)}const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");if(n.className="actions-section",this.description&&this.isCollapsed){const h=document.createElement("span");h.className="info-marker",h.innerHTML=`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let O=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=j[e[c]&63];return t};function k(c){if(c===null||typeof c!="object")return c;if(c instanceof Date)return new Date(c.getTime());if(Array.isArray(c)){const i=[];for(let s=0;s<c.length;s++)i[s]=k(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=k(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function W(c){switch(c){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 p{constructor(t={}){this.props=t,this.id=t.id||O(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setOnBlur(t){return this.onBlur=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}clone(){const t=this.constructor,e=k(this.props),i=new t(e);return i.value=k(this.value),i}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const o=document.createElement("div");if(o.className="icon-container",t.icon){const l=this.createIcon(t.icon,t.iconClassName);o.appendChild(l)}if(t.title){const l=this.createLabel(t.title,t.labelClassName);o.appendChild(l)}e.appendChild(o)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||W(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=o=>{const l=o.target;let r=l.value;switch(t.inputType){case"number":r=Number(l.value);break;case"color":r=l.value;break;case"date":r=l.value;break;case"select":r=l.value;break;case"text":r=l.value;break;case"button":r=l.value;break;default:r=l.value}this.value=r,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)},a=o=>{o.target,this.onBlur&&this.onBlur(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),s.addEventListener("blur",a),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function I(c){let t=0,e=c.parentElement;for(;e;)e.classList.contains("setting-group")&&e!==c&&t++,e=e.parentElement;return t}function N(c,t){const e=Math.min(Math.max(t,0),5);c.setAttribute("data-nesting-level",e.toString()),e>0?(c.style.setProperty("--visual-indent",`${e*2}px`),c.style.marginLeft="var(--visual-indent)"):(c.style.removeProperty("--visual-indent"),c.style.marginLeft="")}function B(c,t=0){c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;N(s,n),B(s,n)})}const _={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class D{constructor(t={}){this.observedElements=new Set,this.config={..._,...t},this.config.enableAutoDetection&&this.setupAutoDetection()}setupAutoDetection(){this.observer=new MutationObserver(t=>{let e=!1;t.forEach(i=>{i.type==="childList"&&i.addedNodes.forEach(s=>{s instanceof HTMLElement&&(s.classList.contains("setting-group")?[s]:Array.from(s.querySelectorAll(".setting-group"))).length>0&&(e=!0)})}),e&&this.updateAllNesting()}),this.observer.observe(document.body,{childList:!0,subtree:!0})}trackElement(t){this.observedElements.add(t),this.updateElementNesting(t)}untrackElement(t){this.observedElements.delete(t)}updateElementNesting(t){const e=I(t);this.applyNestingWithConfig(t,e)}updateAllNesting(){this.observedElements.forEach(t=>{t.isConnected?this.updateElementNesting(t):this.observedElements.delete(t)})}applyNestingWithConfig(t,e){const i=Math.min(Math.max(e,0),this.config.maxLevel);if(t.setAttribute("data-nesting-level",i.toString()),i>0){const s=i*this.config.visualIndentMultiplier;t.style.setProperty("--visual-indent",`${s}px`),t.style.marginLeft="var(--visual-indent)"}else t.style.removeProperty("--visual-indent"),t.style.marginLeft=""}recalculateNesting(t=document.body){t.querySelectorAll(".setting-group").forEach(i=>{const s=i;this.updateElementNesting(s),this.trackElement(s)})}getNestingStats(){const t={};return this.observedElements.forEach(e=>{const i=parseInt(e.getAttribute("data-nesting-level")||"0",10);t[i]=(t[i]||0)+1}),t}destroy(){this.observer&&(this.observer.disconnect(),this.observer=void 0),this.observedElements.clear()}}const q=new D;function x(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const g=class g{constructor(t){this.elementRef=null,this.isHidden=!1,this.custom=!1,this.initialValues={},this.changeTimeout=null,this.isHandlingChange=!1,this.changeHandlers=new Set,this.blurTimeout=null,this.lastValues={},this.lastChangeTime=0,this.CHANGE_DEBOUNCE=100,this.handleBlur=()=>{},this.pendingBlurHandler=null,this.originalDefaultValues={},this.nestingLevel=0,this.parentNestingLevel=0,this.id=t.id||O(),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.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,this.parentNestingLevel=t.parentNestingLevel??0,this.nestingLevel=this.parentNestingLevel,Object.assign(this,t.settings),this.initialValues=this.getValues(),this.originalDefaultValues=this.getDefaultValues(),this.propagateNestingLevel()}propagateNestingLevel(){const t=this.nestingLevel+1;x(this.settings,(e,i)=>{i instanceof g&&(i.parentNestingLevel=this.nestingLevel,i.nestingLevel=t,i.propagateNestingLevel())})}getNestingLevel(){return this.nestingLevel}setNestingLevel(t){this.nestingLevel=t,this.propagateNestingLevel(),this.elementRef&&this.updateNestingStyles()}updateNestingStyles(){this.elementRef&&(N(this.elementRef,this.nestingLevel),B(this.elementRef,this.nestingLevel))}autoDetectNestingLevel(){if(!this.elementRef)return;const t=I(this.elementRef);t!==this.nestingLevel&&this.setNestingLevel(t)}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}setOnChange(t){this.onChange=t;const e=()=>{this.isHandlingChange||(this.isHandlingChange=!0,this.changeTimeout&&clearTimeout(this.changeTimeout),this.changeTimeout=setTimeout(()=>{const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&(this.lastChangeTime=Date.now(),this.initialValues=i,t(i),this.updateVisibility()),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),x(this.settings,(i,s)=>{var n;if(s instanceof g)s.setOnChange(a=>{const o=this.getValues();this.initialValues=o,t(o)}),this.changeHandlers.add(()=>t(this.getValues()));else if(s instanceof p){const a=()=>{e()};this.changeHandlers.add(a),s.setOnChange(a)}else{const a=()=>{e()};this.changeHandlers.add(a),(n=s.setOnChange)==null||n.call(s,a)}}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>{t()},100))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef&&this.elementRef.addEventListener("focusout",this.handleBlur,!0),x(this.settings,(t,e)=>{e instanceof g&&e.setOnBlur(()=>{this.onBlur&&this.onBlur()})})}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}clone(){const t={};x(this.settings,(s,n)=>{typeof n.clone=="function"?t[s]=n.clone():(console.warn(`Setting with key '${s}' does not have a clone method. Copying reference.`),t[s]=n)});const e={title:this.title,settings:t,description:this.description,icon:this.icon,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,hideCondition:this.hideCondition,parentNestingLevel:this.parentNestingLevel},i=A(e);return i.initialValues=this.getValues(),i}setValue(t){if(!t||typeof t!="object")return;Object.entries(t).forEach(([i,s])=>{const n=this.settings[i];n&&(n instanceof g||n instanceof p)&&typeof n.setValue=="function"&&n.setValue(s)});const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof g?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof g?e.getValues():e.value:void 0}}getDefaultValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof g?e[i]=s.getDefaultValues():e[i]=s.default!==void 0?s.default:s.value}return e}else{const e=this.settings[t];return e?e instanceof g?e.getDefaultValues():e.default!==void 0?e.default:e.value:void 0}}getMobileValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];if(s instanceof g)e[i]=s.getMobileValues();else if(typeof s.getMobileValue=="function"){const n=s.getMobileValue();e[i]=n!==void 0?n:s.value}else e[i]=s.value}return e}else{const e=this.settings[t];if(!e)return;if(e instanceof g)return e.getMobileValues();if(typeof e.getMobileValue=="function"){const i=e.getMobileValue();return i!==void 0?i:e.value}else return e.value}}setMobileValues(t){if(!(!t||typeof t!="object")&&(Object.entries(t).forEach(([e,i])=>{const s=this.settings[e];s&&(s instanceof g?typeof i=="object"&&i!==null&&s.setMobileValues(i):typeof s.setMobileValue=="function"&&s.setMobileValue(i))}),this.setValue(t),this.onChange)){const e=this.getValues();this.onChange(e)}}resetDefault(){const t=this.originalDefaultValues;if(this.setValue(t),this.onChange){const e=this.getValues();this.onChange(e)}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,g.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),N(t,this.nestingLevel);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 h=document.createElement("span");h.className="group-icon",h.innerHTML=this.icon,i.appendChild(h)}const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");if(n.className="actions-section",this.description&&this.isCollapsed){const h=document.createElement("span");h.className="info-marker",h.innerHTML=`
|
|
2
2
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
3
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
4
4
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -12,15 +12,15 @@
|
|
|
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
|
-
`,u.title=this.description,n.insertBefore(u,a)}}else{if(!h){const u=document.createElement("div");u.className="setting-group-description",u.textContent=this.description,o.insertBefore(u,o.firstChild)}d&&d.remove()}};if(e.onclick=l,e.onkeydown=h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),l())},Object.keys(this.settings).length>0){for(const h in this.settings)if(this.settings.hasOwnProperty(h)){const d=this.settings[h];d instanceof g&&d.setNestingLevel(this.nestingLevel+1),o.appendChild(d.draw())}}else{const h=document.createElement("div");h.className="setting-group-empty",h.textContent="No settings in this group",o.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,q.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}getJson(){return JSON.stringify(this.getValues(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};g.hiddenElements=new Set;let m=g;function B(c){return new m(c)}function z(c){return c}class M extends p{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const F="<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 f extends M{constructor(t){super({...t,icon:t.icon||F,title:t.title||"Color",default:t.default?f.normalizeColorValue(t.default):t.default}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("#")?f.hexToRgbStatic(t):f.normalizeRgbValue(t)}static hexToRgbStatic(t){if(t=t.replace("#",""),t.length===3&&(t=t.split("").map(n=>n+n).join("")),t.length!==6)return console.warn(`Invalid hex value "${t}", using default "0, 0, 0"`),"0, 0, 0";const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return isNaN(e)||isNaN(i)||isNaN(s)?(console.warn(`Invalid hex value "${t}", using default "0, 0, 0"`),"0, 0, 0"):`${e}, ${i}, ${s}`}static normalizeRgbValue(t){const e=t.split(",").map(r=>parseInt(r.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "0, 0, 0"`),"0, 0, 0";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n));return`${a}, ${o}, ${l}`}setValue(t){if(t===void 0){this.value="",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value=""),this.onChange&&this.onChange(""),this.props.detectChange&&this.props.detectChange("");return}if(typeof t=="string"){const e=f.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=this.rgbToHex(e)),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value=""),this.onChange&&this.onChange(""),this.props.detectChange&&this.props.detectChange("")}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}rgbToHex(t){const e=t.split(",").map(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return"#000000";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=h=>{const d=h.toString(16);return d.length===1?"0"+d:d};return`#${r(a)}${r(o)}${r(l)}`}draw(){const t=document.createElement("div");if(t.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const o=document.createElement("div");if(o.className="icon-container",this.props.icon){const l=document.createElement("span");l.className="input-icon",l.innerHTML=this.props.icon,o.appendChild(l)}if(this.props.title){const l=document.createElement("span");l.className="input-label",l.textContent=this.props.title,o.appendChild(l)}t.appendChild(o)}const e=document.createElement("div");e.className="color-input-wrapper";const i=o=>{const l=o.value.trim();if(!l)return e.classList.remove("error"),!0;const r=l.split(",").map(V=>parseInt(V.trim()));if(r.length!==3||r.some(isNaN))return e.classList.add("error"),!1;const[h,d,u]=r,L=h>=0&&h<=255&&d>=0&&d<=255&&u>=0&&u<=255;return L?e.classList.remove("error"):e.classList.add("error"),L},s=document.createElement("input");s.type="color",s.className="color-picker",s.value=this.value?this.rgbToHex(this.value):"#000000",this.colorInputEl=s;const n=document.createElement("div");n.className="color-preview",n.style.backgroundColor=this.value?`rgb(${this.value})`:"";const a=document.createElement("input");return a.type="text",a.className="color-text-input",a.value=this.value||"",a.placeholder="255, 255, 255",this.textInputEl=a,this.textInputEl.addEventListener("input",o=>{var r;let l=o.target.value.trim();this.textInputEl&&i(this.textInputEl)&&(this.value=l,(r=this.onChange)==null||r.call(this,l),this.colorInputEl&&(this.colorInputEl.value=this.rgbToHex(l)),n.style.backgroundColor=`rgb(${l})`)}),this.colorInputEl.addEventListener("input",o=>{var h,d;const l=o.target.value,r=this.hexToRgb(l);this.value=r,(h=this.onChange)==null||h.call(this,r),(d=this.detectChange)==null||d.call(this,r),this.textInputEl&&(this.textInputEl.value=r),n.style.backgroundColor=`rgb(${r})`,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",o=>{var h,d;const l=o.target.value,r=this.hexToRgb(l);this.value=r,(h=this.onChange)==null||h.call(this,r),(d=this.detectChange)==null||d.call(this,r),this.textInputEl&&(this.textInputEl.value=r),n.style.backgroundColor=`rgb(${r})`}),e.appendChild(s),e.appendChild(n),e.appendChild(a),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?f.normalizeRgbValue(this.value):"0, 0, 0"}isValidRgb(){if(!this.value)return!1;const t=this.value.split(",").map(n=>parseInt(n.trim()));if(t.length!==3||t.some(isNaN))return!1;const[e,i,s]=t;return e>=0&&e<=255&&i>=0&&i<=255&&s>=0&&s<=255}}class C extends p{constructor(t){super(t),this.inputType="number",this.inputElement=null,this.mobileValue=t.mobile,this.validateProps(),this.value=this.validateValue(this.value)}draw(){const t=document.createElement("div");if(t.className="number-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const s=document.createElement("div");if(s.className="icon-container",this.props.icon){const n=document.createElement("span");n.className="input-icon",n.innerHTML=this.props.icon,s.appendChild(n)}if(this.props.title){const n=document.createElement("span");n.className="input-label",n.textContent=this.props.title,s.appendChild(n)}t.appendChild(s)}const e=document.createElement("div");e.className="number-setting-input-container";const i=document.createElement("input");if(i.type="number",i.className="number-setting-input "+(this.props.inputClassName||""),i.value=String(this.value??""),i.placeholder=this.props.placeholder||"",this.props.minValue!==void 0&&(i.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(i.max=String(this.props.maxValue)),this.props.step!==void 0&&(i.step=String(this.props.step)),i.addEventListener("input",()=>{const s=this.props.minValue??Number.MIN_SAFE_INTEGER,n=this.props.maxValue??Number.MAX_SAFE_INTEGER;let a=Number(i.value);a<s&&(a=s),a>n&&(a=n),String(a)!==i.value&&(i.value=String(a)),this.setValue(a)}),i.addEventListener("blur",()=>{var n,a;const s=this.validateValue(Number(i.value));s!==Number(i.value)&&(i.value=String(s),this.setValue(s)),(a=(n=this.props).onBlur)==null||a.call(n)}),e.appendChild(i),this.props.suffix&&this.props.suffix!=="none"){const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s)}return t.appendChild(e),this.inputElement=i,t}setValue(t){const e=this.validateValue(t);super.setValue(e),this.inputElement&&this.inputElement.value!==String(e)&&(this.inputElement.value=String(e??""))}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}setMobileValue(t){this.mobileValue=t,t!==void 0&&this.setValue(t)}validateProps(){this.props.minValue!==void 0&&(this.props.default??0)<this.props.minValue&&console.warn(`Default value ${this.props.default} is less than minValue ${this.props.minValue}`),this.props.maxValue!==void 0&&(this.props.default??0)>this.props.maxValue&&console.warn(`Default value ${this.props.default} is greater than maxValue ${this.props.maxValue}`)}}const P=`
|
|
15
|
+
`,u.title=this.description,n.insertBefore(u,a)}}else{if(!h){const u=document.createElement("div");u.className="setting-group-description",u.textContent=this.description,o.insertBefore(u,o.firstChild)}d&&d.remove()}};if(e.onclick=l,e.onkeydown=h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),l())},Object.keys(this.settings).length>0){for(const h in this.settings)if(this.settings.hasOwnProperty(h)){const d=this.settings[h];d instanceof g&&d.setNestingLevel(this.nestingLevel+1),o.appendChild(d.draw())}}else{const h=document.createElement("div");h.className="setting-group-empty",h.textContent="No settings in this group",o.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,q.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}getJson(){return JSON.stringify(this.getValues(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};g.hiddenElements=new Set;let m=g;function A(c){return new m(c)}function z(c){return c}class M extends p{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const F="<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 f extends M{constructor(t){super({...t,icon:t.icon||F,title:t.title||"Color",default:t.default?f.normalizeColorValue(t.default):t.default}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("#")?f.hexToRgbStatic(t):f.normalizeRgbValue(t)}static hexToRgbStatic(t){if(t=t.replace("#",""),t.length===3&&(t=t.split("").map(n=>n+n).join("")),t.length!==6)return console.warn(`Invalid hex value "${t}", using default "0, 0, 0"`),"0, 0, 0";const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return isNaN(e)||isNaN(i)||isNaN(s)?(console.warn(`Invalid hex value "${t}", using default "0, 0, 0"`),"0, 0, 0"):`${e}, ${i}, ${s}`}static normalizeRgbValue(t){const e=t.split(",").map(r=>parseInt(r.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "0, 0, 0"`),"0, 0, 0";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n));return`${a}, ${o}, ${l}`}setValue(t){if(t===void 0){this.value="",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value=""),this.onChange&&this.onChange(""),this.props.detectChange&&this.props.detectChange("");return}if(typeof t=="string"){const e=f.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=this.rgbToHex(e)),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value=""),this.onChange&&this.onChange(""),this.props.detectChange&&this.props.detectChange("")}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}rgbToHex(t){const e=t.split(",").map(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return"#000000";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=h=>{const d=h.toString(16);return d.length===1?"0"+d:d};return`#${r(a)}${r(o)}${r(l)}`}draw(){const t=document.createElement("div");if(t.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const l=document.createElement("div");if(l.className="icon-container",this.props.icon){const r=document.createElement("span");r.className="input-icon",r.innerHTML=this.props.icon,l.appendChild(r)}if(this.props.title){const r=document.createElement("span");r.className="input-label",r.textContent=this.props.title,l.appendChild(r)}t.appendChild(l)}const e=document.createElement("div");e.className="color-input-wrapper";const i=l=>{const r=l.value.trim();if(!r)return e.classList.remove("error"),!0;const h=r.split(",").map(S=>parseInt(S.trim()));if(h.length!==3||h.some(isNaN))return e.classList.add("error"),!1;const[d,u,V]=h,w=d>=0&&d<=255&&u>=0&&u<=255&&V>=0&&V<=255;return w?e.classList.remove("error"):e.classList.add("error"),w},s=document.createElement("input");s.type="color",s.className="color-picker",s.value=this.value?this.rgbToHex(this.value):"#000000",this.colorInputEl=s;const n=document.createElement("div");n.className="color-preview";const a=this.value||"255, 255, 255";n.style.backgroundColor=`rgb(${a})`;const o=document.createElement("input");return o.type="text",o.className="color-text-input",o.value=this.value||"",o.placeholder="255, 255, 255",this.textInputEl=o,this.textInputEl.addEventListener("input",l=>{var h;let r=l.target.value.trim();this.textInputEl&&i(this.textInputEl)&&(this.value=r,(h=this.onChange)==null||h.call(this,r),this.colorInputEl&&(this.colorInputEl.value=this.rgbToHex(r)),n.style.backgroundColor=`rgb(${r})`)}),this.colorInputEl.addEventListener("input",l=>{var d,u;const r=l.target.value,h=this.hexToRgb(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=`rgb(${h})`,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",l=>{var d,u;const r=l.target.value,h=this.hexToRgb(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=`rgb(${h})`}),e.appendChild(s),e.appendChild(n),e.appendChild(o),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?f.normalizeRgbValue(this.value):"0, 0, 0"}isValidRgb(){if(!this.value)return!1;const t=this.value.split(",").map(n=>parseInt(n.trim()));if(t.length!==3||t.some(isNaN))return!1;const[e,i,s]=t;return e>=0&&e<=255&&i>=0&&i<=255&&s>=0&&s<=255}}class C extends p{constructor(t){super(t),this.inputType="number",this.inputElement=null,this.mobileValue=t.mobile,this.validateProps(),this.value=this.validateValue(this.value)}draw(){const t=document.createElement("div");if(t.className="number-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const s=document.createElement("div");if(s.className="icon-container",this.props.icon){const n=document.createElement("span");n.className="input-icon",n.innerHTML=this.props.icon,s.appendChild(n)}if(this.props.title){const n=document.createElement("span");n.className="input-label",n.textContent=this.props.title,s.appendChild(n)}t.appendChild(s)}const e=document.createElement("div");e.className="number-setting-input-container";const i=document.createElement("input");if(i.type="number",i.className="number-setting-input "+(this.props.inputClassName||""),i.value=String(this.value??""),i.placeholder=this.props.placeholder||"",this.props.minValue!==void 0&&(i.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(i.max=String(this.props.maxValue)),this.props.step!==void 0&&(i.step=String(this.props.step)),i.addEventListener("input",()=>{const s=this.props.minValue??Number.MIN_SAFE_INTEGER,n=this.props.maxValue??Number.MAX_SAFE_INTEGER;let a=Number(i.value);a<s&&(a=s),a>n&&(a=n),String(a)!==i.value&&(i.value=String(a)),this.setValue(a)}),i.addEventListener("blur",()=>{var n,a;const s=this.validateValue(Number(i.value));s!==Number(i.value)&&(i.value=String(s),this.setValue(s)),(a=(n=this.props).onBlur)==null||a.call(n)}),e.appendChild(i),this.props.suffix&&this.props.suffix!=="none"){const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s)}return t.appendChild(e),this.inputElement=i,t}setValue(t){const e=this.validateValue(t);super.setValue(e),this.inputElement&&this.inputElement.value!==String(e)&&(this.inputElement.value=String(e??""))}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}setMobileValue(t){this.mobileValue=t,t!==void 0&&this.setValue(t)}validateProps(){this.props.minValue!==void 0&&(this.props.default??0)<this.props.minValue&&console.warn(`Default value ${this.props.default} is less than minValue ${this.props.minValue}`),this.props.maxValue!==void 0&&(this.props.default??0)>this.props.maxValue&&console.warn(`Default value ${this.props.default} is greater than maxValue ${this.props.maxValue}`)}}const P=`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
17
17
|
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
18
18
|
<path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
19
|
-
</svg>`;class
|
|
19
|
+
</svg>`;class L extends C{constructor(t={}){const e={title:"Opacity",suffix:"%",minValue:0,maxValue:100,step:1,default:t.default??100,icon:P,...t};super(e),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}setMobileValue(t){this.mobileValue=t,t!==void 0&&this.setValue(t)}}const U=`
|
|
20
20
|
<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">
|
|
21
21
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
22
22
|
</svg>
|
|
23
|
-
`;class
|
|
23
|
+
`;class H extends p{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=U,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var n,a,o;const s=this._options[e];s&&(this.value=s.value,(n=this.onChange)==null||n.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((r,h)=>{h===e?r.classList.add("selected"):r.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=s=>{this.buttonEl&&this.selectOption(s,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class R extends p{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:`
|
|
24
24
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
25
25
|
<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"
|
|
26
26
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
<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"/>
|
|
52
52
|
</svg>`,K=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
53
53
|
<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"/>
|
|
54
|
-
</svg>`,
|
|
54
|
+
</svg>`,T=`
|
|
55
55
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
56
56
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
57
57
|
</svg>
|
|
@@ -64,16 +64,16 @@
|
|
|
64
64
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
|
|
65
65
|
<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"/>
|
|
66
66
|
</svg>
|
|
67
|
-
`;class
|
|
68
|
-
<span class="upload-icon">${
|
|
67
|
+
`;class $ extends p{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,this.props.delete===void 0&&(this.props.delete=!0),!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl)}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),s=e==null?void 0:e.querySelector(".preview-placeholder");t&&t!==""?(this.previewWrapper.classList.add("has-image"),this.previewEl.src=t,this.previewWrapper.style.display="block",this.previewEl.style.display="block",s&&s instanceof HTMLElement&&(s.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
|
|
68
|
+
<span class="upload-icon">${T}</span>
|
|
69
69
|
<span class="upload-label">Replace</span>
|
|
70
70
|
`)):(this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),i&&(i.innerHTML=`
|
|
71
|
-
<span class="upload-icon">${
|
|
71
|
+
<span class="upload-icon">${T}</span>
|
|
72
72
|
<span class="upload-label">Upload</span>
|
|
73
73
|
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",l=>{var r;l.relatedTarget&&t.contains(l.relatedTarget)||(r=this.onBlur)==null||r.call(this,this.value??"")},!0);const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const l=document.createElement("div");if(l.className="icon-title-container",this.props.icon){const r=this.createIcon(this.props.icon);l.appendChild(r)}if(this.props.title){const r=this.createLabel(this.props.title);l.appendChild(r)}t.appendChild(l)}const i=document.createElement("div");i.className="preview-button-container";const s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");if(n.className="preview-placeholder",n.innerHTML=Q,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview",this.props.delete){const l=document.createElement("button");l.className="delete-button",l.type="button",l.title="Delete image",l.innerHTML=Y,this.previewWrapper.appendChild(l),l.onclick=r=>{var h;r.stopPropagation(),this.value="",o.value="",this.updatePreviewState(null),(h=this.onChange)==null||h.call(this,"")}}this.previewWrapper.appendChild(this.previewEl);const a=document.createElement("button");a.className="upload-button",a.innerHTML=`
|
|
74
|
-
<span class="upload-icon">${
|
|
74
|
+
<span class="upload-icon">${T}</span>
|
|
75
75
|
<span class="upload-label">Upload</span>
|
|
76
|
-
`;const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(o),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=()=>{o.click()},o.onchange=async()=>{var r,h,d;const l=(r=o.files)==null?void 0:r[0];if(l)try{a.classList.add("loading"),a.disabled=!0;const u=new FormData,
|
|
76
|
+
`;const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(o),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=()=>{o.click()},o.onchange=async()=>{var r,h,d;const l=(r=o.files)==null?void 0:r[0];if(l)try{a.classList.add("loading"),a.disabled=!0;const u=new FormData,V=this.props.formFieldName||"file";u.append(V,l,l.name);const w=this.props.uploadUrl;if(!w)throw new Error("No uploadUrl provided to UploadSetting.");const S=this.props.requestMethod||"POST",G={...this.props.requestHeaders||{}},E=await(await fetch(w,{method:S,body:u,headers:G})).json();console.log("Upload response:",E);let v;if(this.props.parseResponse)v=this.props.parseResponse(E);else if(v=(h=E==null?void 0:E.data)==null?void 0:h.url,!v)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",v),this.value=v,this.updatePreviewState(v),(d=this.onChange)==null||d.call(this,v)}catch(u){console.error("Error uploading file:",u)}finally{a.classList.remove("loading"),a.disabled=!1,o.value=""}else o.value=""},t}}class tt extends C{constructor(t={}){const e={title:t.title||"Height",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||et,...t};super(e),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}setMobileValue(t){this.mobileValue=t,t!==void 0&&this.setValue(t)}}const et=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
77
77
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
78
78
|
</svg>`;class it extends C{constructor(t={}){super({title:t.title||"Width",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||st,...t}),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}}const st=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
79
79
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
101
101
|
<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"/>
|
|
102
102
|
</svg>
|
|
103
|
-
`;class pt extends m{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new C({title:"Size",icon:ut,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new f({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new
|
|
103
|
+
`;class pt extends m{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new C({title:"Size",icon:ut,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new f({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new L({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new C({title:"Radius",icon:dt,default:(t==null?void 0:t.radius)??12,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,s=this.settings.size.value??0;return`
|
|
104
104
|
border-color: ${t};
|
|
105
105
|
border-width: ${s}px;
|
|
106
106
|
border-radius: ${i}px;
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
118
118
|
<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"/>
|
|
119
119
|
</svg>
|
|
120
|
-
`;class Ct extends m{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new f({default:t.colorDefault??"0, 0, 30"}),opacity:new
|
|
120
|
+
`;class Ct extends m{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new f({default:t.colorDefault??"0, 0, 30"}),opacity:new L({default:t.colorOpacityDefault??100}),fontFamily:new H({title:"Font",icon:gt,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 H({title:"Weight",icon:mt,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 C({title:"Size",icon:ft,default:t.fontSizeDefault??12,suffix:"px",mobile:t.fontSizeMobileDefault}),align:new R({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",s=this.settings.fontWeight.value??"bold",n=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
|
|
121
121
|
color: ${t};
|
|
122
122
|
opacity: ${e/100};
|
|
123
123
|
font-family: ${i};
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
<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"/>
|
|
138
138
|
</svg>`,xt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
139
139
|
<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"/>
|
|
140
|
-
</svg>`;class Lt extends m{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new
|
|
140
|
+
</svg>`;class Lt extends m{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new $({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new L({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new f({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"}),opacityBG:new L({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,n,a,o]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);const l=document.createElement("div");return l.className="bgset-or-label",l.textContent="OR",e.appendChild(l),e.appendChild(a),e.appendChild(o),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"0, 0, 30",s=this.settings.opacityBG.value??100;return t?`
|
|
141
141
|
background-image: url("${t}");
|
|
142
142
|
background-size: cover;
|
|
143
143
|
background-position: center;
|
|
@@ -166,4 +166,4 @@
|
|
|
166
166
|
</svg>
|
|
167
167
|
</span>
|
|
168
168
|
<span class="add-label">Add Tab</span>
|
|
169
|
-
`,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())}))}}function kt(c){return c instanceof m}function Mt(c){return c instanceof p}exports.AlignSetting=
|
|
169
|
+
`,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())}))}}function kt(c){return c instanceof m}function Mt(c){return c instanceof p}exports.AlignSetting=R;exports.BackgroundSettingSet=Lt;exports.BorderSettingSet=pt;exports.ButtonSetting=J;exports.ColorSetting=f;exports.DimensionSetting=Z;exports.GapSetting=rt;exports.HeaderTypographySettingSet=Ct;exports.HeightSetting=tt;exports.MarginBottomSetting=ct;exports.MarginSettingGroup=vt;exports.NumberSetting=C;exports.OpacitySetting=L;exports.SelectApiSettings=at;exports.SelectSetting=H;exports.Setting=p;exports.SettingGroup=m;exports.StringSetting=M;exports.TabsContainerGroup=yt;exports.TabsSettings=b;exports.Toggle=ot;exports.UploadSetting=$;exports.WidthSetting=it;exports.asSettingGroupWithSettings=z;exports.createSettingGroup=A;exports.isSetting=Mt;exports.isSettingGroup=kt;exports.iterateSettings=x;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const A = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
-
let
|
|
2
|
+
let O = (c = 21) => {
|
|
3
3
|
let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
|
|
4
4
|
for (; c--; )
|
|
5
5
|
t += A[e[c] & 63];
|
|
@@ -42,7 +42,7 @@ function $(c) {
|
|
|
42
42
|
}
|
|
43
43
|
class p {
|
|
44
44
|
constructor(t = {}) {
|
|
45
|
-
this.props = t, this.id = t.id ||
|
|
45
|
+
this.props = t, this.id = t.id || O(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "";
|
|
46
46
|
}
|
|
47
47
|
destroy() {
|
|
48
48
|
throw new Error("Method not implemented.");
|
|
@@ -120,20 +120,20 @@ class p {
|
|
|
120
120
|
return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
|
-
function
|
|
123
|
+
function I(c) {
|
|
124
124
|
let t = 0, e = c.parentElement;
|
|
125
125
|
for (; e; )
|
|
126
126
|
e.classList.contains("setting-group") && e !== c && t++, e = e.parentElement;
|
|
127
127
|
return t;
|
|
128
128
|
}
|
|
129
|
-
function
|
|
129
|
+
function N(c, t) {
|
|
130
130
|
const e = Math.min(Math.max(t, 0), 5);
|
|
131
131
|
c.setAttribute("data-nesting-level", e.toString()), e > 0 ? (c.style.setProperty("--visual-indent", `${e * 2}px`), c.style.marginLeft = "var(--visual-indent)") : (c.style.removeProperty("--visual-indent"), c.style.marginLeft = "");
|
|
132
132
|
}
|
|
133
|
-
function
|
|
133
|
+
function B(c, t = 0) {
|
|
134
134
|
c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
|
|
135
135
|
const s = i, n = t + 1;
|
|
136
|
-
|
|
136
|
+
N(s, n), B(s, n);
|
|
137
137
|
});
|
|
138
138
|
}
|
|
139
139
|
const j = {
|
|
@@ -178,7 +178,7 @@ class G {
|
|
|
178
178
|
* Update nesting for a specific element
|
|
179
179
|
*/
|
|
180
180
|
updateElementNesting(t) {
|
|
181
|
-
const e =
|
|
181
|
+
const e = I(t);
|
|
182
182
|
this.applyNestingWithConfig(t, e);
|
|
183
183
|
}
|
|
184
184
|
/**
|
|
@@ -237,7 +237,7 @@ function L(c, t) {
|
|
|
237
237
|
const g = class g {
|
|
238
238
|
constructor(t) {
|
|
239
239
|
this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastValues = {}, this.lastChangeTime = 0, this.CHANGE_DEBOUNCE = 100, this.handleBlur = () => {
|
|
240
|
-
}, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.parentNestingLevel = 0, this.id = t.id ||
|
|
240
|
+
}, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.parentNestingLevel = 0, this.id = t.id || O(), 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.custom = t.custom ?? !1, this.hideCondition = t.hideCondition, this.onBlur = t.onBlur, this.parentNestingLevel = t.parentNestingLevel ?? 0, this.nestingLevel = this.parentNestingLevel, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel();
|
|
241
241
|
}
|
|
242
242
|
/**
|
|
243
243
|
* Propagate nesting level to child setting groups
|
|
@@ -264,14 +264,14 @@ const g = class g {
|
|
|
264
264
|
* Update nesting styles on the rendered element
|
|
265
265
|
*/
|
|
266
266
|
updateNestingStyles() {
|
|
267
|
-
this.elementRef && (
|
|
267
|
+
this.elementRef && (N(this.elementRef, this.nestingLevel), B(this.elementRef, this.nestingLevel));
|
|
268
268
|
}
|
|
269
269
|
/**
|
|
270
270
|
* Auto-detect nesting level from DOM position
|
|
271
271
|
*/
|
|
272
272
|
autoDetectNestingLevel() {
|
|
273
273
|
if (!this.elementRef) return;
|
|
274
|
-
const t =
|
|
274
|
+
const t = I(this.elementRef);
|
|
275
275
|
t !== this.nestingLevel && this.setNestingLevel(t);
|
|
276
276
|
}
|
|
277
277
|
static hide() {
|
|
@@ -463,7 +463,7 @@ const g = class g {
|
|
|
463
463
|
}
|
|
464
464
|
draw() {
|
|
465
465
|
const t = document.createElement("div");
|
|
466
|
-
t.className = "setting-group", t.id = `setting-group-${this.id}`, g.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"),
|
|
466
|
+
t.className = "setting-group", t.id = `setting-group-${this.id}`, g.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), N(t, this.nestingLevel);
|
|
467
467
|
const e = document.createElement("div");
|
|
468
468
|
e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
|
|
469
469
|
"aria-expanded",
|
|
@@ -595,7 +595,7 @@ function _(c) {
|
|
|
595
595
|
function pt(c) {
|
|
596
596
|
return c;
|
|
597
597
|
}
|
|
598
|
-
class
|
|
598
|
+
class S extends p {
|
|
599
599
|
constructor(t = {}) {
|
|
600
600
|
super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
|
|
601
601
|
}
|
|
@@ -616,7 +616,7 @@ class N extends p {
|
|
|
616
616
|
}
|
|
617
617
|
}
|
|
618
618
|
const D = "<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>";
|
|
619
|
-
class f extends
|
|
619
|
+
class f extends S {
|
|
620
620
|
constructor(t) {
|
|
621
621
|
super({
|
|
622
622
|
...t,
|
|
@@ -669,46 +669,48 @@ class f extends N {
|
|
|
669
669
|
draw() {
|
|
670
670
|
const t = document.createElement("div");
|
|
671
671
|
if (t.className = "color-setting-wrapper " + (this.props.wrapperClassName || ""), this.props.title || this.props.icon) {
|
|
672
|
-
const
|
|
673
|
-
if (
|
|
674
|
-
const
|
|
675
|
-
|
|
672
|
+
const l = document.createElement("div");
|
|
673
|
+
if (l.className = "icon-container", this.props.icon) {
|
|
674
|
+
const r = document.createElement("span");
|
|
675
|
+
r.className = "input-icon", r.innerHTML = this.props.icon, l.appendChild(r);
|
|
676
676
|
}
|
|
677
677
|
if (this.props.title) {
|
|
678
|
-
const
|
|
679
|
-
|
|
678
|
+
const r = document.createElement("span");
|
|
679
|
+
r.className = "input-label", r.textContent = this.props.title, l.appendChild(r);
|
|
680
680
|
}
|
|
681
|
-
t.appendChild(
|
|
681
|
+
t.appendChild(l);
|
|
682
682
|
}
|
|
683
683
|
const e = document.createElement("div");
|
|
684
684
|
e.className = "color-input-wrapper";
|
|
685
|
-
const i = (
|
|
686
|
-
const
|
|
687
|
-
if (!
|
|
685
|
+
const i = (l) => {
|
|
686
|
+
const r = l.value.trim();
|
|
687
|
+
if (!r)
|
|
688
688
|
return e.classList.remove("error"), !0;
|
|
689
|
-
const
|
|
690
|
-
if (
|
|
689
|
+
const h = r.split(",").map((M) => parseInt(M.trim()));
|
|
690
|
+
if (h.length !== 3 || h.some(isNaN))
|
|
691
691
|
return e.classList.add("error"), !1;
|
|
692
|
-
const [
|
|
693
|
-
return
|
|
692
|
+
const [d, u, x] = h, w = d >= 0 && d <= 255 && u >= 0 && u <= 255 && x >= 0 && x <= 255;
|
|
693
|
+
return w ? e.classList.remove("error") : e.classList.add("error"), w;
|
|
694
694
|
}, s = document.createElement("input");
|
|
695
695
|
s.type = "color", s.className = "color-picker", s.value = this.value ? this.rgbToHex(this.value) : "#000000", this.colorInputEl = s;
|
|
696
696
|
const n = document.createElement("div");
|
|
697
|
-
n.className = "color-preview"
|
|
698
|
-
const a =
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
697
|
+
n.className = "color-preview";
|
|
698
|
+
const a = this.value || "255, 255, 255";
|
|
699
|
+
n.style.backgroundColor = `rgb(${a})`;
|
|
700
|
+
const o = document.createElement("input");
|
|
701
|
+
return o.type = "text", o.className = "color-text-input", o.value = this.value || "", o.placeholder = "255, 255, 255", this.textInputEl = o, this.textInputEl.addEventListener("input", (l) => {
|
|
702
|
+
var h;
|
|
703
|
+
let r = l.target.value.trim();
|
|
704
|
+
this.textInputEl && i(this.textInputEl) && (this.value = r, (h = this.onChange) == null || h.call(this, r), this.colorInputEl && (this.colorInputEl.value = this.rgbToHex(r)), n.style.backgroundColor = `rgb(${r})`);
|
|
705
|
+
}), this.colorInputEl.addEventListener("input", (l) => {
|
|
706
|
+
var d, u;
|
|
707
|
+
const r = l.target.value, h = this.hexToRgb(r);
|
|
708
|
+
this.value = h, (d = this.onChange) == null || d.call(this, h), (u = this.detectChange) == null || u.call(this, h), this.textInputEl && (this.textInputEl.value = h), n.style.backgroundColor = `rgb(${h})`, e.classList.remove("error");
|
|
709
|
+
}), this.colorInputEl.addEventListener("change", (l) => {
|
|
710
|
+
var d, u;
|
|
711
|
+
const r = l.target.value, h = this.hexToRgb(r);
|
|
712
|
+
this.value = h, (d = this.onChange) == null || d.call(this, h), (u = this.detectChange) == null || u.call(this, h), this.textInputEl && (this.textInputEl.value = h), n.style.backgroundColor = `rgb(${h})`;
|
|
713
|
+
}), e.appendChild(s), e.appendChild(n), e.appendChild(o), t.appendChild(e), this.element = t, t;
|
|
712
714
|
}
|
|
713
715
|
getElement() {
|
|
714
716
|
return this.element;
|
|
@@ -816,7 +818,7 @@ const z = `
|
|
|
816
818
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
817
819
|
</svg>
|
|
818
820
|
`;
|
|
819
|
-
class
|
|
821
|
+
class H extends p {
|
|
820
822
|
constructor(t = {}) {
|
|
821
823
|
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) {
|
|
822
824
|
const e = this._options.findIndex((i) => i.value === this.value);
|
|
@@ -1082,7 +1084,7 @@ const P = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
1082
1084
|
<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"/>
|
|
1083
1085
|
</svg>`, U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1084
1086
|
<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"/>
|
|
1085
|
-
</svg>`,
|
|
1087
|
+
</svg>`, T = `
|
|
1086
1088
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
1087
1089
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
1088
1090
|
</svg>
|
|
@@ -1106,10 +1108,10 @@ class X extends p {
|
|
|
1106
1108
|
".preview-placeholder"
|
|
1107
1109
|
);
|
|
1108
1110
|
t && t !== "" ? (this.previewWrapper.classList.add("has-image"), this.previewEl.src = t, this.previewWrapper.style.display = "block", this.previewEl.style.display = "block", s && s instanceof HTMLElement && (s.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
|
|
1109
|
-
<span class="upload-icon">${
|
|
1111
|
+
<span class="upload-icon">${T}</span>
|
|
1110
1112
|
<span class="upload-label">Replace</span>
|
|
1111
1113
|
`)) : (this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewEl.style.display = "none", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "block"), e && e.classList.add("no-image"), i && (i.innerHTML = `
|
|
1112
|
-
<span class="upload-icon">${
|
|
1114
|
+
<span class="upload-icon">${T}</span>
|
|
1113
1115
|
<span class="upload-label">Upload</span>
|
|
1114
1116
|
`));
|
|
1115
1117
|
}
|
|
@@ -1151,7 +1153,7 @@ class X extends p {
|
|
|
1151
1153
|
this.previewWrapper.appendChild(this.previewEl);
|
|
1152
1154
|
const a = document.createElement("button");
|
|
1153
1155
|
a.className = "upload-button", a.innerHTML = `
|
|
1154
|
-
<span class="upload-icon">${
|
|
1156
|
+
<span class="upload-icon">${T}</span>
|
|
1155
1157
|
<span class="upload-label">Upload</span>
|
|
1156
1158
|
`;
|
|
1157
1159
|
const o = document.createElement("input");
|
|
@@ -1163,21 +1165,21 @@ class X extends p {
|
|
|
1163
1165
|
if (l)
|
|
1164
1166
|
try {
|
|
1165
1167
|
a.classList.add("loading"), a.disabled = !0;
|
|
1166
|
-
const u = new FormData(),
|
|
1167
|
-
u.append(
|
|
1168
|
-
const
|
|
1169
|
-
if (!
|
|
1168
|
+
const u = new FormData(), x = this.props.formFieldName || "file";
|
|
1169
|
+
u.append(x, l, l.name);
|
|
1170
|
+
const w = this.props.uploadUrl;
|
|
1171
|
+
if (!w)
|
|
1170
1172
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
1171
|
-
const
|
|
1172
|
-
method:
|
|
1173
|
+
const M = this.props.requestMethod || "POST", R = { ...this.props.requestHeaders || {} }, E = await (await fetch(w, {
|
|
1174
|
+
method: M,
|
|
1173
1175
|
body: u,
|
|
1174
1176
|
headers: R
|
|
1175
1177
|
})).json();
|
|
1176
|
-
console.log("Upload response:",
|
|
1178
|
+
console.log("Upload response:", E);
|
|
1177
1179
|
let v;
|
|
1178
1180
|
if (this.props.parseResponse)
|
|
1179
|
-
v = this.props.parseResponse(
|
|
1180
|
-
else if (v = (h =
|
|
1181
|
+
v = this.props.parseResponse(E);
|
|
1182
|
+
else if (v = (h = E == null ? void 0 : E.data) == null ? void 0 : h.url, !v)
|
|
1181
1183
|
throw new Error(
|
|
1182
1184
|
"No URL found in response. Provide a parseResponse if needed."
|
|
1183
1185
|
);
|
|
@@ -1818,7 +1820,7 @@ class Lt extends m {
|
|
|
1818
1820
|
opacity: new y({
|
|
1819
1821
|
default: t.colorOpacityDefault ?? 100
|
|
1820
1822
|
}),
|
|
1821
|
-
fontFamily: new
|
|
1823
|
+
fontFamily: new H({
|
|
1822
1824
|
title: "Font",
|
|
1823
1825
|
icon: nt,
|
|
1824
1826
|
default: t.fontFamilyDefault ?? "Satoshi",
|
|
@@ -1830,7 +1832,7 @@ class Lt extends m {
|
|
|
1830
1832
|
getOptions: t.fontFamilyGetOptions,
|
|
1831
1833
|
getOptionsAsync: t.fontFamilyGetOptionsAsync
|
|
1832
1834
|
}),
|
|
1833
|
-
fontWeight: new
|
|
1835
|
+
fontWeight: new H({
|
|
1834
1836
|
title: "Weight",
|
|
1835
1837
|
icon: at,
|
|
1836
1838
|
default: t.fontWeightDefault ?? "400",
|
|
@@ -2048,11 +2050,11 @@ class dt extends m {
|
|
|
2048
2050
|
hideCondition: i == null ? void 0 : i.hideCondition,
|
|
2049
2051
|
collapsed: i == null ? void 0 : i.collapsed,
|
|
2050
2052
|
settings: {
|
|
2051
|
-
name: new
|
|
2053
|
+
name: new S({
|
|
2052
2054
|
title: "Tab Name",
|
|
2053
2055
|
default: `Tab ${t + 1}`
|
|
2054
2056
|
}),
|
|
2055
|
-
content: new
|
|
2057
|
+
content: new S({
|
|
2056
2058
|
title: "Content",
|
|
2057
2059
|
default: ""
|
|
2058
2060
|
})
|
|
@@ -2175,10 +2177,10 @@ export {
|
|
|
2175
2177
|
C as NumberSetting,
|
|
2176
2178
|
y as OpacitySetting,
|
|
2177
2179
|
vt as SelectApiSettings,
|
|
2178
|
-
|
|
2180
|
+
H as SelectSetting,
|
|
2179
2181
|
p as Setting,
|
|
2180
2182
|
m as SettingGroup,
|
|
2181
|
-
|
|
2183
|
+
S as StringSetting,
|
|
2182
2184
|
yt as TabsContainerGroup,
|
|
2183
2185
|
b as TabsSettings,
|
|
2184
2186
|
bt as Toggle,
|
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";:root{--sg-spacing-0: 16px;--sg-spacing-1: 12px;--sg-spacing-2: 8px;--sg-spacing-3: 6px;--sg-border-0: #eaecf0;--sg-border-1: #d0d5dd;--sg-border-2: #e5e7eb;--sg-border-3: #f2f4f7;--sg-bg-0: #fff;--sg-bg-1: #fafbfc;--sg-bg-2: #f8f9fa;--sg-bg-3: #f5f6f8;--sg-shadow-0: 0px 1px 3px rgba(16, 24, 40, .1), 0px 1px 2px rgba(16, 24, 40, .06);--sg-shadow-1: 0px 1px 2px rgba(16, 24, 40, .05);--sg-shadow-2: 0px 1px 1px rgba(16, 24, 40, .04);--sg-shadow-3: none}.setting-group{display:flex;flex-direction:column;width:100%;gap:8px;border-radius:8px;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative}.setting-group[data-nesting-level="0"]{padding:var(--sg-spacing-0);border:1px solid var(--sg-border-0);background:var(--sg-bg-0);box-shadow:var(--sg-shadow-0);border-radius:8px}.setting-group[data-nesting-level="1"]{padding:var(--sg-spacing-1);border:1px solid var(--sg-border-1);background:var(--sg-bg-1);box-shadow:var(--sg-shadow-1);border-radius:6px}.setting-group[data-nesting-level="2"]{padding:var(--sg-spacing-2);border:1px solid var(--sg-border-2);background:var(--sg-bg-2);box-shadow:var(--sg-shadow-2);border-radius:4px}.setting-group[data-nesting-level="3"],.setting-group[data-nesting-level="4"],.setting-group[data-nesting-level="5"]{padding:var(--sg-spacing-3);border:1px solid var(--sg-border-3);background:var(--sg-bg-3);box-shadow:var(--sg-shadow-3);border-radius:4px}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group[data-nesting-level="0"] .setting-group-content{padding:0 8px 8px;gap:8px}.setting-group[data-nesting-level="1"] .setting-group-content{padding:0 8px 8px;gap:6px}.setting-group[data-nesting-level="2"] .setting-group-content{padding:0 8px 8px;gap:4px}.setting-group[data-nesting-level="3"] .setting-group-content,.setting-group[data-nesting-level="4"] .setting-group-content,.setting-group[data-nesting-level="5"] .setting-group-content{padding:0 6px 6px;gap:3px}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title:hover{background-color:#00000005}.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[data-nesting-level="1"] .setting-group-title h3{font-size:13px;font-weight:500}.setting-group[data-nesting-level="2"] .setting-group-title h3{font-size:12px;font-weight:500}.setting-group[data-nesting-level="3"] .setting-group-title h3,.setting-group[data-nesting-level="4"] .setting-group-title h3,.setting-group[data-nesting-level="5"] .setting-group-title h3{font-size:11px;font-weight:500}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;opacity:1;overflow:visible}.setting-group-content.collapsed{opacity:0;margin:0;padding:0;pointer-events:none;display:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-top:4px;background:#f8f8f8;border-radius:8px;width:268px;position:relative;margin-bottom: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;margin-bottom:8px;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{color:#344054;font-family:Satoshi;font-size:14px;font-weight:700;line-height:20px}.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>*: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-300, #d0d5dd);box-shadow:0 1px 3px #1018281a;transform:translateY(-1px)}.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);padding:14px}.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:#344054;font-family:Satoshi;font-size:14px;font-weight:700;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;color:var(--Gray-500, #667085)}.setting-group-title.collapsed-view:hover .setting-group-arrow{background-color:var(--Gray-100, #f2f4f7);color:var(--Gray-600, #475467)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;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-title.collapsed-view:hover .info-marker{color:var(--Gray-500, #667085)}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px;line-height:1.4}@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);border-radius:4px 0 0 4px}.setting-group.custom-container{border:none;box-shadow:none;margin:4px 0;padding:0;background:transparent}.setting-group.custom-container>.setting-group-title{display:none}.setting-group.custom-container .setting-group-content{padding:0}.custom_class{border:0!important;box-shadow:none!important;margin:4px 0!important}.custom_class>.setting-group-title{display:none!important}.custom_class .setting-group-content{padding:0!important}.setting-group-title:focus-visible{outline:2px solid #02CC59;outline-offset:2px}:root{--color-text: #1d2939;--color-text-secondary: #667085;--color-text-muted: #98a2b3;--color-border: #e4e7ec;--color-border-hover: #d0d5dd;--color-bg: #fff;--color-bg-hover: #f9fafb;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease}.icon-container{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);flex-shrink:0;width:18px;height:18px;transition:color var(--transition-fast)}.input-label{color:var(--color-text-secondary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:1.4;transition:color var(--transition-fast)}.input-container{display:inline-flex;align-items:center;position:relative;width:100%}.input-wrapper{position:relative;width:100%;min-width:0}.base-input{width:100%;height:36px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-weight:400;line-height:1.4;transition:all var(--transition-fast);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input:hover{border-color:var(--color-border-hover);background:var(--color-bg-hover)}.base-input:focus{border-color:var(--color-border-focus);background:var(--color-bg-focus)}.base-input:disabled{background:#f9fafb;color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.with-suffix{padding-right:44px}.input-suffix{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.with-prefix{padding-left:44px}.input-prefix{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.setting-item{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md);align-items:center;min-height:40px;padding:var(--space-sm) 0}.setting-item.full-width{grid-template-columns:1fr}.setting-item.stacked{grid-template-columns:1fr;gap:var(--space-xs);align-items:stretch}.setting-item-label{display:flex;align-items:center;gap:var(--space-xs);min-width:0}.setting-item-control{min-width:0;max-width:140px;justify-self:end}.setting-item.stacked .setting-item-control{max-width:none;justify-self:stretch}.input-error{border-color:#f04438!important;background:#fff4f4!important;color:#f04438!important}.input-error:focus{border-color:#f04438!important;box-shadow:0 0 0 4px #f044381a!important}.error-message{color:#f04438;font-size:var(--font-size-xs);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.input-success{border-color:#02cc59!important;background:#f0fdf4!important}.input-success:focus{border-color:#02cc59!important}.input-loading{position:relative;color:var(--color-text-muted);background:#f9fafb;pointer-events:none}.input-loading:after{content:"";position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid var(--color-border-focus);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.setting-group .setting-group .setting-item{min-height:36px;padding:6px 0}.setting-group .setting-group .base-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .input-label{font-size:11px}.setting-group .setting-group .setting-group .setting-item{min-height:32px;padding:4px 0}.setting-group .setting-group .setting-group .base-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .input-label{font-size:10px}@media (max-width: 480px){.setting-item{grid-template-columns:1fr;gap:var(--space-xs)}.setting-item-control{max-width:none;justify-self:stretch}.base-input{font-size:var(--font-size-md)}}@media (prefers-color-scheme: dark){:root{--color-text: #f9fafb;--color-text-secondary: #d0d5dd;--color-text-muted: #667085;--color-border: #344054;--color-border-hover: #475467;--color-bg: #1d2939;--color-bg-hover: #344054}}.base-input:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.compact .setting-item{min-height:32px;padding:4px 0}.compact .base-input{height:32px;padding:6px 10px;font-size:13px}.compact .input-label{font-size:11px}@media (prefers-contrast: high){.base-input{border-width:2px}.base-input:focus{border-width:3px}}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.string-setting-input{min-width:114px;max-width:122px;width:100%;max-height:33px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-input-wrapper{position:relative;width:100%;max-width:140px;justify-self:end}.color-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.color-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid rgba(0,0,0,.1);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none}.color-preview:hover{transform:translateY(-50%) scale(1.05)}.color-preview:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;z-index:-1}.setting-group .setting-group .color-setting-wrapper{min-height:36px}.setting-group .setting-group .color-input-wrapper{max-width:120px}.setting-group .setting-group .color-text-input{height:32px;padding:6px 10px 6px 32px;font-size:13px}.setting-group .setting-group .color-preview,.setting-group .setting-group .color-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .setting-group .color-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-text-input{height:28px;padding:4px 8px 4px 28px;font-size:12px}.setting-group .setting-group .setting-group .color-preview,.setting-group .setting-group .setting-group .color-picker{left:4px;width:16px;height:16px}.color-input-wrapper.error .color-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-input-wrapper.error .color-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.color-input-wrapper.disabled .color-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker:focus-visible+.color-preview{outline-offset:2px}.number-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.number-setting-input-container{position:relative;width:100%;max-width:140px;justify-self:end}.number-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.number-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.number-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.number-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.number-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.suffix-label{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.number-setting-input::-webkit-inner-spin-button,.number-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .number-setting-wrapper{min-height:36px}.setting-group .setting-group .number-setting-input-container{max-width:120px}.setting-group .setting-group .number-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .suffix-label{right:10px;font-size:11px}.setting-group .setting-group .setting-group .number-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .number-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .number-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .suffix-label{right:8px;font-size:10px}.number-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.number-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.number-setting-input:focus-visible{outline-offset:2px}.opacity-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.icon-container{display:flex;align-items:center;gap:var(--space-sm, 8px)}.input-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted, #98a2b3)}.input-icon svg{width:16px;height:16px}.input-label{color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.opacity-setting-input-container{position:relative;width:100%;max-width:140px;justify-self:end}.opacity-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.opacity-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.opacity-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.opacity-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.opacity-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.opacity-suffix{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.opacity-setting-input::-webkit-inner-spin-button,.opacity-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.opacity-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .opacity-setting-input-container{max-width:120px}.setting-group .setting-group .opacity-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .opacity-suffix{right:10px;font-size:11px}.setting-group .setting-group .setting-group .opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .opacity-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .opacity-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .opacity-suffix{right:8px;font-size:10px}.opacity-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.opacity-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.opacity-setting-input:focus-visible{outline-offset:2px}.select-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;position:relative;width:100%;min-height:40px}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:var(--color-text-secondary, #667085);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm, 12px);font-style:normal;font-weight:400;line-height:1.4}.select-button{place-self:end;max-width:140px;width:100%;height:36px;min-height:36px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 var(--space-md, 12px);border-radius:var(--radius-lg, 8px);border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:var(--font-size-md, 14px);font-weight:400;color:var(--color-text, #1d2939);position:relative;transition:all var(--transition-fast, .15s ease);box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.select-button:hover{border-color:var(--color-border-hover, #d0d5dd);box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-button .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.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 #02CC59;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:#b6dfc8;color:#344054;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}.setting-group .setting-group .select-container{min-height:36px}.setting-group .setting-group .select-button{height:32px;min-height:32px;max-width:120px;font-size:13px;padding:0 32px 0 10px}.setting-group .setting-group .select-container .icon-container .input-label{font-size:11px}.setting-group .setting-group .setting-group .select-container{min-height:32px}.setting-group .setting-group .setting-group .select-button{height:28px;min-height:28px;max-width:100px;font-size:12px;padding:0 28px 0 8px}.setting-group .setting-group .setting-group .select-container .icon-container .input-label{font-size:10px}.setting-group .setting-group .svg-container,.setting-group .setting-group .setting-group .svg-container{right:8px;width:16px;height:16px}.setting-group .setting-group .svg-container .svg-select,.setting-group .setting-group .setting-group .svg-container .svg-select{width:12px;height:12px}.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}.no-image .preview-placeholder{display:none!important}.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;color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:normal;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:#b6dfc8;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:normal;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-api-button .select-value{margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.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 #02CC59;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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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:#b6dfc8;color:#344054;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:#02cc59;background:#fff;position:relative}.select-api-radio:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#02cc59;border-radius:50%}.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 #b6dfc8}@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;justify-content:space-between;align-items:center;padding-left:3px;padding-right:3px}.toggle-label{color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;padding:2px}.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:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#02cc59}input:focus+.toggle-slider{box-shadow:0 0 1px #02cc59}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}.gap-settings-container{display:flex;flex-direction:column;gap:12px;width:100%}.gap-settings-title{font-size:14px;font-weight:500;color:#344054;margin-bottom:4px}.gap-input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%}.gap-label-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.gap-setting-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:#667085}.gap-setting-icon svg{width:16px;height:16px}.gap-input-label{font-size:13px;color:#667085}.gap-setting-inner-wrapper{position:relative;display:grid;grid-template-columns:1fr;place-content:center;align-items:center;width:120px}.gap-setting-input{width:100%;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-wrapper{position:relative}.suffix-label{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}.gap-setting-input::-webkit-outer-spin-button,.gap-setting-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-setting-input[type=number]{-moz-appearance:textfield}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:visible;position:relative;z-index:1}.tabs-settings-container.main-tabs{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px #1018280d}.tabs-title{padding:12px 16px;border-bottom:1px solid #e5e7eb}.tabs-title.main-title{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0}.tabs-title h3{margin:0;color:#111827;font-family:Satoshi;font-size:14px;font-weight:500;line-height:20px}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0;align-self:stretch;background:#f1f3f2;position:relative;z-index:1;border-radius:400px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px}.tab-button{display:flex;padding:4px 12px;justify-content:center;align-items:center;background-color:transparent;gap:8px;flex:1 0 0;border-radius:400px;color:#000000b3;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border:1px solid transparent;box-shadow:0 0 #10182800;position:relative;z-index:1}.tab-button:active{box-shadow:0 1px 2px -1px #10182805}.tab-button.active{color:#000;font-weight:700;border-radius:400px;background:#fff;box-shadow:0 4px 8px -2px #1018280a}.tab-button.active:active{box-shadow:0 2px 4px -1px #1018280a}.tab-content{position:relative;overflow:visible;width:100%;z-index:1;margin-top:8px}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:visible;z-index:1}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:visible;z-index:1}.tab-panel .select-api-container{overflow:visible;position:relative;z-index:9999}.tab-panel .select-api-dropdown{position:absolute;z-index:10000}.tab-panel .select-api-container *{z-index:9999}.tab-panel .select-api-dropdown *{z-index:10000}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header{display:none}.margin-bottom-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-bottom-wrapper .setting-icon svg{width:18px;height:19px}.margin-bottom-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-bottom-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}.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}: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";:root{--sg-spacing-0: 16px;--sg-spacing-1: 12px;--sg-spacing-2: 8px;--sg-spacing-3: 6px;--sg-border-0: #eaecf0;--sg-border-1: #d0d5dd;--sg-border-2: #e5e7eb;--sg-border-3: #f2f4f7;--sg-bg-0: #fff;--sg-bg-1: #fafbfc;--sg-bg-2: #f8f9fa;--sg-bg-3: #f5f6f8;--sg-shadow-0: 0px 1px 3px rgba(16, 24, 40, .1), 0px 1px 2px rgba(16, 24, 40, .06);--sg-shadow-1: 0px 1px 2px rgba(16, 24, 40, .05);--sg-shadow-2: 0px 1px 1px rgba(16, 24, 40, .04);--sg-shadow-3: none}.setting-group{display:flex;flex-direction:column;width:100%;gap:8px;border-radius:8px;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative}.setting-group[data-nesting-level="0"]{padding:var(--sg-spacing-0);border:1px solid var(--sg-border-0);background:var(--sg-bg-0);box-shadow:var(--sg-shadow-0);border-radius:8px}.setting-group[data-nesting-level="1"]{padding:var(--sg-spacing-1);border:1px solid var(--sg-border-1);background:var(--sg-bg-1);box-shadow:var(--sg-shadow-1);border-radius:6px}.setting-group[data-nesting-level="2"]{padding:var(--sg-spacing-2);border:1px solid var(--sg-border-2);background:var(--sg-bg-2);box-shadow:var(--sg-shadow-2);border-radius:4px}.setting-group[data-nesting-level="3"],.setting-group[data-nesting-level="4"],.setting-group[data-nesting-level="5"]{padding:var(--sg-spacing-3);border:1px solid var(--sg-border-3);background:var(--sg-bg-3);box-shadow:var(--sg-shadow-3);border-radius:4px}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group[data-nesting-level="0"] .setting-group-content{padding:0 8px 8px;gap:8px}.setting-group[data-nesting-level="1"] .setting-group-content{padding:0 8px 8px;gap:6px}.setting-group[data-nesting-level="2"] .setting-group-content{padding:0 8px 8px;gap:4px}.setting-group[data-nesting-level="3"] .setting-group-content,.setting-group[data-nesting-level="4"] .setting-group-content,.setting-group[data-nesting-level="5"] .setting-group-content{padding:0 6px 6px;gap:3px}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title:hover{background-color:#00000005}.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[data-nesting-level="1"] .setting-group-title h3{font-size:13px;font-weight:500}.setting-group[data-nesting-level="2"] .setting-group-title h3{font-size:12px;font-weight:500}.setting-group[data-nesting-level="3"] .setting-group-title h3,.setting-group[data-nesting-level="4"] .setting-group-title h3,.setting-group[data-nesting-level="5"] .setting-group-title h3{font-size:11px;font-weight:500}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;opacity:1;overflow:visible}.setting-group-content.collapsed{opacity:0;margin:0;padding:0;pointer-events:none;display:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-top:4px;background:#f8f8f8;border-radius:8px;width:268px;position:relative;margin-bottom: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;margin-bottom:8px;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{color:#344054;font-family:Satoshi;font-size:14px;font-weight:700;line-height:20px}.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>*: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-300, #d0d5dd);box-shadow:0 1px 3px #1018281a;transform:translateY(-1px)}.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);padding:14px}.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:#344054;font-family:Satoshi;font-size:14px;font-weight:700;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;color:var(--Gray-500, #667085)}.setting-group-title.collapsed-view:hover .setting-group-arrow{background-color:var(--Gray-100, #f2f4f7);color:var(--Gray-600, #475467)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;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-title.collapsed-view:hover .info-marker{color:var(--Gray-500, #667085)}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px;line-height:1.4}@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);border-radius:4px 0 0 4px}.setting-group.custom-container{border:none;box-shadow:none;margin:4px 0;padding:0;background:transparent}.setting-group.custom-container>.setting-group-title{display:none}.setting-group.custom-container .setting-group-content{padding:0}.custom_class{border:0!important;box-shadow:none!important;margin:4px 0!important}.custom_class>.setting-group-title{display:none!important}.custom_class .setting-group-content{padding:0!important}.setting-group-title:focus-visible{outline:2px solid #02CC59;outline-offset:2px}:root{--color-text: #1d2939;--color-text-secondary: #667085;--color-text-muted: #98a2b3;--color-border: #e4e7ec;--color-border-hover: #d0d5dd;--color-bg: #fff;--color-bg-hover: #f9fafb;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease}.icon-container{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);flex-shrink:0;width:18px;height:18px;transition:color var(--transition-fast)}.input-label{color:var(--color-text-secondary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:1.4;transition:color var(--transition-fast)}.input-container{display:inline-flex;align-items:center;position:relative;width:100%}.input-wrapper{position:relative;width:100%;min-width:0}.base-input{width:100%;height:36px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-weight:400;line-height:1.4;transition:all var(--transition-fast);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input:hover{border-color:var(--color-border-hover);background:var(--color-bg-hover)}.base-input:focus{border-color:var(--color-border-focus);background:var(--color-bg-focus)}.base-input:disabled{background:#f9fafb;color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.with-suffix{padding-right:44px}.input-suffix{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.with-prefix{padding-left:44px}.input-prefix{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.setting-item{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md);align-items:center;min-height:40px;padding:var(--space-sm) 0}.setting-item.full-width{grid-template-columns:1fr}.setting-item.stacked{grid-template-columns:1fr;gap:var(--space-xs);align-items:stretch}.setting-item-label{display:flex;align-items:center;gap:var(--space-xs);min-width:0}.setting-item-control{min-width:0;max-width:140px;justify-self:end}.setting-item.stacked .setting-item-control{max-width:none;justify-self:stretch}.input-error{border-color:#f04438!important;background:#fff4f4!important;color:#f04438!important}.input-error:focus{border-color:#f04438!important;box-shadow:0 0 0 4px #f044381a!important}.error-message{color:#f04438;font-size:var(--font-size-xs);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.input-success{border-color:#02cc59!important;background:#f0fdf4!important}.input-success:focus{border-color:#02cc59!important}.input-loading{position:relative;color:var(--color-text-muted);background:#f9fafb;pointer-events:none}.input-loading:after{content:"";position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid var(--color-border-focus);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.setting-group .setting-group .setting-item{min-height:36px;padding:6px 0}.setting-group .setting-group .base-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .input-label{font-size:11px}.setting-group .setting-group .setting-group .setting-item{min-height:32px;padding:4px 0}.setting-group .setting-group .setting-group .base-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .input-label{font-size:10px}@media (max-width: 480px){.setting-item{grid-template-columns:1fr;gap:var(--space-xs)}.setting-item-control{max-width:none;justify-self:stretch}.base-input{font-size:var(--font-size-md)}}@media (prefers-color-scheme: dark){:root{--color-text: #f9fafb;--color-text-secondary: #d0d5dd;--color-text-muted: #667085;--color-border: #344054;--color-border-hover: #475467;--color-bg: #1d2939;--color-bg-hover: #344054}}.base-input:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.compact .setting-item{min-height:32px;padding:4px 0}.compact .base-input{height:32px;padding:6px 10px;font-size:13px}.compact .input-label{font-size:11px}@media (prefers-contrast: high){.base-input{border-width:2px}.base-input:focus{border-width:3px}}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.string-setting-input{min-width:114px;max-width:122px;width:100%;max-height:33px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-input-wrapper{position:relative;width:100%;max-width:140px;justify-self:end}.color-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.color-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff;cursor:pointer}.color-preview:hover{transform:translateY(-50%) scale(1.05)}.setting-group .setting-group .color-setting-wrapper{min-height:36px}.setting-group .setting-group .color-input-wrapper{max-width:120px}.setting-group .setting-group .color-text-input{height:32px;padding:6px 10px 6px 32px;font-size:13px}.setting-group .setting-group .color-preview,.setting-group .setting-group .color-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .setting-group .color-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-text-input{height:28px;padding:4px 8px 4px 28px;font-size:12px}.setting-group .setting-group .setting-group .color-preview,.setting-group .setting-group .setting-group .color-picker{left:4px;width:16px;height:16px}.color-input-wrapper.error .color-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-input-wrapper.error .color-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.color-input-wrapper.disabled .color-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker:focus-visible+.color-preview{outline-offset:2px}.number-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.number-setting-input-container{position:relative;width:100%;max-width:140px;justify-self:end}.number-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.number-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.number-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.number-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.number-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.suffix-label{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.number-setting-input::-webkit-inner-spin-button,.number-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .number-setting-wrapper{min-height:36px}.setting-group .setting-group .number-setting-input-container{max-width:120px}.setting-group .setting-group .number-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .suffix-label{right:10px;font-size:11px}.setting-group .setting-group .setting-group .number-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .number-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .number-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .suffix-label{right:8px;font-size:10px}.number-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.number-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.number-setting-input:focus-visible{outline-offset:2px}.opacity-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.icon-container{display:flex;align-items:center;gap:var(--space-sm, 8px)}.input-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted, #98a2b3)}.input-icon svg{width:16px;height:16px}.input-label{color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.opacity-setting-input-container{position:relative;width:100%;max-width:140px;justify-self:end}.opacity-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.opacity-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.opacity-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.opacity-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.opacity-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.opacity-suffix{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.opacity-setting-input::-webkit-inner-spin-button,.opacity-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.opacity-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .opacity-setting-input-container{max-width:120px}.setting-group .setting-group .opacity-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .opacity-suffix{right:10px;font-size:11px}.setting-group .setting-group .setting-group .opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .opacity-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .opacity-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .opacity-suffix{right:8px;font-size:10px}.opacity-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.opacity-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.opacity-setting-input:focus-visible{outline-offset:2px}.select-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;position:relative;width:100%;min-height:40px}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:var(--color-text-secondary, #667085);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm, 12px);font-style:normal;font-weight:400;line-height:1.4}.select-button{place-self:end;max-width:140px;width:100%;height:36px;min-height:36px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 var(--space-md, 12px);border-radius:var(--radius-lg, 8px);border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:var(--font-size-md, 14px);font-weight:400;color:var(--color-text, #1d2939);position:relative;transition:all var(--transition-fast, .15s ease);box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.select-button:hover{border-color:var(--color-border-hover, #d0d5dd);box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none}.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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-button .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.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 #02CC59;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:#b6dfc8;color:#344054;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}.setting-group .setting-group .select-container{min-height:36px}.setting-group .setting-group .select-button{height:32px;min-height:32px;max-width:120px;font-size:13px;padding:0 32px 0 10px}.setting-group .setting-group .select-container .icon-container .input-label{font-size:11px}.setting-group .setting-group .setting-group .select-container{min-height:32px}.setting-group .setting-group .setting-group .select-button{height:28px;min-height:28px;max-width:100px;font-size:12px;padding:0 28px 0 8px}.setting-group .setting-group .setting-group .select-container .icon-container .input-label{font-size:10px}.setting-group .setting-group .svg-container,.setting-group .setting-group .setting-group .svg-container{right:8px;width:16px;height:16px}.setting-group .setting-group .svg-container .svg-select,.setting-group .setting-group .setting-group .svg-container .svg-select{width:12px;height:12px}.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}.no-image .preview-placeholder{display:none!important}.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;color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:normal;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:#b6dfc8;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:normal;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-api-button .select-value{margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.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 #02CC59;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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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:#b6dfc8;color:#344054;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:#02cc59;background:#fff;position:relative}.select-api-radio:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#02cc59;border-radius:50%}.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 #b6dfc8}@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;justify-content:space-between;align-items:center;padding-left:3px;padding-right:3px}.toggle-label{color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;padding:2px}.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:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#02cc59}input:focus+.toggle-slider{box-shadow:0 0 1px #02cc59}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}.gap-settings-container{display:flex;flex-direction:column;gap:12px;width:100%}.gap-settings-title{font-size:14px;font-weight:500;color:#344054;margin-bottom:4px}.gap-input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%}.gap-label-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.gap-setting-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:#667085}.gap-setting-icon svg{width:16px;height:16px}.gap-input-label{font-size:13px;color:#667085}.gap-setting-inner-wrapper{position:relative;display:grid;grid-template-columns:1fr;place-content:center;align-items:center;width:120px}.gap-setting-input{width:100%;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-wrapper{position:relative}.suffix-label{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}.gap-setting-input::-webkit-outer-spin-button,.gap-setting-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-setting-input[type=number]{-moz-appearance:textfield}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:visible;position:relative;z-index:1}.tabs-settings-container.main-tabs{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px #1018280d}.tabs-title{padding:12px 16px;border-bottom:1px solid #e5e7eb}.tabs-title.main-title{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0}.tabs-title h3{margin:0;color:#111827;font-family:Satoshi;font-size:14px;font-weight:500;line-height:20px}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0;align-self:stretch;background:#f1f3f2;position:relative;z-index:1;border-radius:400px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px}.tab-button{display:flex;padding:4px 12px;justify-content:center;align-items:center;background-color:transparent;gap:8px;flex:1 0 0;border-radius:400px;color:#000000b3;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border:1px solid transparent;box-shadow:0 0 #10182800;position:relative;z-index:1}.tab-button:active{box-shadow:0 1px 2px -1px #10182805}.tab-button.active{color:#000;font-weight:700;border-radius:400px;background:#fff;box-shadow:0 4px 8px -2px #1018280a}.tab-button.active:active{box-shadow:0 2px 4px -1px #1018280a}.tab-content{position:relative;overflow:visible;width:100%;z-index:1;margin-top:8px}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:visible;z-index:1}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:visible;z-index:1}.tab-panel .select-api-container{overflow:visible;position:relative;z-index:9999}.tab-panel .select-api-dropdown{position:absolute;z-index:10000}.tab-panel .select-api-container *{z-index:9999}.tab-panel .select-api-dropdown *{z-index:10000}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header{display:none}.margin-bottom-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-bottom-wrapper .setting-icon svg{width:18px;height:19px}.margin-bottom-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-bottom-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}.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}: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/package.json
CHANGED