@dooboostore/dom-render 1.0.111 → 1.0.112

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

@@ -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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",
+  "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\";\nimport {bufferTime} from \"@dooboostore/core/message/operators/bufferTime\";\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  }\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    this.createChildrenDebounceSubscription = this.childrenSetSubject.pipe(\n      debounceTime(this.componentConfig?.createChildrenDebounce??0)\n    ).subscribe(it => {\n      // console.log('call onCreatedThisChildDebounce', it);\n      this.onCreatedThisChildDebounce(it);\n    });\n    this.onRawSetRenderedOtherDataSubjectSubscription = this.onRawSetRenderedOtherDataSubject.pipe(\n      bufferTime(this.componentConfig?.onRawSetRenderedOtherDataDebounce??0)\n    ).subscribe(it => {\n      this.onRawSetRenderedDebounce(it);\n    });\n    this.onChildRawSetRenderedOtherDataSubjectSubscription = this.onChildRawSetRenderedOtherDataSubject.pipe(\n      debounceTime(this.componentConfig?.onChildRawSetRenderedOtherDataDebounce??0)\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  }\n\n}\n"],
+  "mappings": "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",
   "names": ["attribute"]
 }

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -75,6 +75,11 @@ 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);

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

@@ -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": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA8B;AAC9B,uBAA8C;AAC9C,oBAAuB;AAMvB,wBAA2B;AAC3B,wBAA2B;AAEpB,IAAU;AAAA,CAAV,CAAU,aAAV;AACE,EAAM,oBAAW;AAAA,EAsBjB,MAAM,gBAAgB,mCAAyB;AAAA,IACpD,cAAc;AACZ,YAAM,EAAE,gBAAgB,CAACA,QAAO,EAAE,CAAC;AAAA,IACrC;AAAA,EACF;AAJO,WAAM;AAAA,EAUN,MAAM,aAAa,mCAA6B;AAAA,IAErD,cAAc;AACZ,YAAM,EAAE,gBAAgB,CAACA,QAAO,EAAE,CAAC;AAAA,IACrC;AAAA,EACF;AALO,WAAM;AAON,EAAM,kBAAS,CAAC,aAAoC;AACzD,WAAO,oBAAoB;AAAA,EAC7B;AAAA,EAOO,MAAM,aAAa,mCAA6B;AAAA,IAErD,cAAc;AACZ,YAAM,EAAE,gBAAgB,CAACA,QAAO,EAAE,CAAC;AAAA,IACrC;AAAA,IACA,OAAO,SAA0B,OAAoB;AACnD,UAAI,KAAK,aAAa,gBAAgB,GAAG;AACvC,cAAM,eAAe;AAAA,MACvB;AACA,UAAI,KAAK,aAAa,QAAQ,GAAG;AAC/B,aAAK,aAAa,QAAQ,IAAI,OAAO,OAAO;AAAA,MAC9C;AAAA,IACF;AAAA,IACA,QAAQ;AACN,WAAK,UAAU,MAAM;AAAA,IACvB;AAAA,EACF;AAhBO,WAAM;AAiBN,EAAM,kBAAS,CAAC,aAAoC;AACzD,WAAO,oBAAoB;AAAA,EAC7B;AAAA,EAQO,MAAMA,iBAAgB,mCAAiE;AAAA,IAK5F,mBAAmB,MAAgC;AACjD,YAAM,mBAAmB,IAAI;AAAA,IAC/B;AAAA,IAEA,kBAAkB,OAAoB;AAAA,IAAC;AAAA,IAEvC,OAAO,SAA6B;AAClC,YAAM,kBAAkB,KAAK,aAAa,QAAQ;AAClD,UAAI,iBAAiB;AACnB,0BAAkB,QAAQ,IAAI;AAAA,MAChC;AAAA,IACF;AAAA,IACA,MAAM,aAAa,OAAY,QAAgB;AAC7C,YAAM,MAAM,aAAa,OAAO,MAAM;AAEtC,UAAI,6BAAW,UAAU,KAAK,KAAK,QAAQ,QAAQ,OAAO,QAAQ;AAChE,cAAM,iBAAiB,KAAK;AAE5B,cAAM,WAAW,KAAK,OAAO,QAAS,OAAQ,OAAQ;AACtD,aAAK,4BAA4B,6BAAW,2BAA2B,UAAU,OAAO,EAAE,UAAU,WAAS;AAC3G,cAAI,KAAK,aAAa,wBAAwB,GAAG;AAC/C;AAAA,UACF;AACA,cAAI,kBAAkB,CAAC,gBAAgB,SAAS,OAAO,MAAc,GAAG;AACtE,2BAAe,OAAO;AAAA,UACxB;AAAA,QACF,CAAC;AACD,YAAI,gBAAgB;AAClB,eAAK,qBAAqB,6BAAW,2BAA2B,gBAAgB,QAAQ,EAAE,UAAU,QAAM;AACxG,gBAAI,6BAAW,eAAe,mBAAmB,KAAK,aAAa,mBAAmB,CAAC,GAAG;AACxF,mBAAK,UAAU,OAAO,eAAM,EAAE,QAAQ,CAAAC,QAAM;AAC1C,gBAAAA,IAAG,MAAM;AAAA,cACX,CAAC;AAAA,YACH;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IAEF;AAAA,IAEA,mBAAmB,MAAc,OAAY,OAAkB;AAC7D,YAAM,mBAAmB,MAAM,OAAO,KAAK;AAAA,IAC7C;AAAA,IAEA,mBAAmB,UAAuB;AACxC,WAAK,oBAAoB,YAAY;AACrC,WAAK,2BAA2B,YAAY;AAAA,IAK9C;AAAA;AAAA;AAAA,EAIF;AA5DO,WAAM,UAAAD;AAAA,GA5EE;AA2IjB,IAAO,kBAAQ;AAAA,EACb,gBAAgB,CAAC,WAAgC;AAC/C,WAAO,qBAAO,6BAA6B;AAAA,MACzC,MAAM,GAAG,QAAQ,QAAQ;AAAA,MACzB,UACE;AAAA,MACF,YAAY,CAAC,GAAG,GAAG,IAAI,sBAAsB;AAC3C,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,QAAQ,QAAQ,GAAG,OAAe,CAAC;AAAA,MAC5E;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,aAAa,CAAC,WAAgC;AAC5C,WAAO,qBAAO,6BAA6B;AAAA,MACzC,MAAM,GAAG,QAAQ,QAAQ;AAAA,MACzB,UACE;AAAA,MACF,YAAY,CAAC,GAAG,GAAG,IAAI,sBAAsB;AAC3C,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,QAAQ,KAAK,GAAG,OAAe,CAAC;AAAA,MACzE;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,aAAa,CAAC,WAAgC;AAC5C,WAAO,qBAAO,6BAA6B;AAAA,MACzC,MAAM,GAAG,QAAQ,QAAQ;AAAA,MACzB,UACE;AAAA,MACF,YAAY,CAAC,GAAG,GAAG,IAAI,sBAAsB;AAC3C,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,QAAQ,KAAK,GAAG,OAAe,CAAC;AAAA,MACzE;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EACA,SAAS,CAAC,WAAgC;AACxC,WAAO,qBAAO,6BAA6B;AAAA,MACzC,MAAM,GAAG,QAAQ,QAAQ;AAAA,MACzB,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyCR,UACE;AAAA,MACF,YAAY,CAAC,GAAG,GAAG,IAAI,sBAAsB;AAC3C,eAAO,2BAAU,IAAI,EAAE,YAAY,IAAI,QAAQ,QAAQ,GAAG,iBAAiB,GAAG,OAAe,CAAC;AAAA,MAChG;AAAA,IACF,CAAC;AAAA,EACH;AACF;",
+  "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    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": ["Details", "it"]
 }

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

@@ -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

@@ -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/router/RouterOutlet.js

@@ -23,6 +23,8 @@ __export(RouterOutlet_exports, {
 module.exports = __toCommonJS(RouterOutlet_exports);
 var import_ComponentBase = require("../ComponentBase");
 var import_RawSet = require("../../rawsets/RawSet");
+var import_OnChangeAttrRender = require("../../lifecycle/OnChangeAttrRender");
+var import_ComponentSet = require("../../components/ComponentSet");
 var import_ComponentRouterBase = require("../../components/ComponentRouterBase");
 var RouterOutlet;
 ((_RouterOutlet) => {
@@ -31,18 +33,27 @@ var RouterOutlet;
     constructor() {
       super(...arguments);
       this.if = null;
+      this.sw = false;
     }
     setValue(value) {
-      this.value = value;
+      this.sw = false;
+      setTimeout(() => {
+        this.value = value;
+      }, 0);
+      setTimeout(() => {
+        this.sw = true;
+      }, 0);
     }
     async onInitRender(param, rawSet) {
       await super.onInitRender(param, rawSet);
       const c = this.getParentThis();
       const userValue = this.getAttribute("value");
-      if (userValue) {
-        this.value = userValue;
-      } else if (c instanceof import_ComponentRouterBase.ComponentRouterBase) {
-        this.value = c.child;
+      if (typeof userValue === "string") {
+        this.setValue(c[userValue]);
+      } else if (userValue instanceof import_ComponentSet.ComponentSet) {
+        this.setValue(userValue);
+      } else if (!userValue && c instanceof import_ComponentRouterBase.ComponentRouterBase) {
+        this.setValue(c.child);
       }
     }
     onDestroyRender(data) {
@@ -51,7 +62,7 @@ var RouterOutlet;
     onChangeAttrRender(name, value, other) {
       super.onChangeAttrRender(name, value, other);
       if (this.equalsAttributeName(name, "value")) {
-        this.value = value;
+        this.setValue(value);
       }
       if (this.equalsAttributeName(name, "if")) {
         this.if = value;
@@ -59,6 +70,9 @@ var RouterOutlet;
       if (this.equalsAttributeName(name, "createArguments")) {
         this.createArguments = value;
       }
+      if (this.childObject && this.childRawSet && (0, import_OnChangeAttrRender.isOnChangeAttrRender)(this.childObject)) {
+        this.childObject.onChangeAttrRender(name, value, { rawSet: this.childRawSet });
+      }
     }
     onCreatedThisChild(child, data) {
       super.onCreatedThisChild(child, data);
@@ -71,9 +85,22 @@ var RouterOutlet;
       }
       this.getAttribute("onCreatedDebounce")?.(this.value?.obj);
     }
-    created(component) {
-      component ?? (component = this.value?.obj);
-      this.getAttribute("onCreated")?.(component);
+    onCreateDrThis($component, $rawSet) {
+      this.childObject = $component ?? ($component = this.value?.obj);
+      this.childRawSet = $rawSet;
+      if ($component) {
+        this.getAttribute("onCreated")?.($component);
+        if ((0, import_OnChangeAttrRender.isOnChangeAttrRender)($component)) {
+          this.getAttributeNames().filter((it) => it.startsWith("attribute-")).forEach((it) => {
+            var _a;
+            const attrName = it.replace(/^attribute-/, "");
+            const attrValue = this.getAttribute(it);
+            (_a = $rawSet.dataSet.render).attribute ?? (_a.attribute = {});
+            $rawSet.dataSet.render.attribute[attrName] = attrValue;
+            $component.onChangeAttrRender(attrName, attrValue, { rawSet: $rawSet });
+          });
+        }
+      }
     }
   }
   _RouterOutlet.RouterOutlet = RouterOutlet2;
@@ -83,7 +110,11 @@ var RouterOutlet_default = {
   routerOutlet: (config, executer) => {
     return import_RawSet.RawSet.createComponentTargetElement({
       name: RouterOutlet.selector,
-      template: '<div dr-this="@this@.value" dr-detect-option-if="@this@?.value && @this@?.if" dr-option-strip="true" dr-on-create:arguments="@this@.createArguments" dr-on-create:callback="@this@?.created?.($component)">#innerHTML#</div>',
+      template: `
+        <dr-if value="\${@this@.sw}$">
+            <div dr-this="@this@.value" dr-detect-option-if="@this@?.value && @this@?.if" dr-option-strip="true" dr-on-create:arguments="@this@.createArguments" dr-on-create:callback="@this@?.onCreateDrThis?.($component, $rawSet)">#innerHTML#</div>
+        </dr-if>
+        `,
       objFactory: (e, o, r2, counstructorParam) => {
         return executer?.run({ rootObject: new RouterOutlet.RouterOutlet(...counstructorParam), config });
       }