@anglr/datetime 5.0.0-beta.20221021035527 → 5.0.0-beta.20221021074029

package/changelog.md

@@ -173,6 +173,8 @@
     - **extends** `DateTimePeriodPickerBase`
     - **implements**
         - `DateTimePicker`
+- new `WithTimeSADirective` directive, that sets up usage of date time picker to use time format and time picker
+- new `WithTodaySADirective` directive, that sets today as day for empty date time on focus
 - updated `DateApiObject` interface
     - new `unixTimestamp` method, that gets value of date time as unix timestamp
 - updated `DateFormatPipe`

package/es2015/src/directives/index.js

@@ -0,0 +1,3 @@
+export * from './withTime/withTime.directive';
+export * from './withToday/withToday.directive';
+//# sourceMappingURL=index.js.map

package/es2015/src/directives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './withTime/withTime.directive';\nexport * from './withToday/withToday.directive';\n"]}

package/es2015/src/directives/withTime/withTime.directive.js

@@ -0,0 +1,32 @@
+import { Directive } from '@angular/core';
+import { RollerTimePickerSAComponent, DateTimePickerDirective, DayPickerSAComponent, MonthPickerSAComponent, YearPickerSAComponent, DateTimeDirective } from '../../modules';
+import * as i0 from "@angular/core";
+import * as i1 from "../../modules";
+/**
+ * Directive that sets up usage of date time picker to use time format and time picker
+ */
+export class WithTimeSADirective {
+    //######################### constructor #########################
+    constructor(picker, dateTime) {
+        picker.pickerOptions =
+            {
+                periodsDefinition: {
+                    'time': RollerTimePickerSAComponent,
+                    'day': DayPickerSAComponent,
+                    'month': MonthPickerSAComponent,
+                    'year': YearPickerSAComponent,
+                },
+            };
+        dateTime.format = 'dateTime';
+    }
+}
+WithTimeSADirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTimeSADirective, deps: [{ token: i1.DateTimePickerDirective }, { token: i1.DateTimeDirective }], target: i0.ɵɵFactoryTarget.Directive });
+WithTimeSADirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: WithTimeSADirective, isStandalone: true, selector: "[dateTime][withPicker][withTime]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTimeSADirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dateTime][withPicker][withTime]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DateTimePickerDirective }, { type: i1.DateTimeDirective }]; } });
+//# sourceMappingURL=withTime.directive.js.map

package/es2015/src/directives/withTime/withTime.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTime.directive.js","sourceRoot":"","sources":["../../../../src/directives/withTime/withTime.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EAAC,2BAA2B,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;;;AAE3K;;GAEG;AAMH,MAAM,OAAO,mBAAmB;IAE5B,iEAAiE;IACjE,YAAY,MAAsC,EACtC,QAAkC;QAE1C,MAAM,CAAC,aAAa;YACpB;gBACI,iBAAiB,EACjB;oBACI,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,oBAAoB;oBAC3B,OAAO,EAAE,sBAAsB;oBAC/B,MAAM,EAAE,qBAAqB;iBAChC;aACJ,CAAC;QAEF,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC;IACjC,CAAC;;gHAlBQ,mBAAmB;oGAAnB,mBAAmB;2FAAnB,mBAAmB;kBAL/B,SAAS;mBACV;oBACI,QAAQ,EAAE,kCAAkC;oBAC5C,UAAU,EAAE,IAAI;iBACnB","sourcesContent":["import {Directive} from '@angular/core';\n\nimport {RollerTimePickerSAComponent, DateTimePickerDirective, DayPickerSAComponent, MonthPickerSAComponent, YearPickerSAComponent, DateTimeDirective} from '../../modules';\n\n/**\n * Directive that sets up usage of date time picker to use time format and time picker\n */\n@Directive(\n{\n    selector: '[dateTime][withPicker][withTime]',\n    standalone: true,\n})\nexport class WithTimeSADirective<TDate = unknown>\n{\n    //######################### constructor #########################\n    constructor(picker: DateTimePickerDirective<TDate>,\n                dateTime: DateTimeDirective<TDate>,)\n    {\n        picker.pickerOptions = \n        {\n            periodsDefinition:\n            {\n                'time': RollerTimePickerSAComponent,\n                'day': DayPickerSAComponent,\n                'month': MonthPickerSAComponent,\n                'year': YearPickerSAComponent,\n            },\n        };\n\n        dateTime.format = 'dateTime';\n    }\n}"]}

package/es2015/src/directives/withToday/withToday.directive.js

@@ -0,0 +1,44 @@
+import { Directive, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { DATE_API } from '../../misc/tokens';
+import { DateTimeInputDirective } from '../../modules';
+import * as i0 from "@angular/core";
+import * as i1 from "../../modules";
+/**
+ * Directive that sets today as day for empty date time on focus
+ */
+export class WithTodaySADirective {
+    //######################### constructor #########################
+    constructor(input, dateApi) {
+        //######################### private fields #########################
+        /**
+         * Subscriptions created during initialization
+         */
+        this._initSubscriptions = new Subscription();
+        this._initSubscriptions.add(input.focus.subscribe(() => {
+            if (!input.value) {
+                input.value = dateApi.now().value;
+            }
+        }));
+    }
+    //######################### public methods - implementation of OnDestroy #########################
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy() {
+        this._initSubscriptions.unsubscribe();
+    }
+}
+WithTodaySADirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTodaySADirective, deps: [{ token: i1.DateTimeInputDirective }, { token: DATE_API }], target: i0.ɵɵFactoryTarget.Directive });
+WithTodaySADirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: WithTodaySADirective, isStandalone: true, selector: "[dateTime][withToday]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTodaySADirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dateTime][withToday]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DateTimeInputDirective }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }]; } });
+//# sourceMappingURL=withToday.directive.js.map

package/es2015/src/directives/withToday/withToday.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withToday.directive.js","sourceRoot":"","sources":["../../../../src/directives/withToday/withToday.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAY,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,sBAAsB,EAAC,MAAM,eAAe,CAAC;;;AAGrD;;GAEG;AAMH,MAAM,OAAO,oBAAoB;IAS7B,iEAAiE;IACjE,YAAY,KAAoC,EAClB,OAAuB;QATrD,oEAAoE;QAEpE;;WAEG;QACK,uBAAkB,GAAiB,IAAI,YAAY,EAAE,CAAC;QAM1D,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;YAEnD,IAAG,CAAC,KAAK,CAAC,KAAK,EACf;gBACI,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;aACrC;QACL,CAAC,CAAC,CAAC,CAAC;IACR,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;;iHA9BQ,oBAAoB,wDAWT,QAAQ;qGAXnB,oBAAoB;2FAApB,oBAAoB;kBALhC,SAAS;mBACV;oBACI,QAAQ,EAAE,uBAAuB;oBACjC,UAAU,EAAE,IAAI;iBACnB;;0BAYgB,MAAM;2BAAC,QAAQ","sourcesContent":["import {Directive, Inject, OnDestroy} from '@angular/core';\nimport {Subscription} from 'rxjs';\n\nimport {DATE_API} from '../../misc/tokens';\nimport {DateTimeInputDirective} from '../../modules';\nimport {DateApi} from '../../services';\n\n/**\n * Directive that sets today as day for empty date time on focus\n */\n@Directive(\n{\n    selector: '[dateTime][withToday]',\n    standalone: true,\n})\nexport class WithTodaySADirective<TDate = unknown> implements OnDestroy\n{\n    //######################### private fields #########################\n\n    /**\n     * Subscriptions created during initialization\n     */\n    private _initSubscriptions: Subscription = new Subscription();\n\n    //######################### constructor #########################\n    constructor(input: DateTimeInputDirective<TDate>,\n                @Inject(DATE_API) dateApi: DateApi<TDate>,)\n    {\n        this._initSubscriptions.add(input.focus.subscribe(() =>\n        {\n            if(!input.value)\n            {\n                input.value = dateApi.now().value;\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._initSubscriptions.unsubscribe();\n    }\n}"]}

package/es2015/src/index.js

@@ -1,3 +1,4 @@
+export * from './directives';
 export * from './interfaces';
 export * from './legacy/picker/directives';
 export * from './legacy/picker/interfaces';

package/es2015/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './interfaces';\nexport * from './legacy/picker/directives';\nexport * from './legacy/picker/interfaces';\nexport * from './legacy/picker/modules/picker.module';\nexport * from './legacy/picker/types';\nexport * from './legacy/selector/interfaces';\nexport * from './legacy/selector/modules/basicSelector.module';\nexport * from './legacy/selector/modules/selector.module';\nexport * from './legacy/selector/types';\nexport * from './misc/constants';\nexport * from './misc/enums';\nexport * from './misc/tokens';\nexport * from './misc/types';\nexport * from './misc/utils';\nexport * from './misc/validators';\nexport * from './modules';\nexport * from './services';\nexport * from './pipes/dateConvert.pipe';\nexport * from './pipes/dateFormat.pipe';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './directives';\nexport * from './interfaces';\nexport * from './legacy/picker/directives';\nexport * from './legacy/picker/interfaces';\nexport * from './legacy/picker/modules/picker.module';\nexport * from './legacy/picker/types';\nexport * from './legacy/selector/interfaces';\nexport * from './legacy/selector/modules/basicSelector.module';\nexport * from './legacy/selector/modules/selector.module';\nexport * from './legacy/selector/types';\nexport * from './misc/constants';\nexport * from './misc/enums';\nexport * from './misc/tokens';\nexport * from './misc/types';\nexport * from './misc/utils';\nexport * from './misc/validators';\nexport * from './modules';\nexport * from './services';\nexport * from './pipes/dateConvert.pipe';\nexport * from './pipes/dateFormat.pipe';"]}

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

@@ -138,7 +138,7 @@ export class DayPickerSAComponent extends DateTimePeriodPickerBase {
     }
 }
 DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps: [], 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()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue ? (singleValue.value | dateFormat: 'time') : '0:00'}}</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 });
+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()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue?.isValid() ? (singleValue?.value | dateFormat: 'time') : '0:00'}}</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: {
@@ -146,6 +146,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                     }, standalone: true, imports: [
                         CommonModule,
                         DatePipesModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue ? (singleValue.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue?.isValid() ? (singleValue?.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>" }]
         }], ctorParameters: function () { return []; } });
 //# 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":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} 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 {DateApiObject} 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<DayData<TDate>, TDate> implements DateTimePicker<TDate>\n{\n    //######################### protected properties #########################\n\n    /**\n     * Stored this picker month data\n     */\n    protected thisMonthData: DayData<TDate>[] = [];\n\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Names of days\n     */\n    protected weekdays: string[] = [];\n\n    //######################### constructor #########################\n    constructor()\n    {\n        super();\n\n        this.weekdays = this.dateApi.weekdaysShort();\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Selects day as value of date time picker\n     * @param dayData - Day data that were selected\n     */\n    protected selectDay(dayData: DayData<TDate>): void\n    {\n        if(dayData.disabled)\n        {\n            return;\n        }\n\n        //single value\n        if(!this.ranged)\n        {\n            //no value selected yet\n            if(!this.singleValue?.isValid())\n            {\n                this.singleValue = this.displayDate?.clone() ?? this.dateApi.getValue(new Date());\n            }\n\n            this.singleValue.year(dayData.dateObj.year());\n            this.singleValue.month(dayData.dateObj.month());\n            this.singleValue.dayOfMonth(dayData.day);\n\n            //other month was selected\n            if(dayData.otherMonth)\n            {\n                this.displayDate?.month(dayData.dateObj.month());\n            }\n\n            this.singleValue.updateOriginal();\n        }\n        else\n        {\n            //TODO: range\n        }\n\n        this.valueChangeSubject.next();\n        this.render();\n        this.changeDetector.detectChanges();\n    }\n\n    /**\n     * Changes displayed month to next month\n     */\n    protected nextMonth(): void\n    {\n        this.displayDate?.addMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    /**\n     * Changes displayed month to previous month\n     */\n    protected previousMonth(): void\n    {\n        this.displayDate?.subtractMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Renders current day picker data\n     */\n    protected render(): void\n    {\n        //same month only data change\n        if(this.displayedDate && this.displayDate?.isSameMonth(this.displayedDate))\n        {\n            this.setActive();\n            this.updateMinMax();\n\n            return;\n        }\n\n        this.displayedDate = this.displayDate?.value;\n        this.periodData = [];\n        this.thisMonthData = [];\n\n        if(!this.displayDate)\n        {\n            return;\n        }\n\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\n                const data: DayData<TDate> =\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                    dateObj: this.displayDate.clone(),\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        this.setActive();\n        this.updateMinMax();\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected onRender(): void\n    {\n        this.render();\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}","<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue ? (singleValue.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>"]}
+{"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":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} 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 {DateApiObject} 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<DayData<TDate>, TDate> implements DateTimePicker<TDate>\n{\n    //######################### protected properties #########################\n\n    /**\n     * Stored this picker month data\n     */\n    protected thisMonthData: DayData<TDate>[] = [];\n\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Names of days\n     */\n    protected weekdays: string[] = [];\n\n    //######################### constructor #########################\n    constructor()\n    {\n        super();\n\n        this.weekdays = this.dateApi.weekdaysShort();\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Selects day as value of date time picker\n     * @param dayData - Day data that were selected\n     */\n    protected selectDay(dayData: DayData<TDate>): void\n    {\n        if(dayData.disabled)\n        {\n            return;\n        }\n\n        //single value\n        if(!this.ranged)\n        {\n            //no value selected yet\n            if(!this.singleValue?.isValid())\n            {\n                this.singleValue = this.displayDate?.clone() ?? this.dateApi.getValue(new Date());\n            }\n\n            this.singleValue.year(dayData.dateObj.year());\n            this.singleValue.month(dayData.dateObj.month());\n            this.singleValue.dayOfMonth(dayData.day);\n\n            //other month was selected\n            if(dayData.otherMonth)\n            {\n                this.displayDate?.month(dayData.dateObj.month());\n            }\n\n            this.singleValue.updateOriginal();\n        }\n        else\n        {\n            //TODO: range\n        }\n\n        this.valueChangeSubject.next();\n        this.render();\n        this.changeDetector.detectChanges();\n    }\n\n    /**\n     * Changes displayed month to next month\n     */\n    protected nextMonth(): void\n    {\n        this.displayDate?.addMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    /**\n     * Changes displayed month to previous month\n     */\n    protected previousMonth(): void\n    {\n        this.displayDate?.subtractMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Renders current day picker data\n     */\n    protected render(): void\n    {\n        //same month only data change\n        if(this.displayedDate && this.displayDate?.isSameMonth(this.displayedDate))\n        {\n            this.setActive();\n            this.updateMinMax();\n\n            return;\n        }\n\n        this.displayedDate = this.displayDate?.value;\n        this.periodData = [];\n        this.thisMonthData = [];\n\n        if(!this.displayDate)\n        {\n            return;\n        }\n\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\n                const data: DayData<TDate> =\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                    dateObj: this.displayDate.clone(),\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        this.setActive();\n        this.updateMinMax();\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected onRender(): void\n    {\n        this.render();\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}","<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue?.isValid() ? (singleValue?.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>"]}

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

@@ -3,7 +3,7 @@ import { Directive, ElementRef, Inject, Input, Optional, ViewContainerRef } from
 import { DOCUMENT } from '@angular/common';
 import { POSITION, applyPositionResult, PositionPlacement } from '@anglr/common';
 import { extend, nameof, isDescendant, BindThis } from '@jscrpt/common';
-import { lastValueFrom } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { DATE_TIME_INPUT } from '../../../../misc/tokens';
 import { DateTimePickerComponent } from '../../components';
 import { DATE_TIME_PICKER_DIRECTIVE_OPTIONS } from '../../misc/tokens';
@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
 const defaultOptions = {
     absolute: true,
     alwaysVisible: false,
-    closeOnValueSelect: true,
+    closeOnValueSelect: false,
     closeOnBlur: true,
     disabled: false,
     positionOptions: PositionPlacement.BottomStart,
@@ -102,7 +102,8 @@ export class DateTimePickerDirective extends DateTimeBase {
             if (this.withPickerOptions.absolute) {
                 this.document.body.append(this.componentElement);
             }
-            this.valueChangeSubscription = this.component.valueChange.subscribe(() => {
+            this.pickerChangesSubscription = new Subscription();
+            this.pickerChangesSubscription.add(this.component.valueChange.subscribe(() => {
                 if (this.component) {
                     this.valueChangeDisabled = true;
                     this.input.value = this.component.value;
@@ -112,23 +113,21 @@ export class DateTimePickerDirective extends DateTimeBase {
                         this.hidePicker();
                     }
                 }
-            });
+            }));
             this.document.addEventListener('click', this.handleClickOutside);
             this.componentElement.addEventListener('mousedown', this.handleClickInside);
+            this.componentElement.style.position = 'absolute';
             if (this.ɵWithPickerOptions.pickerCssClass) {
                 this.componentElement.classList.add(this.ɵWithPickerOptions.pickerCssClass);
             }
-            const result = yield lastValueFrom(this.position.placeElement(this.componentElement, this.element.nativeElement, {
-                placement: this.withPickerOptions.positionOptions,
-            }));
-            applyPositionResult(result);
-            this.setPickerValue();
+            this.pickerChangesSubscription.add(this.positionPicker(this.componentElement, true).subscribe(result => applyPositionResult(result)));
             this.componentRef.setInput(nameof('options'), this.pickerOptions);
             this.componentRef.setInput(nameof('valueFormat'), this.dateTimeData.valueFormat);
             this.componentRef.setInput(nameof('format'), this.dateTimeData.format);
             this.componentRef.setInput(nameof('customFormat'), this.dateTimeData.customFormat);
             this.componentRef.setInput(nameof('minDateTime'), this.dateTimeData.minDateTime);
             this.componentRef.setInput(nameof('maxDateTime'), this.dateTimeData.maxDateTime);
+            this.setPickerValue();
             this.componentRef.changeDetectorRef.detectChanges();
         });
     }
@@ -141,8 +140,8 @@ export class DateTimePickerDirective extends DateTimeBase {
             return;
         }
         (_a = this.componentElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', this.handleClickInside);
-        (_b = this.valueChangeSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
-        this.valueChangeSubscription = null;
+        (_b = this.pickerChangesSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
+        this.pickerChangesSubscription = null;
         this.component = null;
         (_c = this.componentRef) === null || _c === void 0 ? void 0 : _c.destroy();
         this.componentRef = null;
@@ -185,6 +184,18 @@ export class DateTimePickerDirective extends DateTimeBase {
         event.preventDefault();
         event.stopPropagation();
     }
+    /**
+     * Runs placement of picker component
+     * @param componentElement - Element to be positioned
+     * @param watch - Indication whether watch for changes and update position
+     */
+    positionPicker(componentElement, watch) {
+        return this.position.placeElement(componentElement, this.element.nativeElement, {
+            flip: true,
+            placement: this.withPickerOptions.positionOptions,
+            autoUpdate: watch,
+        });
+    }
     //######################### protected methods - overrides #########################
     /**
      * @inheritdoc

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

@@ -1 +1 @@
-{"version":3,"file":"dateTimePicker.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {ComponentRef, Directive, ElementRef, EmbeddedViewRef, Inject, Input, OnDestroy, OnInit, Optional, ViewContainerRef} from '@angular/core';\nimport {DOCUMENT} from '@angular/common';\nimport {Position, POSITION, applyPositionResult, PositionPlacement} from '@anglr/common';\nimport {extend, nameof, isDescendant, BindThis} from '@jscrpt/common';\nimport {lastValueFrom, Subscription} from 'rxjs';\n\nimport {DateTimeInput} from '../../../../interfaces';\nimport {DATE_TIME_INPUT} from '../../../../misc/tokens';\nimport {DateTimePickerComponent} from '../../components';\nimport {DateTimePickerOptions} from '../../components/dateTimePicker/dateTimePicker.interface';\nimport {DateTimePickerDirectiveOptions} from './dateTimePicker.interface';\nimport {DATE_TIME_PICKER_DIRECTIVE_OPTIONS} from '../../misc/tokens';\nimport {DateTimeBase} from '../../../dateTime/directives';\n\n/**\n * Default options for date time picker directive\n */\nconst defaultOptions: DateTimePickerDirectiveOptions =\n{\n    absolute: true,\n    alwaysVisible: false,\n    closeOnValueSelect: true,\n    closeOnBlur: true,\n    disabled: false,\n    positionOptions: PositionPlacement.BottomStart,\n    showOnFocus: true,\n    pickerCssClass: null,\n};\n\n/**\n * Directive that is used for displaying and attaching date time picker\n */\n@Directive(\n{\n    selector: '[dateTime][withPicker]',\n    exportAs: 'dateTimePicker'\n})\nexport class DateTimePickerDirective<TDate = unknown> extends DateTimeBase<TDate> implements OnInit, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Indication whether is value changes disabled\n     */\n    protected valueChangeDisabled: boolean = false;\n\n    /**\n     * Options for date time picker directive\n     */\n    protected ɵWithPickerOptions: DateTimePickerDirectiveOptions;\n\n    /**\n     * Date time picker component reference\n     */\n    protected componentRef: ComponentRef<DateTimePickerComponent<TDate>>|undefined|null;\n\n    /**\n     * Instance of date time picker component\n     */\n    protected component: DateTimePickerComponent<TDate>|undefined|null;\n\n    /**\n     * Instance of date time picker element\n     */\n    protected componentElement: HTMLElement|undefined|null;\n\n    /**\n     * Subscription for value changes in picker\n     */\n    protected valueChangeSubscription: Subscription|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Gets or sets options for date time picker directive\n     */\n    @Input()\n    public get withPickerOptions(): Partial<DateTimePickerDirectiveOptions>\n    {\n        return this.ɵWithPickerOptions;\n    }\n    public set withPickerOptions(value: Partial<DateTimePickerDirectiveOptions>)\n    {\n        this.ɵWithPickerOptions = extend(true, {}, this.ɵWithPickerOptions, value);\n    }\n\n    /**\n     * Options for date time picker component\n     */\n    @Input()\n    public pickerOptions: Partial<DateTimePickerOptions<TDate>>|undefined|null;\n\n    //######################### constructor #########################\n    constructor(protected viewContainer: ViewContainerRef,\n                protected element: ElementRef<HTMLElement>,\n                @Inject(DATE_TIME_INPUT) protected input: DateTimeInput<TDate>,\n                @Inject(DOCUMENT) protected document: Document,\n                @Inject(POSITION) protected position: Position,\n\n                @Inject(DATE_TIME_PICKER_DIRECTIVE_OPTIONS) @Optional() options?: DateTimePickerDirectiveOptions,)\n    {\n        super();\n\n        this.ɵWithPickerOptions = extend(true, {}, defaultOptions, options);\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public async ngOnInit(): Promise<void>\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            this.showPicker();\n        }\n\n        this.initSubscriptions.add(this.input.valueChange.subscribe(() =>\n        {\n            this.setPickerValue();\n            this.componentRef?.changeDetectorRef.detectChanges();\n        }));\n\n        this.initSubscriptions.add(this.input.focus.subscribe(() =>\n        {\n            if(this.withPickerOptions.showOnFocus)\n            {\n                this.showPicker();\n            }\n        }));\n\n        this.initSubscriptions.add(this.input.blur.subscribe(() =>\n        {\n            if(this.withPickerOptions.closeOnBlur)\n            {\n                this.hidePicker();\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.hidePicker();\n        this.initSubscriptions.unsubscribe();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Hides date time picker\n     */\n    public async showPicker(): Promise<void>\n    {\n        if(this.withPickerOptions.disabled || this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef = this.viewContainer.createComponent(DateTimePickerComponent<TDate>);\n        this.componentElement = (this.componentRef?.hostView as EmbeddedViewRef<DateTimePickerComponent<TDate>>).rootNodes[0] as HTMLElement;\n        this.component = this.componentRef.instance;\n\n        if(this.withPickerOptions.absolute)\n        {\n            this.document.body.append(this.componentElement);\n        }\n\n        this.valueChangeSubscription = this.component.valueChange.subscribe(() =>\n        {\n            if(this.component)\n            {\n                this.valueChangeDisabled = true;\n                this.input.value = this.component.value;\n                this.input.valueChange.emit();\n                this.valueChangeDisabled = false;\n\n                if(this.ɵWithPickerOptions.closeOnValueSelect)\n                {\n                    this.hidePicker();\n                }\n            }\n        });\n\n        this.document.addEventListener('click', this.handleClickOutside);\n        this.componentElement.addEventListener('mousedown', this.handleClickInside);\n\n        if(this.ɵWithPickerOptions.pickerCssClass)\n        {\n            this.componentElement.classList.add(this.ɵWithPickerOptions.pickerCssClass);\n        }\n\n        const result = await lastValueFrom(this.position.placeElement(this.componentElement, this.element.nativeElement,\n        {\n            placement: this.withPickerOptions.positionOptions,\n        }));\n\n        applyPositionResult(result);\n        this.setPickerValue();\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('options'), this.pickerOptions);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('valueFormat'), this.dateTimeData.valueFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('format'), this.dateTimeData.format);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('customFormat'), this.dateTimeData.customFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * Shows date time picker\n     */\n    public hidePicker(): void\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            return;\n        }\n        \n        this.componentElement?.removeEventListener('mousedown', this.handleClickInside);\n        \n        this.valueChangeSubscription?.unsubscribe();\n        this.valueChangeSubscription = null;\n        \n        this.component = null;\n\n        this.componentRef?.destroy();\n        this.componentRef = null;\n\n        this.componentElement?.remove();\n        this.componentElement = null;\n\n        this.document.removeEventListener('click', this.handleClickOutside);\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Sets all picker value\n     */\n    protected setPickerValue(): void\n    {\n        if(this.valueChangeDisabled)\n        {\n            return;\n        }\n\n        if(this.componentRef)\n        {\n            this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n        }\n    }\n\n    /**\n     * Handles clicking outside of picker\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickOutside(event: MouseEvent): void\n    {\n        if(!this.componentElement)\n        {\n            return;\n        }\n\n        if(this.componentElement != event.target &&\n           !isDescendant(this.componentElement, event.target as HTMLElement) &&\n           (!this.input.element || (this.input.element != event.target &&\n                                    !isDescendant(this.input.element, event.target as HTMLElement))))\n        {\n            this.hidePicker();\n        }\n    }\n\n    /**\n     * Handles clicking inside of picker element\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickInside(event: MouseEvent): void\n    {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMaxDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMinDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n}"]}
+{"version":3,"file":"dateTimePicker.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {ComponentRef, Directive, ElementRef, EmbeddedViewRef, Inject, Input, OnDestroy, OnInit, Optional, ViewContainerRef} from '@angular/core';\nimport {DOCUMENT} from '@angular/common';\nimport {Position, POSITION, applyPositionResult, PositionPlacement, PositionResult} from '@anglr/common';\nimport {extend, nameof, isDescendant, BindThis} from '@jscrpt/common';\nimport {Observable, Subscription} from 'rxjs';\n\nimport {DateTimeInput} from '../../../../interfaces';\nimport {DATE_TIME_INPUT} from '../../../../misc/tokens';\nimport {DateTimePickerComponent} from '../../components';\nimport {DateTimePickerOptions} from '../../components/dateTimePicker/dateTimePicker.interface';\nimport {DateTimePickerDirectiveOptions} from './dateTimePicker.interface';\nimport {DATE_TIME_PICKER_DIRECTIVE_OPTIONS} from '../../misc/tokens';\nimport {DateTimeBase} from '../../../dateTime/directives';\n\n/**\n * Default options for date time picker directive\n */\nconst defaultOptions: DateTimePickerDirectiveOptions =\n{\n    absolute: true,\n    alwaysVisible: false,\n    closeOnValueSelect: false,\n    closeOnBlur: true,\n    disabled: false,\n    positionOptions: PositionPlacement.BottomStart,\n    showOnFocus: true,\n    pickerCssClass: null,\n};\n\n/**\n * Directive that is used for displaying and attaching date time picker\n */\n@Directive(\n{\n    selector: '[dateTime][withPicker]',\n    exportAs: 'dateTimePicker'\n})\nexport class DateTimePickerDirective<TDate = unknown> extends DateTimeBase<TDate> implements OnInit, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Indication whether is value changes disabled\n     */\n    protected valueChangeDisabled: boolean = false;\n\n    /**\n     * Options for date time picker directive\n     */\n    protected ɵWithPickerOptions: DateTimePickerDirectiveOptions;\n\n    /**\n     * Date time picker component reference\n     */\n    protected componentRef: ComponentRef<DateTimePickerComponent<TDate>>|undefined|null;\n\n    /**\n     * Instance of date time picker component\n     */\n    protected component: DateTimePickerComponent<TDate>|undefined|null;\n\n    /**\n     * Instance of date time picker element\n     */\n    protected componentElement: HTMLElement|undefined|null;\n\n    /**\n     * Subscription for changes in picker\n     */\n    protected pickerChangesSubscription: Subscription|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Gets or sets options for date time picker directive\n     */\n    @Input()\n    public get withPickerOptions(): Partial<DateTimePickerDirectiveOptions>\n    {\n        return this.ɵWithPickerOptions;\n    }\n    public set withPickerOptions(value: Partial<DateTimePickerDirectiveOptions>)\n    {\n        this.ɵWithPickerOptions = extend(true, {}, this.ɵWithPickerOptions, value);\n    }\n\n    /**\n     * Options for date time picker component\n     */\n    @Input()\n    public pickerOptions: Partial<DateTimePickerOptions<TDate>>|undefined|null;\n\n    //######################### constructor #########################\n    constructor(protected viewContainer: ViewContainerRef,\n                protected element: ElementRef<HTMLElement>,\n                @Inject(DATE_TIME_INPUT) protected input: DateTimeInput<TDate>,\n                @Inject(DOCUMENT) protected document: Document,\n                @Inject(POSITION) protected position: Position,\n\n                @Inject(DATE_TIME_PICKER_DIRECTIVE_OPTIONS) @Optional() options?: DateTimePickerDirectiveOptions,)\n    {\n        super();\n\n        this.ɵWithPickerOptions = extend(true, {}, defaultOptions, options);\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public async ngOnInit(): Promise<void>\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            this.showPicker();\n        }\n\n        this.initSubscriptions.add(this.input.valueChange.subscribe(() =>\n        {\n            this.setPickerValue();\n            this.componentRef?.changeDetectorRef.detectChanges();\n        }));\n\n        this.initSubscriptions.add(this.input.focus.subscribe(() =>\n        {\n            if(this.withPickerOptions.showOnFocus)\n            {\n                this.showPicker();\n            }\n        }));\n\n        this.initSubscriptions.add(this.input.blur.subscribe(() =>\n        {\n            if(this.withPickerOptions.closeOnBlur)\n            {\n                this.hidePicker();\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.hidePicker();\n        this.initSubscriptions.unsubscribe();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Hides date time picker\n     */\n    public async showPicker(): Promise<void>\n    {\n        if(this.withPickerOptions.disabled || this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef = this.viewContainer.createComponent(DateTimePickerComponent<TDate>);\n        this.componentElement = (this.componentRef?.hostView as EmbeddedViewRef<DateTimePickerComponent<TDate>>).rootNodes[0] as HTMLElement;\n        this.component = this.componentRef.instance;\n\n        if(this.withPickerOptions.absolute)\n        {\n            this.document.body.append(this.componentElement);\n        }\n\n        this.pickerChangesSubscription = new Subscription();\n        this.pickerChangesSubscription.add(this.component.valueChange.subscribe(() =>\n        {\n            if(this.component)\n            {\n                this.valueChangeDisabled = true;\n                this.input.value = this.component.value;\n                this.input.valueChange.emit();\n                this.valueChangeDisabled = false;\n\n                if(this.ɵWithPickerOptions.closeOnValueSelect)\n                {\n                    this.hidePicker();\n                }\n            }\n        }));\n\n        this.document.addEventListener('click', this.handleClickOutside);\n        this.componentElement.addEventListener('mousedown', this.handleClickInside);\n        this.componentElement.style.position = 'absolute';\n\n        if(this.ɵWithPickerOptions.pickerCssClass)\n        {\n            this.componentElement.classList.add(this.ɵWithPickerOptions.pickerCssClass);\n        }\n\n        this.pickerChangesSubscription.add(this.positionPicker(this.componentElement, true).subscribe(result => applyPositionResult(result)));\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('options'), this.pickerOptions);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('valueFormat'), this.dateTimeData.valueFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('format'), this.dateTimeData.format);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('customFormat'), this.dateTimeData.customFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.setPickerValue();\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * Shows date time picker\n     */\n    public hidePicker(): void\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            return;\n        }\n\n        this.componentElement?.removeEventListener('mousedown', this.handleClickInside);\n        \n        this.pickerChangesSubscription?.unsubscribe();\n        this.pickerChangesSubscription = null;\n        \n        this.component = null;\n\n        this.componentRef?.destroy();\n        this.componentRef = null;\n\n        this.componentElement?.remove();\n        this.componentElement = null;\n\n        this.document.removeEventListener('click', this.handleClickOutside);\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Sets all picker value\n     */\n    protected setPickerValue(): void\n    {\n        if(this.valueChangeDisabled)\n        {\n            return;\n        }\n\n        if(this.componentRef)\n        {\n            this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n        }\n    }\n\n    /**\n     * Handles clicking outside of picker\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickOutside(event: MouseEvent): void\n    {\n        if(!this.componentElement)\n        {\n            return;\n        }\n\n        if(this.componentElement != event.target &&\n           !isDescendant(this.componentElement, event.target as HTMLElement) &&\n           (!this.input.element || (this.input.element != event.target &&\n                                    !isDescendant(this.input.element, event.target as HTMLElement))))\n        {\n            this.hidePicker();\n        }\n    }\n\n    /**\n     * Handles clicking inside of picker element\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickInside(event: MouseEvent): void\n    {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    /**\n     * Runs placement of picker component\n     * @param componentElement - Element to be positioned\n     * @param watch - Indication whether watch for changes and update position\n     */\n    protected positionPicker(componentElement: HTMLElement, watch: boolean): Observable<PositionResult<HTMLElement>>\n    {\n        return this.position.placeElement(componentElement, this.element.nativeElement,\n        {\n            flip: true,\n            placement: this.withPickerOptions.positionOptions,\n            autoUpdate: watch,\n        });\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMaxDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMinDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n}"]}

package/es2020/src/directives/index.js

@@ -0,0 +1,3 @@
+export * from './withTime/withTime.directive';
+export * from './withToday/withToday.directive';
+//# sourceMappingURL=index.js.map

package/es2020/src/directives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/directives/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './withTime/withTime.directive';\nexport * from './withToday/withToday.directive';\n"]}

package/es2020/src/directives/withTime/withTime.directive.js

@@ -0,0 +1,32 @@
+import { Directive } from '@angular/core';
+import { RollerTimePickerSAComponent, DateTimePickerDirective, DayPickerSAComponent, MonthPickerSAComponent, YearPickerSAComponent, DateTimeDirective } from '../../modules';
+import * as i0 from "@angular/core";
+import * as i1 from "../../modules";
+/**
+ * Directive that sets up usage of date time picker to use time format and time picker
+ */
+export class WithTimeSADirective {
+    //######################### constructor #########################
+    constructor(picker, dateTime) {
+        picker.pickerOptions =
+            {
+                periodsDefinition: {
+                    'time': RollerTimePickerSAComponent,
+                    'day': DayPickerSAComponent,
+                    'month': MonthPickerSAComponent,
+                    'year': YearPickerSAComponent,
+                },
+            };
+        dateTime.format = 'dateTime';
+    }
+}
+WithTimeSADirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTimeSADirective, deps: [{ token: i1.DateTimePickerDirective }, { token: i1.DateTimeDirective }], target: i0.ɵɵFactoryTarget.Directive });
+WithTimeSADirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: WithTimeSADirective, isStandalone: true, selector: "[dateTime][withPicker][withTime]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTimeSADirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dateTime][withPicker][withTime]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DateTimePickerDirective }, { type: i1.DateTimeDirective }]; } });
+//# sourceMappingURL=withTime.directive.js.map

package/es2020/src/directives/withTime/withTime.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTime.directive.js","sourceRoot":"","sources":["../../../../src/directives/withTime/withTime.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EAAC,2BAA2B,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;;;AAE3K;;GAEG;AAMH,MAAM,OAAO,mBAAmB;IAE5B,iEAAiE;IACjE,YAAY,MAAsC,EACtC,QAAkC;QAE1C,MAAM,CAAC,aAAa;YACpB;gBACI,iBAAiB,EACjB;oBACI,MAAM,EAAE,2BAA2B;oBACnC,KAAK,EAAE,oBAAoB;oBAC3B,OAAO,EAAE,sBAAsB;oBAC/B,MAAM,EAAE,qBAAqB;iBAChC;aACJ,CAAC;QAEF,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC;IACjC,CAAC;;gHAlBQ,mBAAmB;oGAAnB,mBAAmB;2FAAnB,mBAAmB;kBAL/B,SAAS;mBACV;oBACI,QAAQ,EAAE,kCAAkC;oBAC5C,UAAU,EAAE,IAAI;iBACnB","sourcesContent":["import {Directive} from '@angular/core';\n\nimport {RollerTimePickerSAComponent, DateTimePickerDirective, DayPickerSAComponent, MonthPickerSAComponent, YearPickerSAComponent, DateTimeDirective} from '../../modules';\n\n/**\n * Directive that sets up usage of date time picker to use time format and time picker\n */\n@Directive(\n{\n    selector: '[dateTime][withPicker][withTime]',\n    standalone: true,\n})\nexport class WithTimeSADirective<TDate = unknown>\n{\n    //######################### constructor #########################\n    constructor(picker: DateTimePickerDirective<TDate>,\n                dateTime: DateTimeDirective<TDate>,)\n    {\n        picker.pickerOptions = \n        {\n            periodsDefinition:\n            {\n                'time': RollerTimePickerSAComponent,\n                'day': DayPickerSAComponent,\n                'month': MonthPickerSAComponent,\n                'year': YearPickerSAComponent,\n            },\n        };\n\n        dateTime.format = 'dateTime';\n    }\n}"]}

package/es2020/src/directives/withToday/withToday.directive.js

@@ -0,0 +1,44 @@
+import { Directive, Inject } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { DATE_API } from '../../misc/tokens';
+import { DateTimeInputDirective } from '../../modules';
+import * as i0 from "@angular/core";
+import * as i1 from "../../modules";
+/**
+ * Directive that sets today as day for empty date time on focus
+ */
+export class WithTodaySADirective {
+    //######################### constructor #########################
+    constructor(input, dateApi) {
+        //######################### private fields #########################
+        /**
+         * Subscriptions created during initialization
+         */
+        this._initSubscriptions = new Subscription();
+        this._initSubscriptions.add(input.focus.subscribe(() => {
+            if (!input.value) {
+                input.value = dateApi.now().value;
+            }
+        }));
+    }
+    //######################### public methods - implementation of OnDestroy #########################
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy() {
+        this._initSubscriptions.unsubscribe();
+    }
+}
+WithTodaySADirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTodaySADirective, deps: [{ token: i1.DateTimeInputDirective }, { token: DATE_API }], target: i0.ɵɵFactoryTarget.Directive });
+WithTodaySADirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.6", type: WithTodaySADirective, isStandalone: true, selector: "[dateTime][withToday]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: WithTodaySADirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dateTime][withToday]',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DateTimeInputDirective }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DATE_API]
+                }] }]; } });
+//# sourceMappingURL=withToday.directive.js.map

package/es2020/src/directives/withToday/withToday.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withToday.directive.js","sourceRoot":"","sources":["../../../../src/directives/withToday/withToday.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAY,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,MAAM,CAAC;AAElC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,sBAAsB,EAAC,MAAM,eAAe,CAAC;;;AAGrD;;GAEG;AAMH,MAAM,OAAO,oBAAoB;IAS7B,iEAAiE;IACjE,YAAY,KAAoC,EAClB,OAAuB;QATrD,oEAAoE;QAEpE;;WAEG;QACK,uBAAkB,GAAiB,IAAI,YAAY,EAAE,CAAC;QAM1D,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;YAEnD,IAAG,CAAC,KAAK,CAAC,KAAK,EACf;gBACI,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;aACrC;QACL,CAAC,CAAC,CAAC,CAAC;IACR,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW;QAEd,IAAI,CAAC,kBAAkB,CAAC,WAAW,EAAE,CAAC;IAC1C,CAAC;;iHA9BQ,oBAAoB,wDAWT,QAAQ;qGAXnB,oBAAoB;2FAApB,oBAAoB;kBALhC,SAAS;mBACV;oBACI,QAAQ,EAAE,uBAAuB;oBACjC,UAAU,EAAE,IAAI;iBACnB;;0BAYgB,MAAM;2BAAC,QAAQ","sourcesContent":["import {Directive, Inject, OnDestroy} from '@angular/core';\nimport {Subscription} from 'rxjs';\n\nimport {DATE_API} from '../../misc/tokens';\nimport {DateTimeInputDirective} from '../../modules';\nimport {DateApi} from '../../services';\n\n/**\n * Directive that sets today as day for empty date time on focus\n */\n@Directive(\n{\n    selector: '[dateTime][withToday]',\n    standalone: true,\n})\nexport class WithTodaySADirective<TDate = unknown> implements OnDestroy\n{\n    //######################### private fields #########################\n\n    /**\n     * Subscriptions created during initialization\n     */\n    private _initSubscriptions: Subscription = new Subscription();\n\n    //######################### constructor #########################\n    constructor(input: DateTimeInputDirective<TDate>,\n                @Inject(DATE_API) dateApi: DateApi<TDate>,)\n    {\n        this._initSubscriptions.add(input.focus.subscribe(() =>\n        {\n            if(!input.value)\n            {\n                input.value = dateApi.now().value;\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._initSubscriptions.unsubscribe();\n    }\n}"]}

package/es2020/src/index.js

@@ -1,3 +1,4 @@
+export * from './directives';
 export * from './interfaces';
 export * from './legacy/picker/directives';
 export * from './legacy/picker/interfaces';

package/es2020/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './interfaces';\nexport * from './legacy/picker/directives';\nexport * from './legacy/picker/interfaces';\nexport * from './legacy/picker/modules/picker.module';\nexport * from './legacy/picker/types';\nexport * from './legacy/selector/interfaces';\nexport * from './legacy/selector/modules/basicSelector.module';\nexport * from './legacy/selector/modules/selector.module';\nexport * from './legacy/selector/types';\nexport * from './misc/constants';\nexport * from './misc/enums';\nexport * from './misc/tokens';\nexport * from './misc/types';\nexport * from './misc/utils';\nexport * from './misc/validators';\nexport * from './modules';\nexport * from './services';\nexport * from './pipes/dateConvert.pipe';\nexport * from './pipes/dateFormat.pipe';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC","sourcesContent":["export * from './directives';\nexport * from './interfaces';\nexport * from './legacy/picker/directives';\nexport * from './legacy/picker/interfaces';\nexport * from './legacy/picker/modules/picker.module';\nexport * from './legacy/picker/types';\nexport * from './legacy/selector/interfaces';\nexport * from './legacy/selector/modules/basicSelector.module';\nexport * from './legacy/selector/modules/selector.module';\nexport * from './legacy/selector/types';\nexport * from './misc/constants';\nexport * from './misc/enums';\nexport * from './misc/tokens';\nexport * from './misc/types';\nexport * from './misc/utils';\nexport * from './misc/validators';\nexport * from './modules';\nexport * from './services';\nexport * from './pipes/dateConvert.pipe';\nexport * from './pipes/dateFormat.pipe';"]}

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

@@ -134,7 +134,7 @@ export class DayPickerSAComponent extends DateTimePeriodPickerBase {
     }
 }
 DayPickerSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DayPickerSAComponent, deps: [], 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()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue ? (singleValue.value | dateFormat: 'time') : '0:00'}}</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 });
+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()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue?.isValid() ? (singleValue?.value | dateFormat: 'time') : '0:00'}}</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: {
@@ -142,6 +142,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
                     }, standalone: true, imports: [
                         CommonModule,
                         DatePipesModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue ? (singleValue.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue?.isValid() ? (singleValue?.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>" }]
         }], ctorParameters: function () { return []; } });
 //# sourceMappingURL=dayPicker.component.js.map

package/es2020/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":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} 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 {DateApiObject} 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<DayData<TDate>, TDate> implements DateTimePicker<TDate>\n{\n    //######################### protected properties #########################\n\n    /**\n     * Stored this picker month data\n     */\n    protected thisMonthData: DayData<TDate>[] = [];\n\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Names of days\n     */\n    protected weekdays: string[] = [];\n\n    //######################### constructor #########################\n    constructor()\n    {\n        super();\n\n        this.weekdays = this.dateApi.weekdaysShort();\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Selects day as value of date time picker\n     * @param dayData - Day data that were selected\n     */\n    protected selectDay(dayData: DayData<TDate>): void\n    {\n        if(dayData.disabled)\n        {\n            return;\n        }\n\n        //single value\n        if(!this.ranged)\n        {\n            //no value selected yet\n            if(!this.singleValue?.isValid())\n            {\n                this.singleValue = this.displayDate?.clone() ?? this.dateApi.getValue(new Date());\n            }\n\n            this.singleValue.year(dayData.dateObj.year());\n            this.singleValue.month(dayData.dateObj.month());\n            this.singleValue.dayOfMonth(dayData.day);\n\n            //other month was selected\n            if(dayData.otherMonth)\n            {\n                this.displayDate?.month(dayData.dateObj.month());\n            }\n\n            this.singleValue.updateOriginal();\n        }\n        else\n        {\n            //TODO: range\n        }\n\n        this.valueChangeSubject.next();\n        this.render();\n        this.changeDetector.detectChanges();\n    }\n\n    /**\n     * Changes displayed month to next month\n     */\n    protected nextMonth(): void\n    {\n        this.displayDate?.addMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    /**\n     * Changes displayed month to previous month\n     */\n    protected previousMonth(): void\n    {\n        this.displayDate?.subtractMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Renders current day picker data\n     */\n    protected render(): void\n    {\n        //same month only data change\n        if(this.displayedDate && this.displayDate?.isSameMonth(this.displayedDate))\n        {\n            this.setActive();\n            this.updateMinMax();\n\n            return;\n        }\n\n        this.displayedDate = this.displayDate?.value;\n        this.periodData = [];\n        this.thisMonthData = [];\n\n        if(!this.displayDate)\n        {\n            return;\n        }\n\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\n                const data: DayData<TDate> =\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                    dateObj: this.displayDate.clone(),\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        this.setActive();\n        this.updateMinMax();\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected onRender(): void\n    {\n        this.render();\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}","<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue ? (singleValue.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>"]}
+{"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":"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","sourcesContent":["import {Component, ChangeDetectionStrategy} 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 {DateApiObject} 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<DayData<TDate>, TDate> implements DateTimePicker<TDate>\n{\n    //######################### protected properties #########################\n\n    /**\n     * Stored this picker month data\n     */\n    protected thisMonthData: DayData<TDate>[] = [];\n\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Names of days\n     */\n    protected weekdays: string[] = [];\n\n    //######################### constructor #########################\n    constructor()\n    {\n        super();\n\n        this.weekdays = this.dateApi.weekdaysShort();\n    }\n\n    //######################### protected methods - template bindings #########################\n\n    /**\n     * Selects day as value of date time picker\n     * @param dayData - Day data that were selected\n     */\n    protected selectDay(dayData: DayData<TDate>): void\n    {\n        if(dayData.disabled)\n        {\n            return;\n        }\n\n        //single value\n        if(!this.ranged)\n        {\n            //no value selected yet\n            if(!this.singleValue?.isValid())\n            {\n                this.singleValue = this.displayDate?.clone() ?? this.dateApi.getValue(new Date());\n            }\n\n            this.singleValue.year(dayData.dateObj.year());\n            this.singleValue.month(dayData.dateObj.month());\n            this.singleValue.dayOfMonth(dayData.day);\n\n            //other month was selected\n            if(dayData.otherMonth)\n            {\n                this.displayDate?.month(dayData.dateObj.month());\n            }\n\n            this.singleValue.updateOriginal();\n        }\n        else\n        {\n            //TODO: range\n        }\n\n        this.valueChangeSubject.next();\n        this.render();\n        this.changeDetector.detectChanges();\n    }\n\n    /**\n     * Changes displayed month to next month\n     */\n    protected nextMonth(): void\n    {\n        this.displayDate?.addMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    /**\n     * Changes displayed month to previous month\n     */\n    protected previousMonth(): void\n    {\n        this.displayDate?.subtractMonths(1).updateOriginal();\n\n        this.render();\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Renders current day picker data\n     */\n    protected render(): void\n    {\n        //same month only data change\n        if(this.displayedDate && this.displayDate?.isSameMonth(this.displayedDate))\n        {\n            this.setActive();\n            this.updateMinMax();\n\n            return;\n        }\n\n        this.displayedDate = this.displayDate?.value;\n        this.periodData = [];\n        this.thisMonthData = [];\n\n        if(!this.displayDate)\n        {\n            return;\n        }\n\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\n                const data: DayData<TDate> =\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                    dateObj: this.displayDate.clone(),\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        this.setActive();\n        this.updateMinMax();\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected onRender(): void\n    {\n        this.render();\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}","<div class=\"period\">\r\n    <div class=\"fas fa-angle-left clickable\" (mousedown)=\"previousMonth()\"></div>\r\n    <div class=\"period-value\" [class.clickable]=\"canScaleUp\" (mousedown)=\"displayDate && canScaleUp ? 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()\"></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         (mousedown)=\"selectDay(day)\">{{day.day}}</div>\r\n</div>\r\n\r\n<div class=\"go-down-button\" *ngIf=\"canScaleDown\">\r\n    <div [class.clickable]=\"canScaleDown\" (mousedown)=\"displayDate ? scaleDownSubject.next(displayDate.value) : undefined\">{{singleValue?.isValid() ? (singleValue?.value | dateFormat: 'time') : '0:00'}}</div>\r\n</div>"]}

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

@@ -3,7 +3,7 @@ import { Directive, ElementRef, Inject, Input, Optional, ViewContainerRef } from
 import { DOCUMENT } from '@angular/common';
 import { POSITION, applyPositionResult, PositionPlacement } from '@anglr/common';
 import { extend, nameof, isDescendant, BindThis } from '@jscrpt/common';
-import { lastValueFrom } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { DATE_TIME_INPUT } from '../../../../misc/tokens';
 import { DateTimePickerComponent } from '../../components';
 import { DATE_TIME_PICKER_DIRECTIVE_OPTIONS } from '../../misc/tokens';
@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
 const defaultOptions = {
     absolute: true,
     alwaysVisible: false,
-    closeOnValueSelect: true,
+    closeOnValueSelect: false,
     closeOnBlur: true,
     disabled: false,
     positionOptions: PositionPlacement.BottomStart,
@@ -97,7 +97,8 @@ export class DateTimePickerDirective extends DateTimeBase {
         if (this.withPickerOptions.absolute) {
             this.document.body.append(this.componentElement);
         }
-        this.valueChangeSubscription = this.component.valueChange.subscribe(() => {
+        this.pickerChangesSubscription = new Subscription();
+        this.pickerChangesSubscription.add(this.component.valueChange.subscribe(() => {
             if (this.component) {
                 this.valueChangeDisabled = true;
                 this.input.value = this.component.value;
@@ -107,23 +108,21 @@ export class DateTimePickerDirective extends DateTimeBase {
                     this.hidePicker();
                 }
             }
-        });
+        }));
         this.document.addEventListener('click', this.handleClickOutside);
         this.componentElement.addEventListener('mousedown', this.handleClickInside);
+        this.componentElement.style.position = 'absolute';
         if (this.ɵWithPickerOptions.pickerCssClass) {
             this.componentElement.classList.add(this.ɵWithPickerOptions.pickerCssClass);
         }
-        const result = await lastValueFrom(this.position.placeElement(this.componentElement, this.element.nativeElement, {
-            placement: this.withPickerOptions.positionOptions,
-        }));
-        applyPositionResult(result);
-        this.setPickerValue();
+        this.pickerChangesSubscription.add(this.positionPicker(this.componentElement, true).subscribe(result => applyPositionResult(result)));
         this.componentRef.setInput(nameof('options'), this.pickerOptions);
         this.componentRef.setInput(nameof('valueFormat'), this.dateTimeData.valueFormat);
         this.componentRef.setInput(nameof('format'), this.dateTimeData.format);
         this.componentRef.setInput(nameof('customFormat'), this.dateTimeData.customFormat);
         this.componentRef.setInput(nameof('minDateTime'), this.dateTimeData.minDateTime);
         this.componentRef.setInput(nameof('maxDateTime'), this.dateTimeData.maxDateTime);
+        this.setPickerValue();
         this.componentRef.changeDetectorRef.detectChanges();
     }
     /**
@@ -134,8 +133,8 @@ export class DateTimePickerDirective extends DateTimeBase {
             return;
         }
         this.componentElement?.removeEventListener('mousedown', this.handleClickInside);
-        this.valueChangeSubscription?.unsubscribe();
-        this.valueChangeSubscription = null;
+        this.pickerChangesSubscription?.unsubscribe();
+        this.pickerChangesSubscription = null;
         this.component = null;
         this.componentRef?.destroy();
         this.componentRef = null;
@@ -178,6 +177,18 @@ export class DateTimePickerDirective extends DateTimeBase {
         event.preventDefault();
         event.stopPropagation();
     }
+    /**
+     * Runs placement of picker component
+     * @param componentElement - Element to be positioned
+     * @param watch - Indication whether watch for changes and update position
+     */
+    positionPicker(componentElement, watch) {
+        return this.position.placeElement(componentElement, this.element.nativeElement, {
+            flip: true,
+            placement: this.withPickerOptions.positionOptions,
+            autoUpdate: watch,
+        });
+    }
     //######################### protected methods - overrides #########################
     /**
      * @inheritdoc

package/es2020/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateTimePicker.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {ComponentRef, Directive, ElementRef, EmbeddedViewRef, Inject, Input, OnDestroy, OnInit, Optional, ViewContainerRef} from '@angular/core';\nimport {DOCUMENT} from '@angular/common';\nimport {Position, POSITION, applyPositionResult, PositionPlacement} from '@anglr/common';\nimport {extend, nameof, isDescendant, BindThis} from '@jscrpt/common';\nimport {lastValueFrom, Subscription} from 'rxjs';\n\nimport {DateTimeInput} from '../../../../interfaces';\nimport {DATE_TIME_INPUT} from '../../../../misc/tokens';\nimport {DateTimePickerComponent} from '../../components';\nimport {DateTimePickerOptions} from '../../components/dateTimePicker/dateTimePicker.interface';\nimport {DateTimePickerDirectiveOptions} from './dateTimePicker.interface';\nimport {DATE_TIME_PICKER_DIRECTIVE_OPTIONS} from '../../misc/tokens';\nimport {DateTimeBase} from '../../../dateTime/directives';\n\n/**\n * Default options for date time picker directive\n */\nconst defaultOptions: DateTimePickerDirectiveOptions =\n{\n    absolute: true,\n    alwaysVisible: false,\n    closeOnValueSelect: true,\n    closeOnBlur: true,\n    disabled: false,\n    positionOptions: PositionPlacement.BottomStart,\n    showOnFocus: true,\n    pickerCssClass: null,\n};\n\n/**\n * Directive that is used for displaying and attaching date time picker\n */\n@Directive(\n{\n    selector: '[dateTime][withPicker]',\n    exportAs: 'dateTimePicker'\n})\nexport class DateTimePickerDirective<TDate = unknown> extends DateTimeBase<TDate> implements OnInit, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Indication whether is value changes disabled\n     */\n    protected valueChangeDisabled: boolean = false;\n\n    /**\n     * Options for date time picker directive\n     */\n    protected ɵWithPickerOptions: DateTimePickerDirectiveOptions;\n\n    /**\n     * Date time picker component reference\n     */\n    protected componentRef: ComponentRef<DateTimePickerComponent<TDate>>|undefined|null;\n\n    /**\n     * Instance of date time picker component\n     */\n    protected component: DateTimePickerComponent<TDate>|undefined|null;\n\n    /**\n     * Instance of date time picker element\n     */\n    protected componentElement: HTMLElement|undefined|null;\n\n    /**\n     * Subscription for value changes in picker\n     */\n    protected valueChangeSubscription: Subscription|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Gets or sets options for date time picker directive\n     */\n    @Input()\n    public get withPickerOptions(): Partial<DateTimePickerDirectiveOptions>\n    {\n        return this.ɵWithPickerOptions;\n    }\n    public set withPickerOptions(value: Partial<DateTimePickerDirectiveOptions>)\n    {\n        this.ɵWithPickerOptions = extend(true, {}, this.ɵWithPickerOptions, value);\n    }\n\n    /**\n     * Options for date time picker component\n     */\n    @Input()\n    public pickerOptions: Partial<DateTimePickerOptions<TDate>>|undefined|null;\n\n    //######################### constructor #########################\n    constructor(protected viewContainer: ViewContainerRef,\n                protected element: ElementRef<HTMLElement>,\n                @Inject(DATE_TIME_INPUT) protected input: DateTimeInput<TDate>,\n                @Inject(DOCUMENT) protected document: Document,\n                @Inject(POSITION) protected position: Position,\n\n                @Inject(DATE_TIME_PICKER_DIRECTIVE_OPTIONS) @Optional() options?: DateTimePickerDirectiveOptions,)\n    {\n        super();\n\n        this.ɵWithPickerOptions = extend(true, {}, defaultOptions, options);\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public async ngOnInit(): Promise<void>\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            this.showPicker();\n        }\n\n        this.initSubscriptions.add(this.input.valueChange.subscribe(() =>\n        {\n            this.setPickerValue();\n            this.componentRef?.changeDetectorRef.detectChanges();\n        }));\n\n        this.initSubscriptions.add(this.input.focus.subscribe(() =>\n        {\n            if(this.withPickerOptions.showOnFocus)\n            {\n                this.showPicker();\n            }\n        }));\n\n        this.initSubscriptions.add(this.input.blur.subscribe(() =>\n        {\n            if(this.withPickerOptions.closeOnBlur)\n            {\n                this.hidePicker();\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.hidePicker();\n        this.initSubscriptions.unsubscribe();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Hides date time picker\n     */\n    public async showPicker(): Promise<void>\n    {\n        if(this.withPickerOptions.disabled || this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef = this.viewContainer.createComponent(DateTimePickerComponent<TDate>);\n        this.componentElement = (this.componentRef?.hostView as EmbeddedViewRef<DateTimePickerComponent<TDate>>).rootNodes[0] as HTMLElement;\n        this.component = this.componentRef.instance;\n\n        if(this.withPickerOptions.absolute)\n        {\n            this.document.body.append(this.componentElement);\n        }\n\n        this.valueChangeSubscription = this.component.valueChange.subscribe(() =>\n        {\n            if(this.component)\n            {\n                this.valueChangeDisabled = true;\n                this.input.value = this.component.value;\n                this.input.valueChange.emit();\n                this.valueChangeDisabled = false;\n\n                if(this.ɵWithPickerOptions.closeOnValueSelect)\n                {\n                    this.hidePicker();\n                }\n            }\n        });\n\n        this.document.addEventListener('click', this.handleClickOutside);\n        this.componentElement.addEventListener('mousedown', this.handleClickInside);\n\n        if(this.ɵWithPickerOptions.pickerCssClass)\n        {\n            this.componentElement.classList.add(this.ɵWithPickerOptions.pickerCssClass);\n        }\n\n        const result = await lastValueFrom(this.position.placeElement(this.componentElement, this.element.nativeElement,\n        {\n            placement: this.withPickerOptions.positionOptions,\n        }));\n\n        applyPositionResult(result);\n        this.setPickerValue();\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('options'), this.pickerOptions);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('valueFormat'), this.dateTimeData.valueFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('format'), this.dateTimeData.format);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('customFormat'), this.dateTimeData.customFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * Shows date time picker\n     */\n    public hidePicker(): void\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            return;\n        }\n        \n        this.componentElement?.removeEventListener('mousedown', this.handleClickInside);\n        \n        this.valueChangeSubscription?.unsubscribe();\n        this.valueChangeSubscription = null;\n        \n        this.component = null;\n\n        this.componentRef?.destroy();\n        this.componentRef = null;\n\n        this.componentElement?.remove();\n        this.componentElement = null;\n\n        this.document.removeEventListener('click', this.handleClickOutside);\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Sets all picker value\n     */\n    protected setPickerValue(): void\n    {\n        if(this.valueChangeDisabled)\n        {\n            return;\n        }\n\n        if(this.componentRef)\n        {\n            this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n        }\n    }\n\n    /**\n     * Handles clicking outside of picker\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickOutside(event: MouseEvent): void\n    {\n        if(!this.componentElement)\n        {\n            return;\n        }\n\n        if(this.componentElement != event.target &&\n           !isDescendant(this.componentElement, event.target as HTMLElement) &&\n           (!this.input.element || (this.input.element != event.target &&\n                                    !isDescendant(this.input.element, event.target as HTMLElement))))\n        {\n            this.hidePicker();\n        }\n    }\n\n    /**\n     * Handles clicking inside of picker element\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickInside(event: MouseEvent): void\n    {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMaxDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMinDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n}"]}
+{"version":3,"file":"dateTimePicker.directive.js","sourceRoot":"","sources":["../../../../../../src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.ts"],"names":[],"mappings":"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","sourcesContent":["import {ComponentRef, Directive, ElementRef, EmbeddedViewRef, Inject, Input, OnDestroy, OnInit, Optional, ViewContainerRef} from '@angular/core';\nimport {DOCUMENT} from '@angular/common';\nimport {Position, POSITION, applyPositionResult, PositionPlacement, PositionResult} from '@anglr/common';\nimport {extend, nameof, isDescendant, BindThis} from '@jscrpt/common';\nimport {Observable, Subscription} from 'rxjs';\n\nimport {DateTimeInput} from '../../../../interfaces';\nimport {DATE_TIME_INPUT} from '../../../../misc/tokens';\nimport {DateTimePickerComponent} from '../../components';\nimport {DateTimePickerOptions} from '../../components/dateTimePicker/dateTimePicker.interface';\nimport {DateTimePickerDirectiveOptions} from './dateTimePicker.interface';\nimport {DATE_TIME_PICKER_DIRECTIVE_OPTIONS} from '../../misc/tokens';\nimport {DateTimeBase} from '../../../dateTime/directives';\n\n/**\n * Default options for date time picker directive\n */\nconst defaultOptions: DateTimePickerDirectiveOptions =\n{\n    absolute: true,\n    alwaysVisible: false,\n    closeOnValueSelect: false,\n    closeOnBlur: true,\n    disabled: false,\n    positionOptions: PositionPlacement.BottomStart,\n    showOnFocus: true,\n    pickerCssClass: null,\n};\n\n/**\n * Directive that is used for displaying and attaching date time picker\n */\n@Directive(\n{\n    selector: '[dateTime][withPicker]',\n    exportAs: 'dateTimePicker'\n})\nexport class DateTimePickerDirective<TDate = unknown> extends DateTimeBase<TDate> implements OnInit, OnDestroy\n{\n    //######################### protected properties #########################\n\n    /**\n     * Indication whether is value changes disabled\n     */\n    protected valueChangeDisabled: boolean = false;\n\n    /**\n     * Options for date time picker directive\n     */\n    protected ɵWithPickerOptions: DateTimePickerDirectiveOptions;\n\n    /**\n     * Date time picker component reference\n     */\n    protected componentRef: ComponentRef<DateTimePickerComponent<TDate>>|undefined|null;\n\n    /**\n     * Instance of date time picker component\n     */\n    protected component: DateTimePickerComponent<TDate>|undefined|null;\n\n    /**\n     * Instance of date time picker element\n     */\n    protected componentElement: HTMLElement|undefined|null;\n\n    /**\n     * Subscription for changes in picker\n     */\n    protected pickerChangesSubscription: Subscription|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Gets or sets options for date time picker directive\n     */\n    @Input()\n    public get withPickerOptions(): Partial<DateTimePickerDirectiveOptions>\n    {\n        return this.ɵWithPickerOptions;\n    }\n    public set withPickerOptions(value: Partial<DateTimePickerDirectiveOptions>)\n    {\n        this.ɵWithPickerOptions = extend(true, {}, this.ɵWithPickerOptions, value);\n    }\n\n    /**\n     * Options for date time picker component\n     */\n    @Input()\n    public pickerOptions: Partial<DateTimePickerOptions<TDate>>|undefined|null;\n\n    //######################### constructor #########################\n    constructor(protected viewContainer: ViewContainerRef,\n                protected element: ElementRef<HTMLElement>,\n                @Inject(DATE_TIME_INPUT) protected input: DateTimeInput<TDate>,\n                @Inject(DOCUMENT) protected document: Document,\n                @Inject(POSITION) protected position: Position,\n\n                @Inject(DATE_TIME_PICKER_DIRECTIVE_OPTIONS) @Optional() options?: DateTimePickerDirectiveOptions,)\n    {\n        super();\n\n        this.ɵWithPickerOptions = extend(true, {}, defaultOptions, options);\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public async ngOnInit(): Promise<void>\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            this.showPicker();\n        }\n\n        this.initSubscriptions.add(this.input.valueChange.subscribe(() =>\n        {\n            this.setPickerValue();\n            this.componentRef?.changeDetectorRef.detectChanges();\n        }));\n\n        this.initSubscriptions.add(this.input.focus.subscribe(() =>\n        {\n            if(this.withPickerOptions.showOnFocus)\n            {\n                this.showPicker();\n            }\n        }));\n\n        this.initSubscriptions.add(this.input.blur.subscribe(() =>\n        {\n            if(this.withPickerOptions.closeOnBlur)\n            {\n                this.hidePicker();\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.hidePicker();\n        this.initSubscriptions.unsubscribe();\n    }\n\n    //######################### public methods #########################\n\n    /**\n     * Hides date time picker\n     */\n    public async showPicker(): Promise<void>\n    {\n        if(this.withPickerOptions.disabled || this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef = this.viewContainer.createComponent(DateTimePickerComponent<TDate>);\n        this.componentElement = (this.componentRef?.hostView as EmbeddedViewRef<DateTimePickerComponent<TDate>>).rootNodes[0] as HTMLElement;\n        this.component = this.componentRef.instance;\n\n        if(this.withPickerOptions.absolute)\n        {\n            this.document.body.append(this.componentElement);\n        }\n\n        this.pickerChangesSubscription = new Subscription();\n        this.pickerChangesSubscription.add(this.component.valueChange.subscribe(() =>\n        {\n            if(this.component)\n            {\n                this.valueChangeDisabled = true;\n                this.input.value = this.component.value;\n                this.input.valueChange.emit();\n                this.valueChangeDisabled = false;\n\n                if(this.ɵWithPickerOptions.closeOnValueSelect)\n                {\n                    this.hidePicker();\n                }\n            }\n        }));\n\n        this.document.addEventListener('click', this.handleClickOutside);\n        this.componentElement.addEventListener('mousedown', this.handleClickInside);\n        this.componentElement.style.position = 'absolute';\n\n        if(this.ɵWithPickerOptions.pickerCssClass)\n        {\n            this.componentElement.classList.add(this.ɵWithPickerOptions.pickerCssClass);\n        }\n\n        this.pickerChangesSubscription.add(this.positionPicker(this.componentElement, true).subscribe(result => applyPositionResult(result)));\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('options'), this.pickerOptions);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('valueFormat'), this.dateTimeData.valueFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('format'), this.dateTimeData.format);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('customFormat'), this.dateTimeData.customFormat);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.setPickerValue();\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * Shows date time picker\n     */\n    public hidePicker(): void\n    {\n        if(this.withPickerOptions.alwaysVisible)\n        {\n            return;\n        }\n\n        this.componentElement?.removeEventListener('mousedown', this.handleClickInside);\n        \n        this.pickerChangesSubscription?.unsubscribe();\n        this.pickerChangesSubscription = null;\n        \n        this.component = null;\n\n        this.componentRef?.destroy();\n        this.componentRef = null;\n\n        this.componentElement?.remove();\n        this.componentElement = null;\n\n        this.document.removeEventListener('click', this.handleClickOutside);\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Sets all picker value\n     */\n    protected setPickerValue(): void\n    {\n        if(this.valueChangeDisabled)\n        {\n            return;\n        }\n\n        if(this.componentRef)\n        {\n            this.componentRef.setInput(nameof<DateTimePickerComponent>('value'), this.input.value);\n        }\n    }\n\n    /**\n     * Handles clicking outside of picker\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickOutside(event: MouseEvent): void\n    {\n        if(!this.componentElement)\n        {\n            return;\n        }\n\n        if(this.componentElement != event.target &&\n           !isDescendant(this.componentElement, event.target as HTMLElement) &&\n           (!this.input.element || (this.input.element != event.target &&\n                                    !isDescendant(this.input.element, event.target as HTMLElement))))\n        {\n            this.hidePicker();\n        }\n    }\n\n    /**\n     * Handles clicking inside of picker element\n     * @param event - Event that occured\n     */\n    @BindThis\n    protected handleClickInside(event: MouseEvent): void\n    {\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    /**\n     * Runs placement of picker component\n     * @param componentElement - Element to be positioned\n     * @param watch - Indication whether watch for changes and update position\n     */\n    protected positionPicker(componentElement: HTMLElement, watch: boolean): Observable<PositionResult<HTMLElement>>\n    {\n        return this.position.placeElement(componentElement, this.element.nativeElement,\n        {\n            flip: true,\n            placement: this.withPickerOptions.positionOptions,\n            autoUpdate: watch,\n        });\n    }\n\n    //######################### protected methods - overrides #########################\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMaxDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('maxDateTime'), this.dateTimeData.maxDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n\n    /**\n     * @inheritdoc\n     */\n    protected override onMinDateTimeChange(): void\n    {\n        if(!this.componentRef)\n        {\n            return;\n        }\n\n        this.componentRef.setInput(nameof<DateTimePickerComponent>('minDateTime'), this.dateTimeData.minDateTime);\n        this.componentRef.changeDetectorRef.detectChanges();\n    }\n}"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@anglr/datetime",
-    "version": "5.0.0-beta.20221021035527",
+    "version": "5.0.0-beta.20221021074029",
     "description": "Angular library for datetime manipulation components",
     "type": "module",
     "sideEffects": false,

package/src/directives/index.d.ts

@@ -0,0 +1,3 @@
+export * from './withTime/withTime.directive';
+export * from './withToday/withToday.directive';
+//# sourceMappingURL=index.d.ts.map

package/src/directives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC"}

package/src/directives/withTime/withTime.directive.d.ts

@@ -0,0 +1,11 @@
+import { DateTimePickerDirective, DateTimeDirective } from '../../modules';
+import * as i0 from "@angular/core";
+/**
+ * Directive that sets up usage of date time picker to use time format and time picker
+ */
+export declare class WithTimeSADirective<TDate = unknown> {
+    constructor(picker: DateTimePickerDirective<TDate>, dateTime: DateTimeDirective<TDate>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<WithTimeSADirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WithTimeSADirective<any>, "[dateTime][withPicker][withTime]", never, {}, {}, never, never, true>;
+}
+//# sourceMappingURL=withTime.directive.d.ts.map

package/src/directives/withTime/withTime.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withTime.directive.d.ts","sourceRoot":"","sources":["withTime.directive.ts"],"names":[],"mappings":"AAEA,OAAO,EAA8B,uBAAuB,EAAuE,iBAAiB,EAAC,MAAM,eAAe,CAAC;;AAE3K;;GAEG;AACH,qBAKa,mBAAmB,CAAC,KAAK,GAAG,OAAO;gBAGhC,MAAM,EAAE,uBAAuB,CAAC,KAAK,CAAC,EACtC,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC;yCAJrC,mBAAmB;2CAAnB,mBAAmB;CAmB/B"}

package/src/directives/withToday/withToday.directive.d.ts

@@ -0,0 +1,21 @@
+import { OnDestroy } from '@angular/core';
+import { DateTimeInputDirective } from '../../modules';
+import { DateApi } from '../../services';
+import * as i0 from "@angular/core";
+/**
+ * Directive that sets today as day for empty date time on focus
+ */
+export declare class WithTodaySADirective<TDate = unknown> implements OnDestroy {
+    /**
+     * Subscriptions created during initialization
+     */
+    private _initSubscriptions;
+    constructor(input: DateTimeInputDirective<TDate>, dateApi: DateApi<TDate>);
+    /**
+     * Called when component is destroyed
+     */
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WithTodaySADirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<WithTodaySADirective<any>, "[dateTime][withToday]", never, {}, {}, never, never, true>;
+}
+//# sourceMappingURL=withToday.directive.d.ts.map

package/src/directives/withToday/withToday.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withToday.directive.d.ts","sourceRoot":"","sources":["withToday.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,SAAS,EAAC,MAAM,eAAe,CAAC;AAI3D,OAAO,EAAC,sBAAsB,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAC,OAAO,EAAC,MAAM,gBAAgB,CAAC;;AAEvC;;GAEG;AACH,qBAKa,oBAAoB,CAAC,KAAK,GAAG,OAAO,CAAE,YAAW,SAAS;IAInE;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAoC;gBAGlD,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,EAClB,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC;IAarD;;OAEG;IACI,WAAW,IAAI,IAAI;yCA3BjB,oBAAoB;2CAApB,oBAAoB;CA+BhC"}

package/src/index.d.ts

@@ -1,3 +1,4 @@
+export * from './directives';
 export * from './interfaces';
 export * from './legacy/picker/directives';
 export * from './legacy/picker/interfaces';

package/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}

package/src/modules/dateTimePicker/components/dayPicker/dayPicker.component.html

@@ -17,5 +17,5 @@
 </div>
 
 <div class="go-down-button" *ngIf="canScaleDown">
-    <div [class.clickable]="canScaleDown" (mousedown)="displayDate ? scaleDownSubject.next(displayDate.value) : undefined">{{singleValue ? (singleValue.value | dateFormat: 'time') : '0:00'}}</div>
+    <div [class.clickable]="canScaleDown" (mousedown)="displayDate ? scaleDownSubject.next(displayDate.value) : undefined">{{singleValue?.isValid() ? (singleValue?.value | dateFormat: 'time') : '0:00'}}</div>
 </div>

package/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.d.ts

@@ -1,6 +1,6 @@
 import { ComponentRef, ElementRef, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
-import { Position } from '@anglr/common';
-import { Subscription } from 'rxjs';
+import { Position, PositionResult } from '@anglr/common';
+import { Observable, Subscription } from 'rxjs';
 import { DateTimeInput } from '../../../../interfaces';
 import { DateTimePickerComponent } from '../../components';
 import { DateTimePickerOptions } from '../../components/dateTimePicker/dateTimePicker.interface';
@@ -37,9 +37,9 @@ export declare class DateTimePickerDirective<TDate = unknown> extends DateTimeBa
      */
     protected componentElement: HTMLElement | undefined | null;
     /**
-     * Subscription for value changes in picker
+     * Subscription for changes in picker
      */
-    protected valueChangeSubscription: Subscription | undefined | null;
+    protected pickerChangesSubscription: Subscription | undefined | null;
     /**
      * Gets or sets options for date time picker directive
      */
@@ -80,6 +80,12 @@ export declare class DateTimePickerDirective<TDate = unknown> extends DateTimeBa
      * @param event - Event that occured
      */
     protected handleClickInside(event: MouseEvent): void;
+    /**
+     * Runs placement of picker component
+     * @param componentElement - Element to be positioned
+     * @param watch - Indication whether watch for changes and update position
+     */
+    protected positionPicker(componentElement: HTMLElement, watch: boolean): Observable<PositionResult<HTMLElement>>;
     /**
      * @inheritdoc
      */

package/src/modules/dateTimePicker/directives/dateTimePicker/dateTimePicker.directive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dateTimePicker.directive.d.ts","sourceRoot":"","sources":["dateTimePicker.directive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAa,UAAU,EAAkC,SAAS,EAAE,MAAM,EAAY,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAEjJ,OAAO,EAAC,QAAQ,EAAmD,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAgB,YAAY,EAAC,MAAM,MAAM,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAC,uBAAuB,EAAC,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAC,qBAAqB,EAAC,MAAM,0DAA0D,CAAC;AAC/F,OAAO,EAAC,8BAA8B,EAAC,MAAM,4BAA4B,CAAC;AAE1E,OAAO,EAAC,YAAY,EAAC,MAAM,8BAA8B,CAAC;;AAiB1D;;GAEG;AACH,qBAKa,uBAAuB,CAAC,KAAK,GAAG,OAAO,CAAE,SAAQ,YAAY,CAAC,KAAK,CAAE,YAAW,MAAM,EAAE,SAAS;IAwD9F,SAAS,CAAC,aAAa,EAAE,gBAAgB;IACzC,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC;IACjB,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;IAC5C,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAC5B,SAAS,CAAC,QAAQ,EAAE,QAAQ;IAxD1D;;OAEG;IACH,SAAS,CAAC,mBAAmB,EAAE,OAAO,CAAS;IAE/C;;OAEG;IACH,SAAS,CAAC,kBAAkB,EAAE,8BAA8B,CAAC;IAE7D;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,YAAY,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC;IAEpF;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,uBAAuB,CAAC,KAAK,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC;IAEnE;;OAEG;IACH,SAAS,CAAC,gBAAgB,EAAE,WAAW,GAAC,SAAS,GAAC,IAAI,CAAC;IAEvD;;OAEG;IACH,SAAS,CAAC,uBAAuB,EAAE,YAAY,GAAC,SAAS,GAAC,IAAI,CAAC;IAI/D;;OAEG;IACH,IACW,iBAAiB,IAAI,OAAO,CAAC,8BAA8B,CAAC,CAGtE;IACD,IAAW,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,8BAA8B,CAAC,EAG1E;IAED;;OAEG;IAEI,aAAa,EAAE,OAAO,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC;gBAGrD,aAAa,EAAE,gBAAgB,EAC/B,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,EACP,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAClC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAEU,OAAO,CAAC,EAAE,8BAA8B;IAS5G;;OAEG;IACU,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAgCtC;;OAEG;IACa,WAAW,IAAI,IAAI;IAUnC;;OAEG;IACU,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAwDxC;;OAEG;IACI,UAAU,IAAI,IAAI;IAyBzB;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAahC;;;OAGG;IAEH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAgBrD;;;OAGG;IAEH,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAQpD;;OAEG;cACgB,mBAAmB,IAAI,IAAI;IAW9C;;OAEG;cACgB,mBAAmB,IAAI,IAAI;yCAjRrC,uBAAuB;2CAAvB,uBAAuB;CA2RnC"}
+{"version":3,"file":"dateTimePicker.directive.d.ts","sourceRoot":"","sources":["dateTimePicker.directive.ts"],"names":[],"mappings":"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"}

package/styles/components/_date-time-picker.scss

@@ -2,8 +2,7 @@
 {
     date-time-picker
     {
-        display: block;
-        position: absolute;
+        display: inline-block;
 
         background-color: var(--datetime-date-time-picker-background);
         border: 1px solid var(--datetime-date-time-picker-border);

package/version.bak

@@ -1 +1 @@
-5.0.0-beta.20221021035527 
+5.0.0-beta.20221021074029