builder-settings-types 0.0.132 → 0.0.133

package/dist/builder-settings-types.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let R=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=_[e[c]&63];return t};function T(c){if(c===null||typeof c!="object")return c;if(c instanceof Date)return new Date(c.getTime());if(Array.isArray(c)){const i=[];for(let s=0;s<c.length;s++)i[s]=T(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=T(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function j(c){switch(c){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class g{constructor(t={}){this.props=t,this.id=t.id||R(),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=T(this.props),i=new t(e);return i.value=T(this.value),i}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const a=document.createElement("div");if(a.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);a.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);a.appendChild(o)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||j(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=a=>{const o=a.target;let l=o.value;switch(t.inputType){case"number":l=Number(o.value);break;case"color":l=o.value;break;case"date":l=o.value;break;case"select":l=o.value;break;case"text":l=o.value;break;case"button":l=o.value;break;default:l=o.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function y(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const w=class w{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||R(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,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(),this.initialValues=i,t(i),this.updateVisibility()),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),y(this.settings,(i,s)=>{var n;if(s instanceof w)s.setOnChange(a=>{const o=this.getValues();this.initialValues=o,t(o)}),this.changeHandlers.add(()=>t(this.getValues()));else if(s instanceof g){const a=()=>{e()};this.changeHandlers.add(a),s.setOnChange(a)}else{const a=()=>{e()};this.changeHandlers.add(a),(n=s.setOnChange)==null||n.call(s,a)}}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>{t()},100))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef&&this.elementRef.addEventListener("focusout",this.handleBlur,!0),y(this.settings,(t,e)=>{var i;if(e instanceof w)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={};y(this.settings,(n,a)=>{typeof a.clone=="function"?t[n]=a.clone():(console.warn(`Setting with key '${n}' does not have a clone method. Copying reference.`),t[n]=a)});const e={title:this.title,settings:t,description:this.description,icon:this.icon,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,hideCondition:this.hideCondition},i=this.constructor,s=new i(e);return s.initialValues=this.getValues(),s}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof w?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof w?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,w.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=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let R=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=_[e[c]&63];return t};function T(c){if(c===null||typeof c!="object")return c;if(c instanceof Date)return new Date(c.getTime());if(Array.isArray(c)){const i=[];for(let s=0;s<c.length;s++)i[s]=T(c[s]);return i}const t={};for(const i in c)Object.prototype.hasOwnProperty.call(c,i)&&(t[i]=T(c[i]));const e=Object.getPrototypeOf(c);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function j(c){switch(c){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class g{constructor(t={}){this.props=t,this.id=t.id||R(),this.value=this.props.default,this.desktop=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}clone(){const t=this.constructor,e=T(this.props),i=new t(e);return i.value=T(this.value),i}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const a=document.createElement("div");if(a.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);a.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);a.appendChild(o)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||j(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=a=>{const o=a.target;let l=o.value;switch(t.inputType){case"number":l=Number(o.value);break;case"color":l=o.value;break;case"date":l=o.value;break;case"select":l=o.value;break;case"text":l=o.value;break;case"button":l=o.value;break;default:l=o.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}function y(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const w=class w{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||R(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,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(),this.initialValues=i,t(i),this.updateVisibility()),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),y(this.settings,(i,s)=>{var n;if(s instanceof w)s.setOnChange(a=>{const o=this.getValues();this.initialValues=o,t(o)}),this.changeHandlers.add(()=>t(this.getValues()));else if(s instanceof g){const a=()=>{e()};this.changeHandlers.add(a),s.setOnChange(a)}else{const a=()=>{e()};this.changeHandlers.add(a),(n=s.setOnChange)==null||n.call(s,a)}}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>{t()},100))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef&&this.elementRef.addEventListener("focusout",this.handleBlur,!0),y(this.settings,(t,e)=>{var i;if(e instanceof w)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={};y(this.settings,(n,a)=>{typeof a.clone=="function"?t[n]=a.clone():(console.warn(`Setting with key '${n}' does not have a clone method. Copying reference.`),t[n]=a)});const e={title:this.title,settings:t,description:this.description,icon:this.icon,collapsed:this.isCollapsed,main:this.isMain,custom:this.custom,hideCondition:this.hideCondition},i=this.constructor,s=new i(e);return s.initialValues=this.getValues(),s}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof w?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof w?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,w.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=`
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <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" 
             stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>

package/dist/builder-settings-types.es.js

@@ -42,7 +42,7 @@ function $(c) {
 }
 class g {
   constructor(t = {}) {
-    this.props = t, this.id = t.id || R(), this.value = this.props.default, this.title = t.title || "";
+    this.props = t, this.id = t.id || R(), this.value = this.props.default, this.desktop = this.props.default, this.title = t.title || "";
   }
   destroy() {
     throw new Error("Method not implemented.");

package/dist/index.d.ts

@@ -400,6 +400,7 @@ export declare abstract class Setting<T, P extends SettingProps<T>> implements I
     id: string;
     value: T | undefined;
     title: string | undefined;
+    desktop: T | undefined;
     abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
     onChange: ((value: T) => void) | undefined;
     constructor(props?: P);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "builder-settings-types",
   "description": "builder settings",
-  "version": "0.0.132",
+  "version": "0.0.133",
   "type": "module",
   "main": "dist/builder-settings-types.cjs.js",
   "module": "dist/builder-settings-types.es.js",