@dooboostore/dom-render 1.0.100 → 1.0.103

package/components/ComponentBase.d.ts

@@ -8,27 +8,31 @@ import { OnInitRender } from '../lifecycle/OnInitRender';
 import { OnDestroyRender, OnDestroyRenderParams } from '../lifecycle/OnDestroyRender';
 import { OnDrThisUnBind } from '../lifecycle/dr-this/OnDrThisUnBind';
 import { OnDrThisBind } from '../lifecycle/dr-this/OnDrThisBind';
-import * as Render from '../rawsets/Render';
+import type { Render } from '../rawsets/Render';
 export declare const ATTRIBUTE_METADATA_KEY: unique symbol;
 export declare const QUERY_METADATA_KEY: unique symbol;
 export declare const EVENT_METADATA_KEY: unique symbol;
 export declare function attribute(options?: {
     name?: string;
     converter?: (value: string | null) => any;
-}): PropertyDecorator;
-export declare function query(selector: string): PropertyDecorator;
+}): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void;
+export declare function query(selector: string): (target: object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => void;
 export declare function event(options: {
     query: string;
     name: string;
 }): MethodDecorator;
-export declare abstract class ComponentBase<T> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender {
-    private config?;
+export type ComponentBaseConfig = {
+    onlyParentType?: ConstructorType<any>[] | ConstructorType<any>;
+};
+export declare class ComponentBase<T = any, C extends ComponentBaseConfig = ComponentBaseConfig> implements OnChangeAttrRender, OnCreateRenderData, OnCreatedThisChild, OnDrThisBind, OnDrThisUnBind, OnInitRender, OnDestroyRender {
+    private _config?;
     private _rawSet?;
     private _children;
     private _render;
     private _attribute?;
     private _boundEventListeners;
-    get render(): Render.Render | undefined;
+    get componentConfig(): C;
+    get render(): Render | undefined;
     get rawSet(): RawSet | undefined;
     private _queryElements;
     private _cleanupEventListeners;
@@ -42,9 +46,7 @@ export declare abstract class ComponentBase<T> implements OnChangeAttrRender, On
     getParentThis<P>(): P;
     getChildren<C extends ConstructorType<any>>(type: C): InstanceType<C>[];
     getChildren<C extends ConstructorType<any>[]>(types: C): InstanceType<C[number]>[];
-    constructor(config?: {
-        onlyParentType: ConstructorType<any>[] | ConstructorType<any>;
-    });
+    constructor(_config?: C);
     private setRawSet;
     setAttribute(attribute: T): void;
     onCreatedThisChild(child: any, data: OnCreateRenderDataParams): void;
@@ -53,6 +55,6 @@ export declare abstract class ComponentBase<T> implements OnChangeAttrRender, On
     onInitRender(param: any, rawSet: RawSet): void;
     onDrThisBind(): void;
     onDrThisUnBind(): void;
-    onDestroyRender(data: OnDestroyRenderParams): void;
+    onDestroyRender(data?: OnDestroyRenderParams): void;
 }
 //# sourceMappingURL=ComponentBase.d.ts.map

package/components/ComponentBase.js

@@ -8,64 +8,79 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import 'reflect-metadata';
+import { ElementUtils } from '@dooboostore/core-web/element/ElementUtils';
 import { RawSet } from '../rawsets/RawSet';
 import { DomRenderNoProxy } from '../decorators/DomRenderNoProxy';
 import { ConvertUtils } from '@dooboostore/core/convert/ConvertUtils';
-import * as Render from '../rawsets/Render';
+import { ReflectUtils } from '@dooboostore/core/reflect/ReflectUtils';
 export const ATTRIBUTE_METADATA_KEY = Symbol('attribute');
 export const QUERY_METADATA_KEY = Symbol('query');
 export const EVENT_METADATA_KEY = Symbol('event');
 export function attribute(options) {
-    return (target, propertyKey) => {
-        Reflect.defineMetadata(ATTRIBUTE_METADATA_KEY, Object.assign(Object.assign({}, options), { name: (options === null || options === void 0 ? void 0 : options.name) || propertyKey }), target, propertyKey);
+    return (target, propertyKey, descriptor) => {
+        const attributes = ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, target.constructor) || [];
+        attributes.push({
+            propertyKey: propertyKey,
+            name: (options === null || options === void 0 ? void 0 : options.name) || propertyKey,
+            converter: options === null || options === void 0 ? void 0 : options.converter,
+            isMethod: !!descriptor
+        });
+        ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, attributes, target.constructor);
     };
 }
 export function query(selector) {
-    return (target, propertyKey) => {
-        Reflect.defineMetadata(QUERY_METADATA_KEY, { selector }, target, propertyKey);
+    return (target, propertyKey, descriptor) => {
+        const queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, target.constructor) || [];
+        queries.push({
+            selector: selector,
+            propertyKey: propertyKey,
+            isMethod: !!descriptor
+        });
+        ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, target.constructor);
     };
 }
 export function event(options) {
     return (target, propertyKey, descriptor) => {
-        const events = Reflect.getMetadata(EVENT_METADATA_KEY, target.constructor) || [];
+        const events = ReflectUtils.getMetadata(EVENT_METADATA_KEY, target.constructor) || [];
         events.push({
             query: options.query,
             eventName: options.name,
             methodName: propertyKey
         });
-        Reflect.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);
+        ReflectUtils.defineMetadata(EVENT_METADATA_KEY, events, target.constructor);
     };
 }
 export class ComponentBase {
+    get componentConfig() {
+        return this._config;
+    }
     get render() {
         return this._render;
     }
     get rawSet() {
         return this._rawSet;
     }
-    _queryElements(selector) {
+    _queryElements(selector, rawSet) {
         var _a, _b, _c, _d;
         const e = this.getElement();
+        // console.log('queryElement-->', e);
         if (e) {
-            return Array.from(e.querySelectorAll(selector));
+            return ElementUtils.querySelectorAll(e, selector);
         }
         else {
-            const startNode = (_b = (_a = this.rawSet) === null || _a === void 0 ? void 0 : _a.point) === null || _b === void 0 ? void 0 : _b.start;
-            const endNode = (_d = (_c = this.rawSet) === null || _c === void 0 ? void 0 : _c.point) === null || _d === void 0 ? void 0 : _d.end;
-            if (startNode && endNode && startNode.parentNode === endNode.parentNode) {
-                const elements = [];
-                let currentNode = startNode.nextSibling;
-                while (currentNode && currentNode !== endNode) {
-                    if (currentNode.nodeType === Node.ELEMENT_NODE) {
-                        const currentElement = currentNode;
-                        if (currentElement.matches(selector)) {
-                            elements.push(currentElement);
-                        }
-                        elements.push(...Array.from(currentElement.querySelectorAll(selector)));
-                    }
-                    currentNode = currentNode.nextSibling;
-                }
-                return elements;
+            let startNode = (_a = rawSet.point) === null || _a === void 0 ? void 0 : _a.start;
+            let endNode = (_b = rawSet.point) === null || _b === void 0 ? void 0 : _b.end;
+            // console.log('-----', startNode, endNode)
+            // console.log('-----', startNode?.isConnected, endNode?.isConnected)
+            if (((_c = rawSet.point) === null || _c === void 0 ? void 0 : _c.start) && startNode && !startNode.isConnected && startNode instanceof HTMLElement && startNode.hasAttribute('id')) {
+                rawSet.point.start = startNode = rawSet.dataSet.config.window.document.querySelector('#' + startNode.id);
+            }
+            if (((_d = rawSet.point) === null || _d === void 0 ? void 0 : _d.end) && endNode && !endNode.isConnected && endNode instanceof HTMLElement && endNode.hasAttribute('id')) {
+                rawSet.point.end = endNode = rawSet.dataSet.config.window.document.querySelector('#' + endNode.id);
+            }
+            if (startNode && endNode) {
+                // console.log('query!!', startNode, endNode);
+                return ElementUtils.querySelectorAll({ start: startNode, end: endNode }, selector);
             }
         }
         return [];
@@ -136,8 +151,8 @@ export class ComponentBase {
         const targets = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes];
         return this._children.filter(child => targets.some(targetConstructor => child instanceof targetConstructor));
     }
-    constructor(config) {
-        this.config = config;
+    constructor(_config) {
+        this._config = _config;
         this._children = [];
         this._boundEventListeners = [];
     }
@@ -160,10 +175,10 @@ export class ComponentBase {
         if ((_a = data.render) === null || _a === void 0 ? void 0 : _a.rawSet) {
             this.setRawSet(data.render.rawSet);
         }
-        if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.onlyParentType) {
-            const isOk = Array.isArray((_c = this.config) === null || _c === void 0 ? void 0 : _c.onlyParentType) ? (_d = this.config) === null || _d === void 0 ? void 0 : _d.onlyParentType : [(_e = this.config) === null || _e === void 0 ? void 0 : _e.onlyParentType].some(it => { var _a; return ((_a = data.render) === null || _a === void 0 ? void 0 : _a.parentThis) instanceof it; });
+        if ((_b = this._config) === null || _b === void 0 ? void 0 : _b.onlyParentType) {
+            const isOk = Array.isArray((_c = this._config) === null || _c === void 0 ? void 0 : _c.onlyParentType) ? (_d = this._config) === null || _d === void 0 ? void 0 : _d.onlyParentType : [(_e = this._config) === null || _e === void 0 ? void 0 : _e.onlyParentType].some(it => { var _a; return ((_a = data.render) === null || _a === void 0 ? void 0 : _a.parentThis) instanceof it; });
             if (!isOk) {
-                throw new Error('only my parentThis ' + ((_f = this.config) === null || _f === void 0 ? void 0 : _f.onlyParentType));
+                throw new Error('only my parentThis ' + ((_f = this._config) === null || _f === void 0 ? void 0 : _f.onlyParentType));
             }
         }
     }
@@ -171,17 +186,29 @@ export class ComponentBase {
         if (other.rawSet) {
             this.setRawSet(other.rawSet);
         }
-        for (const propertyKey in this) {
-            const metadata = Reflect.getMetadata(ATTRIBUTE_METADATA_KEY, this, propertyKey);
-            if (metadata && metadata.name) {
-                if (this.equalsAttributeName(name, metadata.name)) {
-                    const finalValue = metadata.converter ? metadata.converter(value) : value;
-                    this[propertyKey] = finalValue;
+        const attributes = ReflectUtils.getMetadata(ATTRIBUTE_METADATA_KEY, this.constructor);
+        if (attributes && Array.isArray(attributes)) {
+            for (const attrInfo of attributes) {
+                if (this.equalsAttributeName(name, attrInfo.name)) {
+                    const finalValue = attrInfo.converter ? attrInfo.converter(value) : value;
+                    if (attrInfo.isMethod) {
+                        const method = this[attrInfo.propertyKey];
+                        if (typeof method === 'function') {
+                            method.call(this, finalValue);
+                        }
+                    }
+                    else {
+                        this[attrInfo.propertyKey] = finalValue;
+                    }
                 }
             }
         }
     }
     onInitRender(param, rawSet) {
+        // console.log('onInitRender!!',param, rawSet);
+        // console.dir(rawSet, {depth: 33})
+        // console.table(rawSet);
+        // console.log('--------', rawSet.point)
         if (rawSet) {
             this.setRawSet(rawSet);
             const e = this.getElement();
@@ -189,24 +216,43 @@ export class ComponentBase {
                 e.component = this;
             }
             // Handle @query decorators
-            for (const propertyKey in this) {
-                const metadata = Reflect.getMetadata(QUERY_METADATA_KEY, this, propertyKey);
-                if (metadata && metadata.selector) {
-                    const propertyType = Reflect.getMetadata("design:type", this, propertyKey);
-                    const elements = this._queryElements(metadata.selector);
-                    if (propertyType === Array) {
-                        this[propertyKey] = elements;
+            const queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, this.constructor);
+            // console.log('queries', queries)
+            if (queries && Array.isArray(queries)) {
+                for (const queryInfo of queries) {
+                    const { selector, propertyKey, isMethod } = queryInfo;
+                    const elements = this._queryElements(selector, rawSet);
+                    // console.log('-------element', elements);
+                    if (isMethod) {
+                        const method = this[propertyKey];
+                        if (typeof method === 'function') {
+                            const paramTypes = ReflectUtils.getParameterTypes(this, propertyKey);
+                            if (paramTypes && paramTypes.length > 0 && paramTypes[0] === Array) {
+                                method.call(this, elements);
+                            }
+                            else {
+                                if (elements.length > 0) {
+                                    method.call(this, elements[0]);
+                                }
+                            }
+                        }
                     }
                     else {
-                        this[propertyKey] = elements[0] || null;
+                        const propertyType = ReflectUtils.getType(this, propertyKey);
+                        if (propertyType === Array) {
+                            this[propertyKey] = elements;
+                        }
+                        else {
+                            this[propertyKey] = elements[0] || null;
+                        }
                     }
                 }
             }
             // Handle @event decorators
-            const events = Reflect.getMetadata(EVENT_METADATA_KEY, this.constructor);
+            const events = ReflectUtils.getMetadata(EVENT_METADATA_KEY, this.constructor);
             if (events && Array.isArray(events)) {
                 for (const eventInfo of events) {
-                    const elements = this._queryElements(eventInfo.query);
+                    const elements = this._queryElements(eventInfo.query, rawSet);
                     elements.forEach(element => {
                         const listener = this[eventInfo.methodName].bind(this);
                         element.addEventListener(eventInfo.eventName, listener);

package/components/ComponentSet.d.ts

@@ -5,8 +5,8 @@ export type ComponentSetConfig = {
 export declare class ComponentSet<T = any> {
     obj: T;
     private _config;
-    private _template;
-    private _styles;
+    private _template?;
+    private _styles?;
     constructor(obj: T, source: {
         template?: string;
         styles?: (string[]) | string;

package/components/appender/Appender.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBase } from '../ComponentBase';
-import { RunConfig } from '../../DomRender';
+import { DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
@@ -17,7 +17,7 @@ export declare namespace Appender {
     }
 }
 declare const _default: {
-    appender: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    appender: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=Appender.d.ts.map

package/components/checkbox/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBase } from '../ComponentBase';
-import { RunConfig } from '../../DomRender';
+import { DomRenderRunConfig } from '../../DomRender';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 export declare namespace CheckBox {
@@ -39,9 +39,9 @@ export declare namespace CheckBox {
     export {};
 }
 declare const _default: {
-    checkBoxChecked: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    checkBoxUnchecked: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    checkBox: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    checkBoxChecked: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    checkBoxUnchecked: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    checkBox: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=CheckBox.d.ts.map

package/components/choose/Choose.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBase } from '../ComponentBase';
-import { RunConfig } from '../../DomRender';
+import { DomRenderRunConfig } from '../../DomRender';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
 export declare namespace Choose {
@@ -31,9 +31,9 @@ export declare namespace Choose {
     export {};
 }
 declare const _default: {
-    chooseWhen: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    chooseOtherWise: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    choose: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    chooseWhen: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    chooseOtherWise: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    choose: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=Choose.d.ts.map

package/components/choose/Choose.js

@@ -12,30 +12,18 @@ export var Choose;
     }
     class ChildBase extends ChildOtherWiseBase {
     }
-    // @Component({
-    //   template: '<div dr-if="!@this@.hidden" dr-strip="true" >#innerHTML#</div>',
-    //   selector: `${selector}.When`
-    // })
     class When extends ChildBase {
         constructor() {
             super({ onlyParentType: (Choose) });
         }
     }
     Choose_1.When = When;
-    // @Component({
-    //   template: '<div dr-if="!@this@.hidden" dr-strip="true" >#innerHTML#</div>',
-    //   selector: `${selector}.OtherWise`
-    // })
     class OtherWise extends ChildBase {
         constructor() {
             super({ onlyParentType: (Choose) });
         }
     }
     Choose_1.OtherWise = OtherWise;
-    // @Component({
-    //   template: '#innerHTML#',
-    //   selector: `${selector}`
-    // })
     class Choose extends ComponentBase {
         onCreatedThisChild(child, data) {
             super.onCreatedThisChild(child, data);
@@ -43,10 +31,6 @@ export var Choose;
         }
         onChangeAttrRender(name, value, other) {
             super.onChangeAttrRender(name, value, other);
-            // console.log('-----------changer Choose', name, value);
-            // this.getChildren(Pending).forEach(it => {
-            //   console.log('------------asdasd', it, it.attribute?.defaultView)
-            // })
             if (this.equalsAttributeName(name, 'data')) {
                 this.choose = undefined;
                 const children = this.getChildren([When, OtherWise]).sort((a, b) => (a instanceof OtherWise ? 1 : 0) - (b instanceof OtherWise ? 1 : 0));

package/components/details/Details.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBase } from '../ComponentBase';
-import { RunConfig } from '../../DomRender';
+import { DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
@@ -48,10 +48,10 @@ export declare namespace Details {
     }
 }
 declare const _default: {
-    detailsSummary: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    detailsBody: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    detailsForm: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    details: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    detailsSummary: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    detailsBody: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    detailsForm: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    details: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=Details.d.ts.map

package/components/forOf/ForOf.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBase } from '../ComponentBase';
-import { RunConfig } from '../../DomRender';
+import { DomRenderRunConfig } from '../../DomRender';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 export declare namespace ForOf {
     const selector = "System:ForOf";
@@ -12,7 +12,7 @@ export declare namespace ForOf {
     }
 }
 declare const _default: {
-    forOf: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    forOf: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=ForOf.d.ts.map

package/components/if/If.d.ts

@@ -1,6 +1,6 @@
 import { ComponentBase } from '../ComponentBase';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
-import { RunConfig } from '../../DomRender';
+import { DomRenderRunConfig } from '../../DomRender';
 import { OnInitRender } from '../../lifecycle/OnInitRender';
 import { RawSet } from '../../rawsets/RawSet';
 export declare namespace If {
@@ -15,7 +15,7 @@ export declare namespace If {
     }
 }
 declare const _default: {
-    if: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    if: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=If.d.ts.map

package/components/index.d.ts

@@ -1,27 +1,29 @@
 export declare const drComponent: {
-    input: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    detailsSummary: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    detailsBody: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    detailsForm: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    details: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    choose: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    selectOption: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    select: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    radioChecked: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    radioUnChecked: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    radio: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    checkBoxChecked: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    checkBoxUnchecked: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    checkBox: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    chooseWhen: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    chooseOtherWise: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    promiseDefault: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    promisePending: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    promiseFulfilled: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    promiseRejected: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    promiseSwitch: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    appender: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    this: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
-    if: (config?: import("../DomRender").RunConfig) => import("../configs/TargetElement").TargetElement;
+    match: (config?: import("..").Config) => import("../configs/TargetElement").TargetElement;
+    regexp: (config?: import("..").Config) => import("../configs/TargetElement").TargetElement;
+    input: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    detailsSummary: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    detailsBody: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    detailsForm: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    details: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    choose: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    selectOption: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    select: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    radioChecked: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    radioUnChecked: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    radio: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    checkBoxChecked: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    checkBoxUnchecked: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    checkBox: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    chooseWhen: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    chooseOtherWise: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    promiseDefault: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    promisePending: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    promiseFulfilled: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    promiseRejected: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    promiseSwitch: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    appender: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    this: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
+    if: (config?: import("..").DomRenderRunConfig) => import("../configs/TargetElement").TargetElement;
 };
 //# sourceMappingURL=index.d.ts.map

package/components/index.js

@@ -9,5 +9,6 @@ import Select from './select/Select';
 import Timer from './timer/Timer';
 import Details from './details/Details';
 import Input from './input/Input';
-export const drComponent = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, If), This), Appender), PromiseSwitch), Choose), CheckBox), Radio), Select), Timer), Details), Input);
+import Route from './router/Route';
+export const drComponent = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, If), This), Appender), PromiseSwitch), Choose), CheckBox), Radio), Select), Timer), Details), Input), Route);
 //# sourceMappingURL=index.js.map

package/components/input/Input.d.ts

@@ -1,5 +1,5 @@
 import { ComponentBase } from '../ComponentBase';
-import { RunConfig } from '../../DomRender';
+import { DomRenderRunConfig } from '../../DomRender';
 import { RawSet } from '../../rawsets/RawSet';
 import { OtherData } from '../../lifecycle/OnChangeAttrRender';
 import { OnCreateRender } from '../../lifecycle/OnCreateRender';
@@ -28,7 +28,7 @@ export declare namespace Input {
     }
 }
 declare const _default: {
-    input: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    input: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=Input.d.ts.map

package/components/input/Input.js

@@ -22,37 +22,40 @@ export var Input;
         }
         onInitRender(param, rawSet) {
             super.onInitRender(param, rawSet);
+            // console.log('dr-input, rawSet', rawSet)
             const inputElement = this.element;
             const debounceTimeAttribute = this.getAttribute('debounceTime');
             const debounceTimeValue = ValidUtils.isNotNullUndefined(debounceTimeAttribute) ? Number(debounceTimeAttribute) : 0;
             const distinct = ValidUtils.isNotNullUndefined(this.getAttribute('distinct'));
-            const makeDeboundceDistinctUtilChanged = () => {
-                // let result$ = EventUtils.htmlElementEventObservable(inputElement,'input');
-                let result$ = EventUtils.htmlElementEventObservable(inputElement, 'input').pipe(map(event => event.target.value.trim()));
-                if (ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
-                    result$ = result$.pipe(debounceTime(debounceTimeValue));
-                }
-                if (ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
-                    result$ = result$.pipe(distinctUntilChanged());
-                }
-                return result$;
-            };
-            this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
-                var _a;
-                // console.log('change?????????????', it);
-                (_a = this.getAttribute('input')) === null || _a === void 0 ? void 0 : _a(it, inputElement);
-            });
-            if (inputElement && inputElement.form) {
-                this.resetSubscripton = EventUtils.htmlElementEventObservable(inputElement.form, 'reset').subscribe(it => {
+            if (inputElement) {
+                const makeDeboundceDistinctUtilChanged = () => {
+                    // let result$ = EventUtils.htmlElementEventObservable(inputElement,'input');
+                    let result$ = EventUtils.htmlElementEventObservable(inputElement, 'input').pipe(map(event => event.target.value.trim()));
+                    if (ValidUtils.isNotNullUndefined(debounceTimeValue) && debounceTimeValue > 0) {
+                        result$ = result$.pipe(debounceTime(debounceTimeValue));
+                    }
+                    if (ValidUtils.isNotNullUndefined(distinct) && distinct === true) {
+                        result$ = result$.pipe(distinctUntilChanged());
+                    }
+                    return result$;
+                };
+                this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
                     var _a;
-                    // console.log('rrrraaa?,', this.inputSubscription, it)
-                    (_a = this.inputSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-                    this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
+                    // console.log('change?????????????', it);
+                    (_a = this.getAttribute('input')) === null || _a === void 0 ? void 0 : _a(it, inputElement);
+                });
+                if (inputElement.form) {
+                    this.resetSubscripton = EventUtils.htmlElementEventObservable(inputElement.form, 'reset').subscribe(it => {
                         var _a;
-                        // console.log('rrrr?')
-                        (_a = this.getAttribute('input')) === null || _a === void 0 ? void 0 : _a(it, inputElement);
+                        // console.log('rrrraaa?,', this.inputSubscription, it)
+                        (_a = this.inputSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                        this.inputSubscription = makeDeboundceDistinctUtilChanged().subscribe(it => {
+                            var _a;
+                            // console.log('rrrr?')
+                            (_a = this.getAttribute('input')) === null || _a === void 0 ? void 0 : _a(it, inputElement);
+                        });
                     });
-                });
+                }
             }
         }
         onChangeAttrRender(name, value, other) {