builder-settings-types 0.0.67 → 0.0.68
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 +28 -28
- package/dist/builder-settings-types.es.js +147 -134
- package/dist/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let E=(l=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(l|=0));for(;l--;)t+=I[e[l]&63];return t};function N(l,t){for(const e in l)if(l.hasOwnProperty(e)){const i=l[e];t(e,i)}}class C{constructor(t){this.id=t.id||E(),this.title=t.title,this.settings=t.settings,this.isCollapsed=t.collapsed??!1,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,N(this.settings,(e,i)=>{i.setOnChange(t)}),this}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof C?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof C?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const i=document.createElement("h3");i.textContent=this.title;const n=document.createElement("span");n.className="setting-group-arrow",n.innerHTML=`
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3
3
|
<path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
4
|
</svg>
|
|
5
|
-
`;const s=document.createElement("div");s.className="setting-group-content",this.isCollapsed&&(s.classList.add("collapsed"),n.classList.add("rotated")),e.onclick=()=>{this.isCollapsed=!this.isCollapsed,s.classList.toggle("collapsed"),n.classList.toggle("rotated")},e.appendChild(i),e.appendChild(n);for(const a in this.settings)if(this.settings.hasOwnProperty(a)){const o=this.settings[a];s.appendChild(o.draw())}return t.appendChild(e),t.appendChild(s),t}}function B(l){switch(l){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
|
|
5
|
+
`;const s=document.createElement("div");s.className="setting-group-content",this.isCollapsed&&(s.classList.add("collapsed"),n.classList.add("rotated")),e.onclick=()=>{this.isCollapsed=!this.isCollapsed,s.classList.toggle("collapsed"),n.classList.toggle("rotated")},e.appendChild(i),e.appendChild(n);for(const a in this.settings)if(this.settings.hasOwnProperty(a)){const o=this.settings[a];s.appendChild(o.draw())}return t.appendChild(e),t.appendChild(s),t}}function B(l){switch(l){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 d{constructor(t={}){this.props=t,this.id=t.id||E(),this.value=this.props.default,this.title=t.title||""}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const s=document.createElement("div");if(s.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);s.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);s.appendChild(a)}e.appendChild(s)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");return this.inputEl=n,n.value=String(t.value||B(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const a=s.target;let o=a.value;t.inputType==="number"?o=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(o=a.value),this.value=o,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class k extends d{constructor(t={}){super(t),this.inputType="text"}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const S="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class y extends k{constructor(t){super({...t,icon:t.icon||S,title:t.title||"Color"}),this.inputType="color"}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${n}`}rgbToHex(t){const[e,i,n]=t.split(",").map(a=>parseInt(a.trim()));if(isNaN(e)||isNaN(i)||isNaN(n))return"#000000";const s=a=>{const o=a.toString(16);return o.length===1?"0"+o:o};return`#${s(e)}${s(i)}${s(n)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||S),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const a=g=>{const u=g.value.split(",").map(T=>parseInt(T.trim()));if(u.length!==3||u.some(isNaN))return g.style.border="1px solid red",!1;const[p,f,w]=u,m=p>=0&&p<=255&&f>=0&&f<=255&&w>=0&&w<=255;return g.style.border=m?"":"1px solid red",m},o=document.createElement("div");o.className="color-preview",o.style.backgroundColor=this.value?`rgb(${this.value})`:"";const r=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),c=r.querySelector("input"),h=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),M=h.querySelector("input");return c.oninput=g=>{var p;let u=g.target.value.trim();a(c)&&(this.value=u,(p=this.onChange)==null||p.call(this,u),M.value=this.rgbToHex(u),o.style.backgroundColor=`rgb(${u})`)},M.oninput=g=>{var f;const u=g.target.value,p=this.hexToRgb(u);this.value=p,(f=this.onChange)==null||f.call(this,p),c.value=p,o.style.backgroundColor=`rgb(${p})`},s.appendChild(o),s.appendChild(h),s.appendChild(r),t.appendChild(e),t.appendChild(s),this.value&&(c.value=this.value,M.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class v extends d{constructor(t={}){super(t),this.inputType="number"}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(s.value);r<a&&(r=a),r>o&&(r=o),s.value=String(r)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class b extends v{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||O,title:t.title||"Opacity"}),this.inputType="number"}}const O=`
|
|
6
6
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
7
7
|
<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"/>
|
|
8
8
|
<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"/>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
|
|
11
11
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
12
12
|
</svg>
|
|
13
|
-
`;class H extends
|
|
13
|
+
`;class H extends d{constructor(t={}){super(t),this.inputType="select",this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&t.getOptionsAsync().then(e=>{this._options.push(...e),this.selectNode&&e.forEach((i,n)=>{const s=this._options.length-e.length+n;this.selectNode.appendChild(this.createOption(i,s))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t,e){const i=document.createElement("option");return i.value=String(e),i.textContent=t.name,i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.props.icon||this.props.title){const i=document.createElement("div");if(i.className="icon-container",this.props.icon){const n=this.createIcon(this.props.icon);i.appendChild(n)}if(this.props.title){const n=this.createLabel(this.props.title);i.appendChild(n)}t.appendChild(i)}const e=document.createElement("select");if(this.selectNode=e,e.classList.add("select"),this._options.forEach((i,n)=>{const s=this.createOption(i,n);e.appendChild(s)}),this.value!==void 0){const i=this._options.findIndex(n=>n.value===this.value);i>=0&&(e.value=String(i))}return e.onchange=i=>{var a;const n=Number(i.target.value),s=this._options[n];s&&(this.value=s.value,(a=this.onChange)==null||a.call(this,this.value))},t.appendChild(e),t}}class L extends d{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:`
|
|
14
14
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
15
15
|
<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"
|
|
16
16
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<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"
|
|
32
32
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
33
33
|
</svg>
|
|
34
|
-
`}].forEach(s=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=s.icon,this.value===s.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=s.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class
|
|
34
|
+
`}].forEach(s=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=s.icon,this.value===s.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=s.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class $ extends d{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 R extends d{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new v({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:j}),this.heightSetting=new v({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:W}),this.widthSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i/this.aspectRatio),n<1&&(n=1)),this.value={width:i,height:n},n!==0&&(this.aspectRatio=i/n),(s=this.onChange)==null||s.call(this,this.value),this.heightSetting.setValue(n),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i*this.aspectRatio),n<1&&(n=1)),this.value={width:n,height:i},i!==0&&(this.aspectRatio=n/i),(s=this.onChange)==null||s.call(this,this.value),this.widthSetting.setValue(n),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,i=this.value.height;i!==0&&(this.aspectRatio=e/i)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return t?`
|
|
35
35
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
36
36
|
<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="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
37
37
|
</svg>
|
|
@@ -41,74 +41,74 @@
|
|
|
41
41
|
</svg>
|
|
42
42
|
`}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("span");return s.className="dimension-lock-icon",s.innerHTML=this.getLockSVG(this.locked),s.onclick=()=>this.toggleLock(s),n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}}const j=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
43
43
|
<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"/>
|
|
44
|
-
</svg
|
|
44
|
+
</svg>`,W=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
45
45
|
<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"/>
|
|
46
|
-
</svg>`,
|
|
46
|
+
</svg>`,A=`
|
|
47
47
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
48
48
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
49
49
|
</svg>
|
|
50
|
-
`,
|
|
50
|
+
`,G=`
|
|
51
51
|
<svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
52
52
|
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
53
53
|
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
54
54
|
</svg>
|
|
55
|
-
`,
|
|
55
|
+
`,_=`
|
|
56
56
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
|
|
57
57
|
<path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
58
|
</svg>
|
|
59
|
-
`;class V extends
|
|
60
|
-
<span class="upload-icon">${
|
|
59
|
+
`;class V extends d{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl)}updatePreviewState(t=null){!this.previewWrapper||!this.previewEl||!this.emptyStateEl||(t&&t!==""?(this.previewEl.style.display="block",this.emptyStateEl.style.display="none",this.previewEl.src=t,this.previewWrapper.classList.add("has-image")):(this.previewEl.style.display="none",this.emptyStateEl.style.display="block",this.previewEl.src="",this.previewWrapper.classList.remove("has-image")))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.emptyStateEl=document.createElement("div"),this.emptyStateEl.className="empty-state",this.emptyStateEl.innerHTML=G,this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview",this.value&&this.value!==""?this.updatePreviewState(this.value):this.updatePreviewState(null);const i=document.createElement("button");i.className="delete-button",i.type="button",i.title="Delete image",i.innerHTML=_,i.onclick=a=>{var o;a.stopPropagation(),this.value="",this.updatePreviewState(null),(o=this.onChange)==null||o.call(this,"")},this.previewWrapper.appendChild(this.emptyStateEl),this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(i);const n=document.createElement("button");n.className="upload-button",n.innerHTML=`
|
|
60
|
+
<span class="upload-icon">${A}</span>
|
|
61
61
|
<span class="upload-label">Upload</span>
|
|
62
|
-
`;const s=document.createElement("input");return s.type="file",s.accept="image/*",s.style.display="none",n.onclick=()=>{s.click()},s.onchange=async()=>{var o,r,
|
|
62
|
+
`;const s=document.createElement("input");return s.type="file",s.accept="image/*",s.style.display="none",n.onclick=()=>{s.click()},s.onchange=async()=>{var o,r,c;const a=(o=s.files)==null?void 0:o[0];if(a)try{const h=new FormData,M=this.props.formFieldName||"file";h.append(M,a,a.name);const g=this.props.uploadUrl;if(!g)throw new Error("No uploadUrl provided to UploadSetting.");const u=this.props.requestMethod||"POST",p={...this.props.requestHeaders||{}},w=await(await fetch(g,{method:u,body:h,headers:p})).json();let m;if(this.props.parseResponse)m=this.props.parseResponse(w);else if(m=(r=w==null?void 0:w.data)==null?void 0:r.url,!m)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=m,this.updatePreviewState(m),(c=this.onChange)==null||c.call(this,m)}catch(h){console.error("Error uploading file:",h),this.updatePreviewState(null)}},t.appendChild(this.previewWrapper),t.appendChild(n),t.appendChild(s),t}}class F extends d{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new v({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const Z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
63
63
|
<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"/>
|
|
64
|
-
</svg>`;class
|
|
64
|
+
</svg>`;class z extends d{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new v({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:U}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const U=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
65
65
|
<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"/>
|
|
66
|
-
</svg>`,
|
|
66
|
+
</svg>`,D=`
|
|
67
67
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
68
68
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
69
69
|
</svg>
|
|
70
|
-
`,
|
|
70
|
+
`,q=`
|
|
71
71
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
72
72
|
<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"/>
|
|
73
73
|
</svg>
|
|
74
|
-
`;class
|
|
74
|
+
`;class P extends C{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,settings:{color:new y({default:(t==null?void 0:t.color)??"#00141E"}),opacity:new b({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new v({title:"Radius",icon:D,default:(t==null?void 0:t.radius)??12,suffix:"px"}),size:new v({title:"Size",icon:q,default:(t==null?void 0:t.size)??0,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,n=this.settings.size.value??0;return`
|
|
75
75
|
border-color: ${t};
|
|
76
76
|
border-width: ${n}px;
|
|
77
77
|
border-radius: ${i}px;
|
|
78
78
|
opacity: ${e/100};
|
|
79
|
-
`}}const
|
|
79
|
+
`}}const X=`
|
|
80
80
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
81
81
|
<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"/>
|
|
82
82
|
</svg>
|
|
83
|
-
`,
|
|
83
|
+
`,J=`
|
|
84
84
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
85
85
|
<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"/>
|
|
86
86
|
</svg>
|
|
87
|
-
`,
|
|
87
|
+
`,Q=`
|
|
88
88
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
89
89
|
<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"/>
|
|
90
90
|
</svg>
|
|
91
|
-
`;class
|
|
91
|
+
`;class Y extends C{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,settings:{color:new y({default:t.colorDefault??"#00141E"}),opacity:new b({default:t.colorOpacityDefault??100}),fontFamily:new H({title:"Font",icon:X,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new H({title:"Weight",icon:J,default:t.fontWeightDefault??"bold",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new v({title:"Size",icon:Q,default:t.fontSizeDefault??12,suffix:"px"}),align:new L({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",n=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
|
|
92
92
|
color: ${t};
|
|
93
93
|
opacity: ${e/100};
|
|
94
94
|
font-family: ${i};
|
|
95
95
|
font-weight: ${n};
|
|
96
96
|
font-size: ${s}px;
|
|
97
97
|
text-align: ${a};
|
|
98
|
-
`}}class
|
|
98
|
+
`}}class x extends d{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 r=this.props.minValue??Number.MIN_SAFE_INTEGER,c=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(o.value);h<r&&(h=r),h>c&&(h=c),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 n=i.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,i.appendChild(s);const a=i.querySelector("input");return a&&(a.oninput=o=>{const r=o.target.value.trim();if(r.toLowerCase()==="auto")this.value="auto";else{const c=Number(r);isNaN(c)||(this.value=c)}this.onChange&&this.onChange(this.value)}),i}}class K extends C{constructor(t){super({title:"Margins",settings:{marginTop:new x({title:"Top",icon:tt,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new x({title:"Right",icon:et,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new x({title:"Bottom",icon:it,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new x({title:"Left",icon:nt,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,n=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
|
|
99
99
|
margin-top: ${t};
|
|
100
100
|
margin-right: ${e};
|
|
101
101
|
margin-bottom: ${i};
|
|
102
102
|
margin-left: ${n};
|
|
103
|
-
`}}const
|
|
103
|
+
`}}const tt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
104
104
|
<path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
105
|
-
</svg>`,tt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
106
|
-
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
107
105
|
</svg>`,et=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
108
|
-
<path d="
|
|
106
|
+
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
109
107
|
</svg>`,it=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
108
|
+
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
109
|
+
</svg>`,nt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
110
110
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
111
|
-
</svg>`;class
|
|
111
|
+
</svg>`;class st extends C{constructor(t,e){super({title:`Tab ${t+1}`,settings:{name:new k({title:"Tab Name",default:`Tab ${t+1}`}),content:new k({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const n=document.createElement("div");n.className="tab-delete-container";const s=document.createElement("button");s.className="tab-delete-button",s.innerHTML=`
|
|
112
112
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
|
|
113
113
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
114
114
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
<path d="M14 11v6"></path>
|
|
117
117
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
118
118
|
</svg>
|
|
119
|
-
`,s.onclick=()=>{var o;return(o=this.onDeleteCallback)==null?void 0:o.call(this)},n.appendChild(s);const a=i.querySelector("h3");a?a.insertAdjacentElement("afterend",n):i.appendChild(n)}return t}}class
|
|
119
|
+
`,s.onclick=()=>{var o;return(o=this.onDeleteCallback)==null?void 0:o.call(this)},n.appendChild(s);const a=i.querySelector("h3");a?a.insertAdjacentElement("afterend",n):i.appendChild(n)}return t}}class at extends C{constructor(){super({title:"Tabs",settings:{}}),this.tabs=[],this._el=null,this.addTab()}addTab(){const t=this.tabs.length,e=new st(t,()=>this.removeTab(e));this.tabs.push(e),this.settings[`Tab ${t+1}`]=e}removeTab(t){const e=this.tabs.indexOf(t);e>=0&&(this.tabs.splice(e,1),delete this.settings[`Tab ${e+1}`],this.relabelTabs(),this.rerender())}relabelTabs(){this.settings={},this.tabs.forEach((t,e)=>{t.title=`Tab ${e+1}`,this.settings[`Tab ${e+1}`]=t})}draw(){const t=super.draw();this._el=t;const e=document.createElement("div");e.className="tabs-add-btn-container";const i=document.createElement("button");return i.className="tabs-add-button",i.innerHTML=`
|
|
120
120
|
<span class="add-icon">
|
|
121
121
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
|
|
122
122
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
</svg>
|
|
130
130
|
</span>
|
|
131
131
|
<span class="add-label">Add Tab</span>
|
|
132
|
-
`,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
|
|
132
|
+
`,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 ot extends C{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,settings:{backgroundImage:new V({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new b({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new y({default:(t==null?void 0:t.backgroundColor)??"#00141E"}),opacityBG:new b({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[n,s,a,o]=i;e.innerHTML="",e.appendChild(n),e.appendChild(s);const r=document.createElement("div");return r.className="bgset-or-label",r.textContent="OR",e.appendChild(r),e.appendChild(a),e.appendChild(o),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"#00141E",n=this.settings.opacityBG.value??100;return t?`
|
|
133
133
|
background-image: url("${t}");
|
|
134
134
|
background-size: cover;
|
|
135
135
|
background-position: center;
|
|
@@ -137,4 +137,4 @@
|
|
|
137
137
|
`:`
|
|
138
138
|
background-color: ${i};
|
|
139
139
|
opacity: ${n/100};
|
|
140
|
-
`}}exports.AlignSetting=L;exports.BackgroundSettingSet=
|
|
140
|
+
`}}exports.AlignSetting=L;exports.BackgroundSettingSet=ot;exports.BorderSettingSet=P;exports.ButtonSetting=$;exports.ColorSetting=y;exports.DimensionSetting=R;exports.HeaderTypographySettingSet=Y;exports.HeightSetting=F;exports.MarginSettingGroup=K;exports.NumberSetting=v;exports.OpacitySetting=b;exports.SelectSetting=H;exports.Setting=d;exports.SettingGroup=C;exports.StringSetting=k;exports.TabsContainerGroup=at;exports.UploadSetting=V;exports.WidthSetting=z;exports.iterateSettings=N;
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
const
|
|
1
|
+
const L = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
2
|
let N = (l = 21) => {
|
|
3
3
|
let t = "", e = crypto.getRandomValues(new Uint8Array(l |= 0));
|
|
4
4
|
for (; l--; )
|
|
5
|
-
t +=
|
|
5
|
+
t += L[e[l] & 63];
|
|
6
6
|
return t;
|
|
7
7
|
};
|
|
8
|
-
function
|
|
8
|
+
function V(l, t) {
|
|
9
9
|
for (const e in l)
|
|
10
10
|
if (l.hasOwnProperty(e)) {
|
|
11
11
|
const i = l[e];
|
|
12
12
|
t(e, i);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
class
|
|
15
|
+
class m {
|
|
16
16
|
constructor(t) {
|
|
17
17
|
this.id = t.id || N(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, Object.assign(this, t.settings);
|
|
18
18
|
}
|
|
19
19
|
setOnChange(t) {
|
|
20
|
-
return this.onChange = t,
|
|
20
|
+
return this.onChange = t, V(this.settings, (e, i) => {
|
|
21
21
|
i.setOnChange(t);
|
|
22
22
|
}), this;
|
|
23
23
|
}
|
|
@@ -31,12 +31,12 @@ class g {
|
|
|
31
31
|
for (const i in this.settings)
|
|
32
32
|
if (this.settings.hasOwnProperty(i)) {
|
|
33
33
|
const n = this.settings[i];
|
|
34
|
-
n instanceof
|
|
34
|
+
n instanceof m ? e[i] = n.getValues() : e[i] = n.value;
|
|
35
35
|
}
|
|
36
36
|
return e;
|
|
37
37
|
} else {
|
|
38
38
|
const e = this.settings[t];
|
|
39
|
-
return e ? e instanceof
|
|
39
|
+
return e ? e instanceof m ? e.getValues() : e.value : void 0;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
draw() {
|
|
@@ -64,7 +64,7 @@ class g {
|
|
|
64
64
|
return t.appendChild(e), t.appendChild(s), t;
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
function
|
|
67
|
+
function T(l) {
|
|
68
68
|
switch (l) {
|
|
69
69
|
case "number":
|
|
70
70
|
return 0;
|
|
@@ -82,7 +82,7 @@ function V(l) {
|
|
|
82
82
|
return "";
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
|
-
class
|
|
85
|
+
class g {
|
|
86
86
|
constructor(t = {}) {
|
|
87
87
|
this.props = t, this.id = t.id || N(), this.value = this.props.default, this.title = t.title || "";
|
|
88
88
|
}
|
|
@@ -110,7 +110,7 @@ class p {
|
|
|
110
110
|
const i = document.createElement("div");
|
|
111
111
|
i.className = t.wrapperClassName || "";
|
|
112
112
|
const n = document.createElement("input");
|
|
113
|
-
return this.inputEl = n, n.value = String(t.value ||
|
|
113
|
+
return this.inputEl = n, n.value = String(t.value || T(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "", n.oninput = (s) => {
|
|
114
114
|
const a = s.target;
|
|
115
115
|
let o = a.value;
|
|
116
116
|
t.inputType === "number" ? o = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (o = a.value), this.value = o, this.onChange && this.onChange(this.value);
|
|
@@ -125,7 +125,7 @@ class p {
|
|
|
125
125
|
return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
class k extends
|
|
128
|
+
class k extends g {
|
|
129
129
|
constructor(t = {}) {
|
|
130
130
|
super(t), this.inputType = "text";
|
|
131
131
|
}
|
|
@@ -145,54 +145,67 @@ class k extends p {
|
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
|
-
const
|
|
148
|
+
const H = "<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>";
|
|
149
149
|
class y extends k {
|
|
150
150
|
constructor(t) {
|
|
151
151
|
super({
|
|
152
152
|
...t,
|
|
153
|
-
icon: t.icon ||
|
|
153
|
+
icon: t.icon || H,
|
|
154
154
|
title: t.title || "Color"
|
|
155
155
|
}), this.inputType = "color";
|
|
156
156
|
}
|
|
157
|
+
hexToRgb(t) {
|
|
158
|
+
t = t.replace("#", "");
|
|
159
|
+
const e = parseInt(t.substring(0, 2), 16), i = parseInt(t.substring(2, 4), 16), n = parseInt(t.substring(4, 6), 16);
|
|
160
|
+
return `${e}, ${i}, ${n}`;
|
|
161
|
+
}
|
|
162
|
+
rgbToHex(t) {
|
|
163
|
+
const [e, i, n] = t.split(",").map((a) => parseInt(a.trim()));
|
|
164
|
+
if (isNaN(e) || isNaN(i) || isNaN(n)) return "#000000";
|
|
165
|
+
const s = (a) => {
|
|
166
|
+
const o = a.toString(16);
|
|
167
|
+
return o.length === 1 ? "0" + o : o;
|
|
168
|
+
};
|
|
169
|
+
return `#${s(e)}${s(i)}${s(n)}`;
|
|
170
|
+
}
|
|
157
171
|
draw() {
|
|
158
172
|
const t = document.createElement("div");
|
|
159
173
|
t.className = "color-setting-wrapper";
|
|
160
174
|
const e = document.createElement("div");
|
|
161
175
|
e.className = "icon-container";
|
|
162
|
-
const i = this.createIcon(this.props.icon ||
|
|
176
|
+
const i = this.createIcon(this.props.icon || H), n = this.createLabel(this.title || "Color");
|
|
163
177
|
e.appendChild(i), e.appendChild(n);
|
|
164
178
|
const s = document.createElement("div");
|
|
165
179
|
s.className = "color-input-wrapper";
|
|
166
|
-
const a =
|
|
167
|
-
const
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
180
|
+
const a = (d) => {
|
|
181
|
+
const u = d.value.split(",").map((S) => parseInt(S.trim()));
|
|
182
|
+
if (u.length !== 3 || u.some(isNaN))
|
|
183
|
+
return d.style.border = "1px solid red", !1;
|
|
184
|
+
const [p, f, w] = u, C = p >= 0 && p <= 255 && f >= 0 && f <= 255 && w >= 0 && w <= 255;
|
|
185
|
+
return d.style.border = C ? "" : "1px solid red", C;
|
|
186
|
+
}, o = document.createElement("div");
|
|
187
|
+
o.className = "color-preview", o.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
|
|
188
|
+
const r = this.createInput({
|
|
172
189
|
value: this.value,
|
|
173
190
|
inputType: "text",
|
|
174
191
|
inputClassName: "color-text-input"
|
|
175
|
-
}),
|
|
176
|
-
"
|
|
177
|
-
), f = this.createInput({
|
|
178
|
-
value: this.value,
|
|
192
|
+
}), c = r.querySelector("input"), h = this.createInput({
|
|
193
|
+
value: this.value ? this.rgbToHex(this.value) : "",
|
|
179
194
|
inputType: this.inputType,
|
|
180
195
|
inputClassName: "color-picker"
|
|
181
|
-
}),
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
c.charAt(0) !== "#" && (c = "#" + c, m.value = c), this.value = c, (v = this.onChange) == null || v.call(this, c), h.value = c, r.style.backgroundColor = c, o(h);
|
|
192
|
-
}, s.appendChild(r), s.appendChild(f), s.appendChild(u), t.appendChild(e), t.appendChild(s), t;
|
|
196
|
+
}), M = h.querySelector("input");
|
|
197
|
+
return c.oninput = (d) => {
|
|
198
|
+
var p;
|
|
199
|
+
let u = d.target.value.trim();
|
|
200
|
+
a(c) && (this.value = u, (p = this.onChange) == null || p.call(this, u), M.value = this.rgbToHex(u), o.style.backgroundColor = `rgb(${u})`);
|
|
201
|
+
}, M.oninput = (d) => {
|
|
202
|
+
var f;
|
|
203
|
+
const u = d.target.value, p = this.hexToRgb(u);
|
|
204
|
+
this.value = p, (f = this.onChange) == null || f.call(this, p), c.value = p, o.style.backgroundColor = `rgb(${p})`;
|
|
205
|
+
}, s.appendChild(o), s.appendChild(h), s.appendChild(r), t.appendChild(e), t.appendChild(s), this.value && (c.value = this.value, M.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
|
|
193
206
|
}
|
|
194
207
|
}
|
|
195
|
-
class
|
|
208
|
+
class v extends g {
|
|
196
209
|
constructor(t = {}) {
|
|
197
210
|
super(t), this.inputType = "number";
|
|
198
211
|
}
|
|
@@ -223,18 +236,18 @@ class C extends p {
|
|
|
223
236
|
return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
|
|
224
237
|
}
|
|
225
238
|
}
|
|
226
|
-
class
|
|
239
|
+
class x extends v {
|
|
227
240
|
constructor(t) {
|
|
228
241
|
super({
|
|
229
242
|
...t,
|
|
230
243
|
minValue: 0,
|
|
231
244
|
maxValue: 100,
|
|
232
|
-
icon: t.icon ||
|
|
245
|
+
icon: t.icon || I,
|
|
233
246
|
title: t.title || "Opacity"
|
|
234
247
|
}), this.inputType = "number";
|
|
235
248
|
}
|
|
236
249
|
}
|
|
237
|
-
const
|
|
250
|
+
const I = `
|
|
238
251
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
239
252
|
<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"/>
|
|
240
253
|
<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"/>
|
|
@@ -243,7 +256,7 @@ const T = `
|
|
|
243
256
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
244
257
|
</svg>
|
|
245
258
|
`;
|
|
246
|
-
class
|
|
259
|
+
class E extends g {
|
|
247
260
|
constructor(t = {}) {
|
|
248
261
|
super(t), this.inputType = "select", this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && t.getOptionsAsync().then((e) => {
|
|
249
262
|
this._options.push(...e), this.selectNode && e.forEach((i, n) => {
|
|
@@ -287,7 +300,7 @@ class H extends p {
|
|
|
287
300
|
}, t.appendChild(e), t;
|
|
288
301
|
}
|
|
289
302
|
}
|
|
290
|
-
class
|
|
303
|
+
class B extends g {
|
|
291
304
|
constructor(t = {}) {
|
|
292
305
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
293
306
|
}
|
|
@@ -340,7 +353,7 @@ class I extends p {
|
|
|
340
353
|
}), t.appendChild(i), t;
|
|
341
354
|
}
|
|
342
355
|
}
|
|
343
|
-
class
|
|
356
|
+
class Y extends g {
|
|
344
357
|
constructor(t) {
|
|
345
358
|
super(t), this.inputType = "button";
|
|
346
359
|
}
|
|
@@ -353,18 +366,18 @@ class Q extends p {
|
|
|
353
366
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
354
367
|
}
|
|
355
368
|
}
|
|
356
|
-
class
|
|
369
|
+
class K extends g {
|
|
357
370
|
constructor(t = {}) {
|
|
358
|
-
super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new
|
|
371
|
+
super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new v({
|
|
359
372
|
title: "Width",
|
|
360
373
|
default: this.value.width,
|
|
361
374
|
suffix: "px",
|
|
362
375
|
// Display "px" as the unit.
|
|
363
376
|
minValue: t.minWidth ?? 1,
|
|
364
377
|
maxValue: t.maxWidth,
|
|
365
|
-
icon:
|
|
378
|
+
icon: $
|
|
366
379
|
// SVG icon defined at the bottom.
|
|
367
|
-
}), this.heightSetting = new
|
|
380
|
+
}), this.heightSetting = new v({
|
|
368
381
|
title: "Height",
|
|
369
382
|
default: this.value.height,
|
|
370
383
|
suffix: "px",
|
|
@@ -426,7 +439,7 @@ class Y extends p {
|
|
|
426
439
|
return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
|
|
427
440
|
}
|
|
428
441
|
}
|
|
429
|
-
const
|
|
442
|
+
const $ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
430
443
|
<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"/>
|
|
431
444
|
</svg>`, O = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
432
445
|
<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"/>
|
|
@@ -439,12 +452,12 @@ const B = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
439
452
|
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
440
453
|
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
441
454
|
</svg>
|
|
442
|
-
`,
|
|
455
|
+
`, W = `
|
|
443
456
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
|
|
444
457
|
<path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
445
458
|
</svg>
|
|
446
459
|
`;
|
|
447
|
-
class
|
|
460
|
+
class A extends g {
|
|
448
461
|
constructor(t = {}) {
|
|
449
462
|
super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
|
|
450
463
|
}
|
|
@@ -455,7 +468,7 @@ class W extends p {
|
|
|
455
468
|
const t = document.createElement("div");
|
|
456
469
|
t.className = "upload-setting-wrapper", this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = j, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.value && this.value !== "" ? this.updatePreviewState(this.value) : this.updatePreviewState(null);
|
|
457
470
|
const i = document.createElement("button");
|
|
458
|
-
i.className = "delete-button", i.type = "button", i.title = "Delete image", i.innerHTML =
|
|
471
|
+
i.className = "delete-button", i.type = "button", i.title = "Delete image", i.innerHTML = W, i.onclick = (a) => {
|
|
459
472
|
var o;
|
|
460
473
|
a.stopPropagation(), this.value = "", this.updatePreviewState(null), (o = this.onChange) == null || o.call(this, "");
|
|
461
474
|
}, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(i);
|
|
@@ -468,43 +481,43 @@ class W extends p {
|
|
|
468
481
|
return s.type = "file", s.accept = "image/*", s.style.display = "none", n.onclick = () => {
|
|
469
482
|
s.click();
|
|
470
483
|
}, s.onchange = async () => {
|
|
471
|
-
var o, r,
|
|
484
|
+
var o, r, c;
|
|
472
485
|
const a = (o = s.files) == null ? void 0 : o[0];
|
|
473
486
|
if (a)
|
|
474
487
|
try {
|
|
475
|
-
const h = new FormData(),
|
|
476
|
-
h.append(
|
|
477
|
-
const
|
|
478
|
-
if (!
|
|
488
|
+
const h = new FormData(), M = this.props.formFieldName || "file";
|
|
489
|
+
h.append(M, a, a.name);
|
|
490
|
+
const d = this.props.uploadUrl;
|
|
491
|
+
if (!d)
|
|
479
492
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
480
|
-
const
|
|
481
|
-
method:
|
|
493
|
+
const u = this.props.requestMethod || "POST", p = { ...this.props.requestHeaders || {} }, w = await (await fetch(d, {
|
|
494
|
+
method: u,
|
|
482
495
|
body: h,
|
|
483
|
-
headers:
|
|
496
|
+
headers: p
|
|
484
497
|
})).json();
|
|
485
|
-
let
|
|
498
|
+
let C;
|
|
486
499
|
if (this.props.parseResponse)
|
|
487
|
-
|
|
488
|
-
else if (
|
|
500
|
+
C = this.props.parseResponse(w);
|
|
501
|
+
else if (C = (r = w == null ? void 0 : w.data) == null ? void 0 : r.url, !C)
|
|
489
502
|
throw new Error(
|
|
490
503
|
"No URL found in response. Provide a parseResponse if needed."
|
|
491
504
|
);
|
|
492
|
-
this.value =
|
|
505
|
+
this.value = C, this.updatePreviewState(C), (c = this.onChange) == null || c.call(this, C);
|
|
493
506
|
} catch (h) {
|
|
494
507
|
console.error("Error uploading file:", h), this.updatePreviewState(null);
|
|
495
508
|
}
|
|
496
509
|
}, t.appendChild(this.previewWrapper), t.appendChild(n), t.appendChild(s), t;
|
|
497
510
|
}
|
|
498
511
|
}
|
|
499
|
-
class
|
|
512
|
+
class tt extends g {
|
|
500
513
|
constructor(t = {}) {
|
|
501
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
514
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
|
|
502
515
|
title: "Height",
|
|
503
516
|
default: this.value,
|
|
504
517
|
suffix: "px",
|
|
505
518
|
minValue: t.minHeight ?? 1,
|
|
506
519
|
maxValue: t.maxHeight,
|
|
507
|
-
icon:
|
|
520
|
+
icon: _
|
|
508
521
|
}), this.numberSetting.setOnChange((e) => {
|
|
509
522
|
var i;
|
|
510
523
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -514,18 +527,18 @@ class K extends p {
|
|
|
514
527
|
return this.numberSetting.draw();
|
|
515
528
|
}
|
|
516
529
|
}
|
|
517
|
-
const
|
|
530
|
+
const _ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
518
531
|
<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"/>
|
|
519
532
|
</svg>`;
|
|
520
|
-
class
|
|
533
|
+
class et extends g {
|
|
521
534
|
constructor(t = {}) {
|
|
522
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
535
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new v({
|
|
523
536
|
title: "Width",
|
|
524
537
|
default: this.value,
|
|
525
538
|
suffix: "px",
|
|
526
539
|
minValue: t.minWidth ?? 1,
|
|
527
540
|
maxValue: t.maxWidth,
|
|
528
|
-
icon:
|
|
541
|
+
icon: G
|
|
529
542
|
}), this.numberSetting.setOnChange((e) => {
|
|
530
543
|
var i;
|
|
531
544
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -535,18 +548,18 @@ class tt extends p {
|
|
|
535
548
|
return this.numberSetting.draw();
|
|
536
549
|
}
|
|
537
550
|
}
|
|
538
|
-
const
|
|
551
|
+
const G = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
539
552
|
<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"/>
|
|
540
553
|
</svg>`, F = `
|
|
541
554
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
542
555
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
543
556
|
</svg>
|
|
544
|
-
`,
|
|
557
|
+
`, Z = `
|
|
545
558
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
546
559
|
<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"/>
|
|
547
560
|
</svg>
|
|
548
561
|
`;
|
|
549
|
-
class
|
|
562
|
+
class it extends m {
|
|
550
563
|
constructor(t) {
|
|
551
564
|
super({
|
|
552
565
|
title: "Border",
|
|
@@ -555,20 +568,20 @@ class et extends g {
|
|
|
555
568
|
color: new y({
|
|
556
569
|
default: (t == null ? void 0 : t.color) ?? "#00141E"
|
|
557
570
|
}),
|
|
558
|
-
opacity: new
|
|
571
|
+
opacity: new x({
|
|
559
572
|
default: (t == null ? void 0 : t.opacity) ?? 100,
|
|
560
573
|
minValue: 0,
|
|
561
574
|
maxValue: 100
|
|
562
575
|
}),
|
|
563
|
-
radius: new
|
|
576
|
+
radius: new v({
|
|
564
577
|
title: "Radius",
|
|
565
578
|
icon: F,
|
|
566
579
|
default: (t == null ? void 0 : t.radius) ?? 12,
|
|
567
580
|
suffix: "px"
|
|
568
581
|
}),
|
|
569
|
-
size: new
|
|
582
|
+
size: new v({
|
|
570
583
|
title: "Size",
|
|
571
|
-
icon:
|
|
584
|
+
icon: Z,
|
|
572
585
|
default: (t == null ? void 0 : t.size) ?? 0,
|
|
573
586
|
suffix: "px"
|
|
574
587
|
})
|
|
@@ -588,20 +601,20 @@ class et extends g {
|
|
|
588
601
|
`;
|
|
589
602
|
}
|
|
590
603
|
}
|
|
591
|
-
const
|
|
604
|
+
const z = `
|
|
592
605
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
593
606
|
<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"/>
|
|
594
607
|
</svg>
|
|
595
|
-
`,
|
|
608
|
+
`, U = `
|
|
596
609
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
597
610
|
<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"/>
|
|
598
611
|
</svg>
|
|
599
|
-
`,
|
|
612
|
+
`, D = `
|
|
600
613
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
601
614
|
<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"/>
|
|
602
615
|
</svg>
|
|
603
616
|
`;
|
|
604
|
-
class
|
|
617
|
+
class nt extends m {
|
|
605
618
|
constructor(t = {}) {
|
|
606
619
|
super({
|
|
607
620
|
title: t.title || "Typography",
|
|
@@ -610,12 +623,12 @@ class it extends g {
|
|
|
610
623
|
color: new y({
|
|
611
624
|
default: t.colorDefault ?? "#00141E"
|
|
612
625
|
}),
|
|
613
|
-
opacity: new
|
|
626
|
+
opacity: new x({
|
|
614
627
|
default: t.colorOpacityDefault ?? 100
|
|
615
628
|
}),
|
|
616
|
-
fontFamily: new
|
|
629
|
+
fontFamily: new E({
|
|
617
630
|
title: "Font",
|
|
618
|
-
icon:
|
|
631
|
+
icon: z,
|
|
619
632
|
default: t.fontFamilyDefault ?? "Satoshi",
|
|
620
633
|
options: t.fontFamilyOptions ?? [
|
|
621
634
|
{ name: "Satoshi", value: "Satoshi" },
|
|
@@ -625,25 +638,25 @@ class it extends g {
|
|
|
625
638
|
getOptions: t.fontFamilyGetOptions,
|
|
626
639
|
getOptionsAsync: t.fontFamilyGetOptionsAsync
|
|
627
640
|
}),
|
|
628
|
-
fontWeight: new
|
|
641
|
+
fontWeight: new E({
|
|
629
642
|
title: "Weight",
|
|
630
|
-
icon:
|
|
643
|
+
icon: U,
|
|
631
644
|
default: t.fontWeightDefault ?? "bold",
|
|
632
645
|
options: t.fontWeightOptions ?? [
|
|
633
|
-
{ name: "Regular", value: "
|
|
634
|
-
{ name: "Medium", value: "
|
|
635
|
-
{ name: "Bold", value: "
|
|
646
|
+
{ name: "Regular", value: "400" },
|
|
647
|
+
{ name: "Medium", value: "500" },
|
|
648
|
+
{ name: "Bold", value: "600" }
|
|
636
649
|
],
|
|
637
650
|
getOptions: t.fontWeightGetOptions,
|
|
638
651
|
getOptionsAsync: t.fontWeightGetOptionsAsync
|
|
639
652
|
}),
|
|
640
|
-
fontSize: new
|
|
653
|
+
fontSize: new v({
|
|
641
654
|
title: "Size",
|
|
642
|
-
icon:
|
|
655
|
+
icon: D,
|
|
643
656
|
default: t.fontSizeDefault ?? 12,
|
|
644
657
|
suffix: "px"
|
|
645
658
|
}),
|
|
646
|
-
align: new
|
|
659
|
+
align: new B({
|
|
647
660
|
title: "Align",
|
|
648
661
|
default: t.alignDefault ?? "center"
|
|
649
662
|
})
|
|
@@ -662,7 +675,7 @@ class it extends g {
|
|
|
662
675
|
`;
|
|
663
676
|
}
|
|
664
677
|
}
|
|
665
|
-
class
|
|
678
|
+
class b extends g {
|
|
666
679
|
constructor(t) {
|
|
667
680
|
super({
|
|
668
681
|
...t,
|
|
@@ -672,9 +685,9 @@ class x extends p {
|
|
|
672
685
|
draw() {
|
|
673
686
|
const t = this.value === "auto" ? "text" : "number", e = (o) => {
|
|
674
687
|
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", () => {
|
|
675
|
-
const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER,
|
|
688
|
+
const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER, c = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
676
689
|
let h = Number(o.value);
|
|
677
|
-
h < r && (h = r), h >
|
|
690
|
+
h < r && (h = r), h > c && (h = c), o.value = String(h);
|
|
678
691
|
}));
|
|
679
692
|
}, i = this.createInput({
|
|
680
693
|
value: this.value,
|
|
@@ -701,39 +714,39 @@ class x extends p {
|
|
|
701
714
|
if (r.toLowerCase() === "auto")
|
|
702
715
|
this.value = "auto";
|
|
703
716
|
else {
|
|
704
|
-
const
|
|
705
|
-
isNaN(
|
|
717
|
+
const c = Number(r);
|
|
718
|
+
isNaN(c) || (this.value = c);
|
|
706
719
|
}
|
|
707
720
|
this.onChange && this.onChange(this.value);
|
|
708
721
|
}), i;
|
|
709
722
|
}
|
|
710
723
|
}
|
|
711
|
-
class
|
|
724
|
+
class st extends m {
|
|
712
725
|
constructor(t) {
|
|
713
726
|
super({
|
|
714
727
|
title: "Margins",
|
|
715
728
|
settings: {
|
|
716
|
-
marginTop: new
|
|
729
|
+
marginTop: new b({
|
|
717
730
|
title: "Top",
|
|
718
|
-
icon:
|
|
731
|
+
icon: q,
|
|
719
732
|
suffix: "px",
|
|
720
733
|
default: (t == null ? void 0 : t.marginTop) ?? "auto"
|
|
721
734
|
}),
|
|
722
|
-
marginRight: new
|
|
735
|
+
marginRight: new b({
|
|
723
736
|
title: "Right",
|
|
724
|
-
icon:
|
|
737
|
+
icon: P,
|
|
725
738
|
suffix: "px",
|
|
726
739
|
default: (t == null ? void 0 : t.marginRight) ?? 0
|
|
727
740
|
}),
|
|
728
|
-
marginBottom: new
|
|
741
|
+
marginBottom: new b({
|
|
729
742
|
title: "Bottom",
|
|
730
|
-
icon:
|
|
743
|
+
icon: X,
|
|
731
744
|
suffix: "px",
|
|
732
745
|
default: (t == null ? void 0 : t.marginBottom) ?? 0
|
|
733
746
|
}),
|
|
734
|
-
marginLeft: new
|
|
747
|
+
marginLeft: new b({
|
|
735
748
|
title: "Left",
|
|
736
|
-
icon:
|
|
749
|
+
icon: J,
|
|
737
750
|
suffix: "px",
|
|
738
751
|
default: (t == null ? void 0 : t.marginLeft) ?? 0
|
|
739
752
|
})
|
|
@@ -750,16 +763,16 @@ class nt extends g {
|
|
|
750
763
|
`;
|
|
751
764
|
}
|
|
752
765
|
}
|
|
753
|
-
const
|
|
766
|
+
const q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
754
767
|
<path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
755
|
-
</svg>`, q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
756
|
-
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
757
768
|
</svg>`, P = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
758
|
-
<path d="
|
|
769
|
+
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
759
770
|
</svg>`, X = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
771
|
+
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
772
|
+
</svg>`, J = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
760
773
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
761
774
|
</svg>`;
|
|
762
|
-
class
|
|
775
|
+
class Q extends m {
|
|
763
776
|
constructor(t, e) {
|
|
764
777
|
super({
|
|
765
778
|
title: `Tab ${t + 1}`,
|
|
@@ -801,14 +814,14 @@ class J extends g {
|
|
|
801
814
|
return t;
|
|
802
815
|
}
|
|
803
816
|
}
|
|
804
|
-
class
|
|
817
|
+
class at extends m {
|
|
805
818
|
// Store the rendered element
|
|
806
819
|
constructor() {
|
|
807
820
|
super({ title: "Tabs", settings: {} }), this.tabs = [], this._el = null, this.addTab();
|
|
808
821
|
}
|
|
809
822
|
/** Adds a new tab. */
|
|
810
823
|
addTab() {
|
|
811
|
-
const t = this.tabs.length, e = new
|
|
824
|
+
const t = this.tabs.length, e = new Q(t, () => this.removeTab(e));
|
|
812
825
|
this.tabs.push(e), this.settings[`Tab ${t + 1}`] = e;
|
|
813
826
|
}
|
|
814
827
|
/** Removes a specific tab. */
|
|
@@ -861,7 +874,7 @@ class st extends g {
|
|
|
861
874
|
}));
|
|
862
875
|
}
|
|
863
876
|
}
|
|
864
|
-
class
|
|
877
|
+
class ot extends m {
|
|
865
878
|
/**
|
|
866
879
|
* Constructs a new BackgroundSettingSet.
|
|
867
880
|
*
|
|
@@ -891,17 +904,17 @@ class at extends g {
|
|
|
891
904
|
title: "Background Image",
|
|
892
905
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
893
906
|
settings: {
|
|
894
|
-
backgroundImage: new
|
|
907
|
+
backgroundImage: new A({
|
|
895
908
|
...t == null ? void 0 : t.uploadProps,
|
|
896
909
|
default: (t == null ? void 0 : t.backgroundImage) ?? ""
|
|
897
910
|
}),
|
|
898
|
-
opacity: new
|
|
911
|
+
opacity: new x({
|
|
899
912
|
default: (t == null ? void 0 : t.opacity) ?? 100
|
|
900
913
|
}),
|
|
901
914
|
backgroundColor: new y({
|
|
902
915
|
default: (t == null ? void 0 : t.backgroundColor) ?? "#00141E"
|
|
903
916
|
}),
|
|
904
|
-
opacityBG: new
|
|
917
|
+
opacityBG: new x({
|
|
905
918
|
default: (t == null ? void 0 : t.opacityBG) ?? 100
|
|
906
919
|
})
|
|
907
920
|
}
|
|
@@ -935,23 +948,23 @@ class at extends g {
|
|
|
935
948
|
}
|
|
936
949
|
}
|
|
937
950
|
export {
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
951
|
+
B as AlignSetting,
|
|
952
|
+
ot as BackgroundSettingSet,
|
|
953
|
+
it as BorderSettingSet,
|
|
954
|
+
Y as ButtonSetting,
|
|
942
955
|
y as ColorSetting,
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
956
|
+
K as DimensionSetting,
|
|
957
|
+
nt as HeaderTypographySettingSet,
|
|
958
|
+
tt as HeightSetting,
|
|
959
|
+
st as MarginSettingGroup,
|
|
960
|
+
v as NumberSetting,
|
|
961
|
+
x as OpacitySetting,
|
|
962
|
+
E as SelectSetting,
|
|
963
|
+
g as Setting,
|
|
964
|
+
m as SettingGroup,
|
|
952
965
|
k as StringSetting,
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
966
|
+
at as TabsContainerGroup,
|
|
967
|
+
A as UploadSetting,
|
|
968
|
+
et as WidthSetting,
|
|
969
|
+
V as iterateSettings
|
|
957
970
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -98,6 +98,8 @@ export declare interface ButtonSettingProps extends SettingProps<void> {
|
|
|
98
98
|
export declare class ColorSetting extends StringSetting {
|
|
99
99
|
inputType: InputTypes;
|
|
100
100
|
constructor(props: ColorSettingProps);
|
|
101
|
+
private hexToRgb;
|
|
102
|
+
private rgbToHex;
|
|
101
103
|
draw(): HTMLElement;
|
|
102
104
|
}
|
|
103
105
|
|
package/package.json
CHANGED