@anglr/datetime 2.0.0-beta.20220221103100 → 2.0.1

package/es2020/src/selector/components/selector/selector.component.js

@@ -0,0 +1,334 @@
+import { Component, ChangeDetectionStrategy, Input, Inject, Optional, ChangeDetectorRef } from '@angular/core';
+import { extend, isBlank, isString, nameof } from '@jscrpt/common';
+import { Subject, Subscription } from 'rxjs';
+import { DATE_API, FORMAT_PROVIDER } from '../../../misc/tokens';
+import { DateTimeDayPickerComponent } from '../../../picker/components/dayPicker/dayPicker.component';
+import { DateTimeMonthPickerComponent } from '../../../picker/components/monthPicker/monthPicker.component';
+import { DateTimeYearPickerComponent } from '../../../picker/components/yearPicker/yearPicker.component';
+import { DateValueProvider } from '../../../services/dateValueProvider.service';
+import { DATE_TIME_SELECTOR_CONFIGURATION } from '../../misc/tokens';
+import { InputDateTimeSelectorComponent } from '../inputDateTime/inputDateTime.component';
+import { enterLeaveAnimateChildTrigger } from './selector.component.animations';
+import * as i0 from "@angular/core";
+import * as i1 from "../../../services/dateValueProvider.service";
+import * as i2 from "../../../picker/components/picker/picker.component";
+import * as i3 from "@anglr/common";
+import * as i4 from "@angular/common";
+//TODO - add support for body absolute picker
+/**
+ * Default configuration for selector
+ */
+const defaultConfiguration = {
+    selectorComponent: InputDateTimeSelectorComponent,
+    pickerCloseOnValueSelect: false,
+    pickerDisabled: false,
+    defaultPeriod: 'day',
+    pickerPeriodsDefinition: {
+        'day': DateTimeDayPickerComponent,
+        'month': DateTimeMonthPickerComponent,
+        'year': DateTimeYearPickerComponent
+    },
+    cssClasses: {}
+};
+/**
+ * Component used for displaying and selecting date time
+ */
+export class DateTimeSelectorComponent {
+    //######################### constructor #########################
+    constructor(configuration, _valueProvider, _changeDetector, _dateApi, formatProvider) {
+        this._valueProvider = _valueProvider;
+        this._changeDetector = _changeDetector;
+        this._dateApi = _dateApi;
+        //######################### protected fields #########################
+        /**
+         * Current value of datetime
+         */
+        this._value = null;
+        /**
+         * Occurs when selector is touched by user
+         */
+        this._touched = new Subject();
+        /**
+         * Occurs when value changes
+         */
+        this._valueChange = new Subject();
+        /**
+         * Indication whether is control disabled
+         */
+        this._disabled = false;
+        /**
+         * All subscriptions for active selector
+         */
+        this._activeSelectorSubscriptions = new Subscription();
+        /**
+         * Subscription for changes of min value selector
+         */
+        this._minValueChangeSubscription = null;
+        /**
+         * Subscription for changes of max value selector
+         */
+        this._maxValueChangeSubscription = null;
+        /**
+         * Indication whether is picker visible or not
+         * @internal
+         */
+        this.pickerVisible = false;
+        /**
+         * Gets or sets minimal possible value for picker, that can be picked
+         */
+        this.min = null;
+        /**
+         * Gets or sets maximal possible value for picker, that can be picked
+         */
+        this.max = null;
+        this.format = formatProvider.date;
+        this._options = extend(true, {}, defaultConfiguration, configuration);
+        // without deep-copy for this attribute
+        if (configuration?.pickerPeriodsDefinition) {
+            this._options.pickerPeriodsDefinition = configuration.pickerPeriodsDefinition;
+        }
+    }
+    //######################### public properties #########################
+    /**
+     * Gets or sets current value of datetime
+     */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        this._activeSelector?.setValue(this._value);
+    }
+    /**
+     * Gets indication whether is current value valid
+     */
+    get valid() {
+        return this._activeSelector?.valid ?? true;
+    }
+    /**
+     * Gets or sets formatted value
+     */
+    get formattedValue() {
+        return this._activeSelector?.formattedValue ?? null;
+    }
+    set formattedValue(value) {
+        if (value) {
+            const val = this._dateApi.getValue(value, this.format);
+            this.value = this._valueProvider.getValue(val.value, this.format);
+        }
+        else {
+            this.value = null;
+        }
+    }
+    /**
+     * Occurs when selector is touched by user
+     */
+    get touched() {
+        return this._touched.asObservable();
+    }
+    /**
+     * Occurs when value changes
+     */
+    get valueChange() {
+        return this._valueChange.asObservable();
+    }
+    /**
+     * Gets or sets placeholder that is displayed when there is no value selected
+     */
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        if (this._activeSelector) {
+            this._activeSelector.placeholder = this._placeholder;
+            this._activeSelector.invalidateVisuals();
+        }
+    }
+    /**
+     * Current options used by selector
+     */
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = extend(true, this._options, value);
+        // without deep-copy for this attribute
+        if (value?.pickerPeriodsDefinition) {
+            this._options.pickerPeriodsDefinition = value.pickerPeriodsDefinition;
+        }
+    }
+    /**
+     * Gets or sets minimal possible value for picker, that can be picked
+     */
+    get minValue() {
+        return this.min;
+    }
+    set minValue(value) {
+        this._minValueChangeSubscription?.unsubscribe();
+        this._minValueChangeSubscription = null;
+        if (isBlank(value)) {
+            this.min = null;
+        }
+        else if (isString(value)) {
+            const date = this._dateApi.getValue(value);
+            if (date.isValid()) {
+                this.min = date.value;
+            }
+        }
+        else if (value instanceof DateTimeSelectorComponent) {
+            this.min = value.valueOf();
+            this._minValueChangeSubscription = value.valueChange.subscribe(() => {
+                this.min = value.valueOf();
+                this._activeSelector?.setMinValue(this.min);
+                this._changeDetector.detectChanges();
+            });
+        }
+        else {
+            this.min = value;
+        }
+        this._activeSelector?.setMinValue(this.min);
+    }
+    /**
+     * Gets or sets maximal possible value for picker, that can be picked
+     */
+    get maxValue() {
+        return this.max;
+    }
+    set maxValue(value) {
+        this._maxValueChangeSubscription?.unsubscribe();
+        this._maxValueChangeSubscription = null;
+        if (isBlank(value)) {
+            this.max = null;
+        }
+        else if (isString(value)) {
+            const date = this._dateApi.getValue(value);
+            if (date.isValid()) {
+                this.max = date.value;
+            }
+        }
+        else if (value instanceof DateTimeSelectorComponent) {
+            this.max = value.valueOf();
+            this._maxValueChangeSubscription = value.valueChange.subscribe(() => {
+                this.max = value.valueOf();
+                this._activeSelector?.setMaxValue(this.max);
+                this._changeDetector.detectChanges();
+            });
+        }
+        else {
+            this.max = value;
+        }
+        this._activeSelector?.setMaxValue(this.max);
+    }
+    //######################### public methods - implementation of OnInit #########################
+    /**
+     * Initialize component
+     */
+    ngOnInit() {
+        this.activeSelectorComponent = this._options.selectorComponent;
+    }
+    //######################### public methods - implementation of OnChanges #########################
+    /**
+     * Called when input value changes
+     */
+    ngOnChanges(changes) {
+        if (nameof('format') in changes && this._activeSelector) {
+            this._activeSelector.format = this.format;
+            this._activeSelector.invalidateVisuals();
+        }
+    }
+    //######################### public methods - implementation of OnDestroy #########################
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy() {
+        this._activeSelectorSubscriptions.unsubscribe();
+        this._minValueChangeSubscription?.unsubscribe();
+        this._minValueChangeSubscription = null;
+        this._maxValueChangeSubscription?.unsubscribe();
+        this._maxValueChangeSubscription = null;
+    }
+    //######################### public methods - template bindings #########################
+    /**
+     * Handles created or destroyed date time selector instance
+     * @param selector - Instance of selector or null
+     * @internal
+     */
+    selectorCreated(selector) {
+        this._activeSelector = selector;
+        this._activeSelectorSubscriptions.unsubscribe();
+        this._activeSelectorSubscriptions = new Subscription();
+        this._activeSelectorSubscriptions.add(selector.touched.subscribe(() => this._touched.next()));
+        this._activeSelectorSubscriptions.add(selector.pickerRequest.subscribe(visible => this.pickerVisible = visible));
+        this._activeSelectorSubscriptions.add(selector.valueChange.subscribe(() => {
+            this._value = selector.value;
+            this._valueChange.next();
+        }));
+        selector.format = this.format;
+        selector.setMaxValue(this.max);
+        selector.setMinValue(this.min);
+        selector.setValue(this._value);
+        selector.setDisabled(this._disabled);
+        selector.placeholder = this._placeholder;
+        selector.invalidateVisuals();
+    }
+    /**
+     * Handles changed value by picker
+     * @param value - Value that was changed
+     * @internal
+     */
+    pickerChangedValue(value) {
+        this._activeSelector?.setValue(value);
+        this._value = value;
+        this._valueChange.next();
+        if (this._options.pickerCloseOnValueSelect) {
+            this.pickerVisible = false;
+        }
+    }
+    //######################### public methods #########################
+    /**
+     * Sets as 'control' disabled
+     * @param disabled - Indication whether sets value as disabled, if omitted it is same as disabled set to true
+     */
+    setDisabled(disabled = true) {
+        this._disabled = disabled;
+        this._activeSelector?.setDisabled(disabled);
+    }
+    /**
+     * Gets simple value of selector
+     */
+    valueOf() {
+        if (!this._value) {
+            return null;
+        }
+        return this._value.from;
+    }
+}
+DateTimeSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeSelectorComponent, deps: [{ token: DATE_TIME_SELECTOR_CONFIGURATION, optional: true }, { token: i1.DateValueProvider }, { token: i0.ChangeDetectorRef }, { token: DATE_API }, { token: FORMAT_PROVIDER }], target: i0.ɵɵFactoryTarget.Component });
+DateTimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: DateTimeSelectorComponent, selector: "date-time-selector", inputs: { format: "format", placeholder: "placeholder", options: "options", minValue: "minValue", maxValue: "maxValue" }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngComponentOutletEx]=\"activeSelectorComponent\" (ngComponentOutletExCreated)=\"selectorCreated($event)\"></ng-template>\r\n\r\n<ng-template [ngIf]=\"!options?.pickerDisabled && pickerVisible\">\r\n    <date-time-picker [value]=\"value\"\r\n                      [minValue]=\"min\"\r\n                      [maxValue]=\"max\"\r\n                      [options]=\"options\"\r\n                      (valueChange)=\"pickerChangedValue($event)\"></date-time-picker>\r\n</ng-template>", styles: [":host\r\n{\r\n    display: block;\r\n    position: relative;\r\n}\r\n\r\ndate-time-picker\r\n{\r\n    position: absolute;\r\n    top: 100%;\r\n}"], components: [{ type: i2.DateTimePickerComponent, selector: "date-time-picker", inputs: ["options", "value", "minValue", "maxValue"], outputs: ["valueChange"] }], directives: [{ type: i3.NgComponentOutletEx, selector: "[ngComponentOutletEx]", inputs: ["ngComponentOutletEx", "ngComponentOutletExInjector", "ngComponentOutletExContent"], outputs: ["ngComponentOutletExCreated"], exportAs: ["ngComponentOutletEx"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [enterLeaveAnimateChildTrigger], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: DateTimeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-time-selector', animations: [enterLeaveAnimateChildTrigger], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [ngComponentOutletEx]=\"activeSelectorComponent\" (ngComponentOutletExCreated)=\"selectorCreated($event)\"></ng-template>\r\n\r\n<ng-template [ngIf]=\"!options?.pickerDisabled && pickerVisible\">\r\n    <date-time-picker [value]=\"value\"\r\n                      [minValue]=\"min\"\r\n                      [maxValue]=\"max\"\r\n                      [options]=\"options\"\r\n                      (valueChange)=\"pickerChangedValue($event)\"></date-time-picker>\r\n</ng-template>", styles: [":host\r\n{\r\n    display: block;\r\n    position: relative;\r\n}\r\n\r\ndate-time-picker\r\n{\r\n    position: absolute;\r\n    top: 100%;\r\n}"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DATE_TIME_SELECTOR_CONFIGURATION]
+                }] }, { type: i1.DateValueProvider }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FORMAT_PROVIDER]
+                }] }]; }, propDecorators: { format: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], minValue: [{
+                type: Input
+            }], maxValue: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=selector.component.js.map

package/es2020/src/selector/components/selector/selector.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector.component.js","sourceRoot":"","sources":["../../../../../src/selector/components/selector/selector.component.ts","../../../../../src/selector/components/selector/selector.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, Inject, Optional, Type, OnInit, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef} from '@angular/core';\nimport {extend, isBlank, isString, nameof} from '@jscrpt/common';\nimport {Observable, Subject, Subscription} from 'rxjs';\n\nimport {DateTimeValue} from '../../../misc/datetime.interface';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../misc/tokens';\nimport {DateTimeDayPickerComponent} from '../../../picker/components/dayPicker/dayPicker.component';\nimport {DateTimeMonthPickerComponent} from '../../../picker/components/monthPicker/monthPicker.component';\nimport {DateTimeYearPickerComponent} from '../../../picker/components/yearPicker/yearPicker.component';\nimport {DateApi, FormatProvider} from '../../../services';\nimport {DateValueProvider} from '../../../services/dateValueProvider.service';\nimport {DateTimeSelector, DateTimeSelectorOptions} from '../../misc/datetimeSelector.interface';\nimport {DATE_TIME_SELECTOR_CONFIGURATION} from '../../misc/tokens';\nimport {InputDateTimeSelectorComponent} from '../inputDateTime/inputDateTime.component';\nimport {enterLeaveAnimateChildTrigger} from './selector.component.animations';\n\n//TODO - add support for body absolute picker\n\n/**\n * Default configuration for selector\n */\nconst defaultConfiguration: DateTimeSelectorOptions<DateTimeSelector> =\n{\n    selectorComponent: InputDateTimeSelectorComponent,\n    pickerCloseOnValueSelect: false,\n    pickerDisabled: false,\n    defaultPeriod: 'day',\n    pickerPeriodsDefinition:\n    {\n        'day': DateTimeDayPickerComponent,\n        'month': DateTimeMonthPickerComponent,\n        'year': DateTimeYearPickerComponent\n    },\n    cssClasses:\n    {\n    }\n};\n\n/**\n * Component used for displaying and selecting date time\n */\n@Component(\n{\n    selector: 'date-time-selector',\n    templateUrl: 'selector.component.html',\n    styleUrls: ['selector.component.css'],\n    animations: [enterLeaveAnimateChildTrigger],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeSelectorComponent<TDate = any> implements OnInit, OnChanges ,OnDestroy\n{\n    //######################### protected fields #########################\n\n    /**\n     * Current value of datetime\n     */\n    protected _value: DateTimeValue<TDate>|null = null;\n\n    /**\n     * Occurs when selector is touched by user\n     */\n    protected _touched: Subject<void> = new Subject<void>();\n\n    /**\n     * Occurs when value changes\n     */\n    protected _valueChange: Subject<void> = new Subject<void>();\n\n    /**\n     * Indication whether is control disabled\n     */\n    protected _disabled: boolean = false;\n\n    /**\n     * Instance of active date time selector\n     */\n    protected _activeSelector?: DateTimeSelector<TDate>;\n\n    /**\n     * All subscriptions for active selector\n     */\n    protected _activeSelectorSubscriptions: Subscription = new Subscription();\n\n    /**\n     * Subscription for changes of min value selector\n     */\n    protected _minValueChangeSubscription: Subscription|null = null;\n\n    /**\n     * Subscription for changes of max value selector\n     */\n    protected _maxValueChangeSubscription: Subscription|null = null;\n\n    /**\n     * Current options used by selector\n     */\n    protected _options: DateTimeSelectorOptions<DateTimeSelector<TDate>>;\n\n    /**\n     * Placeholder that is displayed when there is no value selected\n     */\n    protected _placeholder?: string;\n\n    //######################### public properties #########################\n\n    /**\n     * Gets or sets current value of datetime\n     */\n    public get value(): DateTimeValue<TDate>|null\n    {\n        return this._value;\n    }\n    public set value(value: DateTimeValue<TDate>|null)\n    {\n        this._value = value;\n\n        this._activeSelector?.setValue(this._value);\n    }\n\n    /**\n     * Gets indication whether is current value valid\n     */\n    public get valid(): boolean\n    {\n        return this._activeSelector?.valid ?? true;\n    }\n\n    /**\n     * Gets or sets formatted value\n     */\n    public get formattedValue(): string|null\n    {\n        return this._activeSelector?.formattedValue ?? null;\n    }\n    public set formattedValue(value: string|null)\n    {\n        if(value)\n        {\n            const val = this._dateApi.getValue(value, this.format);\n            this.value = this._valueProvider.getValue(val.value, this.format);\n        }\n        else\n        {\n            this.value = null;\n        }\n    }\n\n    /**\n     * Occurs when selector is touched by user\n     */\n    public get touched(): Observable<void>\n    {\n        return this._touched.asObservable();\n    }\n\n    /**\n     * Occurs when value changes\n     */\n    public get valueChange(): Observable<void>\n    {\n        return this._valueChange.asObservable();\n    }\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Currently active date time selector component type\n     * @internal\n     */\n    public activeSelectorComponent?: Type<DateTimeSelector<TDate>>;\n\n    /**\n     * Indication whether is picker visible or not\n     * @internal\n     */\n    public pickerVisible: boolean = false;\n\n    /**\n     * Gets or sets minimal possible value for picker, that can be picked\n     */\n    public min: TDate|null = null;\n\n    /**\n     * Gets or sets maximal possible value for picker, that can be picked\n     */\n    public max: TDate|null = null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Format of displayed\n     */\n    @Input()\n    public format: string;\n\n    /**\n     * Gets or sets placeholder that is displayed when there is no value selected\n     */\n    @Input()\n    public get placeholder(): string|undefined\n    {\n        return this._placeholder;\n    }\n    public set placeholder(value: string|undefined)\n    {\n        this._placeholder = value;\n\n        if(this._activeSelector)\n        {\n            this._activeSelector.placeholder = this._placeholder;\n\n            this._activeSelector.invalidateVisuals();\n        }\n    }\n\n    /**\n     * Current options used by selector\n     */\n    @Input()\n    public get options(): DateTimeSelectorOptions<DateTimeSelector<TDate>>\n    {\n        return this._options;\n    }\n    public set options(value: DateTimeSelectorOptions<DateTimeSelector<TDate>>)\n    {\n        this._options = extend(true, this._options, value);\n        // without deep-copy for this attribute\n        if (value?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = value.pickerPeriodsDefinition;\n        }\n    }\n\n    /**\n     * Gets or sets minimal possible value for picker, that can be picked\n     */\n    @Input()\n    public get minValue(): TDate|string|null|DateTimeSelectorComponent<TDate>\n    {\n        return this.min;\n    }\n    public set minValue(value: TDate|string|null|DateTimeSelectorComponent<TDate>)\n    {\n        this._minValueChangeSubscription?.unsubscribe();\n        this._minValueChangeSubscription = null;\n\n        if(isBlank(value))\n        {\n            this.min = null;\n        }\n        else if(isString(value))\n        {\n            const date = this._dateApi.getValue(value);\n\n            if(date.isValid())\n            {\n                this.min = date.value;\n            }\n        }\n        else if(value instanceof DateTimeSelectorComponent)\n        {\n            this.min = value.valueOf();\n\n            this._minValueChangeSubscription = value.valueChange.subscribe(() =>\n            {\n                this.min = value.valueOf();\n                this._activeSelector?.setMinValue(this.min);\n\n                this._changeDetector.detectChanges();\n            });\n        }\n        else\n        {\n            this.min = value;\n        }\n\n        this._activeSelector?.setMinValue(this.min);\n    }\n\n    /**\n     * Gets or sets maximal possible value for picker, that can be picked\n     */\n    @Input()\n    public get maxValue(): TDate|string|null|DateTimeSelectorComponent<TDate>\n    {\n        return this.max;\n    }\n    public set maxValue(value: TDate|string|null|DateTimeSelectorComponent<TDate>)\n    {\n        this._maxValueChangeSubscription?.unsubscribe();\n        this._maxValueChangeSubscription = null;\n\n        if(isBlank(value))\n        {\n            this.max = null;\n        }\n        else if(isString(value))\n        {\n            const date = this._dateApi.getValue(value);\n\n            if(date.isValid())\n            {\n                this.max = date.value;\n            }\n        }\n        else if(value instanceof DateTimeSelectorComponent)\n        {\n            this.max = value.valueOf();\n\n            this._maxValueChangeSubscription = value.valueChange.subscribe(() =>\n            {\n                this.max = value.valueOf();\n                this._activeSelector?.setMaxValue(this.max);\n\n                this._changeDetector.detectChanges();\n            });\n        }\n        else\n        {\n            this.max = value;\n        }\n\n        this._activeSelector?.setMaxValue(this.max);\n    }\n\n    //######################### constructor #########################\n    constructor(@Optional() @Inject(DATE_TIME_SELECTOR_CONFIGURATION) configuration: DateTimeSelectorOptions<DateTimeSelector<TDate>>,\n                protected _valueProvider: DateValueProvider<TDate>,\n                protected _changeDetector: ChangeDetectorRef,\n                @Inject(DATE_API) protected _dateApi: DateApi<TDate>,\n                @Inject(FORMAT_PROVIDER) formatProvider: FormatProvider)\n    {\n        this.format = formatProvider.date;\n        this._options = extend(true, {}, defaultConfiguration, configuration);\n        // without deep-copy for this attribute\n        if (configuration?.pickerPeriodsDefinition)\n        {\n            this._options.pickerPeriodsDefinition = configuration.pickerPeriodsDefinition;\n        }\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public ngOnInit()\n    {\n        this.activeSelectorComponent = this._options.selectorComponent;\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n\n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<DateTimeSelectorComponent>('format') in changes && this._activeSelector)\n        {\n            this._activeSelector.format = this.format;\n            this._activeSelector.invalidateVisuals();\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n\n    /**\n     * Called when component is destroyed\n     */\n    public ngOnDestroy()\n    {\n        this._activeSelectorSubscriptions.unsubscribe();\n\n        this._minValueChangeSubscription?.unsubscribe();\n        this._minValueChangeSubscription = null;\n\n        this._maxValueChangeSubscription?.unsubscribe();\n        this._maxValueChangeSubscription = null;\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Handles created or destroyed date time selector instance\n     * @param selector - Instance of selector or null\n     * @internal\n     */\n    public selectorCreated(selector: DateTimeSelector<TDate>)\n    {\n        this._activeSelector = selector;\n\n        this._activeSelectorSubscriptions.unsubscribe();\n        this._activeSelectorSubscriptions = new Subscription();\n\n        this._activeSelectorSubscriptions.add(selector.touched.subscribe(() => this._touched.next()));\n        this._activeSelectorSubscriptions.add(selector.pickerRequest.subscribe(visible => this.pickerVisible = visible));\n\n        this._activeSelectorSubscriptions.add(selector.valueChange.subscribe(() =>\n        {\n            this._value = selector.value;\n            this._valueChange.next();\n        }));\n\n        selector.format = this.format;\n        selector.setMaxValue(this.max);\n        selector.setMinValue(this.min);\n        selector.setValue(this._value);\n        selector.setDisabled(this._disabled);\n        selector.placeholder = this._placeholder;\n\n        selector.invalidateVisuals();\n    }\n\n    /**\n     * Handles changed value by picker\n     * @param value - Value that was changed\n     * @internal\n     */\n    public pickerChangedValue(value: DateTimeValue<TDate>)\n    {\n        this._activeSelector?.setValue(value);\n        this._value = value;\n        this._valueChange.next();\n\n        if(this._options.pickerCloseOnValueSelect)\n        {\n            this.pickerVisible = false;\n        }\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Sets as 'control' disabled\n     * @param disabled - Indication whether sets value as disabled, if omitted it is same as disabled set to true\n     */\n    public setDisabled(disabled: boolean = true): void\n    {\n        this._disabled = disabled;\n        this._activeSelector?.setDisabled(disabled);\n    }\n\n    /**\n     * Gets simple value of selector\n     */\n    public valueOf(): TDate|null\n    {\n        if(!this._value)\n        {\n            return null;\n        }\n\n        return this._value.from;\n    }\n}\n","<ng-template [ngComponentOutletEx]=\"activeSelectorComponent\" (ngComponentOutletExCreated)=\"selectorCreated($event)\"></ng-template>\r\n\r\n<ng-template [ngIf]=\"!options?.pickerDisabled && pickerVisible\">\r\n    <date-time-picker [value]=\"value\"\r\n                      [minValue]=\"min\"\r\n                      [maxValue]=\"max\"\r\n                      [options]=\"options\"\r\n                      (valueChange)=\"pickerChangedValue($event)\"></date-time-picker>\r\n</ng-template>"]}