@anglr/datetime 5.0.0-beta.20221019093146 → 5.0.0-beta.20221019112435

package/changelog.md

@@ -109,6 +109,7 @@
         - `showPicker` hides date time picker
         - `hidePicker` shows date time picker
 - new `DateTimePickerComponent` directive, which is component used for displaying date time picker
+    - **extends** `DateTimeRestrictedBase`
     - **implements**
         - `DateTimeInputValue`
         - `OnChanges`
@@ -123,11 +124,13 @@
         - `value` value of date time picker
         - `options` options for date time picker period
         - `display` date that describes which date should be displayed
-        - `canGoUp` indication whether picker can display lower granularity picker
-        - `canGoDown` indication whether picker can display higher granularity picker
+        - `maxDate` max allowed date
+        - `minDate` min allowed date to be selected
+        - `canScaleUp` indication whether picker can display scale date time period up
+        - `canScaleDown` indication whether picker can display scale date time period down
         - `valueChange` occurs when date time picker value changes
-        - `goUp` occurs when period with lower granularity should be displayed
-        - `goDown` occurs when period with higher granularity should be displayed
+        - `scaleUp` occurs when period should be scaled up
+        - `scaleDown` occurs when period should be scaled down
 - new `DateTimePickerDirectiveOptions` directive, which is defintion of date time picker directive options
     - **properties**
         - `closeOnValueSelect` indication whether close picker on value selection
@@ -147,6 +150,8 @@
         - `defaultPeriod` name of default period for picker that is displayed after opening
 - updated `DateApiObject` interface
     - new `unixTimestamp` method, that gets value of date time as unix timestamp
+- updated `DateFormatPipe`
+    - improved typings for `transform`
 - *subpackage* `@anglr/datetime/moment`
     - updated `MomentDateApi`
         - now implements also new `unixTimestamp`
@@ -175,6 +180,8 @@
 - updated `DateTimePickerComponent` renamed to `DateTimePickerLegacyComponent`
 - updated `DateTimePicker` renamed to `DateTimeLegacyPicker`
 - updated `DateTimePickerOptions` renamed to `DateTimePickerLegacyOptions`
+- updated `DateFormatPipe`
+    - typings that allows custom format must use `customFormat` new parameter
 
 ## Version 4.0.0 (2022-10-14)
 

package/es2015/src/legacy/picker/components/dayPicker/dayPicker.component.js

@@ -144,7 +144,6 @@ export class DateTimeDayPickerComponent extends PickerBaseComponent {
                 const data = {
                     active: false,
                     disabled: false,
-                    betweenActive: false,
                     date: this.displayDate.value,
                     otherMonth: otherMonth,
                     today: this.displayDate.isSameDay(today),

package/es2015/src/legacy/picker/components/dayPicker/dayPicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.ts","../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef} from '@angular/core';\nimport {extend} from '@jscrpt/common';\n\nimport {DateTimeValue} from '../../../../interfaces/dateTime/datetime.interface';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {DateApi, DateApiObject} from '../../../../services/dateApi/dateApi.interface';\nimport {DateTimeLegacyPicker, DayData, PeriodData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {DayPickerCssClasses} from './dayPicker.interfaces';\n\n/**\n * Default styles for picker\n */\nconst defaultStyles: DayPickerCssClasses =\n{\n    periodSelection: 'period',\n    previousPeriod: 'fas fa-angle-left clickable',\n    nextPeriod: 'fas fa-angle-right clickable',\n    periodValue: 'period-value',\n    periodData: 'period-data',\n    periodDatum: 'period-datum clickable',\n    weekdayName: 'weekday',\n    clickable: 'clickable'\n};\n\n/**\n * Component used for displaying day picker\n */\n@Component(\n{\n    selector: 'date-time-day-picker',\n    templateUrl: 'dayPicker.component.html',\n    styleUrls: ['dayPicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeDayPickerComponent<TDate = any> extends PickerBaseComponent<TDate, DayData<TDate>, DayPickerCssClasses> implements DateTimeLegacyPicker<TDate, DayPickerCssClasses>\n{\n    //######################### protected fields #########################\n\n    /**\n     * Stored this picker month data\n     */\n    protected _thisMonthData: DayData<TDate>[] = [];\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Names of days\n     * @internal\n     */\n    public weekdays: string[] = [];\n\n    /**\n     * Value used for displaying time\n     */\n    public get timeValue(): DateTimeValue<TDate> | null\n    {\n        return this._value;\n    }\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) dateApi: DateApi<TDate>,\n                changeDetector: ChangeDetectorRef)\n    {\n        super(dateApi, changeDetector);\n\n        this.cssClasses = extend(true, {}, defaultStyles);\n        this.weekdays = this._dateApi.weekdaysShort();\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Changes displayed period to \"lower\" period\n     * @param event - Event that occured\n     * @internal\n     */\n    public goDown(event: Event): void\n    {\n        event.preventDefault();\n\n        if(!this.canGoDown)\n        {\n            return;\n        }\n\n        if(this.displayDate)\n        {\n            this._scaleDown.next(this.displayDate.value);\n        }\n    }\n\n    /**\n     * Changes displayed month to next month\n     * @param event - Event that occured\n     * @internal\n     */\n    public nextMonth(event: Event): void\n    {\n        event.preventDefault();\n        this.displayDate!.addMonths(1);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Changes displayed month to previous month\n     * @param event - Event that occured\n     * @internal\n     */\n    public previousMonth(event: Event): void\n    {\n        event.preventDefault();\n        this.displayDate!.subtractMonths(1);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Selects day\n     * @param event - Event that occured\n     * @param day - Selects day \n     * @internal\n     */\n    public override select(event: Event, day: DayData<TDate>): void\n    {\n        event.preventDefault();\n\n        if(day.disabled)\n        {\n            return;\n        }\n\n        this._setPeriod(day);\n\n        //when time picker is enabled\n        if(this.canGoDown)\n        {\n            const from = this._dateApi\n                .getValue(day.date)\n                .hour(this._originalHour)\n                .minute(this._originalMinute);\n\n            const to = this._dateApi\n                .getValue(this._endOfPeriod(day))\n                .hour(this._originalHour)\n                .minute(this._originalMinute);\n\n            this._value =\n            {\n                from: from.value,\n                to: to.value\n            };\n        }\n        //no time picker\n        else\n        {\n            this._value =\n            {\n                from: day.date,\n                to: this._endOfPeriod(day)\n            };\n        }\n        \n        this._valueChange.next();\n\n        if(day.otherMonth)\n        {\n            this.display(this._dateApi.getValue(day.date));\n        }\n    }\n\n    //######################### public methods - implementation of DateTimePicker #########################\n\n    /**\n     * Set displays date to be displayed\n     * @param value - Value that identifies period that is going to be displayed\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n        this.periodData = [];\n        this._thisMonthData = [];\n        const currentMonthDate = this.displayDate.value;\n        const today = this._dateApi.now().value;\n\n        this.displayDate\n            .startOfMonth()\n            .updateOriginal()\n            .startOfWeek();\n\n        do\n        {\n            for(let x = 0; x < 7; x++)\n            {\n                const day = this.displayDate.dayOfMonth();\n                const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);\n                const data = \n                {\n                    active: false,\n                    disabled: false,\n                    betweenActive: false,\n                    date: this.displayDate.value,\n                    otherMonth: otherMonth,\n                    today: this.displayDate.isSameDay(today),\n                    weekend: this.displayDate.isWeekend(),\n                    day: day\n                };\n\n                this.periodData.push(data);\n\n                if(!otherMonth)\n                {\n                    this._thisMonthData.push(data);\n                }\n\n                this.displayDate.addDays(1);\n            }\n        }\n        while(this.displayDate.isSameMonth(currentMonthDate));\n\n        this.displayDate.resetOriginal();\n\n        //can go down set minutes and hours\n        if(this.canGoDown)\n        {\n            this.displayDate\n                .minute(this._originalMinute)\n                .hour(this._originalHour);\n        }\n\n        this._updateMinMax();\n\n        //set value if exists\n        if(this._value && (this.displayDate.isSameMonth(this._value.from!) || this.displayDate.isSameMonth(this._value.to!)))\n        {\n            this.setValue(this._value);\n        }\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Obtains end of period\n     * @param period - Period for which should be end obtained\n     */\n    protected _endOfPeriod(period: PeriodData<TDate>): TDate\n    {\n        return this._dateApi.getValue(period.date).endOfDay().value;\n    }\n\n    /**\n     * Tests whether provided value is in same period as displayed picker\n     * @param val - Tested value for same period as displayed picker\n     */\n    protected _isSamePeriodAsDisplayed(val: DateApiObject<TDate>): boolean\n    {\n        return val.isSameMonth(this.displayDate!.value);\n    }\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 _isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean\n    {\n        return val.isSameDay(target);\n    }\n\n    /**\n     * Gets period data for specified value\n     * @param val - Value for which is period data obtained\n     */\n    protected _getPeriodData(val: DateApiObject<TDate>): PeriodData<TDate>\n    {\n        return this._thisMonthData[val.dayOfMonth() - 1];\n    }\n}","<div [ngClass]=\"cssClasses.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canGoDown\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{timeValue?.from | dateFormat: 'time'}}</div>\r\n</div>"]}
+{"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.ts","../../../../../../src/legacy/picker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject, ChangeDetectorRef} from '@angular/core';\nimport {extend} from '@jscrpt/common';\n\nimport {DateTimeValue} from '../../../../interfaces/dateTime/datetime.interface';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {DateApi, DateApiObject} from '../../../../services/dateApi/dateApi.interface';\nimport {DateTimeLegacyPicker, DayData, PeriodData} from '../../misc/datetimePicker.interface';\nimport {PickerBaseComponent} from '../pickerBase.component';\nimport {DayPickerCssClasses} from './dayPicker.interfaces';\n\n/**\n * Default styles for picker\n */\nconst defaultStyles: DayPickerCssClasses =\n{\n    periodSelection: 'period',\n    previousPeriod: 'fas fa-angle-left clickable',\n    nextPeriod: 'fas fa-angle-right clickable',\n    periodValue: 'period-value',\n    periodData: 'period-data',\n    periodDatum: 'period-datum clickable',\n    weekdayName: 'weekday',\n    clickable: 'clickable'\n};\n\n/**\n * Component used for displaying day picker\n */\n@Component(\n{\n    selector: 'date-time-day-picker',\n    templateUrl: 'dayPicker.component.html',\n    styleUrls: ['dayPicker.component.css'],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DateTimeDayPickerComponent<TDate = any> extends PickerBaseComponent<TDate, DayData<TDate>, DayPickerCssClasses> implements DateTimeLegacyPicker<TDate, DayPickerCssClasses>\n{\n    //######################### protected fields #########################\n\n    /**\n     * Stored this picker month data\n     */\n    protected _thisMonthData: DayData<TDate>[] = [];\n\n    //######################### public properties - template bindings #########################\n\n    /**\n     * Names of days\n     * @internal\n     */\n    public weekdays: string[] = [];\n\n    /**\n     * Value used for displaying time\n     */\n    public get timeValue(): DateTimeValue<TDate> | null\n    {\n        return this._value;\n    }\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) dateApi: DateApi<TDate>,\n                changeDetector: ChangeDetectorRef)\n    {\n        super(dateApi, changeDetector);\n\n        this.cssClasses = extend(true, {}, defaultStyles);\n        this.weekdays = this._dateApi.weekdaysShort();\n    }\n\n    //######################### public methods - template bindings #########################\n\n    /**\n     * Changes displayed period to \"lower\" period\n     * @param event - Event that occured\n     * @internal\n     */\n    public goDown(event: Event): void\n    {\n        event.preventDefault();\n\n        if(!this.canGoDown)\n        {\n            return;\n        }\n\n        if(this.displayDate)\n        {\n            this._scaleDown.next(this.displayDate.value);\n        }\n    }\n\n    /**\n     * Changes displayed month to next month\n     * @param event - Event that occured\n     * @internal\n     */\n    public nextMonth(event: Event): void\n    {\n        event.preventDefault();\n        this.displayDate!.addMonths(1);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Changes displayed month to previous month\n     * @param event - Event that occured\n     * @internal\n     */\n    public previousMonth(event: Event): void\n    {\n        event.preventDefault();\n        this.displayDate!.subtractMonths(1);\n\n        this.display(this.displayDate!);\n    }\n\n    /**\n     * Selects day\n     * @param event - Event that occured\n     * @param day - Selects day \n     * @internal\n     */\n    public override select(event: Event, day: DayData<TDate>): void\n    {\n        event.preventDefault();\n\n        if(day.disabled)\n        {\n            return;\n        }\n\n        this._setPeriod(day);\n\n        //when time picker is enabled\n        if(this.canGoDown)\n        {\n            const from = this._dateApi\n                .getValue(day.date)\n                .hour(this._originalHour)\n                .minute(this._originalMinute);\n\n            const to = this._dateApi\n                .getValue(this._endOfPeriod(day))\n                .hour(this._originalHour)\n                .minute(this._originalMinute);\n\n            this._value =\n            {\n                from: from.value,\n                to: to.value\n            };\n        }\n        //no time picker\n        else\n        {\n            this._value =\n            {\n                from: day.date,\n                to: this._endOfPeriod(day)\n            };\n        }\n        \n        this._valueChange.next();\n\n        if(day.otherMonth)\n        {\n            this.display(this._dateApi.getValue(day.date));\n        }\n    }\n\n    //######################### public methods - implementation of DateTimePicker #########################\n\n    /**\n     * Set displays date to be displayed\n     * @param value - Value that identifies period that is going to be displayed\n     */\n    public display(value: DateApiObject<TDate>): void\n    {\n        this.displayDate = value;\n        this.periodData = [];\n        this._thisMonthData = [];\n        const currentMonthDate = this.displayDate.value;\n        const today = this._dateApi.now().value;\n\n        this.displayDate\n            .startOfMonth()\n            .updateOriginal()\n            .startOfWeek();\n\n        do\n        {\n            for(let x = 0; x < 7; x++)\n            {\n                const day = this.displayDate.dayOfMonth();\n                const otherMonth = !this.displayDate.isSameMonth(currentMonthDate);\n                const data = \n                {\n                    active: false,\n                    disabled: false,\n                    date: this.displayDate.value,\n                    otherMonth: otherMonth,\n                    today: this.displayDate.isSameDay(today),\n                    weekend: this.displayDate.isWeekend(),\n                    day: day\n                };\n\n                this.periodData.push(data);\n\n                if(!otherMonth)\n                {\n                    this._thisMonthData.push(data);\n                }\n\n                this.displayDate.addDays(1);\n            }\n        }\n        while(this.displayDate.isSameMonth(currentMonthDate));\n\n        this.displayDate.resetOriginal();\n\n        //can go down set minutes and hours\n        if(this.canGoDown)\n        {\n            this.displayDate\n                .minute(this._originalMinute)\n                .hour(this._originalHour);\n        }\n\n        this._updateMinMax();\n\n        //set value if exists\n        if(this._value && (this.displayDate.isSameMonth(this._value.from!) || this.displayDate.isSameMonth(this._value.to!)))\n        {\n            this.setValue(this._value);\n        }\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Obtains end of period\n     * @param period - Period for which should be end obtained\n     */\n    protected _endOfPeriod(period: PeriodData<TDate>): TDate\n    {\n        return this._dateApi.getValue(period.date).endOfDay().value;\n    }\n\n    /**\n     * Tests whether provided value is in same period as displayed picker\n     * @param val - Tested value for same period as displayed picker\n     */\n    protected _isSamePeriodAsDisplayed(val: DateApiObject<TDate>): boolean\n    {\n        return val.isSameMonth(this.displayDate!.value);\n    }\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 _isSamePeriod(val: DateApiObject<TDate>, target: TDate): boolean\n    {\n        return val.isSameDay(target);\n    }\n\n    /**\n     * Gets period data for specified value\n     * @param val - Value for which is period data obtained\n     */\n    protected _getPeriodData(val: DateApiObject<TDate>): PeriodData<TDate>\n    {\n        return this._thisMonthData[val.dayOfMonth() - 1];\n    }\n}","<div [ngClass]=\"cssClasses.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canGoDown\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{timeValue?.from | dateFormat: 'time'}}</div>\r\n</div>"]}

package/es2015/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     * Indication that range is selected and this day is between selected dates\n     */\n    betweenActive: boolean;\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    /**\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"]}

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

@@ -10,21 +10,21 @@ export class DateTimePeriodPickerBase {
          */
         this.valueChangeSubject = new Subject();
         /**
-         * Subject used for emitting of go up
+         * Subject used for scaling up
          */
-        this.goUpSubject = new Subject();
+        this.scaleUpSubject = new Subject();
         /**
-         * Subject used for emitting of go down
+         * Subject used for scaling down
          */
-        this.goDownSubject = new Subject();
+        this.scaleDownSubject = new Subject();
         /**
          * @inheritdoc
          */
-        this.canGoUp = false;
+        this.canScaleUp = false;
         /**
          * @inheritdoc
          */
-        this.canGoDown = false;
+        this.canScaleDown = false;
     }
     /**
      * @inheritdoc
@@ -35,14 +35,14 @@ export class DateTimePeriodPickerBase {
     /**
      * @inheritdoc
      */
-    get goUp() {
-        return this.goUpSubject.asObservable();
+    get scaleUp() {
+        return this.scaleUpSubject.asObservable();
     }
     /**
      * @inheritdoc
      */
-    get goDown() {
-        return this.goDownSubject.asObservable();
+    get scaleDown() {
+        return this.scaleDownSubject.asObservable();
     }
 }
 //# sourceMappingURL=dateTimePeriodPickerBase.js.map

package/es2015/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;AAKzC;;GAEG;AACH,MAAM,OAAgB,wBAAwB;IAA9C;QAEI,0EAA0E;QAE1E;;WAEG;QACO,uBAAkB,GAAkB,IAAI,OAAO,EAAQ,CAAC;QAElE;;WAEG;QACO,gBAAW,GAAmB,IAAI,OAAO,EAAS,CAAC;QAE7D;;WAEG;QACO,kBAAa,GAAmB,IAAI,OAAO,EAAS,CAAC;QAmB/D;;WAEG;QACI,YAAO,GAAY,KAAK,CAAC;QAEhC;;WAEG;QACI,cAAS,GAAY,KAAK,CAAC;IAyBtC,CAAC;IAvBG;;OAEG;IACH,IAAW,WAAW;QAElB,OAAO,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE,CAAC;IAClD,CAAC;IAED;;OAEG;IACH,IAAW,IAAI;QAEX,OAAO,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,CAAC;IAC3C,CAAC;IAED;;OAEG;IACH,IAAW,MAAM;QAEb,OAAO,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,CAAC;IAC7C,CAAC;CACJ","sourcesContent":["import {Observable, Subject} from 'rxjs';\n\nimport {DateTimeObjectValue} from '../../../misc/types';\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 emitting of go up\n     */\n    protected goUpSubject: Subject<TDate> = new Subject<TDate>();\n\n    /**\n     * Subject used for emitting of go down\n     */\n    protected goDownSubject: Subject<TDate> = new Subject<TDate>();\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 canGoUp: boolean = false;\n\n    /**\n     * @inheritdoc\n     */\n    public canGoDown: 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 goUp(): Observable<TDate>\n    {\n        return this.goUpSubject.asObservable();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    public get goDown(): Observable<TDate>\n    {\n        return this.goDownSubject.asObservable();\n    }\n}"]}
+{"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}"]}

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

@@ -4,9 +4,10 @@ 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 { DATE_API } from '../../../../misc/tokens';
+import { DATE_API, FORMAT_PROVIDER } from '../../../../misc/tokens';
 import { formatDateTime, parseDateTime } from '../../../../misc/utils';
 import { DateTimeValueFormat } from '../../../../misc/enums';
+import { DateTimeRestrictedBase } from '../../../dateTime/directives/dateTimeRestrictedBase';
 import * as i0 from "@angular/core";
 /**
  * Text to be displayed when configuration, options are corrupted
@@ -24,11 +25,11 @@ const defaultOptions = {
 /**
  * Component used for displaying date time picker
  */
-export class DateTimePickerComponent {
+export class DateTimePickerComponent extends DateTimeRestrictedBase {
     //######################### constructor #########################
-    constructor(position, dateApi, options) {
+    constructor(position, dateApi, formatProvider, options) {
+        super(dateApi, formatProvider);
         this.position = position;
-        this.dateApi = dateApi;
         //######################### public properties - outputs #########################
         /**
          * @inheritdoc
@@ -44,6 +45,16 @@ export class DateTimePickerComponent {
             throw new Error(CORRUPTED_CONFIG_TEXT);
         }
     }
+    //######################### public properties - inputs #########################
+    /**
+     * @inheritdoc
+     */
+    get value() {
+        return this.ɵValue;
+    }
+    set value(value) {
+        this.ɵValue = value;
+    }
     /**
      * Options for date time picker
      */
@@ -76,6 +87,7 @@ export class DateTimePickerComponent {
      */
     ngOnDestroy() {
         var _a, _b;
+        super.ngOnDestroy();
         (_a = this.component) === null || _a === void 0 ? void 0 : _a.destroy();
         this.component = null;
         (_b = this.periodChangesSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
@@ -107,12 +119,12 @@ export class DateTimePickerComponent {
                 this.value = formatDateTime(component.value, DateTimeValueFormat.DateInstance, null);
                 this.valueChange.emit();
             }));
-            this.periodChangesSubscription.add(this.component.instance.goUp.subscribe(date => this.showPicker(this.getUpperType(), date)));
-            this.periodChangesSubscription.add(this.component.instance.goDown.subscribe(date => this.showPicker(this.getLowerType(), date)));
+            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.canGoDown = false,
-            component.canGoUp = false;
+        component.canScaleDown = false,
+            component.canScaleUp = false;
         component.display = displayDate;
         // component.options
         //TODO: maybe add support for format!
@@ -151,8 +163,8 @@ export class DateTimePickerComponent {
         return this.displayedPeriodType;
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: DATE_API }, { 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 }], usesOnChanges: true, ngImport: i0, template: "<ng-container #container></ng-container>", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: POSITION }, { token: DATE_API }, { token: FORMAT_PROVIDER }, { 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,
             args: [{ selector: 'date-time-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container #container></ng-container>" }]
@@ -162,6 +174,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_API]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FORMAT_PROVIDER]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_TIME_PICKER_OPTIONS]

package/es2015/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 {DateApi} from '../../../../services';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeValueFormat} from '../../../../misc/enums';\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> 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_API) protected dateApi: DateApi<TDate>,\n                @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\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 ngOnDestroy(): void\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.goUp.subscribe(date => this.showPicker(this.getUpperType(), date)));\n            this.periodChangesSubscription.add(this.component.instance.goDown.subscribe(date => this.showPicker(this.getLowerType(), date)));\n        }\n\n        const component = this.component.instance;\n\n        component.canGoDown = false,\n        component.canGoUp = 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} from '@angular/core';\nimport {Position, POSITION} from '@anglr/common';\nimport {extend, isBlank, nameof} from '@jscrpt/common';\nimport {Subscription} from 'rxjs';\n\nimport {DateTimeInputValue, FormatProvider} 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 {DateApi} from '../../../../services';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../../misc/tokens';\nimport {formatDateTime, parseDateTime} from '../../../../misc/utils';\nimport {DateTimeValueFormat} from '../../../../misc/enums';\nimport {DateTimeRestrictedBase} from '../../../dateTime/directives/dateTimeRestrictedBase';\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 DateTimeRestrictedBase<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 override get value(): DateTimeInputOutputValue<TDate>|undefined|null\n    {\n        return this.ɵValue;\n    }\n    public override set value(value: DateTimeInputOutputValue<TDate>|undefined|null)\n    {\n        this.ɵValue = value;\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 override valueChange: EventEmitter<void> = new EventEmitter<void>();\n\n    //######################### constructor #########################\n    constructor(@Inject(POSITION) protected position: Position,\n                @Inject(DATE_API) dateApi: DateApi<TDate>,\n                @Inject(FORMAT_PROVIDER) formatProvider: FormatProvider,\n                @Inject(DATE_TIME_PICKER_OPTIONS) @Optional() options?: DateTimePickerOptions<TDate>,)\n    {\n        super(dateApi, formatProvider);\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>"]}

package/es2015/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js

@@ -1,17 +1,78 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { DateTimePeriodPickerBase } from '../dateTimePeriodPickerBase';
+import { DatePipesModule } from '../../../datePipes.module';
+import { DATE_API } from '../../../../misc/tokens';
 import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../../../../pipes/dateFormat.pipe";
 /**
  * Component used for displaying day picker
  */
 export class DayPickerSAComponent extends DateTimePeriodPickerBase {
+    //######################### constructor #########################
+    constructor(dateApi) {
+        super();
+        this.dateApi = dateApi;
+        //######################### protected properties - template bindings #########################
+        /**
+         * Names of days
+         */
+        this.weekdays = [];
+        /**
+         * Array of period data to be displayed
+         * @internal
+         */
+        this.periodData = [];
+    }
+    //######################### protected methods - template bindings #########################
+    selectDay(dayData) {
+        var _a, _b, _c;
+        if (!this.value) {
+            this.value = (_b = (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.clone()) !== null && _b !== void 0 ? _b : this.dateApi.getValue((_c = this.display) !== null && _c !== void 0 ? _c : new Date());
+        }
+        //single value
+        if (!Array.isArray(this.value)) {
+            this.value.dayOfMonth(dayData.day);
+            this.value.updateOriginal();
+            this.valueChangeSubject.next();
+        }
+    }
+    /**
+     * Changes displayed month to next month
+     * @param event - Event that occured
+     */
+    nextMonth(event) {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.addMonths(1);
+        // this.display(this.displayDate);
+    }
+    /**
+     * Changes displayed month to previous month
+     * @param event - Event that occured
+     */
+    previousMonth(event) {
+        var _a;
+        event.preventDefault();
+        event.stopPropagation();
+        (_a = this.displayDate) === null || _a === void 0 ? void 0 : _a.subtractMonths(1);
+        // this.display(this.displayDate!);
+    }
 }
-DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DayPickerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DayPickerSAComponent, isStandalone: true, selector: "day-picker", host: { properties: { "class.date-time-period": "true" } }, usesInheritance: true, ngImport: i0, template: "<!-- <div [ngClass]=\"cssClasses.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canGoDown\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{timeValue?.from | dateFormat: 'time'}}</div>\r\n</div> -->\r\n\r\nDAY", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps: [{ token: DATE_API }], target: i0.ɵɵFactoryTarget.Component });
+DayPickerSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: DayPickerSAComponent, isStandalone: true, selector: "day-picker", host: { properties: { "class.date-time-period": "true" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n    <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n    <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         class=\"period-datum clickable\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n    <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DatePipesModule }, { kind: "pipe", type: i2.DateFormatPipe, name: "dateFormat" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, decorators: [{
             type: Component,
             args: [{ selector: 'day-picker', host: {
                         '[class.date-time-period]': 'true',
-                    }, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div [ngClass]=\"cssClasses.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canGoDown\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{timeValue?.from | dateFormat: 'time'}}</div>\r\n</div> -->\r\n\r\nDAY" }]
-        }] });
+                    }, standalone: true, imports: [
+                        CommonModule,
+                        DatePipesModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n    <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n    <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         class=\"period-datum clickable\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n    <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }]; } });
 //# sourceMappingURL=dayPicker.component.js.map

package/es2015/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AAGjE,OAAO,EAAC,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;;AAErE;;GAEG;AAYH,MAAM,OAAO,oBAAsC,SAAQ,wBAA+B;;iHAA7E,oBAAoB;qGAApB,oBAAoB,yJCnBjC,+xCAsBG;2FDHU,oBAAoB;kBAXhC,SAAS;+BAEI,YAAY,QAGtB;wBACI,0BAA0B,EAAE,MAAM;qBACrC,cACW,IAAI,mBACC,uBAAuB,CAAC,MAAM","sourcesContent":["import {Component, ChangeDetectionStrategy} from '@angular/core';\n\nimport {DateTimePicker} from '../../interfaces';\nimport {DateTimePeriodPickerBase} from '../dateTimePeriodPickerBase';\n\n/**\n * Component used for displaying day picker\n */\n@Component(\n{\n    selector: 'day-picker',\n    templateUrl: 'dayPicker.component.html',\n    host:\n    {\n        '[class.date-time-period]': 'true',\n    },\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DayPickerSAComponent<TDate = unknown> extends DateTimePeriodPickerBase<TDate> implements DateTimePicker<TDate>\n{\n}","<!-- <div [ngClass]=\"cssClasses.periodSelection | asRequired\">\r\n    <div [ngClass]=\"cssClasses.previousPeriod | asRequired\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div [ngClass]=\"cssClasses.periodValue | asRequired | mergeCssClasses: [{'clickable': canGoUp}]\" (mousedown)=\"goUp($event)\">{{displayDate?.format('MMMM yyyy')}}</div>\r\n    <div [ngClass]=\"cssClasses.nextPeriod | asRequired\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div [ngClass]=\"cssClasses.periodData | asRequired\">\r\n    <div [ngClass]=\"cssClasses.weekdayName | asRequired\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         [ngClass]=\"cssClasses.periodDatum | asRequired\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (mousedown)=\"select($event, day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"flex-row\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canGoDown\">\r\n    <div [class.clickable]=\"canGoDown\" (mousedown)=\"goDown($event)\">{{timeValue?.from | dateFormat: 'time'}}</div>\r\n</div> -->\r\n\r\nDAY"]}
+{"version":3,"file":"dayPicker.component.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.ts","../../../../../../src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AACzE,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAAC,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAC,eAAe,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,QAAQ,EAAC,MAAM,yBAAyB,CAAC;;;;AAGjD;;GAEG;AAiBH,MAAM,OAAO,oBAAsC,SAAQ,wBAA+B;IAetF,iEAAiE;IACjE,YAAwC,OAAuB;QAE3D,KAAK,EAAE,CAAC;QAF4B,YAAO,GAAP,OAAO,CAAgB;QAd/D,8FAA8F;QAE9F;;WAEG;QACO,aAAQ,GAAa,EAAE,CAAC;QAElC;;;WAGG;QACI,eAAU,GAAqB,EAAE,CAAC;IAMzC,CAAC;IAED,2FAA2F;IAEjF,SAAS,CAAC,OAAgB;;QAEhC,IAAG,CAAC,IAAI,CAAC,KAAK,EACd;YACI,IAAI,CAAC,KAAK,GAAG,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,EAAE,mCAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,OAAO,mCAAI,IAAI,IAAI,EAAE,CAAC,CAAC;SAC/F;QAED,cAAc;QACd,IAAG,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7B;YACI,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;YAE5B,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;SAClC;IACL,CAAC;IAED;;;OAGG;IACO,SAAS,CAAC,KAAY;;QAE5B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAA,IAAI,CAAC,WAAW,0CAAE,SAAS,CAAC,CAAC,CAAC,CAAC;QAE/B,kCAAkC;IACtC,CAAC;IAED;;;OAGG;IACO,aAAa,CAAC,KAAY;;QAEhC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAA,IAAI,CAAC,WAAW,0CAAE,cAAc,CAAC,CAAC,CAAC,CAAC;QAEpC,mCAAmC;IACvC,CAAC;;iHAhEQ,oBAAoB,kBAgBT,QAAQ;qGAhBnB,oBAAoB,yJC7BjC,65CAoBM,2CDIE,YAAY,+PACZ,eAAe;2FAIV,oBAAoB;kBAhBhC,SAAS;+BAEI,YAAY,QAGtB;wBACI,0BAA0B,EAAE,MAAM;qBACrC,cACW,IAAI,WAEhB;wBACI,YAAY;wBACZ,eAAe;qBAClB,mBACgB,uBAAuB,CAAC,MAAM;;0BAkBlC,MAAM;2BAAC,QAAQ","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject} from '@angular/core';\nimport {CommonModule} from '@angular/common';\n\nimport {DateTimePicker} from '../../interfaces';\nimport {DateTimePeriodPickerBase} from '../dateTimePeriodPickerBase';\nimport {DatePipesModule} from '../../../datePipes.module';\nimport {DayData} from '../../../../legacy/picker/interfaces';\nimport {DATE_API} from '../../../../misc/tokens';\nimport {DateApi} from '../../../../services';\n\n/**\n * Component used for displaying day picker\n */\n@Component(\n{\n    selector: 'day-picker',\n    templateUrl: 'dayPicker.component.html',\n    host:\n    {\n        '[class.date-time-period]': 'true',\n    },\n    standalone: true,\n    imports:\n    [\n        CommonModule,\n        DatePipesModule,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DayPickerSAComponent<TDate = unknown> extends DateTimePeriodPickerBase<TDate> implements DateTimePicker<TDate>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Names of days\n     */\n    protected weekdays: string[] = [];\n\n    /**\n     * Array of period data to be displayed\n     * @internal\n     */\n    public periodData: DayData<TDate>[] = [];\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) protected dateApi: DateApi<TDate>,)\n    {\n        super();\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    protected selectDay(dayData: DayData): void\n    {\n        if(!this.value)\n        {\n            this.value = this.displayDate?.clone() ?? this.dateApi.getValue(this.display ?? new Date());\n        }\n\n        //single value\n        if(!Array.isArray(this.value))\n        {\n            this.value.dayOfMonth(dayData.day);\n            this.value.updateOriginal();\n\n            this.valueChangeSubject.next();\n        }\n    }\n\n    /**\n     * Changes displayed month to next month\n     * @param event - Event that occured\n     */\n    protected nextMonth(event: Event): void\n    {\n        event.preventDefault();\n        event.stopPropagation();\n        this.displayDate?.addMonths(1);\n\n        // this.display(this.displayDate);\n    }\n\n    /**\n     * Changes displayed month to previous month\n     * @param event - Event that occured\n     */\n    protected previousMonth(event: Event): void\n    {\n        event.preventDefault();\n        event.stopPropagation();\n        this.displayDate?.subtractMonths(1);\n\n        // this.display(this.displayDate!);\n    }\n}","<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth($event)\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? scaleUpSubject.next(displayDate.value) : undefined\">{{displayDate?.value | dateFormat: 'monthName'}} {{displayDate?.value | dateFormat: 'year'}}</div>\r\n    <div class=\"fas fa-angle-right clickable\" (mousedown)=\"nextMonth($event)\"></div>\r\n</div>\r\n\r\n<div class=\"period-data\">\r\n    <div class=\"weekday\" *ngFor=\"let weekday of weekdays\">{{weekday}}</div>\r\n    <div *ngFor=\"let day of periodData\"\r\n         class=\"period-datum clickable\"\r\n         [class.other-month]=\"day.otherMonth\"\r\n         [class.today]=\"day.today\"\r\n         [class.weekend]=\"day.weekend\"\r\n         [class.active]=\"day.active\"\r\n         [class.disabled]=\"day.disabled\"\r\n         (click)=\"$event.stopPropagation(); $event.preventDefault(); selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" style=\"justify-content: center; border-top: 1px solid #FFF;\" *ngIf=\"canScaleDown\">\r\n    <!-- <div [class.clickable]=\"canScaleDown\" (mousedown)=\"$event.stopPropagation(); $event.preventDefault(); displayDate ? goDownSubject.next(displayDate.value) : undefined\">{{timeValue?.from | dateFormat: 'time'}}</div> -->\r\n</div>"]}

package/es2015/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.js

@@ -60,7 +60,11 @@ export class DateTimePickerDirective {
             if (this.withPickerOptions.alwaysVisible) {
                 this.showPicker();
             }
-            this.initSubscriptions.add(this.input.valueChange.subscribe(() => this.setPickerValue()));
+            this.initSubscriptions.add(this.input.valueChange.subscribe(() => {
+                var _a;
+                this.setPickerValue();
+                (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef.detectChanges();
+            }));
             this.initSubscriptions.add(this.input.focus.subscribe(() => {
                 if (this.withPickerOptions.showOnFocus) {
                     this.showPicker();
@@ -106,6 +110,10 @@ export class DateTimePickerDirective {
             }));
             applyPositionResult(result);
             this.setPickerValue();
+            // this.componentRef.setInput(nameof<DateTimePickerComponent>('valueFormat'), this.input.);
+            // this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);
+            // this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);
+            this.componentRef.changeDetectorRef.detectChanges();
         });
     }
     /**
@@ -135,8 +143,6 @@ export class DateTimePickerDirective {
         }
         if (this.componentRef) {
             this.componentRef.setInput(nameof('value'), this.input.value);
-            // this.componentRef.changeDetectorRef.markForCheck();
-            this.componentRef.changeDetectorRef.detectChanges();
         }
     }
     /**