@dooboostore/simple-web-component 1.0.22 → 1.0.24

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

@@ -1145,16 +1145,42 @@ 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,
+    applyAfterEndNodeHost: () => applyAfterEndNodeHost,
+    applyBeforeBeginNode: () => applyBeforeBeginNode,
+    applyBeforeBeginNodeHost: () => applyBeforeBeginNodeHost,
+    applyBeforeEndNode: () => applyBeforeEndNode,
+    applyBeforeEndNodeHost: () => applyBeforeEndNodeHost,
+    applyInnerHtmlNode: () => applyInnerHtmlNode,
+    applyInnerHtmlNodeHost: () => applyInnerHtmlNodeHost,
+    applyInnerTextNode: () => applyInnerTextNode,
+    applyInnerTextNodeHost: () => applyInnerTextNodeHost,
     applyNode: () => applyNode,
     applyNodeHost: () => applyNodeHost,
+    applyRemoveNode: () => applyRemoveNode,
+    applyRemoveNodeHost: () => applyRemoveNodeHost,
+    applyReplaceChildrenNode: () => applyReplaceChildrenNode,
+    applyReplaceChildrenNodeHost: () => applyReplaceChildrenNodeHost,
+    applyReplaceNode: () => applyReplaceNode,
+    applyReplaceNodeHost: () => applyReplaceNodeHost,
     attribute: () => attribute,
     attributeHost: () => attributeHost,
     changedAttributeHost: () => changedAttributeHost,
+    commentNode: () => commentNode,
     createElement: () => createElement,
     elementDefine: () => elementDefine,
     emitCustomEvent: () => emitCustomEvent,
@@ -1167,6 +1193,8 @@ var dooboostoreSimpleWebComponent = (() => {
     findAllLifecycleMetadata: () => findAllLifecycleMetadata,
     findAllSetAttributeMetadata: () => findAllSetAttributeMetadata,
     findAllStyleMetadata: () => findAllStyleMetadata,
+    firstAppHost: () => firstAppHost,
+    firstHost: () => firstHost,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
@@ -1175,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,
@@ -1204,6 +1229,7 @@ var dooboostoreSimpleWebComponent = (() => {
     onConnectedInnerHtml: () => onConnectedInnerHtml,
     onConstructor: () => onConstructor,
     onDisconnected: () => onDisconnected,
+    parentHost: () => parentHost,
     query: () => query,
     queryAll: () => queryAll,
     queryAllHost: () => queryAllHost,
@@ -1211,18 +1237,21 @@ var dooboostoreSimpleWebComponent = (() => {
     removeClassList: () => removeClassList,
     removeClassListHost: () => removeClassListHost,
     removeStyle: () => removeStyle,
+    removeStyleHost: () => removeStyleHost,
     resolveTargetEls: () => resolveTargetEls,
     setAttribute: () => setAttribute,
     setAttributeHost: () => setAttributeHost,
     setClassList: () => setClassList,
     setClassListHost: () => setClassListHost,
     setStyle: () => setStyle,
+    setStyleHost: () => setStyleHost,
     textNode: () => textNode,
     toggleClassList: () => toggleClassList,
     toggleClassListHost: () => toggleClassListHost,
     updateClassList: () => updateClassList,
     updateClassListHost: () => updateClassListHost,
-    updateStyle: () => updateStyle
+    updateStyle: () => updateStyle,
+    updateStyleHost: () => updateStyleHost
   });
   var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
 
@@ -5829,30 +5858,6 @@ var dooboostoreSimpleWebComponent = (() => {
     })(Path = Expression2.Path || (Expression2.Path = {}));
   })(Expression || (Expression = {}));
 
-  // src/decorators/onConnectedInnerHtml.ts
-  var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
-  function onConnectedInnerHtml(arg1, arg2, arg3) {
-    const decorator = (options, target, propertyKey) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
-      }
-      list.push({ propertyKey, options });
-    };
-    if (arg2) {
-      return decorator({}, arg1, arg2);
-    }
-    return (target, propertyKey) => {
-      decorator(arg1 || {}, target, propertyKey);
-    };
-  }
-  var getOnConnectedInnerHtmlMetadata = (target) => {
-    const constructor = target instanceof Function ? target : target.constructor;
-    return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-  };
-
   // src/decorators/addEventListener.ts
   var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
   function addEventListener(selectorOrTarget, type, options = {}) {
@@ -5883,6 +5888,7 @@ var dooboostoreSimpleWebComponent = (() => {
   var ON_BEFORE_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-before-adopted");
   var ON_AFTER_ADOPTED_METADATA_KEY = Symbol("simple-web-component:on-after-adopted");
   var ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:on-add-event-listener");
+  var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
   var ATTRIBUTE_CHANGED_WILDCARD = "*";
   function createLifecycleDecorator(metadataKey) {
     return (target, propertyKey) => {
@@ -5906,10 +5912,31 @@ var dooboostoreSimpleWebComponent = (() => {
   var onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
   var onAdopted = onAfterAdopted;
   var onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+  function onConnectedInnerHtml(arg1, arg2, arg3) {
+    const decorator = (options, target, propertyKey) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
+      }
+      list.push({ propertyKey, options });
+    };
+    if (arg2) {
+      return decorator({}, arg1, arg2);
+    }
+    return (target, propertyKey) => {
+      decorator(arg1 || {}, target, propertyKey);
+    };
+  }
   var findAllLifecycleMetadata = (target, metadataKey) => {
     const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target);
     return results.length > 0 ? results : void 0;
   };
+  var getOnConnectedInnerHtmlMetadata = (target) => {
+    const constructor = target instanceof Function ? target : target.constructor;
+    return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
+  };
 
   // src/decorators/attribute.ts
   var ATTRIBUTE_METADATA_KEY = Symbol("simple-web-component:attribute");
@@ -6013,7 +6040,6 @@ var dooboostoreSimpleWebComponent = (() => {
         },
         set(nv) {
           const targetType = options.type || designType;
-          console.log("---set", propertyKey, targetType, nv, this, this.__swc_syncing_init);
           const attrName = options.name || String(propertyKey);
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
@@ -6041,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
@@ -6096,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);
@@ -6182,32 +6227,83 @@ var dooboostoreSimpleWebComponent = (() => {
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || (typeof window !== "undefined" ? window : void 0);
           const currentDoc = currentWin.document;
-          let targetEl = null;
-          if (selector === ":host" || !selector) {
-            targetEl = this;
+          const pos = options.position || "beforeEnd";
+          const r = options.root || "auto";
+          const applyRoot = (t) => {
+            if (!t || !(t instanceof HTMLElement))
+              return t;
+            if (r === "auto")
+              return t.shadowRoot || t;
+            if (r === "shadow")
+              return t.shadowRoot;
+            if (r === "light")
+              return t;
+            if (r === "all")
+              return t.shadowRoot || t;
+            return t;
+          };
+          const hostSet = SwcUtils.getHostSet(this);
+          if (pos === "remove") {
+            if (res) {
+              if (selector === ":host" || !selector) {
+                if (r === "shadow" && this.shadowRoot) {
+                  this.shadowRoot.replaceChildren();
+                } else {
+                  this.remove();
+                }
+              } else {
+                const targetRoot = applyRoot(this);
+                if (targetRoot) {
+                  const targets = targetRoot.querySelectorAll(selector);
+                  targets.forEach((el) => el.remove());
+                }
+              }
+            }
           } else {
-            targetEl = (this.shadowRoot || this).querySelector(selector);
-          }
-          if (targetEl) {
-            const nodes = normalizeNodes(res, currentDoc);
-            const pos = options.position || "beforeEnd";
-            if (pos === "replace") {
-              targetEl.replaceWith(...nodes);
-            } else if (pos === "replaceChildren") {
-              targetEl.replaceChildren(...nodes);
-            } else if (pos === "innerHtml") {
-              targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
-            } else if (pos === "innerText") {
-              targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
+            let targetEl = null;
+            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 {
-              if (pos === "beforeEnd")
-                targetEl.append(...nodes);
-              else if (pos === "afterBegin")
-                targetEl.prepend(...nodes);
-              else if (pos === "beforeBegin")
-                targetEl.before(...nodes);
-              else if (pos === "afterEnd")
-                targetEl.after(...nodes);
+              const targetRoot = applyRoot(this);
+              targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
+            }
+            if (targetEl) {
+              const isShadowRoot = targetEl instanceof ShadowRoot;
+              const nodes = normalizeNodes(res, currentDoc);
+              if (pos === "replace") {
+                if (!isShadowRoot) {
+                  targetEl.replaceWith(...nodes);
+                }
+              } else if (pos === "replaceChildren") {
+                targetEl.replaceChildren(...nodes);
+              } else if (pos === "innerHtml") {
+                targetEl.innerHTML = res !== void 0 && res !== null ? String(res) : "";
+              } else if (pos === "innerText") {
+                if (targetEl.innerText !== void 0) {
+                  targetEl.innerText = res !== void 0 && res !== null ? String(res) : "";
+                }
+              } else {
+                if (pos === "beforeEnd")
+                  targetEl.append(...nodes);
+                else if (pos === "afterBegin")
+                  targetEl.prepend(...nodes);
+                else if (pos === "beforeBegin" && !isShadowRoot)
+                  targetEl.before(...nodes);
+                else if (pos === "afterEnd" && !isShadowRoot)
+                  targetEl.after(...nodes);
+              }
             }
           }
         }
@@ -6225,8 +6321,107 @@ 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" });
   }
 
   // src/decorators/query.ts
@@ -6328,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
@@ -6428,14 +6691,82 @@ 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
   var CLASS_LIST_METADATA_KEY = Symbol("simple-web-component:class-list");
   function createClassListDecorator(action) {
-    return (selector) => {
+    return (selector, options = {}) => {
       return (target, propertyKey, descriptor) => {
         const constructor = target.constructor;
         let metaList = ReflectUtils.getOwnMetadata(CLASS_LIST_METADATA_KEY, constructor);
@@ -6443,19 +6774,52 @@ var dooboostoreSimpleWebComponent = (() => {
           metaList = /* @__PURE__ */ new Map();
           ReflectUtils.defineMetadata(CLASS_LIST_METADATA_KEY, metaList, constructor);
         }
-        metaList.set(propertyKey, { propertyKey, selector, action });
+        metaList.set(propertyKey, { propertyKey, selector, action, options });
         const original = descriptor.value;
         descriptor.value = async function(...args) {
           ensureInit2(this);
           const res = await original.apply(this, args);
           if (res !== void 0) {
+            const r = options.root || "auto";
             const hostSet = SwcUtils.getHostSet(this);
-            let targetEl = null;
-            if (selector === ":host" || !selector) targetEl = this;
-            else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-            else if (selector === ":appHost") targetEl = hostSet.$appHost;
-            else targetEl = (this.shadowRoot || this).querySelector(selector);
-            if (targetEl) {
+            const targetEls = [];
+            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(...Array.from(found));
+              } else if (r === "light") {
+                const found = this.querySelectorAll(selector);
+                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(...Array.from(sFound));
+                if (lFound) targetEls.push(...Array.from(lFound));
+              } else {
+                const found = (this.shadowRoot || this).querySelectorAll(selector);
+                if (found) targetEls.push(...Array.from(found));
+              }
+            }
+            targetEls.forEach((targetEl) => {
               if (action === "set") {
                 let classes = "";
                 if (typeof res === "object" && res !== null && !Array.isArray(res)) {
@@ -6483,23 +6847,53 @@ var dooboostoreSimpleWebComponent = (() => {
                 const classes = Array.isArray(res) ? res.map(String) : [String(res)];
                 classes.forEach((c) => targetEl.classList.toggle(c));
               }
-            }
+            });
           }
           return res;
         };
       };
     };
   }
-  var setClassList = createClassListDecorator("set");
-  var updateClassList = createClassListDecorator("update");
-  var addClassList = createClassListDecorator("add");
-  var removeClassList = createClassListDecorator("remove");
-  var toggleClassList = createClassListDecorator("toggle");
-  var setClassListHost = createClassListDecorator("set").bind(null, ":host");
-  var updateClassListHost = createClassListDecorator("update").bind(null, ":host");
-  var addClassListHost = createClassListDecorator("add").bind(null, ":host");
-  var removeClassListHost = createClassListDecorator("remove").bind(null, ":host");
-  var toggleClassListHost = createClassListDecorator("toggle").bind(null, ":host");
+  var setClassList = (selector, options = {}) => createClassListDecorator("set")(selector, options);
+  var updateClassList = (selector, options = {}) => createClassListDecorator("update")(selector, options);
+  var addClassList = (selector, options = {}) => createClassListDecorator("add")(selector, options);
+  var removeClassList = (selector, options = {}) => createClassListDecorator("remove")(selector, options);
+  var toggleClassList = (selector, options = {}) => createClassListDecorator("toggle")(selector, 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);
@@ -6514,7 +6908,7 @@ var dooboostoreSimpleWebComponent = (() => {
   // src/decorators/style.ts
   var STYLE_METADATA_KEY = Symbol("simple-web-component:style");
   function createStyleDecorator(action) {
-    return (selector) => {
+    return (selector, options = {}) => {
       return (target, propertyKey, descriptor) => {
         const constructor = target.constructor;
         let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor);
@@ -6522,19 +6916,52 @@ var dooboostoreSimpleWebComponent = (() => {
           metaList = /* @__PURE__ */ new Map();
           ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
         }
-        metaList.set(propertyKey, { propertyKey, selector, action });
+        metaList.set(propertyKey, { propertyKey, selector, action, options });
         const original = descriptor.value;
         descriptor.value = async function(...args) {
           ensureInit2(this);
           const res = await original.apply(this, args);
           if (res !== void 0) {
+            const r = options.root || "auto";
             const hostSet = SwcUtils.getHostSet(this);
-            let targetEl = null;
-            if (selector === ":host" || !selector) targetEl = this;
-            else if (selector === ":parentHost") targetEl = hostSet.$parentHost;
-            else if (selector === ":appHost") targetEl = hostSet.$appHost;
-            else targetEl = (this.shadowRoot || this).querySelector(selector);
-            if (targetEl) {
+            const targetEls = [];
+            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(...Array.from(found));
+              } else if (r === "light") {
+                const found = this.querySelectorAll(selector);
+                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(...Array.from(sFound));
+                if (lFound) targetEls.push(...Array.from(lFound));
+              } else {
+                const found = (this.shadowRoot || this).querySelectorAll(selector);
+                if (found) targetEls.push(...Array.from(found));
+              }
+            }
+            targetEls.forEach((targetEl) => {
               if (action === "set") {
                 targetEl.style.cssText = "";
                 if (typeof res === "object" && res !== null) {
@@ -6550,16 +6977,37 @@ var dooboostoreSimpleWebComponent = (() => {
                 const props = Array.isArray(res) ? res : [res];
                 props.forEach((p) => targetEl.style.removeProperty(String(p)));
               }
-            }
+            });
           }
           return res;
         };
       };
     };
   }
-  var setStyle = createStyleDecorator("set");
-  var updateStyle = createStyleDecorator("update");
-  var removeStyle = createStyleDecorator("remove");
+  var setStyle = (selector, options = {}) => createStyleDecorator("set")(selector, 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);
+  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);
+  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);
@@ -6573,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) => {
@@ -6635,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);
@@ -6892,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;
         }
@@ -8092,69 +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.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 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: