@dooboostore/dom-render 1.0.102 → 1.0.103

package/components/ComponentBase.js

@@ -12,18 +12,18 @@ 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) => {
+    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
+            converter: options === null || options === void 0 ? void 0 : options.converter,
+            isMethod: !!descriptor
         });
         ReflectUtils.defineMetadata(ATTRIBUTE_METADATA_KEY, attributes, target.constructor);
     };
@@ -51,22 +51,35 @@ export function event(options) {
     };
 }
 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 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;
+            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);
             }
         }
@@ -138,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 = [];
     }
@@ -162,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));
             }
         }
     }
@@ -178,12 +191,24 @@ export class ComponentBase {
             for (const attrInfo of attributes) {
                 if (this.equalsAttributeName(name, attrInfo.name)) {
                     const finalValue = attrInfo.converter ? attrInfo.converter(value) : value;
-                    this[attrInfo.propertyKey] = finalValue;
+                    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();
@@ -192,10 +217,12 @@ export class ComponentBase {
             }
             // Handle @query decorators
             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);
+                    const elements = this._queryElements(selector, rawSet);
+                    // console.log('-------element', elements);
                     if (isMethod) {
                         const method = this[propertyKey];
                         if (typeof method === 'function') {
@@ -225,7 +252,7 @@ export class ComponentBase {
             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) {

package/components/promise/PromiseSwitch.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 PromiseSwitch {
@@ -45,11 +45,11 @@ export declare namespace PromiseSwitch {
     export {};
 }
 declare const _default: {
-    promiseDefault: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    promisePending: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    promiseFulfilled: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    promiseRejected: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    promiseSwitch: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    promiseDefault: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    promisePending: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    promiseFulfilled: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    promiseRejected: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    promiseSwitch: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=PromiseSwitch.d.ts.map

package/components/promise/PromiseSwitch.js

@@ -47,6 +47,21 @@ export var PromiseSwitch;
         }
     }
     PromiseSwitch_1.Rejected = Rejected;
+    /*
+        <dr-promise-switch data="${@this@.pickWorldPromise}$">
+          ${@nearThis@.promiseState.status}$
+          <dr-promise-switch-default>
+              <button class="random-world-button" dr-event-click="@this@.pickWorld()">
+                  <i class="fa-solid fa-dice"></i>
+              </button>
+          </dr-promise-switch-default>
+          <dr-promise-switch-pending>
+              <button class="random-world-button disabled spin" >
+                  <i class="fa-solid fa-dice"></i>
+              </button>
+          </dr-promise-switch-pending>
+      </dr-promise-switch>
+     */
     // @Component({
     //   template: '#innerHTML#',
     //   selector: `${selector}`

package/components/radio/Radio.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 Radio {
@@ -37,9 +37,9 @@ export declare namespace Radio {
     export {};
 }
 declare const _default: {
-    radioChecked: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    radioUnChecked: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
-    radio: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    radioChecked: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    radioUnChecked: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
+    radio: (config?: DomRenderRunConfig) => import("../../configs/TargetElement").TargetElement;
 };
 export default _default;
 //# sourceMappingURL=Radio.d.ts.map

package/components/router/Route.d.ts

@@ -0,0 +1,32 @@
+import { ComponentBase } from '../ComponentBase';
+import { OnInitRender } from '../../lifecycle/OnInitRender';
+import { RawSet } from '../../rawsets/RawSet';
+import type { Config } from '../../configs/Config';
+export declare namespace Route {
+    export const selector = "dr-route";
+    export type Attribute<D> = {
+        value?: null | string;
+    };
+    class CheckerBase<D> extends ComponentBase<Attribute<D>> implements OnInitRender {
+        protected sw: boolean;
+    }
+    export class Match<D> extends CheckerBase<D> {
+        value?: string;
+        private domRenderConfig;
+        constructor(domRenderConfig: Config);
+        onInitRender(param: any, rawSet: RawSet): void;
+    }
+    export class Regexp<D> extends CheckerBase<D> {
+        value?: string;
+        private domRenderConfig;
+        constructor(domRenderConfig: Config);
+        onInitRender(param: any, rawSet: RawSet): void;
+    }
+    export {};
+}
+declare const _default: {
+    match: (config?: Config) => import("../../configs/TargetElement").TargetElement;
+    regexp: (config?: Config) => import("../../configs/TargetElement").TargetElement;
+};
+export default _default;
+//# sourceMappingURL=Route.d.ts.map