@anglr/datetime 5.0.0-beta.20221020045240 → 5.0.0-beta.20221020124055

package/es2020/src/legacy/picker/misc/datetimePicker.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"datetimePicker.interface.js","sourceRoot":"","sources":["../../../../../src/legacy/picker/misc/datetimePicker.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {Type} from '@angular/core';\nimport {Dictionary} from '@jscrpt/common';\nimport {Observable} from 'rxjs';\n\nimport {DateTimeValue} from '../../../interfaces/dateTime/datetime.interface';\nimport {DateApiObject} from '../../../services/dateApi/dateApi.interface';\n\n/**\n * Shared css classes for all pickers\n */\nexport interface CommonPickerCssClasses\n{\n    /**\n     * Period selection element wrapping displayed period and previous, next buttons\n     */\n    periodSelection: string;\n\n    /**\n     * Element used for switching period to previous one\n     */\n    previousPeriod: string;\n\n    /**\n     * Element used for switching period to next one\n     */\n    nextPeriod: string;\n\n    /**\n     * Element representing currently displayed period\n     */\n    periodValue: string;\n\n    /**\n     * Element wrapping displayed period data\n     */\n    periodData: string;\n\n    /**\n     * Element representing single datum for period item\n     */\n    periodDatum: string;\n\n    /**\n     * Name of css class that represents clickable items in picker\n     */\n    clickable: string;\n}\n\n/**\n * Css classes applied to datetime picker\n */\nexport interface DateTimePickerCssClasses\n{\n    /**\n     * Shared css classes for all pickers\n     */\n    pickerShared?: CommonPickerCssClasses;\n\n    /**\n     * Custom css classes specific for each picker type\n     */\n    pickerCustom?: Dictionary<object>;\n}\n\n/**\n * Defintion of datetime picker component options\n */\nexport interface DateTimePickerLegacyOptions<TPicker = any>\n{\n    /**\n     * Order of pickers, it's possible use less pickers as is defined in pickerPeriodsDefinition for example 'month,year'\n     */\n    pickerPeriodsOrder: string[]|string|null;\n\n    /**\n     * Definition of types for each period type for picker\n     */\n    pickerPeriodsDefinition: Dictionary<Type<TPicker>>;\n\n    /**\n     * Name of default period for picker that is displayed\n     */\n    defaultPeriod: string;\n\n    /**\n     * Css classes for date time picker\n     */\n    cssClasses: DateTimePickerCssClasses;\n}\n\n/**\n * Describes datetime picker component used for displaying and selecting value\n */\nexport interface DateTimeLegacyPicker<TDate = any, TCssClasses = object>\n{\n    /**\n     * Gets current value of datetime\n     */\n    readonly value: DateTimeValue<TDate>|null;\n\n    /**\n     * Occurs when value changes\n     */\n    readonly valueChange: Observable<void>;\n\n    /**\n     * Occurs when user scales up\n     */\n    readonly scaleUp: Observable<TDate>;\n\n    /**\n     * Occurs when user scales down\n     */\n    readonly scaleDown: Observable<TDate>;\n\n    /**\n     * Sets css classes for picker, allowing to override defaults\n     * @param cssClasses - Css classes to be set for picker\n     */\n    setCssClasses(cssClasses: TCssClasses): void;\n\n    /**\n     * Sets minimal possible value for picker, that can be picked\n     * @param value - Minimal possible value that can be picked\n     */\n    setMinValue(value: TDate|null): void;\n\n    /**\n     * Sets maximal possible value for picker, that can be picked\n     * @param value - Maximal possible value that can be picked\n     */\n    setMaxValue(value: TDate|null): void;\n\n    /**\n     * Sets value of datetime picker\n     * @param value - Value to be set to this picker\n     */\n    setValue(value: DateTimeValue<TDate>|null): void;\n\n    /**\n     * Set displays date to be displayed\n     * @param value - Value that identifies period that is going to be displayed\n     */\n    display(value: DateApiObject<TDate>): void;\n\n    /**\n     * Sets indication whether can go down\n     * @param value - Indication whether can go down in period\n     */\n    setCanGoDown(value: boolean): void;\n\n    /**\n     * Sets indication whether can go up\n     * @param value - Indication whether can go up in period\n     */\n    setCanGoUp(value: boolean): void;\n\n    /**\n     * Explicitly runs invalidation of content (change detection)\n     */\n    invalidateVisuals(): void;\n}\n\n/**\n * Data that represents data for any picker type\n */\nexport interface PeriodData<TDate = any>\n{\n    /**\n     * Indication that this period item is active and selected\n     */\n    active: boolean;\n\n    /**\n     * Indication that this period item is disabled\n     */\n    disabled: boolean;\n\n    /**\n     * Date for this period item\n     */\n    date: TDate;\n}\n\n/**\n * Data that represents day in date picker\n */\nexport interface DayData<TDate = any> extends PeriodData<TDate>\n{\n\n    /**\n     * Indication that this day is out of currently selected month\n     */\n    otherMonth: boolean;\n\n    /**\n     * Indication that this day is today\n     */\n    today: boolean;\n\n    /**\n     * Indication that this day is weekend day\n     */\n    weekend: boolean;\n\n    /**\n     * Day number of month\n     */\n    day: number;\n}\n\n/**\n * Data that represents month in date picker\n */\nexport interface MonthData<TDate = any> extends PeriodData<TDate>\n{\n    /**\n     * Name of month\n     */\n    name: string;\n}\n\n/**\n * Data that represents year in date picker\n */\nexport interface YearData<TDate = any> extends PeriodData<TDate>\n{\n    /**\n     * Value of year\n     */\n    value: number;\n}\n"]}
+{"version":3,"file":"datetimePicker.interface.js","sourceRoot":"","sources":["../../../../../src/legacy/picker/misc/datetimePicker.interface.ts"],"names":[],"mappings":"","sourcesContent":["import {Type} from '@angular/core';\nimport {Dictionary} from '@jscrpt/common';\nimport {Observable} from 'rxjs';\n\nimport {DateTimeValue} from '../../../interfaces/dateTime/datetime.interface';\nimport {DateApiObject} from '../../../services/dateApi/dateApi.interface';\n\n/**\n * Shared css classes for all pickers\n */\nexport interface CommonPickerCssClasses\n{\n    /**\n     * Period selection element wrapping displayed period and previous, next buttons\n     */\n    periodSelection: string;\n\n    /**\n     * Element used for switching period to previous one\n     */\n    previousPeriod: string;\n\n    /**\n     * Element used for switching period to next one\n     */\n    nextPeriod: string;\n\n    /**\n     * Element representing currently displayed period\n     */\n    periodValue: string;\n\n    /**\n     * Element wrapping displayed period data\n     */\n    periodData: string;\n\n    /**\n     * Element representing single datum for period item\n     */\n    periodDatum: string;\n\n    /**\n     * Name of css class that represents clickable items in picker\n     */\n    clickable: string;\n}\n\n/**\n * Css classes applied to datetime picker\n */\nexport interface DateTimePickerCssClasses\n{\n    /**\n     * Shared css classes for all pickers\n     */\n    pickerShared?: CommonPickerCssClasses;\n\n    /**\n     * Custom css classes specific for each picker type\n     */\n    pickerCustom?: Dictionary<object>;\n}\n\n/**\n * Defintion of datetime picker component options\n */\nexport interface DateTimePickerLegacyOptions<TPicker = any>\n{\n    /**\n     * Order of pickers, it's possible use less pickers as is defined in pickerPeriodsDefinition for example 'month,year'\n     */\n    pickerPeriodsOrder: string[]|string|null;\n\n    /**\n     * Definition of types for each period type for picker\n     */\n    pickerPeriodsDefinition: Dictionary<Type<TPicker>>;\n\n    /**\n     * Name of default period for picker that is displayed\n     */\n    defaultPeriod: string;\n\n    /**\n     * Css classes for date time picker\n     */\n    cssClasses: DateTimePickerCssClasses;\n}\n\n/**\n * Describes datetime picker component used for displaying and selecting value\n */\nexport interface DateTimeLegacyPicker<TDate = any, TCssClasses = object>\n{\n    /**\n     * Gets current value of datetime\n     */\n    readonly value: DateTimeValue<TDate>|null;\n\n    /**\n     * Occurs when value changes\n     */\n    readonly valueChange: Observable<void>;\n\n    /**\n     * Occurs when user scales up\n     */\n    readonly scaleUp: Observable<TDate>;\n\n    /**\n     * Occurs when user scales down\n     */\n    readonly scaleDown: Observable<TDate>;\n\n    /**\n     * Sets css classes for picker, allowing to override defaults\n     * @param cssClasses - Css classes to be set for picker\n     */\n    setCssClasses(cssClasses: TCssClasses): void;\n\n    /**\n     * Sets minimal possible value for picker, that can be picked\n     * @param value - Minimal possible value that can be picked\n     */\n    setMinValue(value: TDate|null): void;\n\n    /**\n     * Sets maximal possible value for picker, that can be picked\n     * @param value - Maximal possible value that can be picked\n     */\n    setMaxValue(value: TDate|null): void;\n\n    /**\n     * Sets value of datetime picker\n     * @param value - Value to be set to this picker\n     */\n    setValue(value: DateTimeValue<TDate>|null): void;\n\n    /**\n     * Set displays date to be displayed\n     * @param value - Value that identifies period that is going to be displayed\n     */\n    display(value: DateApiObject<TDate>): void;\n\n    /**\n     * Sets indication whether can go down\n     * @param value - Indication whether can go down in period\n     */\n    setCanGoDown(value: boolean): void;\n\n    /**\n     * Sets indication whether can go up\n     * @param value - Indication whether can go up in period\n     */\n    setCanGoUp(value: boolean): void;\n\n    /**\n     * Explicitly runs invalidation of content (change detection)\n     */\n    invalidateVisuals(): void;\n}\n\n/**\n * Data that represents data for any picker type\n */\nexport interface PeriodData<TDate = any>\n{\n    /**\n     * Indication that this period item is active and selected\n     */\n    active: boolean;\n\n    /**\n     * Indication that this period item is disabled\n     */\n    disabled: boolean;\n\n    //TODO: remove\n\n    /**\n     * Date for this period item\n     */\n    date: TDate;\n\n    /**\n     * Date for this period item as date api object\n     */\n    dateObj: DateApiObject<TDate>;\n}\n\n/**\n * Data that represents day in date picker\n */\nexport interface DayData<TDate = any> extends PeriodData<TDate>\n{\n\n    /**\n     * Indication that this day is out of currently selected month\n     */\n    otherMonth: boolean;\n\n    /**\n     * Indication that this day is today\n     */\n    today: boolean;\n\n    /**\n     * Indication that this day is weekend day\n     */\n    weekend: boolean;\n\n    /**\n     * Day number of month\n     */\n    day: number;\n}\n\n/**\n * Data that represents month in date picker\n */\nexport interface MonthData<TDate = any> extends PeriodData<TDate>\n{\n    /**\n     * Name of month\n     */\n    name: string;\n}\n\n/**\n * Data that represents year in date picker\n */\nexport interface YearData<TDate = any> extends PeriodData<TDate>\n{\n    /**\n     * Value of year\n     */\n    value: number;\n}\n"]}

package/es2020/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.js

@@ -1,10 +1,16 @@
+import { ChangeDetectorRef, inject } from '@angular/core';
 import { Subject } from 'rxjs';
+import { DATE_API } from '../../../misc/tokens';
 /**
  * Base abstract class for each date time period picker
  */
 export class DateTimePeriodPickerBase {
     constructor() {
         //######################### protected properties #########################
+        /**
+         * Array of period data to be displayed
+         */
+        this.periodData = [];
         /**
          * Subject used for emitting of value changes
          */
@@ -17,6 +23,14 @@ export class DateTimePeriodPickerBase {
          * Subject used for scaling down
          */
         this.scaleDownSubject = new Subject();
+        /**
+         * Change detector instance
+         */
+        this.changeDetector = inject(ChangeDetectorRef);
+        /**
+         * Instance of date api for manipulation with date time
+         */
+        this.dateApi = inject(DATE_API);
         /**
          * @inheritdoc
          */
@@ -26,6 +40,45 @@ export class DateTimePeriodPickerBase {
          */
         this.canScaleDown = false;
     }
+    /**
+     * @inheritdoc
+     */
+    get display() {
+        return this.displayDate?.value;
+    }
+    set display(value) {
+        if (!value) {
+            this.displayDate = null;
+            return;
+        }
+        this.displayDate = this.dateApi.getValue(value);
+    }
+    /**
+     * @inheritdoc
+     */
+    get maxDate() {
+        return this.maxDateObj?.value;
+    }
+    set maxDate(value) {
+        if (!value) {
+            this.maxDateObj = null;
+            return;
+        }
+        this.maxDateObj = this.dateApi.getValue(value);
+    }
+    /**
+     * @inheritdoc
+     */
+    get minDate() {
+        return this.minDateObj?.value;
+    }
+    set minDate(value) {
+        if (!value) {
+            this.minDateObj = null;
+            return;
+        }
+        this.minDateObj = this.dateApi.getValue(value);
+    }
     /**
      * @inheritdoc
      */
@@ -44,5 +97,57 @@ export class DateTimePeriodPickerBase {
     get scaleDown() {
         return this.scaleDownSubject.asObservable();
     }
+    //######################### public methods - implementation of invalidatable #########################
+    /**
+     * @inheritdoc
+     */
+    invalidateVisuals() {
+        this.onRender();
+        this.changeDetector.detectChanges();
+    }
+    /**
+     * Updates minimal and maximal value for picker
+     */
+    updateMinMax() {
+        if (!this.periodData.length) {
+            return;
+        }
+        //no min, no max
+        if (!this.minDateObj && !this.maxDateObj) {
+            this.periodData.forEach(itm => itm.disabled = false);
+            return;
+        }
+        let restAfter = false;
+        for (const period of this.periodData) {
+            if (this.minDateObj?.isValid() && this.minDateObj.isAfter(period.dateObj.value) && !this.isSamePeriod(this.minDateObj, period.dateObj.value)) {
+                period.disabled = true;
+            }
+            if (restAfter || (this.maxDateObj?.isValid() && this.maxDateObj.isBefore(period.dateObj.value) && !this.isSamePeriod(this.maxDateObj, period.dateObj.value))) {
+                restAfter = true;
+                period.disabled = true;
+            }
+        }
+    }
+    /**
+     * Sets active date
+     */
+    setActive() {
+        this.periodData.forEach(itm => itm.active = false);
+        if (!this.value) {
+            return;
+        }
+        if (!Array.isArray(this.value)) {
+            if (this.value?.isValid()) {
+                const value = this.value;
+                const data = this.periodData.find(itm => this.isSamePeriod(itm.dateObj, value.value));
+                if (data) {
+                    data.active = true;
+                }
+            }
+        }
+        else {
+            //TODO: support range
+        }
+    }
 }
 //# sourceMappingURL=dateTimePeriodPickerBase.js.map

package/es2020/src/modules/dateTimePicker/components/dateTimePeriodPickerBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateTimePeriodPickerBase.js","sourceRoot":"","sources":["../../../../../src/modules/dateTimePicker/components/dateTimePeriodPickerBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,OAAO,EAAC,MAAM,MAAM,CAAC;AAMzC;;GAEG;AACH,MAAM,OAAgB,wBAAwB;IAA9C;QAEI,0EAA0E;QAE1E;;WAEG;QACO,uBAAkB,GAAkB,IAAI,OAAO,EAAQ,CAAC;QAElE;;WAEG;QACO,mBAAc,GAAmB,IAAI,OAAO,EAAS,CAAC;QAEhE;;WAEG;QACO,qBAAgB,GAAmB,IAAI,OAAO,EAAS,CAAC;QAkClE;;WAEG;QACI,eAAU,GAAY,KAAK,CAAC;QAEnC;;WAEG;QACI,iBAAY,GAAY,KAAK,CAAC;IAyBzC,CAAC;IAvBG;;OAEG;IACH,IAAW,WAAW;QAElB,OAAO,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;IAClD,CAAC;IAED;;OAEG;IACH,IAAW,OAAO;QAEd,OAAO,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,IAAW,SAAS;QAEhB,OAAO,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC;IAChD,CAAC;CACJ","sourcesContent":["import {Observable, Subject} from 'rxjs';\n\nimport {DateTimeObjectValue} from '../../../misc/types';\nimport {DateApiObject} from '../../../services';\nimport {DateTimePicker} from '../interfaces';\n\n/**\n * Base abstract class for each date time period picker\n */\nexport abstract class DateTimePeriodPickerBase<TDate = unknown, TOptions = unknown> implements DateTimePicker<TDate, TOptions>\n{\n    //######################### protected properties #########################\n\n    /**\n     * Subject used for emitting of value changes\n     */\n    protected valueChangeSubject: Subject<void> = new Subject<void>();\n\n    /**\n     * Subject used for scaling up\n     */\n    protected scaleUpSubject: Subject<TDate> = new Subject<TDate>();\n\n    /**\n     * Subject used for scaling down\n     */\n    protected scaleDownSubject: Subject<TDate> = new Subject<TDate>();\n\n    /**\n     * Date api instance for displayed date\n     */\n    protected displayDate: DateApiObject<TDate>|undefined|null;\n\n    //######################### public properties - implementation of DateTimePicker #########################\n\n    /**\n     * @inheritdoc\n     */\n    public value: DateTimeObjectValue<TDate>|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public options: TOptions|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public display: TDate|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public maxDate: TDate|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public minDate: TDate|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public canScaleUp: boolean = false;\n\n    /**\n     * @inheritdoc\n     */\n    public canScaleDown: boolean = false;\n\n    /**\n     * @inheritdoc\n     */\n    public get valueChange(): Observable<void>\n    {\n        return this.valueChangeSubject.asObservable();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public get scaleUp(): Observable<TDate>\n    {\n        return this.scaleUpSubject.asObservable();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public get scaleDown(): Observable<TDate>\n    {\n        return this.scaleDownSubject.asObservable();\n    }\n}"]}
+{"version":3,"file":"dateTimePeriodPickerBase.js","sourceRoot":"","sources":["../../../../../src/modules/dateTimePicker/components/dateTimePeriodPickerBase.ts"],"names":[],"mappings":"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","sourcesContent":["import {ChangeDetectorRef, inject} from '@angular/core';\nimport {Observable, Subject} from 'rxjs';\n\nimport {PeriodData} from '../../../legacy/picker/interfaces';\nimport {DATE_API} from '../../../misc/tokens';\nimport {DateTimeObjectValue} from '../../../misc/types';\nimport {DateApi, DateApiObject} from '../../../services';\nimport {DateTimePicker} from '../interfaces';\n\n/**\n * Base abstract class for each date time period picker\n */\nexport abstract class DateTimePeriodPickerBase<TPeriod extends PeriodData<TDate>, TDate = unknown> implements DateTimePicker<TDate>\n{\n    //######################### protected properties #########################\n\n    /**\n     * Array of period data to be displayed\n     */\n    protected periodData: TPeriod[] = [];\n\n    /**\n     * Subject used for emitting of value changes\n     */\n    protected valueChangeSubject: Subject<void> = new Subject<void>();\n\n    /**\n     * Subject used for scaling up\n     */\n    protected scaleUpSubject: Subject<TDate> = new Subject<TDate>();\n\n    /**\n     * Subject used for scaling down\n     */\n    protected scaleDownSubject: Subject<TDate> = new Subject<TDate>();\n\n    /**\n     * Date api instance for displayed date\n     */\n    protected displayDate: DateApiObject<TDate>|undefined|null;\n\n    /**\n     * Currently displayed date\n     */\n    protected displayedDate: TDate|undefined|null;\n\n    /**\n     * Date api instance for max date\n     */\n    protected maxDateObj: DateApiObject<TDate>|undefined|null;\n\n    /**\n     * Date api instance for min date\n     */\n    protected minDateObj: DateApiObject<TDate>|undefined|null;\n\n    /**\n     * Change detector instance\n     */\n    protected changeDetector: ChangeDetectorRef = inject(ChangeDetectorRef);\n\n    /**\n     * Instance of date api for manipulation with date time\n     */\n    protected dateApi: DateApi<TDate> = inject(DATE_API);\n\n    //######################### public properties - implementation of DateTimePicker #########################\n\n    /**\n     * @inheritdoc\n     */\n    public value: DateTimeObjectValue<TDate>|undefined|null;\n\n    /**\n     * @inheritdoc\n     */\n    public get display(): TDate|undefined|null\n    {\n        return this.displayDate?.value;\n    }\n    public set display(value: TDate|undefined|null)\n    {\n        if(!value)\n        {\n            this.displayDate = null;\n\n            return;\n        }\n\n        this.displayDate = this.dateApi.getValue(value);\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public get maxDate(): TDate|undefined|null\n    {\n        return this.maxDateObj?.value;\n    }\n    public set maxDate(value: TDate|undefined|null)\n    {\n        if(!value)\n        {\n            this.maxDateObj = null;\n\n            return;\n        }\n\n        this.maxDateObj = this.dateApi.getValue(value);\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public get minDate(): TDate|undefined|null\n    {\n        return this.minDateObj?.value;\n    }\n    public set minDate(value: TDate|undefined|null)\n    {\n        if(!value)\n        {\n            this.minDateObj = null;\n\n            return;\n        }\n\n        this.minDateObj = this.dateApi.getValue(value);\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public canScaleUp: boolean = false;\n\n    /**\n     * @inheritdoc\n     */\n    public canScaleDown: boolean = false;\n\n    /**\n     * @inheritdoc\n     */\n    public get valueChange(): Observable<void>\n    {\n        return this.valueChangeSubject.asObservable();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public get scaleUp(): Observable<TDate>\n    {\n        return this.scaleUpSubject.asObservable();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public get scaleDown(): Observable<TDate>\n    {\n        return this.scaleDownSubject.asObservable();\n    }\n\n    //######################### public methods - implementation of invalidatable #########################\n\n    /**\n     * @inheritdoc\n     */\n    public invalidateVisuals(): void\n    {\n        this.onRender();\n\n        this.changeDetector.detectChanges();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Method that is being called to render changes\n     */\n    protected abstract onRender(): void;\n\n    /**\n     * Tests whether provided value is in same period target value\n     * @param val - Tested value\n     * @param target - Target value to be tested against\n     */\n    protected abstract isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean;\n\n    /**\n     * Updates minimal and maximal value for picker\n     */\n    protected updateMinMax(): void\n    {\n        if(!this.periodData.length)\n        {\n            return;\n        }\n\n        //no min, no max\n        if(!this.minDateObj && !this.maxDateObj)\n        {\n            this.periodData.forEach(itm => itm.disabled = false);\n\n            return;\n        }\n\n        let restAfter = false;\n\n        for(const period of this.periodData)\n        {\n            if(this.minDateObj?.isValid() && this.minDateObj.isAfter(period.dateObj.value) && !this.isSamePeriod(this.minDateObj, period.dateObj.value))\n            {\n                period.disabled = true;\n            }\n\n            if(restAfter || (this.maxDateObj?.isValid() && this.maxDateObj.isBefore(period.dateObj.value) && !this.isSamePeriod(this.maxDateObj, period.dateObj.value)))\n            {\n                restAfter = true;\n                period.disabled = true;\n            }\n        }\n    }\n\n    /**\n     * Sets active date\n     */\n    protected setActive(): void\n    {\n        this.periodData.forEach(itm => itm.active = false);\n\n        if(!this.value)\n        {\n            return;\n        }\n        \n        if(!Array.isArray(this.value))\n        {\n            if(this.value?.isValid())\n            {\n                const value = this.value;\n                const data = this.periodData.find(itm => this.isSamePeriod(itm.dateObj, value.value));\n\n                if(data)\n                {\n                    data.active = true;\n                }\n            }\n        }\n        else\n        {\n            //TODO: support range\n        }\n    }\n}"]}

package/es2020/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js

@@ -4,10 +4,13 @@ import { extend, isBlank, nameof } from '@jscrpt/common';
 import { Subscription } from 'rxjs';
 import { DATE_TIME_PICKER_OPTIONS } from '../../misc/tokens';
 import { DayPickerSAComponent } from '../dayPicker/dayPicker.component';
+import { MonthPickerSAComponent } from '../monthPicker/monthPicker.component';
 import { formatDateTime, parseDateTime } from '../../../../misc/utils';
-import { DateTimeValueFormat } from '../../../../misc/enums';
 import { DateTimeDirective } from '../../../dateTime/directives';
+import { DateValueProvider } from '../../../../services';
 import * as i0 from "@angular/core";
+import * as i1 from "../../../../services";
+//TODO: use mixin for set internal
 /**
  * Text to be displayed when configuration, options are corrupted
  */
@@ -19,6 +22,7 @@ const defaultOptions = {
     defaultPeriod: 'day',
     periodsDefinition: {
         'day': DayPickerSAComponent,
+        'month': MonthPickerSAComponent,
     },
 };
 /**
@@ -26,9 +30,10 @@ const defaultOptions = {
  */
 export class DateTimePickerComponent extends DateTimeDirective {
     //######################### constructor #########################
-    constructor(position, options) {
+    constructor(position, valueProvider, options) {
         super();
         this.position = position;
+        this.valueProvider = valueProvider;
         //######################### public properties - outputs #########################
         /**
          * @inheritdoc
@@ -44,6 +49,18 @@ export class DateTimePickerComponent extends DateTimeDirective {
             throw new Error(CORRUPTED_CONFIG_TEXT);
         }
     }
+    //######################### public properties - inputs #########################
+    /**
+     * @inheritdoc
+     */
+    get value() {
+        return this.ɵValue;
+    }
+    set value(value) {
+        //accepts all available formats
+        this.setInternalValue(value);
+        this.ɵValue = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);
+    }
     /**
      * Options for date time picker
      */
@@ -56,18 +73,47 @@ export class DateTimePickerComponent extends DateTimeDirective {
             this.ɵOptions.periodsDefinition = value.periodsDefinition;
         }
     }
+    //######################### public methods - implementation of OnInit #########################
+    /**
+     * Initialize component
+     */
+    ngOnInit() {
+        //empty value show now
+        if (isBlank(this.value)) {
+            const now = this.dateApi.now();
+            this.showPicker(this.displayedPeriodType, now.value);
+        }
+        else {
+            const val = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue) ?? this.dateApi.now();
+            this.showPicker(this.displayedPeriodType, val.value);
+        }
+    }
     //######################### public methods - implementation of OnChanges #########################
     /**
      * Called when input value changes
      */
     ngOnChanges(changes) {
+        if (!this.component) {
+            return;
+        }
+        const component = this.component.instance;
+        let invalidate = false;
+        if (nameof('maxDateTime') in changes) {
+            component.maxDate = this.maxDateTime;
+            invalidate = true;
+        }
+        if (nameof('minDateTime') in changes) {
+            component.minDate = this.minDateTime;
+            invalidate = true;
+        }
         if (nameof('value') in changes) {
-            //empty value show now
-            if (isBlank(this.value)) {
-                const now = this.dateApi.now();
-                this.showPicker(this.displayedPeriodType, now.value);
-                return;
-            }
+            const val = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue) ?? this.dateApi.now();
+            component.display = val.isValid() ? val.value : this.dateApi.now().value;
+            component.value = this.internalValue;
+            invalidate = true;
+        }
+        if (this.component && invalidate) {
+            this.component.instance.invalidateVisuals();
         }
     }
     //######################### public methods - implementation of OnDestroy #########################
@@ -82,6 +128,38 @@ export class DateTimePickerComponent extends DateTimeDirective {
         this.periodChangesSubscription = null;
     }
     //######################### protected methods #########################
+    /**
+     * Sets internal value and fix lowest time difference
+     * @param value - Value to be set
+     */
+    setInternalValue(value) {
+        this.internalValue = parseDateTime(value, this.dateApi, null, this.customFormat);
+        if (isBlank(this.internalValue)) {
+            return;
+        }
+        //ranged value
+        if (Array.isArray(this.internalValue)) {
+            const [from, to] = this.internalValue;
+            if (from) {
+                const val = this.valueProvider.getValue(from.value, this.customFormat).from;
+                if (val) {
+                    this.internalValue[0] = this.dateApi.getValue(val, this.customFormat);
+                }
+            }
+            if (to) {
+                const val = this.valueProvider.getValue(to.value, this.customFormat).to;
+                if (val) {
+                    this.internalValue[1] = this.dateApi.getValue(val, this.customFormat);
+                }
+            }
+        }
+        else {
+            const val = this.valueProvider.getValue(this.internalValue.value, this.customFormat).from;
+            if (val) {
+                this.internalValue = this.dateApi.getValue(val, this.customFormat);
+            }
+        }
+    }
     /**
      * Shows picker
      * @param type - Type of period that should be displayed
@@ -93,6 +171,7 @@ export class DateTimePickerComponent extends DateTimeDirective {
         }
         //create new component and destroy previous one
         if (!this.component || (this.component && type != this.displayedPeriodType)) {
+            this.displayedPeriodType = type;
             this.periodChangesSubscription?.unsubscribe();
             this.periodChangesSubscription = new Subscription();
             this.component?.destroy();
@@ -102,19 +181,59 @@ export class DateTimePickerComponent extends DateTimeDirective {
                 if (!component) {
                     return;
                 }
-                this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);
+                if (!Array.isArray(component.value)) {
+                    this.setInternalValue(component.value?.value);
+                }
+                else {
+                    //TODO: handle ranges
+                }
+                this.value = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);
                 this.valueChange.emit();
             }));
             this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));
             this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));
         }
         const component = this.component.instance;
-        component.canScaleDown = false,
-            component.canScaleUp = false;
+        component.canScaleDown = this.canScaleDown(),
+            component.canScaleUp = this.canScaleUp();
         component.display = displayDate;
         // component.options
-        //TODO: maybe add support for format!
-        component.value = parseDateTime(this.value, this.dateApi, null, null);
+        component.maxDate = this.maxDateTime;
+        component.minDate = this.minDateTime;
+        component.value = this.internalValue;
+        component.invalidateVisuals();
+    }
+    /**
+     * Gets indication whether current period can be scaled down
+     * @param periods - Array of defined period names
+     * @param index - Index of displayed period
+     */
+    canScaleDown(periods, index) {
+        periods ?? (periods = Object.keys(this.ɵOptions.periodsDefinition));
+        index ?? (index = periods.indexOf(this.displayedPeriodName));
+        if (index < 0) {
+            throw new Error(CORRUPTED_CONFIG_TEXT);
+        }
+        if (index <= 0) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Gets indication whether current period can be scaled up
+     * @param periods - Array of defined period names
+     * @param index - Index of displayed period
+     */
+    canScaleUp(periods, index) {
+        periods ?? (periods = Object.keys(this.ɵOptions.periodsDefinition));
+        index ?? (index = periods.indexOf(this.displayedPeriodName));
+        if (index < 0) {
+            throw new Error(CORRUPTED_CONFIG_TEXT);
+        }
+        if (index + 1 >= periods.length) {
+            return false;
+        }
+        return true;
     }
     /**
      * Gets type that is above current period picker
@@ -122,15 +241,11 @@ export class DateTimePickerComponent extends DateTimeDirective {
     getUpperType() {
         const periods = Object.keys(this.ɵOptions.periodsDefinition);
         const index = periods.indexOf(this.displayedPeriodName);
-        if (index < 0) {
-            throw new Error(CORRUPTED_CONFIG_TEXT);
-        }
-        if (index >= periods.length) {
+        if (!this.canScaleUp(periods, index)) {
             return this.displayedPeriodType;
         }
         this.displayedPeriodName = periods[index + 1];
-        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];
-        return this.displayedPeriodType;
+        return this.ɵOptions.periodsDefinition[this.displayedPeriodName];
     }
     /**
      * Gets type that is below current period picker
@@ -138,18 +253,14 @@ export class DateTimePickerComponent extends DateTimeDirective {
     getLowerType() {
         const periods = Object.keys(this.ɵOptions.periodsDefinition);
         const index = periods.indexOf(this.displayedPeriodName);
-        if (index < 0) {
-            throw new Error(CORRUPTED_CONFIG_TEXT);
-        }
-        if (index <= 0) {
+        if (!this.canScaleDown(periods, index)) {
             return this.displayedPeriodType;
         }
         this.displayedPeriodName = periods[index - 1];
-        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];
-        return this.displayedPeriodType;
+        return this.ɵOptions.periodsDefinition[this.displayedPeriodName];
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: DATE_TIME_PICKER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: i1.DateValueProvider }, { token: DATE_TIME_PICKER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DateTimePickerComponent, selector: "date-time-picker", inputs: { value: "value", options: "options" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "pickerContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -157,7 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POSITION]
-                }] }, { type: undefined, decorators: [{
+                }] }, { type: i1.DateValueProvider }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_TIME_PICKER_OPTIONS]
                 }, {

package/es2020/src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateTimePicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Type, EventEmitter, Output, Input, OnChanges, SimpleChanges, Inject, Optional, OnDestroy, ComponentRef} from '@angular/core';\nimport {Position, POSITION} from '@anglr/common';\nimport {extend, isBlank, nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue} from '../../../../interfaces';\nimport {DateTimeInputOutputValue} from '../../../../misc/types';\nimport {DATE_TIME_PICKER_OPTIONS} from '../../misc/tokens';\nimport {DayPickerSAComponent} from '../dayPicker/dayPicker.component';\nimport {DateTimePickerOptions} from './dateTimePicker.interface';\nimport {DateTimePicker} from '../../interfaces';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeValueFormat} from '../../../../misc/enums';\nimport {DateTimeDirective} from '../../../dateTime/directives';\n\n/**\n * Text to be displayed when configuration, options are corrupted\n */\nconst CORRUPTED_CONFIG_TEXT = 'DateTime: Corrupted configuration for DateTimePicker!';\n\n/**\n * Default options for date time picker\n */\nconst defaultOptions: DateTimePickerOptions = \n{\n    defaultPeriod: 'day',\n    periodsDefinition:\n    {\n        'day': DayPickerSAComponent,\n    },\n};\n\n/**\n * Component used for displaying date time picker\n */\n@Component(\n{\n    selector: 'date-time-picker',\n    templateUrl: 'dateTimePicker.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimePickerComponent<TDate = unknown> extends DateTimeDirective<TDate> implements DateTimeInputValue<TDate>, OnChanges, OnDestroy\n{\n    //######################### protected properties #########################\n    \n    /**\n     * Subscription for changes in date time period picker\n     */\n    protected periodChangesSubscription: Subscription|undefined|null;\n\n    /**\n     * Options for date time picker\n     */\n    protected ɵOptions: DateTimePickerOptions<TDate>;\n\n    /**\n     * Currently displayed period type\n     */\n    protected displayedPeriodType: Type<DateTimePicker<TDate>>;\n\n    /**\n     * Name of period which is currently displayed\n     */\n    protected displayedPeriodName: string;\n\n    /**\n     * Instance of created date time period picker\n     */\n    protected component: ComponentRef<DateTimePicker<TDate>>|undefined|null;\n    \n    //######################### protected properties - children #########################\n\n    /**\n     * Container used for displaying pickers for specific date time part\n     */\n    @ViewChild('container', {read: ViewContainerRef, static: true})\n    protected pickerContainer: ViewContainerRef|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * @inheritdoc\n     */\n    @Input()\n    public value: DateTimeInputOutputValue<TDate>|undefined|null;\n\n    /**\n     * Options for date time picker\n     */\n    @Input()\n    public get options(): Partial<DateTimePickerOptions<TDate>>\n    {\n        return this.ɵOptions;\n    }\n    public set options(value: Partial<DateTimePickerOptions<TDate>>)\n    {\n        this.ɵOptions = extend(true, {}, defaultOptions, value);\n\n        if(value?.periodsDefinition)\n        {\n            this.ɵOptions.periodsDefinition = value.periodsDefinition;\n        }\n    }\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * @inheritdoc\n     */\n    @Output()\n    public valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n    //######################### constructor #########################\n    constructor(@Inject(POSITION) protected position: Position,\n                @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\n    {\n        super();\n\n        this.ɵOptions = extend(true, {}, defaultOptions, options);\n        \n        if(options?.periodsDefinition)\n        {\n            this.ɵOptions.periodsDefinition = options.periodsDefinition;\n        }\n\n        this.displayedPeriodName = this.ɵOptions.defaultPeriod;\n        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n        if(!this.displayedPeriodType)\n        {\n            throw new Error(CORRUPTED_CONFIG_TEXT);\n        }\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<DateTimePickerComponent>('value') in changes)\n        {\n            //empty value show now\n            if(isBlank(this.value))\n            {\n                const now = this.dateApi.now();\n\n                this.showPicker(this.displayedPeriodType, now.value);\n\n                return;\n            }\n\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public override ngOnDestroy(): void\n    {\n        super.ngOnDestroy();\n\n        this.component?.destroy();\n        this.component = null;\n\n        this.periodChangesSubscription?.unsubscribe();\n        this.periodChangesSubscription = null;\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Shows picker\n     * @param type - Type of period that should be displayed\n     * @param displayDate - Display date to be shown\n     */\n    protected showPicker(type: Type<DateTimePicker<TDate>>, displayDate: TDate): void\n    {\n        if(!this.pickerContainer)\n        {\n            return;\n        }\n\n        //create new component and destroy previous one\n        if(!this.component || (this.component && type != this.displayedPeriodType))\n        {\n            this.periodChangesSubscription?.unsubscribe();\n            this.periodChangesSubscription = new Subscription();\n            this.component?.destroy();\n            this.component = this.pickerContainer.createComponent(type);\n\n            this.periodChangesSubscription.add(this.component.instance.valueChange.subscribe(() =>\n            {\n                const component = this.component?.instance;\n\n                if(!component)\n                {\n                    return;\n                }\n\n                this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);\n                this.valueChange.emit();\n            }));\n\n            this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));\n            this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));\n        }\n\n        const component = this.component.instance;\n\n        component.canScaleDown = false,\n        component.canScaleUp = false;\n        component.display = displayDate;\n        // component.options\n        //TODO: maybe add support for format!\n        component.value = parseDateTime(this.value, this.dateApi, null, null);\n    }\n\n    /**\n     * Gets type that is above current period picker\n     */\n    protected getUpperType(): Type<DateTimePicker<TDate>>\n    {\n        const periods = Object.keys(this.ɵOptions.periodsDefinition);\n        const index = periods.indexOf(this.displayedPeriodName);\n\n        if(index < 0)\n        {\n            throw new Error(CORRUPTED_CONFIG_TEXT);\n        }\n\n        if(index >= periods.length)\n        {\n            return this.displayedPeriodType;\n        }\n\n        this.displayedPeriodName = periods[index + 1];\n        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n        return this.displayedPeriodType;\n    }\n\n    /**\n     * Gets type that is below current period picker\n     */\n    protected getLowerType(): Type<DateTimePicker<TDate>>\n    {\n        const periods = Object.keys(this.ɵOptions.periodsDefinition);\n        const index = periods.indexOf(this.displayedPeriodName);\n\n        if(index < 0)\n        {\n            throw new Error(CORRUPTED_CONFIG_TEXT);\n        }\n\n        if(index <= 0)\n        {\n            return this.displayedPeriodType;\n        }\n\n        this.displayedPeriodName = periods[index - 1];\n        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n        return this.displayedPeriodType;\n    }\n}","<ng-container #container></ng-container>"]}
+{"version":3,"file":"dateTimePicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dateTimePicker/dateTimePicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, ViewChild, ViewContainerRef, Type, EventEmitter, Output, Input, OnChanges, SimpleChanges, Inject, Optional, OnDestroy, ComponentRef, OnInit} from '@angular/core';\nimport {Position, POSITION} from '@anglr/common';\nimport {extend, isBlank, nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue} from '../../../../interfaces';\nimport {DateTimeInputOutputValue, DateTimeObjectValue} from '../../../../misc/types';\nimport {DATE_TIME_PICKER_OPTIONS} from '../../misc/tokens';\nimport {DayPickerSAComponent} from '../dayPicker/dayPicker.component';\nimport {MonthPickerSAComponent} from '../monthPicker/monthPicker.component';\nimport {DateTimePickerOptions} from './dateTimePicker.interface';\nimport {DateTimePicker} from '../../interfaces';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeDirective} from '../../../dateTime/directives';\nimport {DateValueProvider} from '../../../../services';\n\n//TODO: use mixin for set internal\n\n/**\n * Text to be displayed when configuration, options are corrupted\n */\nconst CORRUPTED_CONFIG_TEXT = 'DateTime: Corrupted configuration for DateTimePicker!';\n\n/**\n * Default options for date time picker\n */\nconst defaultOptions: DateTimePickerOptions = \n{\n    defaultPeriod: 'day',\n    periodsDefinition:\n    {\n        'day': DayPickerSAComponent,\n        'month': MonthPickerSAComponent,\n    },\n};\n\n/**\n * Component used for displaying date time picker\n */\n@Component(\n{\n    selector: 'date-time-picker',\n    templateUrl: 'dateTimePicker.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimePickerComponent<TDate = unknown> extends DateTimeDirective<TDate> implements DateTimeInputValue<TDate>, OnInit, OnChanges, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Current value of date time, could be string, unix timestamp, Date, TDate object, or ranged DateTimeValue\n     */\n    protected ɵValue: DateTimeInputOutputValue<TDate>|undefined|null;\n\n    /**\n     * Internal representation of current date time value\n     */\n    protected internalValue: DateTimeObjectValue<TDate>|undefined|null;\n    \n    /**\n     * Subscription for changes in date time period picker\n     */\n    protected periodChangesSubscription: Subscription|undefined|null;\n\n    /**\n     * Options for date time picker\n     */\n    protected ɵOptions: DateTimePickerOptions<TDate>;\n\n    /**\n     * Currently displayed period type\n     */\n    protected displayedPeriodType: Type<DateTimePicker<TDate>>;\n\n    /**\n     * Name of period which is currently displayed\n     */\n    protected displayedPeriodName: string;\n\n    /**\n     * Instance of created date time period picker\n     */\n    protected component: ComponentRef<DateTimePicker<TDate>>|undefined|null;\n    \n    //######################### protected properties - children #########################\n\n    /**\n     * Container used for displaying pickers for specific date time part\n     */\n    @ViewChild('container', {read: ViewContainerRef, static: true})\n    protected pickerContainer: ViewContainerRef|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * @inheritdoc\n     */\n    @Input()\n    public get value(): DateTimeInputOutputValue<TDate>|undefined|null\n    {\n        return this.ɵValue;\n    }\n    public set value(value: DateTimeInputOutputValue<TDate>|undefined|null)\n    {\n        //accepts all available formats\n        this.setInternalValue(value);\n        this.ɵValue = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);\n    }\n\n    /**\n     * Options for date time picker\n     */\n    @Input()\n    public get options(): Partial<DateTimePickerOptions<TDate>>\n    {\n        return this.ɵOptions;\n    }\n    public set options(value: Partial<DateTimePickerOptions<TDate>>)\n    {\n        this.ɵOptions = extend(true, {}, defaultOptions, value);\n\n        if(value?.periodsDefinition)\n        {\n            this.ɵOptions.periodsDefinition = value.periodsDefinition;\n        }\n    }\n\n    //######################### public properties - outputs #########################\n\n    /**\n     * @inheritdoc\n     */\n    @Output()\n    public valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n    //######################### constructor #########################\n    constructor(@Inject(POSITION) protected position: Position,\n                protected valueProvider: DateValueProvider<TDate>,\n                @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\n    {\n        super();\n\n        this.ɵOptions = extend(true, {}, defaultOptions, options);\n        \n        if(options?.periodsDefinition)\n        {\n            this.ɵOptions.periodsDefinition = options.periodsDefinition;\n        }\n\n        this.displayedPeriodName = this.ɵOptions.defaultPeriod;\n        this.displayedPeriodType = this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n\n        if(!this.displayedPeriodType)\n        {\n            throw new Error(CORRUPTED_CONFIG_TEXT);\n        }\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n    \n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        //empty value show now\n        if(isBlank(this.value))\n        {\n            const now = this.dateApi.now();\n\n            this.showPicker(this.displayedPeriodType, now.value);\n        }\n        else\n        {\n            const val = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue) ?? this.dateApi.now();\n\n            this.showPicker(this.displayedPeriodType, val.value);\n        }\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(!this.component)\n        {\n            return;\n        }\n\n        const component = this.component.instance;\n        let invalidate: boolean = false;\n\n        if(nameof<DateTimePickerComponent>('maxDateTime') in changes)\n        {\n            component.maxDate = this.maxDateTime;\n            invalidate = true;\n        }\n\n        if(nameof<DateTimePickerComponent>('minDateTime') in changes)\n        {\n            component.minDate = this.minDateTime;\n            invalidate = true;\n        }\n\n        if(nameof<DateTimePickerComponent>('value') in changes)\n        {\n            const val = (Array.isArray(this.internalValue) ? this.internalValue[0] : this.internalValue) ?? this.dateApi.now();\n\n            component.display = val.isValid() ? val.value : this.dateApi.now().value;\n            component.value = this.internalValue;\n            invalidate = true;\n        }\n\n        if(this.component && invalidate)\n        {\n            this.component.instance.invalidateVisuals();\n        }\n    }\n\n    //######################### public methods - implementation of OnDestroy #########################\n    \n    /**\n     * Called when component is destroyed\n     */\n    public override ngOnDestroy(): void\n    {\n        super.ngOnDestroy();\n\n        this.component?.destroy();\n        this.component = null;\n\n        this.periodChangesSubscription?.unsubscribe();\n        this.periodChangesSubscription = null;\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Sets internal value and fix lowest time difference\n     * @param value - Value to be set\n     */\n    protected setInternalValue(value: DateTimeInputOutputValue<TDate>|undefined|null): void\n    {\n        this.internalValue = parseDateTime(value, this.dateApi, null, this.customFormat);\n\n        if(isBlank(this.internalValue))\n        {\n            return;\n        }\n\n        //ranged value\n        if(Array.isArray(this.internalValue))\n        {\n            const [from, to] = this.internalValue;\n\n            if(from)\n            {\n                const val = this.valueProvider.getValue(from.value, this.customFormat).from;\n\n                if(val)\n                {\n                    this.internalValue[0] = this.dateApi.getValue(val, this.customFormat);\n                }\n            }\n\n            if(to)\n            {\n                const val = this.valueProvider.getValue(to.value, this.customFormat).to;\n\n                if(val)\n                {\n                    this.internalValue[1] = this.dateApi.getValue(val, this.customFormat);\n                }\n            }\n        }\n        else\n        {\n            const val = this.valueProvider.getValue(this.internalValue.value, this.customFormat).from;\n\n            if(val)\n            {\n                this.internalValue = this.dateApi.getValue(val, this.customFormat);\n            }\n        }\n    }\n\n    /**\n     * Shows picker\n     * @param type - Type of period that should be displayed\n     * @param displayDate - Display date to be shown\n     */\n    protected showPicker(type: Type<DateTimePicker<TDate>>, displayDate: TDate): void\n    {\n        if(!this.pickerContainer)\n        {\n            return;\n        }\n\n        //create new component and destroy previous one\n        if(!this.component || (this.component && type != this.displayedPeriodType))\n        {\n            this.displayedPeriodType = type;\n            this.periodChangesSubscription?.unsubscribe();\n            this.periodChangesSubscription = new Subscription();\n            this.component?.destroy();\n            this.component = this.pickerContainer.createComponent(type);\n\n            this.periodChangesSubscription.add(this.component.instance.valueChange.subscribe(() =>\n            {\n                const component = this.component?.instance;\n\n                if(!component)\n                {\n                    return;\n                }\n\n                if(!Array.isArray(component.value))\n                {\n                    this.setInternalValue(component.value?.value);\n                }\n                else\n                {\n                    //TODO: handle ranges\n                }\n\n                this.value = formatDateTime(this.internalValue, this.valueFormat, this.customFormat);\n                this.valueChange.emit();\n            }));\n\n            this.periodChangesSubscription.add(this.component.instance.scaleUp.subscribe(date => this.showPicker(this.getUpperType(), date)));\n            this.periodChangesSubscription.add(this.component.instance.scaleDown.subscribe(date => this.showPicker(this.getLowerType(), date)));\n        }\n\n        const component = this.component.instance;\n\n        component.canScaleDown = this.canScaleDown(),\n        component.canScaleUp = this.canScaleUp();\n        component.display = displayDate;\n        // component.options\n        component.maxDate = this.maxDateTime;\n        component.minDate = this.minDateTime;\n        component.value = this.internalValue;\n        component.invalidateVisuals();\n    }\n\n    /**\n     * Gets indication whether current period can be scaled down\n     * @param periods - Array of defined period names\n     * @param index - Index of displayed period\n     */\n    protected canScaleDown(periods?: string[], index?: number): boolean\n    {\n        periods ??= Object.keys(this.ɵOptions.periodsDefinition);\n        index ??= periods.indexOf(this.displayedPeriodName);\n\n        if(index < 0)\n        {\n            throw new Error(CORRUPTED_CONFIG_TEXT);\n        }\n\n        if(index <= 0)\n        {\n            return false;\n        }\n\n        return true;\n    }\n\n    /**\n     * Gets indication whether current period can be scaled up\n     * @param periods - Array of defined period names\n     * @param index - Index of displayed period\n     */\n    protected canScaleUp(periods?: string[], index?: number): boolean\n    {\n        periods ??= Object.keys(this.ɵOptions.periodsDefinition);\n        index ??= periods.indexOf(this.displayedPeriodName);\n\n        if(index < 0)\n        {\n            throw new Error(CORRUPTED_CONFIG_TEXT);\n        }\n\n        if(index + 1 >= periods.length)\n        {\n            return false;\n        }\n\n        return true;\n    }\n\n    /**\n     * Gets type that is above current period picker\n     */\n    protected getUpperType(): Type<DateTimePicker<TDate>>\n    {\n        const periods = Object.keys(this.ɵOptions.periodsDefinition);\n        const index = periods.indexOf(this.displayedPeriodName);\n\n        if(!this.canScaleUp(periods, index))\n        {\n            return this.displayedPeriodType;\n        }\n\n        this.displayedPeriodName = periods[index + 1];\n\n        return this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n    }\n\n    /**\n     * Gets type that is below current period picker\n     */\n    protected getLowerType(): Type<DateTimePicker<TDate>>\n    {\n        const periods = Object.keys(this.ɵOptions.periodsDefinition);\n        const index = periods.indexOf(this.displayedPeriodName);\n\n        if(!this.canScaleDown(periods, index))\n        {\n            return this.displayedPeriodType;\n        }\n\n        this.displayedPeriodName = periods[index - 1];\n\n        return this.ɵOptions.periodsDefinition[this.displayedPeriodName];\n    }\n}","<ng-container #container></ng-container>"]}