@dooboostore/simple-web-component 1.0.23 → 1.0.24

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

@@ -1145,11 +1145,18 @@ var dooboostoreSimpleWebComponent = (() => {
     STYLE_METADATA_KEY: () => STYLE_METADATA_KEY,
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
     SwcUtils: () => SwcUtils,
-    TemplateUtils: () => TemplateUtils,
     addClassList: () => addClassList,
     addClassListHost: () => addClassListHost,
     addEventListener: () => addEventListener,
     addEventListenerHost: () => addEventListenerHost,
+    allAppHost: () => allAppHost,
+    allFirstAppHost: () => allFirstAppHost,
+    allFirstHost: () => allFirstHost,
+    allHost: () => allHost,
+    allLastAppHost: () => allLastAppHost,
+    allLastHost: () => allLastHost,
+    allParentHost: () => allParentHost,
+    appHost: () => appHost,
     applyAfterBeginNode: () => applyAfterBeginNode,
     applyAfterBeginNodeHost: () => applyAfterBeginNodeHost,
     applyAfterEndNode: () => applyAfterEndNode,
@@ -1186,6 +1193,8 @@ var dooboostoreSimpleWebComponent = (() => {
     findAllLifecycleMetadata: () => findAllLifecycleMetadata,
     findAllSetAttributeMetadata: () => findAllSetAttributeMetadata,
     findAllStyleMetadata: () => findAllStyleMetadata,
+    firstAppHost: () => firstAppHost,
+    firstHost: () => firstHost,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
@@ -1194,23 +1203,20 @@ var dooboostoreSimpleWebComponent = (() => {
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
     getSetAttributeMetadata: () => getSetAttributeMetadata,
+    host: () => host,
     htmlAElement: () => htmlAElement,
     htmlArticleElement: () => htmlArticleElement,
     htmlButtonElement: () => htmlButtonElement,
     htmlDivElement: () => htmlDivElement,
     htmlFragment: () => htmlFragment,
-    htmlH1Element: () => htmlH1Element,
-    htmlH2Element: () => htmlH2Element,
-    htmlH3Element: () => htmlH3Element,
-    htmlH4Element: () => htmlH4Element,
-    htmlH5Element: () => htmlH5Element,
-    htmlH6Element: () => htmlH6Element,
-    htmlInputElement: () => htmlInputElement,
+    htmlHeadingElement: () => htmlHeadingElement,
     htmlLiElement: () => htmlLiElement,
     htmlPElement: () => htmlPElement,
     htmlSectionElement: () => htmlSectionElement,
     htmlSpanElement: () => htmlSpanElement,
     htmlUlElement: () => htmlUlElement,
+    lastAppHost: () => lastAppHost,
+    lastHost: () => lastHost,
     onAddEventListener: () => onAddEventListener,
     onAdopted: () => onAdopted,
     onAfterAdopted: () => onAfterAdopted,
@@ -1223,6 +1229,7 @@ var dooboostoreSimpleWebComponent = (() => {
     onConnectedInnerHtml: () => onConnectedInnerHtml,
     onConstructor: () => onConstructor,
     onDisconnected: () => onDisconnected,
+    parentHost: () => parentHost,
     query: () => query,
     queryAll: () => queryAll,
     queryAllHost: () => queryAllHost,
@@ -6060,8 +6067,27 @@ var dooboostoreSimpleWebComponent = (() => {
   var findAllAttributeMetadata = (target) => {
     return ReflectUtils.findAllMetadata(ATTRIBUTE_METADATA_KEY, target).flat();
   };
-  function attributeHost(attrName, options = {}) {
-    return attribute(":host", { ...options, name: attrName });
+  function attributeHost(targetOrAttrOrOptions, propertyKeyOrOptions) {
+    if (propertyKeyOrOptions !== void 0 && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
+      const fieldName = String(propertyKeyOrOptions);
+      return attribute(":host", { name: fieldName })(targetOrAttrOrOptions, propertyKeyOrOptions);
+    }
+    if (typeof targetOrAttrOrOptions === "string") {
+      const attrName = targetOrAttrOrOptions;
+      const options = typeof propertyKeyOrOptions === "object" ? propertyKeyOrOptions : {};
+      return attribute(":host", { ...options, name: attrName });
+    } else if (typeof targetOrAttrOrOptions === "object") {
+      const options = targetOrAttrOrOptions;
+      return (target, propertyKey) => {
+        const fieldName = String(propertyKey);
+        return attribute(":host", { ...options, name: fieldName })(target, propertyKey);
+      };
+    } else {
+      return (target, propertyKey) => {
+        const fieldName = String(propertyKey);
+        return attribute(":host", { name: fieldName })(target, propertyKey);
+      };
+    }
   }
 
   // src/decorators/changedAttributeHost.ts
@@ -6115,11 +6141,11 @@ var dooboostoreSimpleWebComponent = (() => {
           const applyRoot = (t) => {
             if (!t) return;
             if (r === "auto") {
-              targetEls.push(t.shadowRoot || t);
-              return;
+              targetEls.push(t);
+            } else {
+              if (r === "light" || r === "all") targetEls.push(t);
+              if ((r === "shadow" || r === "all") && t.shadowRoot) targetEls.push(t.shadowRoot);
             }
-            if (r === "light" || r === "all") targetEls.push(t);
-            if ((r === "shadow" || r === "all") && t.shadowRoot) targetEls.push(t.shadowRoot);
           };
           if (selector === ":window") targetEls.push(currentWin);
           else if (selector === ":document") targetEls.push(currentWin.document);
@@ -6203,15 +6229,20 @@ var dooboostoreSimpleWebComponent = (() => {
           const currentDoc = currentWin.document;
           const pos = options.position || "beforeEnd";
           const r = options.root || "auto";
-          const getTargetRoot = () => {
+          const applyRoot = (t) => {
+            if (!t || !(t instanceof HTMLElement))
+              return t;
+            if (r === "auto")
+              return t.shadowRoot || t;
             if (r === "shadow")
-              return this.shadowRoot;
+              return t.shadowRoot;
             if (r === "light")
-              return this;
+              return t;
             if (r === "all")
-              return this.shadowRoot || this;
-            return this.shadowRoot || this;
+              return t.shadowRoot || t;
+            return t;
           };
+          const hostSet = SwcUtils.getHostSet(this);
           if (pos === "remove") {
             if (res) {
               if (selector === ":host" || !selector) {
@@ -6221,7 +6252,7 @@ var dooboostoreSimpleWebComponent = (() => {
                   this.remove();
                 }
               } else {
-                const targetRoot = getTargetRoot();
+                const targetRoot = applyRoot(this);
                 if (targetRoot) {
                   const targets = targetRoot.querySelectorAll(selector);
                   targets.forEach((el) => el.remove());
@@ -6230,14 +6261,22 @@ var dooboostoreSimpleWebComponent = (() => {
             }
           } else {
             let targetEl = null;
-            if (selector === ":host" || !selector) {
-              if (r === "shadow") {
-                targetEl = this.shadowRoot;
-              } else {
-                targetEl = this;
-              }
+            if (selector === ":host") {
+              targetEl = applyRoot(this);
+            } else if (selector === ":parentHost") {
+              targetEl = applyRoot(hostSet.$parentHost);
+            } else if (selector === ":appHost") {
+              targetEl = applyRoot(hostSet.$appHost);
+            } else if (selector === ":firstHost") {
+              targetEl = applyRoot(hostSet.$firstHost);
+            } else if (selector === ":lastHost") {
+              targetEl = applyRoot(hostSet.$lastHost);
+            } else if (selector === ":firstAppHost") {
+              targetEl = applyRoot(hostSet.$firstHost);
+            } else if (selector === ":lastAppHost") {
+              targetEl = applyRoot(hostSet.$lastAppHost);
             } else {
-              const targetRoot = getTargetRoot();
+              const targetRoot = applyRoot(this);
               targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
             }
             if (targetEl) {
@@ -6282,27 +6321,108 @@ var dooboostoreSimpleWebComponent = (() => {
     });
     return result;
   };
-  function applyNodeHost(options = { position: "beforeEnd" }) {
-    return applyNode(":host", options);
+  function applyNodeHost(targetOrOptions, propertyKey, descriptor) {
+    console.log("vvvvv");
+    if (propertyKey !== void 0 && typeof propertyKey === "string" || typeof propertyKey === "symbol") {
+      return applyNode(":host", { position: "beforeEnd" })(targetOrOptions, propertyKey, descriptor);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      const options = targetOrOptions;
+      return applyNode(":host", { ...options, position: options.position || "beforeEnd" });
+    } else {
+      return applyNode(":host", { position: "beforeEnd" });
+    }
+  }
+  function applyBeforeBeginNode(selector, options) {
+    return applyNode(selector, { ...options, position: "beforeBegin" });
+  }
+  function applyAfterBeginNode(selector, options) {
+    return applyNode(selector, { ...options, position: "afterBegin" });
+  }
+  function applyBeforeEndNode(selector, options) {
+    return applyNode(selector, { ...options, position: "beforeEnd" });
+  }
+  function applyAfterEndNode(selector, options) {
+    return applyNode(selector, { ...options, position: "afterEnd" });
+  }
+  function applyReplaceNode(selector, options) {
+    return applyNode(selector, { ...options, position: "replace" });
+  }
+  function applyReplaceChildrenNode(selector, options) {
+    return applyNode(selector, { ...options, position: "replaceChildren" });
+  }
+  function applyInnerHtmlNode(selector, options) {
+    return applyNode(selector, { ...options, position: "innerHtml" });
+  }
+  function applyInnerTextNode(selector, options) {
+    return applyNode(selector, { ...options, position: "innerText" });
+  }
+  function applyRemoveNode(selector, options) {
+    return applyNode(selector, { ...options, position: "remove" });
+  }
+  function applyBeforeBeginNodeHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "beforeBegin" });
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...targetOrOptions || {}, position: "beforeBegin" });
+  }
+  function applyAfterBeginNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "afterBegin" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "afterBegin" });
+  }
+  function applyBeforeEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "beforeEnd" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "beforeEnd" });
+  }
+  function applyAfterEndNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "afterEnd" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "afterEnd" });
+  }
+  function applyReplaceNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "replace" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "replace" });
+  }
+  function applyReplaceChildrenNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "replaceChildren" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "replaceChildren" });
+  }
+  function applyInnerHtmlNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "innerHtml" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "innerHtml" });
+  }
+  function applyInnerTextNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "innerText" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "innerText" });
+  }
+  function applyRemoveNodeHost(optionsOrTarget, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = applyNode(":host", { position: "remove" });
+      return decorator(optionsOrTarget, propertyKey, descriptor);
+    }
+    return applyNode(":host", { ...optionsOrTarget || {}, position: "remove" });
   }
-  var applyBeforeBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeBegin" });
-  var applyAfterBeginNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterBegin" });
-  var applyBeforeEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "beforeEnd" });
-  var applyAfterEndNode = (selector, options = {}) => applyNode(selector, { ...options, position: "afterEnd" });
-  var applyReplaceNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replace" });
-  var applyReplaceChildrenNode = (selector, options = {}) => applyNode(selector, { ...options, position: "replaceChildren" });
-  var applyInnerHtmlNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerHtml" });
-  var applyInnerTextNode = (selector, options = {}) => applyNode(selector, { ...options, position: "innerText" });
-  var applyRemoveNode = (selector, options = {}) => applyNode(selector, { ...options, position: "remove" });
-  var applyBeforeBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeBegin" });
-  var applyAfterBeginNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterBegin" });
-  var applyBeforeEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "beforeEnd" });
-  var applyAfterEndNodeHost = (options = {}) => applyNode(":host", { ...options, position: "afterEnd" });
-  var applyReplaceNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replace" });
-  var applyReplaceChildrenNodeHost = (options = {}) => applyNode(":host", { ...options, position: "replaceChildren" });
-  var applyInnerHtmlNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerHtml" });
-  var applyInnerTextNodeHost = (options = {}) => applyNode(":host", { ...options, position: "innerText" });
-  var applyRemoveNodeHost = (options = {}) => applyNode(":host", { ...options, position: "remove" });
 
   // src/decorators/query.ts
   var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
@@ -6403,8 +6523,76 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
   };
-  function queryHost(options) {
-    return query(":host", options);
+  function queryHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return query(":host", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return query(":host", targetOrOptions);
+    } else {
+      return query(":host", {});
+    }
+  }
+  var host = queryHost;
+  function parentHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return query(":parentHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return query(":parentHost", targetOrOptions);
+    } else {
+      return query(":parentHost", {});
+    }
+  }
+  function appHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return query(":appHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return query(":appHost", targetOrOptions);
+    } else {
+      return query(":appHost", {});
+    }
+  }
+  function firstHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return query(":firstHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return query(":firstHost", targetOrOptions);
+    } else {
+      return query(":firstHost", {});
+    }
+  }
+  function lastHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return query(":lastHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return query(":lastHost", targetOrOptions);
+    } else {
+      return query(":lastHost", {});
+    }
+  }
+  function firstAppHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return query(":firstAppHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return query(":firstAppHost", targetOrOptions);
+    } else {
+      return query(":firstAppHost", {});
+    }
+  }
+  function lastAppHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return query(":lastAppHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return query(":lastAppHost", targetOrOptions);
+    } else {
+      return query(":lastAppHost", {});
+    }
   }
 
   // src/decorators/queryAll.ts
@@ -6503,8 +6691,76 @@ var dooboostoreSimpleWebComponent = (() => {
     const constructor = target instanceof Function ? target : target.constructor;
     return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
   };
-  function queryAllHost(options) {
-    return queryAll(":host", options);
+  function queryAllHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return queryAll(":host", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return queryAll(":host", targetOrOptions);
+    } else {
+      return queryAll(":host", {});
+    }
+  }
+  var allHost = queryAllHost;
+  function allParentHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return queryAll(":parentHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return queryAll(":parentHost", targetOrOptions);
+    } else {
+      return queryAll(":parentHost", {});
+    }
+  }
+  function allAppHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return queryAll(":appHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return queryAll(":appHost", targetOrOptions);
+    } else {
+      return queryAll(":appHost", {});
+    }
+  }
+  function allFirstHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return queryAll(":firstHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return queryAll(":firstHost", targetOrOptions);
+    } else {
+      return queryAll(":firstHost", {});
+    }
+  }
+  function allLastHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return queryAll(":lastHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return queryAll(":lastHost", targetOrOptions);
+    } else {
+      return queryAll(":lastHost", {});
+    }
+  }
+  function allFirstAppHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return queryAll(":firstAppHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return queryAll(":firstAppHost", targetOrOptions);
+    } else {
+      return queryAll(":firstAppHost", {});
+    }
+  }
+  function allLastAppHost(targetOrOptions, propertyKey) {
+    if (propertyKey !== void 0 && (typeof propertyKey === "string" || typeof propertyKey === "symbol")) {
+      return queryAll(":lastAppHost", {})(targetOrOptions, propertyKey);
+    }
+    if (typeof targetOrOptions === "object" && targetOrOptions !== null) {
+      return queryAll(":lastAppHost", targetOrOptions);
+    } else {
+      return queryAll(":lastAppHost", {});
+    }
   }
 
   // src/decorators/classList.ts
@@ -6527,27 +6783,40 @@ var dooboostoreSimpleWebComponent = (() => {
             const r = options.root || "auto";
             const hostSet = SwcUtils.getHostSet(this);
             const targetEls = [];
-            if (selector === ":host" || !selector) {
-              targetEls.push(this);
-            } else if (selector === ":parentHost") {
-              if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
-            } else if (selector === ":appHost") {
-              if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
-            } else {
+            const applyRoot = (t) => {
+              if (!t || !(t instanceof HTMLElement)) return;
+              if (r === "auto") {
+                targetEls.push(t);
+              } else {
+                if (r === "light" || r === "all") targetEls.push(t);
+                if ((r === "shadow" || r === "all") && t.shadowRoot) {
+                }
+              }
+            };
+            if (selector === ":parentHost") applyRoot(hostSet.$parentHost);
+            else if (selector === ":appHost") applyRoot(hostSet.$appHost);
+            else if (selector === ":firstHost") applyRoot(hostSet.$firstHost);
+            else if (selector === ":lastHost") applyRoot(hostSet.$lastHost);
+            else if (selector === ":firstAppHost") applyRoot(hostSet.$firstAppHost);
+            else if (selector === ":lastAppHost") applyRoot(hostSet.$lastAppHost);
+            else if (selector === ":hosts") hostSet.$hosts.forEach(applyRoot);
+            else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRoot);
+            else if (selector === ":host" || !selector) applyRoot(this);
+            else {
               if (r === "shadow") {
                 const found = this.shadowRoot?.querySelectorAll(selector);
-                if (found) targetEls.push(...found);
+                if (found) targetEls.push(...Array.from(found));
               } else if (r === "light") {
                 const found = this.querySelectorAll(selector);
-                if (found) targetEls.push(...found);
+                if (found) targetEls.push(...Array.from(found));
               } else if (r === "all") {
                 const sFound = this.shadowRoot?.querySelectorAll(selector);
                 const lFound = this.querySelectorAll(selector);
-                if (sFound) targetEls.push(...sFound);
-                if (lFound) targetEls.push(...lFound);
+                if (sFound) targetEls.push(...Array.from(sFound));
+                if (lFound) targetEls.push(...Array.from(lFound));
               } else {
                 const found = (this.shadowRoot || this).querySelectorAll(selector);
-                if (found) targetEls.push(...found);
+                if (found) targetEls.push(...Array.from(found));
               }
             }
             targetEls.forEach((targetEl) => {
@@ -6590,11 +6859,41 @@ var dooboostoreSimpleWebComponent = (() => {
   var addClassList = (selector, options = {}) => createClassListDecorator("add")(selector, options);
   var removeClassList = (selector, options = {}) => createClassListDecorator("remove")(selector, options);
   var toggleClassList = (selector, options = {}) => createClassListDecorator("toggle")(selector, options);
-  var setClassListHost = (options = {}) => createClassListDecorator("set")(":host", options);
-  var updateClassListHost = (options = {}) => createClassListDecorator("update")(":host", options);
-  var addClassListHost = (options = {}) => createClassListDecorator("add")(":host", options);
-  var removeClassListHost = (options = {}) => createClassListDecorator("remove")(":host", options);
-  var toggleClassListHost = (options = {}) => createClassListDecorator("toggle")(":host", options);
+  function setClassListHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createClassListDecorator("set")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createClassListDecorator("set")(":host", targetOrOptions || {});
+  }
+  function updateClassListHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createClassListDecorator("update")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createClassListDecorator("update")(":host", targetOrOptions || {});
+  }
+  function addClassListHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createClassListDecorator("add")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createClassListDecorator("add")(":host", targetOrOptions || {});
+  }
+  function removeClassListHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createClassListDecorator("remove")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createClassListDecorator("remove")(":host", targetOrOptions || {});
+  }
+  function toggleClassListHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createClassListDecorator("toggle")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createClassListDecorator("toggle")(":host", targetOrOptions || {});
+  }
   var findAllClassListMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6626,27 +6925,40 @@ var dooboostoreSimpleWebComponent = (() => {
             const r = options.root || "auto";
             const hostSet = SwcUtils.getHostSet(this);
             const targetEls = [];
-            if (selector === ":host" || !selector) {
-              targetEls.push(this);
-            } else if (selector === ":parentHost") {
-              if (hostSet.$parentHost) targetEls.push(hostSet.$parentHost);
-            } else if (selector === ":appHost") {
-              if (hostSet.$appHost) targetEls.push(hostSet.$appHost);
-            } else {
+            const applyRoot = (t) => {
+              if (!t || !(t instanceof HTMLElement)) return;
+              if (r === "auto") {
+                targetEls.push(t);
+              } else {
+                if (r === "light" || r === "all") targetEls.push(t);
+                if ((r === "shadow" || r === "all") && t.shadowRoot) {
+                }
+              }
+            };
+            if (selector === ":parentHost") applyRoot(hostSet.$parentHost);
+            else if (selector === ":appHost") applyRoot(hostSet.$appHost);
+            else if (selector === ":firstHost") applyRoot(hostSet.$firstHost);
+            else if (selector === ":lastHost") applyRoot(hostSet.$lastHost);
+            else if (selector === ":firstAppHost") applyRoot(hostSet.$firstAppHost);
+            else if (selector === ":lastAppHost") applyRoot(hostSet.$lastAppHost);
+            else if (selector === ":hosts") hostSet.$hosts.forEach(applyRoot);
+            else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRoot);
+            else if (selector === ":host" || !selector) applyRoot(this);
+            else {
               if (r === "shadow") {
                 const found = this.shadowRoot?.querySelectorAll(selector);
-                if (found) targetEls.push(...found);
+                if (found) targetEls.push(...Array.from(found));
               } else if (r === "light") {
                 const found = this.querySelectorAll(selector);
-                if (found) targetEls.push(...found);
+                if (found) targetEls.push(...Array.from(found));
               } else if (r === "all") {
                 const sFound = this.shadowRoot?.querySelectorAll(selector);
                 const lFound = this.querySelectorAll(selector);
-                if (sFound) targetEls.push(...sFound);
-                if (lFound) targetEls.push(...lFound);
+                if (sFound) targetEls.push(...Array.from(sFound));
+                if (lFound) targetEls.push(...Array.from(lFound));
               } else {
                 const found = (this.shadowRoot || this).querySelectorAll(selector);
-                if (found) targetEls.push(...found);
+                if (found) targetEls.push(...Array.from(found));
               }
             }
             targetEls.forEach((targetEl) => {
@@ -6673,11 +6985,29 @@ var dooboostoreSimpleWebComponent = (() => {
     };
   }
   var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, options);
-  var setStyleHost = (options = {}) => createStyleDecorator("set")(":host", options);
+  function setStyleHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createStyleDecorator("set")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createStyleDecorator("set")(":host", targetOrOptions || {});
+  }
   var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
-  var updateStyleHost = (options = {}) => createStyleDecorator("update")(":host", options);
+  function updateStyleHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createStyleDecorator("update")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createStyleDecorator("update")(":host", targetOrOptions || {});
+  }
   var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
-  var removeStyleHost = (options = {}) => createStyleDecorator("remove")(":host", options);
+  function removeStyleHost(targetOrOptions, propertyKey, descriptor) {
+    if (propertyKey !== void 0) {
+      const decorator = createStyleDecorator("remove")(":host", {});
+      return decorator(targetOrOptions, propertyKey, descriptor);
+    }
+    return createStyleDecorator("remove")(":host", targetOrOptions || {});
+  }
   var findAllStyleMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -6691,6 +7021,131 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/utils/Utils.ts
   var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
+  var htmlFragment = (html, doc) => {
+    const d = doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const template = d.createElement("template");
+    template.innerHTML = html.trim();
+    return template.content;
+  };
+  var textNode = (text, doc) => {
+    const d = doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    return d.createTextNode(text !== void 0 && text !== null ? String(text) : "");
+  };
+  var commentNode = (comment, doc) => {
+    const d = doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    return d.createComment(comment !== void 0 && comment !== null ? String(comment) : "");
+  };
+  var createElement = (tagName, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement(tagName);
+    if (options?.html) el.innerHTML = options.html;
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlDivElement = (html, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("div");
+    el.innerHTML = html.trim();
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlSpanElement = (html, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("span");
+    el.innerHTML = html.trim();
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlButtonElement = (html, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("button");
+    el.innerHTML = html.trim();
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlUlElement = (options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("ul");
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlLiElement = (html, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("li");
+    el.innerHTML = html.trim();
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlAElement = (html, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("a");
+    el.innerHTML = html.trim();
+    if (options?.href) el.href = options.href;
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlPElement = (html, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("p");
+    el.innerHTML = html.trim();
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlHeadingElement = (level, html, options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement(`h${level}`);
+    el.innerHTML = html.trim();
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlSectionElement = (options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("section");
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
+  var htmlArticleElement = (options) => {
+    const d = options?.doc || (typeof document !== "undefined" ? document : void 0);
+    if (!d) throw new Error("Document is not available");
+    const el = d.createElement("article");
+    if (options?.attrs) {
+      Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+    }
+    return el;
+  };
   var SwcUtils;
   ((SwcUtils2) => {
     SwcUtils2.getHelperSet = (win) => {
@@ -6753,7 +7208,7 @@ var dooboostoreSimpleWebComponent = (() => {
     };
     SwcUtils2.getAppHosts = (el) => {
       const hosts = (0, SwcUtils2.getHosts)(el);
-      return hosts.filter((host) => host.tagName.toLowerCase() === "swc-app" || host.getAttribute("is")?.startsWith("swc-app-"));
+      return hosts.filter((host2) => host2.tagName.toLowerCase() === "swc-app" || host2.getAttribute("is")?.startsWith("swc-app-"));
     };
     SwcUtils2.getAppHost = (el) => {
       const appHosts = (0, SwcUtils2.getAppHosts)(el);
@@ -7010,9 +7465,9 @@ var dooboostoreSimpleWebComponent = (() => {
       if (!(node instanceof HTMLElement)) continue;
       const script = node.getAttribute?.(attrName);
       if (script && !getElementConfig(node)) {
-        const host = SwcUtils.findNearestSwcHost(node);
-        if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === "function") {
-          await host.__swc_executeAttributeEvent(node, attrName, script, event);
+        const host2 = SwcUtils.findNearestSwcHost(node);
+        if (host2 && host2.isConnected && typeof host2.__swc_executeAttributeEvent === "function") {
+          await host2.__swc_executeAttributeEvent(node, attrName, script, event);
           event.__swc_handled = true;
           break;
         }
@@ -8210,74 +8665,6 @@ var dooboostoreSimpleWebComponent = (() => {
       return /Mobi/i.test(targetWindow.navigator.userAgent);
     };
   })(ValidUtils2 || (ValidUtils2 = {}));
-
-  // src/utils/TemplateUtils.ts
-  var TemplateUtils;
-  ((TemplateUtils2) => {
-    TemplateUtils2.htmlFragment = (strings, ...values) => {
-      const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-      const template = document.createElement("template");
-      template.innerHTML = raw.trim();
-      return template.content;
-    };
-    TemplateUtils2.textNode = (strings, ...values) => {
-      const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-      return document.createTextNode(raw);
-    };
-    TemplateUtils2.commentNode = (strings, ...values) => {
-      const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-      return document.createComment(raw);
-    };
-    TemplateUtils2.createElement = (info, attrs = {}) => {
-      const el = document.createElement(info.tagName);
-      if (info.innerHtml !== void 0) el.innerHTML = info.innerHtml;
-      Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
-      return el;
-    };
-    const createTagFunction = (tagName) => {
-      return (strings, ...values) => {
-        const el = document.createElement(tagName);
-        el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
-        return el;
-      };
-    };
-    TemplateUtils2.htmlDivElement = createTagFunction("div");
-    TemplateUtils2.htmlSpanElement = createTagFunction("span");
-    TemplateUtils2.htmlButtonElement = createTagFunction("button");
-    TemplateUtils2.htmlUlElement = createTagFunction("ul");
-    TemplateUtils2.htmlLiElement = createTagFunction("li");
-    TemplateUtils2.htmlInputElement = createTagFunction("input");
-    TemplateUtils2.htmlAElement = createTagFunction("a");
-    TemplateUtils2.htmlPElement = createTagFunction("p");
-    TemplateUtils2.htmlH1Element = createTagFunction("h1");
-    TemplateUtils2.htmlH2Element = createTagFunction("h2");
-    TemplateUtils2.htmlH3Element = createTagFunction("h3");
-    TemplateUtils2.htmlH4Element = createTagFunction("h4");
-    TemplateUtils2.htmlH5Element = createTagFunction("h5");
-    TemplateUtils2.htmlH6Element = createTagFunction("h6");
-    TemplateUtils2.htmlSectionElement = createTagFunction("section");
-    TemplateUtils2.htmlArticleElement = createTagFunction("article");
-  })(TemplateUtils || (TemplateUtils = {}));
-  var htmlFragment = TemplateUtils.htmlFragment;
-  var textNode = TemplateUtils.textNode;
-  var commentNode = TemplateUtils.commentNode;
-  var createElement = TemplateUtils.createElement;
-  var htmlDivElement = TemplateUtils.htmlDivElement;
-  var htmlSpanElement = TemplateUtils.htmlSpanElement;
-  var htmlButtonElement = TemplateUtils.htmlButtonElement;
-  var htmlUlElement = TemplateUtils.htmlUlElement;
-  var htmlLiElement = TemplateUtils.htmlLiElement;
-  var htmlInputElement = TemplateUtils.htmlInputElement;
-  var htmlAElement = TemplateUtils.htmlAElement;
-  var htmlPElement = TemplateUtils.htmlPElement;
-  var htmlH1Element = TemplateUtils.htmlH1Element;
-  var htmlH2Element = TemplateUtils.htmlH2Element;
-  var htmlH3Element = TemplateUtils.htmlH3Element;
-  var htmlH4Element = TemplateUtils.htmlH4Element;
-  var htmlH5Element = TemplateUtils.htmlH5Element;
-  var htmlH6Element = TemplateUtils.htmlH6Element;
-  var htmlSectionElement = TemplateUtils.htmlSectionElement;
-  var htmlArticleElement = TemplateUtils.htmlArticleElement;
   return __toCommonJS(bundle_entry_exports);
 })();
 /*! Bundled license information: