@symbiotejs/symbiote 1.1.1

package/build/symbiote.base.jsdoc.js

@@ -0,0 +1,697 @@
+/** @returns {Object<string, any>} */
+function cloneObj(obj) {
+  let clone = (o) => {
+    for (let prop in o) {
+      if (o[prop]?.constructor === Object) {
+        o[prop] = clone(o[prop]);
+      }
+    }
+    return { ...o };
+  };
+  return clone(obj);
+}
+
+class Data {
+  /**
+   * @param {Object} src
+   * @param {String} [src.name]
+   * @param {Object<string, any>} src.schema
+   */
+  constructor(src) {
+    this.uid = Symbol();
+    this.name = src.name || null;
+    if (src.schema.constructor === Object) {
+      this.store = cloneObj(src.schema);
+    } else {
+      // For Proxy support:
+      this._storeIsProxy = true;
+      this.store = src.schema;
+    }
+    /** @type {Object<String, Set<Function>>} */
+    this.callbackMap = Object.create(null);
+  }
+
+  /**
+   * @param {String} actionName
+   * @param {String} prop
+   */
+  static warn(actionName, prop) {
+    console.warn(`Symbiote Data: cannot ${actionName}. Prop name: ` + prop);
+  }
+
+  /** @param {String} prop */
+  read(prop) {
+    if (!this._storeIsProxy && !this.store.hasOwnProperty(prop)) {
+      Data.warn('read', prop);
+      return null;
+    }
+    return this.store[prop];
+  }
+
+  /** @param {String} prop */
+  has(prop) {
+    return this._storeIsProxy ? this.store[prop] !== undefined : this.store.hasOwnProperty(prop);
+  }
+
+  /**
+   * @param {String} prop
+   * @param {any} val
+   * @param {Boolean} [rewrite]
+   */
+  add(prop, val, rewrite = true) {
+    if (!rewrite && Object.keys(this.store).includes(prop)) {
+      return;
+    }
+    this.store[prop] = val;
+    if (this.callbackMap[prop]) {
+      this.callbackMap[prop].forEach((callback) => {
+        callback(this.store[prop]);
+      });
+    }
+  }
+
+  /**
+   * @param {String} prop
+   * @param {any} val
+   */
+  pub(prop, val) {
+    if (!this._storeIsProxy && !this.store.hasOwnProperty(prop)) {
+      Data.warn('publish', prop);
+      return;
+    }
+    this.add(prop, val);
+  }
+
+  /** @param {Object<string, any>} updObj */
+  multiPub(updObj) {
+    for (let prop in updObj) {
+      this.pub(prop, updObj[prop]);
+    }
+  }
+
+  /** @param {String} prop */
+  notify(prop) {
+    if (this.callbackMap[prop]) {
+      this.callbackMap[prop].forEach((callback) => {
+        callback(this.store[prop]);
+      });
+    }
+  }
+
+  /**
+   * @param {String} prop
+   * @param {Function} callback
+   * @param {Boolean} [init]
+   */
+  sub(prop, callback, init = true) {
+    if (!this._storeIsProxy && !this.store.hasOwnProperty(prop)) {
+      Data.warn('subscribe', prop);
+      return null;
+    }
+    if (!this.callbackMap[prop]) {
+      this.callbackMap[prop] = new Set();
+    }
+    this.callbackMap[prop].add(callback);
+    if (init) {
+      callback(this.store[prop]);
+    }
+    return {
+      remove: () => {
+        this.callbackMap[prop].delete(callback);
+        if (!this.callbackMap[prop].size) {
+          delete this.callbackMap[prop];
+        }
+      },
+      callback,
+    };
+  }
+
+  remove() {
+    delete Data.globalStore[this.uid];
+  }
+
+  /** @param {Object<string, any>} schema */
+  static registerLocalCtx(schema) {
+    let state = new Data({
+      schema,
+    });
+    Data.globalStore[state.uid] = state;
+    return state;
+  }
+
+  /**
+   * @param {String} ctxName
+   * @param {Object<string, any>} schema
+   * @returns {Data}
+   */
+  static registerNamedCtx(ctxName, schema) {
+    /** @type {Data} */
+    let state = Data.globalStore[ctxName];
+    if (state) {
+      console.warn('State: context name "' + ctxName + '" already in use');
+    } else {
+      state = new Data({
+        name: ctxName,
+        schema,
+      });
+      Data.globalStore[ctxName] = state;
+    }
+    return state;
+  }
+
+  /** @param {String} ctxName */
+  static clearNamedCtx(ctxName) {
+    delete Data.globalStore[ctxName];
+  }
+
+  /**
+   * @param {String} ctxName
+   * @param {Boolean} [notify]
+   * @returns {Data}
+   */
+  static getNamedCtx(ctxName, notify = true) {
+    return Data.globalStore[ctxName] || (notify && console.warn('State: wrong context name - "' + ctxName + '"'), null);
+  }
+}
+
+Data.globalStore = Object.create(null);
+
+const DICT = Object.freeze({
+  //  Template data binding attribute:
+  BIND_ATTR: 'set',
+  //  Local state binding attribute name:
+  ATTR_BIND_PRFX: '@',
+  // External prop prefix:
+  EXT_DATA_CTX_PRFX: '*',
+  // Named data context property splitter:
+  NAMED_DATA_CTX_SPLTR: '/',
+  // Data context name attribute:
+  CTX_NAME_ATTR: 'ctx-name',
+  // Data context name in CSS custom property:
+  CSS_CTX_PROP: '--ctx-name',
+  // Element reference attribute:
+  EL_REF_ATTR: 'ref',
+  // Prefix for auto generated tag names:
+  AUTO_TAG_PRFX: 'sym',
+});
+
+const CHARS = '1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm';
+const CHLENGTH = CHARS.length - 1;
+
+class UID {
+  
+  /**
+   * 
+   * @param {String} [pattern] any symbols sequence with dashes. Default dash is used for human readability
+   * @returns {String} output example: v6xYaSk7C-kzZ
+   */
+  static generate(pattern = 'XXXXXXXXX-XXX') {
+    let uid = '';
+  	for (let i = 0; i < pattern.length; i++) {
+  		uid += pattern[i] === '-' ? pattern[i] : CHARS.charAt(Math.random() * CHLENGTH);
+  	}
+  	return uid;
+  }
+}
+
+function slotProcessor(fr, fnCtx) {
+  if (fnCtx.renderShadow) {
+    return;
+  }
+  let slots = [...fr.querySelectorAll('slot')];
+  if (fnCtx.__initChildren.length && slots.length) {
+    let slotMap = {};
+    slots.forEach((slot) => {
+      let slotName = slot.getAttribute('name');
+      if (slotName) {
+        slotMap[slotName] = {
+          slot,
+          fr: document.createDocumentFragment(),
+        };
+      } else {
+        slotMap.__default__ = {
+          slot,
+          fr: document.createDocumentFragment(),
+        };
+      }
+    });
+    fnCtx.__initChildren.forEach((/** @type {Element} */ child) => {
+      let slotName = child.getAttribute?.('slot');
+      if (slotName) {
+        child.removeAttribute('slot');
+        slotMap[slotName].fr.appendChild(child);
+      } else if (slotMap.__default__) {
+        slotMap.__default__.fr.appendChild(child);
+      }
+    });
+    Object.values(slotMap).forEach((mapObj) => {
+      mapObj.slot.parentNode.insertBefore(mapObj.fr, mapObj.slot);
+      mapObj.slot.remove();
+    });
+  } else {
+    fnCtx.innerHTML = '';
+  }
+}
+
+function refProcessor(fr, fnCtx) {
+  [...fr.querySelectorAll(`[${DICT.EL_REF_ATTR}]`)].forEach((/** @type {HTMLElement} */ el) => {
+    let refName = el.getAttribute(DICT.EL_REF_ATTR);
+    fnCtx.ref[refName] = el;
+    el.removeAttribute(DICT.EL_REF_ATTR);
+  });
+}
+
+/**
+ * @param {DocumentFragment} fr
+ * @param {any} fnCtx
+ */
+function domSetProcessor(fr, fnCtx) {
+  [...fr.querySelectorAll(`[${DICT.BIND_ATTR}]`)].forEach((el) => {
+    let subStr = el.getAttribute(DICT.BIND_ATTR);
+    let keyValsArr = subStr.split(';');
+    keyValsArr.forEach((keyValStr) => {
+      if (!keyValStr) {
+        return;
+      }
+      let kv = keyValStr.split(':').map((str) => str.trim());
+      let prop = kv[0];
+      let isAttr;
+
+      if (prop.indexOf(DICT.ATTR_BIND_PRFX) === 0) {
+        isAttr = true;
+        prop = prop.replace(DICT.ATTR_BIND_PRFX, '');
+      }
+      /** @type {String[]} */
+      let valKeysArr = kv[1].split(',').map((valKey) => {
+        return valKey.trim();
+      });
+      // Deep property:
+      let isDeep, parent, lastStep, dive;
+      if (prop.includes('.')) {
+        isDeep = true;
+        let propPath = prop.split('.');
+        dive = () => {
+          parent = el;
+          propPath.forEach((step, idx) => {
+            if (idx < propPath.length - 1) {
+              parent = parent[step];
+            } else {
+              lastStep = step;
+            }
+          });
+        };
+        dive();
+      }
+      for (let valKey of valKeysArr) {
+        fnCtx.sub(valKey, (val) => {
+          if (isAttr) {
+            if (val?.constructor === Boolean) {
+              val ? el.setAttribute(prop, '') : el.removeAttribute(prop);
+            } else {
+              el.setAttribute(prop, val);
+            }
+          } else if (isDeep) {
+            if (parent) {
+              parent[lastStep] = val;
+            } else {
+              // Custom element instances are not constructed properly at this time, so:
+              window.setTimeout(() => {
+                dive();
+                parent[lastStep] = val;
+              });
+              // TODO: investigate how to do it better ^^^
+            }
+          } else {
+            el[prop] = val;
+          }
+        });
+      }
+    });
+    el.removeAttribute(DICT.BIND_ATTR);
+  });
+}
+
+var PROCESSORS = [slotProcessor, refProcessor, domSetProcessor];
+
+let autoTagsCount = 0;
+
+class BaseComponent extends HTMLElement {
+  /**
+   * @param {String | DocumentFragment} [template]
+   * @param {Boolean} [shadow]
+   */
+  render(template, shadow = this.renderShadow) {
+    /** @type {DocumentFragment} */
+    let fr;
+    if (template || this.constructor['template']) {
+      if (this.constructor['template'] && !this.constructor['__tpl']) {
+        this.constructor['__tpl'] = document.createElement('template');
+        this.constructor['__tpl'].innerHTML = this.constructor['template'];
+      }
+      while (this.firstChild) {
+        this.firstChild.remove();
+      }
+      if (template?.constructor === DocumentFragment) {
+        fr = template;
+      } else if (template?.constructor === String) {
+        let tpl = document.createElement('template');
+        tpl.innerHTML = template;
+        // @ts-ignore
+        fr = tpl.content.cloneNode(true);
+      } else if (this.constructor['__tpl']) {
+        fr = this.constructor['__tpl'].content.cloneNode(true);
+      }
+      for (let fn of this.tplProcessors) {
+        fn(fr, this);
+      }
+    }
+    if (shadow) {
+      if (!this.shadowRoot) {
+        this.attachShadow({
+          mode: 'open',
+        });
+      }
+      fr && this.shadowRoot.appendChild(fr);
+    } else {
+      fr && this.appendChild(fr);
+    }
+  }
+
+  /** @param {(fr: DocumentFragment, fnCtx: any) => any} processorFn */
+  addTemplateProcessor(processorFn) {
+    this.tplProcessors.add(processorFn);
+  }
+
+  constructor() {
+    super();
+    /** @type {Object<string, any>} */
+    this.init$ = Object.create(null);
+    /** @type {Set<(fr: DocumentFragment, fnCtx: any) => any>} */
+    this.tplProcessors = new Set();
+    /** @type {Object<string, HTMLElement>} */
+    this.ref = Object.create(null);
+    this.allSubs = new Set();
+    this.pauseRender = false;
+    this.renderShadow = false;
+    this.readyToDestroy = true;
+  }
+
+  get autoCtxName() {
+    if (!this.__autoCtxName) {
+      this.__autoCtxName = UID.generate();
+      this.style.setProperty(DICT.CSS_CTX_PROP, `'${this.__autoCtxName}'`);
+    }
+    return this.__autoCtxName;
+  }
+
+  get cssCtxName() {
+    return this.getCssData(DICT.CSS_CTX_PROP, true);
+  }
+
+  get ctxName() {
+    return this.getAttribute(DICT.CTX_NAME_ATTR)?.trim() || this.cssCtxName || this.autoCtxName;
+  }
+
+  get localCtx() {
+    if (!this.__localCtx) {
+      this.__localCtx = Data.registerLocalCtx({});
+    }
+    return this.__localCtx;
+  }
+
+  get nodeCtx() {
+    return Data.getNamedCtx(this.ctxName, false) || Data.registerNamedCtx(this.ctxName, {});
+  }
+
+  /**
+   * @param {String} prop
+   * @param {any} fnCtx
+   */
+  static __parseProp(prop, fnCtx) {
+    /** @type {Data} */
+    let ctx;
+    /** @type {String} */
+    let name;
+    if (prop.startsWith(DICT.EXT_DATA_CTX_PRFX)) {
+      ctx = fnCtx.nodeCtx;
+      name = prop.replace(DICT.EXT_DATA_CTX_PRFX, '');
+    } else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
+      let pArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
+      ctx = Data.getNamedCtx(pArr[0]);
+      name = pArr[1];
+    } else {
+      ctx = fnCtx.localCtx;
+      name = prop;
+    }
+    return {
+      ctx,
+      name,
+    };
+  }
+
+  /**
+   * @param {String} prop
+   * @param {(value: any) => void} handler
+   */
+  sub(prop, handler) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    this.allSubs.add(parsed.ctx.sub(parsed.name, handler));
+  }
+
+  /** @param {String} prop */
+  notify(prop) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    parsed.ctx.notify(parsed.name);
+  }
+
+  /** @param {String} prop */
+  has(prop) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    return parsed.ctx.has(parsed.name);
+  }
+
+  /**
+   * @param {String} prop
+   * @param {any} val
+   */
+  add(prop, val) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    parsed.ctx.add(parsed.name, val, false);
+  }
+
+  /** @param {Object<string, any>} obj */
+  add$(obj) {
+    for (let prop in obj) {
+      this.add(prop, obj[prop]);
+    }
+  }
+
+  get $() {
+    if (!this.__stateProxy) {
+      /** @type {Object<string, any>} */
+      let o = Object.create(null);
+      this.__stateProxy = new Proxy(o, {
+        set: (obj, /** @type {String} */ prop, val) => {
+          let parsed = BaseComponent.__parseProp(prop, this);
+          parsed.ctx.pub(parsed.name, val);
+          return true;
+        },
+        get: (obj, /** @type {String} */ prop) => {
+          let parsed = BaseComponent.__parseProp(prop, this);
+          return parsed.ctx.read(parsed.name);
+        },
+      });
+    }
+    return this.__stateProxy;
+  }
+
+  /** @param {Object<string, any>} kvObj */
+  set$(kvObj) {
+    for (let key in kvObj) {
+      this.$[key] = kvObj[key];
+    }
+  }
+
+  initCallback() {}
+
+  __initDataCtx() {
+    let attrDesc = this.constructor['__attrDesc'];
+    if (attrDesc) {
+      for (let prop of Object.values(attrDesc)) {
+        if (!Object.keys(this.init$).includes(prop)) {
+          this.init$[prop] = '';
+        }
+      }
+    }
+    for (let prop in this.init$) {
+      if (prop.startsWith(DICT.EXT_DATA_CTX_PRFX)) {
+        this.nodeCtx.add(prop.replace(DICT.EXT_DATA_CTX_PRFX, ''), this.init$[prop]);
+      } else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
+        let propArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
+        let ctxName = propArr[0].trim();
+        let propName = propArr[1].trim();
+        if (ctxName && propName) {
+          let namedCtx = Data.getNamedCtx(ctxName, false);
+          if (!namedCtx) {
+            namedCtx = Data.registerNamedCtx(ctxName, {});
+          }
+          namedCtx.add(propName, this.init$[prop]);
+        }
+      } else {
+        this.localCtx.add(prop, this.init$[prop]);
+      }
+    }
+    this.__dataCtxInitialized = true;
+  }
+
+  connectedCallback() {
+    if (this.__disconnectTimeout) {
+      window.clearTimeout(this.__disconnectTimeout);
+    }
+    if (!this.connectedOnce) {
+      let ctxNameAttrVal = this.getAttribute(DICT.CTX_NAME_ATTR)?.trim();
+      if (ctxNameAttrVal) {
+        this.style.setProperty(DICT.CSS_CTX_PROP, `'${ctxNameAttrVal}'`);
+      }
+      this.__initDataCtx();
+      this.__initChildren = [...this.childNodes];
+      for (let proc of PROCESSORS) {
+        this.addTemplateProcessor(proc);
+      }
+      if (!this.pauseRender) {
+        this.render();
+      }
+      this.initCallback?.();
+    }
+    this.connectedOnce = true;
+  }
+
+  destroyCallback() {}
+
+  disconnectedCallback() {
+    this.dropCssDataCache();
+    if (!this.readyToDestroy) {
+      return;
+    }
+    if (this.__disconnectTimeout) {
+      window.clearTimeout(this.__disconnectTimeout);
+    }
+    this.__disconnectTimeout = window.setTimeout(() => {
+      this.destroyCallback();
+      for (let sub of this.allSubs) {
+        sub.remove();
+        this.allSubs.delete(sub);
+      }
+      for (let proc of this.tplProcessors) {
+        this.tplProcessors.delete(proc);
+      }
+    }, 100);
+  }
+
+  /**
+   * @param {String} [tagName]
+   * @param {Boolean} [isAlias]
+   */
+  static reg(tagName, isAlias = false) {
+    if (!tagName) {
+      autoTagsCount++;
+      tagName = `${DICT.AUTO_TAG_PRFX}-${autoTagsCount}`;
+    }
+    this.__tag = tagName;
+    if (window.customElements.get(tagName)) {
+      console.warn(`${tagName} - is already in "customElements" registry`);
+      return;
+    }
+    window.customElements.define(tagName, isAlias ? class extends this {} : this);
+  }
+
+  static get is() {
+    if (!this.__tag) {
+      this.reg();
+    }
+    return this.__tag;
+  }
+
+  /** @param {Object<string, string>} desc */
+  static bindAttributes(desc) {
+    this.observedAttributes = Object.keys(desc);
+    this.__attrDesc = desc;
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    /** @type {String} */
+    let $prop = this.constructor['__attrDesc'][name];
+    if ($prop) {
+      if (this.__dataCtxInitialized) {
+        this.$[$prop] = newVal;
+      } else {
+        this.init$[$prop] = newVal;
+      }
+    } else {
+      this[name] = newVal;
+    }
+  }
+
+  /**
+   * @param {String} propName
+   * @param {Boolean} [silentCheck]
+   */
+  getCssData(propName, silentCheck = false) {
+    if (!this.__cssDataCache) {
+      this.__cssDataCache = Object.create(null);
+    }
+    if (!Object.keys(this.__cssDataCache).includes(propName)) {
+      if (!this.__computedStyle) {
+        this.__computedStyle = window.getComputedStyle(this);
+      }
+      let val = this.__computedStyle.getPropertyValue(propName).trim();
+      // Firefox doesn't transform string values into JSON format:
+      if (val.startsWith(`'`) && val.endsWith(`'`)) {
+        val = val.replace(/\'/g, '"');
+      }
+      try {
+        this.__cssDataCache[propName] = JSON.parse(val);
+      } catch (e) {
+        !silentCheck && console.warn(`CSS Data error: ${propName}`);
+        this.__cssDataCache[propName] = null;
+      }
+    }
+    return this.__cssDataCache[propName];
+  }
+
+  dropCssDataCache() {
+    this.__cssDataCache = null;
+    this.__computedStyle = null;
+  }
+
+  /**
+   * @param {String} propName
+   * @param {Function} [handler]
+   * @param {Boolean} [isAsync]
+   */
+  defineAccessor(propName, handler, isAsync) {
+    let localPropName = '__' + propName;
+    this[localPropName] = this[propName];
+    Object.defineProperty(this, propName, {
+      set: (val) => {
+        this[localPropName] = val;
+        if (isAsync) {
+          window.setTimeout(() => {
+            handler?.(val);
+          });
+        } else {
+          handler?.(val);
+        }
+      },
+      get: () => {
+        return this[localPropName];
+      },
+    });
+    this[propName] = this[localPropName];
+  }
+}
+
+export { BaseComponent };

package/build/symbiote.base.min.js

@@ -0,0 +1 @@
+function y(h){let t=e=>{var s;for(let i in e)((s=e[i])==null?void 0:s.constructor)===Object&&(e[i]=t(e[i]));return{...e}};return t(h)}var l=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=y(t.schema):(this._storeIsProxy=!0,this.store=t.schema),this.callbackMap=Object.create(null)}static warn(t,e){console.warn(`Symbiote Data: cannot ${t}. Prop name: `+e)}read(t){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(l.warn("read",t),null):this.store[t]}has(t){return this._storeIsProxy?this.store[t]!==void 0:this.store.hasOwnProperty(t)}add(t,e,s=!0){!s&&Object.keys(this.store).includes(t)||(this.store[t]=e,this.callbackMap[t]&&this.callbackMap[t].forEach(i=>{i(this.store[t])}))}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){l.warn("publish",t);return}this.add(t,e)}multiPub(t){for(let e in t)this.pub(e,t[e])}notify(t){this.callbackMap[t]&&this.callbackMap[t].forEach(e=>{e(this.store[t])})}sub(t,e,s=!0){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(l.warn("subscribe",t),null):(this.callbackMap[t]||(this.callbackMap[t]=new Set),this.callbackMap[t].add(e),s&&e(this.store[t]),{remove:()=>{this.callbackMap[t].delete(e),this.callbackMap[t].size||delete this.callbackMap[t]},callback:e})}remove(){delete l.globalStore[this.uid]}static registerLocalCtx(t){let e=new l({schema:t});return l.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=l.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new l({name:t,schema:e}),l.globalStore[t]=s),s}static clearNamedCtx(t){delete l.globalStore[t]}static getNamedCtx(t,e=!0){return l.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};l.globalStore=Object.create(null);var r=Object.freeze({BIND_ATTR:"set",ATTR_BIND_PRFX:"@",EXT_DATA_CTX_PRFX:"*",NAMED_DATA_CTX_SPLTR:"/",CTX_NAME_ATTR:"ctx-name",CSS_CTX_PROP:"--ctx-name",EL_REF_ATTR:"ref",AUTO_TAG_PRFX:"sym"});var b="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",p=b.length-1,m=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:b.charAt(Math.random()*p);return e}};function R(h,t){if(t.renderShadow)return;let e=[...h.querySelectorAll("slot")];if(t.__initChildren.length&&e.length){let s={};e.forEach(i=>{let o=i.getAttribute("name");o?s[o]={slot:i,fr:document.createDocumentFragment()}:s.__default__={slot:i,fr:document.createDocumentFragment()}}),t.__initChildren.forEach(i=>{var c;let o=(c=i.getAttribute)==null?void 0:c.call(i,"slot");o?(i.removeAttribute("slot"),s[o].fr.appendChild(i)):s.__default__&&s.__default__.fr.appendChild(i)}),Object.values(s).forEach(i=>{i.slot.parentNode.insertBefore(i.fr,i.slot),i.slot.remove()})}else t.innerHTML=""}function X(h,t){[...h.querySelectorAll(`[${r.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(r.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(r.EL_REF_ATTR)})}function D(h,t){[...h.querySelectorAll(`[${r.BIND_ATTR}]`)].forEach(e=>{e.getAttribute(r.BIND_ATTR).split(";").forEach(o=>{if(!o)return;let c=o.split(":").map(u=>u.trim()),n=c[0],C;n.indexOf(r.ATTR_BIND_PRFX)===0&&(C=!0,n=n.replace(r.ATTR_BIND_PRFX,""));let S=c[1].split(",").map(u=>u.trim()),A,d,f,T;if(n.includes(".")){A=!0;let u=n.split(".");T=()=>{d=e,u.forEach((a,g)=>{g<u.length-1?d=d[a]:f=a})},T()}for(let u of S)t.sub(u,a=>{C?(a==null?void 0:a.constructor)===Boolean?a?e.setAttribute(n,""):e.removeAttribute(n):e.setAttribute(n,a):A?d?d[f]=a:window.setTimeout(()=>{T(),d[f]=a}):e[n]=a})}),e.removeAttribute(r.BIND_ATTR)})}var P=[R,X,D];var x=0,_=class extends HTMLElement{render(t,e=this.renderShadow){let s;if(t||this.constructor.template){for(this.constructor.template&&!this.constructor.__tpl&&(this.constructor.__tpl=document.createElement("template"),this.constructor.__tpl.innerHTML=this.constructor.template);this.firstChild;)this.firstChild.remove();if((t==null?void 0:t.constructor)===DocumentFragment)s=t;else if((t==null?void 0:t.constructor)===String){let i=document.createElement("template");i.innerHTML=t,s=i.content.cloneNode(!0)}else this.constructor.__tpl&&(s=this.constructor.__tpl.content.cloneNode(!0));for(let i of this.tplProcessors)i(s,this)}e?(this.shadowRoot||this.attachShadow({mode:"open"}),s&&this.shadowRoot.appendChild(s)):s&&this.appendChild(s)}addTemplateProcessor(t){this.tplProcessors.add(t)}constructor(){super();this.init$=Object.create(null),this.tplProcessors=new Set,this.ref=Object.create(null),this.allSubs=new Set,this.pauseRender=!1,this.renderShadow=!1,this.readyToDestroy=!0}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=m.generate(),this.style.setProperty(r.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(r.CSS_CTX_PROP,!0)}get ctxName(){var t;return((t=this.getAttribute(r.CTX_NAME_ATTR))==null?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=l.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return l.getNamedCtx(this.ctxName,!1)||l.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,i;if(t.startsWith(r.EXT_DATA_CTX_PRFX))s=e.nodeCtx,i=t.replace(r.EXT_DATA_CTX_PRFX,"");else if(t.includes(r.NAMED_DATA_CTX_SPLTR)){let o=t.split(r.NAMED_DATA_CTX_SPLTR);s=l.getNamedCtx(o[0]),i=o[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=_.__parseProp(t,this);this.allSubs.add(s.ctx.sub(s.name,e))}notify(t){let e=_.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=_.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=_.__parseProp(t,this);s.ctx.add(s.name,e,!1)}add$(t){for(let e in t)this.add(e,t[e])}get $(){if(!this.__stateProxy){let t=Object.create(null);this.__stateProxy=new Proxy(t,{set:(e,s,i)=>{let o=_.__parseProp(s,this);return o.ctx.pub(o.name,i),!0},get:(e,s)=>{let i=_.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t){for(let e in t)this.$[e]=t[e]}initCallback(){}__initDataCtx(){let t=this.constructor.__attrDesc;if(t)for(let e of Object.values(t))Object.keys(this.init$).includes(e)||(this.init$[e]="");for(let e in this.init$)if(e.startsWith(r.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(r.EXT_DATA_CTX_PRFX,""),this.init$[e]);else if(e.includes(r.NAMED_DATA_CTX_SPLTR)){let s=e.split(r.NAMED_DATA_CTX_SPLTR),i=s[0].trim(),o=s[1].trim();if(i&&o){let c=l.getNamedCtx(i,!1);c||(c=l.registerNamedCtx(i,{})),c.add(o,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t,e;if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let s=(t=this.getAttribute(r.CTX_NAME_ATTR))==null?void 0:t.trim();s&&this.style.setProperty(r.CSS_CTX_PROP,`'${s}'`),this.__initDataCtx(),this.__initChildren=[...this.childNodes];for(let i of P)this.addTemplateProcessor(i);this.pauseRender||this.render(),(e=this.initCallback)==null||e.call(this)}this.connectedOnce=!0}destroyCallback(){}disconnectedCallback(){this.dropCssDataCache(),!!this.readyToDestroy&&(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),this.__disconnectTimeout=window.setTimeout(()=>{this.destroyCallback();for(let t of this.allSubs)t.remove(),this.allSubs.delete(t);for(let t of this.tplProcessors)this.tplProcessors.delete(t)},100))}static reg(t,e=!1){if(t||(x++,t=`${r.AUTO_TAG_PRFX}-${x}`),this.__tag=t,window.customElements.get(t)){console.warn(`${t} - is already in "customElements" registry`);return}window.customElements.define(t,e?class extends this{}:this)}static get is(){return this.__tag||this.reg(),this.__tag}static bindAttributes(t){this.observedAttributes=Object.keys(t),this.__attrDesc=t}attributeChangedCallback(t,e,s){if(e===s)return;let i=this.constructor.__attrDesc[t];i?this.__dataCtxInitialized?this.$[i]=s:this.init$[i]=s:this[t]=s}getCssData(t,e=!1){if(this.__cssDataCache||(this.__cssDataCache=Object.create(null)),!Object.keys(this.__cssDataCache).includes(t)){this.__computedStyle||(this.__computedStyle=window.getComputedStyle(this));let s=this.__computedStyle.getPropertyValue(t).trim();s.startsWith("'")&&s.endsWith("'")&&(s=s.replace(/\'/g,'"'));try{this.__cssDataCache[t]=JSON.parse(s)}catch{!e&&console.warn(`CSS Data error: ${t}`),this.__cssDataCache[t]=null}}return this.__cssDataCache[t]}dropCssDataCache(){this.__cssDataCache=null,this.__computedStyle=null}defineAccessor(t,e,s){let i="__"+t;this[i]=this[t],Object.defineProperty(this,t,{set:o=>{this[i]=o,s?window.setTimeout(()=>{e==null||e(o)}):e==null||e(o)},get:()=>this[i]}),this[t]=this[i]}};export{_ as BaseComponent};