builder-settings-types 0.0.196 → 0.0.197
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/builder-settings-types.cjs.js +11 -11
- package/dist/builder-settings-types.es.js +68 -44
- package/dist/index.css +1 -1
- package/dist/index.d.ts +9 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=P[e[c]&63];return t};function y(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]=y(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=y(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function z(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||I(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||""}static SetUploadUrl(t){window.DefaultUploadUrl=t,p.DefaultUploadUrl=t}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=y(this.props),i=new t(e);return i.value=y(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||z(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 M(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.removeProperty("--visual-indent"),c.style.marginLeft="")}function H(c,t=0){c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;M(s,n),H(s,n)})}const U={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class D{constructor(t={}){this.observedElements=new Set,this.config={...U,...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`)}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 W=new D;function x(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const m=class m{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||I(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.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 m&&(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&&(M(this.elementRef,this.nestingLevel),H(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(),x(this.settings,(i,s)=>{var n;if(s instanceof m)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 m&&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 m||n instanceof p)&&typeof n.setValue=="function"&&n.setValue(s)}),setTimeout(()=>{this.forceChildUIRefresh()},0);const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}forceChildUIRefresh(){Object.entries(this.settings).forEach(([t,e])=>{try{if(e instanceof m){const i=e.getValues();e.setValue(i)}else if(typeof e.setValue=="function"){const i=e.value;i!==void 0&&e.setValue(i)}}catch(i){console.warn(`Error refreshing UI for setting ${t}:`,i)}})}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 m?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof m?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 m?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 m?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 m)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 m)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 m?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}`,m.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"),M(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 z="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=z[e[c]&63];return t};function y(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]=y(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=y(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function P(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||I(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||""}static SetUploadUrl(t){window.DefaultUploadUrl=t,p.DefaultUploadUrl=t}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=y(this.props),i=new t(e);return i.value=y(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||P(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 M(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.removeProperty("--visual-indent"),c.style.marginLeft="")}function H(c,t=0){c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach(i=>{const s=i,n=t+1;M(s,n),H(s,n)})}const D={maxLevel:5,spacingMultiplier:1,visualIndentMultiplier:2,enableAutoDetection:!0};class U{constructor(t={}){this.observedElements=new Set,this.config={...D,...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`)}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 W=new U;function L(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const m=class m{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||I(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.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;L(this.settings,(e,i)=>{i instanceof m&&(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&&(M(this.elementRef,this.nestingLevel),H(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(),L(this.settings,(i,s)=>{var n;if(s instanceof m)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),L(this.settings,(t,e)=>{e instanceof m&&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={};L(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 m||n instanceof p)&&typeof n.setValue=="function"&&n.setValue(s)}),setTimeout(()=>{this.forceChildUIRefresh()},0);const e=this.getValues();this.initialValues=e,this.onChange&&this.onChange(e)}forceChildUIRefresh(){Object.entries(this.settings).forEach(([t,e])=>{try{if(e instanceof m){const i=e.getValues();e.setValue(i)}else if(typeof e.setValue=="function"){const i=e.value;i!==void 0&&e.setValue(i)}}catch(i){console.warn(`Error refreshing UI for setting ${t}:`,i)}})}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 m?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof m?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 m?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 m?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 m)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 m)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 m?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}`,m.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"),M(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,7 +12,7 @@
|
|
|
12
12
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
13
13
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`,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 m&&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,W.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")}}};m.hiddenElements=new Set;let g=m;function A(c){return new g(c)}function _(c){return c}class T extends g{constructor(t){if(!t.tabs||t.tabs.length===0)throw new Error("At least one tab is required for TabsSettingGroup");const e=t.activeTabId||t.tabs[0].id,i=t.tabs.find(a=>a.id===e)||t.tabs[0],s=T.createCombinedSettings(t.tabs),n={title:t.title,settings:s,id:t.id||I(),collapsed:t.collapsed,main:t.main,description:t.description,icon:t.icon,hideCondition:t.hideCondition,onBlur:t.onBlur,custom:t.custom,parentNestingLevel:t.parentNestingLevel};super(n),this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainers=new Map,this.drawnElement=null,this.tabs=t.tabs,this.activeTabId=i.id}static createCombinedSettings(t){const e={};return t.forEach(i=>{Object.entries(i.settings).forEach(([s,n])=>{const a=`${i.id}_${s}`;e[a]=n})}),e}getValues(){const t={};if(!this.tabs||this.tabs.length===0)return t.tabs={},t.activeTabId=this.activeTabId||"",t;const e={};return this.tabs.forEach(i=>{e[i.id]={},Object.entries(i.settings).forEach(([s,n])=>{const a=`${i.id}_${s}`,o=this.settings[a];o&&(o instanceof g?e[i.id][s]=o.getValues():e[i.id][s]=o.value)})}),t.tabs=e,t.activeTabId=this.activeTabId,t}setValue(t){t&&(t.tabs&&Object.entries(t.tabs).forEach(([e,i])=>{typeof i=="object"&&i!==null&&this.setTabValues(e,i)}),t.activeTabId&&this.tabs&&this.tabs.find(e=>e.id===t.activeTabId)&&this.switchToTab(t.activeTabId),Object.entries(t).forEach(([e,i])=>{if(e!=="tabs"&&e!=="activeTabId"){const s=this.settings[e];s&&typeof s.setValue=="function"&&s.setValue(i)}}),this.initialValues=this.getValues(),this.forceUIUpdate(),this.onChange&&this.onChange(this.getValues()))}setTabValues(t,e){!this.tabs||!this.tabs.find(s=>s.id===t)||(Object.entries(e).forEach(([s,n])=>{const a=`${t}_${s}`,o=this.settings[a];o&&(o instanceof g?typeof n=="object"&&n!==null&&o.setValue(n):typeof o.setValue=="function"&&o.setValue(n))}),t===this.activeTabId&&setTimeout(()=>{this.updateTabUI()},0))}getTabValues(t){if(!this.tabs)return{};const e=this.tabs.find(s=>s.id===t);if(!e)return{};const i={};return Object.entries(e.settings).forEach(([s,n])=>{const a=`${t}_${s}`,o=this.settings[a];o&&(o instanceof g?i[s]=o.getValues():i[s]=o.value)}),i}switchToTab(t){!this.tabs||!this.tabs.find(e=>e.id===t)||t===this.activeTabId||(this.activeTabId=t,this.updateTabUI(),this.onChange&&this.onChange(this.getValues()))}getActiveTabId(){return this.activeTabId}draw(){const t=super.draw();t.classList.add("tabs-settings-container"),this.drawnElement=t;const e=document.createElement("div");e.classList.add("tabs-header"),t.classList.contains("main-group")&&e.classList.add("main-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");if(n.classList.add("tab-button"),n.setAttribute("data-tab-id",s.id),s.id===this.activeTabId&&n.classList.add("active"),s.icon){const o=document.createElement("span");o.className="tab-icon",o.innerHTML=s.icon,n.appendChild(o)}const a=document.createElement("span");a.textContent=s.label,n.appendChild(a),n.onclick=()=>this.switchToTab(s.id),e.appendChild(n)});const i=t.querySelector(".setting-group-content");return i&&(t.insertBefore(e,i),this.setupTabContent(i)),t}setupTabContent(t){t.innerHTML="",this.tabs.forEach(e=>{const i=document.createElement("div");i.classList.add("tab-content"),i.setAttribute("data-tab-id",e.id),e.id!==this.activeTabId&&(i.style.display="none"),Object.entries(e.settings).forEach(([s,n])=>{const a=`${e.id}_${s}`,o=this.settings[a];if(o&&typeof o.draw=="function"){const l=o.draw();i.appendChild(l)}}),t.appendChild(i),this.contentContainers.set(e.id,i)})}updateTabUI(){this.tabsContainer&&this.tabsContainer.querySelectorAll(".tab-button").forEach(e=>{e.getAttribute("data-tab-id")===this.activeTabId?e.classList.add("active"):e.classList.remove("active")}),this.contentContainers.forEach((t,e)=>{e===this.activeTabId?t.style.display="":t.style.display="none"})}addTab(t){this.tabs.push(t),Object.entries(t.settings).forEach(([e,i])=>{const s=`${t.id}_${e}`;this.settings[s]=i}),this.tabsContainer&&this.redraw()}removeTab(t){const e=this.tabs.findIndex(s=>s.id===t);if(e===-1)return;const i=this.tabs[e];Object.keys(i.settings).forEach(s=>{const n=`${t}_${s}`;delete this.settings[n]}),this.tabs.splice(e,1),this.activeTabId===t&&this.tabs.length>0&&(this.activeTabId=this.tabs[0].id),this.tabsContainer&&this.tabs.length>0&&this.redraw()}redraw(){if(this.drawnElement&&this.drawnElement.parentNode){const t=this.draw();this.drawnElement.parentNode.replaceChild(t,this.drawnElement),this.drawnElement=t}}getJson(t){const e={format:"full",...t};if(e.tabId){const i=this.getTabValues(e.tabId);return JSON.stringify(i,null,2)}else if(e.activeTabOnly){const i=this.getTabValues(this.activeTabId);return JSON.stringify(i,null,2)}else if(e.format==="flat"){const i=this.getTabValues(this.activeTabId);return JSON.stringify(i,null,2)}else return JSON.stringify(this.getValues(),null,2)}setJson(t,e){try{const i=JSON.parse(t),s={autoDetect:!0,...e};if(s.toTabId){this.setTabValues(s.toTabId,i);return}if(s.toActiveTab){this.setTabValues(this.activeTabId,i);return}s.autoDetect?i.tabs&&i.activeTabId!==void 0?this.setValue(i):(this.setTabValues(this.activeTabId,i),this.onChange&&this.onChange(this.getValues())):super.setJson(t)}catch(i){throw console.error("Invalid JSON provided to TabsSettingGroup.setJson:",i),new Error("Invalid JSON format")}}getTabJson(t){return this.getJson({tabId:t})}setTabJson(t,e){this.setJson(e,{toTabId:t})}getActiveTabJson(){return this.getJson({activeTabOnly:!0})}setActiveTabJson(t){this.setJson(t,{toActiveTab:!0})}forceUIUpdate(){setTimeout(()=>{this.updateTabUI(),this.tabs.forEach(t=>{Object.entries(t.settings).forEach(([e,i])=>{const s=`${t.id}_${e}`,n=this.settings[s];if(n&&typeof n.setValue=="function")try{if(n instanceof g){const a=n.getValues();n.setValue(a)}else{const a=n.value;a!==void 0&&n.setValue(a)}}catch(a){console.warn(`Error updating UI for tab setting ${s}:`,a)}})})},20)}}function q(c){const t=new T(c);return Object.assign(t,t.settings)}class V 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 J="<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 V{constructor(t){super({...t,icon:t.icon||J,title:t.title||"Color",default:t.default?f.normalizeColorValue(t.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("#")?f.normalizeHexValue(t):t.includes(",")?f.rgbToHexStatic(t):f.normalizeHexValue(t)}static normalizeHexValue(t){return t=t.replace("#",""),t.length===3&&(t=t.split("").map(e=>e+e).join("")),t.length!==6?(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(t)?`#${t.toLowerCase()}`:(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000")}static rgbToHexStatic(t){const e=t.split(",").map(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#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)}`}setValue(t){if(t===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof t=="string"){const e=f.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=e),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}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}`}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 d=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(r);return d?e.classList.remove("error"):e.classList.add("error"),d},s=document.createElement("input");s.type="color",s.className="color-picker",s.value=this.value||"#000000",s.setAttribute("aria-label","Choose color"),s.setAttribute("title","Click to open color picker"),this.colorInputEl=s;const n=document.createElement("div");n.className="color-preview";const a=this.value||"#000000";n.style.backgroundColor=a;const o=document.createElement("input");return o.type="text",o.className="color-text-input",o.value=this.value||"",o.placeholder="#000000",o.setAttribute("pattern","#[0-9A-Fa-f]{6}"),o.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),o.setAttribute("aria-label","Hex color value"),o.setAttribute("maxlength","7"),this.textInputEl=o,this.textInputEl.addEventListener("input",l=>{var h,d;let r=l.target.value.trim();if(this.textInputEl&&i(this.textInputEl)){const u=f.normalizeColorValue(r);this.value=u,(h=this.onChange)==null||h.call(this,u),(d=this.detectChange)==null||d.call(this,u),this.colorInputEl&&(this.colorInputEl.value=u),n.style.backgroundColor=u}}),this.colorInputEl.addEventListener("input",l=>{var d,u;const r=l.target.value,h=f.normalizeColorValue(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=h,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",l=>{var d,u;const r=l.target.value,h=f.normalizeColorValue(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=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.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const Z=`
|
|
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 m&&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,W.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")}}};m.hiddenElements=new Set;let g=m;function B(c){return new g(c)}function _(c){return c}class T extends g{constructor(t){if(!t.tabs||t.tabs.length===0)throw new Error("At least one tab is required for TabsSettingGroup");const e=t.activeTabId||t.tabs[0].id,i=t.tabs.find(a=>a.id===e)||t.tabs[0],s=T.createCombinedSettings(t.tabs),n={title:t.title,settings:s,id:t.id||I(),collapsed:t.collapsed,main:t.main,description:t.description,icon:t.icon,hideCondition:t.hideCondition,onBlur:t.onBlur,custom:t.custom,parentNestingLevel:t.parentNestingLevel};super(n),this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainers=new Map,this.drawnElement=null,this.tabs=t.tabs,this.activeTabId=i.id}static createCombinedSettings(t){const e={};return t.forEach(i=>{Object.entries(i.settings).forEach(([s,n])=>{const a=`${i.id}_${s}`;e[a]=n})}),e}getValues(){const t={};if(!this.tabs||this.tabs.length===0)return t.tabs={},t.activeTabId=this.activeTabId||"",t;const e={};return this.tabs.forEach(i=>{e[i.id]={},Object.entries(i.settings).forEach(([s,n])=>{const a=`${i.id}_${s}`,o=this.settings[a];o&&(o instanceof g?e[i.id][s]=o.getValues():e[i.id][s]=o.value)})}),t.tabs=e,t.activeTabId=this.activeTabId,t}setValue(t){t&&(t.tabs&&Object.entries(t.tabs).forEach(([e,i])=>{typeof i=="object"&&i!==null&&this.setTabValues(e,i)}),t.activeTabId&&this.tabs&&this.tabs.find(e=>e.id===t.activeTabId)&&this.switchToTab(t.activeTabId),Object.entries(t).forEach(([e,i])=>{if(e!=="tabs"&&e!=="activeTabId"){const s=this.settings[e];s&&typeof s.setValue=="function"&&s.setValue(i)}}),this.initialValues=this.getValues(),this.forceUIUpdate(),this.onChange&&this.onChange(this.getValues()))}setTabValues(t,e){!this.tabs||!this.tabs.find(s=>s.id===t)||(Object.entries(e).forEach(([s,n])=>{const a=`${t}_${s}`,o=this.settings[a];o&&(o instanceof g?typeof n=="object"&&n!==null&&o.setValue(n):typeof o.setValue=="function"&&o.setValue(n))}),t===this.activeTabId&&setTimeout(()=>{this.updateTabUI()},0))}getTabValues(t){if(!this.tabs)return{};const e=this.tabs.find(s=>s.id===t);if(!e)return{};const i={};return Object.entries(e.settings).forEach(([s,n])=>{const a=`${t}_${s}`,o=this.settings[a];o&&(o instanceof g?i[s]=o.getValues():i[s]=o.value)}),i}switchToTab(t){!this.tabs||!this.tabs.find(e=>e.id===t)||t===this.activeTabId||(this.activeTabId=t,this.updateTabUI(),this.onChange&&this.onChange(this.getValues()))}getActiveTabId(){return this.activeTabId}draw(){const t=super.draw();t.classList.add("tabs-settings-container"),this.drawnElement=t;const e=document.createElement("div");e.classList.add("tabs-header"),t.classList.contains("main-group")&&e.classList.add("main-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");if(n.classList.add("tab-button"),n.setAttribute("data-tab-id",s.id),s.id===this.activeTabId&&n.classList.add("active"),s.icon){const o=document.createElement("span");o.className="tab-icon",o.innerHTML=s.icon,n.appendChild(o)}const a=document.createElement("span");a.textContent=s.label,n.appendChild(a),n.onclick=()=>this.switchToTab(s.id),e.appendChild(n)});const i=t.querySelector(".setting-group-content");return i&&(t.insertBefore(e,i),this.setupTabContent(i)),t}setupTabContent(t){t.innerHTML="",this.tabs.forEach(e=>{const i=document.createElement("div");i.classList.add("tab-content"),i.setAttribute("data-tab-id",e.id),e.id!==this.activeTabId&&(i.style.display="none"),Object.entries(e.settings).forEach(([s,n])=>{const a=`${e.id}_${s}`,o=this.settings[a];if(o&&typeof o.draw=="function"){const l=o.draw();i.appendChild(l)}}),t.appendChild(i),this.contentContainers.set(e.id,i)})}updateTabUI(){this.tabsContainer&&this.tabsContainer.querySelectorAll(".tab-button").forEach(e=>{e.getAttribute("data-tab-id")===this.activeTabId?e.classList.add("active"):e.classList.remove("active")}),this.contentContainers.forEach((t,e)=>{e===this.activeTabId?t.style.display="":t.style.display="none"})}addTab(t){this.tabs.push(t),Object.entries(t.settings).forEach(([e,i])=>{const s=`${t.id}_${e}`;this.settings[s]=i}),this.tabsContainer&&this.redraw()}removeTab(t){const e=this.tabs.findIndex(s=>s.id===t);if(e===-1)return;const i=this.tabs[e];Object.keys(i.settings).forEach(s=>{const n=`${t}_${s}`;delete this.settings[n]}),this.tabs.splice(e,1),this.activeTabId===t&&this.tabs.length>0&&(this.activeTabId=this.tabs[0].id),this.tabsContainer&&this.tabs.length>0&&this.redraw()}redraw(){if(this.drawnElement&&this.drawnElement.parentNode){const t=this.draw();this.drawnElement.parentNode.replaceChild(t,this.drawnElement),this.drawnElement=t}}getJson(t){const e={format:"full",...t};if(e.tabId){const i=this.getTabValues(e.tabId);return JSON.stringify(i,null,2)}else if(e.activeTabOnly){const i=this.getTabValues(this.activeTabId);return JSON.stringify(i,null,2)}else if(e.format==="flat"){const i=this.getTabValues(this.activeTabId);return JSON.stringify(i,null,2)}else return JSON.stringify(this.getValues(),null,2)}setJson(t,e){try{const i=JSON.parse(t),s={autoDetect:!0,...e};if(s.toTabId){this.setTabValues(s.toTabId,i);return}if(s.toActiveTab){this.setTabValues(this.activeTabId,i);return}s.autoDetect?i.tabs&&i.activeTabId!==void 0?this.setValue(i):(this.setTabValues(this.activeTabId,i),this.onChange&&this.onChange(this.getValues())):super.setJson(t)}catch(i){throw console.error("Invalid JSON provided to TabsSettingGroup.setJson:",i),new Error("Invalid JSON format")}}getTabJson(t){return this.getJson({tabId:t})}setTabJson(t,e){this.setJson(e,{toTabId:t})}getActiveTabJson(){return this.getJson({activeTabOnly:!0})}setActiveTabJson(t){this.setJson(t,{toActiveTab:!0})}forceUIUpdate(){setTimeout(()=>{this.updateTabUI(),this.tabs.forEach(t=>{Object.entries(t.settings).forEach(([e,i])=>{const s=`${t.id}_${e}`,n=this.settings[s];if(n&&typeof n.setValue=="function")try{if(n instanceof g){const a=n.getValues();n.setValue(a)}else{const a=n.value;a!==void 0&&n.setValue(a)}}catch(a){console.warn(`Error updating UI for tab setting ${s}:`,a)}})})},20)}}function q(c){const t=new T(c);return Object.assign(t,t.settings)}class V 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 J="<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 V{constructor(t){super({...t,icon:t.icon||J,title:t.title||"Color",default:t.default?f.normalizeColorValue(t.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("#")?f.normalizeHexValue(t):t.includes(",")?f.rgbToHexStatic(t):f.normalizeHexValue(t)}static normalizeHexValue(t){return t=t.replace("#",""),t.length===3&&(t=t.split("").map(e=>e+e).join("")),t.length!==6?(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(t)?`#${t.toLowerCase()}`:(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000")}static rgbToHexStatic(t){const e=t.split(",").map(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#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)}`}setValue(t){if(t===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof t=="string"){const e=f.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=e),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}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}`}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 d=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(r);return d?e.classList.remove("error"):e.classList.add("error"),d},s=document.createElement("input");s.type="color",s.className="color-picker",s.value=this.value||"#000000",s.setAttribute("aria-label","Choose color"),s.setAttribute("title","Click to open color picker"),this.colorInputEl=s;const n=document.createElement("div");n.className="color-preview";const a=this.value||"#000000";n.style.backgroundColor=a;const o=document.createElement("input");return o.type="text",o.className="color-text-input",o.value=this.value||"",o.placeholder="#000000",o.setAttribute("pattern","#[0-9A-Fa-f]{6}"),o.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),o.setAttribute("aria-label","Hex color value"),o.setAttribute("maxlength","7"),this.textInputEl=o,this.textInputEl.addEventListener("input",l=>{var h,d;let r=l.target.value.trim();if(this.textInputEl&&i(this.textInputEl)){const u=f.normalizeColorValue(r);this.value=u,(h=this.onChange)==null||h.call(this,u),(d=this.detectChange)==null||d.call(this,u),this.colorInputEl&&(this.colorInputEl.value=u),n.style.backgroundColor=u}}),this.colorInputEl.addEventListener("input",l=>{var d,u;const r=l.target.value,h=f.normalizeColorValue(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=h,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",l=>{var d,u;const r=l.target.value,h=f.normalizeColorValue(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=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.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const Z=`
|
|
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="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"/>
|
|
18
18
|
<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="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
|
@@ -21,11 +21,11 @@
|
|
|
21
21
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
22
22
|
<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"/>
|
|
23
23
|
<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"/>
|
|
24
|
-
</svg>`;class
|
|
24
|
+
</svg>`;class A extends v{constructor(t={}){const e={title:"Opacity",suffix:"%",minValue:0,maxValue:100,step:1,default:t.default??100,icon:X,...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 Q=`
|
|
25
25
|
<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">
|
|
26
26
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
27
27
|
</svg>
|
|
28
|
-
`;class S 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)}),
|
|
28
|
+
`;class S 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,this.resizeListener=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,this.isOpen?this.checkDropdownPosition():this.cleanupDropdownPosition(),(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)}),document.body.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=Q,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"),this.cleanupDropdownPosition())},document.addEventListener("click",this.clickOutsideListener),this.resizeListener&&window.removeEventListener("resize",this.resizeListener),this.resizeListener=()=>{this.isOpen&&this.checkDropdownPosition()},window.addEventListener("resize",this.resizeListener),t}checkDropdownPosition(){if(!this.optionsListEl||!this.buttonEl||!this.container)return;const t=this.buttonEl.getBoundingClientRect();this.optionsListEl.classList.remove("dropdown-up"),this.optionsListEl.style.position="fixed",this.optionsListEl.style.top=`${t.bottom+2}px`,this.optionsListEl.style.bottom="auto",this.optionsListEl.style.left=`${t.left}px`,this.optionsListEl.style.right="auto",this.optionsListEl.style.width=`${t.width}px`;const e=Math.min(this._options.length*40+12,280);if(window.innerHeight-t.bottom<e){const s=Math.max(10,window.innerHeight-e-10);this.optionsListEl.style.top=`${s}px`}}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.cleanupDropdownPosition(),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((r,h)=>{h===e?r.classList.add("selected"):r.classList.remove("selected")}))}cleanupDropdownPosition(){this.optionsListEl&&(this.optionsListEl.style.position="",this.optionsListEl.style.top="",this.optionsListEl.style.bottom="",this.optionsListEl.style.left="",this.optionsListEl.style.right="",this.optionsListEl.style.width="")}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),this.resizeListener&&(window.removeEventListener("resize",this.resizeListener),this.resizeListener=null),this.cleanupDropdownPosition(),this.optionsListEl&&this.optionsListEl.parentNode&&this.optionsListEl.parentNode.removeChild(this.optionsListEl),super.destroy()}}class $ 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:`
|
|
29
29
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
30
30
|
<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"
|
|
31
31
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -116,11 +116,11 @@
|
|
|
116
116
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
117
117
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
118
118
|
</svg>
|
|
119
|
-
`,
|
|
119
|
+
`,Lt=`
|
|
120
120
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
121
121
|
<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"/>
|
|
122
122
|
</svg>
|
|
123
|
-
`;class
|
|
123
|
+
`;class xt extends g{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new v({title:"Size",icon:Lt,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new C({default:(t==null?void 0:t.color)??"0, 0, 30"}),radius:new v({title:"Radius",icon:Et,default:(t==null?void 0:t.radius)??12,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.radius.value??0,i=this.settings.size.value??0;return`
|
|
124
124
|
border-color: ${t};
|
|
125
125
|
border-width: ${i}px;
|
|
126
126
|
border-radius: ${e}px;
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
font-weight: ${i};
|
|
143
143
|
font-size: ${s}px;
|
|
144
144
|
text-align: ${n};
|
|
145
|
-
`}}class
|
|
145
|
+
`}}class x extends p{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,r=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(o.value);h<l&&(h=l),h>r&&(h=r),o.value=String(h)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const r=Number(l);isNaN(r)||(this.value=r)}this.onChange&&this.onChange(this.value)}),i}}class Mt extends g{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{marginTop:new x({title:"Top",icon:St,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new x({title:"Right",icon:It,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new x({title:"Bottom",icon:Nt,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new x({title:"Left",icon:Ot,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,s=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
|
|
146
146
|
margin-top: ${t};
|
|
147
147
|
margin-right: ${e};
|
|
148
148
|
margin-bottom: ${i};
|
|
@@ -155,14 +155,14 @@
|
|
|
155
155
|
<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"/>
|
|
156
156
|
</svg>`,Ot=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
157
157
|
<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"/>
|
|
158
|
-
</svg>`;class Ht extends g{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new R({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new
|
|
158
|
+
</svg>`;class Ht extends g{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new R({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new A({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new C({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,n,a]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);const o=document.createElement("div");return o.className="bgset-or-label",o.textContent="OR",e.appendChild(o),e.appendChild(a),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"#000000";return t?`
|
|
159
159
|
background-image: url("${t}");
|
|
160
160
|
background-size: cover;
|
|
161
161
|
background-position: center;
|
|
162
162
|
opacity: ${e/100};
|
|
163
163
|
`:`
|
|
164
164
|
background-color: ${i};
|
|
165
|
-
`}}class
|
|
165
|
+
`}}class Bt extends g{constructor(t,e,i){super({title:`Tab ${t+1}`,hideCondition:i==null?void 0:i.hideCondition,collapsed:i==null?void 0:i.collapsed,settings:{name:new V({title:"Tab Name",default:`Tab ${t+1}`}),content:new V({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const s=document.createElement("div");s.className="tab-delete-container";const n=document.createElement("button");n.className="tab-delete-button",n.innerHTML=`
|
|
166
166
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
|
|
167
167
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
168
168
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
<path d="M14 11v6"></path>
|
|
171
171
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
172
172
|
</svg>
|
|
173
|
-
`,n.onclick=()=>{var o;return(o=this.onDeleteCallback)==null?void 0:o.call(this)},s.appendChild(n);const a=i.querySelector("h3");a?a.insertAdjacentElement("afterend",s):i.appendChild(s)}return t}}class
|
|
173
|
+
`,n.onclick=()=>{var o;return(o=this.onDeleteCallback)==null?void 0:o.call(this)},s.appendChild(n);const a=i.querySelector("h3");a?a.insertAdjacentElement("afterend",s):i.appendChild(s)}return t}}class At extends g{constructor(t){super({title:"Tabs",settings:{},hideCondition:t==null?void 0:t.hideCondition,collapsed:t==null?void 0:t.collapsed}),this.tabs=[],this._el=null,this.addTab()}addTab(t){const e=this.tabs.length,i=new Bt(e,()=>this.removeTab(i),t);this.tabs.push(i),this.settings[`Tab ${e+1}`]=i}removeTab(t){const e=this.tabs.indexOf(t);e>=0&&(this.tabs.splice(e,1),delete this.settings[`Tab ${e+1}`],this.relabelTabs(),this.rerender())}relabelTabs(){this.settings={},this.tabs.forEach((t,e)=>{t.title=`Tab ${e+1}`,this.settings[`Tab ${e+1}`]=t})}draw(){const t=super.draw();this._el=t;const e=document.createElement("div");e.className="tabs-add-btn-container";const i=document.createElement("button");return i.className="tabs-add-button",i.innerHTML=`
|
|
174
174
|
<span class="add-icon">
|
|
175
175
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
|
|
176
176
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
@@ -183,4 +183,4 @@
|
|
|
183
183
|
</svg>
|
|
184
184
|
</span>
|
|
185
185
|
<span class="add-label">Add Tab</span>
|
|
186
|
-
`,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 $t(c){return c instanceof g}function Rt(c){return c instanceof p}exports.AlignSetting=$;exports.BackgroundSettingSet=Ht;exports.BorderSettingSet=
|
|
186
|
+
`,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 $t(c){return c instanceof g}function Rt(c){return c instanceof p}exports.AlignSetting=$;exports.BackgroundSettingSet=Ht;exports.BorderSettingSet=xt;exports.ButtonSetting=Y;exports.ColorSetting=f;exports.ColorWithOpacitySetting=C;exports.DimensionSetting=tt;exports.GapSetting=pt;exports.HeaderTypographySettingSet=kt;exports.HeightSetting=at;exports.HtmlSetting=K;exports.MarginBottomSetting=mt;exports.MarginSettingGroup=Mt;exports.MarginTopSetting=vt;exports.MultiLanguageSetting=wt;exports.NumberSetting=v;exports.OpacitySetting=A;exports.SelectApiSettings=ct;exports.SelectSetting=S;exports.Setting=p;exports.SettingGroup=g;exports.StringSetting=V;exports.TabsContainerGroup=At;exports.TabsSettingGroup=T;exports.TabsSettings=w;exports.Toggle=dt;exports.UploadSetting=R;exports.WidthSetting=lt;exports.asSettingGroupWithSettings=_;exports.createSettingGroup=B;exports.createTabsSettingGroup=q;exports.isSetting=Rt;exports.isSettingGroup=$t;exports.iterateSettings=L;
|
|
@@ -144,7 +144,7 @@ const F = {
|
|
|
144
144
|
visualIndentMultiplier: 2,
|
|
145
145
|
enableAutoDetection: !0
|
|
146
146
|
};
|
|
147
|
-
class
|
|
147
|
+
class z {
|
|
148
148
|
constructor(t = {}) {
|
|
149
149
|
this.observedElements = /* @__PURE__ */ new Set(), this.config = { ...F, ...t }, this.config.enableAutoDetection && this.setupAutoDetection();
|
|
150
150
|
}
|
|
@@ -228,8 +228,8 @@ class G {
|
|
|
228
228
|
this.observer && (this.observer.disconnect(), this.observer = void 0), this.observedElements.clear();
|
|
229
229
|
}
|
|
230
230
|
}
|
|
231
|
-
const P = new
|
|
232
|
-
function
|
|
231
|
+
const P = new z();
|
|
232
|
+
function L(c, t) {
|
|
233
233
|
for (const e in c)
|
|
234
234
|
if (c.hasOwnProperty(e)) {
|
|
235
235
|
const i = c[e];
|
|
@@ -246,7 +246,7 @@ const m = class m {
|
|
|
246
246
|
*/
|
|
247
247
|
propagateNestingLevel() {
|
|
248
248
|
const t = this.nestingLevel + 1;
|
|
249
|
-
|
|
249
|
+
L(this.settings, (e, i) => {
|
|
250
250
|
i instanceof m && (i.parentNestingLevel = this.nestingLevel, i.nestingLevel = t, i.propagateNestingLevel());
|
|
251
251
|
});
|
|
252
252
|
}
|
|
@@ -297,7 +297,7 @@ const m = class m {
|
|
|
297
297
|
Object.keys(s).length > 0 && (this.lastChangeTime = Date.now(), this.initialValues = i, t(i), this.updateVisibility()), this.isHandlingChange = !1;
|
|
298
298
|
}, 50));
|
|
299
299
|
};
|
|
300
|
-
return this.changeHandlers.clear(),
|
|
300
|
+
return this.changeHandlers.clear(), L(this.settings, (i, s) => {
|
|
301
301
|
var n;
|
|
302
302
|
if (s instanceof m)
|
|
303
303
|
s.setOnChange((a) => {
|
|
@@ -332,7 +332,7 @@ const m = class m {
|
|
|
332
332
|
"focusout",
|
|
333
333
|
this.handleBlur,
|
|
334
334
|
!0
|
|
335
|
-
),
|
|
335
|
+
), L(this.settings, (t, e) => {
|
|
336
336
|
e instanceof m && e.setOnBlur(() => {
|
|
337
337
|
this.onBlur && this.onBlur();
|
|
338
338
|
});
|
|
@@ -346,7 +346,7 @@ const m = class m {
|
|
|
346
346
|
}
|
|
347
347
|
clone() {
|
|
348
348
|
const t = {};
|
|
349
|
-
|
|
349
|
+
L(this.settings, (s, n) => {
|
|
350
350
|
typeof n.clone == "function" ? t[s] = n.clone() : (console.warn(
|
|
351
351
|
`Setting with key '${s}' does not have a clone method. Copying reference.`
|
|
352
352
|
), t[s] = n);
|
|
@@ -361,7 +361,7 @@ const m = class m {
|
|
|
361
361
|
custom: this.custom,
|
|
362
362
|
hideCondition: this.hideCondition,
|
|
363
363
|
parentNestingLevel: this.parentNestingLevel
|
|
364
|
-
}, i =
|
|
364
|
+
}, i = D(e);
|
|
365
365
|
return i.initialValues = this.getValues(), i;
|
|
366
366
|
}
|
|
367
367
|
setValue(t) {
|
|
@@ -611,7 +611,7 @@ const m = class m {
|
|
|
611
611
|
};
|
|
612
612
|
m.hiddenElements = /* @__PURE__ */ new Set();
|
|
613
613
|
let g = m;
|
|
614
|
-
function
|
|
614
|
+
function D(c) {
|
|
615
615
|
return new g(c);
|
|
616
616
|
}
|
|
617
617
|
function bt(c) {
|
|
@@ -880,12 +880,12 @@ class k extends p {
|
|
|
880
880
|
});
|
|
881
881
|
}
|
|
882
882
|
}
|
|
883
|
-
const
|
|
883
|
+
const G = "<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>";
|
|
884
884
|
class f extends k {
|
|
885
885
|
constructor(t) {
|
|
886
886
|
super({
|
|
887
887
|
...t,
|
|
888
|
-
icon: t.icon ||
|
|
888
|
+
icon: t.icon || G,
|
|
889
889
|
title: t.title || "Color",
|
|
890
890
|
default: t.default ? f.normalizeColorValue(t.default) : "#000000"
|
|
891
891
|
}), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.detectChange = t.detectChange;
|
|
@@ -984,7 +984,7 @@ class f extends k {
|
|
|
984
984
|
return this.isValidHex() ? this.hexToRgb(this.value) : "0, 0, 0";
|
|
985
985
|
}
|
|
986
986
|
}
|
|
987
|
-
const
|
|
987
|
+
const U = `
|
|
988
988
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
989
989
|
<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"/>
|
|
990
990
|
<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="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
|
|
@@ -994,7 +994,7 @@ class C extends p {
|
|
|
994
994
|
constructor(t = {}) {
|
|
995
995
|
super({
|
|
996
996
|
...t,
|
|
997
|
-
icon: t.icon ||
|
|
997
|
+
icon: t.icon || U,
|
|
998
998
|
title: t.title || "Color & Opacity",
|
|
999
999
|
default: t.default || "#000000FF"
|
|
1000
1000
|
}), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value = C.normalizeHexWithOpacity(this.value));
|
|
@@ -1188,12 +1188,12 @@ class v extends p {
|
|
|
1188
1188
|
);
|
|
1189
1189
|
}
|
|
1190
1190
|
}
|
|
1191
|
-
const
|
|
1191
|
+
const _ = `
|
|
1192
1192
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
1193
1193
|
<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"/>
|
|
1194
1194
|
<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"/>
|
|
1195
1195
|
</svg>`;
|
|
1196
|
-
class
|
|
1196
|
+
class W extends v {
|
|
1197
1197
|
constructor(t = {}) {
|
|
1198
1198
|
const e = {
|
|
1199
1199
|
title: "Opacity",
|
|
@@ -1202,7 +1202,7 @@ class _ extends v {
|
|
|
1202
1202
|
maxValue: 100,
|
|
1203
1203
|
step: 1,
|
|
1204
1204
|
default: t.default ?? 100,
|
|
1205
|
-
icon:
|
|
1205
|
+
icon: _,
|
|
1206
1206
|
...t
|
|
1207
1207
|
};
|
|
1208
1208
|
super(e), this.inputType = "number", this.mobileValue = t.mobile;
|
|
@@ -1221,7 +1221,7 @@ const q = `
|
|
|
1221
1221
|
`;
|
|
1222
1222
|
class N extends p {
|
|
1223
1223
|
constructor(t = {}) {
|
|
1224
|
-
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) {
|
|
1224
|
+
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, this.resizeListener = null, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
|
|
1225
1225
|
const e = this._options.findIndex((i) => i.value === this.value);
|
|
1226
1226
|
e >= 0 && (this.selectedOptionIndex = e);
|
|
1227
1227
|
}
|
|
@@ -1250,13 +1250,13 @@ class N extends p {
|
|
|
1250
1250
|
const e = document.createElement("div");
|
|
1251
1251
|
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 = () => {
|
|
1252
1252
|
var n, a;
|
|
1253
|
-
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));
|
|
1253
|
+
this.isLoading || (this.isOpen = !this.isOpen, this.isOpen ? this.checkDropdownPosition() : this.cleanupDropdownPosition(), (n = this.optionsListEl) == null || n.classList.toggle("open", this.isOpen), (a = this.svgContainer) == null || a.classList.toggle("open", this.isOpen));
|
|
1254
1254
|
}, t.appendChild(e), this.buttonEl = e;
|
|
1255
1255
|
const i = document.createElement("ul");
|
|
1256
1256
|
i.classList.add("select-options"), this._options.forEach((n, a) => {
|
|
1257
1257
|
const o = this.createOption(n, a);
|
|
1258
1258
|
o.onclick = (l) => this.selectOption(l, a, e), i.appendChild(o);
|
|
1259
|
-
}),
|
|
1259
|
+
}), document.body.appendChild(i);
|
|
1260
1260
|
const s = document.createElement("div");
|
|
1261
1261
|
return s.classList.add("svg-container"), s.innerHTML = q, t.appendChild(s), this.optionsListEl = i, this.svgContainer = s, this.props.getOptionsAsync && (this.isLoading = !0, this.updateButtonText(), this.props.getOptionsAsync().then((n) => {
|
|
1262
1262
|
this._options.push(...n), this.isLoading = !1, this.updateOptionsList(), this.updateButtonText();
|
|
@@ -1264,16 +1264,40 @@ class N extends p {
|
|
|
1264
1264
|
console.error("Failed to fetch async options:", n), this.isLoading = !1, this.updateButtonText("Failed to load options");
|
|
1265
1265
|
})), this.clickOutsideListener && document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = (n) => {
|
|
1266
1266
|
var a, o;
|
|
1267
|
-
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"));
|
|
1268
|
-
}, document.addEventListener("click", this.clickOutsideListener),
|
|
1267
|
+
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"), this.cleanupDropdownPosition());
|
|
1268
|
+
}, document.addEventListener("click", this.clickOutsideListener), this.resizeListener && window.removeEventListener("resize", this.resizeListener), this.resizeListener = () => {
|
|
1269
|
+
this.isOpen && this.checkDropdownPosition();
|
|
1270
|
+
}, window.addEventListener("resize", this.resizeListener), t;
|
|
1271
|
+
}
|
|
1272
|
+
/**
|
|
1273
|
+
* Check if dropdown should be positioned above the button
|
|
1274
|
+
*/
|
|
1275
|
+
checkDropdownPosition() {
|
|
1276
|
+
if (!this.optionsListEl || !this.buttonEl || !this.container) return;
|
|
1277
|
+
const t = this.buttonEl.getBoundingClientRect();
|
|
1278
|
+
this.optionsListEl.classList.remove("dropdown-up"), this.optionsListEl.style.position = "fixed", this.optionsListEl.style.top = `${t.bottom + 2}px`, this.optionsListEl.style.bottom = "auto", this.optionsListEl.style.left = `${t.left}px`, this.optionsListEl.style.right = "auto", this.optionsListEl.style.width = `${t.width}px`;
|
|
1279
|
+
const e = Math.min(this._options.length * 40 + 12, 280);
|
|
1280
|
+
if (window.innerHeight - t.bottom < e) {
|
|
1281
|
+
const s = Math.max(
|
|
1282
|
+
10,
|
|
1283
|
+
window.innerHeight - e - 10
|
|
1284
|
+
);
|
|
1285
|
+
this.optionsListEl.style.top = `${s}px`;
|
|
1286
|
+
}
|
|
1269
1287
|
}
|
|
1270
1288
|
selectOption(t, e, i) {
|
|
1271
1289
|
var n, a, o;
|
|
1272
1290
|
const s = this._options[e];
|
|
1273
|
-
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) => {
|
|
1291
|
+
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.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((r, h) => {
|
|
1274
1292
|
h === e ? r.classList.add("selected") : r.classList.remove("selected");
|
|
1275
1293
|
}));
|
|
1276
1294
|
}
|
|
1295
|
+
/**
|
|
1296
|
+
* Clean up dropdown positioning when closed
|
|
1297
|
+
*/
|
|
1298
|
+
cleanupDropdownPosition() {
|
|
1299
|
+
this.optionsListEl && (this.optionsListEl.style.position = "", this.optionsListEl.style.top = "", this.optionsListEl.style.bottom = "", this.optionsListEl.style.left = "", this.optionsListEl.style.right = "", this.optionsListEl.style.width = "");
|
|
1300
|
+
}
|
|
1277
1301
|
updateOptionsList() {
|
|
1278
1302
|
if (this.optionsListEl) {
|
|
1279
1303
|
if (this.optionsListEl.innerHTML = "", this._options.length === 0) {
|
|
@@ -1300,7 +1324,7 @@ class N extends p {
|
|
|
1300
1324
|
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;
|
|
1301
1325
|
}
|
|
1302
1326
|
destroy() {
|
|
1303
|
-
this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), super.destroy();
|
|
1327
|
+
this.clickOutsideListener && (document.removeEventListener("click", this.clickOutsideListener), this.clickOutsideListener = null), this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null), this.cleanupDropdownPosition(), this.optionsListEl && this.optionsListEl.parentNode && this.optionsListEl.parentNode.removeChild(this.optionsListEl), super.destroy();
|
|
1304
1328
|
}
|
|
1305
1329
|
}
|
|
1306
1330
|
class J extends p {
|
|
@@ -1356,7 +1380,7 @@ class J extends p {
|
|
|
1356
1380
|
}), t.appendChild(i), t;
|
|
1357
1381
|
}
|
|
1358
1382
|
}
|
|
1359
|
-
class
|
|
1383
|
+
class Lt extends p {
|
|
1360
1384
|
constructor(t) {
|
|
1361
1385
|
super(t), this.inputType = "button";
|
|
1362
1386
|
}
|
|
@@ -1369,7 +1393,7 @@ class xt extends p {
|
|
|
1369
1393
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
1370
1394
|
}
|
|
1371
1395
|
}
|
|
1372
|
-
class
|
|
1396
|
+
class xt extends p {
|
|
1373
1397
|
constructor(t = {}) {
|
|
1374
1398
|
super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
|
|
1375
1399
|
const e = t.width || 0, i = t.height || 0;
|
|
@@ -1592,13 +1616,13 @@ class Y extends p {
|
|
|
1592
1616
|
this.hideError();
|
|
1593
1617
|
try {
|
|
1594
1618
|
a.classList.add("loading"), a.disabled = !0;
|
|
1595
|
-
const u = new FormData(),
|
|
1596
|
-
u.append(
|
|
1619
|
+
const u = new FormData(), B = this.props.formFieldName || "file";
|
|
1620
|
+
u.append(B, l, l.name);
|
|
1597
1621
|
const S = this.props.uploadUrl || p.DefaultUploadUrl;
|
|
1598
1622
|
if (!S)
|
|
1599
1623
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
1600
|
-
const
|
|
1601
|
-
method:
|
|
1624
|
+
const A = this.props.requestMethod || "POST", $ = { ...this.props.requestHeaders || {} }, E = await (await fetch(S, {
|
|
1625
|
+
method: A,
|
|
1602
1626
|
body: u,
|
|
1603
1627
|
headers: $
|
|
1604
1628
|
})).json();
|
|
@@ -2429,7 +2453,7 @@ class Ht extends g {
|
|
|
2429
2453
|
`;
|
|
2430
2454
|
}
|
|
2431
2455
|
}
|
|
2432
|
-
class
|
|
2456
|
+
class x extends p {
|
|
2433
2457
|
constructor(t) {
|
|
2434
2458
|
super({
|
|
2435
2459
|
...t,
|
|
@@ -2475,32 +2499,32 @@ class L extends p {
|
|
|
2475
2499
|
}), i;
|
|
2476
2500
|
}
|
|
2477
2501
|
}
|
|
2478
|
-
class
|
|
2502
|
+
class Bt extends g {
|
|
2479
2503
|
constructor(t) {
|
|
2480
2504
|
super({
|
|
2481
2505
|
title: "Margins",
|
|
2482
2506
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
2483
2507
|
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
2484
2508
|
settings: {
|
|
2485
|
-
marginTop: new
|
|
2509
|
+
marginTop: new x({
|
|
2486
2510
|
title: "Top",
|
|
2487
2511
|
icon: pt,
|
|
2488
2512
|
suffix: "px",
|
|
2489
2513
|
default: (t == null ? void 0 : t.marginTop) ?? "auto"
|
|
2490
2514
|
}),
|
|
2491
|
-
marginRight: new
|
|
2515
|
+
marginRight: new x({
|
|
2492
2516
|
title: "Right",
|
|
2493
2517
|
icon: gt,
|
|
2494
2518
|
suffix: "px",
|
|
2495
2519
|
default: (t == null ? void 0 : t.marginRight) ?? 0
|
|
2496
2520
|
}),
|
|
2497
|
-
marginBottom: new
|
|
2521
|
+
marginBottom: new x({
|
|
2498
2522
|
title: "Bottom",
|
|
2499
2523
|
icon: mt,
|
|
2500
2524
|
suffix: "px",
|
|
2501
2525
|
default: (t == null ? void 0 : t.marginBottom) ?? 0
|
|
2502
2526
|
}),
|
|
2503
|
-
marginLeft: new
|
|
2527
|
+
marginLeft: new x({
|
|
2504
2528
|
title: "Left",
|
|
2505
2529
|
icon: ft,
|
|
2506
2530
|
suffix: "px",
|
|
@@ -2528,7 +2552,7 @@ const pt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
|
|
|
2528
2552
|
</svg>`, ft = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
2529
2553
|
<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"/>
|
|
2530
2554
|
</svg>`;
|
|
2531
|
-
class
|
|
2555
|
+
class At extends g {
|
|
2532
2556
|
/**
|
|
2533
2557
|
* Constructs a new BackgroundSettingSet.
|
|
2534
2558
|
*
|
|
@@ -2562,7 +2586,7 @@ class Bt extends g {
|
|
|
2562
2586
|
...t == null ? void 0 : t.uploadProps,
|
|
2563
2587
|
default: (t == null ? void 0 : t.backgroundImage) ?? ""
|
|
2564
2588
|
}),
|
|
2565
|
-
opacity: new
|
|
2589
|
+
opacity: new W({
|
|
2566
2590
|
default: (t == null ? void 0 : t.opacity) ?? 100
|
|
2567
2591
|
}),
|
|
2568
2592
|
backgroundColor: new C({
|
|
@@ -2718,22 +2742,22 @@ function jt(c) {
|
|
|
2718
2742
|
}
|
|
2719
2743
|
export {
|
|
2720
2744
|
J as AlignSetting,
|
|
2721
|
-
|
|
2745
|
+
At as BackgroundSettingSet,
|
|
2722
2746
|
Ot as BorderSettingSet,
|
|
2723
|
-
|
|
2747
|
+
Lt as ButtonSetting,
|
|
2724
2748
|
f as ColorSetting,
|
|
2725
2749
|
C as ColorWithOpacitySetting,
|
|
2726
|
-
|
|
2750
|
+
xt as DimensionSetting,
|
|
2727
2751
|
Mt as GapSetting,
|
|
2728
2752
|
Ht as HeaderTypographySettingSet,
|
|
2729
2753
|
yt as HeightSetting,
|
|
2730
2754
|
Et as HtmlSetting,
|
|
2731
2755
|
It as MarginBottomSetting,
|
|
2732
|
-
|
|
2756
|
+
Bt as MarginSettingGroup,
|
|
2733
2757
|
St as MarginTopSetting,
|
|
2734
2758
|
Nt as MultiLanguageSetting,
|
|
2735
2759
|
v as NumberSetting,
|
|
2736
|
-
|
|
2760
|
+
W as OpacitySetting,
|
|
2737
2761
|
Tt as SelectApiSettings,
|
|
2738
2762
|
N as SelectSetting,
|
|
2739
2763
|
p as Setting,
|
|
@@ -2746,9 +2770,9 @@ export {
|
|
|
2746
2770
|
Y as UploadSetting,
|
|
2747
2771
|
Vt as WidthSetting,
|
|
2748
2772
|
bt as asSettingGroupWithSettings,
|
|
2749
|
-
|
|
2773
|
+
D as createSettingGroup,
|
|
2750
2774
|
wt as createTabsSettingGroup,
|
|
2751
2775
|
jt as isSetting,
|
|
2752
2776
|
Rt as isSettingGroup,
|
|
2753
|
-
|
|
2777
|
+
L as iterateSettings
|
|
2754
2778
|
};
|
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";.settings-container,.main-settings-container,[data-settings-container]{height:auto;min-height:auto;overflow:visible;flex-shrink:0}.container,.wrapper,.main-wrapper{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}: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: #fff;--sg-bg-2: #fff;--sg-bg-3: #fff;--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;overflow:visible;max-width:100%;box-sizing:border-box}.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 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;max-width:100%;box-sizing:border-box}.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;max-height:none;overflow:visible;max-width:100%;box-sizing:border-box;height:auto;min-height:auto;flex-shrink:0}.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;height:auto;min-height:auto;overflow:visible;flex-shrink: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.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 .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 .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px;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}.setting-group::-webkit-scrollbar,.setting-group-content::-webkit-scrollbar{width:8px;height:8px}.setting-group::-webkit-scrollbar-track,.setting-group-content::-webkit-scrollbar-track{background:#f0f2f4;border-radius:4px}.setting-group::-webkit-scrollbar-thumb,.setting-group-content::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:4px;border:2px solid transparent;background-clip:content-box}.setting-group::-webkit-scrollbar-thumb:hover,.setting-group-content::-webkit-scrollbar-thumb:hover{background-color:#98a2b3}.setting-group,.setting-group-content{scrollbar-width:thin;scrollbar-color:#c2c9d6 #f0f2f4}.tabs-settings-container.main-group{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px #1018280d}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;align-self:stretch;flex-shrink:0;background:#f1f3f2;position:relative;z-index:1;border-radius:400px;margin-bottom:8px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px;margin-bottom:0}.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,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;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;cursor:pointer;transition:all .2s ease;outline:none}.tab-button:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}.tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.tab-icon svg{width:100%;height:100%}.tab-content{position:relative;overflow:hidden;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.tabs-header{padding:3px}.tab-button{padding:3px 8px;font-size:11px}}@media (max-width: 480px){.tab-button{padding:2px 6px;font-size:10px}.tab-icon{width:14px;height:14px}}.tab-content>.setting-group{margin-bottom:12px}.tab-content>.setting-group:last-child{margin-bottom:0}.tabs-settings-container.main-group .setting-group-content{border-top:none;border-radius:0 0 8px 8px}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header,.tabs-settings-container.collapsed .tabs-header,.tabs-settings-container.collapsed .tab-content{display:none}: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}.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}.color-with-opacity-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-with-opacity-controls-wrapper{display:grid;grid-template-columns:1fr;gap:var(--space-sm, 8px);justify-self:end;max-width:140px;width:100%}.color-with-opacity-input-wrapper,.color-with-opacity-opacity-wrapper{position:relative;width:100%}.color-with-opacity-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-with-opacity-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-with-opacity-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-with-opacity-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;overflow:hidden}.color-with-opacity-preview:hover{transform:translateY(-50%) scale(1.05)}.color-with-opacity-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;z-index:-1}.color-with-opacity-opacity-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:20px;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-with-opacity-opacity-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-opacity-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-opacity-suffix{position:absolute;right:var(--space-sm, 8px);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}.color-with-opacity-opacity-input::-webkit-inner-spin-button,.color-with-opacity-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-with-opacity-opacity-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:120px}.setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .color-with-opacity-opacity-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .color-with-opacity-text-input{padding-left:32px}.setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .color-with-opacity-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:11px}.setting-group .setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .color-with-opacity-text-input{padding-left:28px}.setting-group .setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .setting-group .color-with-opacity-picker{left:4px;width:16px;height:16px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:10px}.color-with-opacity-input-wrapper.error .color-with-opacity-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-with-opacity-input-wrapper.disabled .color-with-opacity-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.html-setting-wrapper{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.html-setting-wrapper .icon-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.html-setting-wrapper .icon-container label{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0}.html-setting-wrapper .icon-container img{width:20px;height:20px;object-fit:contain}.html-setting-textarea{width:100%;min-height:120px;padding:12px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.4;border-radius:8px;color:var(--Gray-900, #101828);border:1px solid var(--Gray-300, #d0d5dd);background:var(--Base-White, #fff);resize:vertical;min-width:0;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.html-setting-textarea:focus{outline:none}.html-setting-textarea::placeholder{color:var(--Gray-500, #667085);font-style:italic}.html-setting-textarea:disabled{background-color:var(--Gray-50, #f9fafb);color:var(--Gray-500, #667085);cursor:not-allowed}@media (max-width: 768px){.html-setting-textarea{font-size:12px;padding:10px;min-height:100px}}.html-setting-textarea::-webkit-scrollbar{width:8px}.html-setting-textarea::-webkit-scrollbar-track{background:var(--Gray-100, #f2f4f7);border-radius:4px}.html-setting-textarea::-webkit-scrollbar-thumb{background-color:var(--Gray-300, #d0d5dd);border-radius:4px;border:2px solid transparent;background-clip:content-box}.html-setting-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--Gray-400, #98a2b3)}.html-setting-textarea{scrollbar-width:thin;scrollbar-color:var(--Gray-300, #d0d5dd) var(--Gray-100, #f2f4f7)}.html-setting-textarea[data-syntax=html]{font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace;-moz-tab-size:2;tab-size:2}.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:.7fr 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:36px}.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.dropdown-up{top:auto;bottom:calc(100% + 2px);transform:translateY(8px);z-index:1000}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}.select-options.dropdown-up.open{transform:translateY(0);animation:select-fade-in-up .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes select-fade-in-up{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:all .2s ease}.dimension-lock-icon:hover{background-color:#f5f5f5;transform:translate(-.25rem) scale(1.1)}.dimension-setting-container.aspect-locked .dimension-lock-icon{color:#02cc59;background-color:#02cc591a;box-shadow:0 0 0 1px #02cc5933}.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}.upload-setting-wrapper .error-message{color:#f04438;font-size:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.4;margin-top:4px;margin-bottom:8px;padding:8px 12px;background-color:#fff4f4;border:1px solid #fecdca;border-radius:6px;display:none;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.upload-setting-wrapper .error-message:before{content:"⚠️";margin-right:6px}.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:hidden;position:relative;z-index:1;max-width:100%;box-sizing:border-box}.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:hidden;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel .select-api-container{overflow:visible;position:relative;z-index:9999;max-width:100%}.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}.margin-top-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-top-wrapper .setting-icon svg{width:18px;height:19px}.margin-top-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-top-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.multi-language-wrapper{display:flex;flex-direction:column;width:100%}.multi-language-title{color:#000;font-weight:700;font-size:14px;margin-bottom:8px}.multi-language-content{display:flex;flex-direction:column;gap:4px;width:100%}.languages-container{display:flex;flex-direction:column;gap:4px}.multi-language-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;margin-bottom:4px}.language-label{font-size:12px;font-weight:400;color:var(--color-input-text);text-align:left}.language-input-group{display:flex;align-items:center;gap:8px;justify-content:flex-end}.language-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)}.delete-language-btn{width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-input-text);cursor:pointer;display:flex;align-items:center;justify-content:center}.delete-language-btn:hover{color:#e53e3e}.delete-language-btn svg{width:12px;height:12px}.add-language-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;margin-top:8px}.add-language-label{font-size:12px;font-weight:400;color:var(--color-input-text);text-align:left}.add-language-controls{display:flex;gap:6px;align-items:center;justify-content:flex-end}.add-language-select{min-width:80px;max-width:100px;height:28px;padding:4px 6px;border-radius:6px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);font-size:12px;cursor:pointer}.add-language-btn{height:28px;padding:4px 8px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg);color:var(--color-input-text);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px}.add-language-btn:hover:not(:disabled){background:var(--color-bg-hover, #f5f5f5)}.add-language-btn:disabled{opacity:.5;cursor:not-allowed}.add-language-btn svg{width:10px;height:10px}.languages-container:empty{min-height:0}@media (max-width: 640px){.multi-language-row{grid-template-columns:1fr;gap:8px}.language-label{font-size:var(--font-size-xs, 12px)}.add-language-section{flex-direction:column;align-items:stretch}.add-language-select,.add-language-btn{width:100%}}.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";.settings-container,.main-settings-container,[data-settings-container]{height:auto;min-height:auto;overflow:visible;flex-shrink:0}.container,.wrapper,.main-wrapper{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}: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: #fff;--sg-bg-2: #fff;--sg-bg-3: #fff;--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;overflow:visible;max-width:100%;box-sizing:border-box}.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 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;max-width:100%;box-sizing:border-box}.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;max-height:none;overflow:visible;max-width:100%;box-sizing:border-box;height:auto;min-height:auto;flex-shrink:0}.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;height:auto;min-height:auto;overflow:visible;flex-shrink: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.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 .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 .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px;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}.setting-group::-webkit-scrollbar,.setting-group-content::-webkit-scrollbar{width:8px;height:8px}.setting-group::-webkit-scrollbar-track,.setting-group-content::-webkit-scrollbar-track{background:#f0f2f4;border-radius:4px}.setting-group::-webkit-scrollbar-thumb,.setting-group-content::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:4px;border:2px solid transparent;background-clip:content-box}.setting-group::-webkit-scrollbar-thumb:hover,.setting-group-content::-webkit-scrollbar-thumb:hover{background-color:#98a2b3}.setting-group,.setting-group-content{scrollbar-width:thin;scrollbar-color:#c2c9d6 #f0f2f4}.tabs-settings-container.main-group{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px #1018280d}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;align-self:stretch;flex-shrink:0;background:#f1f3f2;position:relative;z-index:1;border-radius:400px;margin-bottom:8px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px;margin-bottom:0}.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,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;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;cursor:pointer;transition:all .2s ease;outline:none}.tab-button:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}.tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.tab-icon svg{width:100%;height:100%}.tab-content{position:relative;overflow:hidden;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.tabs-header{padding:3px}.tab-button{padding:3px 8px;font-size:11px}}@media (max-width: 480px){.tab-button{padding:2px 6px;font-size:10px}.tab-icon{width:14px;height:14px}}.tab-content>.setting-group{margin-bottom:12px}.tab-content>.setting-group:last-child{margin-bottom:0}.tabs-settings-container.main-group .setting-group-content{border-top:none;border-radius:0 0 8px 8px}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header,.tabs-settings-container.collapsed .tabs-header,.tabs-settings-container.collapsed .tab-content{display:none}: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}.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}.color-with-opacity-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-with-opacity-controls-wrapper{display:grid;grid-template-columns:1fr;gap:var(--space-sm, 8px);justify-self:end;max-width:140px;width:100%}.color-with-opacity-input-wrapper,.color-with-opacity-opacity-wrapper{position:relative;width:100%}.color-with-opacity-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-with-opacity-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-with-opacity-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-with-opacity-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;overflow:hidden}.color-with-opacity-preview:hover{transform:translateY(-50%) scale(1.05)}.color-with-opacity-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;z-index:-1}.color-with-opacity-opacity-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:20px;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-with-opacity-opacity-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-opacity-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-opacity-suffix{position:absolute;right:var(--space-sm, 8px);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}.color-with-opacity-opacity-input::-webkit-inner-spin-button,.color-with-opacity-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-with-opacity-opacity-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:120px}.setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .color-with-opacity-opacity-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .color-with-opacity-text-input{padding-left:32px}.setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .color-with-opacity-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:11px}.setting-group .setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .color-with-opacity-text-input{padding-left:28px}.setting-group .setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .setting-group .color-with-opacity-picker{left:4px;width:16px;height:16px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:10px}.color-with-opacity-input-wrapper.error .color-with-opacity-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-with-opacity-input-wrapper.disabled .color-with-opacity-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.html-setting-wrapper{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.html-setting-wrapper .icon-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.html-setting-wrapper .icon-container label{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0}.html-setting-wrapper .icon-container img{width:20px;height:20px;object-fit:contain}.html-setting-textarea{width:100%;min-height:120px;padding:12px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.4;border-radius:8px;color:var(--Gray-900, #101828);border:1px solid var(--Gray-300, #d0d5dd);background:var(--Base-White, #fff);resize:vertical;min-width:0;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.html-setting-textarea:focus{outline:none}.html-setting-textarea::placeholder{color:var(--Gray-500, #667085);font-style:italic}.html-setting-textarea:disabled{background-color:var(--Gray-50, #f9fafb);color:var(--Gray-500, #667085);cursor:not-allowed}@media (max-width: 768px){.html-setting-textarea{font-size:12px;padding:10px;min-height:100px}}.html-setting-textarea::-webkit-scrollbar{width:8px}.html-setting-textarea::-webkit-scrollbar-track{background:var(--Gray-100, #f2f4f7);border-radius:4px}.html-setting-textarea::-webkit-scrollbar-thumb{background-color:var(--Gray-300, #d0d5dd);border-radius:4px;border:2px solid transparent;background-clip:content-box}.html-setting-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--Gray-400, #98a2b3)}.html-setting-textarea{scrollbar-width:thin;scrollbar-color:var(--Gray-300, #d0d5dd) var(--Gray-100, #f2f4f7)}.html-setting-textarea[data-syntax=html]{font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace;-moz-tab-size:2;tab-size:2}.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:.7fr 1fr;gap:var(--space-md, 12px);align-items:center;position:relative;width:100%;min-height:40px;z-index:1}.select-container .select-options{position:fixed;z-index:99999;max-width:300px;min-width:200px}.setting-group .select-container,.tab-content .select-container,.tabs-settings-container .select-container{position:relative;z-index:1}.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:36px}.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:fixed!important;z-index:99999!important;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;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);min-width:200px;max-width:300px}.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:all .2s ease}.dimension-lock-icon:hover{background-color:#f5f5f5;transform:translate(-.25rem) scale(1.1)}.dimension-setting-container.aspect-locked .dimension-lock-icon{color:#02cc59;background-color:#02cc591a;box-shadow:0 0 0 1px #02cc5933}.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}.upload-setting-wrapper .error-message{color:#f04438;font-size:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.4;margin-top:4px;margin-bottom:8px;padding:8px 12px;background-color:#fff4f4;border:1px solid #fecdca;border-radius:6px;display:none;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.upload-setting-wrapper .error-message:before{content:"⚠️";margin-right:6px}.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:hidden;position:relative;z-index:1;max-width:100%;box-sizing:border-box}.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:hidden;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel .select-api-container{overflow:visible;position:relative;z-index:9999;max-width:100%}.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}.margin-top-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-top-wrapper .setting-icon svg{width:18px;height:19px}.margin-top-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-top-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.multi-language-wrapper{display:flex;flex-direction:column;width:100%}.multi-language-title{color:#000;font-weight:700;font-size:14px;margin-bottom:8px}.multi-language-content{display:flex;flex-direction:column;gap:4px;width:100%}.languages-container{display:flex;flex-direction:column;gap:4px}.multi-language-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;margin-bottom:4px}.language-label{font-size:12px;font-weight:400;color:var(--color-input-text);text-align:left}.language-input-group{display:flex;align-items:center;gap:8px;justify-content:flex-end}.language-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)}.delete-language-btn{width:20px;height:20px;padding:0;border:none;background:transparent;color:var(--color-input-text);cursor:pointer;display:flex;align-items:center;justify-content:center}.delete-language-btn:hover{color:#e53e3e}.delete-language-btn svg{width:12px;height:12px}.add-language-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;margin-top:8px}.add-language-label{font-size:12px;font-weight:400;color:var(--color-input-text);text-align:left}.add-language-controls{display:flex;gap:6px;align-items:center;justify-content:flex-end}.add-language-select{min-width:80px;max-width:100px;height:28px;padding:4px 6px;border-radius:6px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);font-size:12px;cursor:pointer}.add-language-btn{height:28px;padding:4px 8px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg);color:var(--color-input-text);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px}.add-language-btn:hover:not(:disabled){background:var(--color-bg-hover, #f5f5f5)}.add-language-btn:disabled{opacity:.5;cursor:not-allowed}.add-language-btn svg{width:10px;height:10px}.languages-container:empty{min-height:0}@media (max-width: 640px){.multi-language-row{grid-template-columns:1fr;gap:8px}.language-label{font-size:var(--font-size-xs, 12px)}.add-language-section{flex-direction:column;align-items:stretch}.add-language-select,.add-language-btn{width:100%}}.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/dist/index.d.ts
CHANGED
|
@@ -509,10 +509,19 @@ export declare class SelectSetting<T = any> extends Setting<T, SelectSettingProp
|
|
|
509
509
|
private isLoading;
|
|
510
510
|
private container;
|
|
511
511
|
private clickOutsideListener;
|
|
512
|
+
private resizeListener;
|
|
512
513
|
constructor(props?: SelectSettingProps<T>);
|
|
513
514
|
private createOption;
|
|
514
515
|
draw(): HTMLElement;
|
|
516
|
+
/**
|
|
517
|
+
* Check if dropdown should be positioned above the button
|
|
518
|
+
*/
|
|
519
|
+
private checkDropdownPosition;
|
|
515
520
|
private selectOption;
|
|
521
|
+
/**
|
|
522
|
+
* Clean up dropdown positioning when closed
|
|
523
|
+
*/
|
|
524
|
+
private cleanupDropdownPosition;
|
|
516
525
|
private updateOptionsList;
|
|
517
526
|
private updateButtonText;
|
|
518
527
|
destroy(): void;
|
package/package.json
CHANGED