@dooboostore/dom-render 1.0.110 → 1.0.111

package/dist/esm/dist/DomRenderProxy.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/DomRenderProxy.ts"],
+  "sourcesContent": ["import { RawSet, RenderResult } from './rawsets/RawSet';\nimport { EventManager, NormalAttrDataType } from './events/EventManager';\nimport { DomRenderConfig } from './configs/DomRenderConfig';\nimport { ScriptUtils } from '@dooboostore/core-web/script/ScriptUtils';\nimport { DomRenderFinalProxy, Shield } from './types/Types';\nimport { RawSetType } from './rawsets/RawSetType';\nimport { DrThisProperty } from './operators/DrThisProperty';\nimport { RawSetOperatorType } from './rawsets/RawSetOperatorType';\nimport { ComponentSet } from './components/ComponentSet';\nimport { DomRenderNoProxyKey, isDomRenderNoProxy } from './decorators/DomRenderNoProxy';\nimport { isOnCreateRender } from './lifecycle/OnCreateRender';\nimport { isOnInitRender } from './lifecycle/OnInitRender';\nimport { isOnCreateRenderData } from './lifecycle/OnCreateRenderData';\nimport { isOnChangeAttrRender } from './lifecycle/OnChangeAttrRender';\nimport { DocumentUtils } from '@dooboostore/core-web/document/DocumentUtils';\nimport { isDefined } from '@dooboostore/core/types';\nimport { isOnBeforeReturnSet } from './lifecycle/OnBeforeReturnSet';\nimport { isOnChildRenderedByProperty } from './lifecycle/OnChildRenderedByProperty';\nimport { ObjectUtils } from '@dooboostore/core/object/ObjectUtils';\nimport { ValidUtils } from '@dooboostore/core/valid/ValidUtils';\nimport { isOnProxyDomRender } from './lifecycle/OnProxyDomRender';\nimport { isOnRawSetRendered } from './lifecycle/OnRawSetRendered';\n\nconst excludeGetSetPropertys = [\n  'onBeforeReturnGet',\n  'onBeforeReturnSet',\n  '__domrender_components',\n  '__render',\n  '_DomRender_isFinal',\n  '_domRender_ref',\n  '_rawSets',\n  '_domRender_proxy',\n  '_targets',\n  '_DomRender_origin',\n  '_DomRender_ref',\n  '_DomRender_proxy'\n];\nexport const isWrapProxyDomRenderProxy = <T>(obj: T): boolean => {\n  return obj && typeof obj === 'object' && '_DomRender_isProxy' in obj;\n};\nexport const getDomRenderOriginObject = <T>(obj: T): T => {\n  if (isWrapProxyDomRenderProxy(obj)) {\n    return (obj as any)._domRender_origin;\n  }\n  return obj;\n};\nexport const getDomRenderConfig = (obj: any): DomRenderConfig | undefined => {\n  if (isWrapProxyDomRenderProxy(obj)) {\n    return obj._domRender_config;\n  }\n  return undefined;\n};\n//@ts-ignore\nexport const getDomRenderProxy = <T>(obj: T): DomRenderProxy<T> | undefined => {\n  if (isWrapProxyDomRenderProxy(obj)) {\n    //@ts-ignore\n    return (obj as any)._domRender_proxy as DomRenderProxy<T>;\n  }\n  return undefined;\n};\nexport class DomRenderProxy<T extends object> implements ProxyHandler<T> {\n  public _domRender_ref = new Map<object, Set<string>>();\n  public _rawSets = new Map<string, Set<RawSet>>();\n  public _domRender_proxy?: T;\n  // public _firstTarget: Node;\n  public _targets = new Set<Node>();\n\n  constructor(\n    public _domRender_origin: T,\n    target: Node | null | undefined,\n    public _domRender_config: DomRenderConfig\n  ) {\n    if (target) {\n      this._targets.add(target);\n      // this._firstTarget = target;\n    }\n\n    // setInterval(() => {\n    //   this._rawSets.forEach(it => {\n    //     Array.from(it).forEach(it => {\n    //       console.log(it, it.isConnected)\n    //     })\n    //   });\n    // }, 1000)\n  }\n\n  public static unFinal<T = any>(obj: T): T {\n    return DomRenderFinalProxy.unFinal(obj);\n  }\n\n  public static final<T = any>(obj: T): T {\n    return DomRenderFinalProxy.final(obj);\n  }\n\n  public static isFinal<T = any>(obj: T) {\n    return ValidUtils.isNull(obj) || DomRenderFinalProxy.isFinal(obj);\n  }\n\n  public async run(objProxy: T) {\n    this._domRender_proxy = objProxy;\n    if (isOnProxyDomRender(objProxy)) {\n      objProxy.onProxyDomRender(this._domRender_config);\n    }\n    const obj = getDomRenderOriginObject<any>(objProxy);\n    if (obj) {\n      Object.keys(obj).forEach(it => {\n        // Reflect \uBA54\uD0C0\uB370\uC774\uD130\uC5D0\uC11C domRender:NoProxy \uC5EC\uBD80 \uD655\uC778\n        try {\n          const isNoProxy =\n            Reflect.getMetadata(DomRenderNoProxyKey, obj, it) ||\n            Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);\n          if (isNoProxy) {\n            return obj;\n          }\n        } catch (e) {}\n        const target = obj[it];\n        if (\n          target !== undefined &&\n          target !== null &&\n          typeof target === 'object' &&\n          !DomRenderProxy.isFinal(target) &&\n          !Object.isFrozen(target) &&\n          !(obj instanceof Shield)\n        ) {\n          const isExcluded = this._domRender_config.proxyExcludeTyps?.some(it => target instanceof it) ?? false;\n          // const filter = this._domRender_config.proxyExcludeTyps?.filter(it => target instanceof it) ?? [];\n          if (!isExcluded) {\n            const proxyAfter = this.proxy(objProxy, target, it);\n            obj[it] = proxyAfter;\n          }\n        }\n      });\n    }\n    // console.log('target', this._targets);\n    for (let target of this._targets) {\n      await this.initRender(target);\n    }\n  }\n\n  public async initRender(target: Node, rawSet?: RawSet) {\n    // if (target instanceof Element) {\n    //   target.setAttribute('dr-this', 'this');\n    //   const rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this.config);\n    //   this.render(rawSets)\n    //   return;\n    // }\n    //\n    if (target instanceof Element) {\n      // \uC911\uC694: \uB098\uB97C\uD1B5\uD574 \uC774\uC5B4\uC9C4\uACF3\uC758 \uC704\uCE58\uB97C \uB0A8\uACA8\uC57C\uB41C\uB2E4 \uC548\uADF8\uB7EC\uBA74 TargetElement\uB294 \uC54C\uC218 \uC788\uB294 \uBC29\uBC95\uC774 \uC5C6\uB2E4. \uC5EC\uAE30\uC11C \uD754\uC801\uC744 \uB0A8\uACA8\uC918\uC57C \uD55C\uB2E4.\n      // const targetElementNames = (this.config.targetElements?.map(it => it.name.toLowerCase().replaceAll('.', '\\\\.')) ?? []).join(',');\n      // Array.from(target.querySelectorAll(targetElementNames)).forEach(it => it.setAttribute(EventManager.parentVariablePathAttrName, '@this@'));\n      target.innerHTML = target.innerHTML.replace(/@this@/g, 'this');\n    }\n    // TODO: \uD55C\uACF3\uC5D0\uC11C \uCC98\uB9AC \uD544\uC694\uD560\uB4EF.. \uB108\uBB34 \uC0B0\uBC1C\uC801\uC73C\uB85C \uC788\uC74C.\n    const onCreate = (target as any).getAttribute?.(RawSet.DR_ON_CREATE_ARGUMENTS_OPTIONNAME);\n    let createParam: any[] = [];\n    if (onCreate) {\n      createParam = ObjectUtils.Script.evaluateReturn(onCreate, this._domRender_proxy);\n      if (!Array.isArray(createParam)) {\n        createParam = [createParam];\n      }\n    }\n\n    if (isOnCreateRenderData(this._domRender_proxy)) {\n      this._domRender_proxy?.onCreateRenderData({ rootParent: this._domRender_proxy });\n    }\n\n    if (isOnCreateRender(this._domRender_proxy)) {\n      this._domRender_proxy.onCreateRender(...createParam);\n    }\n\n    // const innerHTML = (target as any).innerHTML ?? '';\n    this._targets.add(target);\n    const rawSets = RawSet.checkPointCreates(target, this._domRender_proxy, this._domRender_config);\n    // console.log('initRender -------rawSet', rawSets)\n    // \uC911\uC694 \uCD08\uAE30\uC5D0 \uD55C\uBC88 \uD295\uACA8\uC918\uC57C\uD568.\n    this._domRender_config.eventManager.applyEvent(\n      this._domRender_proxy,\n      this._domRender_config.eventManager.findAttrElements(target as Element, this._domRender_config),\n      this._domRender_config\n    );\n    rawSets.forEach(it => {\n      const variables = it.getUsingTriggerVariables(this._domRender_config);\n      if (variables.size <= 0) {\n        this.addRawSet('', it);\n      } else {\n        variables.forEach(sit => {\n          this.addRawSet(sit, it);\n        });\n      }\n    });\n\n    const targetRawSets = await this.render(this.getRawSets());\n    for (let targetRawSet of targetRawSets) {\n      const onInit = (target as any).getAttribute?.(RawSet.DR_ON_INIT_ARGUMENTS_OPTIONNAME);\n      let initParam: any;\n      if (onCreate) {\n        initParam = ScriptUtils.evaluateReturn(onCreate, this._domRender_proxy);\n      }\n      if (isOnInitRender(this._domRender_proxy)) {\n        await this._domRender_proxy.onInitRender(\n          initParam,\n          rawSet ?? ({ dataSet: { config: this._domRender_config } } as any)\n        );\n      }\n    }\n  }\n\n  public getRawSets() {\n    const set = new Set<RawSet>();\n    this._rawSets.forEach((v, k) => {\n      v.forEach(it => set.add(it));\n    });\n    return Array.from(set);\n  }\n\n  // \uC911\uC694 important\n  public async render(raws?: RawSet[] | string, fullPathStr?: string) {\n    if (typeof raws === 'string') {\n      const iter = this._rawSets.get(raws);\n      if (iter) {\n        raws = Array.from(iter);\n      } else {\n        raws = undefined;\n      }\n    }\n    const removeRawSets: RawSet[] = [];\n    const rawSets = raws ?? this.getRawSets();\n\n    // console.log('----', rawSets);\n    for (const it of rawSets as RawSet[]) {\n      it.getUsingTriggerVariables(this._domRender_config).forEach(path => {\n        // console.log('getUsingTriggerVariables->', path);\n        this.addRawSet(path, it);\n      });\n\n      let renderResult: RenderResult | undefined;\n      if (it.isConnected) {\n        // \uC911\uC694 render\uB420\uB54C targetAttribute \uCCB4\uD06C \uD574\uC57C\uD568.\n        const targetAttrMap = (it.point.node as Element)?.getAttribute?.(EventManager.normalAttrMapAttrName);\n        // console.log('sssssssssSSS?',it, targetAttrMap)\n        // console.log('----2', it, fullPathStr, targetAttrMap, (it.fragment as any).render, it.isConnected, this.getRawSets());\n        if (it.detect?.action) {\n          it.detect.action();\n          // } else if (it.type === RawSetType.TARGET_ELEMENT && it.data && fullPathStr && targetAttrMap && (it.fragment as any).render) {\n        } else if (\n          it.type === RawSetType.TARGET_ELEMENT &&\n          it.dataSet?.render?.currentThis &&\n          fullPathStr &&\n          targetAttrMap\n        ) {\n          new Map<string, NormalAttrDataType>(JSON.parse(targetAttrMap)).forEach((v, k) => {\n            // it?.data.onChangeAttrRender(k, null, v);\n            // console.log('------->?',v,k);\n            const isUsing = v.variablePaths.some(it => EventManager.isUsingThisVar(it.inner, `this.${fullPathStr}`))\n            // console.log('------->?',v,k, isUsing);\n            if (isUsing) {\n              const targetAttrObject = RawSet.getAttributeObject(it.point.node as Element, {\n                script: it.dataSet?.render?.renderScript ?? '',\n                obj: Object.assign(this._domRender_proxy ?? {}, { __render: it.dataSet?.render })\n              });\n              it.dataSet.render ??= {};\n              it.dataSet.render.attribute = targetAttrObject;\n              // const render = it.dataSet?.render;\n              // console.log('render-->!!!!!', it.dataSet.render);\n              // const script = `${render.renderScript} return ${v} `;\n              // const cval = ScriptUtils.eval(script, Object.assign(this._domRender_proxy ?? {}, { __render: render }));\n              if (isOnChangeAttrRender(it.dataSet?.render?.currentThis)) {\n                it.dataSet?.render?.currentThis?.onChangeAttrRender?.(k, targetAttrObject[k], { rawSet: it });\n              }\n            }\n            // console.log('---?', v, fullPathStr, isUsing);\n          });\n          // ------------------->\n        } else {\n          const rawSets = await it.render(this._domRender_proxy, this._domRender_config);\n          renderResult = rawSets;\n          // \uADF8\uC678 \uC790\uC2DD\uB4E4 render\n          if (rawSets && rawSets.raws.length > 0) {\n            await this.render(rawSets.raws);\n          }\n        }\n      } else {\n        removeRawSets.push(it);\n      }\n\n      const t = it.findNearThis(this._domRender_proxy);\n      // TODO: \uD638\uCD9C\uB41C\uACF3\uC5D0\uC11C \uB610 \uBCC0\uC218\uB97C \uC218\uC815\uD558\uAC8C\uB418\uBA74 \uBB34\uD55C\uB8E8\uD504\uB2C8\uAE50 \uC660\uB9CC\uD558\uBA74 \uC0AC\uC6A9\uBABB\uD558\uAC8C \uD574\uC57C\uD55C\uB2E4.\n      if (isOnRawSetRendered(t)) {\n        await t.onRawSetRendered(it, { path: fullPathStr, renderResult });\n      }\n      // console.log('----', it);\n    }\n\n    if (removeRawSets.length > 0) {\n      this.removeRawSet(...removeRawSets);\n    }\n    return this.getRawSets();\n  }\n\n  // domrender_ref\uB85C \uCC3E\uB294\uAC78\uB85C \uBC14\uAFC8\n  // public findRootDomRenderProxy(): DomRenderProxy<any> {\n  //   let current:DomRenderProxy<any>  = this;\n  //   while (current.parentProxy) {\n  //     current = current.parentProxy;\n  //   }\n  //   return current;\n  // }\n\n  public root(\n    pathInfos: { path: string; obj: any }[][],\n    value?: any,\n    lastDoneExecute = true\n  ): { path: string; obj: any }[][] {\n    // console.log('root--->', paths, value, this._domRender_ref, this._domRender_origin);\n    const fullPaths: { path: string; obj: any }[][] = [];\n    if (this._domRender_ref.size > 0) {\n      this._domRender_ref.forEach((it, key) => {\n        if ('_DomRender_isProxy' in key) {\n          it.forEach(sit => {\n            try {\n              const concat = pathInfos.concat([[{ path: sit, obj: key }]]);\n              const items: { path: string; obj: any }[][] = (key as any)._DomRender_proxy?.root(\n                concat,\n                value,\n                lastDoneExecute\n              );\n\n              fullPaths.push(items.flat());\n              // fullPaths.push({path: items.map(it=>it.path).join(','), obj: this._domRender_proxy});\n              // fullPaths.push({path: items.map(it=>it.path).join(','), obj: this._domRender_proxy});\n            } catch (e) {\n              // \uC624\uBE0C\uC81D\uD2B8\uB4E4 \uC5C6\uC5B4\uC84C\uC744\uC218\uB3C4\uC788\uB2E4 Destroy\uC2DC\uC810\uC5D0\uC11C \uC624\uB958\uB098\uB294\uACBD\uC6B0\uAC00 \uC788\uB2E4. \uB530\uB77C\uC11C \uCC38\uC870 \uD558\uB294\uBD80\uBD84 \uC5C6\uC5B4\uC838\uC57C\uD55C\uB2E4.\n              // console.error(e)\n              // it.delete(sit);\n            }\n          });\n        }\n      });\n    } else {\n      // const firstPathStr = paths.slice(1).reverse().join('.');\n      const strings = pathInfos.reverse().map(it => it.map(it => it.path).join(','));\n      // array\uAC19\uC740\uACBD\uC6B0\uB3C4 \uD0A4\uAC12\uC73C\uB85C \uC811\uADFC\uD558\uAE30\uB54C\uBB38\uC5D0 \uD2B9\uC815 \uC778\uB371\uC2A4\uB97C \uCC3E\uC544\uC11C \uADF8\uBD80\uBD84\uB9CC \uBC14\uAFD4\uC904\uC218 \uC788\uB2E4.\n      const fullPathStr = strings\n        .map(it => (isNaN(Number(it)) ? '.' + it : `[${it}]`))\n        .join('')\n        .slice(1);\n      // console.log('-------fullPathStr', fullPathStr, lastDoneExecute);\n      if (lastDoneExecute) {\n        // const firstData = ScriptUtils.evalReturn('this.' + firstPathStr, this._domRender_proxy);\n        // console.log('-------', firstPathStr, firstData);\n        // if (firstData instanceof Dictionary) {\n        // }\n        const iterable = this._rawSets.get(fullPathStr);\n        // array check\n        const front = strings\n          .slice(0, strings.length - 1)\n          .map(it => (isNaN(Number(it)) ? '.' + it : `[${it}]`))\n          .join('');\n        const lastPropertyName = strings[strings.length - 1];\n        const path = 'this' + front;\n        const data = ScriptUtils.evaluateReturn(ObjectUtils.Path.toOptionalChainPath(path), this._domRender_proxy);\n        // console.log('root-->', this._rawSets, path, data );\n        // console.log('--!!!!', fullPathStr, iterable, data, front, last);\n        // \uC65C\uC5EC\uAE30\uC11C promise\uB97C \uD588\uC744\uAE4C\uB97C \uC0DD\uAC01\uD574\uBCF4\uBA74......\uD6D4.. \uBCC0\uC218\uBCC0\uACBD\uACFC \uD654\uBA74 \uBFCC\uB824\uC8FC\uB294\uAC78 \uB3D9\uAE30\uB85C\uD558\uBA74 \uC131\uB2A5\uC774 \uC548\uB098\uC624\uACE0 \uBE44\uD604\uC2E4\uC801\uC774\uB2E4.  \uADF8\uB798\uC11C promise\n        new Promise<RawSet[]>(async resolve => {\n          let rData: RawSet[] = [];\n          const firstPathStr = front.slice(1);\n\n          // check dictionary\n          // console.log('-promise-------', firstPathStr, this)\n          const firstTargets = this._rawSets.get(firstPathStr);\n          const firstTargetDictionary: RawSet[] = [];\n          firstTargets?.forEach(it => {\n            // console.log('----forEach---', it);\n            const type = (it.point.start as Element)?.getAttribute?.('type');\n            if (type === RawSetOperatorType.DR_THIS_PROPERTY) {\n              firstTargetDictionary.push(it);\n            }\n          });\n          if (firstTargetDictionary.length > 0) {\n            // console.log('ddddddddddd', firstTargetDictionary);\n            const rawSets: RawSet[] = [];\n            let skip = false;\n            firstTargetDictionary.forEach(it => {\n              const startElement = it.point.start as Element;\n              const keys = startElement.getAttribute(RawSet.DR_HAS_KEYS_OPTIONNAME)?.split(',') ?? [];\n              if (value === undefined) {\n                const rawSet = it.getHasRawSet(lastPropertyName);\n                rawSet?.remove();\n                startElement.setAttribute(\n                  RawSet.DR_HAS_KEYS_OPTIONNAME,\n                  keys.filter(it => it !== lastPropertyName).join(',')\n                );\n              }\n              if (!keys.includes(lastPropertyName)) {\n                const raws = DrThisProperty.append(\n                  this._domRender_proxy,\n                  fullPathStr,\n                  lastPropertyName,\n                  it,\n                  this._domRender_config\n                );\n                if (raws) {\n                  rawSets.push(...raws);\n                }\n              } else {\n                skip = true;\n              }\n            });\n            if (skip === false || rawSets.length > 0) {\n              rData = await this.render(rawSets);\n            }\n          }\n\n          if (lastPropertyName === 'length' && Array.isArray(data)) {\n            const aIterable = this._rawSets.get(firstPathStr);\n            if (aIterable) {\n              rData = await this.render(Array.from(aIterable));\n            }\n          } else if (iterable) {\n            // console.log('------------',iterable, fullPaths)\n            rData = await this.render(Array.from(iterable), fullPathStr);\n          }\n\n          // console.log('-----------', this, lastPropertyName );\n          // this._targets.forEach(it => {\n          //   // return;\n          //   if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {\n          //     const targets = eventManager.findAttrElements((it as DocumentFragment | Element), this.config);\n          //     eventManager.changeVar(this._domRender_proxy, targets, `this.${fullPathStr}`, this.config);\n          //   }\n          // });\n\n          const Node = ((this._domRender_config.window as any).Node)\n          this._targets.forEach(it => {\n            // return;\n            if (it.nodeType === Node.DOCUMENT_FRAGMENT_NODE || it.nodeType === Node.ELEMENT_NODE) {\n              const targets = this._domRender_config.eventManager.findAttrElements(\n                it as DocumentFragment | Element,\n                this._domRender_config\n              );\n              this._domRender_config.eventManager.changeVar(\n                this._domRender_proxy,\n                targets,\n                `this.${fullPathStr}`,\n                this._domRender_config\n              );\n            }\n          });\n\n          //\uB79C\uB354\uB300\uC0C1\uB41C\uAC8C\uC788\uC73C\uBA74\n          if (rData?.length > 0 && isOnChildRenderedByProperty(data)) {\n            const propertyValue = ScriptUtils.evaluateReturn(`this.${lastPropertyName}`, data);\n            data.onChildRenderedByProperty(lastPropertyName, propertyValue);\n            // data\n          }\n          resolve(rData);\n        }).then(it => {\n          // console.log('DonrenderProxy root RenderDone')\n        });\n      }\n      fullPaths.push([{ path: fullPathStr, obj: this._domRender_proxy }]);\n    }\n\n    // console.log('dddddd', fullPaths.flatMap(it=>it).map(it=>it.path))\n    return fullPaths;\n  }\n\n  public set(target: T, p: string | symbol, value: any, receiver: T): boolean {\n    // console.log('set------->', target, p, value, receiver, Date.now())\n    // console.log('set------->', p,value)\n    // console.log('set------->', target, p, value, receiver, Date.now())\n    // try {\n    //   const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, target, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);\n    //   if (isNoProxy) {\n    //     return obj;\n    //   }\n    // }catch (e) {}\n\n    // console.log('set-->', p, value, target, receiver, Reflect.getMetadata(DomRenderNoProxyKey, target, p) );\n\n    if (\n      (typeof p === 'string' && p !== '__domrender_components' && excludeGetSetPropertys.includes(p)) ||\n      Reflect.getMetadata(DomRenderNoProxyKey, target, p)\n    ) {\n      (target as any)[p] = value;\n      return true;\n    }\n    // const old =  (target as any)[p];\n    // console.log('set proxy-->', target, p, value, this._rawSets, this._domRender_ref);\n    // if (typeof p === 'string' && '__render' === p) {\n    //     (target as any)[p] = value;\n    //     return true;\n    // }\n    // console.log('set--?', p, target, value);\n\n    if (typeof p === 'string') {\n      value = this.proxy(receiver, value, p);\n    }\n\n    // console.log('set typeChecked',  (target as any)[p] instanceof ComponentSet, value instanceof ComponentSet);\n    // if ((target as any)[p] instanceof ComponentSet) {\n    //   (target as any)[p]?.obj?.onDrThisUnBind?.();\n    // }\n    // is ComponentSet\n    if (value instanceof ComponentSet && (target as any)[p] instanceof ComponentSet) {\n      value.config.beforeComponentSet = (target as any)[p];\n    }\n    (target as any)[p] = value;\n    let fullPathInfo: { path: string; obj: any }[][] = [];\n    if (typeof p === 'string') {\n      fullPathInfo = this.root([[{ path: p, obj: this._domRender_proxy }]], value);\n    }\n\n    // console.log('setRooot', fullPathInfo);\n\n    //normal attribute \uB610\uD55C \uB9C1\uD06C\uB791 \uAC19\uC740 \uC99D\uC138\uB77C\uC11C \uC774\uB807\uAC8C \uD574\uC918\uC57C\uD55C\uB2E4!!\n    // const rootDomRenderProxy = this.findRootDomRenderProxy();\n    // console.log('set!!!!!!!', fullPathInfo, rootDomRenderProxy)\n    // console.log('--------rootDom',fullPathInfo, rootDomRenderProxy, rootDomRenderProxy._domRender_proxy)\n    const rootElement = this._domRender_config.rootElement ?? this._domRender_config.window.document;\n    DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.normalAttrMapAttrName)?.forEach(\n      elementInfo => {\n        // @ts-ignore\n        // const optionalPath = ObjectUtils.Path.toOptionalChainPath(elementInfo.value);\n        const targets = new Map<string, NormalAttrDataType>(\n          ObjectUtils.Script.evaluateReturn<[string, NormalAttrDataType][]>(elementInfo.value)\n        );\n        Array.from(targets.entries())\n          .filter(isDefined)\n          .flatMap(([key, valueScript]) => {\n            return fullPathInfo\n              .flat()\n              .filter(it => valueScript.variablePaths?.some(vit=> vit.inner.includes(`this.${it.path}`)))\n              .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));\n          })\n          .forEach(it => {\n            // const optionalPaths = it.valueScript.variablePaths.map(it => ObjectUtils.Path.toOptionalChainPath(it))\n            const variablePaths = it.valueScript.variablePaths;\n            let targetScript = it.valueScript.originalAttrValue;\n              let script: string;\n              if (it.valueScript.isStringTemplate) {\n                  variablePaths.forEach(it => {\n                      let r = ObjectUtils.Path.toOptionalChainPath(it.inner);\n                      targetScript = targetScript.replaceAll(it.origin, `\\${${r}}`);\n                  })\n                  script = '`' + targetScript + '`';\n              } else {\n                  variablePaths.forEach(it => {\n                      let r = ObjectUtils.Path.toOptionalChainPath(it.inner);\n                      targetScript = targetScript.replaceAll(it.origin, `${r}`);\n                  })\n                  script = targetScript;\n              }\n            // variablePaths.forEach(it => {\n            //   let r = ObjectUtils.Path.toOptionalChainPath(it.inner);\n            //   targetScript = targetScript.replaceAll(it.origin,`\\${${r}}`);\n            // })\n            const value1 = ObjectUtils.Script.evaluateReturn(script, it.pathInfo.obj);\n            // console.log('proxy set!Attribut======', it.key, value1)\n            if (value1 === null) {\n              elementInfo.element.removeAttribute(it.key);\n              elementInfo.element[it.key] = null;\n            } else {\n              elementInfo.element.setAttribute(it.key, value1);\n              elementInfo.element[it.key] = value1;\n            }\n          });\n      }\n    );\n\n    //\uC5EC\uAE30\uC11C \uB9C1\uD06C \uAC19\uC740\uAC70 \uD574\uC918\uC57C\uD568  *-link\uB85C \uBCC0\uC218\uAC12\uC774 \uBCC0\uACBD\uB418\uBA74 \uADF8\uAC78 \uCC38\uACE0\uD558\uACE0\uC788\uB294 \uB2E4\uB978\uAC83\uB4E4\uC5D0\uB3C4 \uD574\uC918\uC57C\uD55C\uB2E4.\n    DocumentUtils.querySelectorAllByAttributeName(rootElement, EventManager.linkTargetMapAttrName)?.forEach(\n      elementInfo => {\n        // @ts-ignore\n        const targets = new Map<string, string>(ScriptUtils.evaluateReturn<[string, string][]>(elementInfo.value));\n\n        Array.from(targets.entries())\n          .filter(([key, value]) => value.trim())\n          .filter(isDefined)\n          .flatMap(([key, valueScript]) => {\n            return fullPathInfo\n              .flat()\n              .filter(it => valueScript.includes(`this.${it.path}`))\n              .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));\n          })\n          .forEach(info => {\n            const value1 = ScriptUtils.evaluateReturn(info.valueScript, info.pathInfo.obj);\n            const applyAttributeName = EventManager.linkAttrs.find(it => it.name === info.key);\n            if (applyAttributeName) {\n              if (value1 === null) {\n                elementInfo.element.removeAttribute(applyAttributeName.property);\n              } else {\n                // console.log('ppppppppppppppppppppppp', applyAttributeName, elementInfo)\n                elementInfo.element.setAttribute(applyAttributeName.property, value1);\n              }\n            }\n          });\n\n        Array.from(targets.entries())\n          .filter(([key, value]) => value.trim())\n          .filter(isDefined)\n          .flatMap(([key, valueScript]) => {\n            return fullPathInfo\n              .flat()\n              .filter(it => valueScript.includes(`this.${it.path}`))\n              .flatMap(it => ({ key, valueScript: valueScript, pathInfo: it }));\n          })\n          .forEach(info => {\n            const linkInfo = EventManager.linkAttrs.find(it => it.name === info.key);\n            if (linkInfo) {\n              elementInfo.element[linkInfo.property] = value;\n            }\n          });\n      }\n    );\n\n    // console.log('---end',receiver);\n    if (\n      'onBeforeReturnSet' in receiver &&\n      typeof p === 'string' &&\n      !(this._domRender_config.proxyExcludeOnBeforeReturnSets ?? []).concat(excludeGetSetPropertys).includes(p)\n    ) {\n      if (isOnBeforeReturnSet(receiver)) {\n        receiver.onBeforeReturnSet?.(\n          p,\n          value,\n          fullPathInfo.map(it => it.map(it => it.path).join())\n        );\n      }\n    }\n    return true;\n  }\n\n  get(target: T, p: string | symbol, receiver: any): any {\n    // console.log('get-->', target, p, receiver);\n    if (p === '_DomRender_origin' || p === '_domRender_origin') {\n      return this._domRender_origin;\n    } else if (p === '_DomRender_ref' || p === '_domRender_ref') {\n      return this._domRender_ref;\n    } else if (p === '_DomRender_config' || p === '_domRender_config') {\n      return this._domRender_config;\n    } else if (p === '_DomRender_proxy' || p === '_domRender_proxy') {\n      return this;\n    } else {\n      // Date\uB77C\uB358\uC9C0 \uC774\uB7F0\uB188\uB4E4\uC740-_-\uD504\uB85D\uC2DC\uAC00 \uC774\uC0C1\uD558\uAC8C \uB3D9\uC791\uD574\uC11C\n      // console.log('--->', p, target, target.bind, 'bind' in target)\n      // if ((p in target) && ('bind' in target)) {\n      //     try{\n      //     return (target as any)[p].bind(target);\n      //     }catch (e) {\n      //         console.error(e)\n      //     }\n      // } else {\n      //     return (target as any)[p]\n      // }\n      // return (p in target) ? (target as any)[p].bind(target) : (target as any)[p]\n      // console.log('-->', p, Object.prototype.toString.call((target as any)[p]), (target as any)[p])\n      // return (target as any)[p]\n      let it = (target as any)[p];\n      if (\n        it &&\n        typeof it === 'object' &&\n        '_DomRender_isProxy' in it &&\n        Object.prototype.toString.call(it._DomRender_origin) === '[object Date]'\n      ) {\n        it = it._DomRender_origin;\n      }\n\n      if (\n        'onBeforeReturnGet' in receiver &&\n        typeof p === 'string' &&\n        !(this._domRender_config.proxyExcludeOnBeforeReturnGets ?? []).concat(excludeGetSetPropertys).includes(p)\n      ) {\n        (receiver as any)?.onBeforeReturnGet?.(\n          p,\n          it,\n          this.root([[{ path: p, obj: this._domRender_proxy }]], it, false)\n        );\n      }\n      return it;\n    }\n  }\n\n  deleteProperty(target: T, p: string | symbol): boolean {\n    delete (target as any)[p];\n    if (typeof p === 'string') {\n      this.root([[{ path: p, obj: this._domRender_proxy }]]);\n    }\n    return true;\n  }\n\n  has(target: T, p: string | symbol): boolean {\n    return p === '_DomRender_isProxy' || p in target;\n  }\n\n  proxy(parentProxy: T, obj: T | any, p: string) {\n    try {\n      // const isNoProxy = Reflect.getMetadata(DomRenderNoProxyKey, obj, p) || Reflect.getMetadata(DomRenderNoProxyKey, Object.getPrototypeOf(obj).constructor);\n      const isObject = typeof obj === 'object';\n      const isNoProxy = isObject && isDomRenderNoProxy(obj, p);\n      const isExclude = this._domRender_config.proxyExcludeTyps?.some(it => obj instanceof it) ?? false;\n      const isFinal = isObject && DomRenderProxy.isFinal(obj);\n      const isFrozen = Object.isFrozen(obj);\n      const isShield = obj instanceof Shield;\n      if (\n        obj === undefined ||\n        obj === null ||\n        isNoProxy ||\n        isExclude ||\n        ValidUtils.isNullOrUndefined(obj) ||\n        !isObject ||\n        isFinal ||\n        isFrozen ||\n        isShield\n      ) {\n        return obj;\n      }\n    } catch (e) {}\n\n    /*\n    const proxyTarget = (this._domRender_config.proxyExcludeTyps?.filter(it => obj instanceof it) ?? []).length <= 0;\n    if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && !('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {\n      const domRender = new DomRenderProxy(obj, undefined, this._domRender_config);\n      domRender.addRef(parentProxy, p);\n      const proxy = new Proxy(obj, domRender);\n      domRender.run(proxy);\n      return proxy;\n    }\n    if (proxyTarget && obj !== undefined && obj !== null && typeof obj === 'object' && ('_DomRender_isProxy' in obj) && !DomRenderProxy.isFinal(obj) && !Object.isFrozen(obj) && !(obj instanceof Shield)) {\n      const d = (obj as any)._DomRender_proxy as DomRenderProxy<T>;\n      d.addRef(this._domRender_proxy!, p);\n      return obj;\n    } else {\n      return obj;\n    }\n */\n    if (!isWrapProxyDomRenderProxy(obj)) {\n      const domRender = new DomRenderProxy(obj, undefined, this._domRender_config);\n      domRender.addRef(parentProxy, p);\n      const proxy = new Proxy(obj, domRender);\n      domRender.run(proxy);\n      return proxy;\n    }\n    if (isWrapProxyDomRenderProxy(obj)) {\n      const d = (obj as any)._DomRender_proxy as DomRenderProxy<T>;\n      d.addRef(this._domRender_proxy!, p);\n      return obj;\n    } else {\n      return obj;\n    }\n  }\n\n  public addRef(parent: object, path: string) {\n    if (!this._domRender_ref.get(parent)) {\n      this._domRender_ref.set(parent, new Set<string>());\n    }\n    this._domRender_ref.get(parent)?.add(path);\n  }\n\n  public addRawSetAndRender(path: string, rawSet: RawSet) {\n    this.addRawSet(path, rawSet);\n    this.render([rawSet]);\n  }\n\n  public addRawSet(path: string, rawSet: RawSet) {\n    // console.log('addRawSet--> path:', path, 'rawSet:', rawSet)\n    if (!this._rawSets.get(path)) {\n      this._rawSets.set(path, new Set<RawSet>());\n    }\n    this._rawSets.get(path)?.add(rawSet);\n  }\n\n  // public removeRawSet(...raws: RawSet[]) {\n  //     this._rawSets.forEach(it => {\n  //         raws.forEach(sit => it.delete(sit));\n  //     })\n  //     this.garbageRawSet();\n  // }\n\n  public removeRawSet(...raws: RawSet[]) {\n    this._rawSets.forEach(it => {\n      it.forEach(sit => {\n        if (!sit.isConnected) {\n          it.delete(sit);\n        } else if (raws.includes(sit)) {\n          it.delete(sit);\n        }\n      });\n    });\n    this.targetGarbageRawSet();\n  }\n\n  private targetGarbageRawSet() {\n    this._targets.forEach(it => {\n      if (!it.isConnected) {\n        this._targets.delete(it);\n      }\n    });\n  }\n\n  private garbageRawSet() {\n    this._targets.forEach(it => {\n      if (!it.isConnected) {\n        this._targets.delete(it);\n      }\n    });\n\n    this._rawSets.forEach(it => {\n      it.forEach(sit => {\n        if (!sit.isConnected) {\n          it.delete(sit);\n        }\n      });\n    });\n  }\n}\n"],
+  "mappings": "AAAA,OAAO;",
+  "names": []
+}

package/dist/esm/dist/components/ComponentBase.d.js

@@ -0,0 +1,2 @@
+import "reflect-metadata";
+//# sourceMappingURL=ComponentBase.d.js.map

package/dist/esm/dist/components/ComponentBase.d.js.map

@@ -0,0 +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\uB85C \uCCB4\uD06C\uD574\uC11C \uB4E4\uC5B4\uAC00\uC788\uB294\uAC83\uB9CC \uCC98\uB9AC\uB418\uB3C4\uB85D \uB610\uB294 \uC774\uBBF8\uB4E4\uC5B4\uAC00\uC788\uB294\uAC83\uB3C4 \uBEB4\uC57C\uB420\uAC83\uAC19\uC740\uB370.. \uC801\uC6A9\uD558\uAE34\uD588\uC74C..\uC9C0\uCF1C\uBD10\uC57C\uB420\uB4EF.\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": "AAAA,OAAO;",
+  "names": []
+}

package/dist/esm/dist/components/ComponentSet.d.js

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

package/dist/esm/dist/components/ComponentSet.d.js.map

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

package/dist/esm/dist/components/appender/Appender.d.js

@@ -0,0 +1,5 @@
+var Appender_d_default = _default;
+export {
+  Appender_d_default as default
+};
+//# sourceMappingURL=Appender.d.js.map

package/dist/esm/dist/components/appender/Appender.d.js.map

@@ -0,0 +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": "AAyEA,IAAA,qBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/checkbox/CheckBox.d.js

@@ -0,0 +1,5 @@
+var CheckBox_d_default = _default;
+export {
+  CheckBox_d_default as default
+};
+//# sourceMappingURL=CheckBox.d.js.map

package/dist/esm/dist/components/checkbox/CheckBox.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/checkbox/CheckBox.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace CheckBox {\n  export const selector = 'dr-checkbox';\n  export type Attribute = {\n    class?: string;\n  };\n  export type ChangeOption = { type: 'initialize' | 'event' | 'attributeChange' };\n  export type WrapAttribute = {\n    class?: string;\n    name?: string;\n    checked?: boolean;\n    change?: (checked: boolean, option: ChangeOption) => void;\n  };\n\n  class CheckBoxBase extends ComponentBase<Attribute> {\n    public hidden = true;\n  }\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   styles: '',\n  //   selector: `${selector}.Checked`\n  // })\n  export class Checked extends CheckBoxBase {\n    public name = 'checked';\n\n    constructor() {\n      super({ onlyParentType: CheckBox });\n    }\n  }\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   styles: '',\n  //   selector: `${selector}.UnChecked`\n  // })\n  export class UnChecked extends CheckBoxBase {\n    public name = 'unChecked';\n\n    constructor() {\n      super({ onlyParentType: CheckBox });\n    }\n  }\n\n  // @Component({\n  //   template: template,\n  //   styles: style,\n  //   selector: `${selector}`\n  // })\n  export class CheckBox extends ComponentBase<WrapAttribute> {\n    private checked = false;\n    private inputElement?: HTMLInputElement;\n\n    change(option: ChangeOption, checked?: boolean) {\n      checked = checked ?? this.checked;\n      this.checked = checked;\n      this.setChildrenHidden(checked);\n      this.getAttribute('change')?.(checked, option);\n    }\n\n    private setChildrenHidden(checked: boolean) {\n      this.getChildren(Checked).forEach(it => {\n        it.hidden = !checked;\n      });\n      this.getChildren(UnChecked).forEach(it => {\n        it.hidden = checked;\n      });\n    }\n\n    onCreatedThisChild(child: CheckBoxBase, childData: OnCreateRenderDataParams): void {\n      super.onCreatedThisChild(child, childData);\n      this.setChildrenHidden(this.checked);\n    }\n\n    onInitInputElement(element: HTMLInputElement) {\n      // console.log('---cr', element)\n      this.inputElement = element;\n      this.inputElement.checked = !!this.getAttribute('checked');\n      this.change({ type: 'initialize' }, !!this.getAttribute('checked'));\n    }\n\n    onChangeAttrRender(name: string, val: any, other: OtherData) {\n      super.onChangeAttrRender(name, val, other);\n      // console.log('Checkbox ChangeAttr------', name, val, this.inputElement)\n      if (this.inputElement && this.getAttribute('checked') !== this.checked) {\n        this.inputElement.checked = !!this.getAttribute('checked');\n        this.change({ type: 'attributeChange' }, !!this.getAttribute('checked'));\n      }\n    }\n  }\n}\n\nexport default {\n  checkBoxChecked: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${CheckBox.selector}-checked`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new CheckBox.Checked(), config: config });\n      }\n    });\n  },\n  checkBoxUnchecked: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${CheckBox.selector}-unchecked`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new CheckBox.UnChecked(), config: config });\n      }\n    });\n  },\n  checkBox: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${CheckBox.selector}`,\n      template:\n        '<label class=\"${@this@.getAttribute(\\'class\\')}$\">\\n' +\n        '  <input\\n' +\n        '    name=\"${@this@.getAttribute(\\'name\\')}$\"\\n' +\n        '    dr-on-init=\"@this@.onInitInputElement($element)\"\\n' +\n        '    dr-event-change=\"@this@.change({type: \\'event\\'},$element.checked);\"\\n' +\n        '    type=\"checkbox\" hidden=\"hidden\"/>\\n' +\n        '  #innerHTML#\\n' +\n        '</label>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new CheckBox.CheckBox(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": "AAqGA,IAAA,qBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/choose/Choose.d.js

@@ -0,0 +1,5 @@
+var Choose_d_default = _default;
+export {
+  Choose_d_default as default
+};
+//# sourceMappingURL=Choose.d.js.map

package/dist/esm/dist/components/choose/Choose.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/choose/Choose.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace Choose {\n  export const selector = 'dr-choose';\n  export type Attribute<D> = {\n    data: D;\n  };\n  export type WhenAttribute<D> = {\n    test: (data?: D | null) => boolean;\n  };\n\n  class ChildOtherWiseBase<A> extends ComponentBase<A> {\n    public hidden = true;\n  }\n\n  class ChildBase<D> extends ChildOtherWiseBase<WhenAttribute<D>> {\n    data?: D;\n  }\n\n  export class When<D> extends ChildBase<D> {\n    constructor() {\n      super({ onlyParentType: Choose<D> });\n    }\n  }\n\n  export class OtherWise<D> extends ChildBase<D> {\n    constructor() {\n      super({ onlyParentType: Choose<D> });\n    }\n  }\n\n  export class Choose<D> extends ComponentBase<Attribute<D>> {\n    private choose?: When<D> | OtherWise<D>;\n\n    onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n      super.onCreatedThisChild(child, data);\n      this.setChange(child);\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      if (this.equalsAttributeName(name, 'data')) {\n        this.choose = undefined;\n        const children = this.getChildren([When, OtherWise]).sort(\n          (a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0)\n        );\n        children.forEach(it => this.setChange(it as any));\n      }\n    }\n\n    private setChange(child: When<D> | OtherWise<D>) {\n      child.data = this.getAttribute('data') as any;\n      // when.hidden = true;\n\n      console.log('eeeeeee?', child, child.getAttribute('test'), this.getAttribute('data'));\n      if (!this.choose && child instanceof When && child.getAttribute('test')?.(this.getAttribute('data'))) {\n        console.log('eeeeeee?2');\n        // console.log('------------', child.attribute?.test?.(this.attribute?.data))\n        this.choose = child;\n        if (child.hidden) {\n          child.hidden = false;\n        }\n        // console.log('--------', when)\n      } else if (this.choose !== child) {\n        child.hidden = true;\n      }\n\n      console.log('eeeeeee?3');\n      if (!this.choose && child instanceof OtherWise) {\n        this.choose = child;\n        if (child.hidden) {\n          child.hidden = false;\n        }\n      }\n      console.log('eeeeeee?34');\n    }\n  }\n}\n\nexport default {\n  chooseWhen: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Choose.selector}-when`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Choose.When(), config: config });\n      }\n    });\n  },\n  chooseOtherWise: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Choose.selector}-other-wise`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Choose.OtherWise(), config: config });\n      }\n    });\n  },\n  choose: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Choose.selector}`,\n      template: '#innerHTML#',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Choose.Choose(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": "AAkFA,IAAA,mBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/details/Details.d.js

@@ -0,0 +1,5 @@
+var Details_d_default = _default;
+export {
+  Details_d_default as default
+};
+//# sourceMappingURL=Details.d.js.map

package/dist/esm/dist/components/details/Details.d.js.map

@@ -0,0 +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": "AA6JA,IAAA,oBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/dialog/Dialog.d.js

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

package/dist/esm/dist/components/dialog/Dialog.d.js.map

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

package/dist/esm/dist/components/dialog/example/ImageEditorDialog.d.js

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

package/dist/esm/dist/components/dialog/example/ImageEditorDialog.d.js.map

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

package/dist/esm/dist/components/forOf/ForOf.d.js

@@ -0,0 +1,5 @@
+var ForOf_d_default = _default;
+export {
+  ForOf_d_default as default
+};
+//# sourceMappingURL=ForOf.d.js.map

package/dist/esm/dist/components/forOf/ForOf.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/forOf/ForOf.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\n\nexport namespace ForOf {\n  export const selector = 'dr-for-of';\n  export type Attribute<D> = {\n    value: D;\n  };\n\n  // @Component({\n  //   template: '<div dr-for-of=\"@this@.data\" dr-option-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}`\n  // })\n  export class ForOf<D> extends ComponentBase<Attribute<D>> {\n    private value?: D;\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    }\n  }\n}\n\nexport default {\n  forOf: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: ForOf.selector,\n      template: '<div dr-for-of=\"@this@.value\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new ForOf.ForOf(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": "AA8BA,IAAA,kBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/if/If.d.js

@@ -0,0 +1,5 @@
+var If_d_default = _default;
+export {
+  If_d_default as default
+};
+//# sourceMappingURL=If.d.js.map

package/dist/esm/dist/components/if/If.d.js.map

@@ -0,0 +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": "AAwCA,IAAA,eAAA;",
+  "names": []
+}

package/dist/esm/dist/components/index.d.js

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

package/dist/esm/dist/components/index.d.js.map

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

package/dist/esm/dist/components/input/Input.d.js

@@ -0,0 +1,5 @@
+var Input_d_default = _default;
+export {
+  Input_d_default as default
+};
+//# sourceMappingURL=Input.d.js.map

package/dist/esm/dist/components/input/Input.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/input/Input.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnCreateRender } from '../../lifecycle/OnCreateRender';\nimport { OnDestroyRender, OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';\nimport { Subscription } from '@dooboostore/core/message/Subscription';\nimport { ValidUtils } from '@dooboostore/core/valid/ValidUtils';\nimport { map } from '@dooboostore/core/message/operators/map';\nimport { EventUtils } from '@dooboostore/core-web/event/EventUtils';\nimport { debounceTime } from '@dooboostore/core/message/operators/debounceTime';\nimport { distinctUntilChanged } from '@dooboostore/core/message/operators/distinctUntilChanged';\n\nexport namespace Input {\n  export const selector = `dr-input`;\n  export type Attribute = {\n    name?: string;\n    type?: string;\n    id?: string;\n    class?: string;\n    debounceTime?: number;\n    distinct?: boolean;\n    input?: (value: string, element: Element) => void;\n  };\n\n  export class Base extends ComponentBase<any> {}\n\n  // @Component({\n  //   selector: `${selector}`,\n  //   template,\n  //   styles,\n  // })\n  export class Input extends Base implements OnCreateRender, OnDestroyRender {\n    private element?: HTMLInputElement;\n    private inputSubscription?: Subscription;\n    private resetSubscripton?: Subscription;\n\n    onCreateRender(...param: any[]): void {}\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n      // console.log('dr-input, rawSet', rawSet)\n      const inputElement = this.element;\n      const debounceTimeAttribute = this.getAttribute('debounceTime');\n      const debounceTimeValue = ValidUtils.isNotNullUndefined(debounceTimeAttribute)\n        ? Number(debounceTimeAttribute)\n        : 0;\n      const distinct = ValidUtils.isNotNullUndefined(this.getAttribute('distinct'));\n\n      if (inputElement) {\n        const makeDeboundceDistinctUtilChanged = () => {\n          // let result$ = EventUtils.htmlElementEventObservable(inputElement,'input');\n\n          let result$ = EventUtils.htmlElementEventObservable(inputElement, 'input').pipe(\n            map((event: Event) => {\n              const target = event.target;\n              if (target instanceof HTMLInputElement) {\n                return target.value.trim();\n              }\n              console.warn('Input event target is not an HTMLInputElement:', target);\n              return '';\n            })\n          );\n\n          if (ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {\n            result$ = result$.pipe(debounceTime(debounceTimeValue));\n          }\n          if (ValidUtils.isNotNullUndefined(distinct) && distinct === true) {\n            result$ = result$.pipe(distinctUntilChanged());\n          }\n          return result$;\n        };\n        this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {\n          // console.log('change?????????????', it);\n          this.getAttribute('input')?.(it, inputElement);\n        });\n\n        if (inputElement.form) {\n          this.resetSubscripton = EventUtils.htmlElementEventObservable(inputElement.form, 'reset').subscribe(it => {\n            // console.log('rrrraaa?,', this.inputSubscription, it)\n            this.inputSubscription?.unsubscribe();\n            this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {\n              // console.log('rrrr?')\n              this.getAttribute('input')?.(it, inputElement);\n            });\n          });\n        }\n      }\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      // console.log('-------->',name, value)\n      if (name === 'value') {\n        // console.log('changeAttribu', name, value)\n        // this.wow = {value: value};\n        // this.name = value;\n      }\n    }\n\n    onDestroyRender(metaData?: OnDestroyRenderParams): void {\n      this.resetSubscripton?.unsubscribe();\n      this.inputSubscription?.unsubscribe();\n    }\n  }\n}\n\nexport default {\n  input: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Input.selector}`,\n      template:\n        '<Input type=\"${@this@.getAttribute(\\'type\\')}$\" class=\"${@this@.getAttribute(\\'class\\')}$\" id=\"${@this@.getAttribute(\\'id\\')}$\" name=\"${@this@.getAttribute(\\'name\\')}$\" dr-on-init=\"@this@.element=$element\" >#innerHTML#',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Input.Input(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": "AA2GA,IAAA,kBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/promise/PromiseSwitch.d.js

@@ -0,0 +1,5 @@
+var PromiseSwitch_d_default = _default;
+export {
+  PromiseSwitch_d_default as default
+};
+//# sourceMappingURL=PromiseSwitch.d.js.map

package/dist/esm/dist/components/promise/PromiseSwitch.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/promise/PromiseSwitch.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\n\nimport { ValidUtils } from '@dooboostore/core/valid/ValidUtils';\nimport { Promises } from '@dooboostore/core/promise/Promises';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace PromiseSwitch {\n  export const selector = 'dr-promise-switch';\n  export type ChangeParams<T> =\n    | { status: 'pending' }\n    | { status: 'finally' }\n    | { status: 'fulfilled'; data: T }\n    | { status: 'rejected'; data: any };\n  export type Attribute = {\n    // trigger?: boolean;\n    data: Promise<any> | (() => Promise<any>);\n    change?: <T>(data: ChangeParams<T>) => void;\n  };\n\n  class ChildBase<T = any> extends ComponentBase<T> {\n    public hidden = true;\n  }\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}.Default`\n  // })\n  export class Default extends ChildBase {}\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}.Pending`\n  //   // selector: `System-PromiseSwitch.Pending`\n  // })\n  export class Pending extends ChildBase<{ defaultView?: null }> {\n    // onChangeAttrRender(name: string, value: any, other: OtherData) {\n    //   super.onChangeAttrRender(name, value, other);\n    //   if (this.equalsAttributeName(name, 'defaultView')) {\n    //     // console.log('--------------', value)\n    //     if (value !== null) {\n    //       this.hidden = false;\n    //     } else {\n    //       this.hidden = true;\n    //     }\n    //     // console.log('--------------', this.hidden)\n    //   }\n    // }\n  }\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}.Fulfilled`\n  // })\n  export class Fulfilled<T = any> extends ChildBase {\n    private data?: T;\n\n    setData(data: T) {\n      this.data = data;\n    }\n  }\n\n  // @Component({\n  //   template: '<div dr-if=\"!@this@.hidden\" dr-strip=\"true\">#innerHTML#</div>',\n  //   selector: `${selector}.Rejected`\n  // })\n  export class Rejected<T = any> extends ChildBase {\n    private data?: T;\n\n    setData(data: T) {\n      this.data = data;\n    }\n  }\n\n  /*\n      <dr-promise-switch data=\"${@this@.pickWorldPromise}$\">\n        ${@nearThis@.promiseState.status}$\n        <dr-promise-switch-default>\n            <button class=\"random-world-button\" dr-event-click=\"@this@.pickWorld()\">\n                <i class=\"fa-solid fa-dice\"></i>\n            </button>\n        </dr-promise-switch-default>\n        <dr-promise-switch-pending>\n            <button class=\"random-world-button disabled spin\" >\n                <i class=\"fa-solid fa-dice\"></i>\n            </button>\n        </dr-promise-switch-pending>\n    </dr-promise-switch>\n   */\n  // @Component({\n  //   template: '#innerHTML#',\n  //   selector: `${selector}`\n  // })\n  export class PromiseSwitch extends ComponentBase<Attribute> {\n    // private promise?:  {\n    //   state: 'reject' | 'resolve',\n    //\n    // }\n    private promiseState?: Promises.Result.PromiseState<any, unknown>;\n    private state?: Promises.Result.PromiseState<any, unknown>['status'];\n\n    onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n      super.onCreatedThisChild(child, data);\n      this.childStateChange();\n    }\n\n    childStateChange() {\n      const defaults = this.getChildren(Default);\n      const pendings = this.getChildren(Pending);\n      const fulfilleds = this.getChildren(Fulfilled);\n      const rejecteds = this.getChildren(Rejected);\n      const full = [...fulfilleds, ...rejecteds, ...pendings, ...defaults];\n      // console.log('----!!!!!!-------', this.promiseState, full)\n      if (this.promiseState === undefined) {\n        this.state = undefined;\n        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));\n        defaults.filter(it => it.hidden).forEach(it => (it.hidden = false));\n        pendings.filter(it => it.getAttribute('defaultView') && it.hidden).forEach(it => (it.hidden = false));\n      } else if (this.promiseState.status === 'pending') {\n        this.state = 'pending';\n        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));\n        pendings.filter(it => it.hidden).forEach(it => (it.hidden = false));\n      } else if (this.promiseState.status === 'fulfilled') {\n        this.state = 'fulfilled';\n        const value = this.promiseState.value;\n        // console.log('-----------fulfilled promises', value);\n        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));\n        fulfilleds.forEach(it => {\n          it.setData(value);\n        });\n        fulfilleds.filter(it => it.hidden).forEach(it => (it.hidden = false));\n      } else if (this.promiseState.status === 'rejected') {\n        this.state = 'rejected';\n        const value = this.promiseState.reason;\n        full.filter(it => !it.hidden).forEach(it => (it.hidden = true));\n        rejecteds.forEach(it => {\n          it.setData(value);\n        });\n        rejecteds.filter(it => it.hidden).forEach(it => (it.hidden = false));\n      }\n      return this.state;\n      // console.log('----!!!!!!-end------', this.promiseState, full.map(it=>it.hidden))\n    }\n\n    onChangeAttrRender(name: string, value: any, other: OtherData) {\n      super.onChangeAttrRender(name, value, other);\n      // console.log('-----------changer promises', name, value, this.getChildren(Default));\n      if (this.equalsAttributeName(name, 'data') && value) {\n        // this.childStateChange();\n        this.promiseState = undefined;\n        this.state = undefined;\n        this.promiseState = Promises.Result.wrap(typeof value === 'function' ? value() : (value as Promise<any>));\n        this.getAttribute('change')?.({ status: 'pending' });\n        this.childStateChange();\n        // console.log('----?', this.promiseState)\n        this.promiseState\n          .then(data => {\n            // console.log('------------then', data);\n            this.childStateChange();\n            this.getAttribute('change')?.({ status: 'fulfilled', data: data });\n            return data;\n          })\n          .catch(e => {\n            // console.log('catch', e)\n            this.childStateChange();\n            this.getAttribute('change')?.({ status: 'rejected', data: e });\n            throw e;\n          })\n          .finally(() => {\n            // console.log('-------------finally--------rrrrrrrrrrr', this.promiseState)\n            // this.childStateChange();\n            this.getAttribute('change')?.({ status: 'finally' });\n          });\n        // await this.promiseState;\n\n        // console.log('---------------------rrrrrrrrrrr', this.promiseState)\n      } else if (this.equalsAttributeName(name, 'data') && ValidUtils.isNullOrUndefined(value)) {\n        this.promiseState = undefined;\n        this.childStateChange();\n      }\n    }\n  }\n}\n\nexport default {\n  promiseDefault: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${PromiseSwitch.selector}-default`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new PromiseSwitch.Default(...counstructorParam), config: config });\n      }\n    });\n  },\n  promisePending: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${PromiseSwitch.selector}-pending`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new PromiseSwitch.Pending(...counstructorParam), config: config });\n      }\n    });\n  },\n  promiseFulfilled: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${PromiseSwitch.selector}-fulfilled`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new PromiseSwitch.Fulfilled(...counstructorParam), config: config });\n      }\n    });\n  },\n  promiseRejected: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${PromiseSwitch.selector}-rejected`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new PromiseSwitch.Rejected(...counstructorParam), config: config });\n      }\n    });\n  },\n  promiseSwitch: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${PromiseSwitch.selector}`,\n      template: '#innerHTML#',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new PromiseSwitch.PromiseSwitch(...counstructorParam), config: config });\n      }\n    });\n  }\n};\n"],
+  "mappings": "AAiLA,IAAA,0BAAA;",
+  "names": []
+}

package/dist/esm/dist/components/radio/Radio.d.js

@@ -0,0 +1,5 @@
+var Radio_d_default = _default;
+export {
+  Radio_d_default as default
+};
+//# sourceMappingURL=Radio.d.js.map

package/dist/esm/dist/components/radio/Radio.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/radio/Radio.ts"],
+  "sourcesContent": ["import { ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OtherData } from '../../lifecycle/OnChangeAttrRender';\nimport { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';\n\nexport namespace Radio {\n  export const selector = 'System:Radio';\n  export type Attribute = {\n    class?: string;\n  };\n  export type LabelAttribute = {\n    class?: string;\n    name?: string;\n    value?: string;\n    checked?: boolean;\n    on_change_checked?: (checked: boolean, element: HTMLInputElement) => void;\n  };\n\n  class RadioBase extends ComponentBase<Attribute> {\n    public hidden = true;\n  }\n\n  export class Checked extends RadioBase {\n    public name = 'Checked';\n\n    constructor() {\n      super({ onlyParentType: Radio });\n    }\n  }\n\n  export class UnChecked extends RadioBase {\n    public name = 'unChecked';\n\n    constructor() {\n      super({ onlyParentType: Radio });\n    }\n  }\n\n  export class Radio extends ComponentBase<LabelAttribute> {\n    private checked = false;\n    private inputElement?: HTMLInputElement;\n\n    change(checked?: boolean) {\n      checked = checked ?? this.checked;\n      this.checked = checked;\n      this.setChildrenHidden(checked);\n      console.log('radio checked!!!!!!!', checked, this.checked, this.inputElement?.checked);\n      if (this.getAttribute('on_change_checked')) {\n        this.getAttribute('on_change_checked')?.(checked, this.inputElement!);\n      }\n    }\n\n    private setChildrenHidden(checked: boolean) {\n      this.getChildren(Checked).forEach(it => {\n        it.hidden = !checked;\n      });\n      this.getChildren(UnChecked).forEach(it => {\n        it.hidden = checked;\n      });\n    }\n\n    onCreatedThisChild(child: RadioBase, childData: OnCreateRenderDataParams): void {\n      super.onCreatedThisChild(child, childData);\n      this.setChildrenHidden(this.checked);\n    }\n\n    onInitInputElement(element: HTMLInputElement) {\n      this.inputElement = element;\n    }\n\n    onChangeAttrRender(name: string, val: any, other: OtherData) {\n      super.onChangeAttrRender(name, val, other);\n      if (this.inputElement && this.getAttribute('checked') !== this.checked) {\n        this.inputElement.checked = !!this.getAttribute('checked');\n        console.log('----changeAttribute', this.getAttribute('checked'));\n        this.change(!!this.getAttribute('checked'));\n      }\n    }\n  }\n}\n\nexport default {\n  radioChecked: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Radio.selector}-checked`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Radio.Checked(), config: config });\n      }\n    });\n  },\n  radioUnChecked: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Radio.selector}-unchecked`,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\" >#innerHTML#</div>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Radio.UnChecked(), config: config });\n      }\n    });\n  },\n  radio: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Radio.selector}`,\n      template:\n        '<label class=\"${@this@.getAttribute(\\'class\\')}$\">\\n' +\n        '  <input\\n' +\n        '    name=\"${@this@.getAttribute(\\'name\\')}$\"\\n' +\n        '    checked=\"${@this@.getAttribute(\\'checked\\')}$\"\\n' +\n        '    value=\"${@this@.getAttribute(\\'value\\')}$\"\\n' +\n        '    dr-on-init=\"@this@.onInitInputElement($element)\"\\n' +\n        '    dr-event-change=\"@this@.change($element.checked);\"\\n' +\n        '    type=\"radio\"\\n' +\n        '\\n' +\n        '  />\\n' +\n        \"  ${@this@.getAttribute('checked')}$\\n\" +\n        '  #innerHTML#\\n' +\n        '</label>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new Radio.Radio(...counstructorParam), config: config });\n      }\n    });\n  }\n};"],
+  "mappings": "AAwGA,IAAA,kBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/router/Route.d.js

@@ -0,0 +1,5 @@
+var Route_d_default = _default;
+export {
+  Route_d_default as default
+};
+//# sourceMappingURL=Route.d.js.map

package/dist/esm/dist/components/router/Route.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/router/Route.ts"],
+  "sourcesContent": ["import { attribute, ComponentBase } from '../ComponentBase';\nimport { DomRender } from '../../DomRender';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport type { DomRenderConfig } from '../../configs/DomRenderConfig';\nimport { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';\nimport { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';\nimport { Subscription } from '@dooboostore/core/message/Subscription';\n\nexport namespace Route {\n  export const selector = 'dr-route';\n  export type Attribute<D> = {\n    value?: null | string;\n  };\n\n  abstract class CheckerBase<D> extends ComponentBase<Attribute<D>> implements OnInitRender {\n    protected sw: boolean = false;\n    @attribute({ name: 'value' })\n    value?: string;\n    @DomRenderNoProxy\n    private inputDomRenderConfig?: DomRenderConfig;\n    private routerSubscription?: Subscription;\n\n    constructor(domRenderConfig?: DomRenderConfig) {\n      super();\n      this.inputDomRenderConfig = domRenderConfig;\n    }\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n      this.routerSubscription = this.inputDomRenderConfig?.router?.observable.subscribe(it => {\n        if (this.value && this.inputDomRenderConfig) {\n          this.sw = this.check(this.inputDomRenderConfig);\n        } else {\n          this.sw = false;\n        }\n      });\n    }\n\n    onDrThisBind() {\n      super.onDrThisBind();\n    }\n\n    onDrThisUnBind() {\n      super.onDrThisUnBind();\n    }\n\n    onDestroyRender(data?: OnDestroyRenderParams) {\n      super.onDestroyRender(data);\n      this.routerSubscription?.unsubscribe();\n    }\n\n    abstract check(config?: DomRenderConfig): boolean;\n  }\n\n  export class Match<D> extends CheckerBase<D> {\n    check(config?: DomRenderConfig): boolean {\n      return !!config?.router?.test(this.value);\n    }\n  }\n\n  export class Regexp<D> extends CheckerBase<D> {\n    check(config?: DomRenderConfig): boolean {\n      return !!config?.router?.testRegexp(this.value);\n    }\n  }\n}\n\nexport default {\n  match: (config?: DomRenderConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Route.selector}-match`,\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 Route.Match(config), config: config });\n      }\n    });\n  },\n  regexp: (config?: DomRenderConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Route.selector}-regexp`,\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 Route.Regexp(config), config: config });\n      }\n    });\n  }\n};\n"],
+  "mappings": "AAyEA,IAAA,kBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/select/Select.d.js

@@ -0,0 +1,5 @@
+var Select_d_default = _default;
+export {
+  Select_d_default as default
+};
+//# sourceMappingURL=Select.d.js.map

package/dist/esm/dist/components/select/Select.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/select/Select.ts"],
+  "sourcesContent": ["import { attribute, ChildrenSet, ComponentBase } from '../ComponentBase';\nimport { DomRender, DomRenderRunConfig } from '../../DomRender';\nimport { RawSet } from '../../rawsets/RawSet';\nimport { OnCreateRenderData } from '../../lifecycle/OnCreateRenderData';\nimport { OnInitRender } from '../../lifecycle/OnInitRender';\nimport { OnDestroyRender } from '../../lifecycle/OnDestroyRender';\nimport { EventUtils } from '@dooboostore/core-web/event/EventUtils';\nimport { type Subscription } from '@dooboostore/core/message/Subscription';\nimport { ValidUtils } from '@dooboostore/core-web/valid/ValidUtils';\nimport { DomRenderNoProxy } from '../../decorators/DomRenderNoProxy';\nimport { OnCreateRender } from '../../lifecycle/OnCreateRender';\nimport { DomRenderConfig } from '../../configs/DomRenderConfig';\nimport { WindowUtils } from '@dooboostore/core-web/window/WindowUtils';\nimport { OnRawSetRenderedOtherData } from '../../lifecycle';\n\n/** \uC0AC\uC6A9\uBC95\n <dr-select class=\"card-select-container\" changeSelected=\"${(data) => @this@.changeSelected(data)}$\">  <!-- multiple attribute optional-->\n <dr-select-summary class=\"card-select-summary-container\">\n <dr-select-summary-placeholder>\n <div class=\"card-select-summary-placeholder-container\">\uCE74\uB4DC\uC0AC\uBCC4 \uC0AC\uC6A9\uCC98 \uC548\uB0B4 \uD398\uC774\uC9C0 \uC120\uD0DD</div>\n </dr-select-summary-placeholder>\n <dr-select-summary-selected>\n <div dr-if=\"@this@.selectedCard\" class=\"card-select-summary-selected-container\">\n <img dr-attr=\"{src:@this@.selectedCard?.iconImg}\"> ${@this@.selectedCard?.name}$\n </div>\n </dr-select-summary-selected>\n </dr-select-summary>\n\n <dr-select-body float=\"bottom-left\" class=\"card-select-body-container\">\n <dr-select-option dr-for-of=\"@this@.cards\" value=\"${#it#.name}$\" selected=\"${#nearForOfIndex# === 0}$\" class=\"card-select-body-option-container\">\n <img dr-attr=\"{src:#it#.iconImg}\"> ${#it#.name}$\n </dr-select-option>\n </dr-select-body>\n </dr-select>\n */\n\nexport namespace Select {\n  export const selector = 'dr-select';\n\n  // Base for simple hide/show components\n  class StateComponent extends ComponentBase {\n    public hidden = true;\n    public value: string | null = null;\n\n    constructor(config: any) {\n      super(config);\n    }\n\n    setValue(value: string | null) {\n      this.value = value;\n    }\n  }\n\n  // --- Option Child Components ---\n  export class OptionSelected extends StateComponent {\n    constructor() {\n      super({onlyParentType: Option});\n    }\n  }\n\n  export class OptionUnselected extends StateComponent {\n    constructor() {\n      super({onlyParentType: Option});\n    }\n  }\n\n  export class OptionDisabled extends StateComponent {\n    constructor() {\n      super({onlyParentType: Option});\n    }\n  }\n\n  // --- Summary Child Components ---\n  export class SummaryPlaceholder extends StateComponent {\n    constructor() {\n      super({onlyParentType: Summary});\n    }\n  }\n\n  export class SummarySelected extends StateComponent {\n    private selectedOptions: Select.Option[] = [];\n\n    constructor() {\n      super({onlyParentType: Summary});\n    }\n\n    setOptions(options: Option[] = []) {\n      this.selectedOptions = options.filter(it => it.selected);\n    }\n  }\n\n  export class SummaryDisabled extends StateComponent {\n    private selectedOptions: Select.Option[] = [];\n\n    constructor() {\n      super({onlyParentType: Summary});\n    }\n\n    setOptions(options: Option[] = []) {\n      this.selectedOptions = options.filter(it => it.selected);\n    }\n  }\n\n  // --- Select Body Component ---\n  export type SelectBodyAttribute = {\n    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n    class?: string;\n  }\n  // --- Option Component ---\n  export type OptionAttribute = { value: string; selected?: boolean | null; disabled?: boolean | null; class?: string; };\n\n  export class Option extends ComponentBase<OptionAttribute> implements OnInitRender {\n    public hidden = true;\n    @attribute({name: 'value'}) public value: string | null = null;\n    @attribute({name: 'selected', converter: v => v !== null && v === true}) public selected = false;\n    @attribute({name: 'disabled', converter: v => v !== null && v === true}) public disabled = false;\n    @attribute({name: 'class', converter: v => (v ? v : null)}) public classAttr: string | null = null;\n\n    // public status: 'selected' | 'unselected' | 'disabled' = 'unselected';\n\n    constructor() {\n      super({onlyParentType: SelectBody});\n    }\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n      // console.log('-----', this.value, this.selected)\n      // this.getElement()?.addEventListener('click', (e) => {\n      //   e.stopPropagation();\n      //   if (!this.disabled) {\n      //     this.getParentThis<Select>().handleOptionClick(this);\n      //   }\n      // });\n      this.updateStatus();\n    }\n\n    // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n    //   super.onCreatedThisChild(child, data);\n    //   this.updateStatus();\n    // }\n\n    // async onRawSetRendered(rawSet:RawSet, otherData:OnRawSetRenderedOtherData):Promise<void>{\n    //   await super.onRawSetRendered(rawSet, otherData);\n    // }\n    onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n      super.onCreatedThisChildDebounce(childrenSet);\n      this.updateStatus();\n    }\n\n    toggleSelected(event: Event) {\n      // console.log('isMultiple', this.isMultiple())\n      if (!this.disabled) {\n        this.selected = this.isMultiple()? !this.selected : true;\n        // this.selected =  !this.selected;\n        this.updateStatus();\n        this.getParentThis<SelectBody>().changeOptionState(this);\n      } else {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    }\n\n    isMultiple() {\n      return this.getParentThis<Select.SelectBody>()?.getParentThis<Select.Select>().multiple;\n    }\n\n    updateStatus() {\n      if (this.disabled) {\n        this.getChildren(OptionSelected).forEach(c => {\n          c.hidden = true;\n          c.setValue(this.value)\n        });\n        this.getChildren(OptionUnselected).forEach(c => {\n          c.hidden = true;\n          c.setValue(this.value)\n        });\n        this.getChildren(OptionDisabled).forEach(c => {\n          c.hidden = false;\n          c.setValue(this.value)\n        });\n        return;\n      }\n\n      if (this.selected) {\n        this.getChildren(OptionSelected).forEach(c => {\n          c.hidden = false;\n          c.setValue(this.value)\n        });\n        this.getChildren(OptionUnselected).forEach(c => {\n          c.hidden = true;\n          c.setValue(this.value)\n        });\n        this.getChildren(OptionDisabled).forEach(c => {\n          c.hidden = true;\n          c.setValue(this.value)\n        });\n      }\n\n      if (!this.selected) {\n        this.getChildren(OptionSelected).forEach(c => {\n          c.hidden = true;\n          c.setValue(this.value)\n        });\n        this.getChildren(OptionUnselected).forEach(c => {\n          c.hidden = false;\n          c.setValue(this.value)\n        });\n        this.getChildren(OptionDisabled).forEach(c => {\n          c.hidden = true;\n          c.setValue(this.value)\n        });\n      }\n    }\n  }\n\n  // --- Summary Component ---\n  export class Summary extends ComponentBase implements OnInitRender {\n    @attribute({ name: 'class', converter: v => (v === '' ? null : v) }) public classAttr: string | null = null;\n    private options: Select.Option[] = [];\n    private disabled: boolean = false;\n    public element?: HTMLElement;\n\n    // constructor() {\n    //   super({ onlyParentType: Select });\n    // }\n\n    setDisabled(disabled: boolean) {\n      this.disabled = disabled;\n      this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = true));\n      this.getChildren(SummarySelected).forEach(it => (it.hidden = true));\n      this.getChildren(SummaryDisabled).forEach(it => (it.hidden = false));\n    }\n\n    setOptions(options: Option[] = []): void {\n      this.options = options;\n\n      const selectedOptions = this.options.filter(it => it.selected && !it.disabled);\n      if (!this.disabled) {\n        if (selectedOptions.length > 0) {\n          this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = true));\n          this.getChildren(SummarySelected).forEach(c => {\n            c.setOptions(options);\n            c.hidden = false;\n          });\n          this.getChildren(SummaryDisabled).forEach(it => (it.hidden = true));\n        } else {\n          this.getChildren(SummaryDisabled).forEach(it => (it.hidden = true));\n          this.getChildren(SummaryPlaceholder).forEach(it => (it.hidden = false));\n          this.getChildren(SummarySelected).forEach(c => (c.hidden = true));\n        }\n      }\n    }\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n      // this.getElement()?.addEventListener('click', (e) => {\n      //   e.stopPropagation();\n      //   this.getParentThis<Select>().toggle();\n      // });\n    }\n\n    onInitSummaryElement(element: HTMLElement, event: Event) {\n      this.element = element;\n    }\n\n    updateView(hasSelection: boolean) {\n      this.getChildren(SummaryPlaceholder).forEach(c => (c.hidden = hasSelection));\n      this.getChildren(SummarySelected).forEach(c => (c.hidden = !hasSelection));\n    }\n\n    // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {\n    //   super.onCreatedThisChild(child, data);\n    // }\n    // async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {\n    //   await super.onRawSetRendered(rawSet, otherData);\n    // }\n    onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n      super.onCreatedThisChildDebounce(childrenSet);\n      this.updateView(this.getParentThis<Select>()?.selectedValues?.length > 0);\n    }\n\n    onSummaryClick(element: HTMLElement, event: Event) {\n      if (this.getParentThis<Select>()?.disabled) {\n        event.stopPropagation();\n        event.preventDefault();\n        return;\n      }\n    }\n  }\n\n\n  export class SelectBody extends ComponentBase<SelectBodyAttribute> {\n    @attribute({ name: 'class', converter: v => (v === '' ? null : v) }) public classAttr: string | null = null;\n    @attribute({ name: 'float' }) public float: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | null = null;\n\n    constructor() {\n      super({ onlyParentType: Select });\n    }\n\n    async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {\n      await super.onRawSetRendered(rawSet, otherData);\n    // }\n    // onCreatedThisChildDebounce(childrenSet: ChildrenSet[]) {\n    //   super.onCreatedThisChildDebounce(childrenSet);\n      this.changeOptionState();\n    }\n\n    changeOptionState(option?: Option) {\n      const options = this.getChildren(Option);\n      const select = this.getParentThis<Select>();\n      // console.log('------opti',option, select);\n      // // \uBA40\uD2F0\uD50C\uC774 \uC544\uB2D0\uB54C\uC5D0\uB294 \uB9C8\uC9C0\uB9C9 \uC120\uD0DD\uB41C\uAC12\uC73C\uB85C \uCC98\uB9AC\n      if (!select.multiple) {\n        // \uB0B4\uAC00 \uC120\uD0DD\uD55C\uAC8C \uC788\uC73C\uBA74\n        if (option && option.selected) {\n          options.filter(it => it !== option).forEach(it => {\n            it.selected = false;\n            it.updateStatus();\n          });\n        } else {\n          const selectedOptions = options.filter(it => it.selected && !it.disabled);\n          selectedOptions.forEach((opt, idx) => {\n            const isLast = idx === selectedOptions.length - 1;\n            if (!isLast) {\n              opt.selected = false;\n              opt.updateStatus();\n            }\n          });\n        }\n      }\n      // console.log('--------', options.map(it=>it.selected))\n      select?.setOptions(options);\n    }\n  }\n\n\n  // --- Main Select Component ---\n  export type SelectAttribute = {\n    multiple?: boolean | null; class?: string;\n    changeSelected?: (value: (string | null)[]) => void;\n    name?: string;\n    float?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';\n    disableOtherClickClose?: boolean;\n    toggle?: (open: boolean) => void;\n    disabled?: boolean | null;\n  };\n\n  export class Select extends ComponentBase<SelectAttribute> implements OnInitRender, OnCreateRender, OnCreateRenderData, OnDestroyRender {\n    @attribute({name: 'multiple', converter: v => v !== null}) public multiple = false;\n    @attribute({name: 'disabled', converter: v => v !== null}) public disabled = false;\n    @attribute({name: 'class', converter: v => (v === '' ? null : v)}) public classAttr: string | null = null;\n    @attribute({name: 'name', converter: v => (v === '' ? null : v)}) public name: string | null = null;\n\n    // public isOpen = false;\n    public selectedValues: (string | null)[] = [];\n    public selectedOptions: Option[] = [];\n    public value: string | (string | null)[] | null | undefined;\n\n    @DomRenderNoProxy private element?: HTMLDetailsElement;\n    @DomRenderNoProxy private documentClickSubscription?: Subscription;\n    @DomRenderNoProxy private windowBlurSubscription?: Subscription;\n    @DomRenderNoProxy public summaryComponent?: Summary;\n    @DomRenderNoProxy public selectBodyComponent?: SelectBody;\n    private options?: Select.Option[];\n\n    constructor(config?: DomRenderConfig) {\n      super();\n      // console.log('----Select constructor')\n    }\n\n    get optionComponents(): Option[] {\n      return this.getChildren(Option);\n    }\n\n    onCreateRender() {\n\n    }\n\n    onCreateRenderData() {\n\n    }\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n      // console.log('select onInitRender', this.multiple)\n\n      if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {\n        const detailsElement = this.element;\n\n        const window = this.rawSet.dataSet!.config!.window!;\n        const document = window.document;\n        this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, 'click').subscribe(event => {\n          const isSummaryClick = this.getChildren(Summary).some(it => event.target && it.element?.contains(event.target as Node) || it.element === event.target)\n          if (!isSummaryClick && this.getAttribute('disableOtherClickClose')) {\n            return;\n          }\n          if (!isSummaryClick && !this.multiple && detailsElement) {\n            detailsElement.open = false;\n            return;\n          }\n          if (!isSummaryClick && detailsElement && !detailsElement?.contains(event?.target as Node)) {\n            detailsElement.open = false;\n          }\n        })\n\n        this.windowBlurSubscription = WindowUtils.eventObservable(window, 'blur').subscribe(() => {\n          if (detailsElement?.open && window.document.activeElement?.tagName === 'IFRAME') {\n            detailsElement.open = false;\n          }\n        });\n      }\n    }\n\n\n    toggle(element: HTMLDetailsElement, event: Event) {\n      // console.log('------>', this.disabled, event)\n      // if (this.disabled) {\n      //   event.stopPropagation();\n      //   event.preventDefault();\n      //   return;\n      // }\n      const toggleAttribute = this.getAttribute('toggle');\n      if (toggleAttribute) {\n        toggleAttribute?.(element.open);\n      }\n    }\n\n    setOptions(options: Option[]) {\n      const summaries = this.getChildren(Summary);\n\n      this.options = options;\n\n      const values = this.options.filter(it => it.selected && !it.disabled).map(it => it.value)\n      this.getAttribute('changeSelected')?.(values);\n      summaries?.forEach(it => {\n        it.setDisabled(this.disabled);\n        if (!this.disabled) {\n          it.setOptions(options);\n        }\n      })\n    }\n\n    onInitDetailsElement(detailsElement: HTMLDetailsElement) {\n      // console.log('detailsElement oninit', detailsElement);\n      this.element = detailsElement;\n    }\n\n    onDrThisUnBind() {\n      super.onDrThisUnBind();\n      this.onDestroyRender();\n    }\n\n    onDestroyRender() {\n      super.onDestroyRender();\n      this.documentClickSubscription?.unsubscribe();\n      this.windowBlurSubscription?.unsubscribe();\n    }\n\n    test() {\n      console.log('tttttttt')\n    }\n  }\n}\n\nconst stateComponentFactory = (name: string, type: any) => {\n  return (config?: DomRenderRunConfig) =>\n    RawSet.createComponentTargetElement({\n      name,\n      template: '<div dr-if=\"!@this@.hidden\" dr-option-strip=\"true\">#innerHTML#</div>\\n',\n      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new type(), config })\n    });\n};\n\nexport default {\n  select: (config?: DomRenderConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: Select.selector,\n      styles:\n        '.dr-select-container {\\n' +\n        '  position: relative;\\n' +\n        '\\n' +\n        '}\\n' +\n        '.dr-select-options-container {\\n' +\n        '  display: none;\\n' +\n        '  position: absolute;\\n' +\n        '  top: 100%;\\n' +\n        '  left: 0;\\n' +\n        '  right: 0;\\n' +\n        '  z-index: 10;\\n' +\n        '}\\n' +\n        '.dr-select-container.is-open .dr-select-options-container {\\n' +\n        '  display: block;\\n' +\n        '}\\n' +\n        'summary::-webkit-details-marker {\\n' +\n        '    display: none;\\n' +\n        '}\\n' +\n        '/* Floating styles for dr-select-body */\\n' +\n        '.dr-select-body-container {\\n' +\n        '    position: absolute;\\n' +\n        '}\\n' +\n        '\\n' +\n        '.dr-select-body-bottom-left-container {\\n' +\n        '    position: absolute;\\n' +\n        '    left: 0;\\n' +\n        '    top: 100%;\\n' +\n        '}\\n' +\n        '\\n' +\n        '.dr-select-body-bottom-right-container {\\n' +\n        '    position: absolute;\\n' +\n        '    right: 0;\\n' +\n        '    top: 100%;\\n' +\n        '}\\n' +\n        '\\n' +\n        '.dr-select-body-top-left-container {\\n' +\n        '    position: absolute;\\n' +\n        '    left: 0;\\n' +\n        '    bottom: 100%;\\n' +\n        '}\\n' +\n        '\\n' +\n        '.dr-select-body-top-right-container {\\n' +\n        '    position: absolute;\\n' +\n        '    right: 0;\\n' +\n        '    bottom: 100%;\\n' +\n        '}\\n' +\n        '\\n' +\n        '/* Reset default details/summary styles */\\n' +\n        '.dr-select-container details {\\n' +\n        '  display: block; /* Ensure it behaves like a block element */\\n' +\n        '}\\n' +\n        '\\n' +\n        '.dr-select-container summary {\\n' +\n        '  display: block; /* Ensure it behaves like a block element */\\n' +\n        '  list-style: none; /* Remove default marker */\\n' +\n        \"  cursor: pointer; /* Indicate it's clickable */\\n\" +\n        '}\\n' +\n        '\\n' +\n        '.dr-select-container summary::-webkit-details-marker,\\n' +\n        '.dr-select-container summary::marker {\\n' +\n        '  display: none; /* Hide marker for Webkit and standard */\\n' +\n        '}',\n      template:\n        '<details dr-class=\"{\\n' +\n        \"        'dr-select-container': true,\\n\" +\n        \"        'is-open': @this@.isOpen,\\n\" +\n        '        [@this@.classAttr]: @this@.classAttr\\n' +\n        '     }\" dr-on-init=\"@this@.onInitDetailsElement($element)\" dr-option-complete=\"@this@.test()\"  dr-event-toggle=\"@this@.toggle($element, $event)\">\\n' +\n        '\\n' +\n        '    #innerHTML#\\n' +\n        '</details>\\n' +\n        '<select hidden=\"hidden\" name=\"${@this@.name}$\" disabled=\"${@this@.disabled ? \\'disabled\\' : null}$\"  style=\"width: 1500px; height:500px\"  multiple>\\n' +\n        '    <option dr-for-of=\"@this@.options\" value=\"${#it#.value}$\" selected=\"${#it#.selected ? \\'selected\\' : null}$\">#it# ${#it#.value}$</option>\\n' +\n        '</select>',\n      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Select(config), config })\n    });\n  },\n  selectSummary: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Select.selector}-summary`,\n      template:\n        '<summary dr-class=\"{[@this@.classAttr]: @this@.classAttr}\"\\n' +\n        '         dr-on-init=\"@this@.onInitSummaryElement($element, $event)\"\\n' +\n        '         dr-event-click=\"@this@.onSummaryClick($element, $event)\"\\n' +\n        '>\\n' +\n        '#innerHTML#\\n' +\n        '</summary>',\n      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Summary(), config })\n    });\n  },\n  selectSummaryPlaceholder: stateComponentFactory(`${Select.selector}-summary-placeholder`, Select.SummaryPlaceholder),\n  selectSummarySelected: stateComponentFactory(`${Select.selector}-summary-selected`, Select.SummarySelected),\n  selectSummaryDisabled: stateComponentFactory(`${Select.selector}-summary-disabled`, Select.SummaryDisabled),\n\n  selectBody: (config?: DomRenderRunConfig) => { // New export\n    return RawSet.createComponentTargetElement({\n      name: `${Select.selector}-body`,\n      template: '<div dr-class=\"{[@this@.classAttr]: @this@.classAttr, \\'dr-select-body-container\\': true,  [\\'dr-select-body-\\'+@this@.float+\\'-container\\']: @this@.float}\">#innerHTML#</div>',\n      objFactory: (e, o, r2, constructorParam) => {\n        return DomRender.run({rootObject: new Select.SelectBody(), config: config});\n      }\n    })\n  },\n\n  selectOption: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: `${Select.selector}-option`,\n      template:\n        '<a dr-class=\"{[@this@.classAttr]: @this@.classAttr}\" dr-event-click=\"@this@.toggleSelected($event)\">#innerHTML#</a>\\n',\n      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Option(), config })\n    });\n  },\n  selectOptionSelected: stateComponentFactory(`${Select.selector}-option-selected`, Select.OptionSelected),\n  selectOptionUnselected: stateComponentFactory(`${Select.selector}-option-unselected`, Select.OptionUnselected),\n  selectOptionDisabled: stateComponentFactory(`${Select.selector}-option-disabled`, Select.OptionDisabled),\n};"],
+  "mappings": "AA8CA,IAAA,mBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/this/This.d.js

@@ -0,0 +1,5 @@
+var This_d_default = _default;
+export {
+  This_d_default as default
+};
+//# sourceMappingURL=This.d.js.map

package/dist/esm/dist/components/this/This.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/components/this/This.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 { ComponentSet } from '../../components/ComponentSet';\nimport { OnDestroyRenderParams } from '../../lifecycle/OnDestroyRender';\n\nexport namespace This {\n  export const selector = 'dr-this';\n  export type Attribute = {\n    value: ComponentSet;\n    if: boolean | null;\n    createArguments: any[];\n    onCreated?: (value: any) => void;\n    onDestroyRender?: () => void;\n  };\n\n  export class This extends ComponentBase<Attribute> implements OnInitRender {\n    private value?: ComponentSet;\n    private if?: boolean | null = null;\n    private createArguments?: any[];\n\n    async onInitRender(param: any, rawSet: RawSet) {\n      await super.onInitRender(param, rawSet);\n    }\n\n    onDestroyRender(data: OnDestroyRenderParams) {\n      super.onDestroyRender(data);\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      if (this.equalsAttributeName(name, 'if')) {\n        this.if = value;\n      }\n      if (this.equalsAttributeName(name, 'createArguments')) {\n        this.createArguments = value;\n      }\n    }\n\n    created(component: any) {\n      component ??= this.value?.obj;\n      this.getAttribute('onCreated')?.(component);\n    }\n  }\n}\n\nexport default {\n  this: (config?: DomRenderRunConfig) => {\n    return RawSet.createComponentTargetElement({\n      name: This.selector,\n      template:\n        '<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>',\n      objFactory: (e, o, r2, counstructorParam) => {\n        return DomRender.run({ rootObject: new This.This(...counstructorParam), config: config });\n      }\n    });\n  }\n};\n"],
+  "mappings": "AA8FA,IAAA,iBAAA;",
+  "names": []
+}

package/dist/esm/dist/components/timer/Timer.d.js

@@ -0,0 +1,5 @@
+var Timer_d_default = _default;
+export {
+  Timer_d_default as default
+};
+//# sourceMappingURL=Timer.d.js.map