@dooboostore/simple-web-component 1.0.22 → 1.0.23

package/src/decorators/style.ts

@@ -1,19 +1,24 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions } from '../types';
 
 export type StyleAction = 'set' | 'update' | 'remove';
 
+export interface StyleOptions extends SwcQueryOptions {
+}
+
 export interface StyleMetadata {
   propertyKey: string | symbol;
   selector: string;
   action: StyleAction;
+  options: StyleOptions;
 }
 
 export const STYLE_METADATA_KEY = Symbol('simple-web-component:style');
 
 function createStyleDecorator(action: StyleAction) {
-  return (selector: string): MethodDecorator => {
+  return (selector: string, options: StyleOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleMetadata>;
@@ -21,21 +26,43 @@ function createStyleDecorator(action: StyleAction) {
         metaList = new Map<string | symbol, StyleMetadata>();
         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: any[]) {
         ensureInit(this);
         const res = await original.apply(this, args);
         if (res !== undefined) {
+          const r = options.root || 'auto';
           const hostSet = SwcUtils.getHostSet(this as any);
-          let targetEl: HTMLElement | null = null;
-          if (selector === ':host' || !selector) targetEl = this as any;
-          else if (selector === ':parentHost') targetEl = hostSet.$parentHost;
-          else if (selector === ':appHost') targetEl = hostSet.$appHost;
-          else targetEl = (this.shadowRoot || (this as any)).querySelector(selector);
+          const targetEls: HTMLElement[] = [];
+
+          if (selector === ':host' || !selector) {
+            targetEls.push(this as any);
+          } 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 as any).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            } else if (r === 'all') {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = (this as any).querySelectorAll(selector);
+              if (sFound) targetEls.push(...sFound);
+              if (lFound) targetEls.push(...lFound);
+            } else {
+              // auto
+              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
+              if (found) targetEls.push(...found);
+            }
+          }
 
-          if (targetEl) {
+          targetEls.forEach(targetEl => {
             if (action === 'set') {
               targetEl.style.cssText = '';
               if (typeof res === 'object' && res !== null) {
@@ -49,9 +76,9 @@ function createStyleDecorator(action: StyleAction) {
               }
             } else if (action === 'remove') {
               const props = Array.isArray(res) ? res : [res];
-              props.forEach(p => targetEl!.style.removeProperty(String(p)));
+              props.forEach(p => targetEl.style.removeProperty(String(p)));
             }
-          }
+          });
         }
         return res;
       };
@@ -62,20 +89,44 @@ function createStyleDecorator(action: StyleAction) {
 /**
  * @setStyle decorator to surgically set styles on a target element (replaces all existing styles).
  * Usage: @setStyle('#box') getStyles() { return { color: 'red', display: 'block' }; }
+ * Usage: @setStyle('#box', { root: 'shadow' }) getStyles() { return { color: 'red' }; }
  */
-export const setStyle = createStyleDecorator('set');
+export const setStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('set')(selector, options);
+
+/**
+ * @setStyleHost decorator - simplified version of @setStyle for :host selector.
+ * Usage: @setStyleHost getStyles() { return { color: 'red', display: 'block' }; }
+ * Usage: @setStyleHost({ root: 'shadow' }) getStyles() { return { color: 'red' }; }
+ */
+export const setStyleHost = (options: StyleOptions = {}) => createStyleDecorator('set')(':host', options);
 
 /**
  * @updateStyle decorator to surgically update styles on a target element (merges with existing styles).
  * Usage: @updateStyle('#box') updateStyles() { return { color: 'blue' }; }
+ * Usage: @updateStyle('#box', { root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
+ */
+export const updateStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('update')(selector, options);
+
+/**
+ * @updateStyleHost decorator - simplified version of @updateStyle for :host selector.
+ * Usage: @updateStyleHost updateStyles() { return { color: 'blue' }; }
+ * Usage: @updateStyleHost({ root: 'shadow' }) updateStyles() { return { color: 'blue' }; }
  */
-export const updateStyle = createStyleDecorator('update');
+export const updateStyleHost = (options: StyleOptions = {}) => createStyleDecorator('update')(':host', options);
 
 /**
  * @removeStyle decorator to surgically remove styles from a target element.
  * Usage: @removeStyle('#box') clearStyles() { return ['color', 'display']; }
+ * Usage: @removeStyle('#box', { root: 'shadow' }) clearStyles() { return ['color']; }
+ */
+export const removeStyle = (selector: string, options: StyleOptions = {}) => createStyleDecorator('remove')(selector, options);
+
+/**
+ * @removeStyleHost decorator - simplified version of @removeStyle for :host selector.
+ * Usage: @removeStyleHost clearStyles() { return ['color', 'display']; }
+ * Usage: @removeStyleHost({ root: 'shadow' }) clearStyles() { return ['color']; }
  */
-export const removeStyle = createStyleDecorator('remove');
+export const removeStyleHost = (options: StyleOptions = {}) => createStyleDecorator('remove')(':host', options);
 
 export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleMetadata> => {
   const result = new Map<string | symbol, StyleMetadata>();

package/src/utils/TemplateUtils.ts

@@ -22,6 +22,14 @@ export namespace TemplateUtils {
     return document.createTextNode(raw);
   };
 
+  /**
+   * Tagged template function to create a Comment node from string.
+   */
+  export const commentNode = (strings: TemplateStringsArray, ...values: any[]): Comment => {
+    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
+    return document.createComment(raw);
+  };
+
   /**
    * Generic element creator using a configuration object and attribute map.
    */
@@ -64,6 +72,7 @@ export namespace TemplateUtils {
 
 export const htmlFragment = TemplateUtils.htmlFragment;
 export const textNode = TemplateUtils.textNode;
+export const commentNode = TemplateUtils.commentNode;
 export const createElement = TemplateUtils.createElement;
 export const htmlDivElement = TemplateUtils.htmlDivElement;
 export const htmlSpanElement = TemplateUtils.htmlSpanElement;

package/dist/cjs/decorators/onConnectedInnerHtml.js

@@ -1,48 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var onConnectedInnerHtml_exports = {};
-__export(onConnectedInnerHtml_exports, {
-  INNER_HTML_METADATA_KEY: () => INNER_HTML_METADATA_KEY,
-  getOnConnectedInnerHtmlMetadata: () => getOnConnectedInnerHtmlMetadata,
-  onConnectedInnerHtml: () => onConnectedInnerHtml
-});
-module.exports = __toCommonJS(onConnectedInnerHtml_exports);
-var import_core = require("@dooboostore/core");
-const 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 = import_core.ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-    if (!list) {
-      list = [];
-      import_core.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);
-  };
-}
-const getOnConnectedInnerHtmlMetadata = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return import_core.ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-};
-//# sourceMappingURL=onConnectedInnerHtml.js.map

package/dist/cjs/decorators/onConnectedInnerHtml.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/onConnectedInnerHtml.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\n\nexport interface InnerHtmlOptions {\n  useShadow?: boolean;\n}\n\nexport interface InnerHtmlMetadata {\n  propertyKey: string | symbol;\n  options: InnerHtmlOptions;\n}\n\nexport const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');\n\n/**\n * @onConnectedInnerHtml decorator to define the initial HTML content when connected.\n */\nexport function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;\nexport function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;\nexport function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {\n  const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n  };\n\n  if (arg2) {\n    return decorator({}, arg1!, arg2);\n  }\n\n  return (target: Object, propertyKey: string | symbol) => {\n    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);\n  };\n}\n\nexport const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAWtB,MAAM,0BAA0B,OAAO,iCAAiC;AAOxE,SAAS,qBAAqB,MAAkC,MAAwB,MAAmD;AAChJ,QAAM,YAAY,CAAC,SAA2B,QAAgB,gBAAiC;AAC7F,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,yBAAa,YAAiC,yBAAyB,WAAW;AAC7F,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,+BAAa,eAAe,yBAAyB,MAAM,WAAW;AAAA,IACxE;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAAA,EACpC;AAEA,MAAI,MAAM;AACR,WAAO,UAAU,CAAC,GAAG,MAAO,IAAI;AAAA,EAClC;AAEA,SAAO,CAAC,QAAgB,gBAAiC;AACvD,cAAW,QAA6B,CAAC,GAAG,QAAQ,WAAW;AAAA,EACjE;AACF;AAEO,MAAM,kCAAkC,CAAC,WAAiD;AAC/F,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,yBAAyB,WAAW;AACtE;",
-  "names": []
-}

package/dist/esm/decorators/onConnectedInnerHtml.js

@@ -1,29 +0,0 @@
-import { ReflectUtils } from "@dooboostore/core";
-const 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);
-  };
-}
-const getOnConnectedInnerHtmlMetadata = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-};
-export {
-  INNER_HTML_METADATA_KEY,
-  getOnConnectedInnerHtmlMetadata,
-  onConnectedInnerHtml
-};
-//# sourceMappingURL=onConnectedInnerHtml.js.map

package/dist/esm/decorators/onConnectedInnerHtml.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/onConnectedInnerHtml.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\n\nexport interface InnerHtmlOptions {\n  useShadow?: boolean;\n}\n\nexport interface InnerHtmlMetadata {\n  propertyKey: string | symbol;\n  options: InnerHtmlOptions;\n}\n\nexport const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');\n\n/**\n * @onConnectedInnerHtml decorator to define the initial HTML content when connected.\n */\nexport function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;\nexport function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;\nexport function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {\n  const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);\n    if (!list) {\n      list = [];\n      ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);\n    }\n    list.push({ propertyKey, options });\n  };\n\n  if (arg2) {\n    return decorator({}, arg1!, arg2);\n  }\n\n  return (target: Object, propertyKey: string | symbol) => {\n    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);\n  };\n}\n\nexport const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);\n};\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AAWtB,MAAM,0BAA0B,OAAO,iCAAiC;AAOxE,SAAS,qBAAqB,MAAkC,MAAwB,MAAmD;AAChJ,QAAM,YAAY,CAAC,SAA2B,QAAgB,gBAAiC;AAC7F,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,aAAa,YAAiC,yBAAyB,WAAW;AAC7F,QAAI,CAAC,MAAM;AACT,aAAO,CAAC;AACR,mBAAa,eAAe,yBAAyB,MAAM,WAAW;AAAA,IACxE;AACA,SAAK,KAAK,EAAE,aAAa,QAAQ,CAAC;AAAA,EACpC;AAEA,MAAI,MAAM;AACR,WAAO,UAAU,CAAC,GAAG,MAAO,IAAI;AAAA,EAClC;AAEA,SAAO,CAAC,QAAgB,gBAAiC;AACvD,cAAW,QAA6B,CAAC,GAAG,QAAQ,WAAW;AAAA,EACjE;AACF;AAEO,MAAM,kCAAkC,CAAC,WAAiD;AAC/F,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,yBAAyB,WAAW;AACtE;",
-  "names": []
-}

package/dist/types/decorators/onConnectedInnerHtml.d.ts

@@ -1,15 +0,0 @@
-export interface InnerHtmlOptions {
-    useShadow?: boolean;
-}
-export interface InnerHtmlMetadata {
-    propertyKey: string | symbol;
-    options: InnerHtmlOptions;
-}
-export declare const INNER_HTML_METADATA_KEY: unique symbol;
-/**
- * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
- */
-export declare function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
-export declare function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export declare const getOnConnectedInnerHtmlMetadata: (target: any) => InnerHtmlMetadata[] | undefined;
-//# sourceMappingURL=onConnectedInnerHtml.d.ts.map

package/dist/types/decorators/onConnectedInnerHtml.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"onConnectedInnerHtml.d.ts","sourceRoot":"","sources":["../../../src/decorators/onConnectedInnerHtml.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,eAA4C,CAAC;AAEjF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAAC;AACjF,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,kBAAkB,GAAG,IAAI,CAAC;AAqBzH,eAAO,MAAM,+BAA+B,GAAI,QAAQ,GAAG,KAAG,iBAAiB,EAAE,GAAG,SAGnF,CAAC"}

package/src/decorators/onConnectedInnerHtml.ts

@@ -1,42 +0,0 @@
-import { ReflectUtils } from '@dooboostore/core';
-
-export interface InnerHtmlOptions {
-  useShadow?: boolean;
-}
-
-export interface InnerHtmlMetadata {
-  propertyKey: string | symbol;
-  options: InnerHtmlOptions;
-}
-
-export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
-
-/**
- * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
- */
-export function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
-export function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
-  const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(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: Object, propertyKey: string | symbol) => {
-    decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
-  };
-}
-
-export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
-};