@dooboostore/simple-web-component 1.0.22 → 1.0.24

package/src/decorators/style.ts

@@ -1,19 +1,23 @@
 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 +25,59 @@ 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[] = [];
+
+          const applyRoot = (t: any) => {
+            if (!t || !(t instanceof HTMLElement)) return;
+            if (r === 'auto') {
+              // Styles belong to the ELEMENT, not the ShadowRoot.
+              targetEls.push(t);
+            } else {
+              if (r === 'light' || r === 'all') targetEls.push(t);
+              if ((r === 'shadow' || r === 'all') && t.shadowRoot) {
+                // ShadowRoot doesn't have a style property, so we skip it.
+              }
+            }
+          };
+
+          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) as HTMLElement[]));
+            } else if (r === 'light') {
+              const found = (this as any).querySelectorAll(selector);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+            } else if (r === 'all') {
+              const sFound = this.shadowRoot?.querySelectorAll(selector);
+              const lFound = (this as any).querySelectorAll(selector);
+              if (sFound) targetEls.push(...(Array.from(sFound) as HTMLElement[]));
+              if (lFound) targetEls.push(...(Array.from(lFound) as HTMLElement[]));
+            } else {
+              // auto
+              const found = (this.shadowRoot || (this as any)).querySelectorAll(selector);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+            }
+          }
 
-          if (targetEl) {
+          targetEls.forEach(targetEl => {
             if (action === 'set') {
               targetEl.style.cssText = '';
               if (typeof res === 'object' && res !== null) {
@@ -49,9 +91,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 +104,74 @@ 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 = (selector: string, options: StyleOptions = {}) => createStyleDecorator('set')(selector, options);
+
+/**
+ * @setStyleHost decorator - simplified version of @setStyle for :host selector.
+ * Usage: @setStyleHost setHostStyle() { return { color: 'red' }; }
+ * Usage: @setStyleHost() setHostStyle() { return { color: 'red' }; }
+ * Usage: @setStyleHost({ ... }) setHostStyle() { return { color: 'red' }; }
  */
-export const setStyle = createStyleDecorator('set');
+export function setStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function setStyleHost(): MethodDecorator;
+export function setStyleHost(options: StyleOptions): MethodDecorator;
+export function setStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createStyleDecorator('set')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator('set')(':host', (targetOrOptions as StyleOptions) || {});
+}
 
 /**
  * @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() updateStyles() { return { color: 'blue' }; }
+ * Usage: @updateStyleHost({ ... }) updateStyles() { return { color: 'blue' }; }
  */
-export const updateStyle = createStyleDecorator('update');
+export function updateStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function updateStyleHost(): MethodDecorator;
+export function updateStyleHost(options: StyleOptions): MethodDecorator;
+export function updateStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createStyleDecorator('update')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator('update')(':host', (targetOrOptions as StyleOptions) || {});
+}
 
 /**
  * @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 = createStyleDecorator('remove');
+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']; }
+ * Usage: @removeStyleHost() clearStyles() { return ['color']; }
+ * Usage: @removeStyleHost({ ... }) clearStyles() { return ['color']; }
+ */
+export function removeStyleHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
+export function removeStyleHost(): MethodDecorator;
+export function removeStyleHost(options: StyleOptions): MethodDecorator;
+export function removeStyleHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) {
+    const decorator = createStyleDecorator('remove')(':host', {});
+    return decorator(targetOrOptions, propertyKey, descriptor);
+  }
+  return createStyleDecorator('remove')(':host', (targetOrOptions as StyleOptions) || {});
+}
 
 export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleMetadata> => {
   const result = new Map<string | symbol, StyleMetadata>();

package/src/index.ts

@@ -10,18 +10,18 @@ export * from './types';
 
 // Utilities
 export * from './utils/Utils';
-export * from './utils/TemplateUtils';
 
 // Config
 export * from './config/config';
 
 // Registration Factory
-export default (w: Window, other?: ((w: Window) => ConstructorType<any>)[]): ConstructorType<any>[] => {
+export default (w: Window, other?: (((w: Window) => ConstructorType<any>) | any) []) => {
   registerAllElements(w);
   const r = other?.map(fn => {
-    const a = fn(w);
-    // console.log('l', fn, a)
-    return a;
+    if (typeof fn === 'function') {
+      const a = fn(w);
+    } else {
+    }
   });
-  return r??[];
+  // return r??[];
 };

package/src/utils/Utils.ts

@@ -3,6 +3,150 @@ import {getElementConfig} from "../decorators";
 
 export const SWC_NOT_FOUND = Symbol('SWC_NOT_FOUND');
 
+// DOM Creation Utilities
+export const htmlFragment = (html: string, doc?: Document): DocumentFragment => {
+  const d = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const template = d.createElement('template');
+  template.innerHTML = html.trim();
+  return template.content;
+};
+
+export const textNode = (text: string | any, doc?: Document): Text => {
+  const d = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  return d.createTextNode(text !== undefined && text !== null ? String(text) : '');
+};
+
+export const commentNode = (comment: string | any, doc?: Document): Comment => {
+  const d = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  return d.createComment(comment !== undefined && comment !== null ? String(comment) : '');
+};
+
+export const createElement = <T extends HTMLElement>(
+  tagName: string,
+  options?: { html?: string; attrs?: Record<string, any>; doc?: Document }
+): T => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement(tagName) as T;
+  if (options?.html) el.innerHTML = options.html;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+// Element factory functions
+export const htmlDivElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLDivElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('div') as HTMLDivElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlSpanElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLSpanElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('span') as HTMLSpanElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlButtonElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLButtonElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('button') as HTMLButtonElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlUlElement = (options?: { doc?: Document; attrs?: Record<string, any> }): HTMLUListElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('ul') as HTMLUListElement;
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlLiElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLLIElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('li') as HTMLLIElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlAElement = (html: string, options?: { href?: string; doc?: Document; attrs?: Record<string, any> }): HTMLAnchorElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('a') as HTMLAnchorElement;
+  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;
+};
+
+export const htmlPElement = (html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLParagraphElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement('p') as HTMLParagraphElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlHeadingElement = (level: 1 | 2 | 3 | 4 | 5 | 6, html: string, options?: { doc?: Document; attrs?: Record<string, any> }): HTMLHeadingElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  if (!d) throw new Error('Document is not available');
+  const el = d.createElement(`h${level}`) as HTMLHeadingElement;
+  el.innerHTML = html.trim();
+  if (options?.attrs) {
+    Object.entries(options.attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
+  }
+  return el;
+};
+
+export const htmlSectionElement = (options?: { doc?: Document; attrs?: Record<string, any> }): HTMLElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  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;
+};
+
+export const htmlArticleElement = (options?: { doc?: Document; attrs?: Record<string, any> }): HTMLElement => {
+  const d = options?.doc || (typeof document !== 'undefined' ? document : undefined);
+  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;
+};
+
 export namespace SwcUtils {
   export const getHelperSet = (win: Window): HelperSet => {
     const doc: Document = win.document;

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/cjs/utils/TemplateUtils.js

@@ -1,103 +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 TemplateUtils_exports = {};
-__export(TemplateUtils_exports, {
-  TemplateUtils: () => TemplateUtils,
-  createElement: () => createElement,
-  htmlAElement: () => htmlAElement,
-  htmlArticleElement: () => htmlArticleElement,
-  htmlButtonElement: () => htmlButtonElement,
-  htmlDivElement: () => htmlDivElement,
-  htmlFragment: () => htmlFragment,
-  htmlH1Element: () => htmlH1Element,
-  htmlH2Element: () => htmlH2Element,
-  htmlH3Element: () => htmlH3Element,
-  htmlH4Element: () => htmlH4Element,
-  htmlH5Element: () => htmlH5Element,
-  htmlH6Element: () => htmlH6Element,
-  htmlInputElement: () => htmlInputElement,
-  htmlLiElement: () => htmlLiElement,
-  htmlPElement: () => htmlPElement,
-  htmlSectionElement: () => htmlSectionElement,
-  htmlSpanElement: () => htmlSpanElement,
-  htmlUlElement: () => htmlUlElement,
-  textNode: () => textNode
-});
-module.exports = __toCommonJS(TemplateUtils_exports);
-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 = {}));
-const htmlFragment = TemplateUtils.htmlFragment;
-const textNode = TemplateUtils.textNode;
-const createElement = TemplateUtils.createElement;
-const htmlDivElement = TemplateUtils.htmlDivElement;
-const htmlSpanElement = TemplateUtils.htmlSpanElement;
-const htmlButtonElement = TemplateUtils.htmlButtonElement;
-const htmlUlElement = TemplateUtils.htmlUlElement;
-const htmlLiElement = TemplateUtils.htmlLiElement;
-const htmlInputElement = TemplateUtils.htmlInputElement;
-const htmlAElement = TemplateUtils.htmlAElement;
-const htmlPElement = TemplateUtils.htmlPElement;
-const htmlH1Element = TemplateUtils.htmlH1Element;
-const htmlH2Element = TemplateUtils.htmlH2Element;
-const htmlH3Element = TemplateUtils.htmlH3Element;
-const htmlH4Element = TemplateUtils.htmlH4Element;
-const htmlH5Element = TemplateUtils.htmlH5Element;
-const htmlH6Element = TemplateUtils.htmlH6Element;
-const htmlSectionElement = TemplateUtils.htmlSectionElement;
-const htmlArticleElement = TemplateUtils.htmlArticleElement;
-//# sourceMappingURL=TemplateUtils.js.map

package/dist/cjs/utils/TemplateUtils.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/utils/TemplateUtils.ts"],
-  "sourcesContent": ["export interface CreateElementInfo {\n  tagName: string;\n  innerHtml?: string;\n}\n\nexport namespace TemplateUtils {\n  /**\n   * Tagged template function to create a DocumentFragment from HTML string.\n   */\n  export const htmlFragment = (strings: TemplateStringsArray, ...values: any[]): DocumentFragment => {\n    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n    const template = document.createElement('template');\n    template.innerHTML = raw.trim();\n    return template.content;\n  };\n\n  /**\n   * Tagged template function to create a Text node from string.\n   */\n  export const textNode = (strings: TemplateStringsArray, ...values: any[]): Text => {\n    const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n    return document.createTextNode(raw);\n  };\n\n  /**\n   * Generic element creator using a configuration object and attribute map.\n   */\n  export const createElement = <T extends HTMLElement>(info: CreateElementInfo, attrs: Record<string, any> = {}): T => {\n    const el = document.createElement(info.tagName) as T;\n    if (info.innerHtml !== undefined) el.innerHTML = info.innerHtml;\n    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));\n    return el;\n  };\n\n  /**\n   * Internal factory to create tagged template functions for specific HTML elements.\n   */\n  const createTagFunction = <T extends HTMLElement>(tagName: string) => {\n    return (strings: TemplateStringsArray, ...values: any[]): T => {\n      const el = document.createElement(tagName) as T;\n      el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n      return el;\n    };\n  };\n\n  // Specific Element Factories\n  export const htmlDivElement = createTagFunction<HTMLDivElement>('div');\n  export const htmlSpanElement = createTagFunction<HTMLSpanElement>('span');\n  export const htmlButtonElement = createTagFunction<HTMLButtonElement>('button');\n  export const htmlUlElement = createTagFunction<HTMLUListElement>('ul');\n  export const htmlLiElement = createTagFunction<HTMLLIElement>('li');\n  export const htmlInputElement = createTagFunction<HTMLInputElement>('input');\n  export const htmlAElement = createTagFunction<HTMLAnchorElement>('a');\n  export const htmlPElement = createTagFunction<HTMLParagraphElement>('p');\n  export const htmlH1Element = createTagFunction<HTMLHeadingElement>('h1');\n  export const htmlH2Element = createTagFunction<HTMLHeadingElement>('h2');\n  export const htmlH3Element = createTagFunction<HTMLHeadingElement>('h3');\n  export const htmlH4Element = createTagFunction<HTMLHeadingElement>('h4');\n  export const htmlH5Element = createTagFunction<HTMLHeadingElement>('h5');\n  export const htmlH6Element = createTagFunction<HTMLHeadingElement>('h6');\n  export const htmlSectionElement = createTagFunction<HTMLElement>('section');\n  export const htmlArticleElement = createTagFunction<HTMLElement>('article');\n}\n\nexport const htmlFragment = TemplateUtils.htmlFragment;\nexport const textNode = TemplateUtils.textNode;\nexport const createElement = TemplateUtils.createElement;\nexport const htmlDivElement = TemplateUtils.htmlDivElement;\nexport const htmlSpanElement = TemplateUtils.htmlSpanElement;\nexport const htmlButtonElement = TemplateUtils.htmlButtonElement;\nexport const htmlUlElement = TemplateUtils.htmlUlElement;\nexport const htmlLiElement = TemplateUtils.htmlLiElement;\nexport const htmlInputElement = TemplateUtils.htmlInputElement;\nexport const htmlAElement = TemplateUtils.htmlAElement;\nexport const htmlPElement = TemplateUtils.htmlPElement;\nexport const htmlH1Element = TemplateUtils.htmlH1Element;\nexport const htmlH2Element = TemplateUtils.htmlH2Element;\nexport const htmlH3Element = TemplateUtils.htmlH3Element;\nexport const htmlH4Element = TemplateUtils.htmlH4Element;\nexport const htmlH5Element = TemplateUtils.htmlH5Element;\nexport const htmlH6Element = TemplateUtils.htmlH6Element;\nexport const htmlSectionElement = TemplateUtils.htmlSectionElement;\nexport const htmlArticleElement = TemplateUtils.htmlArticleElement;\n"],
-  "mappings": "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",
-  "names": ["TemplateUtils"]
-}

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": []
-}