@dooboostore/dom-render 1.0.98

package/components/if/If.js

@@ -0,0 +1,40 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+export var If;
+(function (If_1) {
+    If_1.selector = 'dr-if';
+    class If extends ComponentBase {
+        constructor() {
+            super(...arguments);
+            this.sw = false;
+        }
+        onInitRender(param, rawSet) {
+            super.onInitRender(param, rawSet);
+        }
+        onChangeAttrRender(name, value, other) {
+            super.onChangeAttrRender(name, value, other);
+            if (this.equalsAttributeName(name, 'value')) {
+                // console.log('------',this,name, value)
+                this.sw = value;
+            }
+        }
+    }
+    If_1.If = If;
+})(If || (If = {}));
+// const iif = DomRender.createComponent({
+//   type: If.If,
+//   tagName: If.selector,
+//   template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>' });
+export default {
+    if: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: If.selector,
+            template: '<div dr-if="@this@.sw" dr-option-strip="true">#innerHTML#</div>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new If.If(...counstructorParam), config: config });
+            }
+        });
+    },
+};
+//# sourceMappingURL=If.js.map

package/components/index.d.ts

@@ -0,0 +1,27 @@
+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;
+};
+//# sourceMappingURL=index.d.ts.map

package/components/index.js

@@ -0,0 +1,13 @@
+import If from './if/If';
+import This from './this/This';
+import Appender from './appender/Appender';
+import PromiseSwitch from './promise/PromiseSwitch';
+import Choose from './choose/Choose';
+import CheckBox from './checkbox/CheckBox';
+import Radio from './radio/Radio';
+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);
+//# sourceMappingURL=index.js.map

package/components/input/Input.d.ts

@@ -0,0 +1,34 @@
+import { ComponentBase } from '../ComponentBase';
+import { RunConfig } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnCreateRender } from 'lifecycle/OnCreateRender';
+import { OnDestroyRender, OnDestroyRenderParams } from 'lifecycle/OnDestroyRender';
+export declare namespace Input {
+    const selector = "dr-input";
+    type Attribute = {
+        name?: string;
+        type?: string;
+        id?: string;
+        class?: string;
+        debounceTime?: number;
+        distinct?: boolean;
+        input?: (value: string, element: Element) => void;
+    };
+    class Base extends ComponentBase<any> {
+    }
+    class Input extends Base implements OnCreateRender, OnDestroyRender {
+        private element?;
+        private inputSubscription?;
+        private resetSubscripton?;
+        onCreateRender(...param: any[]): void;
+        onInitRender(param: any, rawSet: RawSet): void;
+        onChangeAttrRender(name: string, value: any, other: OtherData): void;
+        onDestroyRender(metaData?: OnDestroyRenderParams): void;
+    }
+}
+declare const _default: {
+    input: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+};
+export default _default;
+//# sourceMappingURL=Input.d.ts.map

package/components/input/Input.js

@@ -0,0 +1,86 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+import { map } from '@dooboostore/core/message/operators/map';
+import { EventUtils } from '@dooboostore/core-web/event/EventUtils';
+import { debounceTime } from '@dooboostore/core/message/operators/debounceTime';
+import { distinctUntilChanged } from '@dooboostore/core/message/operators/distinctUntilChanged';
+export var Input;
+(function (Input_1) {
+    Input_1.selector = `dr-input`;
+    class Base extends ComponentBase {
+    }
+    Input_1.Base = Base;
+    // @Component({
+    //   selector: `${selector}`,
+    //   template,
+    //   styles,
+    // })
+    class Input extends Base {
+        onCreateRender(...param) {
+        }
+        onInitRender(param, rawSet) {
+            super.onInitRender(param, 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 => {
+                    var _a;
+                    // 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) {
+            super.onChangeAttrRender(name, value, other);
+            // console.log('-------->',name, value)
+            if (name === 'value') {
+                // console.log('changeAttribu', name, value)
+                // this.wow = {value: value};
+                // this.name = value;
+            }
+        }
+        onDestroyRender(metaData) {
+            var _a, _b;
+            (_a = this.resetSubscripton) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            (_b = this.inputSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        }
+    }
+    Input_1.Input = Input;
+})(Input || (Input = {}));
+export default {
+    input: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${Input.selector}`,
+            template: '<Input type="${@this@.getAttribute(\'type\')}$" class="${@this@.getAttribute(\'class\')}$" id="${@this@.getAttribute(\'id\')}$" name="${@this@.getAttribute(\'name\')}$" dr-on-init="@this@.element=$element" >#innerHTML#',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new Input.Input(...counstructorParam), config: config });
+            }
+        });
+    },
+};
+//# sourceMappingURL=Input.js.map

package/components/promise/PromiseSwitch.d.ts

@@ -0,0 +1,55 @@
+import { ComponentBase } from '../ComponentBase';
+import { RunConfig } from '../../DomRender';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+export declare namespace PromiseSwitch {
+    export const selector = "dr-promise-switch";
+    export type ChangeParams<T> = {
+        status: 'pending';
+    } | {
+        status: 'finally';
+    } | {
+        status: 'fulfilled';
+        data: T;
+    } | {
+        status: 'rejected';
+        data: any;
+    };
+    export type Attribute = {
+        data: Promise<any> | (() => Promise<any>);
+        change?: <T>(data: ChangeParams<T>) => void;
+    };
+    class ChildBase<T = any> extends ComponentBase<T> {
+        hidden: boolean;
+    }
+    export class Default extends ChildBase {
+    }
+    export class Pending extends ChildBase<{
+        defaultView?: null;
+    }> {
+    }
+    export class Fulfilled<T = any> extends ChildBase {
+        private data?;
+        setData(data: T): void;
+    }
+    export class Rejected<T = any> extends ChildBase {
+        private data?;
+        setData(data: T): void;
+    }
+    export class PromiseSwitch extends ComponentBase<Attribute> {
+        private promiseState?;
+        onCreatedThisChild(child: any, data: OnCreateRenderDataParams): void;
+        childStateChange(): void;
+        onChangeAttrRender(name: string, value: any, other: OtherData): void;
+    }
+    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;
+};
+export default _default;
+//# sourceMappingURL=PromiseSwitch.d.ts.map

package/components/promise/PromiseSwitch.js

@@ -0,0 +1,181 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+import { ValidUtils } from '@dooboostore/core/valid/ValidUtils';
+import { Promises } from '@dooboostore/core/promise';
+export var PromiseSwitch;
+(function (PromiseSwitch_1) {
+    PromiseSwitch_1.selector = 'dr-promise-switch';
+    class ChildBase extends ComponentBase {
+        constructor() {
+            super(...arguments);
+            this.hidden = true;
+        }
+    }
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+    //   selector: `${selector}.Default`
+    // })
+    class Default extends ChildBase {
+    }
+    PromiseSwitch_1.Default = Default;
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+    //   selector: `${selector}.Pending`
+    //   // selector: `System-PromiseSwitch.Pending`
+    // })
+    class Pending extends ChildBase {
+    }
+    PromiseSwitch_1.Pending = Pending;
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+    //   selector: `${selector}.Fulfilled`
+    // })
+    class Fulfilled extends ChildBase {
+        setData(data) {
+            this.data = data;
+        }
+    }
+    PromiseSwitch_1.Fulfilled = Fulfilled;
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-strip="true">#innerHTML#</div>',
+    //   selector: `${selector}.Rejected`
+    // })
+    class Rejected extends ChildBase {
+        setData(data) {
+            this.data = data;
+        }
+    }
+    PromiseSwitch_1.Rejected = Rejected;
+    // @Component({
+    //   template: '#innerHTML#',
+    //   selector: `${selector}`
+    // })
+    class PromiseSwitch extends ComponentBase {
+        onCreatedThisChild(child, data) {
+            super.onCreatedThisChild(child, data);
+            this.childStateChange();
+        }
+        childStateChange() {
+            const defaults = this.getChildren(Default);
+            const pendings = this.getChildren(Pending);
+            const fulfilleds = this.getChildren(Fulfilled);
+            const rejecteds = this.getChildren(Rejected);
+            const full = [...fulfilleds, ...rejecteds, ...pendings, ...defaults];
+            // console.log('----!!!!!!-------', this.promiseState, full)
+            if (this.promiseState === undefined) {
+                full.filter(it => !it.hidden).forEach(it => it.hidden = true);
+                defaults.filter(it => it.hidden).forEach(it => it.hidden = false);
+                pendings.filter(it => it.getAttribute('defaultView') && it.hidden).forEach(it => it.hidden = false);
+            }
+            else if (this.promiseState.status === 'pending') {
+                full.filter(it => !it.hidden).forEach(it => it.hidden = true);
+                pendings.filter(it => it.hidden).forEach(it => it.hidden = false);
+            }
+            else if (this.promiseState.status === 'fulfilled') {
+                const value = this.promiseState.value;
+                // console.log('-----------fulfilled promises', value);
+                full.filter(it => !it.hidden).forEach(it => it.hidden = true);
+                fulfilleds.forEach(it => {
+                    it.setData(value);
+                });
+                fulfilleds.filter(it => it.hidden).forEach(it => it.hidden = false);
+            }
+            else if (this.promiseState.status === 'rejected') {
+                const value = this.promiseState.reason;
+                full.filter(it => !it.hidden).forEach(it => it.hidden = true);
+                rejecteds.forEach(it => {
+                    it.setData(value);
+                });
+                rejecteds.filter(it => it.hidden).forEach(it => it.hidden = false);
+            }
+            // console.log('----!!!!!!-end------', this.promiseState, full.map(it=>it.hidden))
+        }
+        onChangeAttrRender(name, value, other) {
+            var _a;
+            super.onChangeAttrRender(name, value, other);
+            // console.log('-----------changer promises', name, value, this.getChildren(Default));
+            if (this.equalsAttributeName(name, 'data') && value) {
+                // this.childStateChange();
+                this.promiseState = undefined;
+                this.promiseState = Promises.Result.wrap(typeof value === 'function' ? value() : value);
+                (_a = this.getAttribute('change')) === null || _a === void 0 ? void 0 : _a({ status: 'pending' });
+                this.childStateChange();
+                // console.log('----?', this.promiseState)
+                this.promiseState.then(data => {
+                    var _a;
+                    // console.log('------------then', data);
+                    this.childStateChange();
+                    (_a = this.getAttribute('change')) === null || _a === void 0 ? void 0 : _a({ status: 'fulfilled', data: data });
+                    return data;
+                }).catch((e) => {
+                    var _a;
+                    // console.log('catch', e)
+                    this.childStateChange();
+                    (_a = this.getAttribute('change')) === null || _a === void 0 ? void 0 : _a({ status: 'rejected', data: e });
+                    throw e;
+                }).finally(() => {
+                    var _a;
+                    // console.log('-------------finally--------rrrrrrrrrrr', this.promiseState)
+                    // this.childStateChange();
+                    (_a = this.getAttribute('change')) === null || _a === void 0 ? void 0 : _a({ status: 'finally' });
+                });
+                // await this.promiseState;
+                // console.log('---------------------rrrrrrrrrrr', this.promiseState)
+            }
+            else if (this.equalsAttributeName(name, 'data') && ValidUtils.isNullOrUndefined(value)) {
+                this.promiseState = undefined;
+                this.childStateChange();
+            }
+        }
+    }
+    PromiseSwitch_1.PromiseSwitch = PromiseSwitch;
+})(PromiseSwitch || (PromiseSwitch = {}));
+export default {
+    promiseDefault: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${PromiseSwitch.selector}-default`,
+            template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new PromiseSwitch.Default(...counstructorParam), config: config });
+            }
+        });
+    },
+    promisePending: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${PromiseSwitch.selector}-pending`,
+            template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new PromiseSwitch.Pending(...counstructorParam), config: config });
+            }
+        });
+    },
+    promiseFulfilled: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${PromiseSwitch.selector}-fulfilled`,
+            template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new PromiseSwitch.Fulfilled(...counstructorParam), config: config });
+            }
+        });
+    },
+    promiseRejected: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${PromiseSwitch.selector}-rejected`,
+            template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new PromiseSwitch.Rejected(...counstructorParam), config: config });
+            }
+        });
+    },
+    promiseSwitch: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${PromiseSwitch.selector}`,
+            template: '#innerHTML#',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new PromiseSwitch.PromiseSwitch(...counstructorParam), config: config });
+            }
+        });
+    },
+};
+//# sourceMappingURL=PromiseSwitch.js.map

package/components/radio/Radio.d.ts

@@ -0,0 +1,45 @@
+import { ComponentBase } from '../ComponentBase';
+import { RunConfig } from '../../DomRender';
+import { OtherData } from '../../lifecycle/OnChangeAttrRender';
+import { OnCreateRenderDataParams } from '../../lifecycle/OnCreateRenderData';
+export declare namespace Radio {
+    export const selector = "System:Radio";
+    export type Attribute = {
+        class?: string;
+    };
+    export type LabelAttribute = {
+        class?: string;
+        name?: string;
+        value?: string;
+        checked?: boolean;
+        on_change_checked?: (checked: boolean, element: HTMLInputElement) => void;
+    };
+    class RadioBase extends ComponentBase<Attribute> {
+        hidden: boolean;
+    }
+    export class Checked extends RadioBase {
+        name: string;
+        constructor();
+    }
+    export class UnChecked extends RadioBase {
+        name: string;
+        constructor();
+    }
+    export class Radio extends ComponentBase<LabelAttribute> {
+        private checked;
+        private inputElement?;
+        change(checked?: boolean): void;
+        private setChildrenHidden;
+        onCreatedThisChild(child: RadioBase, childData: OnCreateRenderDataParams): void;
+        onInitInputElement(element: HTMLInputElement): void;
+        onChangeAttrRender(name: string, val: any, other: OtherData): void;
+    }
+    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;
+};
+export default _default;
+//# sourceMappingURL=Radio.d.ts.map

package/components/radio/Radio.js

@@ -0,0 +1,123 @@
+import { ComponentBase } from '../ComponentBase';
+import { DomRender } from '../../DomRender';
+import { RawSet } from '../../rawsets/RawSet';
+export var Radio;
+(function (Radio_1) {
+    Radio_1.selector = 'System:Radio';
+    class RadioBase extends ComponentBase {
+        constructor() {
+            super(...arguments);
+            this.hidden = true;
+        }
+    }
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+    //   styles: '',
+    //   selector: `${selector}.Checked`
+    // })
+    class Checked extends RadioBase {
+        constructor() {
+            super({ onlyParentType: Radio });
+            this.name = 'Checked';
+        }
+    }
+    Radio_1.Checked = Checked;
+    // @Component({
+    //   template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
+    //   styles: '',
+    //   selector: `${selector}.UnChecked`
+    // })
+    class UnChecked extends RadioBase {
+        constructor() {
+            super({ onlyParentType: Radio });
+            this.name = 'unChecked';
+        }
+    }
+    Radio_1.UnChecked = UnChecked;
+    // @Component({
+    //   template: template,
+    //   styles: style,
+    //   selector: `${selector}`
+    // })
+    class Radio extends ComponentBase {
+        constructor() {
+            super(...arguments);
+            this.checked = false;
+        }
+        change(checked = this.checked) {
+            var _a, _b;
+            this.checked = checked;
+            this.setChildrenHidden(checked);
+            console.log('radio checked!!!!!!!', checked, this.checked, (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checked);
+            if (this.getAttribute('on_change_checked')) {
+                (_b = this.getAttribute('on_change_checked')) === null || _b === void 0 ? void 0 : _b(checked, this.inputElement);
+            }
+        }
+        setChildrenHidden(checked) {
+            this.getChildren(Checked).forEach(it => {
+                it.hidden = !checked;
+            });
+            this.getChildren(UnChecked).forEach(it => {
+                it.hidden = checked;
+            });
+        }
+        onCreatedThisChild(child, childData) {
+            super.onCreatedThisChild(child, childData);
+            this.setChildrenHidden(this.checked);
+        }
+        onInitInputElement(element) {
+            this.inputElement = element;
+        }
+        onChangeAttrRender(name, val, other) {
+            super.onChangeAttrRender(name, val, other);
+            if (this.inputElement && this.getAttribute('checked') !== this.checked) {
+                this.inputElement.checked = !!this.getAttribute('checked');
+                console.log('----changeAttribute', this.getAttribute('checked'));
+                this.change(!!this.getAttribute('checked'));
+            }
+        }
+    }
+    Radio_1.Radio = Radio;
+})(Radio || (Radio = {}));
+export default {
+    radioChecked: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${Radio.selector}-checked`,
+            template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new Radio.Checked(), config: config });
+            }
+        });
+    },
+    radioUnChecked: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${Radio.selector}-unchecked`,
+            template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new Radio.UnChecked(), config: config });
+            }
+        });
+    },
+    radio: (config) => {
+        return RawSet.createComponentTargetElement({
+            name: `${Radio.selector}`,
+            template: '<label class="${@this@.getAttribute(\'class\')}$">\n' +
+                '  <input\n' +
+                '    name="${@this@.getAttribute(\'name\')}$"\n' +
+                '    checked="${@this@.getAttribute(\'checked\')}$"\n' +
+                '    value="${@this@.getAttribute(\'value\')}$"\n' +
+                '    dr-on-init="@this@.onInitInputElement($element)"\n' +
+                '    dr-event-change="@this@.change($element.checked);"\n' +
+                '    type="radio"\n' +
+                '\n' +
+                '  />\n' +
+                '  ${@this@.getAttribute(\'checked\')}$\n' +
+                '  #innerHTML#\n' +
+                '</label>',
+            objFactory: (e, o, r2, counstructorParam) => {
+                return DomRender.run({ rootObject: new Radio.Radio(...counstructorParam), config: config });
+            }
+        });
+    },
+};
+//# sourceMappingURL=Radio.js.map

package/components/select/Select.d.ts

@@ -0,0 +1,23 @@
+import { ComponentBase } from '../ComponentBase';
+import { RunConfig } from '../../DomRender';
+import { OnCreateRender } from '../../lifecycle/OnCreateRender';
+export declare namespace Select {
+    const selector = "dr-select";
+    type Attribute = {
+        class?: string;
+    };
+    class Option extends ComponentBase<Attribute> {
+        constructor();
+    }
+    class Select extends ComponentBase<Attribute> implements OnCreateRender {
+        private element?;
+        onCreateRender(...param: any[]): void;
+        onDestroyRender(...metaData: any[]): void;
+    }
+}
+declare const _default: {
+    selectOption: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+    select: (config?: RunConfig) => import("../../configs/TargetElement").TargetElement;
+};
+export default _default;
+//# sourceMappingURL=Select.d.ts.map