builder-settings-types 0.0.110 → 0.0.112
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let B=(h=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(h|=0));for(;h--;)t+=G[e[h]&63];return t};function M(h,t){for(const e in h)if(h.hasOwnProperty(e)){const i=h[e];t(e,i)}}const b=class b{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.id=t.id||B(),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,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.lastChangeTime=Date.now(),t(i),this.updateVisibility(),this.initialValues=i),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),M(this.settings,(i,s)=>{const n=()=>{this.isHandlingChange||e()};this.changeHandlers.add(n),s instanceof b,s.setOnChange(n)}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>{t()},100))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef&&this.elementRef.addEventListener("focusout",this.handleBlur,!0),M(this.settings,(t,e)=>{var i;if(e instanceof b)e.setOnBlur(this.handleBlur);else{const s=(i=this.elementRef)==null?void 0:i.querySelector(`[data-setting-id="${e.id}"]`);s&&s.addEventListener("focusout",this.handleBlur,!0)}})}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}clone(){const t={};M(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={};for(const s in e)if(e.hasOwnProperty(s))if(typeof e[s]=="object"&&e[s]!==null){const n=this.calculateChanges(t[s]||{},e[s]);Object.keys(n).length>0&&(i[s]=n)}else t[s]!==e[s]&&(i[s]={from:t[s],to:e[s]});return 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 b?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof b?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,b.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");if(i.className="title-section",this.icon){const r=document.createElement("span");r.className="group-icon",r.innerHTML=this.icon,i.appendChild(r)}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 r=document.createElement("span");r.className="info-marker",r.innerHTML=`
|
|
2
2
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
3
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
4
4
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
13
13
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`,p.title=this.description,n.insertBefore(p,a)}}else{if(!r){const p=document.createElement("div");p.className="setting-group-description",p.textContent=this.description,o.insertBefore(p,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const u=this.settings[r];o.appendChild(u.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};b.hiddenElements=new Set;let C=b;function S(h){if(h===null||typeof h!="object")return h;if(h instanceof Date)return new Date(h.getTime());if(Array.isArray(h)){const i=[];for(let s=0;s<h.length;s++)i[s]=S(h[s]);return i}const t={};for(const i in h)Object.prototype.hasOwnProperty.call(h,i)&&(t[i]=S(h[i]));const e=Object.getPrototypeOf(h);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function
|
|
15
|
+
`,p.title=this.description,n.insertBefore(p,a)}}else{if(!r){const p=document.createElement("div");p.className="setting-group-description",p.textContent=this.description,o.insertBefore(p,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const u=this.settings[r];o.appendChild(u.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};b.hiddenElements=new Set;let C=b;function S(h){if(h===null||typeof h!="object")return h;if(h instanceof Date)return new Date(h.getTime());if(Array.isArray(h)){const i=[];for(let s=0;s<h.length;s++)i[s]=S(h[s]);return i}const t={};for(const i in h)Object.prototype.hasOwnProperty.call(h,i)&&(t[i]=S(h[i]));const e=Object.getPrototypeOf(h);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function W(h){switch(h){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class m{constructor(t={}){this.props=t,this.id=t.id||B(),this.value=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),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||W(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}}class H 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 I="<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 T extends H{constructor(t){super({...t,icon:t.icon||I,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||I),s=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";const a=p=>{const g=p.value.split(",").map(O=>parseInt(O.trim()));if(g.length!==3||g.some(isNaN))return p.style.border="1px solid red",!1;const[d,f,v]=g,k=d>=0&&d<=255&&f>=0&&f<=255&&v>=0&&v<=255;return p.style.border=k?"":"1px solid red",k},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"}),c=l.querySelector("input"),r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=r.querySelector("input");return c.oninput=p=>{var d;let g=p.target.value.trim();a(c)&&(this.value=g,(d=this.onChange)==null||d.call(this,g),u.value=this.rgbToHex(g),o.style.backgroundColor=`rgb(${g})`)},u.oninput=p=>{var f,v;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(f=this.onChange)==null||f.call(this,d),(v=this.detectChange)==null||v.call(this,d),c.value=d,o.style.backgroundColor=`rgb(${d})`},u.onchange=p=>{var f,v;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(f=this.onChange)==null||f.call(this,d),(v=this.detectChange)==null||v.call(this,d),c.value=d,o.style.backgroundColor=`rgb(${d})`},n.appendChild(o),n.appendChild(r),n.appendChild(l),t.appendChild(e),t.appendChild(n),this.value&&(c.value=this.value,u.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class w extends m{constructor(t={}){super(t),this.inputType="number",this.inputElement=null}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",()=>{var l;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),s.value=String(o),(l=this.onChange)==null||l.call(this,o)})},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??""))}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}}class L extends w{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||$,title:t.title||"Opacity"}),this.inputType="number"}}const $=`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
17
17
|
<path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
18
18
|
<path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
|
|
@@ -45,15 +45,15 @@
|
|
|
45
45
|
<path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
|
|
46
46
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
47
47
|
</svg>
|
|
48
|
-
`}].forEach(n=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=n.icon,this.value===n.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(l=>l.classList.remove("selected")),a.classList.add("selected"),this.value=n.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class j extends m{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class q extends m{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.aspectRatio=1,this.isUpdating=!1;const e=t.width||0,i=t.height||0;this.value||(this.value={width:e,height:i}),this.minWidth=t.minWidth??0,this.maxWidth=t.maxWidth,this.minHeight=t.minHeight??0,this.maxHeight=t.maxHeight,this.locked=t.locked??!1,this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.widthSetting=new w({title:"Width",default:this.value.width,suffix:"px",minValue:this.minWidth,maxValue:this.maxWidth,icon:
|
|
48
|
+
`}].forEach(n=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=n.icon,this.value===n.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(l=>l.classList.remove("selected")),a.classList.add("selected"),this.value=n.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class j extends m{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class q extends m{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.aspectRatio=1,this.isUpdating=!1;const e=t.width||0,i=t.height||0;this.value||(this.value={width:e,height:i}),this.minWidth=t.minWidth??0,this.maxWidth=t.maxWidth,this.minHeight=t.minHeight??0,this.maxHeight=t.maxHeight,this.locked=t.locked??!1,this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.widthSetting=new w({title:"Width",default:this.value.width,suffix:"px",minValue:this.minWidth,maxValue:this.maxWidth,icon:F}),this.heightSetting=new w({title:"Height",default:this.value.height,suffix:"px",minValue:this.minHeight,maxValue:this.maxHeight,icon:U}),this.widthSetting.setOnChange(this.handleWidthChange.bind(this)),this.heightSetting.setOnChange(this.handleHeightChange.bind(this))}handleWidthChange(t){if(!this.isUpdating&&!isNaN(t)){this.maxWidth&&t>this.maxWidth&&(t=this.maxWidth),this.isUpdating=!0;try{let e=t,i=this.value.height;this.locked&&this.aspectRatio>0&&(i=Math.round(e/this.aspectRatio),this.maxHeight&&i>this.maxHeight&&(i=this.maxHeight,e=Math.round(i*this.aspectRatio),this.maxWidth&&e>this.maxWidth&&(e=this.maxWidth,i>0&&(this.aspectRatio=e/i)))),this.value={width:e,height:i},this.widthSetting.setValue(e),this.locked&&this.heightSetting.setValue(i),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}handleHeightChange(t){if(!this.isUpdating&&!isNaN(t)){this.maxHeight&&t>this.maxHeight&&(t=this.maxHeight),this.isUpdating=!0;try{let e=t,i=this.value.width;this.locked&&this.aspectRatio>0&&(i=Math.round(e*this.aspectRatio),this.maxWidth&&i>this.maxWidth&&(i=this.maxWidth,e=Math.round(i/this.aspectRatio),this.maxHeight&&e>this.maxHeight&&(e=this.maxHeight,e>0&&(this.aspectRatio=i/e)))),this.value={width:i,height:e},this.locked&&this.widthSetting.setValue(i),this.heightSetting.setValue(e),this.onChange&&this.onChange(this.value)}finally{this.isUpdating=!1}}}toggleLock(t){if(this.locked=!this.locked,this.locked&&this.value){const{width:i,height:s}=this.value;s>0&&(this.aspectRatio=i/s)}t.innerHTML=this.getLockSVG(this.locked),t.setAttribute("aria-pressed",String(this.locked)),t.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const e=t.closest(".dimension-setting-container");e&&(this.locked?e.classList.add("aspect-locked"):e.classList.remove("aspect-locked"))}getLockSVG(t){return t?`
|
|
49
49
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
50
50
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
51
51
|
</svg>`:`
|
|
52
52
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
53
53
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
54
|
-
</svg>`}setValue(t){if(t&&typeof t.width=="number"&&typeof t.height=="number"){let e=Math.max(this.minWidth,t.width);this.maxWidth&&(e=Math.min(this.maxWidth,e));let i=Math.max(this.minHeight,t.height);this.maxHeight&&(i=Math.min(this.maxHeight,i)),this.value={width:e,height:i},this.locked&&this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.isUpdating=!0;try{this.widthSetting.setValue(this.value.width),this.heightSetting.setValue(this.value.height)}finally{this.isUpdating=!1}}}draw(){const t=document.createElement("div");t.className="dimension-setting-container",this.locked&&t.classList.add("aspect-locked");const e=this.widthSetting.draw(),i=this.heightSetting.draw(),s=document.createElement("div");s.className="dimension-bracket";const n=document.createElement("button");return n.className="dimension-lock-icon",n.setAttribute("type","button"),n.setAttribute("aria-pressed",String(this.locked)),n.setAttribute("aria-label",this.locked?"Unlock aspect ratio":"Lock aspect ratio"),n.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio",n.innerHTML=this.getLockSVG(this.locked),n.onclick=a=>{a.preventDefault(),this.toggleLock(n)},s.appendChild(n),t.appendChild(e),t.appendChild(s),t.appendChild(i),t}isLocked(){return this.locked}setLocked(t){if(this.locked!==t){if(this.locked=t,this.locked&&this.value){const{width:i,height:s}=this.value;s>0&&(this.aspectRatio=i/s)}const e=document.querySelector(".dimension-setting-container .dimension-lock-icon");if(e instanceof HTMLElement){e.innerHTML=this.getLockSVG(this.locked),e.setAttribute("aria-pressed",String(this.locked)),e.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const i=e.closest(".dimension-setting-container");i&&(this.locked?i.classList.add("aspect-locked"):i.classList.remove("aspect-locked"))}}}}const
|
|
54
|
+
</svg>`}setValue(t){if(t&&typeof t.width=="number"&&typeof t.height=="number"){let e=Math.max(this.minWidth,t.width);this.maxWidth&&(e=Math.min(this.maxWidth,e));let i=Math.max(this.minHeight,t.height);this.maxHeight&&(i=Math.min(this.maxHeight,i)),this.value={width:e,height:i},this.locked&&this.value.height>0&&(this.aspectRatio=this.value.width/this.value.height),this.isUpdating=!0;try{this.widthSetting.setValue(this.value.width),this.heightSetting.setValue(this.value.height)}finally{this.isUpdating=!1}}}draw(){const t=document.createElement("div");t.className="dimension-setting-container",this.locked&&t.classList.add("aspect-locked");const e=this.widthSetting.draw(),i=this.heightSetting.draw(),s=document.createElement("div");s.className="dimension-bracket";const n=document.createElement("button");return n.className="dimension-lock-icon",n.setAttribute("type","button"),n.setAttribute("aria-pressed",String(this.locked)),n.setAttribute("aria-label",this.locked?"Unlock aspect ratio":"Lock aspect ratio"),n.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio",n.innerHTML=this.getLockSVG(this.locked),n.onclick=a=>{a.preventDefault(),this.toggleLock(n)},s.appendChild(n),t.appendChild(e),t.appendChild(s),t.appendChild(i),t}isLocked(){return this.locked}setLocked(t){if(this.locked!==t){if(this.locked=t,this.locked&&this.value){const{width:i,height:s}=this.value;s>0&&(this.aspectRatio=i/s)}const e=document.querySelector(".dimension-setting-container .dimension-lock-icon");if(e instanceof HTMLElement){e.innerHTML=this.getLockSVG(this.locked),e.setAttribute("aria-pressed",String(this.locked)),e.title=this.locked?"Unlock aspect ratio":"Lock aspect ratio";const i=e.closest(".dimension-setting-container");i&&(this.locked?i.classList.add("aspect-locked"):i.classList.remove("aspect-locked"))}}}}const F=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
55
55
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
56
|
-
</svg>`,
|
|
56
|
+
</svg>`,U=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
57
57
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
58
|
</svg>`,N=`
|
|
59
59
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
@@ -77,9 +77,9 @@
|
|
|
77
77
|
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",c=>{var r;c.relatedTarget&&t.contains(c.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 c=document.createElement("div");if(c.className="icon-title-container",this.props.icon){const r=this.createIcon(this.props.icon);c.appendChild(r)}if(this.props.title){const r=this.createLabel(this.props.title);c.appendChild(r)}t.appendChild(c)}const i=document.createElement("div");i.className="preview-button-container";const s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");n.className="preview-placeholder",n.innerHTML=D,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview";const a=document.createElement("button");a.className="delete-button",a.type="button",a.title="Delete image",a.innerHTML=z,this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(a);const o=document.createElement("button");o.className="upload-button",o.innerHTML=`
|
|
78
78
|
<span class="upload-icon">${N}</span>
|
|
79
79
|
<span class="upload-label">Upload</span>
|
|
80
|
-
`;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(o),t.appendChild(i),t.appendChild(l),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=c=>{var r;c.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var r,u,p,g;const c=(r=l.files)==null?void 0:r[0];if(c)try{o.classList.add("loading"),o.disabled=!0;const d=new FormData,f=this.props.formFieldName||"file";d.append(f,c,c.name);const v=this.props.uploadUrl;if(!v)throw new Error("No uploadUrl provided to UploadSetting.");const k=this.props.requestMethod||"POST",O={...this.props.requestHeaders||{}},
|
|
80
|
+
`;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(o),t.appendChild(i),t.appendChild(l),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=c=>{var r;c.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var r,u,p,g;const c=(r=l.files)==null?void 0:r[0];if(c)try{o.classList.add("loading"),o.disabled=!0;const d=new FormData,f=this.props.formFieldName||"file";d.append(f,c,c.name);const v=this.props.uploadUrl;if(!v)throw new Error("No uploadUrl provided to UploadSetting.");const k=this.props.requestMethod||"POST",O={...this.props.requestHeaders||{}},E=await(await fetch(v,{method:k,body:d,headers:O})).json();console.log("Upload response:",E);let x;if(this.props.parseResponse)x=this.props.parseResponse(E);else if(x=(u=E==null?void 0:E.data)==null?void 0:u.url,!x)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",x),this.value=x,this.updatePreviewState(x),(p=this.onChange)==null||p.call(this,x),(g=this.onBlur)==null||g.call(this)}catch(d){console.error("Error uploading file:",d),this.updatePreviewState(null)}finally{o.classList.remove("loading"),o.disabled=!1}},t}}class Z extends m{constructor(t={}){super(t),this.inputType="number",this.value=this.value??0,this.numberSetting=new w({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??0,maxValue:t.maxHeight,icon:P}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const P=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
81
81
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
82
|
-
</svg>`;class J extends m{constructor(t={}){super(t),this.inputType="number",this.value=this.value??0,this.numberSetting=new w({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:X}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const X=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
82
|
+
</svg>`;class J extends m{constructor(t={}){super(t),this.inputType="number",this.value=this.value??0,this.numberSetting=new w({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:X}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}setValue(t){const e=t==null||isNaN(t)?this.props.default??0:t;super.setValue(e),this.numberSetting.setValue(e)}}const X=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
83
83
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
84
84
|
</svg>`,Q=`
|
|
85
85
|
<svg xmlns="http://www.w3.org/2000/svg" class="svg-select-api" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
103
103
|
<path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
104
104
|
</svg>
|
|
105
|
-
`;class at extends C{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new w({title:"Size",icon:nt,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new T({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new
|
|
105
|
+
`;class at extends C{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new w({title:"Size",icon:nt,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new T({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new L({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new w({title:"Radius",icon:st,default:(t==null?void 0:t.radius)??12,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,s=this.settings.size.value??0;return`
|
|
106
106
|
border-color: ${t};
|
|
107
107
|
border-width: ${s}px;
|
|
108
108
|
border-radius: ${i}px;
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
120
120
|
<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"/>
|
|
121
121
|
</svg>
|
|
122
|
-
`;class ht extends C{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new T({default:t.colorDefault??"0, 0, 30"}),opacity:new
|
|
122
|
+
`;class ht extends C{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new T({default:t.colorDefault??"0, 0, 30"}),opacity:new L({default:t.colorOpacityDefault??100}),fontFamily:new V({title:"Font",icon:ot,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 V({title:"Weight",icon:lt,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 w({title:"Size",icon:rt,default:t.fontSizeDefault??12,suffix:"px"}),align:new R({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",s=this.settings.fontWeight.value??"bold",n=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
|
|
123
123
|
color: ${t};
|
|
124
124
|
opacity: ${e/100};
|
|
125
125
|
font-family: ${i};
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
</svg>
|
|
161
161
|
</span>
|
|
162
162
|
<span class="add-label">Add Tab</span>
|
|
163
|
-
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class ft extends C{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new A({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new
|
|
163
|
+
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class ft extends C{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new A({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new L({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new T({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"}),opacityBG:new L({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,n,a,o]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);const l=document.createElement("div");return l.className="bgset-or-label",l.textContent="OR",e.appendChild(l),e.appendChild(a),e.appendChild(o),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"0, 0, 30",s=this.settings.opacityBG.value??100;return t?`
|
|
164
164
|
background-image: url("${t}");
|
|
165
165
|
background-size: cover;
|
|
166
166
|
background-position: center;
|
|
@@ -168,4 +168,4 @@
|
|
|
168
168
|
`:`
|
|
169
169
|
background-color: ${i};
|
|
170
170
|
opacity: ${s/100};
|
|
171
|
-
`}}exports.AlignSetting=R;exports.BackgroundSettingSet=ft;exports.BorderSettingSet=at;exports.ButtonSetting=j;exports.ColorSetting=T;exports.DimensionSetting=q;exports.GapSetting=et;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=Z;exports.MarginSettingGroup=ct;exports.NumberSetting=w;exports.OpacitySetting=
|
|
171
|
+
`}}exports.AlignSetting=R;exports.BackgroundSettingSet=ft;exports.BorderSettingSet=at;exports.ButtonSetting=j;exports.ColorSetting=T;exports.DimensionSetting=q;exports.GapSetting=et;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=Z;exports.MarginSettingGroup=ct;exports.NumberSetting=w;exports.OpacitySetting=L;exports.SelectApiSettings=Y;exports.SelectSetting=V;exports.Setting=m;exports.SettingGroup=C;exports.StringSetting=H;exports.TabsContainerGroup=Ct;exports.TabsSettings=it;exports.Toggle=K;exports.UploadSetting=A;exports.WidthSetting=J;exports.iterateSettings=M;
|
|
@@ -400,8 +400,8 @@ class N extends O {
|
|
|
400
400
|
const g = p.value.split(",").map((H) => parseInt(H.trim()));
|
|
401
401
|
if (g.length !== 3 || g.some(isNaN))
|
|
402
402
|
return p.style.border = "1px solid red", !1;
|
|
403
|
-
const [d, C, v] = g,
|
|
404
|
-
return p.style.border =
|
|
403
|
+
const [d, C, v] = g, L = d >= 0 && d <= 255 && C >= 0 && C <= 255 && v >= 0 && v <= 255;
|
|
404
|
+
return p.style.border = L ? "" : "1px solid red", L;
|
|
405
405
|
}, o = document.createElement("div");
|
|
406
406
|
o.className = "color-preview", o.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
|
|
407
407
|
const l = this.createInput({
|
|
@@ -429,16 +429,17 @@ class N extends O {
|
|
|
429
429
|
}
|
|
430
430
|
}
|
|
431
431
|
class b extends m {
|
|
432
|
+
// Store the input element
|
|
432
433
|
constructor(t = {}) {
|
|
433
|
-
super(t), this.inputType = "number";
|
|
434
|
+
super(t), this.inputType = "number", this.inputElement = null;
|
|
434
435
|
}
|
|
435
436
|
draw() {
|
|
436
|
-
const t = (
|
|
437
|
-
this.props.minValue !== void 0 && (
|
|
438
|
-
var
|
|
439
|
-
const
|
|
440
|
-
let
|
|
441
|
-
|
|
437
|
+
const t = (s) => {
|
|
438
|
+
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", () => {
|
|
439
|
+
var l;
|
|
440
|
+
const n = this.props.minValue ?? Number.MIN_SAFE_INTEGER, a = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
441
|
+
let o = Number(s.value);
|
|
442
|
+
o < n && (o = n), o > a && (o = a), s.value = String(o), (l = this.onChange) == null || l.call(this, o);
|
|
442
443
|
});
|
|
443
444
|
}, e = this.createInput({
|
|
444
445
|
value: this.value,
|
|
@@ -449,15 +450,22 @@ class b extends m {
|
|
|
449
450
|
wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
|
|
450
451
|
inputCustomizer: t
|
|
451
452
|
});
|
|
452
|
-
if (!this.props.suffix || this.props.suffix === "none")
|
|
453
|
+
if (this.inputElement = e.querySelector("input.number-setting-input"), !this.props.suffix || this.props.suffix === "none")
|
|
453
454
|
return e;
|
|
454
|
-
e.classList.add("suffix-wrapper");
|
|
455
|
-
const i =
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
455
|
+
e.classList.add("suffix-wrapper"), this.inputElement && (this.inputElement.style.paddingRight = "35px");
|
|
456
|
+
const i = document.createElement("span");
|
|
457
|
+
return i.className = "suffix-label", i.textContent = this.props.suffix, e.appendChild(i), e;
|
|
458
|
+
}
|
|
459
|
+
// Add setValue method to update internal value and visual input
|
|
460
|
+
setValue(t) {
|
|
461
|
+
const e = this.validateValue(t);
|
|
462
|
+
super.setValue(e), this.inputElement && (this.inputElement.value = String(e ?? ""));
|
|
463
|
+
}
|
|
464
|
+
validateValue(t) {
|
|
465
|
+
(t == null || isNaN(t)) && (t = this.props.default ?? 0);
|
|
466
|
+
const e = this.props.minValue ?? Number.MIN_SAFE_INTEGER, i = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
467
|
+
let s = Number(t);
|
|
468
|
+
return s < e && (s = e), s > i && (s = i), s;
|
|
461
469
|
}
|
|
462
470
|
}
|
|
463
471
|
class M extends b {
|
|
@@ -828,16 +836,16 @@ class U extends m {
|
|
|
828
836
|
const v = this.props.uploadUrl;
|
|
829
837
|
if (!v)
|
|
830
838
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
831
|
-
const
|
|
832
|
-
method:
|
|
839
|
+
const L = this.props.requestMethod || "POST", H = { ...this.props.requestHeaders || {} }, E = await (await fetch(v, {
|
|
840
|
+
method: L,
|
|
833
841
|
body: d,
|
|
834
842
|
headers: H
|
|
835
843
|
})).json();
|
|
836
|
-
console.log("Upload response:",
|
|
844
|
+
console.log("Upload response:", E);
|
|
837
845
|
let x;
|
|
838
846
|
if (this.props.parseResponse)
|
|
839
|
-
x = this.props.parseResponse(
|
|
840
|
-
else if (x = (u =
|
|
847
|
+
x = this.props.parseResponse(E);
|
|
848
|
+
else if (x = (u = E == null ? void 0 : E.data) == null ? void 0 : u.url, !x)
|
|
841
849
|
throw new Error(
|
|
842
850
|
"No URL found in response. Provide a parseResponse if needed."
|
|
843
851
|
);
|
|
@@ -888,6 +896,10 @@ class ht extends m {
|
|
|
888
896
|
draw() {
|
|
889
897
|
return this.numberSetting.draw();
|
|
890
898
|
}
|
|
899
|
+
setValue(t) {
|
|
900
|
+
const e = t == null || isNaN(t) ? this.props.default ?? 0 : t;
|
|
901
|
+
super.setValue(e), this.numberSetting.setValue(e);
|
|
902
|
+
}
|
|
891
903
|
}
|
|
892
904
|
const z = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
893
905
|
<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"/>
|
package/dist/index.d.ts
CHANGED
|
@@ -276,8 +276,11 @@ export declare class MarginSettingGroup extends SettingGroup<{
|
|
|
276
276
|
|
|
277
277
|
export declare class NumberSetting extends Setting<number, NumberSettingsProps> {
|
|
278
278
|
inputType: InputTypes;
|
|
279
|
+
private inputElement;
|
|
279
280
|
constructor(props?: NumberSettingsProps);
|
|
280
281
|
draw(): HTMLElement;
|
|
282
|
+
setValue(value: number | undefined): void;
|
|
283
|
+
private validateValue;
|
|
281
284
|
}
|
|
282
285
|
|
|
283
286
|
export declare interface NumberSettingsProps extends SettingProps<number> {
|
|
@@ -607,6 +610,7 @@ export declare class WidthSetting extends Setting<number, WidthSettingProps> {
|
|
|
607
610
|
private numberSetting;
|
|
608
611
|
constructor(props?: WidthSettingProps);
|
|
609
612
|
draw(): HTMLElement;
|
|
613
|
+
setValue(value: number | undefined): void;
|
|
610
614
|
}
|
|
611
615
|
|
|
612
616
|
export declare interface WidthSettingProps extends SettingProps<number> {
|
package/package.json
CHANGED