@webtides/element-js 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/index.js

@@ -1,1330 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-
-// src/util/AttributeParser.js
-function isObjectLike(value) {
-  return typeof value == "object" && value !== null;
-}
-function isJSON(str) {
-  try {
-    return JSON.parse(str) && !!str;
-  } catch (e) {
-    return false;
-  }
-}
-function isBoolean(value) {
-  return value === "true" || value === "false";
-}
-function parseBoolean(value) {
-  return value === "true";
-}
-function isString(value) {
-  return typeof value === "string" || !!value && typeof value === "object" && Object.prototype.toString.call(value) === "[object String]";
-}
-function isNumber(value) {
-  return new RegExp("^-?(0|0\\.\\d+|[1-9]\\d*(\\.\\d+)?)$").test(value);
-}
-function isNaN(value) {
-  return Number.isNaN(value);
-}
-function deepEquals(valueA, valueB) {
-  return JSON.stringify(valueA) === JSON.stringify(valueB);
-}
-function parseAttribute(value, options = {}) {
-  if (options.parse === false || !isString(value)) {
-    return value;
-  }
-  if (typeof options.parse === "function") {
-    return options.parse(value);
-  }
-  let parsedValue = value;
-  if (isJSON(value))
-    parsedValue = JSON.parse(value);
-  else if (isBoolean(value))
-    parsedValue = parseBoolean(value);
-  else if (isNumber(value))
-    parsedValue = parseFloat(value);
-  return parsedValue;
-}
-function dashToCamel(string) {
-  if (string.indexOf("-") === -1)
-    return string;
-  return string.replace(/-[a-z]/g, (matches) => matches[1].toUpperCase());
-}
-function camelToDash(string) {
-  return string.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
-function encodeAttribute(attribute2) {
-  return `${attribute2}`.replace(/'/g, "&apos;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r\n/g, "\n").replace(/[\r\n]/g, "\n");
-}
-
-// src/util/DOMHelper.js
-var ELEMENT_NODE = 1;
-var COMMENT_NODE = 8;
-var getNodePath = (node) => {
-  const path = [];
-  let parentNode = node.parentNode;
-  while (parentNode) {
-    path.push([...parentNode.childNodes].indexOf(node));
-    node = parentNode;
-    parentNode = node.parentNode;
-  }
-  return path;
-};
-function getShadowParentOrBody(element) {
-  if (element instanceof ShadowRoot) {
-    return element;
-  }
-  while (element.parentNode && (element = element.parentNode)) {
-    if (element instanceof ShadowRoot) {
-      return element;
-    }
-  }
-  return document.body;
-}
-var supportsAdoptingStyleSheets = () => "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
-var supportsAppendingStyleSheets = !window.ShadyDOM;
-var convertStringToTemplate = (string) => {
-  var _a;
-  const template = (_a = globalThis.document) == null ? void 0 : _a.createElement("template");
-  template.innerHTML = string.trimStart().trimEnd();
-  return template.content;
-};
-
-// src/util/Store.js
-var Store = class {
-  constructor(value) {
-    __publicField(this, "_observer", /* @__PURE__ */ new Set());
-    __publicField(this, "_singlePropertyMode", false);
-    __publicField(this, "_state", {});
-    this._singlePropertyMode = arguments.length > 0 && !isObjectLike(value);
-    const specificValues = this._singlePropertyMode ? { value } : value;
-    this._state = { ...!this._singlePropertyMode && this.properties(), ...specificValues };
-    Object.entries(this._state).map(([key, value2]) => {
-      Object.defineProperty(this, key, {
-        get: () => {
-          return this._state[key];
-        },
-        set: (newValue) => {
-          const oldValue = this._state[key];
-          this._state[key] = newValue;
-          if (!deepEquals(newValue, oldValue)) {
-            const watch = this.watch();
-            if (watch.hasOwnProperty(key) && typeof watch[key] === "function") {
-              watch[key](newValue, oldValue);
-            }
-            this.requestUpdate();
-          }
-        }
-      });
-    });
-  }
-  properties() {
-    return {};
-  }
-  watch() {
-    return {};
-  }
-  valueOf() {
-    return this._singlePropertyMode ? this._state.value : this._state;
-  }
-  toString() {
-    return `${this._singlePropertyMode ? this._state.value : this._state}`;
-  }
-  subscribe(observer) {
-    this._observer.add(observer);
-  }
-  unsubscribe(observer) {
-    this._observer.delete(observer);
-  }
-  requestUpdate() {
-    this._observer.forEach(async (observer) => {
-      var _a, _b;
-      if (observer instanceof BaseElement) {
-        await observer.requestUpdate();
-        if (Object.keys((_a = observer.watch()) != null ? _a : {}).length > 0) {
-          const properties = observer.properties();
-          Object.keys((_b = observer.watch()) != null ? _b : {}).forEach((key) => {
-            if (observer._state[key] === this) {
-              observer.callPropertyWatcher(key, this, this);
-              observer.notifyPropertyChange(key, this);
-            }
-          });
-        }
-      } else if (typeof observer === "function") {
-        observer();
-      } else {
-        console.error("Store: observer type is not supported.", observer);
-      }
-    });
-  }
-};
-
-// src/util/defineElement.js
-function defineElement(name, constructor) {
-  try {
-    customElements.define(name, constructor);
-  } catch (e) {
-  }
-}
-
-// src/util/toString.js
-function toString(value) {
-  try {
-    return JSON.stringify(value);
-  } catch (e) {
-    return "";
-  }
-}
-
-// src/BaseElement.js
-var BaseElement = class extends HTMLElement {
-  constructor(options = {}) {
-    super();
-    this.$refs = {};
-    this._state = {};
-    this._mutationObserver = null;
-    this._registeredEvents = [];
-    this._batchUpdate = null;
-    this._requestedUpdates = [];
-    this._options = {
-      autoUpdate: true,
-      deferUpdate: true,
-      mutationObserverOptions: {
-        attributes: true,
-        childList: true,
-        subtree: false,
-        ...options.mutationObserverOptions
-      },
-      propertyOptions: {},
-      ...options
-    };
-  }
-  connectedCallback() {
-    this.defineAttributesAsProperties();
-    this.defineProperties();
-    this.definePropertyInjection();
-    this.defineObserver();
-    if (this.hasAttribute("defer-update") || this._options.deferUpdate) {
-      this.registerEventsAndRefs();
-      this.triggerHook("connected");
-    } else {
-      this.requestUpdate({ notify: false }).then(() => {
-        this.triggerHook("connected");
-        this.triggerHook("afterUpdate");
-      });
-    }
-  }
-  defineObserver() {
-    this._mutationObserver = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === "attributes" && mutation.target === this && this._state.hasOwnProperty(dashToCamel(mutation.attributeName))) {
-          this[dashToCamel(mutation.attributeName)] = parseAttribute(
-            this.getAttribute(mutation.attributeName),
-            this._options.propertyOptions[dashToCamel(mutation.attributeName)]
-          );
-        }
-        if (mutation.type === "attributes" && mutation.target !== this) {
-          this.requestUpdate();
-        }
-        if (mutation.type === "childList") {
-          this.requestUpdate();
-        }
-      });
-    });
-    this._mutationObserver.observe(this, {
-      attributes: true,
-      childList: true,
-      subtree: false,
-      ...this._options.mutationObserverOptions
-    });
-  }
-  disconnectedCallback() {
-    this.removeEvents();
-    if (Object.keys(this.provideProperties()).length > 0) {
-      this.removeEventListener("request-context", this.onRequestContext);
-    }
-    if (this._mutationObserver)
-      this._mutationObserver.disconnect();
-    Object.values(this.properties()).forEach((property) => {
-      if (property instanceof Store) {
-        property.unsubscribe(this);
-      }
-    });
-    this.triggerHook("disconnected");
-  }
-  requestUpdate(options = { notify: true }) {
-    if (options.notify === true) {
-      this.triggerHook("beforeUpdate");
-    }
-    if (this._batchUpdate) {
-      cancelAnimationFrame(this._batchUpdate);
-      this._batchUpdate = false;
-    }
-    return new Promise((resolve, reject) => {
-      this._requestedUpdates.push({ resolve, reject });
-      this._batchUpdate = requestAnimationFrame(() => {
-        try {
-          this.update(options);
-          this._requestedUpdates.forEach(({ resolve: resolve2, reject: reject2 }) => resolve2());
-        } catch (e) {
-          this._requestedUpdates.forEach(({ resolve: resolve2, reject: reject2 }) => reject2(e));
-        }
-        this._requestedUpdates = [];
-      });
-    });
-  }
-  update(options = { notify: true }) {
-    this.registerEventsAndRefs();
-    if (options.notify === true) {
-      this.triggerHook("afterUpdate");
-    }
-  }
-  registerEventsAndRefs() {
-    this.registerEvents();
-    this.registerRefs();
-  }
-  defineAttributesAsProperties() {
-    const ignoreAttributes = ["class", "style"];
-    Array.from(this.attributes).filter((attribute2) => {
-      return !ignoreAttributes.includes(attribute2.name);
-    }).forEach((attribute2) => {
-      const name = dashToCamel(attribute2.name);
-      const parseOptions = this._options.propertyOptions[name];
-      this.defineProperty(name, parseAttribute(attribute2.value, parseOptions), true);
-    });
-  }
-  properties() {
-    return {};
-  }
-  defineProperties() {
-    Object.keys({ ...this.injectProperties(), ...this.properties() }).forEach((prop) => {
-      const value = this[prop] || this.properties()[prop];
-      this.defineProperty(prop, value);
-    });
-  }
-  defineProperty(property, value, reflectAttribute = false) {
-    var _a, _b;
-    if (value instanceof Store) {
-      value.subscribe(this);
-    }
-    if (this._state.hasOwnProperty(property)) {
-      return;
-    }
-    if (!reflectAttribute && ((_a = this._options.propertyOptions[property]) == null ? void 0 : _a.reflect)) {
-      this.reflectProperty({ property, newValue: value });
-    }
-    if (((_b = this._options.propertyOptions[property]) == null ? void 0 : _b.reflect) === false) {
-      this.removeAttribute(camelToDash(property));
-    }
-    this._state[property] = value;
-    Object.defineProperty(this, property, {
-      get: () => {
-        return this._state[property];
-      },
-      set: (newValue) => {
-        var _a2;
-        const oldValue = this._state[property];
-        const newValueString = JSON.stringify(newValue);
-        if (JSON.stringify(oldValue) !== newValueString) {
-          this._state[property] = newValue;
-          if (newValue instanceof Store) {
-            newValue.subscribe(this);
-          }
-          if (reflectAttribute || ((_a2 = this._options.propertyOptions[property]) == null ? void 0 : _a2.reflect)) {
-            this.reflectProperty({ property, newValue, newValueString });
-          }
-          if (this._options.autoUpdate) {
-            this.requestUpdate({
-              notify: true,
-              property,
-              newValue,
-              newValueString,
-              oldValue
-            }).finally(() => {
-              this.callPropertyWatcher(property, newValue, oldValue);
-              this.notifyPropertyChange(property, newValue);
-            });
-          } else {
-            this.callPropertyWatcher(property, newValue, oldValue);
-            this.notifyPropertyChange(property, newValue);
-          }
-        }
-        return this;
-      }
-    });
-  }
-  callPropertyWatcher(property, newValue, oldValue) {
-    const watch = this.watch();
-    if (property in watch) {
-      watch[property](newValue, oldValue);
-    }
-  }
-  notifyPropertyChange(property, newValue) {
-    if (property in this._options["propertyOptions"] && this._options["propertyOptions"][property]["notify"] === true) {
-      this.dispatch(`${camelToDash(property)}-changed`, newValue, true);
-    }
-  }
-  reflectProperty(options) {
-    var _a;
-    const { property, newValue } = options;
-    const newValueString = options.newValueString || JSON.stringify(newValue);
-    if (newValue === void 0 || newValue === null || isNaN(newValue)) {
-      this.setAttribute(camelToDash(property), "");
-    } else {
-      let attributeValue = isObjectLike(newValue) ? newValueString : newValue;
-      if (typeof ((_a = this._options.propertyOptions[property]) == null ? void 0 : _a.reflect) === "function") {
-        attributeValue = this._options.propertyOptions[property].reflect(newValue);
-      }
-      this.setAttribute(camelToDash(property), attributeValue);
-    }
-  }
-  injectProperties() {
-    return {};
-  }
-  provideProperties() {
-    return {};
-  }
-  definePropertyInjection() {
-    Object.entries(this.injectProperties()).forEach(([key, value]) => {
-      this.requestContext(key, value);
-    });
-    if (Object.keys(this.provideProperties()).length > 0) {
-      this.addEventListener("request-context", this.onRequestContext);
-    }
-  }
-  requestContext(propertyName, valueOrCallback) {
-    this.dispatch("request-context", { [propertyName]: valueOrCallback }, true);
-  }
-  onRequestContext(event) {
-    var _a;
-    const properties = this.properties();
-    const provideProperties = this.provideProperties();
-    Object.entries((_a = event.detail) != null ? _a : {}).forEach(([key, valueOrCallback]) => {
-      if (key in provideProperties) {
-        const providedValue = provideProperties[key];
-        event.stopPropagation();
-        if (typeof valueOrCallback === "function") {
-          valueOrCallback(providedValue);
-        } else {
-          event.target[key] = providedValue;
-        }
-      }
-    });
-  }
-  connected() {
-  }
-  beforeUpdate() {
-  }
-  afterUpdate() {
-  }
-  disconnected() {
-  }
-  triggerHook(name) {
-    if (name in this) {
-      this[name]();
-    }
-  }
-  watch() {
-    return {};
-  }
-  events() {
-    return {};
-  }
-  registerEvents() {
-    this.removeEvents();
-    const eventDefinitions = this.events();
-    Object.keys(eventDefinitions).forEach((elementSelector) => {
-      const events = eventDefinitions[elementSelector];
-      const selectorWhiteList = { window, document, this: this.getRoot() };
-      const whiteListElement = selectorWhiteList[elementSelector];
-      const eventTargets = whiteListElement ? [whiteListElement] : this.getRoot().querySelectorAll(elementSelector);
-      eventTargets.forEach((eventTarget) => {
-        Object.keys(events).forEach((eventName) => {
-          var _a;
-          const notation = events[eventName];
-          if (typeof notation === "function") {
-            const callback = notation.bind(this);
-            eventTarget.addEventListener(eventName, callback);
-            this._registeredEvents.push({ eventTarget, eventName, callback });
-          } else if (typeof notation === "object" && typeof notation.listener === "function") {
-            const callback = notation.listener.bind(this);
-            eventTarget.addEventListener(eventName, callback, (_a = notation.options) != null ? _a : {});
-            this._registeredEvents.push({ eventTarget, eventName, callback });
-          }
-        });
-      });
-    });
-  }
-  removeEvents() {
-    this._registeredEvents.forEach(({ eventTarget, eventName, callback }) => {
-      if (eventTarget === window || eventTarget === document || this.getRoot().contains(eventTarget)) {
-        eventTarget.removeEventListener(eventName, callback);
-      }
-    });
-    this._registeredEvents = [];
-  }
-  registerRefs() {
-    const refsNodeList = this.getRoot().querySelectorAll("[ref]");
-    const refsArray = Array.from(refsNodeList);
-    const refsMap = {};
-    refsArray.forEach((refNode) => {
-      const refKey = refNode.getAttribute("ref");
-      const isListKey = refKey.endsWith("[]");
-      const cleanKey = isListKey ? refKey.slice(0, -2) : refKey;
-      const hasListRef = Array.isArray(refsMap[cleanKey]);
-      if (isListKey) {
-        if (!refsMap[cleanKey] || !hasListRef) {
-          refsMap[cleanKey] = [];
-        }
-        refsMap[cleanKey].push(refNode);
-      } else if (!hasListRef) {
-        refsMap[refKey] = refNode;
-      } else {
-        console.warn(
-          `Did not register singular ref ${refKey}, ${refNode} as a ref list is already registered under the same name.`
-        );
-      }
-    });
-    this.$refs = refsMap;
-  }
-  dispatch(name, data, bubble = false, cancelable = false, composed = false) {
-    const event = new CustomEvent(name, {
-      bubbles: bubble,
-      cancelable,
-      composed,
-      detail: data
-    });
-    this.dispatchEvent(event);
-  }
-  getRoot() {
-    return this;
-  }
-};
-
-// src/util/i18n.js
-function i18n(key, fallback) {
-  try {
-    const translations = window.elementjs.i18n();
-    if (translations[key] === void 0) {
-      throw "Translation Missing";
-    }
-    return translations[key];
-  } catch (err) {
-    if (fallback)
-      return fallback;
-    else
-      return key;
-  }
-}
-
-// src/StyledElement.js
-var _StyledElement = class extends BaseElement {
-  static updateGlobalStyles() {
-    _StyledElement.globalStyles = document.getElementById("globalStyles");
-    if (_StyledElement.globalStyles && _StyledElement["globalStyleSheet"]) {
-      _StyledElement["globalStyleSheet"].replaceSync(_StyledElement.globalStyles.textContent);
-    }
-  }
-  constructor(options) {
-    super({
-      deferUpdate: false,
-      shadowRender: false,
-      styles: [],
-      adoptGlobalStyles: true,
-      ...options
-    });
-    this._styles = [...this._options.styles, ...this.styles()];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
-      this.adoptStyleSheets();
-    }
-  }
-  styles() {
-    return [];
-  }
-  update(options) {
-    var _a, _b;
-    if (!supportsAdoptingStyleSheets() || this._options.shadowRender === false) {
-      const appendableStyles = [...this._styles];
-      if (this._options.shadowRender && this._options.adoptGlobalStyles) {
-        appendableStyles.unshift((_b = (_a = _StyledElement.globalStyles) == null ? void 0 : _a.textContent) != null ? _b : "");
-      }
-      this.appendStyleSheets(appendableStyles);
-    }
-    super.update(options);
-  }
-  adoptStyleSheets() {
-    if (!this.constructor["cssStyleSheets"]) {
-      this.constructor["cssStyleSheets"] = this._styles.map((style) => {
-        const sheet = new CSSStyleSheet();
-        if (sheet && sheet.cssRules.length === 0) {
-          sheet.replaceSync(style);
-        }
-        return sheet;
-      });
-    }
-    if (_StyledElement.globalStyles && !_StyledElement["globalStyleSheet"]) {
-      _StyledElement["globalStyleSheet"] = new CSSStyleSheet();
-      _StyledElement["globalStyleSheet"].replaceSync(_StyledElement.globalStyles.textContent);
-    }
-    this.getRoot().adoptedStyleSheets = [
-      ...this._options.shadowRender && this._options.adoptGlobalStyles && _StyledElement["globalStyleSheet"] ? [_StyledElement["globalStyleSheet"]] : [],
-      ...this.constructor["cssStyleSheets"]
-    ];
-  }
-  appendStyleSheets(styles) {
-    const parentDocument = getShadowParentOrBody(this.getRoot());
-    styles.forEach((style, index) => {
-      const identifier = this.tagName + index;
-      if (!parentDocument.querySelector(`#${identifier}`)) {
-        const styleElement = document.createElement("style");
-        styleElement.id = identifier;
-        styleElement.style.display = "none";
-        styleElement.textContent = style;
-        parentDocument.appendChild(styleElement);
-      }
-    });
-  }
-};
-var StyledElement = _StyledElement;
-__publicField(StyledElement, "globalStyles", null);
-StyledElement.updateGlobalStyles();
-
-// src/dom-parts/Part.js
-var Part = class {
-  constructor() {
-    __publicField(this, "processor");
-  }
-  update(value) {
-  }
-};
-
-// src/dom-parts/AttributePart.js
-var processBooleanAttribute = (node, name, oldValue) => {
-  node.removeAttribute(`?${name}`);
-  return (newValue) => {
-    const value = !!(newValue == null ? void 0 : newValue.valueOf()) && newValue !== "false";
-    if (oldValue !== value) {
-      node.toggleAttribute(name, oldValue = !!value);
-    }
-  };
-};
-var processPropertyAttribute = (node, name) => {
-  node.removeAttribute(`.${name}`);
-  return (value) => {
-    node[name] = value;
-  };
-};
-var processEventAttribute = (node, name) => {
-  node.removeAttribute(name);
-  let oldValue = void 0;
-  let type = name.startsWith("@") ? name.slice(1) : name.toLowerCase().slice(2);
-  return (newValue) => {
-    if (oldValue !== newValue) {
-      if (oldValue)
-        node.removeEventListener(type, oldValue);
-      if (oldValue = newValue)
-        node.addEventListener(type, oldValue);
-    }
-  };
-};
-var processAttribute = (node, name) => {
-  var _a;
-  let oldValue, orphan = true;
-  const attributeNode = (_a = globalThis.document) == null ? void 0 : _a.createAttributeNS(null, name);
-  return (newValue) => {
-    const value = newValue == null ? void 0 : newValue.valueOf();
-    if (oldValue !== value) {
-      if ((oldValue = value) == null) {
-        if (!orphan) {
-          node.removeAttributeNode(attributeNode);
-          orphan = true;
-        }
-      } else {
-        attributeNode.value = value;
-        if (orphan) {
-          node.setAttributeNodeNS(attributeNode);
-          orphan = false;
-        }
-      }
-    }
-  };
-};
-var processAttributePart = (node, name) => {
-  if (name.startsWith("?")) {
-    return processBooleanAttribute(node, name.slice(1), false);
-  }
-  if (name.startsWith(".")) {
-    return processPropertyAttribute(node, name.slice(1));
-  }
-  if (name.startsWith("@") || name.startsWith("on")) {
-    return processEventAttribute(node, name);
-  }
-  return processAttribute(node, name);
-};
-var AttributePart = class extends Part {
-  constructor(node, name, initialValue) {
-    super();
-    __publicField(this, "name");
-    __publicField(this, "interpolations", 1);
-    __publicField(this, "values", []);
-    __publicField(this, "currentValueIndex", 0);
-    __publicField(this, "initialValue");
-    this.name = name;
-    this.initialValue = initialValue;
-    this.processor = processAttributePart(node.nextElementSibling, this.name);
-  }
-  addNode(node) {
-    this.interpolations++;
-  }
-  update(value) {
-    if (this.initialValue === "") {
-      this.processor(value);
-      return;
-    }
-    this.values[this.currentValueIndex++] = value;
-    if (this.interpolations === this.currentValueIndex) {
-      this.currentValueIndex = 0;
-      let replaceIndex = 0;
-      const parsedValue = this.initialValue.replace(/\x03/g, () => this.values[replaceIndex++]);
-      this.processor(parsedValue);
-    }
-  }
-};
-
-// src/dom-parts/ChildNodePart.js
-var removeChildNodes = (node) => {
-  var _a;
-  const range = (_a = globalThis.document) == null ? void 0 : _a.createRange();
-  const firstChild = Array.isArray(node) ? node[0] : node instanceof TemplatePart ? node.childNodes[0] : node.firstChild;
-  const lastChild = Array.isArray(node) ? node[node.length - 1] : node instanceof TemplatePart ? node.childNodes[node.childNodes.length - 1] : node.lastChild;
-  range.setStartAfter(firstChild);
-  range.setEndAfter(lastChild);
-  range.deleteContents();
-  return firstChild;
-};
-var removeNodesBetweenComments = (commentNode) => {
-  while (commentNode.previousSibling) {
-    if (commentNode.previousSibling.nodeType === COMMENT_NODE && commentNode.previousSibling.data === commentNode.data.replace("/", "")) {
-      break;
-    }
-    commentNode.parentNode.removeChild(commentNode.previousSibling);
-  }
-};
-var diffChildNodes = function(parentNode, domChildNodes, templateChildNodes, anchorNode) {
-  let length = Math.max(templateChildNodes.length, domChildNodes.length);
-  for (let index = 0; index < length; index++) {
-    let domChildNode = domChildNodes[index];
-    let templateChildNode = templateChildNodes[index];
-    if (!domChildNode) {
-      if (templateChildNode instanceof TemplatePart) {
-        anchorNode.before(...templateChildNode.childNodes);
-      } else if (typeof templateChildNode === "object" && "ELEMENT_NODE" in templateChildNode) {
-        parentNode.insertBefore(templateChildNode, anchorNode);
-      } else {
-        parentNode.insertBefore(document.createTextNode(templateChildNode), anchorNode);
-      }
-      continue;
-    }
-    if (!templateChildNode) {
-      parentNode.removeChild(removeChildNodes(domChildNode));
-      continue;
-    }
-    if (domChildNode === templateChildNode) {
-      continue;
-    }
-    if (templateChildNode.nodeType !== domChildNode.nodeType) {
-      parentNode.replaceChild(templateChildNode, domChildNode);
-      continue;
-    }
-    if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName !== domChildNode.tagName) {
-      parentNode.replaceChild(templateChildNode, domChildNode);
-      continue;
-    }
-    if (templateChildNode.nodeType === ELEMENT_NODE && templateChildNode.tagName === "SVG") {
-      parentNode.replaceChild(templateChildNode, domChildNode);
-      continue;
-    }
-  }
-  return templateChildNodes;
-};
-var processNodePart = (comment, initialValue) => {
-  let nodes = [];
-  let oldValue = initialValue instanceof TemplatePart ? [...initialValue.childNodes] : initialValue;
-  let cachedTextNode = void 0;
-  const processNodeValue = (newValue) => {
-    var _a, _b;
-    switch (typeof newValue) {
-      case "string":
-      case "number":
-      case "boolean":
-        if (oldValue !== newValue) {
-          oldValue = newValue;
-          if (!cachedTextNode)
-            cachedTextNode = (_a = globalThis.document) == null ? void 0 : _a.createTextNode("");
-          cachedTextNode.data = newValue;
-          if (((_b = comment.previousSibling) == null ? void 0 : _b.data) === comment.data.replace("/", "")) {
-            comment.parentNode.insertBefore(cachedTextNode, comment);
-          } else {
-            comment.previousSibling.data = newValue;
-          }
-          nodes = [cachedTextNode];
-        }
-        break;
-      case "object":
-      case "undefined":
-        if (newValue === null || newValue === void 0) {
-          if (oldValue !== newValue) {
-            oldValue = newValue;
-            removeNodesBetweenComments(comment);
-            nodes = [];
-          }
-          break;
-        }
-        if (Array.isArray(newValue)) {
-          if (newValue.length === 0) {
-            removeNodesBetweenComments(comment);
-            nodes = [];
-          } else {
-            nodes = diffChildNodes(comment.parentNode, oldValue || [], newValue, comment);
-          }
-          oldValue = newValue;
-          break;
-        }
-        if (oldValue !== newValue) {
-          if ("ELEMENT_NODE" in newValue) {
-            oldValue = newValue;
-            nodes = diffChildNodes(comment.parentNode, nodes, [newValue], comment);
-          } else if (newValue instanceof TemplatePart) {
-            oldValue = newValue;
-            nodes = diffChildNodes(comment.parentNode, nodes, [...newValue.childNodes], comment);
-          } else {
-            console.warn("Could not process value", newValue);
-          }
-        }
-        break;
-      case "function":
-        processNodeValue(newValue(comment));
-        break;
-    }
-  };
-  return processNodeValue;
-};
-var ChildNodePart = class extends Part {
-  constructor(startNode, value) {
-    var _a;
-    if (startNode && (startNode == null ? void 0 : startNode.nodeType) !== COMMENT_NODE) {
-      throw new Error("ChildNodePart: startNode is not a comment node");
-    }
-    super();
-    __publicField(this, "startNode");
-    __publicField(this, "endNode");
-    __publicField(this, "parts", []);
-    __publicField(this, "templatePart");
-    __publicField(this, "childNodes", []);
-    let serverSideRendered = false;
-    if (startNode) {
-      const placeholder = startNode.data;
-      const childNodes = [startNode];
-      let childNode = startNode.nextSibling;
-      while (childNode && childNode.data !== `/${placeholder}`) {
-        childNodes.push(childNode);
-        childNode = childNode.nextSibling;
-      }
-      const endNode = childNode;
-      childNodes.push(endNode);
-      if (childNodes.length > 2) {
-        serverSideRendered = true;
-      }
-      this.childNodes = childNodes;
-      this.startNode = startNode;
-      this.endNode = endNode;
-    }
-    const initialValue = this.parseValue(value);
-    if (this.endNode) {
-      this.processor = processNodePart(this.endNode, serverSideRendered ? initialValue : void 0);
-    }
-    if (!serverSideRendered) {
-      if (value instanceof TemplateResult || Array.isArray(value)) {
-        this.updateParts(value);
-      }
-      this.childNodes = [...this.childNodes];
-      (_a = this.processor) == null ? void 0 : _a.call(this, initialValue);
-    }
-  }
-  update(value) {
-    var _a;
-    const parsedValue = this.parseValue(value);
-    if (value instanceof TemplateResult || Array.isArray(value)) {
-      this.updateParts(value);
-    }
-    (_a = this.processor) == null ? void 0 : _a.call(this, parsedValue);
-  }
-  updateParts(value) {
-    var _a;
-    if (value instanceof TemplateResult) {
-      this.templatePart.update(value);
-    }
-    if (Array.isArray(value)) {
-      for (let index = 0; index < value.length; index++) {
-        (_a = this.parts[index]) == null ? void 0 : _a.update(value[index]);
-      }
-    }
-  }
-  parseValue(value) {
-    var _a;
-    if (value instanceof TemplateResult) {
-      if (!this.templatePart) {
-        const templatePartCommentNodes = (_a = this.childNodes) == null ? void 0 : _a.filter(
-          (node) => node && node.nodeType === COMMENT_NODE && node.data === "template-part"
-        );
-        const startNode = templatePartCommentNodes[0];
-        this.templatePart = new TemplatePart(startNode, value);
-      }
-      return this.templatePart;
-    }
-    if (Array.isArray(value)) {
-      return this.parseArray(value);
-    }
-    return value;
-  }
-  parseArray(values) {
-    var _a, _b;
-    const parsedValues = [];
-    for (let index = 0; index < values.length; index++) {
-      let value = values[index];
-      if (value instanceof TemplateResult) {
-        let templatePart = this.parts[index];
-        if (!templatePart) {
-          const templatePartCommentNodes = (_a = this.childNodes) == null ? void 0 : _a.filter(
-            (node) => node && node.nodeType === COMMENT_NODE && node.data === "template-part"
-          );
-          const startNode = templatePartCommentNodes[index];
-          templatePart = new TemplatePart(startNode, value);
-          this.parts[index] = templatePart;
-        }
-        parsedValues[index] = templatePart;
-      } else if (Array.isArray(value)) {
-        let childNodePart = this.parts[index];
-        if (!childNodePart) {
-          const templatePartCommentNodes = (_b = this.childNodes) == null ? void 0 : _b.filter(
-            (node) => node && node.nodeType === COMMENT_NODE && node.data === "template-part"
-          );
-          const startNode = templatePartCommentNodes[index];
-          childNodePart = new ChildNodePart(startNode, value);
-          this.parts[index] = childNodePart;
-        }
-        parsedValues[index] = childNodePart;
-      } else {
-        parsedValues[index] = typeof value === "function" ? value() : value;
-      }
-    }
-    return parsedValues;
-  }
-};
-
-// src/dom-parts/NodePart.js
-var NodePart = class extends Part {
-  constructor(node, initialValue) {
-    if (!isObjectLike(initialValue) && !initialValue.directiveClass) {
-      throw new Error(
-        "NodePart: value is not a wrapped directive function. You must wrap you custom directive class with the defineDirective function."
-      );
-    }
-    super();
-    __publicField(this, "node");
-    __publicField(this, "directive");
-    this.node = node.nextElementSibling;
-    const { directiveClass, values } = initialValue;
-    this.directive = new directiveClass(node.nextElementSibling);
-  }
-  update(value) {
-    const { directiveClass, values } = value;
-    this.directive.update(...values);
-  }
-};
-
-// src/dom-parts/TemplatePart.js
-var partsCache = /* @__PURE__ */ new WeakMap();
-var fragmentsCache = /* @__PURE__ */ new WeakMap();
-var TemplatePart = class extends Part {
-  constructor(startNode, value) {
-    if (startNode && (startNode == null ? void 0 : startNode.nodeType) !== COMMENT_NODE) {
-      throw new Error("TemplatePart: startNode is not a comment node");
-    }
-    super();
-    __publicField(this, "parts", []);
-    __publicField(this, "strings");
-    __publicField(this, "childNodes", []);
-    let serverSideRendered = false;
-    if (startNode) {
-      const placeholder = startNode.data;
-      const childNodes = [startNode];
-      let childNode = startNode.nextSibling;
-      while (childNode && childNode.data !== `/${placeholder}`) {
-        childNodes.push(childNode);
-        childNode = childNode.nextSibling;
-      }
-      const endNode = childNode;
-      childNodes.push(endNode);
-      if (childNodes.length > 2) {
-        serverSideRendered = true;
-        this.childNodes = childNodes;
-      }
-    }
-    this.parseValue(value);
-    if (!serverSideRendered) {
-      this.updateParts(value.values);
-      this.childNodes = [...this.childNodes];
-    }
-  }
-  update(value) {
-    this.parseValue(value);
-    this.updateParts(value.values);
-  }
-  updateParts(values) {
-    var _a;
-    for (let index = 0; index < values.length; index++) {
-      (_a = this.parts[index]) == null ? void 0 : _a.update(values[index]);
-    }
-  }
-  parseValue(templateResult) {
-    var _a;
-    if (this.strings !== templateResult.strings) {
-      if (this.childNodes.length === 0) {
-        let fragment = fragmentsCache.get(templateResult.strings);
-        if (!fragment) {
-          fragment = this.parseFragment(templateResult);
-          fragmentsCache.set(templateResult.strings, fragment);
-        }
-        const importedFragment = (_a = globalThis.document) == null ? void 0 : _a.importNode(fragment, true);
-        this.childNodes = importedFragment.childNodes;
-      }
-      let parts = partsCache.get(templateResult.strings);
-      if (!parts) {
-        parts = templateResult.parseParts(this.childNodes);
-        partsCache.set(templateResult.strings, parts);
-      }
-      let previousAttributePart = void 0;
-      this.parts = parts.map((part, index) => {
-        const node = part.path.reduceRight(({ childNodes }, i) => childNodes[i], this);
-        if (part.type === "node") {
-          return new ChildNodePart(node, templateResult.values[index]);
-        }
-        if (part.type === "attribute") {
-          if (previousAttributePart && previousAttributePart.name === part.name) {
-            previousAttributePart.addNode(node);
-            return previousAttributePart;
-          }
-          return previousAttributePart = new AttributePart(node, part.name, part.initialValue);
-        }
-        if (part.type === "directive") {
-          return new NodePart(node, templateResult.values[index]);
-        }
-        throw `cannot map part: ${part}`;
-      });
-      this.strings = templateResult.strings;
-    }
-  }
-  parseFragment(templateResult) {
-    const templateString = templateResult.templateString;
-    return convertStringToTemplate(templateString);
-  }
-};
-
-// src/dom-parts/TemplateResult.js
-var voidElements = /^(?:area|base|br|col|embed|hr|img|input|link|meta|source|track|wbr)$/i;
-var elements = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/?)>/g;
-var attributes = /([^\s]*)=((?:")[^"]*(?:")|(?:')[^']*(?:')|[^\s\/>]*)|([^\s\/>]*)/g;
-var partPositions = /[\x01\x02]/g;
-var interpolation = new RegExp(`(<!--dom-part-(\\d+)--><!--/dom-part-(\\d+)-->|(\\S\\w+)="(")?|)`, "g");
-var createTemplateString = (templateStrings, attributePlaceholders = "") => {
-  let partIndex = 0;
-  let template = templateStrings.join("
").trim();
-  template = template.replace(elements, (_, name, attributesString, trailingSlash) => {
-    let elementTagWithAttributes = name + attributesString.replaceAll("
", attributePlaceholders).trimEnd();
-    if (trailingSlash.length)
-      elementTagWithAttributes += voidElements.test(name) ? " /" : "></" + name;
-    const attributeParts = attributesString.replace(attributes, (attribute2, name2, valueWithQuotes, directive) => {
-      if (directive) {
-        return `<!--$-->`;
-      }
-      const value = (valueWithQuotes == null ? void 0 : valueWithQuotes.startsWith('"')) || (valueWithQuotes == null ? void 0 : valueWithQuotes.startsWith("'")) ? valueWithQuotes.slice(1, -1) : valueWithQuotes;
-      const partsCount = (attribute2.match(/\x01/g) || []).length;
-      const parts = [];
-      for (let index = 0; index < partsCount; index++) {
-        parts.push(`<!--:${name2}=${value.replaceAll("
", "")}-->`);
-      }
-      return parts.join("");
-    });
-    return `
-				${attributesString.includes("
") ? attributeParts : ""}
-				<${elementTagWithAttributes}>
-			`;
-  });
-  template = template.replace(partPositions, (partPosition) => {
-    if (partPosition === "
") {
-      return `<!--dom-part-${partIndex}--><!--/dom-part-${partIndex++}-->`;
-    }
-    if (partPosition === "") {
-      return `dom-part-${partIndex++}`;
-    }
-  });
-  return `
-		<!--template-part-->
-		${template}
-		<!--/template-part-->
-	`;
-};
-var attribute = (name, value, isSingleValue = true) => {
-  return ` ${name}="${encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value)}${isSingleValue ? '"' : ""}`;
-};
-var getValue = (value) => {
-  switch (typeof value) {
-    case "string":
-      return encodeAttribute(value);
-    case "boolean":
-    case "number":
-      return String(value);
-    case "object":
-      switch (true) {
-        case Array.isArray(value):
-          return value.map(getValue).join("");
-        case value instanceof TemplateResult:
-          return value.toString();
-      }
-      break;
-    case "function":
-      return getValue(value());
-  }
-  return value == null ? "" : encodeAttribute(String(value));
-};
-var parsedUpdates = /* @__PURE__ */ new WeakMap();
-var templateParts = /* @__PURE__ */ new WeakMap();
-var TemplateResult = class {
-  constructor(strings, ...values) {
-    this.strings = strings;
-    this.values = values;
-  }
-  renderInto(domNode) {
-    let serverSideRendered = false;
-    let templatePart = templateParts.get(domNode);
-    if (!templatePart) {
-      const startNode = Array.from(domNode.childNodes).filter((node) => node.nodeType === COMMENT_NODE).find((node) => node.data === "template-part");
-      serverSideRendered = startNode !== void 0;
-      templatePart = new TemplatePart(startNode, this);
-      templateParts.set(domNode, templatePart);
-      if (!serverSideRendered) {
-        domNode.replaceChildren(...templatePart.childNodes);
-      }
-    } else {
-      templatePart.update(this);
-    }
-  }
-  parse(strings) {
-    const html2 = createTemplateString(strings, "");
-    const parts = [];
-    let i = 0;
-    let match = null;
-    while (match = interpolation.exec(html2)) {
-      const pre = html2.slice(i, match.index);
-      i = match.index + match[0].length;
-      if (match[2]) {
-        const index = match[2];
-        parts.push((value) => `${pre}<!--dom-part-${index}-->${getValue(value)}<!--/dom-part-${index}-->`);
-      } else if (match[4]) {
-        const isSingleValue = match[5] !== void 0;
-        let name = match[4];
-        switch (true) {
-          case name[0] === "?":
-            const booleanName = name.slice(1).toLowerCase();
-            parts.push((value) => {
-              if (!value)
-                return "";
-              return `${pre} ${booleanName}=""`;
-            });
-            break;
-          case name[0] === ".":
-            const lower = name.slice(1).toLowerCase();
-            parts.push((value) => {
-              let result = pre;
-              if (value === null || value === void 0 || value === "") {
-                result += attribute(lower, "");
-              } else {
-                result += attribute(lower, value, isSingleValue);
-              }
-              return result;
-            });
-            break;
-          case name[0] === "@":
-            name = "on" + name.slice(1);
-          case (name[0] === "o" && name[1] === "n"):
-            parts.push((value) => {
-              return pre;
-            });
-            break;
-          default:
-            parts.push((value) => {
-              let result = pre;
-              if (value != null) {
-                result += attribute(name, value, isSingleValue);
-              }
-              return result;
-            });
-            break;
-        }
-      } else {
-        parts.push((value) => {
-          let result = pre;
-          if (isObjectLike(value) && value.directiveClass) {
-          } else if (value != null) {
-            result += encodeAttribute(isObjectLike(value) ? JSON.stringify(value) : value);
-          }
-          return result;
-        });
-      }
-    }
-    if (parts.length !== strings.length - 1) {
-      throw {
-        name: "ParseTemplateError",
-        message: "Could not parse parts from template correctly. Parts length has not the expected length.",
-        strings,
-        templateString: html2,
-        parts
-      };
-    }
-    if (parts.length) {
-      const last = parts[parts.length - 1];
-      const chunk = html2.slice(i);
-      parts[parts.length - 1] = (value) => last(value) + chunk;
-    } else {
-      parts.push(() => html2);
-    }
-    return parts;
-  }
-  parseParts(childNodes) {
-    var _a, _b;
-    const range = (_a = globalThis.document) == null ? void 0 : _a.createRange();
-    range.setStartBefore(childNodes[0]);
-    range.setEndAfter(childNodes[childNodes.length - 1]);
-    const template = range.cloneContents();
-    const treeWalker = (_b = globalThis.document) == null ? void 0 : _b.createTreeWalker(template, 128);
-    let node = treeWalker.currentNode;
-    const getParts = () => {
-      const parts2 = [];
-      let currentPart = void 0;
-      while (node = treeWalker.nextNode()) {
-        if (/^template-part$/.test(node.data) && currentPart) {
-          currentPart.parts = getParts();
-        }
-        if (/^\/template-part$/.test(node.data)) {
-          return parts2;
-        }
-        if (/^dom-part-\d+$/.test(node.data)) {
-          parts2.push(currentPart = { type: "node", path: getNodePath(node), parts: [] });
-        }
-        if (/^dom-part-\d+:/.test(node.data)) {
-          const [_, attribute2] = node.data.split(":");
-          const [name, initialValue] = attribute2.split("=");
-          currentPart = void 0;
-          parts2.push({ type: "attribute", path: getNodePath(node), name, initialValue });
-        }
-        if (/^dom-part-\d+\$/.test(node.data)) {
-          currentPart = void 0;
-          parts2.push({ type: "directive", path: getNodePath(node) });
-        }
-      }
-      return parts2;
-    };
-    const parts = getParts();
-    if (parts.length !== this.strings.length - 1) {
-      throw {
-        name: "ParseTemplateError",
-        message: "Could not parse parts from template correctly. Parts length has not the expected length. -> " + JSON.stringify({
-          strings: this.strings,
-          templateString: this.templateString,
-          childNodes,
-          template,
-          parts
-        })
-      };
-    }
-    return parts;
-  }
-  get templateString() {
-    return createTemplateString(this.strings);
-  }
-  toString() {
-    let updates = parsedUpdates.get(this.strings);
-    if (!updates) {
-      updates = this.parse(this.strings);
-      parsedUpdates.set(this.strings, updates);
-    }
-    return this.values.length ? this.values.map((value, index) => updates[index](value)).join("") : updates[0]();
-  }
-};
-
-// src/dom-parts/html.js
-var html = function(strings, ...values) {
-  return new TemplateResult(strings, ...values);
-};
-
-// src/dom-parts/render.js
-var render = (template, domNode) => {
-  template.renderInto(domNode);
-};
-
-// src/TemplateElement.js
-var TemplateElement = class extends StyledElement {
-  constructor(options) {
-    super({
-      deferUpdate: false,
-      shadowRender: false,
-      styles: [],
-      adoptGlobalStyles: true,
-      mutationObserverOptions: {
-        childList: false
-      },
-      ...options
-    });
-    this._template = this._options.template;
-    if (this._options.shadowRender)
-      this.attachShadow({ mode: "open" });
-  }
-  template() {
-    return html``;
-  }
-  update(options) {
-    this.renderTemplate();
-    super.update(options);
-  }
-  renderTemplate() {
-    const template = this._template || this.template();
-    if (typeof template === "string") {
-      this.getRoot().innerHTML = `${template}`;
-    } else {
-      render(template, this.getRoot());
-    }
-  }
-  getRoot() {
-    return this.shadowRoot !== null ? this.shadowRoot : this;
-  }
-};
-export {
-  BaseElement,
-  Store,
-  StyledElement,
-  TemplateElement,
-  defineElement,
-  html,
-  i18n,
-  toString
-};
-//# sourceMappingURL=index.js.map