builder-settings-types 0.0.147 → 0.0.148
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 +16 -16
- package/dist/builder-settings-types.es.js +115 -111
- package/dist/index.d.ts +3 -0
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let R=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=$[e[c]&63];return t};function S(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]=S(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=S(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function j(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 m{constructor(t={}){this.props=t,this.id=t.id||R(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}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=S(this.props),i=new t(e);return i.value=S(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 a=document.createElement("div");if(a.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);a.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);a.appendChild(o)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||j(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=a=>{const o=a.target;let l=o.value;switch(t.inputType){case"number":l=Number(o.value);break;case"color":l=o.value;break;case"date":l=o.value;break;case"select":l=o.value;break;case"text":l=o.value;break;case"button":l=o.value;break;default:l=o.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let R=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=$[e[c]&63];return t};function S(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]=S(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=S(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function j(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 m{constructor(t={}){this.props=t,this.id=t.id||R(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}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=S(this.props),i=new t(e);return i.value=S(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 a=document.createElement("div");if(a.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);a.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);a.appendChild(o)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||j(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=a=>{const o=a.target;let l=o.value;switch(t.inputType){case"number":l=Number(o.value);break;case"color":l=o.value;break;case"date":l=o.value;break;case"select":l=o.value;break;case"text":l=o.value;break;case"button":l=o.value;break;default:l=o.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function y(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const x=class x{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.hasFocus=!1,this.focusTrackingEnabled=!1,this.handleFocus=()=>{},this.blurDebounceTime=100,this.lastBlurTime=0,this.isProcessingBlur=!1,this.isInteracting=!1,this.interactionStartTime=0,this.modifiedSettings=new Set,this.activeSettingId=null,this.hasValueChanged=!1,this.handleInteractionStart=e=>{this.isInteracting||(this.isInteracting=!0,this.interactionStartTime=Date.now(),this.modifiedSettings.clear(),console.log(`[${this.title}] Setting interaction started`))},this.handleChange=e=>{if(e.target instanceof HTMLElement){this.hasValueChanged=!0;const i=e.target.closest("[data-setting-id]");i&&(this.activeSettingId=i.getAttribute("data-setting-id"))}},this.id=t.id||R(),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.blurDebounceTime=t.blurDebounceTime??100,Object.assign(this,t.settings),this.initialValues=this.getValues()}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.hasValueChanged=!0,this.lastChangeTime=Date.now(),this.initialValues=i,t(i),this.updateVisibility()),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),y(this.settings,(i,s)=>{var n;if(s instanceof x)s.setOnChange(a=>{this.hasValueChanged=!0;const o=this.getValues();this.initialValues=o,t(o)}),this.changeHandlers.add(()=>t(this.getValues()));else if(s instanceof m){const a=()=>{this.hasValueChanged=!0,e()};this.changeHandlers.add(a),s.setOnChange(a)}else{const a=()=>{this.hasValueChanged=!0,e()};this.changeHandlers.add(a),(n=s.setOnChange)==null||n.call(s,a)}}),this}setOnBlur(t,e){return this.onBlur=t,this.pendingBlurHandler=t,this.focusTrackingEnabled=!0,e!==void 0&&(this.blurDebounceTime=e),this.handleBlur=i=>{if(!this.hasValueChanged&&!i)return;let n=null;if((i==null?void 0:i.target)instanceof HTMLElement){const a=i.target.closest("[data-setting-id]");a&&(n=a.getAttribute("data-setting-id"))}this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>{this.saveChangesImmediately();const a=this.getValues();(this.activeSettingId!==n||this.hasValueChanged)&&this.onBlur&&(this.onBlur(a),this.hasValueChanged=!1),this.activeSettingId=n},this.blurDebounceTime)},this.elementRef&&this.setupFocusHandlers(),this}hasFocusWithin(){if(!this.elementRef)return!1;const t=document.activeElement;return this.elementRef.contains(t)||this.hasFocus}setupFocusHandlers(){if(!this.elementRef||!this.focusTrackingEnabled)return;this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef.removeEventListener("change",this.handleChange),this.elementRef.removeEventListener("input",this.handleChange),this.elementRef.addEventListener("focusout",this.handleBlur),this.elementRef.addEventListener("change",this.handleChange),this.elementRef.addEventListener("input",this.handleChange);const t=this.elementRef.closest("form");t&&(t.removeEventListener("submit",this.handleBlur),t.addEventListener("submit",this.handleBlur)),document.addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&this.elementRef&&document.activeElement&&this.elementRef.contains(document.activeElement)&&this.handleBlur()})}cleanup(){if(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.elementRef.removeEventListener("change",this.handleChange),this.elementRef.removeEventListener("input",this.handleChange);const t=this.elementRef.closest("form");t&&t.removeEventListener("submit",this.handleBlur)}document.removeEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&this.elementRef&&document.activeElement&&this.elementRef.contains(document.activeElement)&&this.handleBlur()}),y(this.settings,(t,e)=>{typeof e.cleanup=="function"&&e.cleanup()}),this.changeHandlers.clear(),this.activeSettingId=null,this.hasValueChanged=!1}clone(){const t={};y(this.settings,(n,a)=>{typeof a.clone=="function"?t[n]=a.clone():(console.warn(`Setting with key '${n}' does not have a clone method. Copying reference.`),t[n]=a)});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},i=this.constructor,s=new i(e);return s.initialValues=this.getValues(),s}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 x?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?(this.isInteracting&&this.modifiedSettings.add(t),e instanceof x?e.getValues():e.value):void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,x.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");if(i.className="title-section",this.icon){const h=document.createElement("span");h.className="group-icon",h.innerHTML=this.icon,i.appendChild(h)}this.custom&&t.classList.add("custom_class");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"/>
|
|
5
5
|
</svg>
|
|
6
|
-
`,
|
|
6
|
+
`,h.title=this.description,n.appendChild(h)}const a=document.createElement("span");a.className="setting-group-arrow",a.innerHTML=`
|
|
7
7
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8
8
|
<path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
9
9
|
</svg>
|
|
10
|
-
`,this.isCollapsed&&a.classList.add("rotated"),n.appendChild(a);const o=document.createElement("div");if(o.className="setting-group-content",this.isCollapsed&&(o.classList.add("collapsed"),e.classList.add("collapsed-view"),a.classList.add("rotated"),t.classList.add("collapsed")),this.isMain&&o.classList.add("main-content"),this.description&&!this.isCollapsed){const
|
|
10
|
+
`,this.isCollapsed&&a.classList.add("rotated"),n.appendChild(a);const o=document.createElement("div");if(o.className="setting-group-content",this.isCollapsed&&(o.classList.add("collapsed"),e.classList.add("collapsed-view"),a.classList.add("rotated"),t.classList.add("collapsed")),this.isMain&&o.classList.add("main-content"),this.description&&!this.isCollapsed){const h=document.createElement("div");h.className="setting-group-description",h.textContent=this.description,o.appendChild(h)}const l=()=>{this.isCollapsed=!this.isCollapsed,o.classList.toggle("collapsed"),e.classList.toggle("collapsed-view"),a.classList.toggle("rotated"),t.classList.toggle("collapsed",this.isCollapsed),e.setAttribute("aria-expanded",(!this.isCollapsed).toString());const h=o.querySelector(".setting-group-description"),u=n.querySelector(".info-marker");if(this.description)if(this.isCollapsed){if(h&&h.remove(),!u){const d=document.createElement("span");d.className="info-marker",d.innerHTML=`
|
|
11
11
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
12
12
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
13
13
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`,d.title=this.description,n.insertBefore(d,a)}}else{if(!
|
|
15
|
+
`,d.title=this.description,n.insertBefore(d,a)}}else{if(!h){const d=document.createElement("div");d.className="setting-group-description",d.textContent=this.description,o.insertBefore(d,o.firstChild)}u&&u.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 u=this.settings[h];o.appendChild(u.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,this.pendingBlurHandler&&(this.setupFocusHandlers(),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()}saveChangesImmediately(){if(!this.onChange)return;this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null);const t=this.getValues(),e=this.calculateChanges(this.initialValues,t);Object.keys(e).length>0&&(this.initialValues=t,this.onChange(t),this.updateVisibility())}};x.hiddenElements=new Set;let f=x;class M extends m{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const B="<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 H extends M{constructor(t){super({...t,icon:t.icon||B,title:t.title||"Color"}),this.inputType="color",this.detectChange=t.detectChange}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}rgbToHex(t){const[e,i,s]=t.split(",").map(a=>parseInt(a.trim()));if(isNaN(e)||isNaN(i)||isNaN(s))return"#000000";const n=a=>{const o=a.toString(16);return o.length===1?"0"+o:o};return`#${n(e)}${n(i)}${n(s)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||B),s=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";const a=d=>{const g=d.value.split(",").map(I=>parseInt(I.trim()));if(g.length!==3||g.some(isNaN))return d.style.border="1px solid red",!1;const[p,C,v]=g,V=p>=0&&p<=255&&C>=0&&C<=255&&v>=0&&v<=255;return d.style.border=V?"":"1px solid red",V},o=document.createElement("div");o.className="color-preview",o.style.backgroundColor=this.value?`rgb(${this.value})`:"";const l=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),r=l.querySelector("input");r.readOnly=!0;const h=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=h.querySelector("input");return r.oninput=d=>{var p;let g=d.target.value.trim();a(r)&&(this.value=g,(p=this.onChange)==null||p.call(this,g),u.value=this.rgbToHex(g),o.style.backgroundColor=`rgb(${g})`)},u.oninput=d=>{var C,v;const g=d.target.value,p=this.hexToRgb(g);this.value=p,(C=this.onChange)==null||C.call(this,p),(v=this.detectChange)==null||v.call(this,p),r.value=p,o.style.backgroundColor=`rgb(${p})`},u.onchange=d=>{var C,v;const g=d.target.value,p=this.hexToRgb(g);this.value=p,(C=this.onChange)==null||C.call(this,p),(v=this.detectChange)==null||v.call(this,p),r.value=p,o.style.backgroundColor=`rgb(${p})`},n.appendChild(o),n.appendChild(h),n.appendChild(l),t.appendChild(e),t.appendChild(n),this.value&&(r.value=this.value,u.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class b extends m{constructor(t){super(t),this.inputType="number",this.inputElement=null,this.mobileValue=t.mobile,this.validateProps(),this.value=this.validateValue(this.value)}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const n=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let o=Number(s.value);o<n&&(o=n),o>a&&(o=a),String(o)!==s.value&&(s.value=String(o)),this.setValue(o)}),s.addEventListener("blur",()=>{var a,o;const n=this.validateValue(Number(s.value));n!==Number(s.value)&&(s.value=String(n),this.setValue(n)),(o=(a=this.props).onBlur)==null||o.call(a)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(this.inputElement=e.querySelector("input.number-setting-input"),!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper"),this.inputElement&&(this.inputElement.style.paddingRight="35px");const i=document.createElement("span");return i.className="suffix-label",i.textContent=this.props.suffix,e.appendChild(i),e}setValue(t){const e=this.validateValue(t);super.setValue(e),this.inputElement&&this.inputElement.value!==String(e)&&(this.inputElement.value=String(e??""))}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}setMobileValue(t){this.mobileValue=t}validateProps(){this.props.minValue!==void 0&&(this.props.default??0)<this.props.minValue&&console.warn(`Default value ${this.props.default} is less than minValue ${this.props.minValue}`),this.props.maxValue!==void 0&&(this.props.default??0)>this.props.maxValue&&console.warn(`Default value ${this.props.default} is greater than maxValue ${this.props.maxValue}`)}}const W=`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
17
17
|
<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
18
18
|
<path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
|
|
21
21
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
22
22
|
</svg>
|
|
23
|
-
`;class N extends m{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=G,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var n,a,o;const s=this._options[e];s&&(this.value=s.value,(n=this.onChange)==null||n.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((h
|
|
23
|
+
`;class N extends m{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=G,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var n,a,o;const s=this._options[e];s&&(this.value=s.value,(n=this.onChange)==null||n.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((r,h)=>{h===e?r.classList.add("selected"):r.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=s=>{this.buttonEl&&this.selectOption(s,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class A extends m{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
|
|
24
24
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
25
25
|
<path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
|
|
26
26
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -70,10 +70,10 @@
|
|
|
70
70
|
`)):(this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),i&&(i.innerHTML=`
|
|
71
71
|
<span class="upload-icon">${O}</span>
|
|
72
72
|
<span class="upload-label">Upload</span>
|
|
73
|
-
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",l=>{var
|
|
73
|
+
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",l=>{var r;l.relatedTarget&&t.contains(l.relatedTarget)||(r=this.onBlur)==null||r.call(this)},!0);const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const l=document.createElement("div");if(l.className="icon-title-container",this.props.icon){const r=this.createIcon(this.props.icon);l.appendChild(r)}if(this.props.title){const r=this.createLabel(this.props.title);l.appendChild(r)}t.appendChild(l)}const i=document.createElement("div");i.className="preview-button-container";const s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");if(n.className="preview-placeholder",n.innerHTML=z,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview",this.props.delete){const l=document.createElement("button");l.className="delete-button",l.type="button",l.title="Delete image",l.innerHTML=P,this.previewWrapper.appendChild(l),l.onclick=r=>{var h;r.stopPropagation(),this.value="",o.value="",this.updatePreviewState(null),(h=this.onChange)==null||h.call(this,"")}}this.previewWrapper.appendChild(this.previewEl);const a=document.createElement("button");a.className="upload-button",a.innerHTML=`
|
|
74
74
|
<span class="upload-icon">${O}</span>
|
|
75
75
|
<span class="upload-label">Upload</span>
|
|
76
|
-
`;const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(o),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=()=>{o.click()},o.onchange=async()=>{var h,
|
|
76
|
+
`;const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(a),t.appendChild(i),t.appendChild(o),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=()=>{o.click()},o.onchange=async()=>{var r,h,u,d;const l=(r=o.files)==null?void 0:r[0];if(l)try{a.classList.add("loading"),a.disabled=!0;const g=new FormData,p=this.props.formFieldName||"file";g.append(p,l,l.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const v=this.props.requestMethod||"POST",V={...this.props.requestHeaders||{}},k=await(await fetch(C,{method:v,body:g,headers:V})).json();console.log("Upload response:",k);let w;if(this.props.parseResponse)w=this.props.parseResponse(k);else if(w=(h=k==null?void 0:k.data)==null?void 0:h.url,!w)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",w),this.value=w,this.updatePreviewState(w),(u=this.onChange)==null||u.call(this,w),(d=this.onBlur)==null||d.call(this)}catch(g){console.error("Error uploading file:",g)}finally{a.classList.remove("loading"),a.disabled=!1,o.value=""}else o.value=""},t}}class Z extends b{constructor(t={}){const e={title:t.title||"Height",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||J,...t};super(e),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}}const J=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
77
77
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
78
78
|
</svg>`;class X extends b{constructor(t={}){const e={title:t.title||"Width",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||Q,...t};super(e),this.inputType="number",this.mobileValue=t.mobile}getMobileValue(){return this.mobileValue}}const Q=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
79
79
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -81,16 +81,16 @@
|
|
|
81
81
|
<svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
|
|
82
82
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
83
83
|
</svg>
|
|
84
|
-
`;class K extends m{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.selectedOptionIndex=null,t.default!==void 0&&(this.value=t.default),this.initializeOptions(t),!t.getOptionsAsync&&this.value!==void 0){const e=this._options.findIndex(i=>JSON.stringify(i.value)===JSON.stringify(this.value));e!==-1&&(this.selectedOptionIndex=e)}t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}initializeOptions(t){this.hasInitializedOptions&&!t.getOptionsAsync||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?this.isLoading=!0:this.hasInitializedOptions=!0)}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const s=document.createElement("input");return s.type="radio",s.classList.add("select-api-radio"),s.name="select-api-radio-group",i.appendChild(s),this.selectedOptionIndex===e&&(s.checked=!0),i}draw(){const t=document.createElement("div");t.classList.add("select-api-container"),this.container=t;const e=document.createElement("div");if(e.classList.add("select-api-button"),this.props.title){e.classList.add("has-label");const n=document.createElement("div");n.className="select-label",n.textContent=this.props.title,e.appendChild(n);const a=document.createElement("span");if(a.className="select-value",this.isLoading)a.textContent=this.props.loadingText||"Loading options...";else{const o=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,l=o&&typeof o.name=="string"?o.name:"Select an option";a.textContent=l}e.appendChild(a)}else{const n=document.createElement("span");if(this.isLoading)n.textContent=this.props.loadingText||"Loading options...";else{const a=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,o=a&&typeof a.name=="string"?a.name:"Select an option";n.textContent=o}e.appendChild(n)}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-api-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectApiOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=Y,t.appendChild(s),s.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))},this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{const a=new Set(this._options.map(l=>JSON.stringify(l.value))),o=n.filter(l=>!a.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.hasInitializedOptions=!0,this.value!==void 0){const l=this._options.findIndex(
|
|
84
|
+
`;class K extends m{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.hasInitializedOptions=!1,this.selectedOptionIndex=null,t.default!==void 0&&(this.value=t.default),this.initializeOptions(t),!t.getOptionsAsync&&this.value!==void 0){const e=this._options.findIndex(i=>JSON.stringify(i.value)===JSON.stringify(this.value));e!==-1&&(this.selectedOptionIndex=e)}t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}initializeOptions(t){this.hasInitializedOptions&&!t.getOptionsAsync||(this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync?this.isLoading=!0:this.hasInitializedOptions=!0)}createOption(t,e){const i=document.createElement("li");i.classList.add("select-api-option"),i.textContent=t.name,i.dataset.index=String(e);const s=document.createElement("input");return s.type="radio",s.classList.add("select-api-radio"),s.name="select-api-radio-group",i.appendChild(s),this.selectedOptionIndex===e&&(s.checked=!0),i}draw(){const t=document.createElement("div");t.classList.add("select-api-container"),this.container=t;const e=document.createElement("div");if(e.classList.add("select-api-button"),this.props.title){e.classList.add("has-label");const n=document.createElement("div");n.className="select-label",n.textContent=this.props.title,e.appendChild(n);const a=document.createElement("span");if(a.className="select-value",this.isLoading)a.textContent=this.props.loadingText||"Loading options...";else{const o=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,l=o&&typeof o.name=="string"?o.name:"Select an option";a.textContent=l}e.appendChild(a)}else{const n=document.createElement("span");if(this.isLoading)n.textContent=this.props.loadingText||"Loading options...";else{const a=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,o=a&&typeof a.name=="string"?a.name:"Select an option";n.textContent=o}e.appendChild(n)}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-api-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectApiOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=Y,t.appendChild(s),s.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))},this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&!this.hasInitializedOptions?(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{const a=new Set(this._options.map(l=>JSON.stringify(l.value))),o=n.filter(l=>!a.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.hasInitializedOptions=!0,this.value!==void 0){const l=this._options.findIndex(r=>JSON.stringify(r.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})):this.props.getOptionsAsync&&this._options.length<=1&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{const a=new Set(this._options.map(l=>JSON.stringify(l.value))),o=n.filter(l=>!a.has(JSON.stringify(l.value)));if(this._options.push(...o),this.isLoading=!1,this.value!==void 0){const l=this._options.findIndex(r=>JSON.stringify(r.value)===JSON.stringify(this.value));this.selectedOptionIndex=l!==-1?l:null}else this.selectedOptionIndex=null;this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText(this.props.errorText||"Error: Could not load options",!0)})),t}selectApiOption(t,e,i){var l,r,h,u;const s=t.target,n=s.querySelector(".select-api-radio")||((l=s.closest(".select-api-option"))==null?void 0:l.querySelector(".select-api-radio"));n&&(n.checked=!0),this.selectedOptionIndex=e;const a=this._options[e].value;this.value=a;const o=i.querySelector(".select-value");if(o)o.textContent=this._options[e].name;else{const d=i.firstChild;d&&d.tagName==="SPAN"&&(d.textContent=this._options[e].name)}this.isOpen=!1,(r=this.optionsListEl)==null||r.classList.remove("open"),(h=this.svgContainer)==null||h.classList.remove("open"),(u=this.onChange)==null||u.call(this,a),this.detectChangeCallback&&this.detectChangeCallback(a)}updateOptionsList(){!this.optionsListEl||!this.buttonEl||(this.optionsListEl.innerHTML="",this._options.forEach((t,e)=>{var s;const i=this.createOption(t,e);i.onclick=n=>{this.buttonEl&&this.selectApiOption(n,e,this.buttonEl)},(s=this.optionsListEl)==null||s.appendChild(i)}))}updateButtonText(t,e=!1){if(!this.buttonEl)return;const i=this.buttonEl.querySelector(".select-value")||this.buttonEl.firstChild;if(i)if(e)i.textContent=t||"Error",this.buttonEl.classList.add("error"),this.buttonEl.setAttribute("disabled","true"),this.optionsListEl&&this.optionsListEl.classList.remove("open"),this.svgContainer&&(this.svgContainer.style.display="none");else if(this.isLoading)i.textContent=this.props.loadingText||"Loading options...",this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="");else{const s=this.selectedOptionIndex!==null&&this._options&&this.selectedOptionIndex>=0&&this.selectedOptionIndex<this._options.length?this._options[this.selectedOptionIndex]:null,n=s&&typeof s.name=="string"?s.name:"Select an option";i.textContent=t||n,this.buttonEl.classList.remove("error"),this.buttonEl.removeAttribute("disabled"),this.svgContainer&&(this.svgContainer.style.display="")}}setDetectChange(t){this.detectChangeCallback=t}setValue(t){this.value=t,this.selectedOptionIndex=this._options.findIndex(e=>JSON.stringify(e.value)===JSON.stringify(t)),this.updateButtonText()}}class tt extends m{constructor(t){var e,i;super(t),this.inputType="text",this.value=t.default??((i=(e=t.options)==null?void 0:e[0])==null?void 0:i.value)??"",this.detectChangeCallback=t.detectChange}draw(){var a,o;const t=document.createElement("div");t.className="toggle-setting-container",this.props.icon&&t.classList.add("toggle-with-icon");const e=document.createElement("div");if(e.className="toggle-label",this.props.icon){const l=document.createElement("span");l.className="toggle-icon",l.innerHTML=this.props.icon,e.appendChild(l)}if(this.props.title){const l=document.createElement("span");l.textContent=this.props.title,e.appendChild(l)}t.appendChild(e);const i=document.createElement("label");i.className="toggle-switch";const s=document.createElement("input");s.type="checkbox",s.checked=((o=(a=this.props.options)==null?void 0:a.find(l=>l.value===this.value))==null?void 0:o.status)??!1,s.addEventListener("change",()=>{var r,h;const l=((h=(r=this.props.options)==null?void 0:r.find(u=>u.status===s.checked))==null?void 0:h.value)??"";this.value=l,this.onChange&&this.onChange(this.value),this.detectChangeCallback&&this.detectChangeCallback(this.value)});const n=document.createElement("span");if(n.className="toggle-slider",this.props.activeColor||this.props.inactiveColor){const l=document.createElement("style"),r=this.props.activeColor||"#4CAF50",h=this.props.inactiveColor||"#ccc";l.textContent=`
|
|
85
85
|
.toggle-switch input:checked + .toggle-slider {
|
|
86
|
-
background-color: ${
|
|
86
|
+
background-color: ${r};
|
|
87
87
|
}
|
|
88
88
|
.toggle-switch .toggle-slider {
|
|
89
|
-
background-color: ${
|
|
89
|
+
background-color: ${h};
|
|
90
90
|
}
|
|
91
91
|
`,document.head.appendChild(l)}return i.appendChild(s),i.appendChild(n),t.appendChild(i),t}setDetectChange(t){this.detectChangeCallback=t}}const et=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
92
92
|
<path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
93
|
-
</svg>`;class it extends m{constructor(t={}){t.rowGap=t.rowGap??!0,t.columnGap=t.columnGap??!0,t.title=t.title??"Gap",t.icon=t.icon??et,t.suffix=t.suffix??"px",t.minValue=t.minValue??0,super(t),this.inputType="number",this.inputValues={},this.mobileValue=t.mobile,this.value=this.validateValue(t.default??0),t.rowGap&&(this.inputValues.row=this.value),t.columnGap&&(this.inputValues.column=this.value)}draw(){const t=document.createElement("div");t.className=`setting-container ${this.props.className||""}`,t.id=this.id;const e=document.createElement("div");e.className="setting-label-input-wrapper";const i=document.createElement("label");i.className="setting-label",i.setAttribute("for",this.id+"-input");const s=document.createElement("span");if(s.textContent=this.props.title??"Gap",i.appendChild(s),this.props.icon){const o=document.createElement("span");o.className="setting-icon",o.innerHTML=this.props.icon,i.insertBefore(o,s)}const n=document.createElement("div");n.className=`setting-input-wrapper ${this.props.wrapperClassName||""}`,n.classList.add("gap-setting-wrapper");const a=document.createElement("div");return a.className="gap-inputs-container",this.props.rowGap&&a.appendChild(this.createGapInput("row","Row")),this.props.columnGap&&a.appendChild(this.createGapInput("column","Col")),n.appendChild(a),e.appendChild(i),e.appendChild(n),t.appendChild(e),t}createGapInput(t,e){const i=document.createElement("div");i.className="gap-input-wrapper";const s=document.createElement("input");if(s.type="number",s.className=`gap-input gap-${t}-input ${this.props.inputClassName||""}`,s.id=`${this.id}-${t}-input`,s.min=String(this.props.minValue??0),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),s.step=String(this.props.step??1),s.value=String(this.inputValues[t]??this.value),s.title=e,s.addEventListener("input",n=>{const a=n.target;let o=parseFloat(a.value);o=this.validateValue(o),String(o)!==a.value&&(a.value=String(o)),this.inputValues[t]=o,this.setValue(o)}),s.addEventListener("blur",n=>{var l,h;const a=n.target;let o=parseFloat(a.value);o=this.validateValue(o),String(o)!==a.value&&(a.value=String(o),this.inputValues[t]=o,this.setValue(o)),(h=(l=this.props).onBlur)==null||h.call(l)}),i.appendChild(s),this.props.suffix&&this.props.suffix!=="none"){const n=document.createElement("span");n.className="gap-suffix",n.textContent=this.props.suffix,i.appendChild(n),s.style.paddingRight="30px"}return i}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}}class x extends f{constructor(t){var o;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");const e=t.tabs,i=t.activeTabId||((o=e[0])==null?void 0:o.id)||"",s=e.find(l=>l.id===i),n=s?s.settings:{},a={title:t.title||"",settings:n,collapsed:t.collapsed,main:t.main,description:t.description,icon:t.icon,custom:t.custom,hideCondition:t.hideCondition,onBlur:t.onBlur};super(a),this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.previousTabId="",this.container=null,this.tabValues={},this.internalChangeTimeout=null,this.isHandlingInternalChange=!1,this.INTERNAL_CHANGE_DEBOUNCE=50,this.tabs=e,this.activeTabId=i,this.previousTabId=i,this.onStateChangeCallback=t.onStateChange,this.detectChangeCallback=t.detectChange,this.initializeTabValues(),this.connectChildChangeHandlers()}updateSettingsFromTab(t){const e=this.tabs.find(i=>i.id===t);e&&(this.settings=e.settings,this.tabValues[t]=this.getTabValues(e),this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},Object.values(e.settings).forEach(i=>{i instanceof x&&(i._parentTabsSettings=this)}),this.connectChildChangeHandlers())}connectChildChangeHandlers(){if(!this.settings)return;const t=()=>{Promise.resolve().then(()=>{if(this.activeTabId){const e=this.tabs.find(i=>i.id===this.activeTabId);e&&(this.tabValues[this.activeTabId]=this.getTabValues(e))}this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},this.triggerDebouncedChange()})};Object.values(this.settings).forEach(e=>{e instanceof f?e.setOnChange(()=>{t()}):e instanceof m&&e.setOnChange(()=>{t()})}),this.tabs.forEach(e=>{Object.entries(e.settings).forEach(([i,s])=>{(s instanceof f||s instanceof m)&&(s instanceof x?(s._parentTabsSettings=this,s.setOnChange(n=>{Promise.resolve().then(()=>{this.tabValues[e.id]=this.getTabValues(e),this.triggerDebouncedChange()})})):s instanceof f?s.setOnChange(()=>{Promise.resolve().then(()=>{this.tabValues[e.id]=this.getTabValues(e),this.triggerDebouncedChange()})}):s instanceof m&&s.setOnChange(()=>{Promise.resolve().then(()=>{this.tabValues[e.id]=this.getTabValues(e),this.triggerDebouncedChange()})}))})})}draw(){const t=super.draw();this.container=t,t.classList.add("tabs-settings-container");const e=document.createElement("div");e.classList.add("tabs-header"),this.main&&e.classList.add("main-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)});const i=t.querySelector(".setting-group-content");return i&&t.insertBefore(e,i),t}handleTabClick(t){var o,l;if(t===this.activeTabId)return;const e=this.tabs.find(h=>h.id===this.activeTabId);e&&(this.tabValues[this.activeTabId]=this.getTabValues(e)),this.previousTabId=this.activeTabId,this.activeTabId=t;const i=(o=this.tabsContainer)==null?void 0:o.querySelectorAll(".tab-button");i==null||i.forEach(h=>{if(h instanceof HTMLElement){const r=this.tabs.find(u=>u.label===h.textContent);h.classList.toggle("active",(r==null?void 0:r.id)===t)}}),this.updateSettingsFromTab(t);const s=(l=this.container)==null?void 0:l.querySelector(".setting-group-content");if(s){s.innerHTML="";const h=this.settings;Object.values(h).forEach(r=>{s.appendChild(r.draw())})}const n=this.getValues();this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},this.connectChildChangeHandlers(),this.onStateChangeCallback&&this.onStateChangeCallback(t,n),this.detectChangeCallback&&this.detectChangeCallback(t,n),this.onChange&&this.onChange(n);const a=this.findParentTabsSettings();a&&a.onChange&&a.onChange(a.getValues())}findParentTabsSettings(){return this._parentTabsSettings||null}setOnStateChange(t){return this.onStateChangeCallback=t,this}setDetectChange(t){return this.detectChangeCallback=t,this}getActiveTabId(){return this.activeTabId}getValues(){return this.updateTabValues(),{tabs:this.tabValues,activeTabId:this.activeTabId}}updateTabValues(){!this.tabs||this.tabs.length===0||this.tabs.forEach(t=>{this.tabValues[t.id]=this.getTabValues(t)})}propagateChanges(){const t=this.findParentTabsSettings();t&&(t.updateTabValues(),t.triggerDebouncedChange())}triggerDebouncedChange(){this.isHandlingInternalChange||(this.isHandlingInternalChange=!0,this.internalChangeTimeout&&clearTimeout(this.internalChangeTimeout),this.internalChangeTimeout=setTimeout(()=>{this.onChange&&this.onChange(this.getValues()),this.isHandlingInternalChange=!1,this.internalChangeTimeout=null;const t=this.findParentTabsSettings();t&&t.triggerDebouncedChange()},this.INTERNAL_CHANGE_DEBOUNCE))}updateInitialValues(){!this.tabs||this.tabs.length===0||(this.updateTabValues(),this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},this.tabs.forEach(t=>{Object.values(t.settings).forEach(e=>{e instanceof x&&e.updateInitialValues()})}))}setOnChange(t){return this.onChange=t,this.connectChildChangeHandlers(),this.updateTabValues(),this}initializeTabValues(){!this.tabs||this.tabs.length===0||(this.tabs.forEach(t=>{this.tabValues[t.id]=this.getTabValues(t)}),this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId})}getTabValues(t){const e={};return Object.entries(t.settings).forEach(([i,s])=>{s instanceof x||s instanceof f?e[i]=s.getValues():(s instanceof m,e[i]=s.value)}),e}clone(){const t=this.tabs.map(i=>{const s={};return Object.entries(i.settings).forEach(([n,a])=>{typeof a.clone=="function"?s[n]=a.clone():(console.warn(`Setting with key '${n}' in tab '${i.id}' does not have a clone method. Copying reference.`),s[n]=a)}),{...i,settings:s}}),e={title:this.title,tabs:t,activeTabId:this.activeTabId,collapsed:this.isCollapsed,main:this.isMain,description:this.description,icon:this.icon,custom:this.custom,hideCondition:this.hideCondition,settings:{}};return new x(e)}setValue(t){if(t&&typeof t=="object"){let e=!1;if(t.activeTabId&&t.activeTabId!==this.activeTabId&&(this.previousTabId=this.activeTabId,this.activeTabId=t.activeTabId,e=!0),t.tabs&&typeof t.tabs=="object"&&Object.entries(t.tabs).forEach(([i,s])=>{const n=this.tabs.find(a=>a.id===i);n&&s&&typeof s=="object"&&Object.entries(s).forEach(([a,o])=>{n.settings[a]&&typeof n.settings[a].setValue=="function"&&n.settings[a].setValue(o)})}),this.updateTabValues(),this.triggerDebouncedChange(),this.container){if(this.updateSettingsFromTab(this.activeTabId),this.tabsContainer){const s=this.tabsContainer.querySelectorAll(".tab-button");s==null||s.forEach(n=>{if(n instanceof HTMLElement){const a=this.tabs.find(o=>o.label===n.textContent);n.classList.toggle("active",(a==null?void 0:a.id)===this.activeTabId)}})}const i=this.container.querySelector(".setting-group-content");if(i){i.innerHTML="";const s=this.settings;Object.values(s).forEach(n=>{i.appendChild(n.draw())})}e&&this.onStateChangeCallback&&this.onStateChangeCallback(this.activeTabId,this.getValues())}this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId}}}updateTabSetting(t,e,i){const s=this.tabs.find(a=>a.id===t);if(!s||!s.settings[e])return;const n=s.settings[e];typeof n.setValue=="function"&&(n.setValue(i),this.tabValues[t]=this.getTabValues(s),t!==this.activeTabId&&this.onChange&&this.onChange(this.getValues()))}getTabsConfiguration(){return this.tabs}}const st=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
93
|
+
</svg>`;class it extends m{constructor(t={}){t.rowGap=t.rowGap??!0,t.columnGap=t.columnGap??!0,t.title=t.title??"Gap",t.icon=t.icon??et,t.suffix=t.suffix??"px",t.minValue=t.minValue??0,super(t),this.inputType="number",this.inputValues={},this.mobileValue=t.mobile,this.value=this.validateValue(t.default??0),t.rowGap&&(this.inputValues.row=this.value),t.columnGap&&(this.inputValues.column=this.value)}draw(){const t=document.createElement("div");t.className=`setting-container ${this.props.className||""}`,t.id=this.id;const e=document.createElement("div");e.className="setting-label-input-wrapper";const i=document.createElement("label");i.className="setting-label",i.setAttribute("for",this.id+"-input");const s=document.createElement("span");if(s.textContent=this.props.title??"Gap",i.appendChild(s),this.props.icon){const o=document.createElement("span");o.className="setting-icon",o.innerHTML=this.props.icon,i.insertBefore(o,s)}const n=document.createElement("div");n.className=`setting-input-wrapper ${this.props.wrapperClassName||""}`,n.classList.add("gap-setting-wrapper");const a=document.createElement("div");return a.className="gap-inputs-container",this.props.rowGap&&a.appendChild(this.createGapInput("row","Row")),this.props.columnGap&&a.appendChild(this.createGapInput("column","Col")),n.appendChild(a),e.appendChild(i),e.appendChild(n),t.appendChild(e),t}createGapInput(t,e){const i=document.createElement("div");i.className="gap-input-wrapper";const s=document.createElement("input");if(s.type="number",s.className=`gap-input gap-${t}-input ${this.props.inputClassName||""}`,s.id=`${this.id}-${t}-input`,s.min=String(this.props.minValue??0),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),s.step=String(this.props.step??1),s.value=String(this.inputValues[t]??this.value),s.title=e,s.addEventListener("input",n=>{const a=n.target;let o=parseFloat(a.value);o=this.validateValue(o),String(o)!==a.value&&(a.value=String(o)),this.inputValues[t]=o,this.setValue(o)}),s.addEventListener("blur",n=>{var l,r;const a=n.target;let o=parseFloat(a.value);o=this.validateValue(o),String(o)!==a.value&&(a.value=String(o),this.inputValues[t]=o,this.setValue(o)),(r=(l=this.props).onBlur)==null||r.call(l)}),i.appendChild(s),this.props.suffix&&this.props.suffix!=="none"){const n=document.createElement("span");n.className="gap-suffix",n.textContent=this.props.suffix,i.appendChild(n),s.style.paddingRight="30px"}return i}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}}class E extends f{constructor(t){var o;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");const e=t.tabs,i=t.activeTabId||((o=e[0])==null?void 0:o.id)||"",s=e.find(l=>l.id===i),n=s?s.settings:{},a={title:t.title||"",settings:n,collapsed:t.collapsed,main:t.main,description:t.description,icon:t.icon,custom:t.custom,hideCondition:t.hideCondition,onBlur:t.onBlur};super(a),this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.previousTabId="",this.container=null,this.tabValues={},this.internalChangeTimeout=null,this.isHandlingInternalChange=!1,this.INTERNAL_CHANGE_DEBOUNCE=50,this.tabs=e,this.activeTabId=i,this.previousTabId=i,this.onStateChangeCallback=t.onStateChange,this.detectChangeCallback=t.detectChange,this.initializeTabValues(),this.connectChildChangeHandlers()}updateSettingsFromTab(t){const e=this.tabs.find(i=>i.id===t);e&&(this.settings=e.settings,this.tabValues[t]=this.getTabValues(e),this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},Object.values(e.settings).forEach(i=>{i instanceof E&&(i._parentTabsSettings=this)}),this.connectChildChangeHandlers())}connectChildChangeHandlers(){if(!this.settings)return;const t=()=>{Promise.resolve().then(()=>{if(this.activeTabId){const e=this.tabs.find(i=>i.id===this.activeTabId);e&&(this.tabValues[this.activeTabId]=this.getTabValues(e))}this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},this.triggerDebouncedChange()})};Object.values(this.settings).forEach(e=>{e instanceof f?e.setOnChange(()=>{t()}):e instanceof m&&e.setOnChange(()=>{t()})}),this.tabs.forEach(e=>{Object.entries(e.settings).forEach(([i,s])=>{(s instanceof f||s instanceof m)&&(s instanceof E?(s._parentTabsSettings=this,s.setOnChange(n=>{Promise.resolve().then(()=>{this.tabValues[e.id]=this.getTabValues(e),this.triggerDebouncedChange()})})):s instanceof f?s.setOnChange(()=>{Promise.resolve().then(()=>{this.tabValues[e.id]=this.getTabValues(e),this.triggerDebouncedChange()})}):s instanceof m&&s.setOnChange(()=>{Promise.resolve().then(()=>{this.tabValues[e.id]=this.getTabValues(e),this.triggerDebouncedChange()})}))})})}draw(){const t=super.draw();this.container=t,t.classList.add("tabs-settings-container");const e=document.createElement("div");e.classList.add("tabs-header"),this.main&&e.classList.add("main-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)});const i=t.querySelector(".setting-group-content");return i&&t.insertBefore(e,i),t}handleTabClick(t){var o,l;if(t===this.activeTabId)return;const e=this.tabs.find(r=>r.id===this.activeTabId);e&&(this.tabValues[this.activeTabId]=this.getTabValues(e)),this.previousTabId=this.activeTabId,this.activeTabId=t;const i=(o=this.tabsContainer)==null?void 0:o.querySelectorAll(".tab-button");i==null||i.forEach(r=>{if(r instanceof HTMLElement){const h=this.tabs.find(u=>u.label===r.textContent);r.classList.toggle("active",(h==null?void 0:h.id)===t)}}),this.updateSettingsFromTab(t);const s=(l=this.container)==null?void 0:l.querySelector(".setting-group-content");if(s){s.innerHTML="";const r=this.settings;Object.values(r).forEach(h=>{s.appendChild(h.draw())})}const n=this.getValues();this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},this.connectChildChangeHandlers(),this.onStateChangeCallback&&this.onStateChangeCallback(t,n),this.detectChangeCallback&&this.detectChangeCallback(t,n),this.onChange&&this.onChange(n);const a=this.findParentTabsSettings();a&&a.onChange&&a.onChange(a.getValues())}findParentTabsSettings(){return this._parentTabsSettings||null}setOnStateChange(t){return this.onStateChangeCallback=t,this}setDetectChange(t){return this.detectChangeCallback=t,this}getActiveTabId(){return this.activeTabId}getValues(){return this.updateTabValues(),{tabs:this.tabValues,activeTabId:this.activeTabId}}updateTabValues(){!this.tabs||this.tabs.length===0||this.tabs.forEach(t=>{this.tabValues[t.id]=this.getTabValues(t)})}propagateChanges(){const t=this.findParentTabsSettings();t&&(t.updateTabValues(),t.triggerDebouncedChange())}triggerDebouncedChange(){this.isHandlingInternalChange||(this.isHandlingInternalChange=!0,this.internalChangeTimeout&&clearTimeout(this.internalChangeTimeout),this.internalChangeTimeout=setTimeout(()=>{this.onChange&&this.onChange(this.getValues()),this.isHandlingInternalChange=!1,this.internalChangeTimeout=null;const t=this.findParentTabsSettings();t&&t.triggerDebouncedChange()},this.INTERNAL_CHANGE_DEBOUNCE))}updateInitialValues(){!this.tabs||this.tabs.length===0||(this.updateTabValues(),this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId},this.tabs.forEach(t=>{Object.values(t.settings).forEach(e=>{e instanceof E&&e.updateInitialValues()})}))}setOnChange(t){return this.onChange=t,this.connectChildChangeHandlers(),this.updateTabValues(),this}initializeTabValues(){!this.tabs||this.tabs.length===0||(this.tabs.forEach(t=>{this.tabValues[t.id]=this.getTabValues(t)}),this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId})}getTabValues(t){const e={};return Object.entries(t.settings).forEach(([i,s])=>{s instanceof E||s instanceof f?e[i]=s.getValues():(s instanceof m,e[i]=s.value)}),e}clone(){const t=this.tabs.map(i=>{const s={};return Object.entries(i.settings).forEach(([n,a])=>{typeof a.clone=="function"?s[n]=a.clone():(console.warn(`Setting with key '${n}' in tab '${i.id}' does not have a clone method. Copying reference.`),s[n]=a)}),{...i,settings:s}}),e={title:this.title,tabs:t,activeTabId:this.activeTabId,collapsed:this.isCollapsed,main:this.isMain,description:this.description,icon:this.icon,custom:this.custom,hideCondition:this.hideCondition,settings:{}};return new E(e)}setValue(t){if(t&&typeof t=="object"){let e=!1;if(t.activeTabId&&t.activeTabId!==this.activeTabId&&(this.previousTabId=this.activeTabId,this.activeTabId=t.activeTabId,e=!0),t.tabs&&typeof t.tabs=="object"&&Object.entries(t.tabs).forEach(([i,s])=>{const n=this.tabs.find(a=>a.id===i);n&&s&&typeof s=="object"&&Object.entries(s).forEach(([a,o])=>{n.settings[a]&&typeof n.settings[a].setValue=="function"&&n.settings[a].setValue(o)})}),this.updateTabValues(),this.triggerDebouncedChange(),this.container){if(this.updateSettingsFromTab(this.activeTabId),this.tabsContainer){const s=this.tabsContainer.querySelectorAll(".tab-button");s==null||s.forEach(n=>{if(n instanceof HTMLElement){const a=this.tabs.find(o=>o.label===n.textContent);n.classList.toggle("active",(a==null?void 0:a.id)===this.activeTabId)}})}const i=this.container.querySelector(".setting-group-content");if(i){i.innerHTML="";const s=this.settings;Object.values(s).forEach(n=>{i.appendChild(n.draw())})}e&&this.onStateChangeCallback&&this.onStateChangeCallback(this.activeTabId,this.getValues())}this.initialValues={tabs:this.tabValues,activeTabId:this.activeTabId}}}updateTabSetting(t,e,i){const s=this.tabs.find(a=>a.id===t);if(!s||!s.settings[e])return;const n=s.settings[e];typeof n.setValue=="function"&&(n.setValue(i),this.tabValues[t]=this.getTabValues(s),t!==this.activeTabId&&this.onChange&&this.onChange(this.getValues()))}getTabsConfiguration(){return this.tabs}}const st=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
94
94
|
<path d="M2.25 11.75H15.75M5.85 2.75H12.15C13.4101 2.75 14.0402 2.75 14.5215 2.99524C14.9448 3.21095 15.289 3.55516 15.5048 3.97852C15.75 4.45982 15.75 5.08988 15.75 6.35V12.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.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.65V6.35C2.25 5.08988 2.25 4.45982 2.49524 3.97852C2.71095 3.55516 3.05516 3.21095 3.47852 2.99524C3.95982 2.75 4.58988 2.75 5.85 2.75Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
95
95
|
</svg>`;class nt extends b{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||st,title:t.title||"Margin Bottom",default:t.default??20,wrapperClassName:"margin-bottom-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}const at=`
|
|
96
96
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
@@ -105,11 +105,11 @@
|
|
|
105
105
|
border-width: ${s}px;
|
|
106
106
|
border-radius: ${i}px;
|
|
107
107
|
opacity: ${e/100};
|
|
108
|
-
`}}const
|
|
108
|
+
`}}const ht=`
|
|
109
109
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
110
110
|
<path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
111
111
|
</svg>
|
|
112
|
-
`,
|
|
112
|
+
`,rt=`
|
|
113
113
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
114
114
|
<path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
115
115
|
</svg>
|
|
@@ -117,14 +117,14 @@
|
|
|
117
117
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
118
118
|
<path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
119
119
|
</svg>
|
|
120
|
-
`;class dt extends f{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new H({default:t.colorDefault??"0, 0, 30"}),opacity:new L({default:t.colorOpacityDefault??100}),fontFamily:new N({title:"Font",icon:
|
|
120
|
+
`;class dt extends f{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new H({default:t.colorDefault??"0, 0, 30"}),opacity:new L({default:t.colorOpacityDefault??100}),fontFamily:new N({title:"Font",icon:ht,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new N({title:"Weight",icon:rt,default:t.fontWeightDefault??"400",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new b({title:"Size",icon:ct,default:t.fontSizeDefault??12,suffix:"px",mobile:t.fontSizeMobileDefault}),align:new A({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",s=this.settings.fontWeight.value??"bold",n=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
|
|
121
121
|
color: ${t};
|
|
122
122
|
opacity: ${e/100};
|
|
123
123
|
font-family: ${i};
|
|
124
124
|
font-weight: ${s};
|
|
125
125
|
font-size: ${n}px;
|
|
126
126
|
text-align: ${a};
|
|
127
|
-
`}}class T extends m{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=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,
|
|
127
|
+
`}}class T extends m{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=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 ut extends f{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{marginTop:new T({title:"Top",icon:pt,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new T({title:"Right",icon:gt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new T({title:"Bottom",icon:mt,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new T({title:"Left",icon:ft,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`
|
|
128
128
|
margin-top: ${t};
|
|
129
129
|
margin-right: ${e};
|
|
130
130
|
margin-bottom: ${i};
|
|
@@ -166,4 +166,4 @@
|
|
|
166
166
|
`:`
|
|
167
167
|
background-color: ${i};
|
|
168
168
|
opacity: ${s/100};
|
|
169
|
-
`}}exports.AlignSetting=A;exports.BackgroundSettingSet=bt;exports.BorderSettingSet=lt;exports.ButtonSetting=D;exports.ColorSetting=H;exports.DimensionSetting=F;exports.GapSetting=it;exports.HeaderTypographySettingSet=dt;exports.HeightSetting=Z;exports.MarginBottomSetting=nt;exports.MarginSettingGroup=ut;exports.NumberSetting=b;exports.OpacitySetting=L;exports.SelectApiSettings=K;exports.SelectSetting=N;exports.Setting=m;exports.SettingGroup=f;exports.StringSetting=M;exports.TabsContainerGroup=vt;exports.TabsSettings=
|
|
169
|
+
`}}exports.AlignSetting=A;exports.BackgroundSettingSet=bt;exports.BorderSettingSet=lt;exports.ButtonSetting=D;exports.ColorSetting=H;exports.DimensionSetting=F;exports.GapSetting=it;exports.HeaderTypographySettingSet=dt;exports.HeightSetting=Z;exports.MarginBottomSetting=nt;exports.MarginSettingGroup=ut;exports.NumberSetting=b;exports.OpacitySetting=L;exports.SelectApiSettings=K;exports.SelectSetting=N;exports.Setting=m;exports.SettingGroup=f;exports.StringSetting=M;exports.TabsContainerGroup=vt;exports.TabsSettings=E;exports.Toggle=tt;exports.UploadSetting=_;exports.WidthSetting=X;exports.iterateSettings=y;
|
|
@@ -122,12 +122,18 @@ function M(c, t) {
|
|
|
122
122
|
t(e, i);
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
|
-
const
|
|
125
|
+
const E = class E {
|
|
126
126
|
constructor(t) {
|
|
127
127
|
this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastValues = {}, this.lastChangeTime = 0, this.CHANGE_DEBOUNCE = 100, this.handleBlur = () => {
|
|
128
128
|
}, this.pendingBlurHandler = null, this.hasFocus = !1, this.focusTrackingEnabled = !1, this.handleFocus = () => {
|
|
129
|
-
}, this.blurDebounceTime = 100, this.lastBlurTime = 0, this.isProcessingBlur = !1, this.isInteracting = !1, this.interactionStartTime = 0, this.modifiedSettings = /* @__PURE__ */ new Set(), this.handleInteractionStart = (e) => {
|
|
129
|
+
}, this.blurDebounceTime = 100, this.lastBlurTime = 0, this.isProcessingBlur = !1, this.isInteracting = !1, this.interactionStartTime = 0, this.modifiedSettings = /* @__PURE__ */ new Set(), this.activeSettingId = null, this.hasValueChanged = !1, this.handleInteractionStart = (e) => {
|
|
130
130
|
this.isInteracting || (this.isInteracting = !0, this.interactionStartTime = Date.now(), this.modifiedSettings.clear(), console.log(`[${this.title}] Setting interaction started`));
|
|
131
|
+
}, this.handleChange = (e) => {
|
|
132
|
+
if (e.target instanceof HTMLElement) {
|
|
133
|
+
this.hasValueChanged = !0;
|
|
134
|
+
const i = e.target.closest("[data-setting-id]");
|
|
135
|
+
i && (this.activeSettingId = i.getAttribute("data-setting-id"));
|
|
136
|
+
}
|
|
131
137
|
}, this.id = t.id || R(), 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.blurDebounceTime = t.blurDebounceTime ?? 100, Object.assign(this, t.settings), this.initialValues = this.getValues();
|
|
132
138
|
}
|
|
133
139
|
static hide() {
|
|
@@ -148,28 +154,25 @@ const x = class x {
|
|
|
148
154
|
this.initialValues,
|
|
149
155
|
i
|
|
150
156
|
);
|
|
151
|
-
|
|
152
|
-
this.lastChangeTime = Date.now();
|
|
153
|
-
for (const n of Object.keys(s))
|
|
154
|
-
this.modifiedSettings.add(n);
|
|
155
|
-
this.initialValues = i, t(i), this.updateVisibility();
|
|
156
|
-
}
|
|
157
|
-
this.isHandlingChange = !1;
|
|
157
|
+
Object.keys(s).length > 0 && (this.hasValueChanged = !0, this.lastChangeTime = Date.now(), this.initialValues = i, t(i), this.updateVisibility()), this.isHandlingChange = !1;
|
|
158
158
|
}, 50));
|
|
159
159
|
};
|
|
160
160
|
return this.changeHandlers.clear(), M(this.settings, (i, s) => {
|
|
161
161
|
var n;
|
|
162
|
-
if (s instanceof
|
|
162
|
+
if (s instanceof E)
|
|
163
163
|
s.setOnChange((a) => {
|
|
164
|
+
this.hasValueChanged = !0;
|
|
164
165
|
const o = this.getValues();
|
|
165
166
|
this.initialValues = o, t(o);
|
|
166
167
|
}), this.changeHandlers.add(() => t(this.getValues()));
|
|
167
168
|
else if (s instanceof m) {
|
|
168
|
-
const a = () =>
|
|
169
|
+
const a = () => {
|
|
170
|
+
this.hasValueChanged = !0, e();
|
|
171
|
+
};
|
|
169
172
|
this.changeHandlers.add(a), s.setOnChange(a);
|
|
170
173
|
} else {
|
|
171
174
|
const a = () => {
|
|
172
|
-
e();
|
|
175
|
+
this.hasValueChanged = !0, e();
|
|
173
176
|
};
|
|
174
177
|
this.changeHandlers.add(a), (n = s.setOnChange) == null || n.call(s, a);
|
|
175
178
|
}
|
|
@@ -177,15 +180,16 @@ const x = class x {
|
|
|
177
180
|
}
|
|
178
181
|
setOnBlur(t, e) {
|
|
179
182
|
return this.onBlur = t, this.pendingBlurHandler = t, this.focusTrackingEnabled = !0, e !== void 0 && (this.blurDebounceTime = e), this.handleBlur = (i) => {
|
|
183
|
+
if (!this.hasValueChanged && !i) return;
|
|
184
|
+
let n = null;
|
|
180
185
|
if ((i == null ? void 0 : i.target) instanceof HTMLElement) {
|
|
181
|
-
const
|
|
182
|
-
|
|
183
|
-
return;
|
|
186
|
+
const a = i.target.closest("[data-setting-id]");
|
|
187
|
+
a && (n = a.getAttribute("data-setting-id"));
|
|
184
188
|
}
|
|
185
189
|
this.blurTimeout && clearTimeout(this.blurTimeout), this.blurTimeout = setTimeout(() => {
|
|
186
190
|
this.saveChangesImmediately();
|
|
187
|
-
const
|
|
188
|
-
this.onBlur && this.onBlur(
|
|
191
|
+
const a = this.getValues();
|
|
192
|
+
(this.activeSettingId !== n || this.hasValueChanged) && this.onBlur && (this.onBlur(a), this.hasValueChanged = !1), this.activeSettingId = n;
|
|
189
193
|
}, this.blurDebounceTime);
|
|
190
194
|
}, this.elementRef && this.setupFocusHandlers(), this;
|
|
191
195
|
}
|
|
@@ -196,7 +200,7 @@ const x = class x {
|
|
|
196
200
|
}
|
|
197
201
|
setupFocusHandlers() {
|
|
198
202
|
if (!this.elementRef || !this.focusTrackingEnabled) return;
|
|
199
|
-
this.elementRef.removeEventListener("focusout", this.handleBlur), this.elementRef.addEventListener("focusout", this.handleBlur);
|
|
203
|
+
this.elementRef.removeEventListener("focusout", this.handleBlur), this.elementRef.removeEventListener("change", this.handleChange), this.elementRef.removeEventListener("input", this.handleChange), this.elementRef.addEventListener("focusout", this.handleBlur), this.elementRef.addEventListener("change", this.handleChange), this.elementRef.addEventListener("input", this.handleChange);
|
|
200
204
|
const t = this.elementRef.closest("form");
|
|
201
205
|
t && (t.removeEventListener("submit", this.handleBlur), t.addEventListener("submit", this.handleBlur)), document.addEventListener("visibilitychange", () => {
|
|
202
206
|
document.visibilityState === "hidden" && this.elementRef && document.activeElement && this.elementRef.contains(document.activeElement) && this.handleBlur();
|
|
@@ -204,7 +208,7 @@ const x = class x {
|
|
|
204
208
|
}
|
|
205
209
|
cleanup() {
|
|
206
210
|
if (this.changeTimeout && (clearTimeout(this.changeTimeout), this.changeTimeout = null), this.blurTimeout && (clearTimeout(this.blurTimeout), this.blurTimeout = null), this.elementRef) {
|
|
207
|
-
this.elementRef.removeEventListener("focusout", this.handleBlur);
|
|
211
|
+
this.elementRef.removeEventListener("focusout", this.handleBlur), this.elementRef.removeEventListener("change", this.handleChange), this.elementRef.removeEventListener("input", this.handleChange);
|
|
208
212
|
const t = this.elementRef.closest("form");
|
|
209
213
|
t && t.removeEventListener("submit", this.handleBlur);
|
|
210
214
|
}
|
|
@@ -212,7 +216,7 @@ const x = class x {
|
|
|
212
216
|
document.visibilityState === "hidden" && this.elementRef && document.activeElement && this.elementRef.contains(document.activeElement) && this.handleBlur();
|
|
213
217
|
}), M(this.settings, (t, e) => {
|
|
214
218
|
typeof e.cleanup == "function" && e.cleanup();
|
|
215
|
-
}), this.changeHandlers.clear();
|
|
219
|
+
}), this.changeHandlers.clear(), this.activeSettingId = null, this.hasValueChanged = !1;
|
|
216
220
|
}
|
|
217
221
|
clone() {
|
|
218
222
|
const t = {};
|
|
@@ -253,17 +257,17 @@ const x = class x {
|
|
|
253
257
|
for (const i in this.settings)
|
|
254
258
|
if (this.settings.hasOwnProperty(i)) {
|
|
255
259
|
const s = this.settings[i];
|
|
256
|
-
s instanceof
|
|
260
|
+
s instanceof E ? e[i] = s.getValues() : e[i] = s.value;
|
|
257
261
|
}
|
|
258
262
|
return e;
|
|
259
263
|
} else {
|
|
260
264
|
const e = this.settings[t];
|
|
261
|
-
return e ? (this.isInteracting && this.modifiedSettings.add(t), e instanceof
|
|
265
|
+
return e ? (this.isInteracting && this.modifiedSettings.add(t), e instanceof E ? e.getValues() : e.value) : void 0;
|
|
262
266
|
}
|
|
263
267
|
}
|
|
264
268
|
draw() {
|
|
265
269
|
const t = document.createElement("div");
|
|
266
|
-
t.className = "setting-group", t.id = `setting-group-${this.id}`,
|
|
270
|
+
t.className = "setting-group", t.id = `setting-group-${this.id}`, E.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
|
|
267
271
|
const e = document.createElement("div");
|
|
268
272
|
e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
|
|
269
273
|
"aria-expanded",
|
|
@@ -271,21 +275,21 @@ const x = class x {
|
|
|
271
275
|
), e.setAttribute("tabindex", "0");
|
|
272
276
|
const i = document.createElement("div");
|
|
273
277
|
if (i.className = "title-section", this.icon) {
|
|
274
|
-
const
|
|
275
|
-
|
|
278
|
+
const h = document.createElement("span");
|
|
279
|
+
h.className = "group-icon", h.innerHTML = this.icon, i.appendChild(h);
|
|
276
280
|
}
|
|
277
281
|
this.custom && t.classList.add("custom_class");
|
|
278
282
|
const s = document.createElement("h3");
|
|
279
283
|
s.textContent = this.title, i.appendChild(s);
|
|
280
284
|
const n = document.createElement("div");
|
|
281
285
|
if (n.className = "actions-section", this.description && this.isCollapsed) {
|
|
282
|
-
const
|
|
283
|
-
|
|
286
|
+
const h = document.createElement("span");
|
|
287
|
+
h.className = "info-marker", h.innerHTML = `
|
|
284
288
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
285
289
|
<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"
|
|
286
290
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
287
291
|
</svg>
|
|
288
|
-
`,
|
|
292
|
+
`, h.title = this.description, n.appendChild(h);
|
|
289
293
|
}
|
|
290
294
|
const a = document.createElement("span");
|
|
291
295
|
a.className = "setting-group-arrow", a.innerHTML = `
|
|
@@ -295,20 +299,20 @@ const x = class x {
|
|
|
295
299
|
`, this.isCollapsed && a.classList.add("rotated"), n.appendChild(a);
|
|
296
300
|
const o = document.createElement("div");
|
|
297
301
|
if (o.className = "setting-group-content", this.isCollapsed && (o.classList.add("collapsed"), e.classList.add("collapsed-view"), a.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && o.classList.add("main-content"), this.description && !this.isCollapsed) {
|
|
298
|
-
const
|
|
299
|
-
|
|
302
|
+
const h = document.createElement("div");
|
|
303
|
+
h.className = "setting-group-description", h.textContent = this.description, o.appendChild(h);
|
|
300
304
|
}
|
|
301
305
|
const l = () => {
|
|
302
306
|
this.isCollapsed = !this.isCollapsed, o.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), a.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
|
|
303
307
|
"aria-expanded",
|
|
304
308
|
(!this.isCollapsed).toString()
|
|
305
309
|
);
|
|
306
|
-
const
|
|
310
|
+
const h = o.querySelector(
|
|
307
311
|
".setting-group-description"
|
|
308
312
|
), u = n.querySelector(".info-marker");
|
|
309
313
|
if (this.description)
|
|
310
314
|
if (this.isCollapsed) {
|
|
311
|
-
if (
|
|
315
|
+
if (h && h.remove(), !u) {
|
|
312
316
|
const d = document.createElement("span");
|
|
313
317
|
d.className = "info-marker", d.innerHTML = `
|
|
314
318
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -318,7 +322,7 @@ const x = class x {
|
|
|
318
322
|
`, d.title = this.description, n.insertBefore(d, a);
|
|
319
323
|
}
|
|
320
324
|
} else {
|
|
321
|
-
if (!
|
|
325
|
+
if (!h) {
|
|
322
326
|
const d = document.createElement("div");
|
|
323
327
|
d.className = "setting-group-description", d.textContent = this.description, o.insertBefore(
|
|
324
328
|
d,
|
|
@@ -328,17 +332,17 @@ const x = class x {
|
|
|
328
332
|
u && u.remove();
|
|
329
333
|
}
|
|
330
334
|
};
|
|
331
|
-
if (e.onclick = l, e.onkeydown = (
|
|
332
|
-
(
|
|
335
|
+
if (e.onclick = l, e.onkeydown = (h) => {
|
|
336
|
+
(h.key === "Enter" || h.key === " ") && (h.preventDefault(), l());
|
|
333
337
|
}, Object.keys(this.settings).length > 0) {
|
|
334
|
-
for (const
|
|
335
|
-
if (this.settings.hasOwnProperty(
|
|
336
|
-
const u = this.settings[
|
|
338
|
+
for (const h in this.settings)
|
|
339
|
+
if (this.settings.hasOwnProperty(h)) {
|
|
340
|
+
const u = this.settings[h];
|
|
337
341
|
o.appendChild(u.draw());
|
|
338
342
|
}
|
|
339
343
|
} else {
|
|
340
|
-
const
|
|
341
|
-
|
|
344
|
+
const h = document.createElement("div");
|
|
345
|
+
h.className = "setting-group-empty", h.textContent = "No settings in this group", o.appendChild(h);
|
|
342
346
|
}
|
|
343
347
|
return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, this.pendingBlurHandler && (this.setupFocusHandlers(), this.pendingBlurHandler = null), t;
|
|
344
348
|
}
|
|
@@ -374,8 +378,8 @@ const x = class x {
|
|
|
374
378
|
Object.keys(e).length > 0 && (this.initialValues = t, this.onChange(t), this.updateVisibility());
|
|
375
379
|
}
|
|
376
380
|
};
|
|
377
|
-
|
|
378
|
-
let f =
|
|
381
|
+
E.hiddenElements = /* @__PURE__ */ new Set();
|
|
382
|
+
let f = E;
|
|
379
383
|
class H extends m {
|
|
380
384
|
constructor(t = {}) {
|
|
381
385
|
super(t), this.inputType = "text", t.onChange && this.setOnChange(t.onChange);
|
|
@@ -440,26 +444,26 @@ class O extends H {
|
|
|
440
444
|
value: this.value,
|
|
441
445
|
inputType: "text",
|
|
442
446
|
inputClassName: "color-text-input"
|
|
443
|
-
}),
|
|
444
|
-
|
|
445
|
-
const
|
|
447
|
+
}), r = l.querySelector("input");
|
|
448
|
+
r.readOnly = !0;
|
|
449
|
+
const h = this.createInput({
|
|
446
450
|
value: this.value ? this.rgbToHex(this.value) : "",
|
|
447
451
|
inputType: this.inputType,
|
|
448
452
|
inputClassName: "color-picker"
|
|
449
|
-
}), u =
|
|
450
|
-
return
|
|
453
|
+
}), u = h.querySelector("input");
|
|
454
|
+
return r.oninput = (d) => {
|
|
451
455
|
var p;
|
|
452
456
|
let g = d.target.value.trim();
|
|
453
|
-
a(
|
|
457
|
+
a(r) && (this.value = g, (p = this.onChange) == null || p.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
|
|
454
458
|
}, u.oninput = (d) => {
|
|
455
459
|
var C, v;
|
|
456
460
|
const g = d.target.value, p = this.hexToRgb(g);
|
|
457
|
-
this.value = p, (C = this.onChange) == null || C.call(this, p), (v = this.detectChange) == null || v.call(this, p),
|
|
461
|
+
this.value = p, (C = this.onChange) == null || C.call(this, p), (v = this.detectChange) == null || v.call(this, p), r.value = p, o.style.backgroundColor = `rgb(${p})`;
|
|
458
462
|
}, u.onchange = (d) => {
|
|
459
463
|
var C, v;
|
|
460
464
|
const g = d.target.value, p = this.hexToRgb(g);
|
|
461
|
-
this.value = p, (C = this.onChange) == null || C.call(this, p), (v = this.detectChange) == null || v.call(this, p),
|
|
462
|
-
}, n.appendChild(o), n.appendChild(
|
|
465
|
+
this.value = p, (C = this.onChange) == null || C.call(this, p), (v = this.detectChange) == null || v.call(this, p), r.value = p, o.style.backgroundColor = `rgb(${p})`;
|
|
466
|
+
}, n.appendChild(o), n.appendChild(h), n.appendChild(l), t.appendChild(e), t.appendChild(n), this.value && (r.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
|
|
463
467
|
}
|
|
464
468
|
}
|
|
465
469
|
class b extends m {
|
|
@@ -517,7 +521,7 @@ const $ = `
|
|
|
517
521
|
<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"/>
|
|
518
522
|
<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"/>
|
|
519
523
|
</svg>`;
|
|
520
|
-
class
|
|
524
|
+
class y extends b {
|
|
521
525
|
constructor(t = {}) {
|
|
522
526
|
const e = {
|
|
523
527
|
title: "Opacity",
|
|
@@ -591,8 +595,8 @@ class B extends m {
|
|
|
591
595
|
selectOption(t, e, i) {
|
|
592
596
|
var n, a, o;
|
|
593
597
|
const s = this._options[e];
|
|
594
|
-
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((
|
|
595
|
-
|
|
598
|
+
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) => {
|
|
599
|
+
h === e ? r.classList.add("selected") : r.classList.remove("selected");
|
|
596
600
|
}));
|
|
597
601
|
}
|
|
598
602
|
updateOptionsList() {
|
|
@@ -690,7 +694,7 @@ class lt extends m {
|
|
|
690
694
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
691
695
|
}
|
|
692
696
|
}
|
|
693
|
-
class
|
|
697
|
+
class ht extends m {
|
|
694
698
|
constructor(t = {}) {
|
|
695
699
|
super(t), this.inputType = { width: "number", height: "number" }, this.aspectRatio = 1, this.isUpdating = !1;
|
|
696
700
|
const e = t.width || 0, i = t.height || 0;
|
|
@@ -838,19 +842,19 @@ class U extends m {
|
|
|
838
842
|
draw() {
|
|
839
843
|
const t = document.createElement("div");
|
|
840
844
|
t.className = "upload-setting-wrapper", t.setAttribute("data-setting-id", this.id), t.addEventListener("focusout", (l) => {
|
|
841
|
-
var
|
|
842
|
-
l.relatedTarget && t.contains(l.relatedTarget) || (
|
|
845
|
+
var r;
|
|
846
|
+
l.relatedTarget && t.contains(l.relatedTarget) || (r = this.onBlur) == null || r.call(this);
|
|
843
847
|
}, !0);
|
|
844
848
|
const e = !!(this.props.title || this.props.icon);
|
|
845
849
|
if (e || t.classList.add("no-label"), e) {
|
|
846
850
|
const l = document.createElement("div");
|
|
847
851
|
if (l.className = "icon-title-container", this.props.icon) {
|
|
848
|
-
const
|
|
849
|
-
l.appendChild(
|
|
852
|
+
const r = this.createIcon(this.props.icon);
|
|
853
|
+
l.appendChild(r);
|
|
850
854
|
}
|
|
851
855
|
if (this.props.title) {
|
|
852
|
-
const
|
|
853
|
-
l.appendChild(
|
|
856
|
+
const r = this.createLabel(this.props.title);
|
|
857
|
+
l.appendChild(r);
|
|
854
858
|
}
|
|
855
859
|
t.appendChild(l);
|
|
856
860
|
}
|
|
@@ -861,9 +865,9 @@ class U extends m {
|
|
|
861
865
|
const n = document.createElement("div");
|
|
862
866
|
if (n.className = "preview-placeholder", n.innerHTML = F, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.props.delete) {
|
|
863
867
|
const l = document.createElement("button");
|
|
864
|
-
l.className = "delete-button", l.type = "button", l.title = "Delete image", l.innerHTML = q, this.previewWrapper.appendChild(l), l.onclick = (
|
|
865
|
-
var
|
|
866
|
-
|
|
868
|
+
l.className = "delete-button", l.type = "button", l.title = "Delete image", l.innerHTML = q, this.previewWrapper.appendChild(l), l.onclick = (r) => {
|
|
869
|
+
var h;
|
|
870
|
+
r.stopPropagation(), this.value = "", o.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, "");
|
|
867
871
|
};
|
|
868
872
|
}
|
|
869
873
|
this.previewWrapper.appendChild(this.previewEl);
|
|
@@ -876,8 +880,8 @@ class U extends m {
|
|
|
876
880
|
return o.type = "file", o.accept = "image/*", o.style.display = "none", i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(a), t.appendChild(i), t.appendChild(o), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = () => {
|
|
877
881
|
o.click();
|
|
878
882
|
}, o.onchange = async () => {
|
|
879
|
-
var
|
|
880
|
-
const l = (
|
|
883
|
+
var r, h, u, d;
|
|
884
|
+
const l = (r = o.files) == null ? void 0 : r[0];
|
|
881
885
|
if (l)
|
|
882
886
|
try {
|
|
883
887
|
a.classList.add("loading"), a.disabled = !0;
|
|
@@ -895,7 +899,7 @@ class U extends m {
|
|
|
895
899
|
let w;
|
|
896
900
|
if (this.props.parseResponse)
|
|
897
901
|
w = this.props.parseResponse(k);
|
|
898
|
-
else if (w = (
|
|
902
|
+
else if (w = (h = k == null ? void 0 : k.data) == null ? void 0 : h.url, !w)
|
|
899
903
|
throw new Error(
|
|
900
904
|
"No URL found in response. Provide a parseResponse if needed."
|
|
901
905
|
);
|
|
@@ -910,7 +914,7 @@ class U extends m {
|
|
|
910
914
|
}, t;
|
|
911
915
|
}
|
|
912
916
|
}
|
|
913
|
-
class
|
|
917
|
+
class rt extends b {
|
|
914
918
|
// Store mobile value
|
|
915
919
|
constructor(t = {}) {
|
|
916
920
|
const e = {
|
|
@@ -1019,7 +1023,7 @@ class dt extends m {
|
|
|
1019
1023
|
const a = new Set(this._options.map((l) => JSON.stringify(l.value))), o = n.filter((l) => !a.has(JSON.stringify(l.value)));
|
|
1020
1024
|
if (this._options.push(...o), this.isLoading = !1, this.hasInitializedOptions = !0, this.value !== void 0) {
|
|
1021
1025
|
const l = this._options.findIndex(
|
|
1022
|
-
(
|
|
1026
|
+
(r) => JSON.stringify(r.value) === JSON.stringify(this.value)
|
|
1023
1027
|
);
|
|
1024
1028
|
this.selectedOptionIndex = l !== -1 ? l : null;
|
|
1025
1029
|
} else
|
|
@@ -1031,7 +1035,7 @@ class dt extends m {
|
|
|
1031
1035
|
const a = new Set(this._options.map((l) => JSON.stringify(l.value))), o = n.filter((l) => !a.has(JSON.stringify(l.value)));
|
|
1032
1036
|
if (this._options.push(...o), this.isLoading = !1, this.value !== void 0) {
|
|
1033
1037
|
const l = this._options.findIndex(
|
|
1034
|
-
(
|
|
1038
|
+
(r) => JSON.stringify(r.value) === JSON.stringify(this.value)
|
|
1035
1039
|
);
|
|
1036
1040
|
this.selectedOptionIndex = l !== -1 ? l : null;
|
|
1037
1041
|
} else
|
|
@@ -1042,7 +1046,7 @@ class dt extends m {
|
|
|
1042
1046
|
})), t;
|
|
1043
1047
|
}
|
|
1044
1048
|
selectApiOption(t, e, i) {
|
|
1045
|
-
var l,
|
|
1049
|
+
var l, r, h, u;
|
|
1046
1050
|
const s = t.target, n = s.querySelector(".select-api-radio") || ((l = s.closest(".select-api-option")) == null ? void 0 : l.querySelector(".select-api-radio"));
|
|
1047
1051
|
n && (n.checked = !0), this.selectedOptionIndex = e;
|
|
1048
1052
|
const a = this._options[e].value;
|
|
@@ -1054,7 +1058,7 @@ class dt extends m {
|
|
|
1054
1058
|
const d = i.firstChild;
|
|
1055
1059
|
d && d.tagName === "SPAN" && (d.textContent = this._options[e].name);
|
|
1056
1060
|
}
|
|
1057
|
-
this.isOpen = !1, (
|
|
1061
|
+
this.isOpen = !1, (r = this.optionsListEl) == null || r.classList.remove("open"), (h = this.svgContainer) == null || h.classList.remove("open"), (u = this.onChange) == null || u.call(this, a), this.detectChangeCallback && this.detectChangeCallback(a);
|
|
1058
1062
|
}
|
|
1059
1063
|
updateOptionsList() {
|
|
1060
1064
|
!this.optionsListEl || !this.buttonEl || (this.optionsListEl.innerHTML = "", this._options.forEach((t, e) => {
|
|
@@ -1110,19 +1114,19 @@ class ut extends m {
|
|
|
1110
1114
|
i.className = "toggle-switch";
|
|
1111
1115
|
const s = document.createElement("input");
|
|
1112
1116
|
s.type = "checkbox", s.checked = ((o = (a = this.props.options) == null ? void 0 : a.find((l) => l.value === this.value)) == null ? void 0 : o.status) ?? !1, s.addEventListener("change", () => {
|
|
1113
|
-
var
|
|
1114
|
-
const l = ((
|
|
1117
|
+
var r, h;
|
|
1118
|
+
const l = ((h = (r = this.props.options) == null ? void 0 : r.find((u) => u.status === s.checked)) == null ? void 0 : h.value) ?? "";
|
|
1115
1119
|
this.value = l, this.onChange && this.onChange(this.value), this.detectChangeCallback && this.detectChangeCallback(this.value);
|
|
1116
1120
|
});
|
|
1117
1121
|
const n = document.createElement("span");
|
|
1118
1122
|
if (n.className = "toggle-slider", this.props.activeColor || this.props.inactiveColor) {
|
|
1119
|
-
const l = document.createElement("style"),
|
|
1123
|
+
const l = document.createElement("style"), r = this.props.activeColor || "#4CAF50", h = this.props.inactiveColor || "#ccc";
|
|
1120
1124
|
l.textContent = `
|
|
1121
1125
|
.toggle-switch input:checked + .toggle-slider {
|
|
1122
|
-
background-color: ${
|
|
1126
|
+
background-color: ${r};
|
|
1123
1127
|
}
|
|
1124
1128
|
.toggle-switch .toggle-slider {
|
|
1125
|
-
background-color: ${
|
|
1129
|
+
background-color: ${h};
|
|
1126
1130
|
}
|
|
1127
1131
|
`, document.head.appendChild(l);
|
|
1128
1132
|
}
|
|
@@ -1167,10 +1171,10 @@ class pt extends m {
|
|
|
1167
1171
|
let o = parseFloat(a.value);
|
|
1168
1172
|
o = this.validateValue(o), String(o) !== a.value && (a.value = String(o)), this.inputValues[t] = o, this.setValue(o);
|
|
1169
1173
|
}), s.addEventListener("blur", (n) => {
|
|
1170
|
-
var l,
|
|
1174
|
+
var l, r;
|
|
1171
1175
|
const a = n.target;
|
|
1172
1176
|
let o = parseFloat(a.value);
|
|
1173
|
-
o = this.validateValue(o), String(o) !== a.value && (a.value = String(o), this.inputValues[t] = o, this.setValue(o)), (
|
|
1177
|
+
o = this.validateValue(o), String(o) !== a.value && (a.value = String(o), this.inputValues[t] = o, this.setValue(o)), (r = (l = this.props).onBlur) == null || r.call(l);
|
|
1174
1178
|
}), i.appendChild(s), this.props.suffix && this.props.suffix !== "none") {
|
|
1175
1179
|
const n = document.createElement("span");
|
|
1176
1180
|
n.className = "gap-suffix", n.textContent = this.props.suffix, i.appendChild(n), s.style.paddingRight = "30px";
|
|
@@ -1187,7 +1191,7 @@ class pt extends m {
|
|
|
1187
1191
|
return this.mobileValue;
|
|
1188
1192
|
}
|
|
1189
1193
|
}
|
|
1190
|
-
class
|
|
1194
|
+
class x extends f {
|
|
1191
1195
|
// ms
|
|
1192
1196
|
constructor(t) {
|
|
1193
1197
|
var o;
|
|
@@ -1212,7 +1216,7 @@ class E extends f {
|
|
|
1212
1216
|
tabs: this.tabValues,
|
|
1213
1217
|
activeTabId: this.activeTabId
|
|
1214
1218
|
}, Object.values(e.settings).forEach((i) => {
|
|
1215
|
-
i instanceof
|
|
1219
|
+
i instanceof x && (i._parentTabsSettings = this);
|
|
1216
1220
|
}), this.connectChildChangeHandlers());
|
|
1217
1221
|
}
|
|
1218
1222
|
/**
|
|
@@ -1240,7 +1244,7 @@ class E extends f {
|
|
|
1240
1244
|
});
|
|
1241
1245
|
}), this.tabs.forEach((e) => {
|
|
1242
1246
|
Object.entries(e.settings).forEach(([i, s]) => {
|
|
1243
|
-
(s instanceof f || s instanceof m) && (s instanceof
|
|
1247
|
+
(s instanceof f || s instanceof m) && (s instanceof x ? (s._parentTabsSettings = this, s.setOnChange((n) => {
|
|
1244
1248
|
Promise.resolve().then(() => {
|
|
1245
1249
|
this.tabValues[e.id] = this.getTabValues(e), this.triggerDebouncedChange();
|
|
1246
1250
|
});
|
|
@@ -1270,21 +1274,21 @@ class E extends f {
|
|
|
1270
1274
|
handleTabClick(t) {
|
|
1271
1275
|
var o, l;
|
|
1272
1276
|
if (t === this.activeTabId) return;
|
|
1273
|
-
const e = this.tabs.find((
|
|
1277
|
+
const e = this.tabs.find((r) => r.id === this.activeTabId);
|
|
1274
1278
|
e && (this.tabValues[this.activeTabId] = this.getTabValues(e)), this.previousTabId = this.activeTabId, this.activeTabId = t;
|
|
1275
1279
|
const i = (o = this.tabsContainer) == null ? void 0 : o.querySelectorAll(".tab-button");
|
|
1276
|
-
i == null || i.forEach((
|
|
1277
|
-
if (
|
|
1278
|
-
const
|
|
1279
|
-
|
|
1280
|
+
i == null || i.forEach((r) => {
|
|
1281
|
+
if (r instanceof HTMLElement) {
|
|
1282
|
+
const h = this.tabs.find((u) => u.label === r.textContent);
|
|
1283
|
+
r.classList.toggle("active", (h == null ? void 0 : h.id) === t);
|
|
1280
1284
|
}
|
|
1281
1285
|
}), this.updateSettingsFromTab(t);
|
|
1282
1286
|
const s = (l = this.container) == null ? void 0 : l.querySelector(".setting-group-content");
|
|
1283
1287
|
if (s) {
|
|
1284
1288
|
s.innerHTML = "";
|
|
1285
|
-
const
|
|
1286
|
-
Object.values(
|
|
1287
|
-
s.appendChild(
|
|
1289
|
+
const r = this.settings;
|
|
1290
|
+
Object.values(r).forEach((h) => {
|
|
1291
|
+
s.appendChild(h.draw());
|
|
1288
1292
|
});
|
|
1289
1293
|
}
|
|
1290
1294
|
const n = this.getValues();
|
|
@@ -1350,7 +1354,7 @@ class E extends f {
|
|
|
1350
1354
|
activeTabId: this.activeTabId
|
|
1351
1355
|
}, this.tabs.forEach((t) => {
|
|
1352
1356
|
Object.values(t.settings).forEach((e) => {
|
|
1353
|
-
e instanceof
|
|
1357
|
+
e instanceof x && e.updateInitialValues();
|
|
1354
1358
|
});
|
|
1355
1359
|
}));
|
|
1356
1360
|
}
|
|
@@ -1374,7 +1378,7 @@ class E extends f {
|
|
|
1374
1378
|
getTabValues(t) {
|
|
1375
1379
|
const e = {};
|
|
1376
1380
|
return Object.entries(t.settings).forEach(([i, s]) => {
|
|
1377
|
-
s instanceof
|
|
1381
|
+
s instanceof x || s instanceof f ? e[i] = s.getValues() : (s instanceof m, e[i] = s.value);
|
|
1378
1382
|
}), e;
|
|
1379
1383
|
}
|
|
1380
1384
|
/**
|
|
@@ -1402,7 +1406,7 @@ class E extends f {
|
|
|
1402
1406
|
settings: {}
|
|
1403
1407
|
// We don't clone callbacks - they should be set up again on the clone
|
|
1404
1408
|
};
|
|
1405
|
-
return new
|
|
1409
|
+
return new x(e);
|
|
1406
1410
|
}
|
|
1407
1411
|
/**
|
|
1408
1412
|
* Override setValue method to update the TabsSettings state
|
|
@@ -1497,7 +1501,7 @@ class mt extends f {
|
|
|
1497
1501
|
color: new O({
|
|
1498
1502
|
default: (t == null ? void 0 : t.color) ?? "0, 0, 30"
|
|
1499
1503
|
}),
|
|
1500
|
-
opacity: new
|
|
1504
|
+
opacity: new y({
|
|
1501
1505
|
default: (t == null ? void 0 : t.opacity) ?? 100,
|
|
1502
1506
|
minValue: 0,
|
|
1503
1507
|
maxValue: 100
|
|
@@ -1547,7 +1551,7 @@ class ft extends f {
|
|
|
1547
1551
|
color: new O({
|
|
1548
1552
|
default: t.colorDefault ?? "0, 0, 30"
|
|
1549
1553
|
}),
|
|
1550
|
-
opacity: new
|
|
1554
|
+
opacity: new y({
|
|
1551
1555
|
default: t.colorOpacityDefault ?? 100
|
|
1552
1556
|
}),
|
|
1553
1557
|
fontFamily: new B({
|
|
@@ -1600,7 +1604,7 @@ class ft extends f {
|
|
|
1600
1604
|
`;
|
|
1601
1605
|
}
|
|
1602
1606
|
}
|
|
1603
|
-
class
|
|
1607
|
+
class V extends m {
|
|
1604
1608
|
constructor(t) {
|
|
1605
1609
|
super({
|
|
1606
1610
|
...t,
|
|
@@ -1610,9 +1614,9 @@ class y extends m {
|
|
|
1610
1614
|
draw() {
|
|
1611
1615
|
const t = this.value === "auto" ? "text" : "number", e = (o) => {
|
|
1612
1616
|
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", () => {
|
|
1613
|
-
const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER,
|
|
1614
|
-
let
|
|
1615
|
-
|
|
1617
|
+
const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, r = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
1618
|
+
let h = Number(o.value);
|
|
1619
|
+
h < l && (h = l), h > r && (h = r), o.value = String(h);
|
|
1616
1620
|
}));
|
|
1617
1621
|
}, i = this.createInput({
|
|
1618
1622
|
value: this.value,
|
|
@@ -1639,8 +1643,8 @@ class y extends m {
|
|
|
1639
1643
|
if (l.toLowerCase() === "auto")
|
|
1640
1644
|
this.value = "auto";
|
|
1641
1645
|
else {
|
|
1642
|
-
const
|
|
1643
|
-
isNaN(
|
|
1646
|
+
const r = Number(l);
|
|
1647
|
+
isNaN(r) || (this.value = r);
|
|
1644
1648
|
}
|
|
1645
1649
|
this.onChange && this.onChange(this.value);
|
|
1646
1650
|
}), i;
|
|
@@ -1653,25 +1657,25 @@ class Ct extends f {
|
|
|
1653
1657
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
1654
1658
|
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1655
1659
|
settings: {
|
|
1656
|
-
marginTop: new
|
|
1660
|
+
marginTop: new V({
|
|
1657
1661
|
title: "Top",
|
|
1658
1662
|
icon: it,
|
|
1659
1663
|
suffix: "px",
|
|
1660
1664
|
default: (t == null ? void 0 : t.marginTop) ?? "auto"
|
|
1661
1665
|
}),
|
|
1662
|
-
marginRight: new
|
|
1666
|
+
marginRight: new V({
|
|
1663
1667
|
title: "Right",
|
|
1664
1668
|
icon: st,
|
|
1665
1669
|
suffix: "px",
|
|
1666
1670
|
default: (t == null ? void 0 : t.marginRight) ?? 0
|
|
1667
1671
|
}),
|
|
1668
|
-
marginBottom: new
|
|
1672
|
+
marginBottom: new V({
|
|
1669
1673
|
title: "Bottom",
|
|
1670
1674
|
icon: nt,
|
|
1671
1675
|
suffix: "px",
|
|
1672
1676
|
default: (t == null ? void 0 : t.marginBottom) ?? 0
|
|
1673
1677
|
}),
|
|
1674
|
-
marginLeft: new
|
|
1678
|
+
marginLeft: new V({
|
|
1675
1679
|
title: "Left",
|
|
1676
1680
|
icon: at,
|
|
1677
1681
|
suffix: "px",
|
|
@@ -1847,13 +1851,13 @@ class bt extends f {
|
|
|
1847
1851
|
...t == null ? void 0 : t.uploadProps,
|
|
1848
1852
|
default: (t == null ? void 0 : t.backgroundImage) ?? ""
|
|
1849
1853
|
}),
|
|
1850
|
-
opacity: new
|
|
1854
|
+
opacity: new y({
|
|
1851
1855
|
default: (t == null ? void 0 : t.opacity) ?? 100
|
|
1852
1856
|
}),
|
|
1853
1857
|
backgroundColor: new O({
|
|
1854
1858
|
default: (t == null ? void 0 : t.backgroundColor) ?? "0, 0, 30"
|
|
1855
1859
|
}),
|
|
1856
|
-
opacityBG: new
|
|
1860
|
+
opacityBG: new y({
|
|
1857
1861
|
default: (t == null ? void 0 : t.opacityBG) ?? 100
|
|
1858
1862
|
})
|
|
1859
1863
|
}
|
|
@@ -1892,21 +1896,21 @@ export {
|
|
|
1892
1896
|
mt as BorderSettingSet,
|
|
1893
1897
|
lt as ButtonSetting,
|
|
1894
1898
|
O as ColorSetting,
|
|
1895
|
-
|
|
1899
|
+
ht as DimensionSetting,
|
|
1896
1900
|
pt as GapSetting,
|
|
1897
1901
|
ft as HeaderTypographySettingSet,
|
|
1898
|
-
|
|
1902
|
+
rt as HeightSetting,
|
|
1899
1903
|
gt as MarginBottomSetting,
|
|
1900
1904
|
Ct as MarginSettingGroup,
|
|
1901
1905
|
b as NumberSetting,
|
|
1902
|
-
|
|
1906
|
+
y as OpacitySetting,
|
|
1903
1907
|
dt as SelectApiSettings,
|
|
1904
1908
|
B as SelectSetting,
|
|
1905
1909
|
m as Setting,
|
|
1906
1910
|
f as SettingGroup,
|
|
1907
1911
|
H as StringSetting,
|
|
1908
1912
|
vt as TabsContainerGroup,
|
|
1909
|
-
|
|
1913
|
+
x as TabsSettings,
|
|
1910
1914
|
ut as Toggle,
|
|
1911
1915
|
U as UploadSetting,
|
|
1912
1916
|
ct as WidthSetting,
|
package/dist/index.d.ts
CHANGED
|
@@ -450,6 +450,8 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
450
450
|
private isInteracting;
|
|
451
451
|
private interactionStartTime;
|
|
452
452
|
private modifiedSettings;
|
|
453
|
+
private activeSettingId;
|
|
454
|
+
private hasValueChanged;
|
|
453
455
|
constructor(groupProps: SettingGroupProps<T>);
|
|
454
456
|
static hide(): void;
|
|
455
457
|
static show(): void;
|
|
@@ -470,6 +472,7 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
470
472
|
updateVisibility(): void;
|
|
471
473
|
toggle(): void;
|
|
472
474
|
private saveChangesImmediately;
|
|
475
|
+
private handleChange;
|
|
473
476
|
}
|
|
474
477
|
|
|
475
478
|
export declare type SettingGroupProps<T> = {
|
package/package.json
CHANGED