@dooboostore/simple-web-component 1.0.45 → 1.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.45",
+  "version": "1.0.47",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -67,7 +67,10 @@
   },
   "author": "dooboostore <dooboostore@gmail.com> (https://github.com/dooboostore)",
   "peerDependencies": {
-    "reflect-metadata": "^0.2.2"
+    "reflect-metadata": "^0.2.2",
+    "@dooboostore/core": "1.0.32",
+    "@dooboostore/core-web": "1.0.12",
+    "@dooboostore/simple-boot": "1.0.56"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -91,11 +94,7 @@
     "typescript": "^5.9.2",
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.32",
-    "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/core-web": "1.0.12",
-    "@dooboostore/simple-boot": "1.0.56"
+    "webpack-dev-server": "^5.2.0"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/bundle-entry.ts

@@ -1,2 +1,10 @@
 import 'reflect-metadata';
+
+// simple-web-component itself
 export * from './index';
+
+// Re-export peer dependencies so bundle consumers can access them
+// without separately importing each package
+export * as Core from '@dooboostore/core';
+export * as CoreWeb from '@dooboostore/core-web';
+export * as SimpleBoot from '@dooboostore/simple-boot';

package/src/decorators/applyAttribute.ts

@@ -381,6 +381,7 @@ export function applyAttribute(selector: AttributeSelector, targetAttributeNameO
  * 
  * Note: This decorator is for FIELDS ONLY. For methods, use @setAttribute.
  */
+export function attribute(target: Object, propertyKey: string | symbol):  void;
 export function attribute(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
 export function attribute(attributeName: string, options?: AttributeOptions): PropertyDecorator;
 export function attribute(selector: AttributeSelector, attributeName: string, options?: AttributeOptions): PropertyDecorator;

package/src/decorators/applyNode.ts

@@ -95,7 +95,9 @@ const applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string,
 
   const nodes: Node[] = [];
 
-  if (typeof res === 'string' && pos === 'innerHtml') {
+  if (res instanceof win.Node) {
+    nodes.push(res);
+  } else if (typeof res === 'string' && pos === 'innerHtml') {
     const t = win.document.createElement('template');
     t.innerHTML = res;
     nodes.push(...Array.from(t.content.childNodes));

package/src/decorators/applyProperty.ts

@@ -301,6 +301,7 @@ export function applyProperty(selector: PropertySelector, targetPropertyKeyOrOpt
  * 
  * Note: This decorator is for FIELDS ONLY. For methods, use @setProperty.
  */
+export function property(target: Object, propertyKey: string | symbol): void;
 export function property(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
 export function property(selector: PropertySelector, targetPropertyKey: string | symbol, options?: PropertyOptions): PropertyDecorator;
 export function property(selector: PropertySelector, options?: PropertyOptions): PropertyDecorator;

package/src/decorators/elementDefine.ts

@@ -1,6 +1,5 @@
-import {ActionExpression, FunctionUtils, ReflectUtils} from '@dooboostore/core';
-import {Observable, Subject} from '@dooboostore/core';
-import {debounceTime, throttleTime, distinctUntilChanged} from '@dooboostore/core/message/operators';
+import {ActionExpression, FunctionUtils, ReflectUtils, Subject} from '@dooboostore/core';
+import {debounceTime, distinctUntilChanged, throttleTime} from '@dooboostore/core/message/operators';
 import {getAddEventListenerMetadata} from './addEventListener';
 import {findAllLifecycleMetadata, findAllOnConnectedAfterMetadata, findAllOnConnectedBeforeMetadata, findAllOnConnectedMetadata, ON_AFTER_ADOPTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_CONNECTED_COMPLETED_METADATA_KEY, ON_INITIALIZE_METADATA_KEY} from './lifecycles';
 import {getEmitCustomEventMetadataList} from './emitCustomEvent';
@@ -12,9 +11,8 @@ import {SwcUtils} from '../utils/Utils';
 import {DOM_EVENT_NAMES, HTML_TAG_ENTRIES} from '../config/config';
 import {SituationTypeContainer, SituationTypeContainers} from '@dooboostore/simple-boot/decorators/inject/Inject';
 import {HelperHostSet, HostSet, InjectSituationType} from '../types';
-import {ConvertUtils, ElementApply, NodeSlot} from '@dooboostore/core-web';
+import {ConvertUtils, ElementApply} from '@dooboostore/core-web';
 import {isSSR} from "../elements/SwcAppMixin";
-import {findAllApplySlotMetadata} from "./applySlot";
 import {findAllStateMetadata} from "./state";
 import {findAllPropertyMetadata} from "./applyProperty";
 
@@ -385,14 +383,15 @@ export const elementDefine =
           const conf = getElementConfig(this);
           const currentWin = (this as any)._resolveWindow(conf);
 
-          const bMethods = findAllOnConnectedBeforeMetadata(this).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const bMethods = findAllOnConnectedBeforeMetadata(this);//.filter(it => useSsr ? !it.options.ssrFirst : true);
           // console.log('beforeConnected', bMethods)
           for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
 
           // console.log('vvvvvvvvvvvvvvvu-seSsr-vvvvvvvvvv>', useSsr, this.tagName, this.getAttribute('seq'))
           //   // ssr 처리라서 이미 내려준거그대로 상요하면된다 따라서 호출안한다
-          const targetConnectedList = findAllOnConnectedMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          // const targetConnectedList = findAllOnConnectedMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          const targetConnectedList = useSsr ? [] : findAllOnConnectedMetadata(constructor);
           const shadowMode = conf?.useShadow || targetConnectedList.find(it => it.options.useShadow)?.options.useShadow;
           // console.log('--------->', this.tagName, shadowMode && !this.shadowRoot)
           if (shadowMode && !this.shadowRoot) {
@@ -510,7 +509,7 @@ export const elementDefine =
               const unifiedHandler = async (event: Event) => {
                 for (const meta of sortedMetaList) {
                   const {selector, options} = meta;
-                  const matchedEl = (event.target as HTMLElement).closest(selector);
+                  const matchedEl = (event.target as HTMLElement)?.closest(selector);
                   if (matchedEl && (br as any).contains(matchedEl)) {
                     // Apply filter if specified
                     if (options.filter) {
@@ -655,9 +654,7 @@ export const elementDefine =
 
           if (originalConnected) await (originalConnected.apply(this));
 
-          const aMethods = findAllOnConnectedAfterMetadata(this).filter(it => {
-            return useSsr ? !it.options.ssrFirst : true;
-          });
+          const aMethods = findAllOnConnectedAfterMetadata(this); //.filter(it => { return useSsr ? !it.options.ssrFirst : true; });
           // console.log('afterConnected', this.tagName, aMethods,  getOnConnectedAfterMetadata(this))
           for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-connected', helperHostSet);

package/src/decorators/lifecycles.ts

@@ -8,24 +8,25 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-compone
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:on-add-event-listener');
-export const ON_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component');
+export const ON_CONNECTED_BODY_METADATA_KEY = Symbol.for('simple-web-component:on-connected-body');
 export const ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for('simple-web-component:on-connected-swc-app');
 export const ON_CONNECTED_COMPLETED_METADATA_KEY = Symbol.for('simple-web-component:on-completed');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
-export interface InnerHtmlOptions {
-  ssrFirst?: boolean;
+export interface OnConnectedAppendChildOptions {
+  // ssrFirst?: boolean;
   // replaceWrap?:{ start: string, end:string},
   useShadow?: boolean;
+  order?: number;
 }
-export interface InnerHtmlMetadata {
+export interface OnConnectedAppendChildOptionsMetadata {
   propertyKey: string | symbol;
-  options: InnerHtmlOptions;
+  options: OnConnectedAppendChildOptions;
 }
 
 export interface OnConnectedOptions {
-  ssrFirst?: boolean;
+  // ssrFirst?: boolean;
   order?: number;
 }
 export interface OnConnectedMetadata {
@@ -87,33 +88,33 @@ export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: stri
 }
 
 
-function createLifecycleDecorator(metadataKey: symbol): ((options?: LifecycleOptions) => MethodDecorator) & MethodDecorator {
-  const decorator = (options?: LifecycleOptions): MethodDecorator => {
-    return (target: Object, propertyKey: string | symbol) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(metadataKey, list, constructor);
-      }
-      list.push({ propertyKey, order: options?.order ?? 0 });
-    };
-  };
-
-  // Support both @decorator and @decorator() syntax
-  return Object.assign(
-    (target: Object, propertyKey: string | symbol) => {
-      const constructor = target.constructor;
-      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
-      if (!list) {
-        list = [];
-        ReflectUtils.defineMetadata(metadataKey, list, constructor);
-      }
-      list.push({ propertyKey, order: 0 });
-    },
-    { __isDecorator: true, __decorator: decorator }
-  ) as any;
-}
+// function createLifecycleDecorator(metadataKey: symbol): ((options?: LifecycleOptions) => MethodDecorator) & MethodDecorator {
+//   const decorator = (options?: LifecycleOptions): MethodDecorator => {
+//     return (target: Object, propertyKey: string | symbol) => {
+//       const constructor = target.constructor;
+//       let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+//       if (!list) {
+//         list = [];
+//         ReflectUtils.defineMetadata(metadataKey, list, constructor);
+//       }
+//       list.push({ propertyKey, order: options?.order ?? 0 });
+//     };
+//   };
+//
+//   // Support both @decorator and @decorator() syntax
+//   return Object.assign(
+//     (target: Object, propertyKey: string | symbol) => {
+//       const constructor = target.constructor;
+//       let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+//       if (!list) {
+//         list = [];
+//         ReflectUtils.defineMetadata(metadataKey, list, constructor);
+//       }
+//       list.push({ propertyKey, order: 0 });
+//     },
+//     { __isDecorator: true, __decorator: decorator }
+//   ) as any;
+// }
 
 // Helper to handle both @decorator and @decorator() syntax
 function createLifecycleDecoratorWithOptions(metadataKey: symbol) {
@@ -193,19 +194,19 @@ export function onConnectedCompleted(optionOrTarget?: LifecycleOptions | Object,
 
 
 
-const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
+const decorator = (options: OnConnectedAppendChildOptions, target: Object, propertyKey: string | symbol) => {
   const constructor = target.constructor;
-  let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(ON_CONNECTED_METADATA_KEY, constructor);
+  let list = ReflectUtils.getMetadata<OnConnectedAppendChildOptionsMetadata[]>(ON_CONNECTED_BODY_METADATA_KEY, constructor);
   if (!list) {
     list = [];
-    ReflectUtils.defineMetadata(ON_CONNECTED_METADATA_KEY, list, constructor);
+    ReflectUtils.defineMetadata(ON_CONNECTED_BODY_METADATA_KEY, list, constructor);
   }
   list.push({ propertyKey, options });
 };
 
-export function onConnectedShadow(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
-export function onConnectedShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
-export function onConnectedShadow(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+export function onConnectedBodyShadow(options: Omit<OnConnectedAppendChildOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedBodyShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedBodyShadow(optionOrTarget: Omit<OnConnectedAppendChildOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: true}, optionOrTarget!, propertyKey);
   }
@@ -215,9 +216,9 @@ export function onConnectedShadow(optionOrTarget: Omit<InnerHtmlOptions, 'useSha
   };
 }
 
-export function onConnectedLight(options: Omit<InnerHtmlOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
-export function onConnectedLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
-export function onConnectedLight(optionOrTarget: Omit<InnerHtmlOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+export function onConnectedBodyLight(options: Omit<OnConnectedAppendChildOptions, 'useShadow'>): MethodDecorator; // 파라미터있음
+export function onConnectedBodyLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void; // 파라미터없음
+export function onConnectedBodyLight(optionOrTarget: Omit<OnConnectedAppendChildOptions, 'useShadow'> | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: false}, optionOrTarget!, propertyKey);
   }
@@ -226,15 +227,15 @@ export function onConnectedLight(optionOrTarget: Omit<InnerHtmlOptions, 'useShad
     decorator({...optionOrTarget??{}, useShadow: false}, target, propertyKey);
   };
 }
-export function onConnected(options: InnerHtmlOptions): MethodDecorator;
-export function onConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function onConnected(optionOrTarget: InnerHtmlOptions | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
+export function onConnectedBody(options: OnConnectedAppendChildOptions): MethodDecorator;
+export function onConnectedBody(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function onConnectedBody(optionOrTarget: OnConnectedAppendChildOptions | Object, propertyKey?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   if (propertyKey) { // no parameter option  @decorator
     return decorator({}, optionOrTarget!, propertyKey);
   }
   // parameter option @decorator()
   return (target: Object, propertyKey: string | symbol) => {
-    decorator((optionOrTarget as InnerHtmlOptions) || {}, target, propertyKey);
+    decorator((optionOrTarget as OnConnectedAppendChildOptions) || {}, target, propertyKey);
   };
 }
 
@@ -248,27 +249,27 @@ export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): Life
   return [...results].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 };
 
-export const findAllOnConnectedMetadata = (target: any): InnerHtmlMetadata[] => {
+export const findAllOnConnectedMetadata = (target: any): OnConnectedAppendChildOptionsMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata<OnConnectedAppendChildOptionsMetadata[]>(ON_CONNECTED_BODY_METADATA_KEY, constructor) ?? [];
   // Sort by order (default 0 if not specified)
   return [...results].sort((a, b) => {
-    const orderA = (a.options as any)?.order ?? 0;
-    const orderB = (b.options as any)?.order ?? 0;
+    const orderA = a.options?.order ?? 0;
+    const orderB = b.options?.order ?? 0;
     return orderA - orderB;
   });
 };
 
 export const findAllOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
   // Sort by order
   return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };
 
 export const findAllOnConnectedAfterMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
   // Sort by order
   return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };

package/src/elements/SwcAppMixin.ts

@@ -2,7 +2,7 @@ import { SwcAppInterface, SwcAppMessage } from '../types';
 import { APPLY_NODE_METADATA_KEY, findAllLifecycleMetadata, getSubscribeSwcAppMessageWhileConnectedMetadata, getSubscribeSwcAppRouteChangeWhileConnectedMetadata, ON_CONNECTED_SWC_APP_METADATA_KEY, SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY } from '../decorators';
 import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from '../SwcAppEngine';
 import { debounceTimeIntervalLock, FunctionUtils, Subscription } from '@dooboostore/core';
-import { RouterEventType } from '@dooboostore/core-web';
+import {RouterEventType, ValidUtils} from '@dooboostore/core-web';
 import { SwcUtils } from '../utils/Utils';
 
 export const isSSR = (i: HTMLElement) => {
@@ -137,7 +137,9 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           }
         }
       } finally {
-        if (this.config?.ssr) {
+        // this.config?.window
+        const isBrowser = ValidUtils.isBrowser();
+        if (!isBrowser && this.config?.ssr) {
           setSSRAttribute(instance);
         } else {
           removeSSRAttribute(instance);
@@ -188,7 +190,9 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           }
         }
 
-        if (this.config?.ssr) {
+        const isBrowser = ValidUtils.isBrowser();
+        console.log('------>', isBrowser, this.config?.ssr)
+        if (!isBrowser && this.config?.ssr) {
           setSSRAttribute(instance);
         } else {
           removeSSRAttribute(instance);

package/dist/cjs/examples/RxJSOperatorsExample.js

@@ -1,285 +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 RxJSOperatorsExample_exports = {};
-__export(RxJSOperatorsExample_exports, {
-  AutoSaveEditor: () => AutoSaveEditor,
-  FormInput: () => FormInput,
-  InfiniteScroll: () => InfiniteScroll,
-  KeyboardHandler: () => KeyboardHandler,
-  LengthTracker: () => LengthTracker,
-  MouseTracker: () => MouseTracker,
-  ResponsiveLayout: () => ResponsiveLayout,
-  SearchComponent: () => SearchComponent
-});
-module.exports = __toCommonJS(RxJSOperatorsExample_exports);
-var import_decorators = require("../decorators");
-var __decorate = function(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = function(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var _a, _b, _c, _d, _e, _f, _g, _h;
-let SearchComponent = class SearchComponent2 extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    this.results = [];
-  }
-  async onSearchInput(event) {
-    const input = event.target;
-    const query = input.value.trim();
-    if (query.length > 2) {
-      try {
-        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();
-    }
-  }
-  renderResults() {
-    console.log("Rendering results:", this.results);
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$this", "input", { debounceTime: 1e3 }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_a = typeof Event !== "undefined" && Event) === "function" ? _a : Object]),
-  __metadata("design:returntype", Promise)
-], SearchComponent.prototype, "onSearchInput", null);
-SearchComponent = __decorate([
-  (0, import_decorators.elementDefine)("search-component")
-], SearchComponent);
-let ResponsiveLayout = class ResponsiveLayout2 extends HTMLElement {
-  onWindowResize(event) {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    console.log(`Window resized to: ${width}x${height}`);
-    this.updateLayout(width, height);
-  }
-  updateLayout(width, height) {
-    if (width < 768) {
-      this.classList.add("mobile");
-      this.classList.remove("desktop");
-    } else {
-      this.classList.add("desktop");
-      this.classList.remove("mobile");
-    }
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$window", "resize", { throttleTime: 250 }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_b = typeof Event !== "undefined" && Event) === "function" ? _b : Object]),
-  __metadata("design:returntype", void 0)
-], ResponsiveLayout.prototype, "onWindowResize", null);
-ResponsiveLayout = __decorate([
-  (0, import_decorators.elementDefine)("responsive-layout")
-], ResponsiveLayout);
-let FormInput = class FormInput2 extends HTMLElement {
-  onFormInput(event) {
-    const input = event.target;
-    const fieldName = input.name;
-    const value = input.value;
-    console.log(`Validating ${fieldName}: ${value}`);
-    this.validateField(fieldName, value);
-  }
-  validateField(name, value) {
-    const isValid = value.length > 0;
-    console.log(`Field ${name} is ${isValid ? "valid" : "invalid"}`);
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$this", "input", {
-    debounceTime: 300,
-    distinctUntilChanged: true
-  }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_c = typeof Event !== "undefined" && Event) === "function" ? _c : Object]),
-  __metadata("design:returntype", void 0)
-], FormInput.prototype, "onFormInput", null);
-FormInput = __decorate([
-  (0, import_decorators.elementDefine)("form-input")
-], FormInput);
-let InfiniteScroll = class InfiniteScroll2 extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    this.isLoading = false;
-  }
-  onScroll(event) {
-    if (this.isLoading)
-      return;
-    if (this.isNearBottom()) {
-      console.log("Near bottom, loading more content...");
-      this.loadMoreContent();
-    }
-  }
-  isNearBottom() {
-    const scrollTop = window.scrollY;
-    const windowHeight = window.innerHeight;
-    const documentHeight = document.documentElement.scrollHeight;
-    return scrollTop + windowHeight >= documentHeight - 500;
-  }
-  async loadMoreContent() {
-    this.isLoading = true;
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 1e3));
-      console.log("Content loaded");
-    } finally {
-      this.isLoading = false;
-    }
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$window", "scroll", { throttleTime: 100 }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_d = typeof Event !== "undefined" && Event) === "function" ? _d : Object]),
-  __metadata("design:returntype", void 0)
-], InfiniteScroll.prototype, "onScroll", null);
-InfiniteScroll = __decorate([
-  (0, import_decorators.elementDefine)("infinite-scroll")
-], InfiniteScroll);
-let LengthTracker = class LengthTracker2 extends HTMLElement {
-  onInputChange(event) {
-    const input = event.target;
-    const length = input.value.length;
-    console.log(`Input length changed to: ${length}`);
-    this.updateLengthDisplay(length);
-  }
-  updateLengthDisplay(length) {
-    const display = this.querySelector(".length-display");
-    if (display) {
-      display.textContent = `${length} characters`;
-    }
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$this", "input", {
-    distinctUntilChanged: (prev, curr) => {
-      return prev?.length === curr?.length;
-    }
-  }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_e = typeof Event !== "undefined" && Event) === "function" ? _e : Object]),
-  __metadata("design:returntype", void 0)
-], LengthTracker.prototype, "onInputChange", null);
-LengthTracker = __decorate([
-  (0, import_decorators.elementDefine)("length-tracker")
-], LengthTracker);
-let AutoSaveEditor = class AutoSaveEditor2 extends HTMLElement {
-  constructor() {
-    super(...arguments);
-    this.lastSavedContent = "";
-  }
-  async onContentChange(event) {
-    const textarea = event.target;
-    const content = textarea.value;
-    if (content !== this.lastSavedContent) {
-      console.log("Auto-saving content...");
-      await this.saveContent(content);
-      this.lastSavedContent = content;
-    }
-  }
-  async saveContent(content) {
-    try {
-      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);
-    }
-  }
-  showSaveIndicator() {
-    const indicator = this.querySelector(".save-indicator");
-    if (indicator) {
-      indicator.classList.add("show");
-      setTimeout(() => indicator.classList.remove("show"), 2e3);
-    }
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$this", "input", {
-    debounceTime: 2e3,
-    distinctUntilChanged: (prev, curr) => {
-      return prev === curr;
-    }
-  }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_f = typeof Event !== "undefined" && Event) === "function" ? _f : Object]),
-  __metadata("design:returntype", Promise)
-], AutoSaveEditor.prototype, "onContentChange", null);
-AutoSaveEditor = __decorate([
-  (0, import_decorators.elementDefine)("auto-save-editor")
-], AutoSaveEditor);
-let KeyboardHandler = class KeyboardHandler2 extends HTMLElement {
-  onSaveShortcut(event) {
-    event.preventDefault();
-    console.log("Save shortcut triggered");
-    this.handleSave();
-  }
-  handleSave() {
-    console.log("Saving...");
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$document", "keydown", {
-    throttleTime: 500,
-    filter: (event) => {
-      return (event.ctrlKey || event.metaKey) && event.key === "s";
-    }
-  }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_g = typeof KeyboardEvent !== "undefined" && KeyboardEvent) === "function" ? _g : Object]),
-  __metadata("design:returntype", void 0)
-], KeyboardHandler.prototype, "onSaveShortcut", null);
-KeyboardHandler = __decorate([
-  (0, import_decorators.elementDefine)("keyboard-handler")
-], KeyboardHandler);
-let MouseTracker = class MouseTracker2 extends HTMLElement {
-  onMouseMove(event) {
-    const x = event.clientX;
-    const y = event.clientY;
-    this.updateCursorPosition(x, y);
-  }
-  updateCursorPosition(x, y) {
-    console.log(`Cursor at: ${x}, ${y}`);
-  }
-};
-__decorate([
-  (0, import_decorators.addEventListener)("$document", "mousemove", { throttleTime: 100 }),
-  __metadata("design:type", Function),
-  __metadata("design:paramtypes", [typeof (_h = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _h : Object]),
-  __metadata("design:returntype", void 0)
-], MouseTracker.prototype, "onMouseMove", null);
-MouseTracker = __decorate([
-  (0, import_decorators.elementDefine)("mouse-tracker")
-], MouseTracker);
-//# sourceMappingURL=RxJSOperatorsExample.js.map