npm - @dooboostore/dom-render - Versions diffs - 1.0.111 → 1.0.113 - Mend

@dooboostore/dom-render 1.0.111 → 1.0.113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1461) hide show

package/dist/cjs/components/ComponentBase.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/ComponentBase.ts"],
-  "sourcesContent": ["import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';\nimport { OnChangeAttrRender, OtherData } from '../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderData, OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';\nimport { RawSet } from '../rawsets/RawSet';\nimport { ConstructorType } from '@dooboostore/core/types';\nimport { OnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';\nimport { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';\nimport { OnInitRender } from '../lifecycle/OnInitRender';\nimport { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';\nimport { OnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRender';\nimport { OnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';\nimport { OnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';\nimport type { Render } from '../rawsets/Render';\nimport { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';\nimport { DomRenderConfig } from '../configs/DomRenderConfig';\nimport { Subject } from '@dooboostore/core/message/Subject';\nimport { debounceTime } from '@dooboostore/core/message/operators/debounceTime';\nimport type { Subscription } from '@dooboostore/core/message/Subscription';\nimport { OnRawSetRendered, OnRawSetRenderedOtherData } from \"../lifecycle/OnRawSetRendered\";\n\n\nexport const ATTRIBUTE_METADATA_KEY = Symbol('attribute');\nexport const QUERY_METADATA_KEY = Symbol('query');\nexport const EVENT_METADATA_KEY = Symbol('event');\n\nexport interface AttributeMetadata {\n    propertyKey: string | symbol;\n    name: string;\n    converter?: (value: any | string | null) => any;\n    isMethod: boolean;\n}\n\nexport interface QueryMetadata {\n    selector: string;\n    propertyKey: string | symbol;\n    isMethod: boolean;\n    convert?: (e: Element) => any;\n    onDestroy?: (componentInstance: any, element: Element) => void;\n    refreshTime?: number; // milliseconds\n    refreshRawSetRendered?: boolean;\n}\n\nexport interface EventMetadata {\n    query: string;\n    eventName: string;\n    methodName: string | symbol;\n    onDestroy?: (componentInstance: any, element: Element) => void;\n    refreshTime?: number; // milliseconds\n    refreshRawSetRendered?: boolean;\n}\n\nexport function attribute(nameOrOptions?: string | { name?: string, converter?: (value: any | string | null) => any }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {\n    return (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n        const attributes = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target.constructor) || [];\n        \n        let name: string;\n        let converter: ((value: any | string | null) => any) | undefined;\n        \n        if (typeof nameOrOptions === 'string') {\n            name = nameOrOptions;\n        } else if (nameOrOptions) {\n            name = nameOrOptions.name || String(propertyKey);\n            converter = nameOrOptions.converter;\n        } else {\n            name = String(propertyKey);\n        }\n        \n        const attributeMetadata: AttributeMetadata = {\n            propertyKey: propertyKey,\n            name: name,\n            converter: converter,\n            isMethod: !!descriptor\n        };\n        \n        attributes.push(attributeMetadata);\n        ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, attributes, target.constructor);\n    };\n}\n\nexport function query(selectorOrOptions: string | { selector: string, convert?: (e: Element) => any, onDestroy?: (componentInstance: any, element: Element) => void, refreshIntervalTime?: number, refreshRawSetRendered?: boolean }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {\n    return (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n        const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, target.constructor) || [];\n        \n        let selector: string;\n        let convert: ((e: Element) => any) | undefined;\n        let onDestroy: ((componentInstance: any, element: Element) => void) | undefined;\n        let refreshTime: number | undefined;\n        let refreshRawSetRendered: boolean | undefined;\n\n        if (typeof selectorOrOptions === 'string') {\n            selector = selectorOrOptions;\n        } else {\n            selector = selectorOrOptions.selector;\n            convert = selectorOrOptions.convert;\n            onDestroy = selectorOrOptions.onDestroy;\n            refreshTime = selectorOrOptions.refreshIntervalTime;\n            refreshRawSetRendered = selectorOrOptions.refreshRawSetRendered;\n        }\n        \n        const queryMetadata: QueryMetadata = {\n            selector: selector,\n            propertyKey: propertyKey,\n            isMethod: !!descriptor,\n            convert: convert,\n            onDestroy: onDestroy,\n            refreshTime: refreshTime,\n            refreshRawSetRendered\n        };\n        \n        queries.push(queryMetadata);\n        ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, target.constructor);\n    };\n}\n\nexport function event(options: { query: string, name: string, onDestroy?: (componentInstance: any, element: Element) => void, refreshTime?: number, refreshRawSetRendered?: boolean }): MethodDecorator {\n    return (target: object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n        const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, target.constructor) || [];\n        \n        const eventMetadata: EventMetadata = {\n            query: options.query,\n            eventName: options.name,\n            methodName: propertyKey,\n            onDestroy: options.onDestroy,\n            refreshTime: options.refreshTime,\n            refreshRawSetRendered: options.refreshRawSetRendered\n        };\n        \n        events.push(eventMetadata);\n        ReflectUtils.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);\n    };\n}\n\n\nexport type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | ConstructorType<any>, createChildrenDebounce?: number };\n\nexport type ChildrenSet = { instance: any, data: OnCreateRenderDataParams };\n\nexport class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered {\n  @DomRenderNoProxy\n  private _rawSet?: RawSet;\n  @DomRenderNoProxy\n  private _children: ChildrenSet[] = [];\n  @DomRenderNoProxy\n  private _render: Render | undefined;\n  @DomRenderNoProxy\n  private _attribute?: T;\n  @DomRenderNoProxy\n  private _boundEventListeners: { element: Element, eventName: string, listener: (e: Event) => void }[] = [];\n  @DomRenderNoProxy\n  private _queryBindings: { element: Element, metadata: QueryMetadata }[] = [];\n  @DomRenderNoProxy\n  private _eventBindings: { element: Element, metadata: EventMetadata, listener: (e: Event) => void }[] = [];\n  @DomRenderNoProxy\n  private _refreshTimers: Map<QueryMetadata | EventMetadata, NodeJS.Timeout> = new Map();\n\n  @DomRenderNoProxy\n  private childrenSetSubject = new Subject<ChildrenSet[]>();\n  @DomRenderNoProxy\n  private createChildrenDebounceSubscription?: Subscription | undefined;\n\n  constructor(private _config?: C) {\n  }\n  get componentConfig(): C | undefined {\n    return this._config;\n  }\n  get render(): Render | undefined {\n    return this._render;\n  }\n\n  get rawSet(): RawSet | undefined {\n    return this._rawSet;\n  }\n\n  get domRenderConfig(): DomRenderConfig | undefined {\n    return this.rawSet?.dataSet.config;\n  }\n\n  private _queryElements(selector: string, rawSet:RawSet): Element[] {\n    const e = this.getElement();\n    // console.log('queryElement-->', e);\n    if (e) {\n      return ElementUtils.querySelectorAll(e, selector);\n    } else {\n      let startNode = rawSet.point?.start;\n      let endNode = rawSet.point?.end;\n      // console.log('-----', startNode, endNode)\n      // console.log('-----', startNode?.isConnected, endNode?.isConnected)\n      if (rawSet.point?.start && startNode && !startNode.isConnected && startNode instanceof HTMLElement && startNode.hasAttribute('id')) {\n        rawSet.point.start = startNode = rawSet.dataSet.config.window.document.querySelector('#' + startNode.id) as HTMLMetaElement\n      }\n      if (rawSet.point?.end && endNode && !endNode.isConnected && endNode instanceof HTMLElement && endNode.hasAttribute('id')) {\n        rawSet.point.end = endNode = rawSet.dataSet.config.window.document.querySelector('#' + endNode.id) as HTMLMetaElement\n      }\n      if (startNode && endNode) {\n        // console.log('query!!', startNode, endNode);\n        return ElementUtils.querySelectorAll({ start: startNode as Element, end: endNode as Element }, selector);\n      }\n    }\n    return [];\n  }\n\n  private _cleanupEventListeners() {\n    for (const { element, eventName, listener } of this._boundEventListeners) {\n      element.removeEventListener(eventName, listener);\n    }\n    this._boundEventListeners = [];\n  }\n\n  private _cleanupQueryBindings() {\n    for (const { element, metadata } of this._queryBindings) {\n      if (metadata.onDestroy) {\n        metadata.onDestroy(this, element);\n      }\n      this._clearRefreshTimer(metadata);\n    }\n    this._queryBindings = [];\n  }\n\n  private _cleanupEventBindings() {\n    for (const { element, metadata, listener } of this._eventBindings) {\n      element.removeEventListener(metadata.eventName, listener);\n      if (metadata.onDestroy) {\n        metadata.onDestroy(this, element);\n      }\n      this._clearRefreshTimer(metadata);\n    }\n    this._eventBindings = [];\n  }\n\n  private _applyQueryBinding(queryInfo: QueryMetadata, elements: Element[], newElementsOnly: Element[] = elements) {\n    const { propertyKey, isMethod, convert } = queryInfo;\n    \n    // Track bindings for cleanup\n    elements.forEach(element => {\n      this._queryBindings.push({ element, metadata: queryInfo });\n    });\n    \n    // Apply convert function if provided\n    const processedElements = convert ? elements.map(convert) : elements;\n    const processedNewElements = convert ? newElementsOnly.map(convert) : newElementsOnly;\n    \n    if (isMethod) {\n      const method = (this as any)[propertyKey];\n      if (typeof method === 'function') {\n          const paramTypes = ReflectUtils.getParameterTypes(this, propertyKey);\n          if (paramTypes && paramTypes.length > 0 && paramTypes[0] === Array) {\n              // For array methods, pass only new elements\n              method.call(this, processedNewElements, {all: processedElements});\n          } else {\n              // For single element methods, pass first new element\n              if (processedNewElements.length > 0) {\n                  method.call(this, processedNewElements[0], {all: processedElements, newAll: processedNewElements});\n              }\n          }\n      }\n    } else {\n      // For properties, always set all elements (not just new ones)\n      const propertyType = ReflectUtils.getType(this, propertyKey);\n      if (propertyType === Array) {\n        (this as any)[propertyKey] = processedElements;\n      } else {\n        (this as any)[propertyKey] = processedElements[0] || null;\n      }\n    }\n  }\n\n  private _setupQueryDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    // console.group('_setupQueryDecorators')\n    // console.log('queries', queries);\n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        const elements = this._queryElements(queryInfo.selector, rawSet);\n        // console.log('------elements', elements);\n        this._applyQueryBinding(queryInfo, elements);\n        \n        // Setup refresh timer if specified\n        this._setupRefreshTimer(queryInfo);\n      }\n    }\n    // console.groupEnd();\n  }\n\n  private _updateQueryBinding(queryInfo: QueryMetadata, rawSet: RawSet, forceUpdate = false) {\n    const newElements = this._queryElements(queryInfo.selector, rawSet);\n    \n    // Get current bindings for this query\n    const currentBindings = this._queryBindings.filter(binding => binding.metadata === queryInfo);\n    const currentElements = currentBindings.map(binding => binding.element);\n    \n    // Check if elements have changed\n    const elementsChanged = forceUpdate || !this._arraysEqual(currentElements, newElements);\n    \n    if (elementsChanged) {\n      let addedElements: Element[] = [];\n      \n      if (forceUpdate) {\n        // Force update: cleanup all old bindings, treat all as new\n        currentBindings.forEach(({ element, metadata }) => {\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n        addedElements = newElements;\n      } else {\n        // Smart update: only cleanup removed elements, find added elements\n        const removedElements = currentElements.filter(element => !newElements.includes(element));\n        addedElements = newElements.filter(element => !currentElements.includes(element));\n        \n        removedElements.forEach(element => {\n          if (queryInfo.onDestroy) {\n            queryInfo.onDestroy(this, element);\n          }\n        });\n      }\n      \n      // Remove old bindings\n      this._queryBindings = this._queryBindings.filter(binding => binding.metadata !== queryInfo);\n      \n      // Apply new bindings, but pass only added elements to methods\n      this._applyQueryBinding(queryInfo, newElements, addedElements);\n    }\n  }\n\n  private _updateQueryDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        this._updateQueryBinding(queryInfo, rawSet);\n      }\n    }\n  }\n\n  private _arraysEqual(arr1: Element[], arr2: Element[]): boolean {\n    if (arr1.length !== arr2.length) return false;\n    return arr1.every((element, index) => element === arr2[index]);\n  }\n\n  private _setupRefreshTimer(metadata: QueryMetadata | EventMetadata) {\n    if (!metadata.refreshTime || !this._rawSet) return;\n\n    const timer = setInterval(() => {\n      if (!this._rawSet) return;\n\n      if ('selector' in metadata) {\n        // QueryMetadata\n        this._updateQueryBinding(metadata as QueryMetadata, this._rawSet);\n      } else {\n        // EventMetadata\n        this._updateEventBinding(metadata as EventMetadata, this._rawSet);\n      }\n    }, metadata.refreshTime);\n\n    this._refreshTimers.set(metadata, timer);\n  }\n\n  private _clearRefreshTimer(metadata: QueryMetadata | EventMetadata) {\n    const timer = this._refreshTimers.get(metadata);\n    if (timer) {\n      clearInterval(timer);\n      this._refreshTimers.delete(metadata);\n    }\n  }\n\n  private _clearAllRefreshTimers() {\n    for (const timer of Array.from(this._refreshTimers.values())) {\n      clearInterval(timer);\n    }\n    this._refreshTimers.clear();\n  }\n\n  async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    if (queries) {\n      queries.filter(it => it.refreshRawSetRendered).forEach(queryInfo => {\n        this._updateQueryBinding(queryInfo, rawSet, true);\n      });\n    }\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events) {\n      events.filter(it => it.refreshRawSetRendered).forEach(eventInfo => {\n        this._updateEventBinding(eventInfo, rawSet, true);\n      });\n    }\n  }\n  /**\n   * Manually refresh all query and event decorators\n   * Useful when DOM elements are dynamically added/removed and you want to update bindings\n   */\n  refreshDecorators(): void {\n    if (this._rawSet) {\n      this._updateQueryDecorators(this._rawSet);\n      this._updateEventDecorators(this._rawSet);\n    }\n  }\n\n  /**\n   * Manually refresh specific query decorators by property key\n   * @param propertyKeys - Array of property keys to refresh, or single property key\n   */\n  refreshQueryDecorators(propertyKeys: (string | symbol) | (string | symbol)[]): void {\n    if (!this._rawSet) return;\n\n    const keys = Array.isArray(propertyKeys) ? propertyKeys : [propertyKeys];\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    \n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        if (keys.includes(queryInfo.propertyKey)) {\n          this._updateQueryBinding(queryInfo, this._rawSet, true); // Force update\n        }\n      }\n    }\n  }\n\n  /**\n   * Manually refresh specific event decorators by method name\n   * @param methodNames - Array of method names to refresh, or single method name\n   */\n  refreshEventDecorators(methodNames: (string | symbol) | (string | symbol)[]): void {\n    if (!this._rawSet) return;\n\n    const names = Array.isArray(methodNames) ? methodNames : [methodNames];\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    \n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        if (names.includes(eventInfo.methodName)) {\n          this._updateEventBinding(eventInfo, this._rawSet, true); // Force update\n        }\n      }\n    }\n  }\n\n  private _applyEventBinding(eventInfo: EventMetadata, elements: Element[]) {\n    elements.forEach(element => {\n      const listener = (this as any)[eventInfo.methodName].bind(this);\n      // console.log('bind?????', element);\n      element.addEventListener(eventInfo.eventName, listener);\n      \n      // Track bindings for cleanup\n      this._eventBindings.push({ element, metadata: eventInfo, listener });\n      this._boundEventListeners.push({ element, eventName: eventInfo.eventName, listener });\n    });\n  }\n\n  private _setupEventDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        const elements = this._queryElements(eventInfo.query, rawSet);\n        this._applyEventBinding(eventInfo, elements);\n        \n        // Setup refresh timer if specified\n        this._setupRefreshTimer(eventInfo);\n      }\n    }\n  }\n\n  private _updateEventBinding(eventInfo: EventMetadata, rawSet: RawSet, forceUpdate = false) {\n    const newElements = this._queryElements(eventInfo.query, rawSet);\n    \n    // Get current bindings for this event\n    const currentBindings = this._eventBindings.filter(binding => binding.metadata === eventInfo);\n    const currentElements = currentBindings.map(binding => binding.element);\n    \n    // Check if elements have changed\n    const elementsChanged = forceUpdate || !this._arraysEqual(currentElements, newElements);\n    \n    if (elementsChanged) {\n      if (forceUpdate) {\n        // Force update: cleanup all old bindings\n        currentBindings.forEach(({ element, metadata, listener }) => {\n          element.removeEventListener(metadata.eventName, listener);\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n      } else {\n        // Smart update: only cleanup removed elements\n        const removedElements = currentElements.filter(element => !newElements.includes(element));\n        const removedBindings = currentBindings.filter(binding => removedElements.includes(binding.element));\n        \n        removedBindings.forEach(({ element, metadata, listener }) => {\n          element.removeEventListener(metadata.eventName, listener);\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n      }\n      \n      // Remove old bindings from tracking arrays\n      this._eventBindings = this._eventBindings.filter(binding => binding.metadata !== eventInfo);\n      this._boundEventListeners = this._boundEventListeners.filter(binding => \n        !currentBindings.some(cb => cb.element === binding.element && cb.metadata.eventName === binding.eventName)\n      );\n      \n      // Apply new bindings\n      this._applyEventBinding(eventInfo, newElements);\n    }\n  }\n\n  private _updateEventDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        this._updateEventBinding(eventInfo, rawSet);\n      }\n    }\n  }\n\n  getAttribute<K extends keyof T>(name: K, attribute = this._attribute): T[K] | null {\n    const target = attribute as any;\n    if (!target) {\n      return null;\n    }\n\n    const nameString = String(name);\n    let p = nameString;\n    if (p in target) {\n      return target[p];\n    }\n    p = ConvertUtils.snakeToCamelCase(nameString);\n    if (p in target) {\n      return target[p];\n    }\n    p = ConvertUtils.camelToSnakeCase(nameString);\n    if (p in target) {\n      return target[p];\n    }\n    p = nameString.toUpperCase()\n    if (p in target) {\n      return target[p];\n    }\n    p = nameString.toLowerCase()\n    if (p in target) {\n      return target[p];\n    }\n    return null;\n  }\n\n  hasAttribute(name: keyof T) {\n    return this.getAttribute(name) !==null;\n  }\n\n  equalsAttributeName(n: string, name: keyof T) {\n    return n === name ||\n    ConvertUtils.snakeToCamelCase(n) === name ||\n    ConvertUtils.camelToSnakeCase(n) === name ||\n      n.toUpperCase() === (name as string).toUpperCase() ||\n      n.toLowerCase() === (name as string).toLowerCase()\n    ;\n  }\n\n  get uuid(): string | undefined {\n    return this._rawSet?.uuid;\n  }\n\n  get childrenSet() {\n    return this._children;\n  }\n\n  get children(): any[] {\n    return this._children.map(it=>it.instance);\n  }\n\n  getElement<T extends Element>(): T | undefined {\n    return (this.render ?? this.rawSet?.dataSet?.render)?.getElement?.();\n  }\n\n  getFirstChild<T>(type: ConstructorType<T>): T | undefined {\n    return this._children.find(it => it.instance instanceof type)?.instance;\n  }\n\n  getParentThis<P>():P {\n    return this.render?.parentThis as P;\n  }\n\n  getChildren<C extends ConstructorType<any>>(type: C): InstanceType<C>[];\n  getChildren<C extends ConstructorType<any>[]>(types: C): InstanceType<C[number]>[];\n  getChildren(typeOrTypes: ConstructorType<any> | ConstructorType<any>[]): any[] {\n    const targets = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];\n    return this._children.filter(childSet =>\n      targets.some(targetConstructor => childSet.instance instanceof targetConstructor)\n    )?.map(it=>it.instance);\n  }\n\n\n\n  private setRawSet(rawSet: RawSet) {\n    this._rawSet = rawSet;\n    if (this._rawSet) {\n      this.setAttribute(this._rawSet.dataSet?.render?.attribute as T);\n    }\n  }\n\n  setAttribute(attribute: T) {\n    this._attribute = attribute;\n  }\n\n  // TODO: rawSet isConnected로 체크해서 들어가있는것만 처리되도록 또는 이미들어가있는것도 뺴야될것같은데.. 적용하긴했음..지켜봐야될듯.\n  onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n    // console.log('onCreatedThisChild------------------------',child, data, data.render?.rawSet?.isConnected)\n    const n = [...this._children];\n    n.push({instance:child, data});\n    this._children = n.filter(it=>it.data.render?.rawSet?.isConnected)\n    this.childrenSetSubject.next(this._children);\n    \n    // Update decorators when children change (DOM might have changed)\n    // Only update if elements actually changed\n    if (this._rawSet) {\n      this._updateQueryDecorators(this._rawSet);\n      this._updateEventDecorators(this._rawSet);\n    }\n  }\n\n  onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n\n  }\n\n  onCreateRenderData(data: OnCreateRenderDataParams): void {\n    this._render = data.render;\n    if (data.render?.rawSet) {\n      this.setRawSet(data.render.rawSet);\n    }\n    if (this._config?.onlyParentType) {\n      const isOk = Array.isArray(this._config?.onlyParentType) ? this._config?.onlyParentType : [this._config?.onlyParentType].some(it => data.render?.parentThis instanceof it);\n      if (!isOk) {\n        throw new Error('only my parentThis ' + this._config?.onlyParentType);\n      }\n    }\n  }\n\n  onChangeAttrRender(name: string, value: any, other: OtherData): void {\n    if (other.rawSet) {\n      this.setRawSet(other.rawSet);\n    }\n\n    const attributes = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, this.constructor);\n    if (attributes && Array.isArray(attributes)) {\n        for (const attrInfo of attributes) {\n            if (this.equalsAttributeName(name, attrInfo.name as any)) {\n                const finalValue = attrInfo.converter ? attrInfo.converter(value) : value;\n                if (attrInfo.isMethod) {\n                    const method = (this as any)[attrInfo.propertyKey];\n                    if (typeof method === 'function') {\n                        method.call(this, finalValue);\n                    }\n                } else {\n                    (this as any)[attrInfo.propertyKey] = finalValue;\n                }\n            }\n        }\n    }\n  }\n\n  async onInitRender(param: any, rawSet: RawSet) {\n    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(debounceTime(this.componentConfig?.createChildrenDebounce??0)).subscribe(it => {\n      this.onCreatedThisChildDebounce(it);\n    });\n    if (rawSet) {\n      this.setRawSet(rawSet);\n\n      const e = this.getElement();\n      if (e) {\n        (e as any).component = this;\n      }\n\n      // Setup decorators\n      this._setupQueryDecorators(rawSet);\n      this._setupEventDecorators(rawSet);\n    }\n  }\n\n  onDrThisBind() {\n    // Logic moved to onInitRender for robustness\n  }\n\n  onDrThisUnBind() {\n    this.onDestroy();\n  }\n\n  onDestroyRender(data?: OnDestroyRenderParams): void {\n    this.onDestroy();\n  }\n\n  onDestroy() {\n    this._cleanupEventListeners();\n    this._cleanupQueryBindings();\n    this._cleanupEventBindings();\n    this._clearAllRefreshTimers();\n    this.createChildrenDebounceSubscription?.unsubscribe();\n  }\n\n}\n"],
-  "mappings": "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",
-  "names": ["attribute"]
+  "sourcesContent": ["import { ElementUtils } from '@dooboostore/core-web';\nimport { OnChangeAttrRender, OtherData } from '../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderData, OnCreateRenderDataParams } from '../lifecycle/OnCreateRenderData';\nimport { RawSet } from '../rawsets/RawSet';\nimport { ConstructorType } from '@dooboostore/core';\nimport { OnCreatedThisChild } from '../lifecycle/OnCreatedThisChild';\nimport { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';\nimport { OnInitRender } from '../lifecycle/OnInitRender';\nimport { ConvertUtils } from '@dooboostore/core';\nimport { OnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRender';\nimport { OnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';\nimport { OnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';\nimport type { Render } from '../rawsets/Render';\nimport { ReflectUtils } from '@dooboostore/core';\nimport { DomRenderConfig } from '../configs/DomRenderConfig';\nimport { Subject } from '@dooboostore/core';\nimport { MessageOperator } from '@dooboostore/core';\nimport type { Subscription } from '@dooboostore/core';\nimport { OnRawSetRendered, OnRawSetRenderedOtherData } from \"../lifecycle/OnRawSetRendered\";\nimport {OnChildRawSetRendered} from \"../lifecycle/OnChildRawSetRendered\";\n\n\nexport const ATTRIBUTE_METADATA_KEY = Symbol('attribute');\nexport const QUERY_METADATA_KEY = Symbol('query');\nexport const EVENT_METADATA_KEY = Symbol('event');\n\nexport interface AttributeMetadata {\n    propertyKey: string | symbol;\n    name: string;\n    converter?: (value: any | string | null) => any;\n    isMethod: boolean;\n}\n\nexport interface QueryMetadata {\n    selector: string;\n    propertyKey: string | symbol;\n    isMethod: boolean;\n    convert?: (e: Element) => any;\n    onDestroy?: (componentInstance: any, element: Element) => void;\n    refreshTime?: number; // milliseconds\n    refreshRawSetRendered?: boolean;\n}\n\nexport interface EventMetadata {\n    query: string;\n    eventName: string;\n    methodName: string | symbol;\n    onDestroy?: (componentInstance: any, element: Element) => void;\n    refreshTime?: number; // milliseconds\n    refreshRawSetRendered?: boolean;\n}\n\nexport function attribute(nameOrOptions?: string | { name?: string, converter?: (value: any | string | null) => any }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {\n    return (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n        const attributes = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, target.constructor) || [];\n        \n        let name: string;\n        let converter: ((value: any | string | null) => any) | undefined;\n        \n        if (typeof nameOrOptions === 'string') {\n            name = nameOrOptions;\n        } else if (nameOrOptions) {\n            name = nameOrOptions.name || String(propertyKey);\n            converter = nameOrOptions.converter;\n        } else {\n            name = String(propertyKey);\n        }\n        \n        const attributeMetadata: AttributeMetadata = {\n            propertyKey: propertyKey,\n            name: name,\n            converter: converter,\n            isMethod: !!descriptor\n        };\n        \n        attributes.push(attributeMetadata);\n        ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, attributes, target.constructor);\n    };\n}\n\nexport function query(selectorOrOptions: string | { selector: string, convert?: (e: Element) => any, onDestroy?: (componentInstance: any, element: Element) => void, refreshIntervalTime?: number, refreshRawSetRendered?: boolean }): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void {\n    return (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {\n        const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, target.constructor) || [];\n        \n        let selector: string;\n        let convert: ((e: Element) => any) | undefined;\n        let onDestroy: ((componentInstance: any, element: Element) => void) | undefined;\n        let refreshTime: number | undefined;\n        let refreshRawSetRendered: boolean | undefined;\n\n        if (typeof selectorOrOptions === 'string') {\n            selector = selectorOrOptions;\n        } else {\n            selector = selectorOrOptions.selector;\n            convert = selectorOrOptions.convert;\n            onDestroy = selectorOrOptions.onDestroy;\n            refreshTime = selectorOrOptions.refreshIntervalTime;\n            refreshRawSetRendered = selectorOrOptions.refreshRawSetRendered;\n        }\n        \n        const queryMetadata: QueryMetadata = {\n            selector: selector,\n            propertyKey: propertyKey,\n            isMethod: !!descriptor,\n            convert: convert,\n            onDestroy: onDestroy,\n            refreshTime: refreshTime,\n            refreshRawSetRendered\n        };\n        \n        queries.push(queryMetadata);\n        ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, target.constructor);\n    };\n}\n\nexport function event(options: { query: string, name: string, onDestroy?: (componentInstance: any, element: Element) => void, refreshTime?: number, refreshRawSetRendered?: boolean }): MethodDecorator {\n    return (target: object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n        const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, target.constructor) || [];\n        \n        const eventMetadata: EventMetadata = {\n            query: options.query,\n            eventName: options.name,\n            methodName: propertyKey,\n            onDestroy: options.onDestroy,\n            refreshTime: options.refreshTime,\n            refreshRawSetRendered: options.refreshRawSetRendered\n        };\n        \n        events.push(eventMetadata);\n        ReflectUtils.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);\n    };\n}\n\n\nexport type ComponentBaseConfig = { onlyParentType?: ConstructorType<any>[] | ConstructorType<any>,\n  createChildrenDebounce?: number,\n  onRawSetRenderedOtherDataDebounce?: number\n  onChildRawSetRenderedOtherDataDebounce?: number\n};\n\nexport type ChildrenSet = { instance: any, data: OnCreateRenderDataParams };\n\nexport class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender, OnRawSetRendered, OnChildRawSetRendered {\n  @DomRenderNoProxy\n  private _rawSet?: RawSet;\n  @DomRenderNoProxy\n  private _children: ChildrenSet[] = [];\n  @DomRenderNoProxy\n  private _render: Render | undefined;\n  @DomRenderNoProxy\n  private _attribute?: T;\n  @DomRenderNoProxy\n  private _boundEventListeners: { element: Element, eventName: string, listener: (e: Event) => void }[] = [];\n  @DomRenderNoProxy\n  private _queryBindings: { element: Element, metadata: QueryMetadata }[] = [];\n  @DomRenderNoProxy\n  private _eventBindings: { element: Element, metadata: EventMetadata, listener: (e: Event) => void }[] = [];\n  @DomRenderNoProxy\n  private _refreshTimers: Map<QueryMetadata | EventMetadata, NodeJS.Timeout> = new Map();\n\n  @DomRenderNoProxy\n  private childrenSetSubject = new Subject<ChildrenSet[]>();\n  @DomRenderNoProxy\n  private createChildrenDebounceSubscription?: Subscription | undefined;\n  @DomRenderNoProxy\n  private onRawSetRenderedOtherDataSubject = new Subject<OnRawSetRenderedOtherData>();\n  @DomRenderNoProxy\n  private onChildRawSetRenderedOtherDataSubject = new Subject<void>();\n  @DomRenderNoProxy\n  private onRawSetRenderedOtherDataSubjectSubscription?: Subscription | undefined;\n  @DomRenderNoProxy\n  private onChildRawSetRenderedOtherDataSubjectSubscription?: Subscription | undefined;\n\n  constructor(private _config?: C) {\n    // console.log('ComponentBase created', this);\n    // setTimeout(()=>{\n    //   console.log('ComponentBase created', this.constructor.name, this._rawSet?.uuid);\n    // }, 1000)\n  }\n  get componentConfig(): C | undefined {\n    return this._config;\n  }\n  get render(): Render | undefined {\n    return this._render;\n  }\n\n  get rawSet(): RawSet | undefined {\n    return this._rawSet;\n  }\n\n  get domRenderConfig(): DomRenderConfig | undefined {\n    return this.rawSet?.dataSet.config;\n  }\n\n  private _queryElements(selector: string, rawSet:RawSet): Element[] {\n    const e = this.getElement();\n    // console.log('queryElement-->', e);\n    if (e) {\n      return ElementUtils.querySelectorAll(e, selector);\n    } else {\n      let startNode = rawSet.point?.start;\n      let endNode = rawSet.point?.end;\n      // console.log('-----', startNode, endNode)\n      // console.log('-----', startNode?.isConnected, endNode?.isConnected)\n      if (rawSet.point?.start && startNode && !startNode.isConnected && startNode instanceof HTMLElement && startNode.hasAttribute('id')) {\n        rawSet.point.start = startNode = rawSet.dataSet.config.window.document.querySelector('#' + startNode.id) as HTMLMetaElement\n      }\n      if (rawSet.point?.end && endNode && !endNode.isConnected && endNode instanceof HTMLElement && endNode.hasAttribute('id')) {\n        rawSet.point.end = endNode = rawSet.dataSet.config.window.document.querySelector('#' + endNode.id) as HTMLMetaElement\n      }\n      if (startNode && endNode) {\n        // console.log('query!!', startNode, endNode);\n        return ElementUtils.querySelectorAll({ start: startNode as Element, end: endNode as Element }, selector);\n      }\n    }\n    return [];\n  }\n\n  private _cleanupEventListeners() {\n    for (const { element, eventName, listener } of this._boundEventListeners) {\n      element.removeEventListener(eventName, listener);\n    }\n    this._boundEventListeners = [];\n  }\n\n  private _cleanupQueryBindings() {\n    for (const { element, metadata } of this._queryBindings) {\n      if (metadata.onDestroy) {\n        metadata.onDestroy(this, element);\n      }\n      this._clearRefreshTimer(metadata);\n    }\n    this._queryBindings = [];\n  }\n\n  private _cleanupEventBindings() {\n    for (const { element, metadata, listener } of this._eventBindings) {\n      element.removeEventListener(metadata.eventName, listener);\n      if (metadata.onDestroy) {\n        metadata.onDestroy(this, element);\n      }\n      this._clearRefreshTimer(metadata);\n    }\n    this._eventBindings = [];\n  }\n\n  private _applyQueryBinding(queryInfo: QueryMetadata, elements: Element[], newElementsOnly: Element[] = elements) {\n    const { propertyKey, isMethod, convert } = queryInfo;\n    \n    // Track bindings for cleanup\n    elements.forEach(element => {\n      this._queryBindings.push({ element, metadata: queryInfo });\n    });\n    \n    // Apply convert function if provided\n    const processedElements = convert ? elements.map(convert) : elements;\n    const processedNewElements = convert ? newElementsOnly.map(convert) : newElementsOnly;\n    \n    if (isMethod) {\n      const method = (this as any)[propertyKey];\n      if (typeof method === 'function') {\n          const paramTypes = ReflectUtils.getParameterTypes(this, propertyKey);\n          if (paramTypes && paramTypes.length > 0 && paramTypes[0] === Array) {\n              // For array methods, pass only new elements\n              method.call(this, processedNewElements, {all: processedElements});\n          } else {\n              // For single element methods, pass first new element\n              if (processedNewElements.length > 0) {\n                  method.call(this, processedNewElements[0], {all: processedElements, newAll: processedNewElements});\n              }\n          }\n      }\n    } else {\n      // For properties, always set all elements (not just new ones)\n      const propertyType = ReflectUtils.getType(this, propertyKey);\n      if (propertyType === Array) {\n        (this as any)[propertyKey] = processedElements;\n      } else {\n        (this as any)[propertyKey] = processedElements[0] || null;\n      }\n    }\n  }\n\n  private _setupQueryDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    // console.group('_setupQueryDecorators')\n    // console.log('queries', queries);\n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        const elements = this._queryElements(queryInfo.selector, rawSet);\n        // console.log('------elements', elements);\n        this._applyQueryBinding(queryInfo, elements);\n        \n        // Setup refresh timer if specified\n        this._setupRefreshTimer(queryInfo);\n      }\n    }\n    // console.groupEnd();\n  }\n\n  private _updateQueryBinding(queryInfo: QueryMetadata, rawSet: RawSet, forceUpdate = false) {\n    const newElements = this._queryElements(queryInfo.selector, rawSet);\n    \n    // Get current bindings for this query\n    const currentBindings = this._queryBindings.filter(binding => binding.metadata === queryInfo);\n    const currentElements = currentBindings.map(binding => binding.element);\n    \n    // Check if elements have changed\n    const elementsChanged = forceUpdate || !this._arraysEqual(currentElements, newElements);\n    \n    if (elementsChanged) {\n      let addedElements: Element[] = [];\n      \n      if (forceUpdate) {\n        // Force update: cleanup all old bindings, treat all as new\n        currentBindings.forEach(({ element, metadata }) => {\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n        addedElements = newElements;\n      } else {\n        // Smart update: only cleanup removed elements, find added elements\n        const removedElements = currentElements.filter(element => !newElements.includes(element));\n        addedElements = newElements.filter(element => !currentElements.includes(element));\n        \n        removedElements.forEach(element => {\n          if (queryInfo.onDestroy) {\n            queryInfo.onDestroy(this, element);\n          }\n        });\n      }\n      \n      // Remove old bindings\n      this._queryBindings = this._queryBindings.filter(binding => binding.metadata !== queryInfo);\n      \n      // Apply new bindings, but pass only added elements to methods\n      this._applyQueryBinding(queryInfo, newElements, addedElements);\n    }\n  }\n\n  private _updateQueryDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        this._updateQueryBinding(queryInfo, rawSet);\n      }\n    }\n  }\n\n  private _arraysEqual(arr1: Element[], arr2: Element[]): boolean {\n    if (arr1.length !== arr2.length) return false;\n    return arr1.every((element, index) => element === arr2[index]);\n  }\n\n  private _setupRefreshTimer(metadata: QueryMetadata | EventMetadata) {\n    if (!metadata.refreshTime || !this._rawSet) return;\n\n    const timer = setInterval(() => {\n      if (!this._rawSet) return;\n\n      if ('selector' in metadata) {\n        // QueryMetadata\n        this._updateQueryBinding(metadata as QueryMetadata, this._rawSet);\n      } else {\n        // EventMetadata\n        this._updateEventBinding(metadata as EventMetadata, this._rawSet);\n      }\n    }, metadata.refreshTime);\n\n    this._refreshTimers.set(metadata, timer);\n  }\n\n  private _clearRefreshTimer(metadata: QueryMetadata | EventMetadata) {\n    const timer = this._refreshTimers.get(metadata);\n    if (timer) {\n      clearInterval(timer);\n      this._refreshTimers.delete(metadata);\n    }\n  }\n\n  private _clearAllRefreshTimers() {\n    for (const timer of Array.from(this._refreshTimers.values())) {\n      clearInterval(timer);\n    }\n    this._refreshTimers.clear();\n  }\n\n  async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {\n    this.onRawSetRenderedOtherDataSubject.next(otherData);\n    // this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(debounceTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??0)).subscribe(it => {\n    //   this.onRawSetRenderedDebounce(it);\n    // });\n\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    if (queries) {\n      queries.filter(it => it.refreshRawSetRendered).forEach(queryInfo => {\n        this._updateQueryBinding(queryInfo, rawSet, true);\n      });\n    }\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events) {\n      events.filter(it => it.refreshRawSetRendered).forEach(eventInfo => {\n        this._updateEventBinding(eventInfo, rawSet, true);\n      });\n    }\n  }\n\n  async onChildRawSetRendered(): Promise<void> {\n    this.onChildRawSetRenderedOtherDataSubject.next();\n  }\n\n  /**\n   * Manually refresh all query and event decorators\n   * Useful when DOM elements are dynamically added/removed and you want to update bindings\n   */\n  refreshDecorators(): void {\n    if (this._rawSet) {\n      this._updateQueryDecorators(this._rawSet);\n      this._updateEventDecorators(this._rawSet);\n    }\n  }\n\n  /**\n   * Manually refresh specific query decorators by property key\n   * @param propertyKeys - Array of property keys to refresh, or single property key\n   */\n  refreshQueryDecorators(propertyKeys: (string | symbol) | (string | symbol)[]): void {\n    if (!this._rawSet) return;\n\n    const keys = Array.isArray(propertyKeys) ? propertyKeys : [propertyKeys];\n    const queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, this.constructor);\n    \n    if (queries && Array.isArray(queries)) {\n      for (const queryInfo of queries) {\n        if (keys.includes(queryInfo.propertyKey)) {\n          this._updateQueryBinding(queryInfo, this._rawSet, true); // Force update\n        }\n      }\n    }\n  }\n\n  /**\n   * Manually refresh specific event decorators by method name\n   * @param methodNames - Array of method names to refresh, or single method name\n   */\n  refreshEventDecorators(methodNames: (string | symbol) | (string | symbol)[]): void {\n    if (!this._rawSet) return;\n\n    const names = Array.isArray(methodNames) ? methodNames : [methodNames];\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    \n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        if (names.includes(eventInfo.methodName)) {\n          this._updateEventBinding(eventInfo, this._rawSet, true); // Force update\n        }\n      }\n    }\n  }\n\n  private _applyEventBinding(eventInfo: EventMetadata, elements: Element[]) {\n    elements.forEach(element => {\n      const listener = (this as any)[eventInfo.methodName].bind(this);\n      // console.log('bind?????', element);\n      element.addEventListener(eventInfo.eventName, listener);\n      \n      // Track bindings for cleanup\n      this._eventBindings.push({ element, metadata: eventInfo, listener });\n      this._boundEventListeners.push({ element, eventName: eventInfo.eventName, listener });\n    });\n  }\n\n  private _setupEventDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        const elements = this._queryElements(eventInfo.query, rawSet);\n        this._applyEventBinding(eventInfo, elements);\n        \n        // Setup refresh timer if specified\n        this._setupRefreshTimer(eventInfo);\n      }\n    }\n  }\n\n  private _updateEventBinding(eventInfo: EventMetadata, rawSet: RawSet, forceUpdate = false) {\n    const newElements = this._queryElements(eventInfo.query, rawSet);\n    \n    // Get current bindings for this event\n    const currentBindings = this._eventBindings.filter(binding => binding.metadata === eventInfo);\n    const currentElements = currentBindings.map(binding => binding.element);\n    \n    // Check if elements have changed\n    const elementsChanged = forceUpdate || !this._arraysEqual(currentElements, newElements);\n    \n    if (elementsChanged) {\n      if (forceUpdate) {\n        // Force update: cleanup all old bindings\n        currentBindings.forEach(({ element, metadata, listener }) => {\n          element.removeEventListener(metadata.eventName, listener);\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n      } else {\n        // Smart update: only cleanup removed elements\n        const removedElements = currentElements.filter(element => !newElements.includes(element));\n        const removedBindings = currentBindings.filter(binding => removedElements.includes(binding.element));\n        \n        removedBindings.forEach(({ element, metadata, listener }) => {\n          element.removeEventListener(metadata.eventName, listener);\n          if (metadata.onDestroy) {\n            metadata.onDestroy(this, element);\n          }\n        });\n      }\n      \n      // Remove old bindings from tracking arrays\n      this._eventBindings = this._eventBindings.filter(binding => binding.metadata !== eventInfo);\n      this._boundEventListeners = this._boundEventListeners.filter(binding => \n        !currentBindings.some(cb => cb.element === binding.element && cb.metadata.eventName === binding.eventName)\n      );\n      \n      // Apply new bindings\n      this._applyEventBinding(eventInfo, newElements);\n    }\n  }\n\n  private _updateEventDecorators(rawSet: RawSet) {\n    if (!rawSet) return;\n\n    const events = ReflectUtils.getMetadata<EventMetadata[]>(EVENT_METADATA_KEY, this.constructor);\n    if (events && Array.isArray(events)) {\n      for (const eventInfo of events) {\n        this._updateEventBinding(eventInfo, rawSet);\n      }\n    }\n  }\ngetAttributeNames(attribute = this._attribute): string[] {\n  const target = attribute as any;\n  if (!target) return [];\n  const keys = Object.keys(target);\n  const names = new Set<string>();\n  for (const k of keys) {\n    names.add(k);\n    // names.add(ConvertUtils.camelToSnakeCase(k));\n    // names.add(ConvertUtils.snakeToCamelCase(k));\n    // names.add(k.toLowerCase());\n    // names.add(k.toUpperCase());\n  }\n  return Array.from(names);\n}\n  getAttribute<K extends keyof T>(name: K, attribute = this._attribute): T[K] | null {\n    const target = attribute as any;\n    if (!target) {\n      return null;\n    }\n\n    const nameString = String(name);\n    let p = nameString;\n    if (p in target) {\n      return target[p];\n    }\n    p = ConvertUtils.snakeToCamelCase(nameString);\n    if (p in target) {\n      return target[p];\n    }\n    p = ConvertUtils.camelToSnakeCase(nameString);\n    if (p in target) {\n      return target[p];\n    }\n    p = nameString.toUpperCase()\n    if (p in target) {\n      return target[p];\n    }\n    p = nameString.toLowerCase()\n    if (p in target) {\n      return target[p];\n    }\n    return null;\n  }\n\n  hasAttribute(name: keyof T) {\n    return this.getAttribute(name) !==null;\n  }\n\n  equalsAttributeName(n: string, name: keyof T) {\n    return n === name ||\n    ConvertUtils.snakeToCamelCase(n) === name ||\n    ConvertUtils.camelToSnakeCase(n) === name ||\n      n.toUpperCase() === (name as string).toUpperCase() ||\n      n.toLowerCase() === (name as string).toLowerCase()\n    ;\n  }\n\n  get uuid(): string | undefined {\n    return this._rawSet?.uuid;\n  }\n\n  get childrenSet() {\n    return this._children;\n  }\n\n  get children(): any[] {\n    return this._children.map(it=>it.instance);\n  }\n\n  getElement<T extends Element>(): T | undefined {\n    return (this.render ?? this.rawSet?.dataSet?.render)?.getElement?.();\n  }\n\n  getFirstChild<T>(type: ConstructorType<T>): T | undefined {\n    return this._children.find(it => it.instance instanceof type)?.instance;\n  }\n\n  getParentThis<P>():P {\n    return this.render?.parentThis as P;\n  }\n\n  getChildren<C extends ConstructorType<any>>(type: C): InstanceType<C>[];\n  getChildren<C extends ConstructorType<any>[]>(types: C): InstanceType<C[number]>[];\n  getChildren(typeOrTypes: ConstructorType<any> | ConstructorType<any>[]): any[] {\n    const targets = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];\n    return this._children.filter(childSet =>\n      targets.some(targetConstructor => childSet.instance instanceof targetConstructor)\n    )?.map(it=>it.instance);\n  }\n\n\n\n  private setRawSet(rawSet: RawSet) {\n    this._rawSet = rawSet;\n    if (this._rawSet) {\n      this.setAttribute(this._rawSet.dataSet?.render?.attribute as T);\n    }\n  }\n\n  setAttribute(attribute: T) {\n    this._attribute = attribute;\n  }\n\n  // TODO: rawSet isConnected로 체크해서 들어가있는것만 처리되도록 또는 이미들어가있는것도 뺴야될것같은데.. 적용하긴했음..지켜봐야될듯.\n  onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n    // console.log('onCreatedThisChild------------------------',child, data, data.render?.rawSet?.isConnected)\n    const n = [...this._children];\n    n.push({instance:child, data});\n    this._children = n.filter(it=>it.data.render?.rawSet?.isConnected)\n    this.childrenSetSubject.next(this._children);\n    \n    // Update decorators when children change (DOM might have changed)\n    // Only update if elements actually changed\n    if (this._rawSet) {\n      this._updateQueryDecorators(this._rawSet);\n      this._updateEventDecorators(this._rawSet);\n    }\n  }\n\n  onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n  }\n  onRawSetRenderedDebounce(childrenSet: OnRawSetRenderedOtherData[]) {\n  }\n  onChildRawSetRenderedDebounce(){\n\n  }\n\n  onCreateRenderData(data: OnCreateRenderDataParams): void {\n    this._render = data.render;\n    if (data.render?.rawSet) {\n      this.setRawSet(data.render.rawSet);\n    }\n    if (this._config?.onlyParentType) {\n      const isOk = Array.isArray(this._config?.onlyParentType) ? this._config?.onlyParentType : [this._config?.onlyParentType].some(it => data.render?.parentThis instanceof it);\n      if (!isOk) {\n        throw new Error('only my parentThis ' + this._config?.onlyParentType);\n      }\n    }\n  }\n\n  onChangeAttrRender(name: string, value: any, other: OtherData): void {\n    if (other?.rawSet) {\n      this.setRawSet(other.rawSet);\n    }\n\n    const attributes = ReflectUtils.getMetadata<AttributeMetadata[]>(ATTRIBUTE_METADATA_KEY, this.constructor);\n    if (attributes && Array.isArray(attributes)) {\n        for (const attrInfo of attributes) {\n            if (this.equalsAttributeName(name, attrInfo.name as any)) {\n                const finalValue = attrInfo.converter ? attrInfo.converter(value) : value;\n                if (attrInfo.isMethod) {\n                    const method = (this as any)[attrInfo.propertyKey];\n                    if (typeof method === 'function') {\n                        method.call(this, finalValue);\n                    }\n                } else {\n                    (this as any)[attrInfo.propertyKey] = finalValue;\n                }\n            }\n        }\n    }\n  }\n\n  async onInitRender(param: any, rawSet: RawSet) {\n\n    // console.log('onInitRender ComponentBase', this.constructor.name, rawSet?.uuid);\n    const window = rawSet.dataSet?.config?.window;\n    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(\n      MessageOperator.debounceTime(this.componentConfig?.createChildrenDebounce??1, {\n        setTimeout: window ? window.setTimeout.bind(window) : undefined,\n        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,\n      })\n    ).subscribe(it => {\n      // console.log('call onCreatedThisChildDebounce', it);\n      this.onCreatedThisChildDebounce(it);\n    });\n    this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(\n      MessageOperator.bufferTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??1, {\n        skipEmpty: true,\n        setInterval: window ? window.setInterval.bind(window) : undefined,\n        clearInterval: window ? window.clearInterval.bind(window) : undefined,\n        setTimeout: window ? window.setTimeout.bind(window) : undefined,\n        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,\n      })\n    ).subscribe(it => {\n      this.onRawSetRenderedDebounce(it);\n    });\n    this.onChildRawSetRenderedOtherDataSubjectSubscription = this.onChildRawSetRenderedOtherDataSubject.pipe(\n      MessageOperator.debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??10, {\n        setTimeout: window ? window.setTimeout.bind(window) : undefined,\n        clearTimeout: window ? window.clearTimeout.bind(window) : undefined,\n      })\n    ).subscribe(it => {\n      this.onChildRawSetRenderedDebounce();\n    });\n    if (rawSet) {\n      this.setRawSet(rawSet);\n\n      const e = this.getElement();\n      if (e) {\n        (e as any).component = this;\n      }\n\n      // Setup decorators\n      this._setupQueryDecorators(rawSet);\n      this._setupEventDecorators(rawSet);\n    }\n  }\n\n  onDrThisBind() {\n    // Logic moved to onInitRender for robustness\n  }\n\n  onDrThisUnBind() {\n    this.onDestroy();\n  }\n\n  onDestroyRender(data?: OnDestroyRenderParams): void {\n    this.onDestroy();\n  }\n\n  onDestroy() {\n    this._cleanupEventListeners();\n    this._cleanupQueryBindings();\n    this._cleanupEventBindings();\n    this._clearAllRefreshTimers();\n    this.createChildrenDebounceSubscription?.unsubscribe();\n    this.onRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();\n    this.onChildRawSetRenderedOtherDataSubjectSubscription?.unsubscribe();\n    // console.log('ComponentBase onDestroy', this.constructor.name, this.onRawSetRenderedOtherDataSubjectSubscription.closed);\n  }\n\n}\n"],
+  "mappings": "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",
+  "names": ["import_core", "attribute"]
 }

package/dist/cjs/components/ComponentSet.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/ComponentSet.ts"],
-  "sourcesContent": ["import { DomRenderFinalProxy } from '../types/Types';\n\nexport type ComponentSetConfig = {objPath?: string | null, beforeComponentSet?: ComponentSet};\nexport class ComponentSet<T = any> {\n    private _config: ComponentSetConfig;\n    private _template?: string;\n    private _styles?: string[] | string;\n    constructor(public obj: T, source: {template?: string, styles?: (string[]) | string}, config?: ComponentSetConfig) {\n        this._template = source.template;\n        this._styles = source.styles;\n        this._config = DomRenderFinalProxy.final(Object.assign({objPath: 'obj'} as ComponentSetConfig, config))\n    }\n    get template() {\n        return this._template;\n    }\n    get styles() {\n        return this._styles;\n    }\n    get config() {\n        return this._config;\n    }\n    public setTemplateStyle(set: {template?: string, styles?: string | (string[])}) {\n        this._template = set.template;\n        this._styles = set.styles;\n    }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC;AAG7B,MAAM,aAAsB;AAAA,EAI/B,YAAmB,KAAQ,QAA2D,QAA6B;AAAhG;AACf,SAAK,YAAY,OAAO;AACxB,SAAK,UAAU,OAAO;AACtB,SAAK,UAAU,iCAAoB,MAAM,OAAO,OAAO,EAAC,SAAS,MAAK,GAAyB,MAAM,CAAC;AAAA,EAC1G;AAAA,EACA,IAAI,WAAW;AACX,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAI,SAAS;AACT,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAI,SAAS;AACT,WAAO,KAAK;AAAA,EAChB;AAAA,EACO,iBAAiB,KAAwD;AAC5E,SAAK,YAAY,IAAI;AACrB,SAAK,UAAU,IAAI;AAAA,EACvB;AACJ;",
+  "sourcesContent": ["import { DomRenderFinalProxy } from '../types/Types';\n\nexport type ComponentSetConfig = {objPath?: string | null, beforeComponentSet?: ComponentSet};\nexport class ComponentSet<T = any> {\n    private _config: ComponentSetConfig;\n    private _template?: string|(<T>(instance: T) => Promise<string>);\n    private _styles?: string[] | string|(<T>(instance: T) => Promise<string>);\n    constructor(public obj: T, source: {template?: string|(<T>(instance: T) => Promise<string>), styles?: (string[]) | string|(<T>(instance: T) => Promise<string>)}, config?: ComponentSetConfig) {\n        this._template = source.template;\n        this._styles = source.styles;\n        this._config = DomRenderFinalProxy.final(Object.assign({objPath: 'obj'} as ComponentSetConfig, config))\n    }\n    get template() {\n        return this._template;\n    }\n    get styles() {\n        return this._styles;\n    }\n    get config() {\n        return this._config;\n    }\n    public setTemplateStyle(set: {template?: string, styles?: string | (string[])}) {\n        this._template = set.template;\n        this._styles = set.styles;\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoC;AAG7B,MAAM,aAAsB;AAAA,EAI/B,YAAmB,KAAQ,QAAuI,QAA6B;AAA5K;AACf,SAAK,YAAY,OAAO;AACxB,SAAK,UAAU,OAAO;AACtB,SAAK,UAAU,iCAAoB,MAAM,OAAO,OAAO,EAAC,SAAS,MAAK,GAAyB,MAAM,CAAC;AAAA,EAC1G;AAAA,EACA,IAAI,WAAW;AACX,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAI,SAAS;AACT,WAAO,KAAK;AAAA,EAChB;AAAA,EACA,IAAI,SAAS;AACT,WAAO,KAAK;AAAA,EAChB;AAAA,EACO,iBAAiB,KAAwD;AAC5E,SAAK,YAAY,IAAI;AACrB,SAAK,UAAU,IAAI;AAAA,EACvB;AACJ;",
   "names": []
 }

package/dist/cjs/components/a/A.js CHANGED Viewed

@@ -43,6 +43,7 @@ var A;
       this.target = null;
       this.style = null;
       this.classAttr = null;
+      this.drClass = null;
       this.click = null;
       this.replace = false;
       this.scrollToTop = true;
@@ -67,6 +68,21 @@ var A;
         this.domRenderConfig?.router?.go({ path: this.href, replace: this.replace, scrollToTop: this.scrollToTop });
       }
     }
+    onChangeAttrRender(name, value, other) {
+      super.onChangeAttrRender(name, value, other);
+      if (this.element && name.startsWith("attribute-")) {
+        this.element.setAttribute(name, value);
+      }
+    }
+    onAElementInit($element) {
+      this.element = $element;
+      this.getAttribute("onInit")?.($element);
+      this.getAttributeNames().filter((it) => it.startsWith("attribute-")).forEach((it) => {
+        const attrName = it.replace(/^attribute-/, "");
+        const attrValue = this.getAttribute(it);
+        this.element.setAttribute(attrName, attrValue);
+      });
+    }
   }
   __decorate([
     (0, import_ComponentBase.attribute)({ converter: (v) => v || null }),
@@ -84,6 +100,10 @@ var A;
     (0, import_ComponentBase.attribute)({ name: "class", converter: (v) => v || null }),
     __metadata("design:type", String)
   ], A2.prototype, "classAttr", void 0);
+  __decorate([
+    (0, import_ComponentBase.attribute)({ name: "dr-class", converter: (v) => v || null }),
+    __metadata("design:type", String)
+  ], A2.prototype, "drClass", void 0);
   __decorate([
     (0, import_ComponentBase.attribute)(),
     __metadata("design:type", Function)
@@ -108,6 +128,8 @@ var A_default = {
         style="\${@this@.style}$"
         class="\${@this@.classAttr}$"
         dr-event-click="@this@.onClick($event)"
+        dr-class="\${@this@.drClass}$"
+        dr-on-init="@this@.onAElementInit($element)"
       >#innerHTML#</a>`,
       objFactory: (e, o, r2, constructorParam) => {
         return import_DomRender.DomRender.run({ rootObject: new A.A(...constructorParam), config });

package/dist/cjs/components/a/A.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/a/A.ts"],
-  "sourcesContent": ["import { attribute, ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\n\nexport namespace A {\n  export const selector = 'dr-a';\n\n  export type ClickCallbackData = {\n      event: MouseEvent,\n      attributes: {\n          href: string | null;\n          target: string | null;\n          style: string | null;\n          class: string | null;\n          replace?: boolean;\n          scrollToTop?: boolean;\n      }\n  }\n\n  export type Attribute = {\n    href?: string | null;\n    target?: string | null;\n    style?: string | null;\n    class?: string | null;\n    click?: ((data: ClickCallbackData) => void) | null;\n    replace?: boolean | null;\n    scrollToTop?: boolean | null;\n  };\n\n  export class A extends ComponentBase<Attribute> {\n    @attribute({ converter: v => v || null }) href: string | null = null;\n    @attribute({ converter: v => v || null }) target: string | null = null;\n    @attribute({ converter: v => v || null }) style: string | null = null;\n    @attribute({ name: 'class', converter: v => v || null }) classAttr: string | null = null;\n    @attribute() click?: ((data: ClickCallbackData) => void) | null = null;\n    @attribute({ converter: v => v !== null && String(v) !== 'false' }) replace = false;\n    @attribute({ converter: v => v !== null && String(v) !== 'false' }) scrollToTop = true;\n\n    onClick(event: MouseEvent) {\n      if (this.click) {\n          const attributes = {\n              href: this.href,\n              target: this.target,\n              style: this.style,\n              class: this.classAttr,\n              replace: this.replace,\n              scrollToTop: this.scrollToTop\n          };\n          this.click({ event, attributes });\n      }\n\n      if (event.defaultPrevented) {\n          return;\n      }\n\n      if (this.target !== '_blank' && this.href) {\n        event.preventDefault();\n        // console.log('scrollTop', this.scrollToTop);\n        this.domRenderConfig?.router?.go({path: this.href, replace: this.replace, scrollToTop: this.scrollToTop });\n      }\n    }\n  }\n}\n\nexport default {\n  a: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: A.selector,\n      template: `<a\n        href=\"\\${@this@.href}$\"\n        target=\"\\${@this@.target}$\"\n        style=\"\\${@this@.style}$\"\n        class=\"\\${@this@.classAttr}$\"\n        dr-event-click=\"@this@.onClick($event)\"\n      >#innerHTML#</a>`,\n      objFactory: (e, o, r2, constructorParam) => {\n        return DomRender.run({ rootObject: new A.A(...constructorParam), config });\n      },\n    });\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAAyC;AACzC,uBAA8C;AAC9C,oBAAuB;;;;;;;;;;AAEjB,IAAW;CAAjB,SAAiB,KAAC;AACH,MAAA,WAAW;EAwBxB,MAAaA,WAAU,mCAAwB;IAA/C,cAAA;;AAC4C,WAAA,OAAsB;AACtB,WAAA,SAAwB;AACxB,WAAA,QAAuB;AACR,WAAA,YAA2B;AACvE,WAAA,QAAqD;AACE,WAAA,UAAU;AACV,WAAA,cAAc;IAyBpF;IAvBE,QAAQ,OAAiB;AACvB,UAAI,KAAK,OAAO;AACZ,cAAM,aAAa;UACf,MAAM,KAAK;UACX,QAAQ,KAAK;UACb,OAAO,KAAK;UACZ,OAAO,KAAK;UACZ,SAAS,KAAK;UACd,aAAa,KAAK;;AAEtB,aAAK,MAAM,EAAE,OAAO,WAAU,CAAE;MACpC;AAEA,UAAI,MAAM,kBAAkB;AACxB;MACJ;AAEA,UAAI,KAAK,WAAW,YAAY,KAAK,MAAM;AACzC,cAAM,eAAc;AAEpB,aAAK,iBAAiB,QAAQ,GAAG,EAAC,MAAM,KAAK,MAAM,SAAS,KAAK,SAAS,aAAa,KAAK,YAAW,CAAE;MAC3G;IACF;;AA9B0C,aAAA;QAAzC,gCAAU,EAAE,WAAW,OAAK,KAAK,KAAI,CAAE;;;AACE,aAAA;QAAzC,gCAAU,EAAE,WAAW,OAAK,KAAK,KAAI,CAAE;;;AACE,aAAA;QAAzC,gCAAU,EAAE,WAAW,OAAK,KAAK,KAAI,CAAE;;;AACiB,aAAA;QAAxD,gCAAU,EAAE,MAAM,SAAS,WAAW,OAAK,KAAK,KAAI,CAAE;;;AAC1C,aAAA;QAAZ,gCAAS;;;AAC0D,aAAA;QAAnE,gCAAU,EAAE,WAAW,OAAK,MAAM,QAAQ,OAAO,CAAC,MAAM,QAAO,CAAE;;;AACE,aAAA;QAAnE,gCAAU,EAAE,WAAW,OAAK,MAAM,QAAQ,OAAO,CAAC,MAAM,QAAO,CAAE;;;AAPvD,MAAA,IAACA;AAiChB,GA1DiB,MAAA,IAAC,CAAA,EAAA;AA4DlB,IAAA,YAAe;EACb,GAAG,CAAC,WAA+B;AACjC,WAAO,qBAAO,6BAA6B;MACzC,MAAM,EAAE;MACR,UAAU;;;;;;;MAOV,YAAY,CAAC,GAAG,GAAG,IAAI,qBAAoB;AACzC,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,EAAE,EAAE,GAAG,gBAAgB,GAAG,OAAM,CAAE;MAC3E;KACD;EACH;;",
+  "sourcesContent": ["import { attribute, ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport {OtherData} from \"../../lifecycle\";\n\nexport namespace A {\n  export const selector = 'dr-a';\n\n  export type ClickCallbackData = {\n      event: MouseEvent,\n      attributes: {\n          href: string | null;\n          target: string | null;\n          style: string | null;\n          class: string | null;\n          replace?: boolean;\n          scrollToTop?: boolean;\n      }\n  }\n\n  export type Attribute = {\n    href?: string | null;\n    target?: string | null;\n    style?: string | null;\n    class?: string | null;\n    click?: ((data: ClickCallbackData) => void) | null;\n    onInit?: (e: HTMLAnchorElement) => void;\n    replace?: boolean | null;\n    scrollToTop?: boolean | null;\n  };\n\n  export class A extends ComponentBase<Attribute> {\n    @attribute({ converter: v => v || null }) href: string | null = null;\n    @attribute({ converter: v => v || null }) target: string | null = null;\n    @attribute({ converter: v => v || null }) style: string | null = null;\n    @attribute({ name: 'class', converter: v => v || null }) classAttr: string | null = null;\n    @attribute({ name: 'dr-class', converter: v => v || null }) drClass: string | null = null;\n    @attribute() click?: ((data: ClickCallbackData) => void) | null = null;\n    @attribute({ converter: v => v !== null && String(v) !== 'false' }) replace = false;\n    @attribute({ converter: v => v !== null && String(v) !== 'false' }) scrollToTop = true;\n    private element?: HTMLElement;\n\n    onClick(event: MouseEvent) {\n      if (this.click) {\n          const attributes = {\n              href: this.href,\n              target: this.target,\n              style: this.style,\n              class: this.classAttr,\n              replace: this.replace,\n              scrollToTop: this.scrollToTop\n          };\n          this.click({ event, attributes });\n      }\n\n      if (event.defaultPrevented) {\n          return;\n      }\n\n      if (this.target !== '_blank' && this.href) {\n        event.preventDefault();\n        // console.log('scrollTop', this.scrollToTop);\n        this.domRenderConfig?.router?.go({path: this.href, replace: this.replace, scrollToTop: this.scrollToTop });\n      }\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      if (this.element && name.startsWith('attribute-')) {\n        this.element.setAttribute(name, value);\n      }\n    }\n\n    onAElementInit($element: HTMLElement) {\n      this.element = $element;\n      this.getAttribute('onInit')?.($element as HTMLAnchorElement);\n      this.getAttributeNames()\n        .filter(it => it.startsWith('attribute-'))\n        .forEach(it => {\n          const attrName = it.replace(/^attribute-/, '');\n          const attrValue = this.getAttribute(it as any);\n          this.element.setAttribute(attrName, attrValue);\n        });\n    }\n  }\n}\n\nexport default {\n  a: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: A.selector,\n      template: `<a\n        href=\"\\${@this@.href}$\"\n        target=\"\\${@this@.target}$\"\n        style=\"\\${@this@.style}$\"\n        class=\"\\${@this@.classAttr}$\"\n        dr-event-click=\"@this@.onClick($event)\"\n        dr-class=\"\\${@this@.drClass}$\"\n        dr-on-init=\"@this@.onAElementInit($element)\"\n      >#innerHTML#</a>`,\n      objFactory: (e, o, r2, constructorParam) => {\n        return DomRender.run({ rootObject: new A.A(...constructorParam), config });\n      },\n    });\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAAyC;AACzC,uBAA8C;AAC9C,oBAAuB;;;;;;;;;;AAGjB,IAAW;CAAjB,SAAiB,KAAC;AACH,MAAA,WAAW;EAyBxB,MAAaA,WAAU,mCAAwB;IAA/C,cAAA;;AAC4C,WAAA,OAAsB;AACtB,WAAA,SAAwB;AACxB,WAAA,QAAuB;AACR,WAAA,YAA2B;AACxB,WAAA,UAAyB;AACxE,WAAA,QAAqD;AACE,WAAA,UAAU;AACV,WAAA,cAAc;IA6CpF;IA1CE,QAAQ,OAAiB;AACvB,UAAI,KAAK,OAAO;AACZ,cAAM,aAAa;UACf,MAAM,KAAK;UACX,QAAQ,KAAK;UACb,OAAO,KAAK;UACZ,OAAO,KAAK;UACZ,SAAS,KAAK;UACd,aAAa,KAAK;;AAEtB,aAAK,MAAM,EAAE,OAAO,WAAU,CAAE;MACpC;AAEA,UAAI,MAAM,kBAAkB;AACxB;MACJ;AAEA,UAAI,KAAK,WAAW,YAAY,KAAK,MAAM;AACzC,cAAM,eAAc;AAEpB,aAAK,iBAAiB,QAAQ,GAAG,EAAC,MAAM,KAAK,MAAM,SAAS,KAAK,SAAS,aAAa,KAAK,YAAW,CAAE;MAC3G;IACF;IAEA,mBAAmB,MAAc,OAAY,OAAgB;AAC3D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAC3C,UAAI,KAAK,WAAW,KAAK,WAAW,YAAY,GAAG;AACjD,aAAK,QAAQ,aAAa,MAAM,KAAK;MACvC;IACF;IAEA,eAAe,UAAqB;AAClC,WAAK,UAAU;AACf,WAAK,aAAa,QAAQ,IAAI,QAA6B;AAC3D,WAAK,kBAAiB,EACnB,OAAO,QAAM,GAAG,WAAW,YAAY,CAAC,EACxC,QAAQ,QAAK;AACZ,cAAM,WAAW,GAAG,QAAQ,eAAe,EAAE;AAC7C,cAAM,YAAY,KAAK,aAAa,EAAS;AAC7C,aAAK,QAAQ,aAAa,UAAU,SAAS;MAC/C,CAAC;IACL;;AAnD0C,aAAA;QAAzC,gCAAU,EAAE,WAAW,OAAK,KAAK,KAAI,CAAE;;;AACE,aAAA;QAAzC,gCAAU,EAAE,WAAW,OAAK,KAAK,KAAI,CAAE;;;AACE,aAAA;QAAzC,gCAAU,EAAE,WAAW,OAAK,KAAK,KAAI,CAAE;;;AACiB,aAAA;QAAxD,gCAAU,EAAE,MAAM,SAAS,WAAW,OAAK,KAAK,KAAI,CAAE;;;AACK,aAAA;QAA3D,gCAAU,EAAE,MAAM,YAAY,WAAW,OAAK,KAAK,KAAI,CAAE;;;AAC7C,aAAA;QAAZ,gCAAS;;;AAC0D,aAAA;QAAnE,gCAAU,EAAE,WAAW,OAAK,MAAM,QAAQ,OAAO,CAAC,MAAM,QAAO,CAAE;;;AACE,aAAA;QAAnE,gCAAU,EAAE,WAAW,OAAK,MAAM,QAAQ,OAAO,CAAC,MAAM,QAAO,CAAE;;;AARvD,MAAA,IAACA;AAsDhB,GAhFiB,MAAA,IAAC,CAAA,EAAA;AAkFlB,IAAA,YAAe;EACb,GAAG,CAAC,WAA+B;AACjC,WAAO,qBAAO,6BAA6B;MACzC,MAAM,EAAE;MACR,UAAU;;;;;;;;;MASV,YAAY,CAAC,GAAG,GAAG,IAAI,qBAAoB;AACzC,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,EAAE,EAAE,GAAG,gBAAgB,GAAG,OAAM,CAAE;MAC3E;KACD;EACH;;",
   "names": ["A"]
 }

package/dist/cjs/components/appender/Appender.js CHANGED Viewed

@@ -24,10 +24,23 @@ module.exports = __toCommonJS(Appender_exports);
 var import_ComponentBase = require("../ComponentBase");
 var import_DomRender = require("../../DomRender");
 var import_RawSet = require("../../rawsets/RawSet");
+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 Appender;
-((_Appender) => {
-  _Appender.selector = "dr-appender";
+(function(Appender_1) {
+  Appender_1.selector = "dr-appender";
   class Appender2 extends import_ComponentBase.ComponentBase {
+    constructor() {
+      super(...arguments);
+      this.drOptionItemVariableName = null;
+    }
     // onCreateRender(...param: any) {
     //   console.log('--onCreateRender')
     // }
@@ -57,13 +70,17 @@ var Appender;
       }
     }
   }
-  _Appender.Appender = Appender2;
+  __decorate([
+    (0, import_ComponentBase.attribute)({ name: "dr-option-item-variable-name", converter: (v) => v || null }),
+    __metadata("design:type", String)
+  ], Appender2.prototype, "drOptionItemVariableName", void 0);
+  Appender_1.Appender = Appender2;
 })(Appender || (Appender = {}));
 var Appender_default = {
   appender: (config) => {
     return import_RawSet.RawSet.createComponentTargetElement({
       name: Appender.selector,
-      template: '<div dr-appender="@this@.value" dr-option-strip="true">#innerHTML#</div>',
+      template: '<div dr-appender="@this@.value" dr-option-item-variable-name="${@this@.drOptionItemVariableName}$" dr-option-strip="true">#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
         return import_DomRender.DomRender.run({ rootObject: new Appender.Appender(...counstructorParam), config });
       }

package/dist/cjs/components/appender/Appender.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/appender/Appender.ts"],
-  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { Appender as DomRenderAppender } from '../../operators/Appender';\n\n\nexport namespace Appender {\n  export const selector = 'dr-appender';\n  // export type AppenderInterface<D> = {\n  //   push(...data:D[]):void;\n  //   set(key: string, ...v:D[]):void\n  //   delete(key: string):void\n  //   clear():void\n  // }\n  export type Attribute<D> = {\n    value: DomRenderAppender<D>;\n    onCreate?: (appender: DomRenderAppender) => void;\n  }\n\n  // @Component({\n  //   template: '<div dr-appender=\"@this@.appender\" dr-option-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}`\n  // })\n  export class Appender<D> extends ComponentBase<Attribute<D>> implements OnInitRender {\n    private value?:DomRenderAppender\n\n    // onCreateRender(...param: any) {\n    //   console.log('--onCreateRender')\n    // }\n\n    // test() {\n    //   console.log('t', this.getAttribute('appender'))\n    // }\n\n\n    // push(...data:D[]) {\n    //   console.log('push/////', data);\n    //   this.appender.push(...data);\n    // }\n    //\n    // set(key: string, v: D): void {\n    //   this.appender.set(key, v)\n    // }\n    //\n    // delete(key: string): void {\n    //   this.appender.delete(key);\n    // }\n    //\n    // clear(): void {\n    //   this.appender.clear();\n    // }\n\n\n\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      if(this.equalsAttributeName(name, 'value')) {\n        this.value = value;\n      }\n      // console.log('------>appender', name, value);\n    }\n  }\n}\n\n\nexport default {\n  appender: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: Appender.selector,\n      template: '<div dr-appender=\"@this@.value\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e,o,r2, counstructorParam) => {\n        return DomRender.run({rootObject: new Appender.Appender(...counstructorParam), config: config});\n      }\n    })\n  },\n}\n\n\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA8B;AAC9B,uBAA8C;AAC9C,oBAAuB;AAMhB,IAAU;AAAA,CAAV,CAAU,cAAV;AACE,EAAM,qBAAW;AAAA,EAgBjB,MAAMA,kBAAoB,mCAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgCnF,mBAAmB,MAAc,OAAY,OAAkB;AAC7D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAC3C,UAAG,KAAK,oBAAoB,MAAM,OAAO,GAAG;AAC1C,aAAK,QAAQ;AAAA,MACf;AAAA,IAEF;AAAA,EACF;AAvCO,YAAM,WAAAA;AAAA,GAjBE;AA4DjB,IAAO,mBAAQ;AAAA,EACb,UAAU,CAAC,WAAgC;AACzC,WAAO,qBAAO,6BAA6B;AAAA,MACzC,MAAM,SAAS;AAAA,MACf,UAAU;AAAA,MACV,YAAY,CAAC,GAAE,GAAE,IAAI,sBAAsB;AACzC,eAAO,2BAAU,IAAI,EAAC,YAAY,IAAI,SAAS,SAAS,GAAG,iBAAiB,GAAG,OAAc,CAAC;AAAA,MAChG;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import {attribute, ComponentBase} from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { Appender as DomRenderAppender } from '../../operators/Appender';\n\n\nexport namespace Appender {\n  export const selector = 'dr-appender';\n  // export type AppenderInterface<D> = {\n  //   push(...data:D[]):void;\n  //   set(key: string, ...v:D[]):void\n  //   delete(key: string):void\n  //   clear():void\n  // }\n  export type Attribute<D> = {\n    value: DomRenderAppender<D>;\n    onCreate?: (appender: DomRenderAppender) => void;\n  }\n\n  // @Component({\n  //   template: '<div dr-appender=\"@this@.appender\" dr-option-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}`\n  // })\n  export class Appender<D> extends ComponentBase<Attribute<D>> implements OnInitRender {\n    private value?:DomRenderAppender\n    @attribute({ name: 'dr-option-item-variable-name', converter: v => v || null }) drOptionItemVariableName: string | null = null;\n    // onCreateRender(...param: any) {\n    //   console.log('--onCreateRender')\n    // }\n\n    // test() {\n    //   console.log('t', this.getAttribute('appender'))\n    // }\n\n\n    // push(...data:D[]) {\n    //   console.log('push/////', data);\n    //   this.appender.push(...data);\n    // }\n    //\n    // set(key: string, v: D): void {\n    //   this.appender.set(key, v)\n    // }\n    //\n    // delete(key: string): void {\n    //   this.appender.delete(key);\n    // }\n    //\n    // clear(): void {\n    //   this.appender.clear();\n    // }\n\n\n\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      if(this.equalsAttributeName(name, 'value')) {\n        this.value = value;\n      }\n      // console.log('------>appender', name, value);\n    }\n  }\n}\n\n\nexport default {\n  appender: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: Appender.selector,\n      template: '<div dr-appender=\"@this@.value\" dr-option-item-variable-name=\"${@this@.drOptionItemVariableName}$\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e,o,r2, counstructorParam) => {\n        return DomRender.run({rootObject: new Appender.Appender(...counstructorParam), config: config});\n      }\n    })\n  },\n}\n\n\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,2BAAuC;AACvC,uBAA8C;AAC9C,oBAAuB;;;;;;;;;;AAMjB,IAAW;CAAjB,SAAiB,YAAQ;AACV,aAAA,WAAW;EAgBxB,MAAaA,kBAAoB,mCAA2B;IAA5D,cAAA;;AAEkF,WAAA,2BAA0C;IAqC5H;;;;;;;;;;;;;;;;;;;;;;;IAPE,mBAAmB,MAAc,OAAY,OAAgB;AAC3D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAC3C,UAAG,KAAK,oBAAoB,MAAM,OAAO,GAAG;AAC1C,aAAK,QAAQ;MACf;IAEF;;AApCgF,aAAA;QAA/E,gCAAU,EAAE,MAAM,gCAAgC,WAAW,OAAK,KAAK,KAAI,CAAE;;;AAFnE,aAAA,WAAQA;AAwCvB,GAzDiB,aAAA,WAAQ,CAAA,EAAA;AA4DzB,IAAA,mBAAe;EACb,UAAU,CAAC,WAA+B;AACxC,WAAO,qBAAO,6BAA6B;MACzC,MAAM,SAAS;MACf,UAAU;MACV,YAAY,CAAC,GAAE,GAAE,IAAI,sBAAqB;AACxC,eAAO,2BAAU,IAAI,EAAC,YAAY,IAAI,SAAS,SAAS,GAAG,iBAAiB,GAAG,OAAc,CAAC;MAChG;KACD;EACH;;",
   "names": ["Appender"]
 }

package/dist/cjs/components/details/Details.js CHANGED Viewed

@@ -24,8 +24,8 @@ module.exports = __toCommonJS(Details_exports);
 var import_ComponentBase = require("../ComponentBase");
 var import_DomRender = require("../../DomRender");
 var import_RawSet = require("../../rawsets/RawSet");
-var import_ValidUtils = require("@dooboostore/core-web/valid/ValidUtils");
-var import_EventUtils = require("@dooboostore/core-web/event/EventUtils");
+var import_core_web = require("@dooboostore/core-web");
+var import_core_web2 = require("@dooboostore/core-web");
 var Details;
 ((_Details) => {
   _Details.selector = "dr-details";
@@ -75,13 +75,18 @@ var Details;
       if (toggleAttribute) {
         toggleAttribute?.(element.open);
       }
+      if (element.open) {
+        this.getAttribute("onOpen")?.();
+      } else {
+        this.getAttribute("onClose")?.();
+      }
     }
     async onInitRender(param, rawSet) {
       await super.onInitRender(param, rawSet);
-      if (import_ValidUtils.ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {
+      if (import_core_web.ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {
         const detailsElement = this.element;
         const document = this.rawSet.dataSet.config.window.document;
-        this.documentClickSubscription = import_EventUtils.EventUtils.htmlElementEventObservable(document, "click").subscribe((event) => {
+        this.documentClickSubscription = import_core_web2.EventUtils.htmlElementEventObservable(document, "click").subscribe((event) => {
           if (this.getAttribute("disableOtherClickClose")) {
             return;
           }
@@ -90,8 +95,8 @@ var Details;
           }
         });
         if (detailsElement) {
-          this.toggleSubscription = import_EventUtils.EventUtils.htmlElementEventObservable(detailsElement, "toggle").subscribe((it) => {
-            if (import_ValidUtils.ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute("toggle_form_reset"))) {
+          this.toggleSubscription = import_core_web2.EventUtils.htmlElementEventObservable(detailsElement, "toggle").subscribe((it) => {
+            if (import_core_web.ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute("toggle_form_reset"))) {
               this.children?.filter(_Details.isForm).forEach((it2) => {
                 it2.reset();
               });

package/dist/cjs/components/details/Details.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/details/Details.ts"],
-  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\nimport { OnCreateRender } from '../../lifecycle/OnCreateRender';\nimport { type Subscription } from '@dooboostore/core/message/Subscription';\nimport { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';\nimport { EventUtils } from '@dooboostore/core-web/event/EventUtils';\n\nexport namespace Details {\n  export const selector = 'dr-details';\n\n  export type Attribute = {\n    class?: string;\n    toggle_form_reset?: boolean;\n    disableOtherClickClose?: boolean;\n    toggle?: (open: boolean) => void;\n  };\n  export type BodyAttribute = {\n    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n  } & Attribute;\n\n  export type FormAttribute = {\n    disabledSubmit?: null;\n    submit?: (event: SubmitEvent, element: HTMLFormElement) => void;\n  } & BodyAttribute;\n\n  // @Component({\n  //   template: '<summary class=\"${`${@this@.getAttribute(\\'class\\')} details-summary-container`}$\">#innerHTML#</summary>',\n  //   styles: '',\n  //   selector: `${selector}.Summary`\n  // })\n  export class Summary extends ComponentBase<Attribute> {\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n  }\n\n  // @Component({\n  //   template: '<div class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container`}$\" dr-on-init=\"@this@.$element = $element;\">#innerHTML#</div>',\n  //   selector: `${selector}.Body`\n  // })\n  export class Body extends ComponentBase<BodyAttribute> {\n    private $element?: HTMLDivElement;\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n  }\n\n  export const isBody = (instance: any): instance is Body => {\n    return instance instanceof Body;\n  };\n\n  // @Component({\n  //   template: '<form class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container details-form-container`}$\" dr-on-init=\"@this@.$element = $element;\" dr-event-submit=\"@this@.submit($element,$event);\">#innerHTML#</form>',\n  //   styles: detailsFormStyle,\n  //   selector: `${selector}.Form`\n  // })\n  export class Form extends ComponentBase<FormAttribute> {\n    private $element?: HTMLFormElement;\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n    submit(element: HTMLFormElement, event: SubmitEvent) {\n      if (this.hasAttribute('disabledSubmit')) {\n        event.preventDefault();\n      }\n      if (this.hasAttribute('submit')) {\n        this.getAttribute('submit')?.(event, element);\n      }\n    }\n    reset() {\n      this.$element?.reset();\n    }\n  }\n  export const isForm = (instance: any): instance is Form => {\n    return instance instanceof Form;\n  };\n\n  // @Component({\n  //   template: template,\n  //   styles: style,\n  //   // noStrip: true,\n  //   selector: `${selector}`\n  // })\n  export class Details extends ComponentBase<Attribute> implements OnCreateRender, OnInitRender {\n    // private detailsElement?: HTMLDetailsElement;\n    private documentClickSubscription?: Subscription;\n    private toggleSubscription?: Subscription;\n    private element?: HTMLDetailsElement;\n    onCreateRenderData(data: OnCreateRenderDataParams) {\n      super.onCreateRenderData(data);\n    }\n\n    onCreateRender(...param: any[]): void {}\n\n    toggle(element: HTMLDetailsElement) {\n      const toggleAttribute = this.getAttribute('toggle');\n      if (toggleAttribute) {\n        toggleAttribute?.(element.open);\n      }\n    }\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n\n      if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {\n        const detailsElement = this.element;\n\n        const document = this.rawSet.dataSet!.config!.window!.document!;\n        this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {\n          if (this.getAttribute('disableOtherClickClose')) {\n            return;\n          }\n          if (detailsElement && !detailsElement?.contains(event?.target as Node)) {\n            detailsElement.open = false;\n          }\n        });\n        if (detailsElement) {\n          this.toggleSubscription = EventUtils.htmlElementEventObservable(detailsElement, 'toggle').subscribe(it => {\n            if (ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute('toggle_form_reset'))) {\n              this.children?.filter(isForm).forEach(it => {\n                it.reset();\n              });\n            }\n          });\n        }\n      }\n      // console.log('aaaaaaaaaaaaaaaaaaaaa', rawSet);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n    }\n\n    onDestroyRender(...metaData: any[]): void {\n      this.toggleSubscription?.unsubscribe();\n      this.documentClickSubscription?.unsubscribe();\n      // console.log('onDestroyRender', metaData);\n      // if (ValidUtils.isBrowser()) {\n      //   document.removeEventListener('click', this.ccc)\n      // }\n    }\n\n    // changeAttribute(attribute: { className: string } | undefined) {\n    // }\n  }\n}\n\nexport default {\n  detailsSummary: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-summary`,\n      template:\n        '<summary class=\"${`${@this@.getAttribute(\\'class\\')} details-summary-container`}$\">#innerHTML#</summary>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Summary(), config: config });\n      }\n    });\n  },\n  detailsBody: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-body`,\n      template:\n        '<div class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container`}$\" dr-on-init=\"@this@.$element = $element;\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Body(), config: config });\n      }\n    });\n  },\n  detailsForm: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-form`,\n      template:\n        '<form class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container details-form-container`}$\" dr-on-init=\"@this@.$element = $element;\" dr-event-submit=\"@this@.submit($element,$event);\">#innerHTML#</form>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Form(), config: config });\n      }\n    });\n  },\n  details: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}`,\n      styles: `\n        .details-container {\n            position: relative;\n        }\n\n        .details-container .details-body-container {\n            position: absolute;\n        }\n\n\n        .details-container .details-body-bottom-left-container {\n            position: absolute;\n            left: 0;\n            top: 100%;\n            /*margin-top: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-bottom-right-container {\n            position: absolute;\n            right: 0;\n            top: 100%;\n            /*margin-top: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-top-left-container {\n            position: absolute;\n            left: 0;\n            bottom: 100%;\n            /*margin-bottom: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-top-right-container {\n            position: absolute;\n            right: 0;\n            bottom: 100%;\n            /*margin-bottom: 0px;*/\n        }\n      `,\n      template:\n        '<details class=\"${`${@this@.getAttribute(\\'class\\')} details-container`}$\" dr-on-init=\"@this@.element = $element;\" dr-event-toggle=\"@this@.toggle($element)\"> #innerHTML# </details>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Details(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
-  "mappings": "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",
-  "names": ["Details", "it"]
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\nimport { OnCreateRender } from '../../lifecycle/OnCreateRender';\nimport { type Subscription } from '@dooboostore/core';\nimport { ValidUtils } from '@dooboostore/core-web';\nimport { EventUtils } from '@dooboostore/core-web';\n\nexport namespace Details {\n  export const selector = 'dr-details';\n\n  export type Attribute = {\n    class?: string;\n    toggle_form_reset?: boolean;\n    disableOtherClickClose?: boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    toggle?: (open: boolean) => void;\n  };\n  export type BodyAttribute = {\n    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n  } & Attribute;\n\n  export type FormAttribute = {\n    disabledSubmit?: null;\n    submit?: (event: SubmitEvent, element: HTMLFormElement) => void;\n  } & BodyAttribute;\n\n  // @Component({\n  //   template: '<summary class=\"${`${@this@.getAttribute(\\'class\\')} details-summary-container`}$\">#innerHTML#</summary>',\n  //   styles: '',\n  //   selector: `${selector}.Summary`\n  // })\n  export class Summary extends ComponentBase<Attribute> {\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n  }\n\n  // @Component({\n  //   template: '<div class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container`}$\" dr-on-init=\"@this@.$element = $element;\">#innerHTML#</div>',\n  //   selector: `${selector}.Body`\n  // })\n  export class Body extends ComponentBase<BodyAttribute> {\n    private $element?: HTMLDivElement;\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n  }\n\n  export const isBody = (instance: any): instance is Body => {\n    return instance instanceof Body;\n  };\n\n  // @Component({\n  //   template: '<form class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container details-form-container`}$\" dr-on-init=\"@this@.$element = $element;\" dr-event-submit=\"@this@.submit($element,$event);\">#innerHTML#</form>',\n  //   styles: detailsFormStyle,\n  //   selector: `${selector}.Form`\n  // })\n  export class Form extends ComponentBase<FormAttribute> {\n    private $element?: HTMLFormElement;\n    constructor() {\n      super({ onlyParentType: [Details] });\n    }\n    submit(element: HTMLFormElement, event: SubmitEvent) {\n      if (this.hasAttribute('disabledSubmit')) {\n        event.preventDefault();\n      }\n      if (this.hasAttribute('submit')) {\n        this.getAttribute('submit')?.(event, element);\n      }\n    }\n    reset() {\n      this.$element?.reset();\n    }\n  }\n  export const isForm = (instance: any): instance is Form => {\n    return instance instanceof Form;\n  };\n\n  // @Component({\n  //   template: template,\n  //   styles: style,\n  //   // noStrip: true,\n  //   selector: `${selector}`\n  // })\n  export class Details extends ComponentBase<Attribute> implements OnCreateRender, OnInitRender {\n    // private detailsElement?: HTMLDetailsElement;\n    private documentClickSubscription?: Subscription;\n    private toggleSubscription?: Subscription;\n    private element?: HTMLDetailsElement;\n    onCreateRenderData(data: OnCreateRenderDataParams) {\n      super.onCreateRenderData(data);\n    }\n\n    onCreateRender(...param: any[]): void {}\n\n    toggle(element: HTMLDetailsElement) {\n      const toggleAttribute = this.getAttribute('toggle');\n      if (toggleAttribute) {\n        toggleAttribute?.(element.open);\n      }\n      if (element.open) {\n        this.getAttribute('onOpen')?.();\n      } else {\n        this.getAttribute('onClose')?.();\n      }\n    }\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n\n      if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {\n        const detailsElement = this.element;\n\n        const document = this.rawSet.dataSet!.config!.window!.document!;\n        this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {\n          if (this.getAttribute('disableOtherClickClose')) {\n            return;\n          }\n          if (detailsElement && !detailsElement?.contains(event?.target as Node)) {\n            detailsElement.open = false;\n          }\n        });\n        if (detailsElement) {\n          this.toggleSubscription = EventUtils.htmlElementEventObservable(detailsElement, 'toggle').subscribe(it => {\n            if (ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute('toggle_form_reset'))) {\n              this.children?.filter(isForm).forEach(it => {\n                it.reset();\n              });\n            }\n          });\n        }\n      }\n      // console.log('aaaaaaaaaaaaaaaaaaaaa', rawSet);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n    }\n\n    onDestroyRender(...metaData: any[]): void {\n      this.toggleSubscription?.unsubscribe();\n      this.documentClickSubscription?.unsubscribe();\n      // console.log('onDestroyRender', metaData);\n      // if (ValidUtils.isBrowser()) {\n      //   document.removeEventListener('click', this.ccc)\n      // }\n    }\n\n    // changeAttribute(attribute: { className: string } | undefined) {\n    // }\n  }\n}\n\nexport default {\n  detailsSummary: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-summary`,\n      template:\n        '<summary class=\"${`${@this@.getAttribute(\\'class\\')} details-summary-container`}$\">#innerHTML#</summary>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Summary(), config: config });\n      }\n    });\n  },\n  detailsBody: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-body`,\n      template:\n        '<div class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container`}$\" dr-on-init=\"@this@.$element = $element;\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Body(), config: config });\n      }\n    });\n  },\n  detailsForm: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}-form`,\n      template:\n        '<form class=\"${`${@this@.getAttribute(\\'class\\')} details-body-container details-body-${@this@.getAttribute(\\'float\\')}-container details-form-container`}$\" dr-on-init=\"@this@.$element = $element;\" dr-event-submit=\"@this@.submit($element,$event);\">#innerHTML#</form>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Form(), config: config });\n      }\n    });\n  },\n  details: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Details.selector}`,\n      styles: `\n        .details-container {\n            position: relative;\n        }\n\n        .details-container .details-body-container {\n            position: absolute;\n        }\n\n\n        .details-container .details-body-bottom-left-container {\n            position: absolute;\n            left: 0;\n            top: 100%;\n            /*margin-top: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-bottom-right-container {\n            position: absolute;\n            right: 0;\n            top: 100%;\n            /*margin-top: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-top-left-container {\n            position: absolute;\n            left: 0;\n            bottom: 100%;\n            /*margin-bottom: 0px;*/\n            /*width: max-content;*/\n        }\n\n        .details-container .details-body-top-right-container {\n            position: absolute;\n            right: 0;\n            bottom: 100%;\n            /*margin-bottom: 0px;*/\n        }\n      `,\n      template:\n        '<details class=\"${`${@this@.getAttribute(\\'class\\')} details-container`}$\" dr-on-init=\"@this@.element = $element;\" dr-event-toggle=\"@this@.toggle($element)\"> #innerHTML# </details>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Details.Details(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": "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",
+  "names": ["import_core_web", "Details", "it"]
 }

package/dist/cjs/components/if/If.js CHANGED Viewed

@@ -48,7 +48,7 @@ var If_default = {
   if: (config) => {
     return import_RawSet.RawSet.createComponentTargetElement({
       name: If.selector,
-      template: '<div dr-if="@this@.sw" >#innerHTML#</div>',
+      template: '<div dr-if="@this@.sw" dr-option-strip="true" >#innerHTML#</div>',
       objFactory: (e, o, r2, counstructorParam) => {
         return import_DomRender.DomRender.run({ rootObject: new If.If(...counstructorParam), config });
       }

package/dist/cjs/components/if/If.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/if/If.ts"],
-  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { DomRender } from '../../DomRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { DomRenderConfig } from '../../configs/DomRenderConfig';\n\nexport namespace If {\n  export const selector = 'dr-if';\n  // export type AppenderInterface<D> = {\n  //   push(...data:D[]):void;\n  //   set(key: string, ...v:D[]):void\n  //   delete(key: string):void\n  //   clear():void\n  // }\n  export type Attribute<D> = {\n    value?: null | boolean;\n  };\n\n  export class If<D> extends ComponentBase<Attribute<D>> implements OnInitRender {\n    private sw: boolean = false;\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      super.onInitRender(param, rawSet);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n\n      if (this.equalsAttributeName(name, 'value')) {\n        // console.log('--', value, typeof value);\n        this.sw = value;\n      }\n    }\n  }\n}\n\n// const iif = DomRender.createComponent({\n//   type: If.If,\n//   tagName: If.selector,\n//   template: '<div dr-if=\"@this@.sw\" dr-option-strip=\"true\">#innerHTML#</div>' });\nexport default {\n  if: (config?: DomRenderConfig) => {\n    // if (!customElements.get(If.selector)) {\n    //   customElements.define(If.selector, class extends HTMLElement {\n    //     constructor() {\n    //       super();\n    //       this.hidden = true;\n    //     }\n    //   });\n    // }\n\n    return RawSet.createComponentTargetElement({\n      name: If.selector,\n      template: '<div dr-if=\"@this@.sw\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new If.If(...counstructorParam), config: config });\n      }\n    });\n  }\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA8B;AAE9B,uBAA0B;AAE1B,oBAAuB;AAGhB,IAAU;AAAA,CAAV,CAAU,QAAV;AACE,EAAM,eAAW;AAAA,EAWjB,MAAMA,YAAc,mCAAoD;AAAA,IAAxE;AAAA;AACL,WAAQ,KAAc;AAAA;AAAA,IAEtB,MAAM,aAAa,OAAY,QAAgB;AAC7C,YAAM,aAAa,OAAO,MAAM;AAAA,IAClC;AAAA,IAEA,mBAAmB,MAAc,OAAY,OAAkB;AAC7D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,UAAI,KAAK,oBAAoB,MAAM,OAAO,GAAG;AAE3C,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAfO,MAAM,KAAAA;AAAA,GAZE;AAkCjB,IAAO,aAAQ;AAAA,EACb,IAAI,CAAC,WAA6B;AAUhC,WAAO,qBAAO,6BAA6B;AAAA,MACzC,MAAM,GAAG;AAAA,MACT,UAAU;AAAA,MACV,YAAY,CAAC,GAAG,GAAG,IAAI,sBAAsB;AAC3C,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,GAAG,GAAG,GAAG,iBAAiB,GAAG,OAAe,CAAC;AAAA,MACtF;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { DomRender } from '../../DomRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { DomRenderConfig } from '../../configs/DomRenderConfig';\n\nexport namespace If {\n  export const selector = 'dr-if';\n\n  // export type AppenderInterface<D> = {\n  //   push(...data:D[]):void;\n  //   set(key: string, ...v:D[]):void\n  //   delete(key: string):void\n  //   clear():void\n  // }\n  export type Attribute<D> = {\n    value?: null | boolean;\n  };\n\n  export class If<D> extends ComponentBase<Attribute<D>> implements OnInitRender {\n    private sw: boolean = false;\n    async onInitRender(param: any, rawSet: RawSet) {\n      super.onInitRender(param, rawSet);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n\n      if (this.equalsAttributeName(name, 'value')) {\n        // console.log('--', value, typeof value);\n        this.sw = value;\n      }\n    }\n  }\n}\n\n// const iif = DomRender.createComponent({\n//   type: If.If,\n//   tagName: If.selector,\n//   template: '<div dr-if=\"@this@.sw\" dr-option-strip=\"true\">#innerHTML#</div>' });\nexport default {\n  if: (config?: DomRenderConfig) => {\n    // if (!customElements.get(If.selector)) {\n    //   customElements.define(If.selector, class extends HTMLElement {\n    //     constructor() {\n    //       super();\n    //       this.hidden = true;\n    //     }\n    //   });\n    // }\n\n\n    return RawSet.createComponentTargetElement({\n      name: If.selector,\n      template: '<div dr-if=\"@this@.sw\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new If.If(...counstructorParam), config: config });\n      }\n    });\n  }\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA8B;AAE9B,uBAA0B;AAE1B,oBAAuB;AAGhB,IAAU;AAAA,CAAV,CAAU,QAAV;AACE,EAAM,eAAW;AAAA,EAYjB,MAAMA,YAAc,mCAAoD;AAAA,IAAxE;AAAA;AACL,WAAQ,KAAc;AAAA;AAAA,IACtB,MAAM,aAAa,OAAY,QAAgB;AAC7C,YAAM,aAAa,OAAO,MAAM;AAAA,IAClC;AAAA,IAEA,mBAAmB,MAAc,OAAY,OAAkB;AAC7D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAE3C,UAAI,KAAK,oBAAoB,MAAM,OAAO,GAAG;AAE3C,aAAK,KAAK;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAdO,MAAM,KAAAA;AAAA,GAbE;AAkCjB,IAAO,aAAQ;AAAA,EACb,IAAI,CAAC,WAA6B;AAWhC,WAAO,qBAAO,6BAA6B;AAAA,MACzC,MAAM,GAAG;AAAA,MACT,UAAU;AAAA,MACV,YAAY,CAAC,GAAG,GAAG,IAAI,sBAAsB;AAC3C,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,GAAG,GAAG,GAAG,iBAAiB,GAAG,OAAe,CAAC;AAAA,MACtF;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
   "names": ["If"]
 }

package/dist/cjs/components/input/Input.js CHANGED Viewed

@@ -24,11 +24,9 @@ module.exports = __toCommonJS(Input_exports);
 var import_ComponentBase = require("../ComponentBase");
 var import_DomRender = require("../../DomRender");
 var import_RawSet = require("../../rawsets/RawSet");
-var import_ValidUtils = require("@dooboostore/core/valid/ValidUtils");
-var import_map = require("@dooboostore/core/message/operators/map");
-var import_EventUtils = require("@dooboostore/core-web/event/EventUtils");
-var import_debounceTime = require("@dooboostore/core/message/operators/debounceTime");
-var import_distinctUntilChanged = require("@dooboostore/core/message/operators/distinctUntilChanged");
+var import_core2 = require("@dooboostore/core");
+var import_core3 = require("@dooboostore/core");
+var import_core_web = require("@dooboostore/core-web");
 var Input;
 ((_Input) => {
   _Input.selector = `dr-input`;
@@ -42,12 +40,12 @@ var Input;
       await super.onInitRender(param, rawSet);
       const inputElement = this.element;
       const debounceTimeAttribute = this.getAttribute("debounceTime");
-      const debounceTimeValue = import_ValidUtils.ValidUtils.isNotNullUndefined(debounceTimeAttribute) ? Number(debounceTimeAttribute) : 0;
-      const distinct = import_ValidUtils.ValidUtils.isNotNullUndefined(this.getAttribute("distinct"));
+      const debounceTimeValue = import_core2.ValidUtils.isNotNullUndefined(debounceTimeAttribute) ? Number(debounceTimeAttribute) : 0;
+      const distinct = import_core2.ValidUtils.isNotNullUndefined(this.getAttribute("distinct"));
       if (inputElement) {
         const makeDeboundceDistinctUtilChanged = () => {
-          let result$ = import_EventUtils.EventUtils.htmlElementEventObservable(inputElement, "input").pipe(
-            (0, import_map.map)((event) => {
+          let result$ = import_core_web.EventUtils.htmlElementEventObservable(inputElement, "input").pipe(
+            import_core3.MessageOperator.map((event) => {
               const target = event.target;
               if (target instanceof HTMLInputElement) {
                 return target.value.trim();
@@ -56,11 +54,11 @@ var Input;
               return "";
             })
           );
-          if (import_ValidUtils.ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
-            result$ = result$.pipe((0, import_debounceTime.debounceTime)(debounceTimeValue));
+          if (import_core2.ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
+            result$ = result$.pipe(import_core3.MessageOperator.debounceTime(debounceTimeValue));
           }
-          if (import_ValidUtils.ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
-            result$ = result$.pipe((0, import_distinctUntilChanged.distinctUntilChanged)());
+          if (import_core2.ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
+            result$ = result$.pipe(import_core3.MessageOperator.distinctUntilChanged());
           }
           return result$;
         };
@@ -68,7 +66,7 @@ var Input;
           this.getAttribute("input")?.(it, inputElement);
         });
         if (inputElement.form) {
-          this.resetSubscripton = import_EventUtils.EventUtils.htmlElementEventObservable(inputElement.form, "reset").subscribe((it) => {
+          this.resetSubscripton = import_core_web.EventUtils.htmlElementEventObservable(inputElement.form, "reset").subscribe((it) => {
             this.inputSubscription?.unsubscribe();
             this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe((it2) => {
               this.getAttribute("input")?.(it2, inputElement);