@dooboostore/simple-web-component 1.0.0 → 1.0.1

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -52,17 +52,36 @@ var ReflectUtils;
 
 // src/decorators/attributeChanged.ts
 var ATTRIBUTE_CHANGED_METADATA_KEY = Symbol("simple-web-component:attribute-changed");
-var attributeChanged = (attributeName) => {
-  return (target, propertyKey, descriptor) => {
+var ATTRIBUTE_CHANGED_WILDCARD = "*";
+function attributeChanged(arg1, arg2, arg3) {
+  const decorator = (attributeName, target, propertyKey) => {
     const constructor = target.constructor;
     let meta = ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
     if (!meta) {
       meta = /* @__PURE__ */ new Map();
       ReflectUtils.defineMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
     }
-    meta.set(attributeName, propertyKey);
+    let methods = meta.get(attributeName);
+    if (!methods) {
+      methods = [];
+      meta.set(attributeName, methods);
+    }
+    if (!methods.includes(propertyKey)) {
+      methods.push(propertyKey);
+    }
   };
-};
+  if (typeof arg1 === "string") {
+    return (target, propertyKey) => {
+      decorator(arg1, target, propertyKey);
+    };
+  } else if (Array.isArray(arg1)) {
+    return (target, propertyKey) => {
+      arg1.forEach((name) => decorator(name, target, propertyKey));
+    };
+  } else if (arg1 && arg2) {
+    decorator(ATTRIBUTE_CHANGED_WILDCARD, arg1, arg2);
+  }
+}
 var getAttributeChangedMap = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
@@ -88,7 +107,83 @@ var getStyleMethod = (target) => {
   return ReflectUtils.getMetadata(STYLE_METHOD_KEY, constructor);
 };
 
-// src/decorators/element.ts
+// src/decorators/query.ts
+var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
+var query = (selector, options = { useShadow: true }) => {
+  return (target, propertyKey, descriptor) => {
+    const isMethod = !!descriptor;
+    const constructor = target.constructor;
+    let queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
+    if (!queries) {
+      queries = [];
+      ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
+    }
+    queries.push({ selector, options, propertyKey, isMethod });
+    if (!isMethod) {
+      Object.defineProperty(target, propertyKey, {
+        get() {
+          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          return root.querySelector(selector);
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  };
+};
+var getQueryMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
+};
+
+// src/decorators/queryAll.ts
+var QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
+var queryAll = (selector, options = { useShadow: true }) => {
+  return (target, propertyKey, descriptor) => {
+    const isMethod = !!descriptor;
+    const constructor = target.constructor;
+    let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
+    if (!queries) {
+      queries = [];
+      ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
+    }
+    queries.push({ selector, options, propertyKey, isMethod });
+    if (!isMethod) {
+      Object.defineProperty(target, propertyKey, {
+        get() {
+          const root = options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          return root.querySelectorAll(selector);
+        },
+        enumerable: true,
+        configurable: true
+      });
+    }
+  };
+};
+var getQueryAllMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
+};
+
+// src/decorators/addEventListener.ts
+var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
+var addEventListener = (options) => {
+  return (target, propertyKey, descriptor) => {
+    const constructor = target.constructor;
+    let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+    if (!listeners) {
+      listeners = [];
+      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
+    }
+    listeners.push({ options, propertyKey });
+  };
+};
+var getAddEventListenerMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+};
+
+// src/decorators/elementDefind.ts
 var ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
 var BUILT_IN_TAG_MAP = /* @__PURE__ */ new Map();
 var registerTag = (className, tagName) => {
@@ -154,7 +249,7 @@ var registerTag = (className, tagName) => {
   ["HTMLVideoElement", "video"],
   ["HTMLHeadingElement", "h1"]
 ].forEach(([cls, tag]) => registerTag(cls, tag));
-var element = (inConfig) => (constructor) => {
+var elementDefind = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { tagName: inConfig } : inConfig;
   let extendsTagName = config.extends;
   if (!extendsTagName) {
@@ -167,7 +262,7 @@ var element = (inConfig) => (constructor) => {
     }
   }
   const attributeChangedMap = getAttributeChangedMap(constructor);
-  const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()) : [];
+  const observedFromDecorators = attributeChangedMap ? Array.from(attributeChangedMap.keys()).filter((it) => it !== ATTRIBUTE_CHANGED_WILDCARD) : [];
   const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...observedFromDecorators])];
   const NewClass = class extends constructor {
     static get observedAttributes() {
@@ -175,11 +270,68 @@ var element = (inConfig) => (constructor) => {
     }
     constructor(...args) {
       super(...args);
+      this._observer = null;
+      this._boundElements = /* @__PURE__ */ new WeakMap();
       if (config.useShadow === true && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
+    _syncDecorators() {
+      const queryMetadata = getQueryMetadata(this);
+      if (queryMetadata) {
+        queryMetadata.filter((it) => it.isMethod).forEach((it) => {
+          const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          const element = root.querySelector(it.selector);
+          if (element) {
+            let bound = this._boundElements.get(element);
+            if (!bound) {
+              bound = /* @__PURE__ */ new Set();
+              this._boundElements.set(element, bound);
+            }
+            if (!bound.has(it.propertyKey)) {
+              this[it.propertyKey](element);
+              bound.add(it.propertyKey);
+            }
+          }
+        });
+      }
+      const queryAllMetadata = getQueryAllMetadata(this);
+      if (queryAllMetadata) {
+        queryAllMetadata.filter((it) => it.isMethod).forEach((it) => {
+          const root = it.options.useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          const elements = root.querySelectorAll(it.selector);
+          this[it.propertyKey](elements);
+        });
+      }
+      const eventListeners = getAddEventListenerMetadata(this);
+      if (eventListeners) {
+        eventListeners.forEach((it) => {
+          const { selector, eventName, useShadow, ...options } = it.options;
+          const root = useShadow !== false && this.shadowRoot ? this.shadowRoot : this;
+          const targetElements = selector ? root.querySelectorAll(selector) : [this];
+          targetElements.forEach((targetElement) => {
+            if (targetElement) {
+              let bound = this._boundElements.get(targetElement);
+              if (!bound) {
+                bound = /* @__PURE__ */ new Set();
+                this._boundElements.set(targetElement, bound);
+              }
+              const eventKey = `event:${String(it.propertyKey)}:${eventName}`;
+              if (!bound.has(eventKey)) {
+                targetElement.addEventListener(eventName, (event) => {
+                  this[it.propertyKey](event);
+                }, options);
+                bound.add(eventKey);
+              }
+            }
+          });
+        });
+      }
+    }
     disconnectedCallback() {
+      if (this._observer) {
+        this._observer.disconnect();
+      }
       if (super.disconnectedCallback) {
         super.disconnectedCallback();
       }
@@ -195,9 +347,6 @@ var element = (inConfig) => (constructor) => {
       }
     }
     async connectedCallback() {
-      if (super.connectedCallback) {
-        await super.connectedCallback();
-      }
       const templateMethod = getTemplateMethod(this);
       const styleMethod = getStyleMethod(this);
       const template2 = templateMethod ? await this[templateMethod]() : void 0;
@@ -219,15 +368,36 @@ var element = (inConfig) => (constructor) => {
       } else {
         this.innerHTML = content;
       }
+      this._syncDecorators();
+      this._observer = new MutationObserver(() => {
+        this._syncDecorators();
+      });
+      const target = this.shadowRoot || this;
+      this._observer.observe(target, { childList: true, subtree: true });
+      if (super.connectedCallback) {
+        await super.connectedCallback();
+      }
     }
     // 4. Handle attribute changes and route to decorated methods
     attributeChangedCallback(name, oldValue, newValue) {
       if (super.attributeChangedCallback) {
         super.attributeChangedCallback(name, oldValue, newValue);
       }
-      const methodKey = attributeChangedMap?.get(name);
-      if (methodKey && typeof this[methodKey] === "function") {
-        this[methodKey](newValue, oldValue);
+      const methodKeys = attributeChangedMap?.get(name);
+      if (methodKeys && Array.isArray(methodKeys)) {
+        methodKeys.forEach((key) => {
+          if (typeof this[key] === "function") {
+            this[key](newValue, oldValue, name);
+          }
+        });
+      }
+      const wildcardMethodKeys = attributeChangedMap?.get(ATTRIBUTE_CHANGED_WILDCARD);
+      if (wildcardMethodKeys && Array.isArray(wildcardMethodKeys)) {
+        wildcardMethodKeys.forEach((key) => {
+          if (typeof this[key] === "function") {
+            this[key](newValue, oldValue, name);
+          }
+        });
       }
     }
   };
@@ -243,17 +413,482 @@ var getElementConfig = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
+
+// src/elements/SwcForOf.ts
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcForOf = class SwcForOf2 extends HTMLElement {
+  constructor() {
+    super();
+    this._value = [];
+    this._masterTplNodes = [];
+  }
+  set value(val) {
+    if (!Array.isArray(val))
+      val = [];
+    this._value = this.createProxy(val);
+    this.renderAll();
+  }
+  get value() {
+    return this._value;
+  }
+  createProxy(arr) {
+    return new Proxy(arr, {
+      set: (target, prop, val) => {
+        const isIndex = !isNaN(Number(prop));
+        target[prop] = val;
+        if (isIndex) {
+          this.updateSingleRow(Number(prop), val);
+        } else if (prop === "length" && val < target.length) {
+          this.renderAll();
+        }
+        return true;
+      },
+      deleteProperty: (target, prop) => {
+        const res = delete target[prop];
+        this.renderAll();
+        return res;
+      }
+    });
+  }
+  styles() {
+    return `
+      :host { display: contents; }
+    `;
+  }
+  renderTemplate() {
+    return `
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
+  }
+  connectedCallback() {
+    const tplSlot = this.shadowRoot?.getElementById("tpl-slot");
+    if (tplSlot) {
+      this._masterTplNodes = tplSlot.assignedNodes().map((n) => n.cloneNode(true));
+    }
+    this.renderAll();
+  }
+  updateSingleRow(index, newValue) {
+    const targets = this.querySelectorAll(`[slot="row-${index}"]`);
+    if (targets.length > 0) {
+      targets.forEach((target) => this.applyData(target, newValue, index));
+    } else {
+      this.renderRow(newValue, index);
+    }
+  }
+  applyData(node, data, index) {
+    const getValueByPath = (obj, path) => {
+      if (path === "value")
+        return obj;
+      if (path.startsWith("value.")) {
+        return path.split(".").slice(1).reduce((acc, part) => acc && acc[part], obj);
+      }
+      return void 0;
+    };
+    const walk = (n) => {
+      if (n.nodeType === Node.TEXT_NODE) {
+        if (!n._original)
+          n._original = n.textContent;
+        let text = n._original;
+        text = text.replace(/{{(.*?)}}/g, (match, path) => {
+          path = path.trim();
+          if (path === "index")
+            return index.toString();
+          const val = getValueByPath(data, path);
+          return val !== void 0 ? val : match;
+        });
+        if (n.textContent !== text)
+          n.textContent = text;
+      } else if (n.nodeType === Node.ELEMENT_NODE) {
+        const el = n;
+        Array.from(el.attributes).forEach((a) => {
+          if (!a._original)
+            a._original = a.value;
+          let val = a._original;
+          val = val.replace(/{{(.*?)}}/g, (match, path) => {
+            path = path.trim();
+            if (path === "index")
+              return index.toString();
+            const v = getValueByPath(data, path);
+            return v !== void 0 ? v : match;
+          });
+          if (a.value !== val)
+            a.value = val;
+        });
+        el.childNodes.forEach(walk);
+      }
+    };
+    walk(node);
+  }
+  renderRow(item, index) {
+    if (!this.shadowRoot || this._masterTplNodes.length === 0)
+      return;
+    const slotName = `row-${index}`;
+    if (!this.shadowRoot.querySelector(`slot[name="${slotName}"]`)) {
+      const slot = document.createElement("slot");
+      slot.name = slotName;
+      this.shadowRoot.appendChild(slot);
+    }
+    this._masterTplNodes.forEach((tplNode) => {
+      const clone = tplNode.cloneNode(true);
+      if (clone.nodeType === Node.ELEMENT_NODE) {
+        clone.setAttribute("slot", slotName);
+        clone.style.display = "";
+      } else if (clone.nodeType === Node.TEXT_NODE) {
+        if (clone.textContent?.trim().length === 0)
+          return;
+        const span = document.createElement("span");
+        span.setAttribute("slot", slotName);
+        span.appendChild(clone);
+        this.appendChild(span);
+        this.applyData(span, item, index);
+        return;
+      }
+      this.appendChild(clone);
+      this.applyData(clone, item, index);
+    });
+  }
+  renderAll() {
+    if (this._masterTplNodes.length === 0 || !this.shadowRoot)
+      return;
+    Array.from(this.children).forEach((c) => {
+      const slot = c.getAttribute("slot");
+      if (slot && slot.startsWith("row-")) {
+        c.remove();
+      }
+    });
+    Array.from(this.shadowRoot.querySelectorAll("slot")).forEach((s) => {
+      if (s.id !== "tpl-slot")
+        s.remove();
+    });
+    this._value.forEach((item, index) => this.renderRow(item, index));
+  }
+};
+__decorate([
+  style,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcForOf.prototype, "styles", null);
+__decorate([
+  template,
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", []),
+  __metadata("design:returntype", void 0)
+], SwcForOf.prototype, "renderTemplate", null);
+SwcForOf = __decorate([
+  elementDefind({ tagName: "swc-for-of", useShadow: true }),
+  __metadata("design:paramtypes", [])
+], SwcForOf);
+
+// src/elements/SwcIf.ts
+var __decorate2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata2 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcIf = class SwcIf2 extends HTMLElement {
+  constructor() {
+    super();
+    this._value = false;
+    this._masterTplNodes = [];
+    this._observer = null;
+  }
+  set value(val) {
+    this._value = val;
+    this.render();
+  }
+  get value() {
+    return this._value;
+  }
+  styles() {
+    return `
+      :host { display: contents; }
+    `;
+  }
+  renderTemplate() {
+    return `
+      <slot id="tpl-slot" style="display:none;"></slot>
+    `;
+  }
+  connectedCallback() {
+    const tplSlot = this.shadowRoot?.getElementById("tpl-slot");
+    if (tplSlot) {
+      this._masterTplNodes = tplSlot.assignedNodes().map((n) => n.cloneNode(true));
+    }
+    this._observer = new MutationObserver(() => this.render());
+    this._observer.observe(this, { attributes: true });
+    this.render();
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect();
+  }
+  render() {
+    if (!this.shadowRoot)
+      return;
+    const attrValue = this.getAttribute("value");
+    if (attrValue !== null && attrValue.includes("{{"))
+      return;
+    let displayValue = attrValue !== null ? attrValue : this._value;
+    let isTruthy = !!displayValue;
+    if (typeof displayValue === "string") {
+      if (displayValue === "false" || displayValue === "0" || displayValue === "")
+        isTruthy = false;
+      else {
+        try {
+          isTruthy = !!new Function(`return ${displayValue}`)();
+        } catch (e) {
+          isTruthy = true;
+        }
+      }
+    }
+    Array.from(this.children).forEach((c) => {
+      if (c.getAttribute("slot") === "if-content") {
+        c.remove();
+      }
+    });
+    const existingSlot = this.shadowRoot.querySelector('slot[name="if-content"]');
+    if (existingSlot)
+      existingSlot.remove();
+    if (isTruthy && this._masterTplNodes.length > 0) {
+      const contentSlot = document.createElement("slot");
+      contentSlot.name = "if-content";
+      this.shadowRoot.appendChild(contentSlot);
+      this._masterTplNodes.forEach((tplNode) => {
+        const clone = tplNode.cloneNode(true);
+        if (clone.nodeType === Node.ELEMENT_NODE) {
+          clone.setAttribute("slot", "if-content");
+          clone.style.display = "";
+        } else if (clone.nodeType === Node.TEXT_NODE) {
+          if (clone.textContent?.trim().length === 0)
+            return;
+          const span = document.createElement("span");
+          span.setAttribute("slot", "if-content");
+          span.appendChild(clone);
+          this.appendChild(span);
+          return;
+        }
+        this.appendChild(clone);
+      });
+    }
+  }
+};
+__decorate2([
+  style,
+  __metadata2("design:type", Function),
+  __metadata2("design:paramtypes", []),
+  __metadata2("design:returntype", void 0)
+], SwcIf.prototype, "styles", null);
+__decorate2([
+  template,
+  __metadata2("design:type", Function),
+  __metadata2("design:paramtypes", []),
+  __metadata2("design:returntype", void 0)
+], SwcIf.prototype, "renderTemplate", null);
+SwcIf = __decorate2([
+  elementDefind({ tagName: "swc-if", useShadow: true }),
+  __metadata2("design:paramtypes", [])
+], SwcIf);
+
+// src/elements/SwcChoose.ts
+var __decorate3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata3 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcChoose = class SwcChoose2 extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this._observer = null;
+    this._value = void 0;
+  }
+  set value(val) {
+    this._value = val;
+    this.evaluate();
+  }
+  get value() {
+    return this._value;
+  }
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  render() {
+    return `<slot id="choose-slot"></slot>`;
+  }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this.evaluate());
+    this._observer.observe(this, { attributes: true, subtree: true, childList: true });
+    this.evaluate();
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect();
+  }
+  evaluate() {
+    const whens = Array.from(this.querySelectorAll("swc-when"));
+    const other = this.querySelector("swc-other");
+    let matched = false;
+    const chooseValue = this.getAttribute("value") ?? this._value;
+    whens.forEach((when) => {
+      if (matched) {
+        when.style.display = "none";
+        return;
+      }
+      const testAttr = when.getAttribute("test");
+      if (testAttr === null)
+        return;
+      if (testAttr.includes("{{"))
+        return;
+      let isConditionMet = false;
+      if (chooseValue !== void 0 && chooseValue !== null) {
+        isConditionMet = String(chooseValue) === String(testAttr);
+      } else {
+        try {
+          if (testAttr === "true")
+            isConditionMet = true;
+          else if (testAttr === "false")
+            isConditionMet = false;
+          else
+            isConditionMet = !!new Function(`return ${testAttr}`)();
+        } catch (e) {
+          isConditionMet = false;
+        }
+      }
+      if (isConditionMet) {
+        when.style.display = "";
+        matched = true;
+      } else {
+        when.style.display = "none";
+      }
+    });
+    if (other) {
+      other.style.display = matched ? "none" : "";
+    }
+  }
+};
+__decorate3([
+  style,
+  __metadata3("design:type", Function),
+  __metadata3("design:paramtypes", []),
+  __metadata3("design:returntype", void 0)
+], SwcChoose.prototype, "styles", null);
+__decorate3([
+  template,
+  __metadata3("design:type", Function),
+  __metadata3("design:paramtypes", []),
+  __metadata3("design:returntype", void 0)
+], SwcChoose.prototype, "render", null);
+SwcChoose = __decorate3([
+  elementDefind({ tagName: "swc-choose", useShadow: true })
+], SwcChoose);
+
+// src/elements/SwcWhen.ts
+var __decorate4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata4 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcWhen = class SwcWhen2 extends HTMLElement {
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  render() {
+    return `<slot></slot>`;
+  }
+};
+__decorate4([
+  style,
+  __metadata4("design:type", Function),
+  __metadata4("design:paramtypes", []),
+  __metadata4("design:returntype", void 0)
+], SwcWhen.prototype, "styles", null);
+__decorate4([
+  template,
+  __metadata4("design:type", Function),
+  __metadata4("design:paramtypes", []),
+  __metadata4("design:returntype", void 0)
+], SwcWhen.prototype, "render", null);
+SwcWhen = __decorate4([
+  elementDefind({ tagName: "swc-when", useShadow: true })
+], SwcWhen);
+
+// src/elements/SwcOther.ts
+var __decorate5 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata5 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcOther = class SwcOther2 extends HTMLElement {
+  styles() {
+    return `:host { display: contents; }`;
+  }
+  render() {
+    return `<slot></slot>`;
+  }
+};
+__decorate5([
+  style,
+  __metadata5("design:type", Function),
+  __metadata5("design:paramtypes", []),
+  __metadata5("design:returntype", void 0)
+], SwcOther.prototype, "styles", null);
+__decorate5([
+  template,
+  __metadata5("design:type", Function),
+  __metadata5("design:paramtypes", []),
+  __metadata5("design:returntype", void 0)
+], SwcOther.prototype, "render", null);
+SwcOther = __decorate5([
+  elementDefind({ tagName: "swc-other", useShadow: true })
+], SwcOther);
 export {
+  ADD_EVENT_LISTENER_METADATA_KEY,
   ATTRIBUTE_CHANGED_METADATA_KEY,
+  ATTRIBUTE_CHANGED_WILDCARD,
   ELEMENT_CONFIG_KEY,
+  QUERY_ALL_METADATA_KEY,
+  QUERY_METADATA_KEY,
   STYLE_METHOD_KEY,
+  SwcChoose,
+  SwcForOf,
+  SwcIf,
+  SwcOther,
+  SwcWhen,
   TEMPLATE_METHOD_KEY,
+  addEventListener,
   attributeChanged,
-  element,
+  elementDefind,
+  getAddEventListenerMetadata,
   getAttributeChangedMap,
   getElementConfig,
+  getQueryAllMetadata,
+  getQueryMetadata,
   getStyleMethod,
   getTemplateMethod,
+  query,
+  queryAll,
   style,
   template
 };