@dooboostore/simple-web-component 1.0.22 → 1.0.23

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

@@ -1150,11 +1150,30 @@ var dooboostoreSimpleWebComponent = (() => {
     addClassListHost: () => addClassListHost,
     addEventListener: () => addEventListener,
     addEventListenerHost: () => addEventListenerHost,
+    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,
@@ -1211,18 +1230,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 +5851,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 +5881,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 +5905,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 +6033,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);
@@ -6182,32 +6201,70 @@ 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 getTargetRoot = () => {
+            if (r === "shadow")
+              return this.shadowRoot;
+            if (r === "light")
+              return this;
+            if (r === "all")
+              return this.shadowRoot || this;
+            return this.shadowRoot || this;
+          };
+          if (pos === "remove") {
+            if (res) {
+              if (selector === ":host" || !selector) {
+                if (r === "shadow" && this.shadowRoot) {
+                  this.shadowRoot.replaceChildren();
+                } else {
+                  this.remove();
+                }
+              } else {
+                const targetRoot = getTargetRoot();
+                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" || !selector) {
+              if (r === "shadow") {
+                targetEl = this.shadowRoot;
+              } else {
+                targetEl = this;
+              }
             } 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 = getTargetRoot();
+              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);
+              }
             }
           }
         }
@@ -6228,6 +6285,24 @@ var dooboostoreSimpleWebComponent = (() => {
   function applyNodeHost(options = { position: "beforeEnd" }) {
     return applyNode(":host", options);
   }
+  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");
@@ -6435,7 +6510,7 @@ var dooboostoreSimpleWebComponent = (() => {
   // 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 +6518,39 @@ 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 = [];
+            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 {
+              if (r === "shadow") {
+                const found = this.shadowRoot?.querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              } else if (r === "light") {
+                const found = this.querySelectorAll(selector);
+                if (found) targetEls.push(...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);
+              } else {
+                const found = (this.shadowRoot || this).querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              }
+            }
+            targetEls.forEach((targetEl) => {
               if (action === "set") {
                 let classes = "";
                 if (typeof res === "object" && res !== null && !Array.isArray(res)) {
@@ -6483,23 +6578,23 @@ 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);
+  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);
   var findAllClassListMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(CLASS_LIST_METADATA_KEY, target);
@@ -6514,7 +6609,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 +6617,39 @@ 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 = [];
+            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 {
+              if (r === "shadow") {
+                const found = this.shadowRoot?.querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              } else if (r === "light") {
+                const found = this.querySelectorAll(selector);
+                if (found) targetEls.push(...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);
+              } else {
+                const found = (this.shadowRoot || this).querySelectorAll(selector);
+                if (found) targetEls.push(...found);
+              }
+            }
+            targetEls.forEach((targetEl) => {
               if (action === "set") {
                 targetEl.style.cssText = "";
                 if (typeof res === "object" && res !== null) {
@@ -6550,16 +6665,19 @@ 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);
+  var setStyleHost = (options = {}) => createStyleDecorator("set")(":host", options);
+  var updateStyle = (selector, options = {}) => createStyleDecorator("update")(selector, options);
+  var updateStyleHost = (options = {}) => createStyleDecorator("update")(":host", options);
+  var removeStyle = (selector, options = {}) => createStyleDecorator("remove")(selector, options);
+  var removeStyleHost = (options = {}) => createStyleDecorator("remove")(":host", options);
   var findAllStyleMetadata = (target) => {
     const result = /* @__PURE__ */ new Map();
     const maps = ReflectUtils.findAllMetadata(STYLE_METADATA_KEY, target);
@@ -8106,6 +8224,10 @@ var dooboostoreSimpleWebComponent = (() => {
       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;
@@ -8138,6 +8260,7 @@ var dooboostoreSimpleWebComponent = (() => {
   })(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;