@dooboostore/simple-web-component 1.0.0 → 1.0.1

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

@@ -20,16 +20,31 @@ var dooboostoreSimpleWebComponent = (() => {
   // src/bundle-entry.ts
   var bundle_entry_exports = {};
   __export(bundle_entry_exports, {
+    ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
     ATTRIBUTE_CHANGED_METADATA_KEY: () => ATTRIBUTE_CHANGED_METADATA_KEY,
+    ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
     ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
+    QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
+    QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
     STYLE_METHOD_KEY: () => STYLE_METHOD_KEY,
+    SwcChoose: () => SwcChoose,
+    SwcForOf: () => SwcForOf,
+    SwcIf: () => SwcIf,
+    SwcOther: () => SwcOther,
+    SwcWhen: () => SwcWhen,
     TEMPLATE_METHOD_KEY: () => TEMPLATE_METHOD_KEY,
+    addEventListener: () => addEventListener,
     attributeChanged: () => attributeChanged,
-    element: () => element,
+    elementDefind: () => elementDefind,
+    getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getAttributeChangedMap: () => getAttributeChangedMap,
     getElementConfig: () => getElementConfig,
+    getQueryAllMetadata: () => getQueryAllMetadata,
+    getQueryMetadata: () => getQueryMetadata,
     getStyleMethod: () => getStyleMethod,
     getTemplateMethod: () => getTemplateMethod,
+    query: () => query,
+    queryAll: () => queryAll,
     style: () => style,
     template: () => template
   });
@@ -88,17 +103,36 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // 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);
@@ -124,7 +158,83 @@ var dooboostoreSimpleWebComponent = (() => {
     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) => {
@@ -190,7 +300,7 @@ var dooboostoreSimpleWebComponent = (() => {
     ["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) {
@@ -203,7 +313,7 @@ var dooboostoreSimpleWebComponent = (() => {
       }
     }
     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() {
@@ -211,11 +321,68 @@ var dooboostoreSimpleWebComponent = (() => {
       }
       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();
         }
@@ -231,9 +398,6 @@ var dooboostoreSimpleWebComponent = (() => {
         }
       }
       async connectedCallback() {
-        if (super.connectedCallback) {
-          await super.connectedCallback();
-        }
         const templateMethod = getTemplateMethod(this);
         const styleMethod = getStyleMethod(this);
         const template2 = templateMethod ? await this[templateMethod]() : void 0;
@@ -255,15 +419,36 @@ var dooboostoreSimpleWebComponent = (() => {
         } 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);
+            }
+          });
         }
       }
     };
@@ -279,6 +464,456 @@ var dooboostoreSimpleWebComponent = (() => {
     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);
   return __toCommonJS(bundle_entry_exports);
 })();
 //# sourceMappingURL=dooboostore-simple-web-component.umd.js.map