@dooboostore/simple-web-component 1.0.47 → 1.0.49

package/src/examples/RxJSOperatorsExample.ts

@@ -0,0 +1,279 @@
+/**
+ * Example: Using RxJS-like Operators with @addEventListener
+ * 
+ * This example demonstrates how to use debounceTime, throttleTime, and distinctUntilChanged
+ * operators with the @addEventListener decorator.
+ */
+
+import { elementDefine, addEventListener } from '../decorators';
+
+/**
+ * Example 1: Search Component with Debounce
+ * 
+ * Waits 1 second after user stops typing before performing search.
+ * Prevents excessive API calls during typing.
+ */
+@elementDefine('search-component')
+export class SearchComponent extends HTMLElement {
+  private results: any[] = [];
+
+  @addEventListener('$this', 'input', { debounceTime: 1000 })
+  async onSearchInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const query = input.value.trim();
+
+    if (query.length > 2) {
+      try {
+        // Simulate API call
+        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+        this.results = await response.json();
+        this.renderResults();
+      } catch (error) {
+        console.error('Search failed:', error);
+      }
+    } else {
+      this.results = [];
+      this.renderResults();
+    }
+  }
+
+  private renderResults() {
+    // Render search results
+    console.log('Rendering results:', this.results);
+  }
+}
+
+/**
+ * Example 2: Window Resize Handler with Throttle
+ * 
+ * Recalculates layout at most 4 times per second (every 250ms).
+ * Prevents performance issues from excessive resize calculations.
+ */
+@elementDefine('responsive-layout')
+export class ResponsiveLayout extends HTMLElement {
+  @addEventListener('$window', 'resize', { throttleTime: 250 })
+  onWindowResize(event: Event) {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    console.log(`Window resized to: ${width}x${height}`);
+    this.updateLayout(width, height);
+  }
+
+  private updateLayout(width: number, height: number) {
+    // Update layout based on new dimensions
+    if (width < 768) {
+      this.classList.add('mobile');
+      this.classList.remove('desktop');
+    } else {
+      this.classList.add('desktop');
+      this.classList.remove('mobile');
+    }
+  }
+}
+
+/**
+ * Example 3: Form Input with Debounce + Distinct
+ * 
+ * Validates field only when:
+ * 1. User stops typing (debounce 300ms)
+ * 2. AND the value actually changed (distinct)
+ */
+@elementDefine('form-input')
+export class FormInput extends HTMLElement {
+  @addEventListener('$this', 'input', {
+    debounceTime: 300,
+    distinctUntilChanged: true
+  })
+  onFormInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const fieldName = input.name;
+    const value = input.value;
+
+    console.log(`Validating ${fieldName}: ${value}`);
+    this.validateField(fieldName, value);
+  }
+
+  private validateField(name: string, value: string) {
+    // Perform validation
+    const isValid = value.length > 0;
+    console.log(`Field ${name} is ${isValid ? 'valid' : 'invalid'}`);
+  }
+}
+
+/**
+ * Example 4: Scroll Event with Throttle
+ * 
+ * Checks if user scrolled to bottom at most 10 times per second.
+ * Prevents excessive "load more" API calls.
+ */
+@elementDefine('infinite-scroll')
+export class InfiniteScroll extends HTMLElement {
+  private isLoading = false;
+
+  @addEventListener('$window', 'scroll', { throttleTime: 100 })
+  onScroll(event: Event) {
+    if (this.isLoading) return;
+
+    if (this.isNearBottom()) {
+      console.log('Near bottom, loading more content...');
+      this.loadMoreContent();
+    }
+  }
+
+  private isNearBottom(): boolean {
+    const scrollTop = window.scrollY;
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight;
+
+    return scrollTop + windowHeight >= documentHeight - 500;
+  }
+
+  private async loadMoreContent() {
+    this.isLoading = true;
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      console.log('Content loaded');
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}
+
+/**
+ * Example 5: Custom Comparison with Distinct
+ * 
+ * Only fires when the input value length changes.
+ * Ignores changes that don't affect the length.
+ */
+@elementDefine('length-tracker')
+export class LengthTracker extends HTMLElement {
+  @addEventListener('$this', 'input', {
+    distinctUntilChanged: (prev: any, curr: any) => {
+      // Only consider it changed if the length differs
+      return prev?.length === curr?.length;
+    }
+  })
+  onInputChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const length = input.value.length;
+
+    console.log(`Input length changed to: ${length}`);
+    this.updateLengthDisplay(length);
+  }
+
+  private updateLengthDisplay(length: number) {
+    // Update UI with new length
+    const display = this.querySelector('.length-display');
+    if (display) {
+      display.textContent = `${length} characters`;
+    }
+  }
+}
+
+/**
+ * Example 6: Complex Scenario - Auto-save with Multiple Operators
+ * 
+ * Combines debounce and distinct for intelligent auto-save:
+ * - Waits 2 seconds after user stops typing
+ * - Only saves if content actually changed
+ * - Prevents unnecessary save operations
+ */
+@elementDefine('auto-save-editor')
+export class AutoSaveEditor extends HTMLElement {
+  private lastSavedContent = '';
+
+  @addEventListener('$this', 'input', {
+    debounceTime: 2000,
+    distinctUntilChanged: (prev: any, curr: any) => {
+      // Consider changed if the content is different
+      return prev === curr;
+    }
+  })
+  async onContentChange(event: Event) {
+    const textarea = event.target as HTMLTextAreaElement;
+    const content = textarea.value;
+
+    if (content !== this.lastSavedContent) {
+      console.log('Auto-saving content...');
+      await this.saveContent(content);
+      this.lastSavedContent = content;
+    }
+  }
+
+  private async saveContent(content: string) {
+    try {
+      // Simulate API call
+      const response = await fetch('/api/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content })
+      });
+
+      if (response.ok) {
+        console.log('Content saved successfully');
+        this.showSaveIndicator();
+      }
+    } catch (error) {
+      console.error('Save failed:', error);
+    }
+  }
+
+  private showSaveIndicator() {
+    const indicator = this.querySelector('.save-indicator');
+    if (indicator) {
+      indicator.classList.add('show');
+      setTimeout(() => indicator.classList.remove('show'), 2000);
+    }
+  }
+}
+
+/**
+ * Example 7: Keyboard Shortcut Handler with Throttle
+ * 
+ * Prevents rapid repeated execution of keyboard shortcuts.
+ */
+@elementDefine('keyboard-handler')
+export class KeyboardHandler extends HTMLElement {
+  @addEventListener('$document', 'keydown', {
+    throttleTime: 500,
+    filter: (event: KeyboardEvent) => {
+      // Only handle Ctrl+S or Cmd+S
+      return (event.ctrlKey || event.metaKey) && event.key === 's';
+    }
+  })
+  onSaveShortcut(event: KeyboardEvent) {
+    event.preventDefault();
+    console.log('Save shortcut triggered');
+    this.handleSave();
+  }
+
+  private handleSave() {
+    // Handle save operation
+    console.log('Saving...');
+  }
+}
+
+/**
+ * Example 8: Mouse Move Tracking with Throttle
+ * 
+ * Tracks mouse position at most 10 times per second.
+ * Useful for analytics or interactive features.
+ */
+@elementDefine('mouse-tracker')
+export class MouseTracker extends HTMLElement {
+  @addEventListener('$document', 'mousemove', { throttleTime: 100 })
+  onMouseMove(event: MouseEvent) {
+    const x = event.clientX;
+    const y = event.clientY;
+
+    // Update cursor position indicator
+    this.updateCursorPosition(x, y);
+  }
+
+  private updateCursorPosition(x: number, y: number) {
+    // Update UI with cursor position
+    console.log(`Cursor at: ${x}, ${y}`);
+  }
+}

package/src/types/index.ts

@@ -44,6 +44,11 @@ export type HostSet = {
 
 export type HelperHostSet = HelperSet & HostSet & {$this: any};
 
+// 공통 셀렉터 함수 — 요소/노드를 직접 반환하는 함수 셀렉터 (query는 Node까지 반환 가능)
+export type SwcFnSelector = (currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null;
+// 공통 셀렉터 — 문자열(CSS/특수) 또는 함수
+export type SwcSelector = string | SwcFnSelector;
+
 export type SwcAppMessage<T = any> = {
   publisher?: any;
   data?: T;
@@ -71,4 +76,140 @@ export interface SwcElement {
   // createEaAttribute(id: string, attributeName: string): string
   // createEaEvent(id: string, eventName: string): string
   // createEaProperty(id: string, propertyName: string): string
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ElementDefineLifeCycler
+//
+// 각 데코레이터 파일(addEventListener, mutationObserver, …)이 이 interface를
+// 구현해 export 하고, elementDefine.ts는 cyclers 배열로 관리하며 위임만 한다.
+//
+// 시클러는 생성자에서 아무 인자도 받지 않는다. 상태는 인스턴스별로 관리해야 하므로,
+// 각 라이프사이클 훅(onConnected 등)의 첫 번째 인자로 HelperHostSet 을 받아
+// 그 안의 $this(현재 엘리먼트 인스턴스) / $w(window) 로 처리한다.
+// elementDefine 은 elementDefine 시점에 시클러를 1회 생성하고 계속 재사용한다.
+// 모든 메서드는 optional — 관심 있는 훅만 구현하면 된다.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ─────────────────────────────────────────────────────────────────────────────
+// onConnected 반환 타입
+//
+// 각 cycler 가 "필요한 observer 정보"를 선언하면,
+// elementDefine 이 수집해서 필요한 경우에만 observer 인스턴스를 생성한다.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** observer observe 대상 엔트리. delegate:true 이면 target 은 셀렉터 문자열이며, 실제 요소는 동적 추적으로 observe/unobserve 된다. */
+export interface ObserverObserveTarget<TOptions> {
+  target: Element | ShadowRoot | string;
+  options?: TOptions;
+  delegate?: boolean;
+  /** delegate 동적 추적 시 observe/unobserve 를 실행할 루트(스코프). delegate:true 일 때만 의미 있다. */
+  delegateRoot?: SwcRootType;
+}
+
+/** MutationObserver observe 대상 하나. 동일 루트의 여러 대상은 같은 callback 을 공유한다. */
+export interface MutationObserverSetEntry {
+  target: Element | ShadowRoot | string;
+  options?: MutationObserverInit;
+  delegate?: boolean;
+  delegateRoot?: SwcRootType;
+  callback: (mutations: MutationRecord[], observer: MutationObserver) => void;
+}
+
+/** observe 할 대상 목록 (엔트리별 콜백 포함). elementDefine 이 하나의 MutationObserver 로 모두 observe 한다. */
+export type MutationObserverSet = MutationObserverSetEntry[];
+
+/** ResizeObserver observe 대상 하나. 동일 셀렉터의 여러 대상은 같은 callback 을 공유한다. */
+export interface ResizeObserverSetEntry {
+  target: Element | ShadowRoot | string;
+  options?: ResizeObserverOptions;
+  delegate?: boolean;
+  delegateRoot?: SwcRootType;
+  callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
+}
+
+/** observe 할 대상 목록 (엔트리별 콜백 포함). elementDefine 이 하나의 ResizeObserver 로 모두 observe 한다. */
+export type ResizeObserverSet = ResizeObserverSetEntry[];
+
+/** IntersectionObserver observe 대상 하나. 같은 옵션 그룹의 여러 대상은 같은 callback 을 공유한다. */
+export interface IntersectionObserverSetEntry {
+  target: Element | ShadowRoot | string;
+  delegate?: boolean;
+  delegateRoot?: SwcRootType;
+  callback: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void;
+}
+
+/** IntersectionObserver 그룹. observer 는 생성 시점에 옵션이 고정되므로 옵션별로 1개씩 생성된다. */
+export interface IntersectionObserverGroup {
+  /** observer 생성 옵션 (threshold/rootMargin/root). 이 값이 같으면 같은 observer 를 공유한다. */
+  options: IntersectionObserverInit;
+  observeTargets: IntersectionObserverSetEntry[];
+}
+
+/** observe 할 옵션 그룹 목록. elementDefine 이 그룹마다 IntersectionObserver 를 생성한다. */
+export type IntersectionObserverSet = IntersectionObserverGroup[];
+
+/**
+ * onConnected 의 반환 타입.
+ * observer 가 필요 없는 cycler 는 undefined 를 반환해도 된다.
+ */
+export interface OnConnectedResult {
+  mutationObserverSet?: MutationObserverSet;
+  resizeObserverSet?: ResizeObserverSet;
+  intersectionObserverSet?: IntersectionObserverSet;
+}
+
+/**
+ * 각 데코레이터 파일이 구현하는 라이프사이클 위임 interface.
+ *
+ * 구현체는 상태를 갖지 않고, 각 훅의 첫 번째 인자로 HelperHostSet 을 받는다.
+ * 관심 있는 훅만 구현하면 된다 (전부 optional).
+ *
+ * ```ts
+ * const eventCycler = new EventListenerLifeCycler();
+ * const cyclers: ElementDefineLifeCycler[] = [eventCycler, ...];   // elementDefine 시 1회 생성
+ *
+ * proto.connectedCallback = async function () {
+ *   const helperHostSet = SwcUtils.getHelperAndHostSet(win, this);
+ *   const results = await Promise.all(cyclers.map(c => c.onConnected?.(helperHostSet)));
+ *   // results 에서 mutationObserverSet / resizeObserverSet 수집
+ *   // → 필요한 경우에만 MutationObserver / ResizeObserver 생성
+ * };
+ * proto.disconnectedCallback = function () {
+ *   for (const c of cyclers) c.onDisconnected?.(helperHostSet);
+ * };
+ * ```
+ */
+export interface ElementDefineLifeCycler {
+  /**
+   * connectedCallback 시 호출.
+   * observer 가 필요하면 OnConnectedResult 를 반환하고,
+   * 필요 없으면 void / undefined 를 반환한다.
+   * @param helperHostSet 현재 엘리먼트 인스턴스($this)를 포함한 컨텍스트
+   * @param resizeObserverSet 이전 시클러가 반환한 resize observer set (mutation 시클러가 주입받아 사용)
+   */
+  onConnected?(helperHostSet: HelperHostSet, resizeObserverSet?: ResizeObserverSet): OnConnectedResult | void | Promise<OnConnectedResult | void>;
+
+  /** disconnectedCallback 시 호출. 등록한 리소스를 해제한다. */
+  onDisconnected?(helperHostSet: HelperHostSet): void;
+
+  /** adoptedCallback 시 호출 (선택적). */
+  onAdopted?(helperHostSet: HelperHostSet): void;
+
+  /**
+   * attributeChangedCallback 시 호출 (선택적).
+   * @param helperHostSet 현재 엘리먼트 인스턴스($this)를 포함한 컨텍스트
+   * @param name    변경된 attribute 이름
+   * @param oldVal  이전 값
+   * @param newVal  새 값 (ActionExpression 처리 후)
+   */
+  onAttributeChanged?(helperHostSet: HelperHostSet, name: string, oldVal: string | null, newVal: any): void;
+
+  /**
+   * observedAttributes 에 포함해야 하는 attribute 이름 목록을 반환한다.
+   * elementDefine 이 define-time(constructor)에 호출해 수집한다.
+   * 관심 없으면 구현하지 않거나 빈 배열을 반환한다.
+   * @param target constructor 또는 element 인스턴스 (메타데이터 조회용)
+   */
+  getObservedAttributeNames?(target: any): string[];
 }

package/dist/cjs/decorators/queryAll.js

@@ -1,181 +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 queryAll_exports = {};
-__export(queryAll_exports, {
-  QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
-  getQueryAllMetadata: () => getQueryAllMetadata,
-  queryAll: () => queryAll
-});
-module.exports = __toCommonJS(queryAll_exports);
-var import_core = require("@dooboostore/core");
-var import_elementDefine = require("./elementDefine");
-var import_Utils = require("../utils/Utils");
-const QUERY_ALL_METADATA_KEY = Symbol.for("simple-web-component:query-all");
-function queryAll(selectorOrTarget, optionsOrPropertyKey, descriptor) {
-  if (descriptor !== void 0 && (typeof optionsOrPropertyKey === "string" || typeof optionsOrPropertyKey === "symbol")) {
-    throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
-  }
-  if (typeof selectorOrTarget === "string" || typeof selectorOrTarget === "function") {
-    return (targetObj, propertyKey, descriptor2) => {
-      if (descriptor2 !== void 0) {
-        throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
-      }
-      const constructor = targetObj.constructor;
-      let queries = import_core.ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
-      if (!queries) {
-        queries = [];
-        import_core.ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
-      }
-      queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey || {} });
-      Object.defineProperty(targetObj, propertyKey, {
-        get() {
-          (0, import_elementDefine.ensureInit)(this);
-          const config = (0, import_elementDefine.getElementConfig)(this);
-          const win = config?.window || window;
-          const hostSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
-          let resolvedSelector;
-          let resolvedElements = [];
-          if (typeof selectorOrTarget === "function") {
-            const result = selectorOrTarget(this, hostSet);
-            if (result instanceof win.NodeList) {
-              resolvedElements = Array.from(result).filter((el) => el instanceof win.HTMLElement);
-            } else if (Array.isArray(result)) {
-              resolvedElements = result.filter((el) => el instanceof win.HTMLElement);
-            }
-          } else {
-            resolvedSelector = selectorOrTarget;
-            const r = optionsOrPropertyKey?.root || "auto";
-            const applyRoot = (t) => {
-              if (!t)
-                return [];
-              const items = Array.isArray(t) ? t : [t];
-              const results = [];
-              items.forEach((it) => {
-                if (!(it instanceof HTMLElement)) {
-                  results.push(it);
-                  return;
-                }
-                if (r === "auto")
-                  results.push(it.shadowRoot || it);
-                else {
-                  if (r === "light" || r === "all")
-                    results.push(it);
-                  if ((r === "shadow" || r === "all") && it.shadowRoot)
-                    results.push(it.shadowRoot);
-                }
-              });
-              return results;
-            };
-            if (resolvedSelector === "$hosts")
-              resolvedElements = applyRoot(hostSet.$hosts).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$appHosts")
-              resolvedElements = applyRoot(hostSet.$appHosts).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$host")
-              resolvedElements = applyRoot(hostSet.$host).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$parentHost")
-              resolvedElements = applyRoot(hostSet.$parentHost).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$appHost")
-              resolvedElements = applyRoot(hostSet.$appHost).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$firstHost")
-              resolvedElements = applyRoot(hostSet.$firstHost).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$lastHost")
-              resolvedElements = applyRoot(hostSet.$lastHost).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$firstAppHost")
-              resolvedElements = applyRoot(hostSet.$firstAppHost).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$lastAppHost")
-              resolvedElements = applyRoot(hostSet.$lastAppHost).filter((el) => el instanceof HTMLElement);
-            else if (resolvedSelector === "$window")
-              return [win];
-            else if (resolvedSelector === "$document")
-              return [win.document];
-            else if (resolvedSelector === "$this")
-              resolvedElements = applyRoot(this).filter((el) => el instanceof HTMLElement);
-            else {
-              if (r === "shadow")
-                resolvedElements = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-              else if (r === "light")
-                resolvedElements = Array.from(this.querySelectorAll(resolvedSelector));
-              else if (r === "all") {
-                const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-                const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
-                resolvedElements = [...sNodes, ...lNodes];
-              } else
-                resolvedElements = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
-            }
-          }
-          if (optionsOrPropertyKey?.filter) {
-            resolvedElements = resolvedElements.filter((el) => {
-              if (!(el instanceof win.HTMLElement))
-                return true;
-              return optionsOrPropertyKey.filter(el, { currentThis: this, helper: hostSet });
-            });
-          }
-          return resolvedElements;
-        },
-        set(nv) {
-          (0, import_elementDefine.ensureInit)(this);
-          if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
-            const config = (0, import_elementDefine.getElementConfig)(this);
-            const win = config?.window || window;
-            const hostSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
-            if (typeof selectorOrTarget === "function") {
-              const result = selectorOrTarget(this, hostSet);
-              if (result instanceof win.NodeList) {
-                Array.from(result).forEach((el) => {
-                  if (el instanceof win.Element)
-                    el.remove();
-                });
-              } else if (Array.isArray(result)) {
-                result.forEach((el) => {
-                  if (el instanceof win.Element)
-                    el.remove();
-                });
-              }
-              return;
-            }
-            const resolvedSelector = selectorOrTarget;
-            if (resolvedSelector.startsWith("$") && resolvedSelector !== "$this")
-              return;
-            const r = optionsOrPropertyKey?.root || "auto";
-            let targets = [];
-            if (r === "shadow")
-              targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-            else if (r === "light")
-              targets = Array.from(this.querySelectorAll(resolvedSelector));
-            else if (r === "all") {
-              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
-              const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
-              targets = [...sNodes, ...lNodes];
-            } else {
-              targets = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
-            }
-            targets.forEach((t) => t.remove());
-          }
-        },
-        enumerable: true,
-        configurable: true
-      });
-    };
-  }
-  return queryAll("$this", selectorOrTarget);
-}
-const getQueryAllMetadata = (target) => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return import_core.ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
-};
-//# sourceMappingURL=queryAll.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/decorators/queryAll.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { getElementConfig, ensureInit } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\nimport { SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface QueryAllOptions extends SwcQueryOptions {\n  /**\n   * Filter function to determine whether to include the element.\n   * If it returns false, the element is skipped.\n   */\n  filter?: (target: HTMLElement, meta: { currentThis: any, helper: HelperHostSet }) => boolean;\n}\n\nexport interface QueryAllMetadata {\n  propertyKey: string | symbol;\n  selector: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);\n  options: QueryAllOptions;\n}\n\nexport const QUERY_ALL_METADATA_KEY = Symbol.for('simple-web-component:query-all');\n\nexport function queryAll(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;\nexport function queryAll(selector: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null), options?: QueryAllOptions): PropertyDecorator;\nexport function queryAll(options?: QueryAllOptions): PropertyDecorator;\n/**\n * @queryAll decorator to inject a list of elements into a class property.\n * \n * Supports both string selectors and function-based selectors:\n * - String selector: @queryAll('.item')\n * - Function selector: @queryAll((currentThis, helper) => currentThis.shadowRoot?.querySelectorAll('.item'))\n * \n * Supports filtering:\n * - @queryAll('.item', { filter: (target, meta) => target.hasAttribute('active') })\n */\nexport function queryAll(selectorOrTarget?: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null) | Object, optionsOrPropertyKey?: QueryAllOptions | string | symbol, descriptor?: PropertyDescriptor): any {\n  // Bare decorator: @queryAll\n  if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {\n    throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);\n  }\n  // With selector\n  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {\n    return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {\n      if (descriptor !== undefined) {\n        throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);\n      }\n\n      const constructor = targetObj.constructor;\n      let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);\n      if (!queries) {\n        queries = [];\n        ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);\n      }\n      queries.push({ propertyKey, selector: selectorOrTarget as any, options: optionsOrPropertyKey as QueryAllOptions || {} });\n\n      Object.defineProperty(targetObj, propertyKey, {\n        get(this: HTMLElement) {\n          ensureInit(this);\n          const config = getElementConfig(this);\n          const win = config?.window || window;\n          const hostSet = SwcUtils.getHelperAndHostSet(win, this);\n          \n          // Resolve selector - can be string or function\n          let resolvedSelector: string;\n          let resolvedElements: HTMLElement[] = [];\n          \n          if (typeof selectorOrTarget === 'function') {\n            const result = (selectorOrTarget as any)(this, hostSet);\n            // If function returns NodeList or Element[], convert to array\n            if (result instanceof win.NodeList) {\n              resolvedElements = Array.from(result).filter(el => el instanceof win.HTMLElement) as HTMLElement[];\n            } else if (Array.isArray(result)) {\n              resolvedElements = result.filter(el => el instanceof win.HTMLElement) as HTMLElement[];\n            }\n          } else {\n            resolvedSelector = selectorOrTarget;\n\n            const r = (optionsOrPropertyKey as QueryAllOptions)?.root || 'auto';\n            const applyRoot = (t: any): any[] => {\n              if (!t) return [];\n              const items = Array.isArray(t) ? t : [t];\n              const results: any[] = [];\n              items.forEach(it => {\n                if (!(it instanceof HTMLElement)) {\n                  results.push(it);\n                  return;\n                }\n                if (r === 'auto') results.push(it.shadowRoot || it);\n                else {\n                  if (r === 'light' || r === 'all') results.push(it);\n                  if ((r === 'shadow' || r === 'all') && it.shadowRoot) results.push(it.shadowRoot);\n                }\n              });\n              return results;\n            };\n\n            // --- Special Selectors: HostSet ---\n            if (resolvedSelector === '$hosts') resolvedElements = applyRoot(hostSet.$hosts).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$appHosts') resolvedElements = applyRoot(hostSet.$appHosts).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$host') resolvedElements = applyRoot(hostSet.$host).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$parentHost') resolvedElements = applyRoot(hostSet.$parentHost).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$appHost') resolvedElements = applyRoot(hostSet.$appHost).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$firstHost') resolvedElements = applyRoot(hostSet.$firstHost).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$lastHost') resolvedElements = applyRoot(hostSet.$lastHost).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$firstAppHost') resolvedElements = applyRoot(hostSet.$firstAppHost).filter(el => el instanceof HTMLElement);\n            else if (resolvedSelector === '$lastAppHost') resolvedElements = applyRoot(hostSet.$lastAppHost).filter(el => el instanceof HTMLElement);\n            // --- Special Selectors: Env ---\n            else if (resolvedSelector === '$window') return [win];\n            else if (resolvedSelector === '$document') return [win.document];\n            else if (resolvedSelector === '$this') resolvedElements = applyRoot(this).filter(el => el instanceof HTMLElement);\n            // --- Standard Selectors ---\n            else {\n              if (r === 'shadow') resolvedElements = this.shadowRoot ? (Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) as HTMLElement[]) : [];\n              else if (r === 'light') resolvedElements = Array.from(this.querySelectorAll(resolvedSelector)) as HTMLElement[];\n              else if (r === 'all') {\n                const sNodes = this.shadowRoot ? (Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) as HTMLElement[]) : [];\n                const lNodes = Array.from(this.querySelectorAll(resolvedSelector)) as HTMLElement[];\n                resolvedElements = [...sNodes, ...lNodes];\n              }\n              else resolvedElements = (Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector)) as HTMLElement[]);\n            }\n          }\n\n          // Apply filter if provided\n          if ((optionsOrPropertyKey as QueryAllOptions)?.filter) {\n            resolvedElements = resolvedElements.filter(el => {\n              if (!(el instanceof win.HTMLElement)) return true;\n              return (optionsOrPropertyKey as QueryAllOptions).filter!(el, { currentThis: this, helper: hostSet });\n            });\n          }\n\n          return resolvedElements;\n        },\n        set(this: HTMLElement, nv: any) {\n          ensureInit(this);\n          if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {\n            const config = getElementConfig(this);\n            const win = config?.window || window;\n            const hostSet = SwcUtils.getHelperAndHostSet(win, this);\n            \n            // Resolve selector - can be string or function\n            if (typeof selectorOrTarget === 'function') {\n              // Get elements from function and remove them\n              const result = (selectorOrTarget as any)(this, hostSet);\n              if (result instanceof win.NodeList) {\n                Array.from(result).forEach(el => {\n                  if (el instanceof win.Element) (el as Element).remove();\n                });\n              } else if (Array.isArray(result)) {\n                result.forEach(el => {\n                  if (el instanceof win.Element) (el as Element).remove();\n                });\n              }\n              return;\n            }\n            \n            const resolvedSelector = selectorOrTarget;\n            \n            if (resolvedSelector.startsWith('$') && resolvedSelector !== '$this') return;\n\n            const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';\n            let targets: (Element | Node)[] = [];\n            if (r === 'shadow') targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];\n            else if (r === 'light') targets = Array.from(this.querySelectorAll(resolvedSelector));\n            else if (r === 'all') {\n              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];\n              const lNodes = Array.from(this.querySelectorAll(resolvedSelector));\n              targets = [...sNodes, ...lNodes];\n            } else {\n              targets = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));\n            }\n            targets.forEach(t => (t as Element).remove());\n          }\n        },\n        enumerable: true,\n        configurable: true\n      });\n    };\n  }\n  // Without selector (defaults to $this)\n  return queryAll('$this', selectorOrTarget as SwcQueryOptions);\n}\n\nexport const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;;;;;;;kBAA6B;AAC7B,2BAA6C;AAC7C,mBAAyB;AAiBlB,MAAM,yBAAyB,OAAO,IAAI,gCAAgC;AAe3E,SAAU,SAAS,kBAA2H,sBAA0D,YAA+B;AAE3O,MAAI,eAAe,WAAc,OAAO,yBAAyB,YAAY,OAAO,yBAAyB,WAAW;AACtH,UAAM,IAAI,MAAM,2DAA2D,OAAO,oBAAoB,CAAC,GAAG;EAC5G;AAEA,MAAI,OAAO,qBAAqB,YAAY,OAAO,qBAAqB,YAAY;AAClF,WAAO,CAAC,WAAmB,aAA8BA,gBAA4B;AACnF,UAAIA,gBAAe,QAAW;AAC5B,cAAM,IAAI,MAAM,2DAA2D,OAAO,WAAW,CAAC,GAAG;MACnG;AAEA,YAAM,cAAc,UAAU;AAC9B,UAAI,UAAU,yBAAa,YAAgC,wBAAwB,WAAW;AAC9F,UAAI,CAAC,SAAS;AACZ,kBAAU,CAAA;AACV,iCAAa,eAAe,wBAAwB,SAAS,WAAW;MAC1E;AACA,cAAQ,KAAK,EAAE,aAAa,UAAU,kBAAyB,SAAS,wBAA2C,CAAA,EAAE,CAAE;AAEvH,aAAO,eAAe,WAAW,aAAa;QAC5C,MAAG;AACD,+CAAW,IAAI;AACf,gBAAM,aAAS,uCAAiB,IAAI;AACpC,gBAAM,MAAM,QAAQ,UAAU;AAC9B,gBAAM,UAAU,sBAAS,oBAAoB,KAAK,IAAI;AAGtD,cAAI;AACJ,cAAI,mBAAkC,CAAA;AAEtC,cAAI,OAAO,qBAAqB,YAAY;AAC1C,kBAAM,SAAU,iBAAyB,MAAM,OAAO;AAEtD,gBAAI,kBAAkB,IAAI,UAAU;AAClC,iCAAmB,MAAM,KAAK,MAAM,EAAE,OAAO,QAAM,cAAc,IAAI,WAAW;YAClF,WAAW,MAAM,QAAQ,MAAM,GAAG;AAChC,iCAAmB,OAAO,OAAO,QAAM,cAAc,IAAI,WAAW;YACtE;UACF,OAAO;AACL,+BAAmB;AAEnB,kBAAM,IAAK,sBAA0C,QAAQ;AAC7D,kBAAM,YAAY,CAAC,MAAiB;AAClC,kBAAI,CAAC;AAAG,uBAAO,CAAA;AACf,oBAAM,QAAQ,MAAM,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC;AACvC,oBAAM,UAAiB,CAAA;AACvB,oBAAM,QAAQ,QAAK;AACjB,oBAAI,EAAE,cAAc,cAAc;AAChC,0BAAQ,KAAK,EAAE;AACf;gBACF;AACA,oBAAI,MAAM;AAAQ,0BAAQ,KAAK,GAAG,cAAc,EAAE;qBAC7C;AACH,sBAAI,MAAM,WAAW,MAAM;AAAO,4BAAQ,KAAK,EAAE;AACjD,uBAAK,MAAM,YAAY,MAAM,UAAU,GAAG;AAAY,4BAAQ,KAAK,GAAG,UAAU;gBAClF;cACF,CAAC;AACD,qBAAO;YACT;AAGA,gBAAI,qBAAqB;AAAU,iCAAmB,UAAU,QAAQ,MAAM,EAAE,OAAO,QAAM,cAAc,WAAW;qBAC7G,qBAAqB;AAAa,iCAAmB,UAAU,QAAQ,SAAS,EAAE,OAAO,QAAM,cAAc,WAAW;qBACxH,qBAAqB;AAAS,iCAAmB,UAAU,QAAQ,KAAK,EAAE,OAAO,QAAM,cAAc,WAAW;qBAChH,qBAAqB;AAAe,iCAAmB,UAAU,QAAQ,WAAW,EAAE,OAAO,QAAM,cAAc,WAAW;qBAC5H,qBAAqB;AAAY,iCAAmB,UAAU,QAAQ,QAAQ,EAAE,OAAO,QAAM,cAAc,WAAW;qBACtH,qBAAqB;AAAc,iCAAmB,UAAU,QAAQ,UAAU,EAAE,OAAO,QAAM,cAAc,WAAW;qBAC1H,qBAAqB;AAAa,iCAAmB,UAAU,QAAQ,SAAS,EAAE,OAAO,QAAM,cAAc,WAAW;qBACxH,qBAAqB;AAAiB,iCAAmB,UAAU,QAAQ,aAAa,EAAE,OAAO,QAAM,cAAc,WAAW;qBAChI,qBAAqB;AAAgB,iCAAmB,UAAU,QAAQ,YAAY,EAAE,OAAO,QAAM,cAAc,WAAW;qBAE9H,qBAAqB;AAAW,qBAAO,CAAC,GAAG;qBAC3C,qBAAqB;AAAa,qBAAO,CAAC,IAAI,QAAQ;qBACtD,qBAAqB;AAAS,iCAAmB,UAAU,IAAI,EAAE,OAAO,QAAM,cAAc,WAAW;iBAE3G;AACH,kBAAI,MAAM;AAAU,mCAAmB,KAAK,aAAc,MAAM,KAAK,KAAK,WAAW,iBAAiB,gBAAgB,CAAC,IAAsB,CAAA;uBACpI,MAAM;AAAS,mCAAmB,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC;uBACpF,MAAM,OAAO;AACpB,sBAAM,SAAS,KAAK,aAAc,MAAM,KAAK,KAAK,WAAW,iBAAiB,gBAAgB,CAAC,IAAsB,CAAA;AACrH,sBAAM,SAAS,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC;AACjE,mCAAmB,CAAC,GAAG,QAAQ,GAAG,MAAM;cAC1C;AACK,mCAAoB,MAAM,MAAM,KAAK,cAAc,MAAM,iBAAiB,gBAAgB,CAAC;YAClG;UACF;AAGA,cAAK,sBAA0C,QAAQ;AACrD,+BAAmB,iBAAiB,OAAO,QAAK;AAC9C,kBAAI,EAAE,cAAc,IAAI;AAAc,uBAAO;AAC7C,qBAAQ,qBAAyC,OAAQ,IAAI,EAAE,aAAa,MAAM,QAAQ,QAAO,CAAE;YACrG,CAAC;UACH;AAEA,iBAAO;QACT;QACA,IAAuB,IAAO;AAC5B,+CAAW,IAAI;AACf,cAAI,OAAO,QAAQ,OAAO,UAAc,MAAM,QAAQ,EAAE,KAAK,GAAG,WAAW,GAAI;AAC7E,kBAAM,aAAS,uCAAiB,IAAI;AACpC,kBAAM,MAAM,QAAQ,UAAU;AAC9B,kBAAM,UAAU,sBAAS,oBAAoB,KAAK,IAAI;AAGtD,gBAAI,OAAO,qBAAqB,YAAY;AAE1C,oBAAM,SAAU,iBAAyB,MAAM,OAAO;AACtD,kBAAI,kBAAkB,IAAI,UAAU;AAClC,sBAAM,KAAK,MAAM,EAAE,QAAQ,QAAK;AAC9B,sBAAI,cAAc,IAAI;AAAU,uBAAe,OAAM;gBACvD,CAAC;cACH,WAAW,MAAM,QAAQ,MAAM,GAAG;AAChC,uBAAO,QAAQ,QAAK;AAClB,sBAAI,cAAc,IAAI;AAAU,uBAAe,OAAM;gBACvD,CAAC;cACH;AACA;YACF;AAEA,kBAAM,mBAAmB;AAEzB,gBAAI,iBAAiB,WAAW,GAAG,KAAK,qBAAqB;AAAS;AAEtE,kBAAM,IAAK,sBAA0C,QAAQ;AAC7D,gBAAI,UAA8B,CAAA;AAClC,gBAAI,MAAM;AAAU,wBAAU,KAAK,aAAa,MAAM,KAAK,KAAK,WAAW,iBAAiB,gBAAgB,CAAC,IAAI,CAAA;qBACxG,MAAM;AAAS,wBAAU,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC;qBAC3E,MAAM,OAAO;AACpB,oBAAM,SAAS,KAAK,aAAa,MAAM,KAAK,KAAK,WAAW,iBAAiB,gBAAgB,CAAC,IAAI,CAAA;AAClG,oBAAM,SAAS,MAAM,KAAK,KAAK,iBAAiB,gBAAgB,CAAC;AACjE,wBAAU,CAAC,GAAG,QAAQ,GAAG,MAAM;YACjC,OAAO;AACL,wBAAU,MAAM,MAAM,KAAK,cAAc,MAAM,iBAAiB,gBAAgB,CAAC;YACnF;AACA,oBAAQ,QAAQ,OAAM,EAAc,OAAM,CAAE;UAC9C;QACF;QACA,YAAY;QACZ,cAAc;OACf;IACH;EACF;AAEA,SAAO,SAAS,SAAS,gBAAmC;AAC9D;AAEO,MAAM,sBAAsB,CAAC,WAA+C;AACjF,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,wBAAwB,WAAW;AACrE;",
-  "names": ["descriptor"]
-}

package/dist/cjs/elements/tt/SwcAppMixin.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcAppMixin.js.map

package/dist/cjs/elements/tt/SwcAppMixin.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcAsync.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcAsync.js.map

package/dist/cjs/elements/tt/SwcAsync.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/dist/cjs/elements/tt/SwcAsyncTemplate.js

@@ -1 +0,0 @@
-//# sourceMappingURL=SwcAsyncTemplate.js.map