nxt-pick-datetime 10.0.0 → 13.0.0

package/{fesm2015/nxt-pick-datetime.js → fesm2020/nxt-pick-datetime.mjs}

@@ -1,14 +1,19 @@
-import { InjectionToken, inject, LOCALE_ID, EventEmitter, Component, ChangeDetectionStrategy, ElementRef, NgZone, Input, Output, HostBinding, ChangeDetectorRef, Optional, Inject, ViewChild, ɵɵdefineInjectable, Injectable, Directive, HostListener, forwardRef, TemplateRef, Injector, SkipSelf, ViewContainerRef, Renderer2, NgModule, Pipe } from '@angular/core';
-import { Subject, Subscription, defer, merge, of } from 'rxjs';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, LOCALE_ID, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostBinding, Optional, Inject, ViewChild, Injectable, Directive, Pipe, HostListener, forwardRef, TemplateRef, Injector, SkipSelf, NgModule } from '@angular/core';
+import { Subject, Subscription, of, merge, defer } from 'rxjs';
 import { coerceNumberProperty, coerceBooleanProperty, coerceArray } from '@angular/cdk/coercion';
 import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, SPACE, ESCAPE } from '@angular/cdk/keycodes';
-import { take, filter, startWith, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { take, debounceTime, distinctUntilChanged, filter, concatAll } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators } from '@angular/forms';
 import { trigger, state, style, transition, group, query, animateChild, animate, keyframes } from '@angular/animations';
-import { NoopScrollStrategy, Overlay, OverlayConfig, OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
-import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalInjector, PortalModule } from '@angular/cdk/portal';
-import { DOCUMENT, Location, CommonModule } from '@angular/common';
-import { FocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
+import * as i1$2 from '@angular/cdk/overlay';
+import { NoopScrollStrategy, Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import * as i2 from '@angular/cdk/portal';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 
 /** InjectionToken for date time picker that can be used to override default locale code. */
 const OWL_DATE_TIME_LOCALE = new InjectionToken('OWL_DATE_TIME_LOCALE', {
@@ -238,32 +243,31 @@ class OwlCalendarBodyComponent {
         });
     }
 }
-OwlCalendarBodyComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line:component-selector
-                selector: '[owl-date-time-calendar-body]',
-                exportAs: 'owlDateTimeCalendarBody',
-                template: "<tr *ngFor=\"let row of rows; let rowIndex = index\"\n    role=\"row\">\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"owl-dt-calendar-cell {{item.cellClass}}\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n        [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n        [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n        [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [style.width.%]=\"100 / numCols\"\n        [style.paddingTop.%]=\"50 * cellRatio / numCols\"\n        [style.paddingBottom.%]=\"50 * cellRatio / numCols\"\n        (click)=\"selectCell(item)\">\n        <span class=\"owl-dt-calendar-cell-content\"\n            [ngClass]=\"{\n                'owl-dt-calendar-cell-out': item.out,\n                'owl-dt-calendar-cell-today': item.value === todayValue,\n                'owl-dt-calendar-cell-selected': isSelected(item.value)\n              }\">\n            {{item.displayValue}}\n        </span>\n    </td>\n</tr>\n",
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OwlCalendarBodyComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: NgZone }
-];
-OwlCalendarBodyComponent.propDecorators = {
-    activeCell: [{ type: Input }],
-    rows: [{ type: Input }],
-    numCols: [{ type: Input }],
-    cellRatio: [{ type: Input }],
-    todayValue: [{ type: Input }],
-    selectedValues: [{ type: Input }],
-    selectMode: [{ type: Input }],
-    select: [{ type: Output }],
-    owlDTCalendarBodyClass: [{ type: HostBinding, args: ['class.owl-dt-calendar-body',] }]
-};
+OwlCalendarBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlCalendarBodyComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+OwlCalendarBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: { activeCell: "activeCell", rows: "rows", numCols: "numCols", cellRatio: "cellRatio", todayValue: "todayValue", selectedValues: "selectedValues", selectMode: "selectMode" }, outputs: { select: "select" }, host: { properties: { "class.owl-dt-calendar-body": "this.owlDTCalendarBodyClass" } }, exportAs: ["owlDateTimeCalendarBody"], ngImport: i0, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\"\n    role=\"row\">\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"owl-dt-calendar-cell {{item.cellClass}}\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n        [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n        [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n        [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [style.width.%]=\"100 / numCols\"\n        [style.paddingTop.%]=\"50 * cellRatio / numCols\"\n        [style.paddingBottom.%]=\"50 * cellRatio / numCols\"\n        (click)=\"selectCell(item)\">\n        <span class=\"owl-dt-calendar-cell-content\"\n            [ngClass]=\"{\n                'owl-dt-calendar-cell-out': item.out,\n                'owl-dt-calendar-cell-today': item.value === todayValue,\n                'owl-dt-calendar-cell-selected': isSelected(item.value)\n              }\">\n            {{item.displayValue}}\n        </span>\n    </td>\n</tr>\n", styles: [""], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlCalendarBodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[owl-date-time-calendar-body]', exportAs: 'owlDateTimeCalendarBody', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr *ngFor=\"let row of rows; let rowIndex = index\"\n    role=\"row\">\n    <td *ngFor=\"let item of row; let colIndex = index\"\n        class=\"owl-dt-calendar-cell {{item.cellClass}}\"\n        [tabindex]=\"isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n        [class.owl-dt-calendar-cell-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.owl-dt-calendar-cell-disabled]=\"!item.enabled\"\n        [class.owl-dt-calendar-cell-in-range]=\"isInRange(item.value)\"\n        [class.owl-dt-calendar-cell-range-from]=\"isRangeFrom(item.value)\"\n        [class.owl-dt-calendar-cell-range-to]=\"isRangeTo(item.value)\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [style.width.%]=\"100 / numCols\"\n        [style.paddingTop.%]=\"50 * cellRatio / numCols\"\n        [style.paddingBottom.%]=\"50 * cellRatio / numCols\"\n        (click)=\"selectCell(item)\">\n        <span class=\"owl-dt-calendar-cell-content\"\n            [ngClass]=\"{\n                'owl-dt-calendar-cell-out': item.out,\n                'owl-dt-calendar-cell-today': item.value === todayValue,\n                'owl-dt-calendar-cell-selected': isSelected(item.value)\n              }\">\n            {{item.displayValue}}\n        </span>\n    </td>\n</tr>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { activeCell: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], numCols: [{
+                type: Input
+            }], cellRatio: [{
+                type: Input
+            }], todayValue: [{
+                type: Input
+            }], selectedValues: [{
+                type: Input
+            }], selectMode: [{
+                type: Input
+            }], select: [{
+                type: Output
+            }], owlDTCalendarBodyClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-body']
+            }] } });
 
 const DAYS_PER_WEEK = 7;
 const WEEKS_PER_VIEW = 6;
@@ -526,9 +530,7 @@ class OwlMonthViewComponent {
         const shortWeekdays = this.dateTimeAdapter.getDayOfWeekNames('short');
         const narrowWeekdays = this.dateTimeAdapter.getDayOfWeekNames('narrow');
         const firstDayOfWeek = this.firstDayOfWeek;
-        const weekdays = longWeekdays.map((long, i) => {
-            return { long, short: shortWeekdays[i], narrow: narrowWeekdays[i] };
-        });
+        const weekdays = longWeekdays.map((long, i) => ({ long, short: shortWeekdays[i], narrow: narrowWeekdays[i] }));
         this._weekdays = weekdays
             .slice(firstDayOfWeek)
             .concat(weekdays.slice(0, firstDayOfWeek));
@@ -651,37 +653,49 @@ class OwlMonthViewComponent {
         this.calendarBodyElm.focusActiveCell();
     }
 }
-OwlMonthViewComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'owl-date-time-month-view',
-                exportAs: 'owlYearView',
-                template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n    [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr class=\"owl-dt-weekdays\">\n            <th *ngFor=\"let weekday of weekdays\"\n                [attr.aria-label]=\"weekday.long\"\n                class=\"owl-dt-weekday\"\n                scope=\"col\">\n                <span>{{weekday.short}}</span>\n            </th>\n        </tr>\n        <tr>\n            <th class=\"owl-dt-calendar-table-divider\"\n                aria-hidden=\"true\"\n                colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"days\"\n        [todayValue]=\"todayDate\"\n        [selectedValues]=\"selectedDates\"\n        [selectMode]=\"selectMode\"\n        [activeCell]=\"activeCell\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n",
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OwlMonthViewComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DATE_TIME_FORMATS,] }] }
-];
-OwlMonthViewComponent.propDecorators = {
-    hideOtherMonths: [{ type: Input }],
-    firstDayOfWeek: [{ type: Input }],
-    selectMode: [{ type: Input }],
-    selected: [{ type: Input }],
-    selecteds: [{ type: Input }],
-    pickerMoment: [{ type: Input }],
-    dateFilter: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }],
-    selectedChange: [{ type: Output }],
-    userSelection: [{ type: Output }],
-    pickerMomentChange: [{ type: Output }],
-    calendarBodyElm: [{ type: ViewChild, args: [OwlCalendarBodyComponent, { static: true },] }],
-    owlDTCalendarView: [{ type: HostBinding, args: ['class.owl-dt-calendar-view',] }]
-};
+OwlMonthViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlMonthViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlMonthViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlMonthViewComponent, selector: "owl-date-time-month-view", inputs: { hideOtherMonths: "hideOtherMonths", firstDayOfWeek: "firstDayOfWeek", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { selectedChange: "selectedChange", userSelection: "userSelection", pickerMomentChange: "pickerMomentChange" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlYearView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n    [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr class=\"owl-dt-weekdays\">\n            <th *ngFor=\"let weekday of weekdays\"\n                [attr.aria-label]=\"weekday.long\"\n                class=\"owl-dt-weekday\"\n                scope=\"col\">\n                <span>{{weekday.short}}</span>\n            </th>\n        </tr>\n        <tr>\n            <th class=\"owl-dt-calendar-table-divider\"\n                aria-hidden=\"true\"\n                colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"days\"\n        [todayValue]=\"todayDate\"\n        [selectedValues]=\"selectedDates\"\n        [selectMode]=\"selectMode\"\n        [activeCell]=\"activeCell\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlMonthViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'owl-date-time-month-view', exportAs: 'owlYearView', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-month-table\"\n    [class.owl-dt-calendar-only-current-month]=\"hideOtherMonths\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr class=\"owl-dt-weekdays\">\n            <th *ngFor=\"let weekday of weekdays\"\n                [attr.aria-label]=\"weekday.long\"\n                class=\"owl-dt-weekday\"\n                scope=\"col\">\n                <span>{{weekday.short}}</span>\n            </th>\n        </tr>\n        <tr>\n            <th class=\"owl-dt-calendar-table-divider\"\n                aria-hidden=\"true\"\n                colspan=\"7\"></th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"days\"\n        [todayValue]=\"todayDate\"\n        [selectedValues]=\"selectedDates\"\n        [selectMode]=\"selectMode\"\n        [activeCell]=\"activeCell\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DATE_TIME_FORMATS]
+                }] }]; }, propDecorators: { hideOtherMonths: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], selectMode: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selecteds: [{
+                type: Input
+            }], pickerMoment: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], userSelection: [{
+                type: Output
+            }], pickerMomentChange: [{
+                type: Output
+            }], calendarBodyElm: [{
+                type: ViewChild,
+                args: [OwlCalendarBodyComponent, { static: true }]
+            }], owlDTCalendarView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-view']
+            }] } });
 
 class OwlDateTimeIntl {
     constructor() {
@@ -691,53 +705,55 @@ class OwlDateTimeIntl {
          */
         this.changes = new Subject();
         /** A label for the up second button (used by screen readers).  */
-        this.upSecondLabel = 'Add a second';
+        this.upSecondLabel = $localize `:@@nxt-pick-datetime.up-second:Add a second`;
         /** A label for the down second button (used by screen readers).  */
-        this.downSecondLabel = 'Minus a second';
+        this.downSecondLabel = $localize `:@@nxt-pick-datetime.down-second:Minus a second`;
         /** A label for the up minute button (used by screen readers).  */
-        this.upMinuteLabel = 'Add a minute';
+        this.upMinuteLabel = $localize `:@@nxt-pick-datetime.up-minute:Add a minute`;
         /** A label for the down minute button (used by screen readers).  */
-        this.downMinuteLabel = 'Minus a minute';
+        this.downMinuteLabel = $localize `:@@nxt-pick-datetime.down-minute:Minus a minute`;
         /** A label for the up hour button (used by screen readers).  */
-        this.upHourLabel = 'Add a hour';
+        this.upHourLabel = $localize `:@@nxt-pick-datetime.up-hour:Add a hour`;
         /** A label for the down hour button (used by screen readers).  */
-        this.downHourLabel = 'Minus a hour';
+        this.downHourLabel = $localize `:@@nxt-pick-datetime.down-hour:Minus a hour`;
         /** A label for the previous month button (used by screen readers). */
-        this.prevMonthLabel = 'Previous month';
+        this.prevMonthLabel = $localize `:@@nxt-pick-datetime.prev-month:Previous month`;
         /** A label for the next month button (used by screen readers). */
-        this.nextMonthLabel = 'Next month';
+        this.nextMonthLabel = $localize `:@@nxt-pick-datetime.next-month:Next month`;
         /** A label for the previous year button (used by screen readers). */
-        this.prevYearLabel = 'Previous year';
+        this.prevYearLabel = $localize `:@@nxt-pick-datetime.prev-year:Previous year`;
         /** A label for the next year button (used by screen readers). */
-        this.nextYearLabel = 'Next year';
+        this.nextYearLabel = $localize `:@@nxt-pick-datetime.next-year:Next year`;
         /** A label for the previous multi-year button (used by screen readers). */
-        this.prevMultiYearLabel = 'Previous 21 years';
+        this.prevMultiYearLabel = $localize `:@@nxt-pick-datetime.prev-multi-year:Previous 21 years`;
         /** A label for the next multi-year button (used by screen readers). */
-        this.nextMultiYearLabel = 'Next 21 years';
+        this.nextMultiYearLabel = $localize `:@@nxt-pick-datetime.next-multi-year:Next 21 years`;
         /** A label for the 'switch to month view' button (used by screen readers). */
-        this.switchToMonthViewLabel = 'Change to month view';
+        this.switchToMonthViewLabel = $localize `:@@nxt-pick-datetime.switch-to-month:Change to month view`;
         /** A label for the 'switch to year view' button (used by screen readers). */
-        this.switchToMultiYearViewLabel = 'Choose month and year';
+        this.switchToMultiYearViewLabel = $localize `:@@nxt-pick-datetime.switch-to-year-month:Choose month and year`;
         /** A label for the cancel button */
-        this.cancelBtnLabel = 'Cancel';
+        this.cancelBtnLabel = $localize `:@@nxt-pick-datetime.cancel:Cancel`;
         /** A label for the set button */
-        this.setBtnLabel = 'Set';
+        this.setBtnLabel = $localize `:@@nxt-pick-datetime.set:Set`;
         /** A label for the range 'from' in picker info */
-        this.rangeFromLabel = 'From';
+        this.rangeFromLabel = $localize `:@@nxt-pick-datetime.from:From`;
         /** A label for the range 'to' in picker info */
-        this.rangeToLabel = 'To';
+        this.rangeToLabel = $localize `:@@nxt-pick-datetime.to:To`;
         /** A label for the hour12 button (AM) */
-        this.hour12AMLabel = 'AM';
+        this.hour12AMLabel = $localize `:@@nxt-pick-datetime.time-am:AM`;
         /** A label for the hour12 button (PM) */
-        this.hour12PMLabel = 'PM';
+        this.hour12PMLabel = $localize `:@@nxt-pick-datetime.time-pm:PM`;
     }
 }
-OwlDateTimeIntl.ɵprov = ɵɵdefineInjectable({ factory: function OwlDateTimeIntl_Factory() { return new OwlDateTimeIntl(); }, token: OwlDateTimeIntl, providedIn: "root" });
-OwlDateTimeIntl.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
+OwlDateTimeIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OwlDateTimeIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeIntl, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeIntl, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 const YEARS_PER_ROW = 3;
 const YEAR_ROWS = 7;
@@ -755,6 +771,7 @@ class OwlMultiYearViewComponent {
         /**
          * Callback to invoke when a new month is selected
          * */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.change = new EventEmitter();
         /**
          * Emits the selected year. This doesn't imply a change on the selected date
@@ -1050,36 +1067,45 @@ class OwlMultiYearViewComponent {
         this.calendarBodyElm.focusActiveCell();
     }
 }
-OwlMultiYearViewComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'owl-date-time-multi-year-view',
-                template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    [disabled]=\"!previousEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"prevYearList($event)\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 250.738 250.738\"\n            style=\"enable-background:new 0 0 250.738 250.738;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n                d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr>\n            <th colspan=\"3\">{{tableHeader}}</th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"years\"\n        [numCols]=\"3\"\n        [cellRatio]=\"3 / 7\"\n        [activeCell]=\"activeCell\"\n        [todayValue]=\"todayYear\"\n        [selectedValues]=\"selectedYears\"\n        [selectMode]=\"selectMode\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    [disabled]=\"!nextEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"nextYearList($event)\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n        <svg version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 250.738 250.738\"\n            style=\"enable-background:new 0 0 250.738 250.738;\"\n            xml:space=\"preserve\">\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n                d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n",
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OwlMultiYearViewComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: OwlDateTimeIntl },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] }
-];
-OwlMultiYearViewComponent.propDecorators = {
-    selectMode: [{ type: Input }],
-    selected: [{ type: Input }],
-    selecteds: [{ type: Input }],
-    pickerMoment: [{ type: Input }],
-    dateFilter: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }],
-    change: [{ type: Output }],
-    yearSelected: [{ type: Output }],
-    pickerMomentChange: [{ type: Output }],
-    keyboardEnter: [{ type: Output }],
-    calendarBodyElm: [{ type: ViewChild, args: [OwlCalendarBodyComponent, { static: true },] }],
-    owlDTCalendarView: [{ type: HostBinding, args: ['class.owl-dt-calendar-view',] }],
-    owlDTCalendarMultiYearView: [{ type: HostBinding, args: ['class.owl-dt-calendar-multi-year-view',] }]
-};
+OwlMultiYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlMultiYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlMultiYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", yearSelected: "yearSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView", "class.owl-dt-calendar-multi-year-view": "this.owlDTCalendarMultiYearView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], ngImport: i0, template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    [disabled]=\"!previousEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"prevYearList($event)\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 250.738 250.738\"\n            style=\"enable-background:new 0 0 250.738 250.738;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n                d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr>\n            <th colspan=\"3\">{{tableHeader}}</th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"years\"\n        [numCols]=\"3\"\n        [cellRatio]=\"3 / 7\"\n        [activeCell]=\"activeCell\"\n        [todayValue]=\"todayYear\"\n        [selectedValues]=\"selectedYears\"\n        [selectMode]=\"selectMode\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    [disabled]=\"!nextEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"nextYearList($event)\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n        <svg version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 250.738 250.738\"\n            style=\"enable-background:new 0 0 250.738 250.738;\"\n            xml:space=\"preserve\">\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n                d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlMultiYearViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'owl-date-time-multi-year-view', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    [disabled]=\"!previousEnabled()\"\n    [attr.aria-label]=\"prevButtonLabel\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"prevYearList($event)\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 250.738 250.738\"\n            style=\"enable-background:new 0 0 250.738 250.738;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n                d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<table class=\"owl-dt-calendar-table owl-dt-calendar-multi-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr>\n            <th colspan=\"3\">{{tableHeader}}</th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"years\"\n        [numCols]=\"3\"\n        [cellRatio]=\"3 / 7\"\n        [activeCell]=\"activeCell\"\n        [todayValue]=\"todayYear\"\n        [selectedValues]=\"selectedYears\"\n        [selectMode]=\"selectMode\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\"></tbody>\n</table>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    [disabled]=\"!nextEnabled()\"\n    [attr.aria-label]=\"nextButtonLabel\"\n    type=\"button\"\n    tabindex=\"0\"\n    (click)=\"nextYearList($event)\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n        <svg version=\"1.1\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 250.738 250.738\"\n            style=\"enable-background:new 0 0 250.738 250.738;\"\n            xml:space=\"preserve\">\n            <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n                d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { selectMode: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selecteds: [{
+                type: Input
+            }], pickerMoment: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }], pickerMomentChange: [{
+                type: Output
+            }], keyboardEnter: [{
+                type: Output
+            }], calendarBodyElm: [{
+                type: ViewChild,
+                args: [OwlCalendarBodyComponent, { static: true }]
+            }], owlDTCalendarView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-view']
+            }], owlDTCalendarMultiYearView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-multi-year-view']
+            }] } });
 
 const MONTHS_PER_YEAR = 12;
 const MONTHS_PER_ROW = 3;
@@ -1137,10 +1163,10 @@ class OwlYearViewComponent {
     }
     set selecteds(values) {
         this._selecteds = [];
-        for (let i = 0; i < values.length; i++) {
-            const value = this.dateTimeAdapter.deserialize(values[i]);
+        values.forEach(val => {
+            const value = this.dateTimeAdapter.deserialize(val);
             this._selecteds.push(this.getValidDate(value));
-        }
+        });
         this.setSelectedMonths();
     }
     get pickerMoment() {
@@ -1400,36 +1426,47 @@ class OwlYearViewComponent {
         this.calendarBodyElm.focusActiveCell();
     }
 }
-OwlYearViewComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'owl-date-time-year-view',
-                exportAs: 'owlMonthView',
-                template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr>\n            <th class=\"owl-dt-calendar-table-divider\"\n                aria-hidden=\"true\"\n                colspan=\"3\"></th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"months\"\n        [numCols]=\"3\"\n        [cellRatio]=\"3 / 7\"\n        [activeCell]=\"activeCell\"\n        [todayValue]=\"todayMonth\"\n        [selectedValues]=\"selectedMonths\"\n        [selectMode]=\"selectMode\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n",
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OwlYearViewComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DATE_TIME_FORMATS,] }] }
-];
-OwlYearViewComponent.propDecorators = {
-    selectMode: [{ type: Input }],
-    selected: [{ type: Input }],
-    selecteds: [{ type: Input }],
-    pickerMoment: [{ type: Input }],
-    dateFilter: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }],
-    change: [{ type: Output }],
-    monthSelected: [{ type: Output }],
-    pickerMomentChange: [{ type: Output }],
-    keyboardEnter: [{ type: Output }],
-    calendarBodyElm: [{ type: ViewChild, args: [OwlCalendarBodyComponent, { static: true },] }],
-    owlDTCalendarView: [{ type: HostBinding, args: ['class.owl-dt-calendar-view',] }]
-};
+OwlYearViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlYearViewComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlYearViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlYearViewComponent, selector: "owl-date-time-year-view", inputs: { selectMode: "selectMode", selected: "selected", selecteds: "selecteds", pickerMoment: "pickerMoment", dateFilter: "dateFilter", minDate: "minDate", maxDate: "maxDate" }, outputs: { change: "change", monthSelected: "monthSelected", pickerMomentChange: "pickerMomentChange", keyboardEnter: "keyboardEnter" }, host: { properties: { "class.owl-dt-calendar-view": "this.owlDTCalendarView" } }, viewQueries: [{ propertyName: "calendarBodyElm", first: true, predicate: OwlCalendarBodyComponent, descendants: true, static: true }], exportAs: ["owlMonthView"], ngImport: i0, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr>\n            <th class=\"owl-dt-calendar-table-divider\"\n                aria-hidden=\"true\"\n                colspan=\"3\"></th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"months\"\n        [numCols]=\"3\"\n        [cellRatio]=\"3 / 7\"\n        [activeCell]=\"activeCell\"\n        [todayValue]=\"todayMonth\"\n        [selectedValues]=\"selectedMonths\"\n        [selectMode]=\"selectMode\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n", styles: [""], components: [{ type: OwlCalendarBodyComponent, selector: "[owl-date-time-calendar-body]", inputs: ["activeCell", "rows", "numCols", "cellRatio", "todayValue", "selectedValues", "selectMode"], outputs: ["select"], exportAs: ["owlDateTimeCalendarBody"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlYearViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'owl-date-time-year-view', exportAs: 'owlMonthView', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"owl-dt-calendar-table owl-dt-calendar-year-table\">\n    <thead class=\"owl-dt-calendar-header\">\n        <tr>\n            <th class=\"owl-dt-calendar-table-divider\"\n                aria-hidden=\"true\"\n                colspan=\"3\"></th>\n        </tr>\n    </thead>\n    <tbody owl-date-time-calendar-body\n        role=\"grid\"\n        [rows]=\"months\"\n        [numCols]=\"3\"\n        [cellRatio]=\"3 / 7\"\n        [activeCell]=\"activeCell\"\n        [todayValue]=\"todayMonth\"\n        [selectedValues]=\"selectedMonths\"\n        [selectMode]=\"selectMode\"\n        (keydown)=\"handleCalendarKeydown($event)\"\n        (select)=\"selectCalendarCell($event)\">\n    </tbody>\n</table>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DATE_TIME_FORMATS]
+                }] }]; }, propDecorators: { selectMode: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selecteds: [{
+                type: Input
+            }], pickerMoment: [{
+                type: Input
+            }], dateFilter: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }], pickerMomentChange: [{
+                type: Output
+            }], keyboardEnter: [{
+                type: Output
+            }], calendarBodyElm: [{
+                type: ViewChild,
+                args: [OwlCalendarBodyComponent, { static: true }]
+            }], owlDTCalendarView: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar-view']
+            }] } });
 
 class OwlCalendarComponent {
     constructor(elmRef, pickerIntl, ngZone, cdRef, dateTimeAdapter, dateTimeFormats) {
@@ -1465,14 +1502,12 @@ class OwlCalendarComponent {
         /**
          * Date filter for the month and year view
          */
-        this.dateFilterForViews = (date) => {
-            return (!!date &&
-                (!this.dateFilter || this.dateFilter(date, 'date')) &&
-                (!this.minDate ||
-                    this.dateTimeAdapter.compare(date, this.minDate) >= 0) &&
-                (!this.maxDate ||
-                    this.dateTimeAdapter.compare(date, this.maxDate) <= 0));
-        };
+        this.dateFilterForViews = (date) => (!!date &&
+            (!this.dateFilter || this.dateFilter(date, 'date')) &&
+            (!this.minDate ||
+                this.dateTimeAdapter.compare(date, this.minDate) >= 0) &&
+            (!this.maxDate ||
+                this.dateTimeAdapter.compare(date, this.maxDate) <= 0));
         this.intlChangesSub = Subscription.EMPTY;
         /**
          * Used for scheduling that focus should be moved to the active cell on the next tick.
@@ -1719,42 +1754,52 @@ class OwlCalendarComponent {
             : null;
     }
 }
-OwlCalendarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'owl-date-time-calendar',
-                exportAs: 'owlDateTimeCalendar',
-                template: "<div class=\"owl-dt-calendar-control\">\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n        [disabled]=\"!prevButtonEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\"\n        (click)=\"previousClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                version=\"1.1\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background:new 0 0 250.738 250.738;\"\n                xml:space=\"preserve\"\n                width=\"100%\"\n                height=\"100%\">\n                <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n    <div class=\"owl-dt-calendar-control-content\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"periodButtonLabel\"\n            (click)=\"toggleViews()\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{periodButtonText}}\n\n                <span class=\"owl-dt-control-button-arrow\"\n                    [style.transform]=\"'rotate(' + (isMonthView? 0 : 180) +'deg)'\">\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\n                    <svg version=\"1.1\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                        x=\"0px\"\n                        y=\"0px\"\n                        width=\"50%\"\n                        height=\"50%\"\n                        viewBox=\"0 0 292.362 292.362\"\n                        style=\"enable-background:new 0 0 292.362 292.362;\"\n                        xml:space=\"preserve\">\n                        <g>\n                            <path\n                                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\n                        </g>\n                    </svg>\n                    <!-- </editor-fold> -->\n                </span>\n            </span>\n        </button>\n    </div>\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n        [disabled]=\"!nextButtonEnabled()\"\n        [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n            <svg version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background:new 0 0 250.738 250.738;\"\n                xml:space=\"preserve\">\n                <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n</div>\n<div class=\"owl-dt-calendar-main\"\n    cdkMonitorSubtreeFocus\n    [ngSwitch]=\"currentView\"\n    tabindex=\"-1\">\n    <owl-date-time-month-view *ngSwitchCase=\"'month'\"\n        [pickerMoment]=\"pickerMoment\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        [hideOtherMonths]=\"hideOtherMonths\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (selectedChange)=\"dateSelected($event)\"\n        (userSelection)=\"userSelected()\"></owl-date-time-month-view>\n\n    <owl-date-time-year-view *ngSwitchCase=\"'year'\"\n        [pickerMoment]=\"pickerMoment\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        (keyboardEnter)=\"focusActiveCell()\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (monthSelected)=\"selectMonthInYearView($event)\"\n        (change)=\"goToDateInView($event, 'month')\"></owl-date-time-year-view>\n\n    <owl-date-time-multi-year-view *ngSwitchCase=\"'multi-years'\"\n        [pickerMoment]=\"pickerMoment\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        (keyboardEnter)=\"focusActiveCell()\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (yearSelected)=\"selectYearInMultiYearView($event)\"\n        (change)=\"goToDateInView($event, 'year')\"></owl-date-time-multi-year-view>\n</div>\n",
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OwlCalendarComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: OwlDateTimeIntl },
-    { type: NgZone },
-    { type: ChangeDetectorRef },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DATE_TIME_FORMATS,] }] }
-];
-OwlCalendarComponent.propDecorators = {
-    dateFilter: [{ type: Input }],
-    firstDayOfWeek: [{ type: Input }],
-    minDate: [{ type: Input }],
-    maxDate: [{ type: Input }],
-    pickerMoment: [{ type: Input }],
-    selectMode: [{ type: Input }],
-    selected: [{ type: Input }],
-    selecteds: [{ type: Input }],
-    startView: [{ type: Input }],
-    hideOtherMonths: [{ type: Input }],
-    pickerMomentChange: [{ type: Output }],
-    selectedChange: [{ type: Output }],
-    userSelection: [{ type: Output }],
-    yearSelected: [{ type: Output }],
-    monthSelected: [{ type: Output }],
-    owlDTCalendarClass: [{ type: HostBinding, args: ['class.owl-dt-calendar',] }]
-};
+OwlCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlCalendarComponent, deps: [{ token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: { dateFilter: "dateFilter", firstDayOfWeek: "firstDayOfWeek", minDate: "minDate", maxDate: "maxDate", pickerMoment: "pickerMoment", selectMode: "selectMode", selected: "selected", selecteds: "selecteds", startView: "startView", hideOtherMonths: "hideOtherMonths" }, outputs: { pickerMomentChange: "pickerMomentChange", selectedChange: "selectedChange", userSelection: "userSelection", yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-calendar": "this.owlDTCalendarClass" } }, exportAs: ["owlDateTimeCalendar"], ngImport: i0, template: "<div class=\"owl-dt-calendar-control\">\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n        [disabled]=\"!prevButtonEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\"\n        (click)=\"previousClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                version=\"1.1\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background:new 0 0 250.738 250.738;\"\n                xml:space=\"preserve\"\n                width=\"100%\"\n                height=\"100%\">\n                <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n    <div class=\"owl-dt-calendar-control-content\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"periodButtonLabel\"\n            (click)=\"toggleViews()\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{periodButtonText}}\n\n                <span class=\"owl-dt-control-button-arrow\"\n                    [style.transform]=\"'rotate(' + (isMonthView? 0 : 180) +'deg)'\">\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\n                    <svg version=\"1.1\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                        x=\"0px\"\n                        y=\"0px\"\n                        width=\"50%\"\n                        height=\"50%\"\n                        viewBox=\"0 0 292.362 292.362\"\n                        style=\"enable-background:new 0 0 292.362 292.362;\"\n                        xml:space=\"preserve\">\n                        <g>\n                            <path\n                                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\n                        </g>\n                    </svg>\n                    <!-- </editor-fold> -->\n                </span>\n            </span>\n        </button>\n    </div>\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n        [disabled]=\"!nextButtonEnabled()\"\n        [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n            <svg version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background:new 0 0 250.738 250.738;\"\n                xml:space=\"preserve\">\n                <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n</div>\n<div class=\"owl-dt-calendar-main\"\n    cdkMonitorSubtreeFocus\n    [ngSwitch]=\"currentView\"\n    tabindex=\"-1\">\n    <owl-date-time-month-view *ngSwitchCase=\"'month'\"\n        [pickerMoment]=\"pickerMoment\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        [hideOtherMonths]=\"hideOtherMonths\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (selectedChange)=\"dateSelected($event)\"\n        (userSelection)=\"userSelected()\"></owl-date-time-month-view>\n\n    <owl-date-time-year-view *ngSwitchCase=\"'year'\"\n        [pickerMoment]=\"pickerMoment\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        (keyboardEnter)=\"focusActiveCell()\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (monthSelected)=\"selectMonthInYearView($event)\"\n        (change)=\"goToDateInView($event, 'month')\"></owl-date-time-year-view>\n\n    <owl-date-time-multi-year-view *ngSwitchCase=\"'multi-years'\"\n        [pickerMoment]=\"pickerMoment\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        (keyboardEnter)=\"focusActiveCell()\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (yearSelected)=\"selectYearInMultiYearView($event)\"\n        (change)=\"goToDateInView($event, 'year')\"></owl-date-time-multi-year-view>\n</div>\n", styles: [""], components: [{ type: OwlMonthViewComponent, selector: "owl-date-time-month-view", inputs: ["hideOtherMonths", "firstDayOfWeek", "selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["selectedChange", "userSelection", "pickerMomentChange"], exportAs: ["owlYearView"] }, { type: OwlYearViewComponent, selector: "owl-date-time-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "monthSelected", "pickerMomentChange", "keyboardEnter"], exportAs: ["owlMonthView"] }, { type: OwlMultiYearViewComponent, selector: "owl-date-time-multi-year-view", inputs: ["selectMode", "selected", "selecteds", "pickerMoment", "dateFilter", "minDate", "maxDate"], outputs: ["change", "yearSelected", "pickerMomentChange", "keyboardEnter"] }], directives: [{ type: i1$1.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'owl-date-time-calendar', exportAs: 'owlDateTimeCalendar', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"owl-dt-calendar-control\">\n    <!-- focus when keyboard tab (http://kizu.ru/en/blog/keyboard-only-focus/#x) -->\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n        [disabled]=\"!prevButtonEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\"\n        (click)=\"previousClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Left\"> -->\n            <svg xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                version=\"1.1\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background:new 0 0 250.738 250.738;\"\n                xml:space=\"preserve\"\n                width=\"100%\"\n                height=\"100%\">\n                <path style=\"fill-rule: evenodd; clip-rule: evenodd;\"\n                    d=\"M96.633,125.369l95.053-94.533c7.101-7.055,7.101-18.492,0-25.546   c-7.1-7.054-18.613-7.054-25.714,0L58.989,111.689c-3.784,3.759-5.487,8.759-5.238,13.68c-0.249,4.922,1.454,9.921,5.238,13.681   l106.983,106.398c7.101,7.055,18.613,7.055,25.714,0c7.101-7.054,7.101-18.491,0-25.544L96.633,125.369z\" />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n    <div class=\"owl-dt-calendar-control-content\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-period-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"periodButtonLabel\"\n            (click)=\"toggleViews()\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{periodButtonText}}\n\n                <span class=\"owl-dt-control-button-arrow\"\n                    [style.transform]=\"'rotate(' + (isMonthView? 0 : 180) +'deg)'\">\n                    <!-- <editor-fold desc=\"SVG Arrow\"> -->\n                    <svg version=\"1.1\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                        x=\"0px\"\n                        y=\"0px\"\n                        width=\"50%\"\n                        height=\"50%\"\n                        viewBox=\"0 0 292.362 292.362\"\n                        style=\"enable-background:new 0 0 292.362 292.362;\"\n                        xml:space=\"preserve\">\n                        <g>\n                            <path\n                                d=\"M286.935,69.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952,0-9.233,1.807-12.85,5.424\n                                C1.807,72.998,0,77.279,0,82.228c0,4.948,1.807,9.229,5.424,12.847l127.907,127.907c3.621,3.617,7.902,5.428,12.85,5.428\n                                s9.233-1.811,12.847-5.428L286.935,95.074c3.613-3.617,5.427-7.898,5.427-12.847C292.362,77.279,290.548,72.998,286.935,69.377z\" />\n                        </g>\n                    </svg>\n                    <!-- </editor-fold> -->\n                </span>\n            </span>\n        </button>\n    </div>\n    <button class=\"owl-dt-control owl-dt-control-button owl-dt-control-arrow-button\"\n        type=\"button\"\n        tabindex=\"0\"\n        [style.visibility]=\"showControlArrows? 'visible': 'hidden'\"\n        [disabled]=\"!nextButtonEnabled()\"\n        [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\">\n        <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            <!-- <editor-fold desc=\"SVG Arrow Right\"> -->\n            <svg version=\"1.1\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                x=\"0px\"\n                y=\"0px\"\n                viewBox=\"0 0 250.738 250.738\"\n                style=\"enable-background:new 0 0 250.738 250.738;\"\n                xml:space=\"preserve\">\n                <path style=\"fill-rule:evenodd;clip-rule:evenodd;\"\n                    d=\"M191.75,111.689L84.766,5.291c-7.1-7.055-18.613-7.055-25.713,0\n                    c-7.101,7.054-7.101,18.49,0,25.544l95.053,94.534l-95.053,94.533c-7.101,7.054-7.101,18.491,0,25.545\n                    c7.1,7.054,18.613,7.054,25.713,0L191.75,139.05c3.784-3.759,5.487-8.759,5.238-13.681\n                    C197.237,120.447,195.534,115.448,191.75,111.689z\" />\n            </svg>\n            <!-- </editor-fold> -->\n        </span>\n    </button>\n</div>\n<div class=\"owl-dt-calendar-main\"\n    cdkMonitorSubtreeFocus\n    [ngSwitch]=\"currentView\"\n    tabindex=\"-1\">\n    <owl-date-time-month-view *ngSwitchCase=\"'month'\"\n        [pickerMoment]=\"pickerMoment\"\n        [firstDayOfWeek]=\"firstDayOfWeek\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        [hideOtherMonths]=\"hideOtherMonths\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (selectedChange)=\"dateSelected($event)\"\n        (userSelection)=\"userSelected()\"></owl-date-time-month-view>\n\n    <owl-date-time-year-view *ngSwitchCase=\"'year'\"\n        [pickerMoment]=\"pickerMoment\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        (keyboardEnter)=\"focusActiveCell()\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (monthSelected)=\"selectMonthInYearView($event)\"\n        (change)=\"goToDateInView($event, 'month')\"></owl-date-time-year-view>\n\n    <owl-date-time-multi-year-view *ngSwitchCase=\"'multi-years'\"\n        [pickerMoment]=\"pickerMoment\"\n        [selected]=\"selected\"\n        [selecteds]=\"selecteds\"\n        [selectMode]=\"selectMode\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [dateFilter]=\"dateFilter\"\n        (keyboardEnter)=\"focusActiveCell()\"\n        (pickerMomentChange)=\"handlePickerMomentChange($event)\"\n        (yearSelected)=\"selectYearInMultiYearView($event)\"\n        (change)=\"goToDateInView($event, 'year')\"></owl-date-time-multi-year-view>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DATE_TIME_FORMATS]
+                }] }]; }, propDecorators: { dateFilter: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], pickerMoment: [{
+                type: Input
+            }], selectMode: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], selecteds: [{
+                type: Input
+            }], startView: [{
+                type: Input
+            }], hideOtherMonths: [{
+                type: Input
+            }], pickerMomentChange: [{
+                type: Output
+            }], selectedChange: [{
+                type: Output
+            }], userSelection: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }], owlDTCalendarClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-calendar']
+            }] } });
 
 let nextUniqueId = 0;
 class OwlDateTimeDirective {
@@ -1796,24 +1841,22 @@ class OwlDateTimeDirective {
         /**
          * Date Time Checker to check if the give dateTime is selectable
          */
-        this.dateTimeChecker = (dateTime) => {
-            return (!!dateTime &&
-                (!this.dateTimeFilter || this.dateTimeFilter(dateTime)) &&
-                (!this.minDateTime ||
-                    this.dateTimeAdapter.compare(dateTime, this.minDateTime) >=
-                        0) &&
-                (!this.maxDateTime ||
-                    this.dateTimeAdapter.compare(dateTime, this.maxDateTime) <= 0));
-        };
+        this.dateTimeChecker = (dateTime) => (!!dateTime &&
+            (!this.dateTimeFilter || this.dateTimeFilter(dateTime)) &&
+            (!this.minDateTime ||
+                this.dateTimeAdapter.compare(dateTime, this.minDateTime) >=
+                    0) &&
+            (!this.maxDateTime ||
+                this.dateTimeAdapter.compare(dateTime, this.maxDateTime) <= 0));
         if (!this.dateTimeAdapter) {
-            throw Error(`OwlDateTimePicker: No provider found for DateTimeAdapter. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
+            throw Error('OwlDateTimePicker: No provider found for DateTimeAdapter. You must import one of the following ' +
+                'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
+                'custom implementation.');
         }
         if (!this.dateTimeFormats) {
-            throw Error(`OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
+            throw Error('OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ' +
+                'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
+                'custom implementation.');
         }
         this._id = `owl-dt-picker-${nextUniqueId++}`;
     }
@@ -1885,23 +1928,138 @@ class OwlDateTimeDirective {
             : null;
     }
 }
-OwlDateTimeDirective.decorators = [
-    { type: Directive }
-];
-OwlDateTimeDirective.ctorParameters = () => [
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DATE_TIME_FORMATS,] }] }
-];
-OwlDateTimeDirective.propDecorators = {
-    showSecondsTimer: [{ type: Input }],
-    hour12Timer: [{ type: Input }],
-    startView: [{ type: Input }],
-    stepHour: [{ type: Input }],
-    stepMinute: [{ type: Input }],
-    stepSecond: [{ type: Input }],
-    firstDayOfWeek: [{ type: Input }],
-    hideOtherMonths: [{ type: Input }]
-};
+OwlDateTimeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeDirective, deps: [{ token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+OwlDateTimeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: OwlDateTimeDirective, inputs: { showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", startView: "startView", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", firstDayOfWeek: "firstDayOfWeek", hideOtherMonths: "hideOtherMonths" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DATE_TIME_FORMATS]
+                }] }]; }, propDecorators: { showSecondsTimer: [{
+                type: Input
+            }], hour12Timer: [{
+                type: Input
+            }], startView: [{
+                type: Input
+            }], stepHour: [{
+                type: Input
+            }], stepMinute: [{
+                type: Input
+            }], stepSecond: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], hideOtherMonths: [{
+                type: Input
+            }] } });
+
+class NumberFixedLenPipe {
+    transform(num, len) {
+        const number = Math.floor(num);
+        const length = Math.floor(len);
+        if (num === null || isNaN(number) || isNaN(length)) {
+            return num;
+        }
+        let numString = number.toString();
+        while (numString.length < length) {
+            numString = '0' + numString;
+        }
+        return numString;
+    }
+}
+NumberFixedLenPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NumberFixedLenPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NumberFixedLenPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NumberFixedLenPipe, name: "numberFixedLen" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: NumberFixedLenPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'numberFixedLen'
+                }]
+        }] });
+
+class OwlTimerBoxComponent {
+    constructor() {
+        this.showDivider = false;
+        this.step = 1;
+        this.valueChange = new EventEmitter();
+        this.inputChange = new EventEmitter();
+        this.inputStream = new Subject();
+        this.inputStreamSub = Subscription.EMPTY;
+    }
+    get displayValue() {
+        return this.boxValue || this.value;
+    }
+    get owlDTTimerBoxClass() {
+        return true;
+    }
+    ngOnInit() {
+        this.inputStreamSub = this.inputStream.pipe(debounceTime(500), distinctUntilChanged()).subscribe((val) => {
+            if (val) {
+                const inputValue = coerceNumberProperty(val, 0);
+                this.updateValueViaInput(inputValue);
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.inputStreamSub.unsubscribe();
+    }
+    upBtnClicked() {
+        this.updateValue(this.value + this.step);
+    }
+    downBtnClicked() {
+        this.updateValue(this.value - this.step);
+    }
+    handleInputChange(val) {
+        this.inputStream.next(val);
+    }
+    updateValue(value) {
+        this.valueChange.emit(value);
+    }
+    updateValueViaInput(value) {
+        if (value > this.max || value < this.min) {
+            return;
+        }
+        this.inputChange.emit(value);
+    }
+}
+OwlTimerBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlTimerBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OwlTimerBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: { showDivider: "showDivider", upBtnAriaLabel: "upBtnAriaLabel", upBtnDisabled: "upBtnDisabled", downBtnAriaLabel: "downBtnAriaLabel", downBtnDisabled: "downBtnDisabled", boxValue: "boxValue", value: "value", min: "min", max: "max", step: "step", inputLabel: "inputLabel" }, outputs: { valueChange: "valueChange", inputChange: "inputChange" }, host: { properties: { "class.owl-dt-timer-box": "this.owlDTTimerBoxClass" } }, exportAs: ["owlDateTimeTimerBox"], ngImport: i0, template: "<div *ngIf=\"showDivider\"\n    class=\"owl-dt-timer-divider\"\n    aria-hidden=\"true\"></div>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"upBtnDisabled\"\n    [attr.aria-label]=\"upBtnAriaLabel\"\n    (click)=\"upBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background:new 0 0 451.847 451.846;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input class=\"owl-dt-timer-input\"\n        maxlength=\"2\"\n        [value]=\"displayValue | numberFixedLen : 2\"\n        (input)=\"handleInputChange(valueInput.value)\"\n        #valueInput>\n    <span class=\"owl-hidden-accessible\">{{inputLabel}}</span>\n</label>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"downBtnDisabled\"\n    [attr.aria-label]=\"downBtnAriaLabel\"\n    (click)=\"downBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background:new 0 0 451.847 451.846;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path\n                d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "numberFixedLen": NumberFixedLenPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlTimerBoxComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'owlDateTimeTimerBox', selector: 'owl-date-time-timer-box', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"showDivider\"\n    class=\"owl-dt-timer-divider\"\n    aria-hidden=\"true\"></div>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"upBtnDisabled\"\n    [attr.aria-label]=\"upBtnAriaLabel\"\n    (click)=\"upBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background:new 0 0 451.847 451.846;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input class=\"owl-dt-timer-input\"\n        maxlength=\"2\"\n        [value]=\"displayValue | numberFixedLen : 2\"\n        (input)=\"handleInputChange(valueInput.value)\"\n        #valueInput>\n    <span class=\"owl-hidden-accessible\">{{inputLabel}}</span>\n</label>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"downBtnDisabled\"\n    [attr.aria-label]=\"downBtnAriaLabel\"\n    (click)=\"downBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background:new 0 0 451.847 451.846;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path\n                d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showDivider: [{
+                type: Input
+            }], upBtnAriaLabel: [{
+                type: Input
+            }], upBtnDisabled: [{
+                type: Input
+            }], downBtnAriaLabel: [{
+                type: Input
+            }], downBtnDisabled: [{
+                type: Input
+            }], boxValue: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], inputLabel: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputChange: [{
+                type: Output
+            }], owlDTTimerBoxClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-timer-box']
+            }] } });
 
 class OwlTimerComponent {
     constructor(ngZone, elmRef, pickerIntl, cdRef, dateTimeAdapter) {
@@ -2155,36 +2313,38 @@ class OwlTimerComponent {
             : null;
     }
 }
-OwlTimerComponent.decorators = [
-    { type: Component, args: [{
-                exportAs: 'owlDateTimeTimer',
-                selector: 'owl-date-time-timer',
-                template: "<owl-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel\"\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\n    [upBtnDisabled]=\"!upHourEnabled()\"\n    [downBtnDisabled]=\"!downHourEnabled()\"\n    [boxValue]=\"hourBoxValue\"\n    [value]=\"hourValue\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"stepHour\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setHourValueViaInput($event)\"\n    (valueChange)=\"setHourValue($event)\"></owl-date-time-timer-box>\n<owl-date-time-timer-box [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\n    [value]=\"minuteValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepMinute\"\n    [inputLabel]=\"'Minute'\"\n    (inputChange)=\"setMinuteValue($event)\"\n    (valueChange)=\"setMinuteValue($event)\"></owl-date-time-timer-box>\n<owl-date-time-timer-box *ngIf=\"showSecondsTimer\"\n    [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upSecondButtonLabel\"\n    [downBtnAriaLabel]=\"downSecondButtonLabel\"\n    [upBtnDisabled]=\"!upSecondEnabled()\"\n    [downBtnDisabled]=\"!downSecondEnabled()\"\n    [value]=\"secondValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepSecond\"\n    [inputLabel]=\"'Second'\"\n    (inputChange)=\"setSecondValue($event)\"\n    (valueChange)=\"setSecondValue($event)\"></owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\"\n    class=\"owl-dt-timer-hour12\">\n    <button class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n        type=\"button\"\n        tabindex=\"0\"\n        (click)=\"setMeridiem($event)\">\n        <span class=\"owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            {{hour12ButtonLabel}}\n        </span>\n    </button>\n</div>\n",
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OwlTimerComponent.ctorParameters = () => [
-    { type: NgZone },
-    { type: ElementRef },
-    { type: OwlDateTimeIntl },
-    { type: ChangeDetectorRef },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] }
-];
-OwlTimerComponent.propDecorators = {
-    pickerMoment: [{ type: Input }],
-    minDateTime: [{ type: Input }],
-    maxDateTime: [{ type: Input }],
-    showSecondsTimer: [{ type: Input }],
-    hour12Timer: [{ type: Input }],
-    stepHour: [{ type: Input }],
-    stepMinute: [{ type: Input }],
-    stepSecond: [{ type: Input }],
-    selectedChange: [{ type: Output }],
-    owlDTTimerClass: [{ type: HostBinding, args: ['class.owl-dt-timer',] }],
-    owlDTTimeTabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }]
-};
+OwlTimerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlTimerComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlTimerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: { pickerMoment: "pickerMoment", minDateTime: "minDateTime", maxDateTime: "maxDateTime", showSecondsTimer: "showSecondsTimer", hour12Timer: "hour12Timer", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.owl-dt-timer": "this.owlDTTimerClass", "attr.tabindex": "this.owlDTTimeTabIndex" } }, exportAs: ["owlDateTimeTimer"], ngImport: i0, template: "<owl-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel\"\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\n    [upBtnDisabled]=\"!upHourEnabled()\"\n    [downBtnDisabled]=\"!downHourEnabled()\"\n    [boxValue]=\"hourBoxValue\"\n    [value]=\"hourValue\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"stepHour\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setHourValueViaInput($event)\"\n    (valueChange)=\"setHourValue($event)\"></owl-date-time-timer-box>\n<owl-date-time-timer-box [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\n    [value]=\"minuteValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepMinute\"\n    [inputLabel]=\"'Minute'\"\n    (inputChange)=\"setMinuteValue($event)\"\n    (valueChange)=\"setMinuteValue($event)\"></owl-date-time-timer-box>\n<owl-date-time-timer-box *ngIf=\"showSecondsTimer\"\n    [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upSecondButtonLabel\"\n    [downBtnAriaLabel]=\"downSecondButtonLabel\"\n    [upBtnDisabled]=\"!upSecondEnabled()\"\n    [downBtnDisabled]=\"!downSecondEnabled()\"\n    [value]=\"secondValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepSecond\"\n    [inputLabel]=\"'Second'\"\n    (inputChange)=\"setSecondValue($event)\"\n    (valueChange)=\"setSecondValue($event)\"></owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\"\n    class=\"owl-dt-timer-hour12\">\n    <button class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n        type=\"button\"\n        tabindex=\"0\"\n        (click)=\"setMeridiem($event)\">\n        <span class=\"owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            {{hour12ButtonLabel}}\n        </span>\n    </button>\n</div>\n", styles: [""], components: [{ type: OwlTimerBoxComponent, selector: "owl-date-time-timer-box", inputs: ["showDivider", "upBtnAriaLabel", "upBtnDisabled", "downBtnAriaLabel", "downBtnDisabled", "boxValue", "value", "min", "max", "step", "inputLabel"], outputs: ["valueChange", "inputChange"], exportAs: ["owlDateTimeTimerBox"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlTimerComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'owlDateTimeTimer', selector: 'owl-date-time-timer', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<owl-date-time-timer-box [upBtnAriaLabel]=\"upHourButtonLabel\"\n    [downBtnAriaLabel]=\"downHourButtonLabel\"\n    [upBtnDisabled]=\"!upHourEnabled()\"\n    [downBtnDisabled]=\"!downHourEnabled()\"\n    [boxValue]=\"hourBoxValue\"\n    [value]=\"hourValue\"\n    [min]=\"0\"\n    [max]=\"23\"\n    [step]=\"stepHour\"\n    [inputLabel]=\"'Hour'\"\n    (inputChange)=\"setHourValueViaInput($event)\"\n    (valueChange)=\"setHourValue($event)\"></owl-date-time-timer-box>\n<owl-date-time-timer-box [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upMinuteButtonLabel\"\n    [downBtnAriaLabel]=\"downMinuteButtonLabel\"\n    [upBtnDisabled]=\"!upMinuteEnabled()\"\n    [downBtnDisabled]=\"!downMinuteEnabled()\"\n    [value]=\"minuteValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepMinute\"\n    [inputLabel]=\"'Minute'\"\n    (inputChange)=\"setMinuteValue($event)\"\n    (valueChange)=\"setMinuteValue($event)\"></owl-date-time-timer-box>\n<owl-date-time-timer-box *ngIf=\"showSecondsTimer\"\n    [showDivider]=\"true\"\n    [upBtnAriaLabel]=\"upSecondButtonLabel\"\n    [downBtnAriaLabel]=\"downSecondButtonLabel\"\n    [upBtnDisabled]=\"!upSecondEnabled()\"\n    [downBtnDisabled]=\"!downSecondEnabled()\"\n    [value]=\"secondValue\"\n    [min]=\"0\"\n    [max]=\"59\"\n    [step]=\"stepSecond\"\n    [inputLabel]=\"'Second'\"\n    (inputChange)=\"setSecondValue($event)\"\n    (valueChange)=\"setSecondValue($event)\"></owl-date-time-timer-box>\n\n<div *ngIf=\"hour12Timer\"\n    class=\"owl-dt-timer-hour12\">\n    <button class=\"owl-dt-control-button owl-dt-timer-hour12-box\"\n        type=\"button\"\n        tabindex=\"0\"\n        (click)=\"setMeridiem($event)\">\n        <span class=\"owl-dt-control-button-content\"\n            tabindex=\"-1\">\n            {{hour12ButtonLabel}}\n        </span>\n    </button>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { pickerMoment: [{
+                type: Input
+            }], minDateTime: [{
+                type: Input
+            }], maxDateTime: [{
+                type: Input
+            }], showSecondsTimer: [{
+                type: Input
+            }], hour12Timer: [{
+                type: Input
+            }], stepHour: [{
+                type: Input
+            }], stepMinute: [{
+                type: Input
+            }], stepSecond: [{
+                type: Input
+            }], selectedChange: [{
+                type: Output
+            }], owlDTTimerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-timer']
+            }], owlDTTimeTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }] } });
 
 const owlDateTimePickerAnimations = {
     transformPicker: trigger('transformPicker', [
@@ -2535,40 +2695,52 @@ class OwlDateTimeContainerComponent {
         }
     }
 }
-OwlDateTimeContainerComponent.decorators = [
-    { type: Component, args: [{
-                exportAs: 'owlDateTimeContainer',
-                selector: 'owl-date-time-container',
-                template: "<div [cdkTrapFocus]=\"picker?.pickerMode !== 'inline'\"\n    [@fadeInPicker]=\"picker?.pickerMode === 'inline'? '' : 'enter'\"\n    class=\"owl-dt-container-inner\">\n\n    <owl-date-time-calendar *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n        class=\"owl-dt-container-row\"\n        [firstDayOfWeek]=\"picker?.firstDayOfWeek\"\n        [(pickerMoment)]=\"pickerMoment\"\n        [selected]=\"picker?.selected\"\n        [selecteds]=\"picker?.selecteds\"\n        [selectMode]=\"picker?.selectMode\"\n        [minDate]=\"picker?.minDateTime\"\n        [maxDate]=\"picker?.maxDateTime\"\n        [dateFilter]=\"picker?.dateTimeFilter\"\n        [startView]=\"picker?.startView\"\n        [hideOtherMonths]=\"picker?.hideOtherMonths\"\n        (yearSelected)=\"picker?.selectYear($event)\"\n        (monthSelected)=\"picker?.selectMonth($event)\"\n        (selectedChange)=\"dateSelected($event)\"></owl-date-time-calendar>\n\n    <owl-date-time-timer *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n        class=\"owl-dt-container-row\"\n        [pickerMoment]=\"pickerMoment\"\n        [minDateTime]=\"picker?.minDateTime\"\n        [maxDateTime]=\"picker?.maxDateTime\"\n        [showSecondsTimer]=\"picker?.showSecondsTimer\"\n        [hour12Timer]=\"picker?.hour12Timer\"\n        [stepHour]=\"picker?.stepHour\"\n        [stepMinute]=\"picker?.stepMinute\"\n        [stepSecond]=\"picker?.stepSecond\"\n        (selectedChange)=\"timeSelected($event)\"></owl-date-time-timer>\n\n    <div *ngIf=\"picker?.isInRangeMode\"\n        role=\"radiogroup\"\n        class=\"owl-dt-container-info owl-dt-container-row\">\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex === 0\"\n            class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n            [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 0}\"\n            (click)=\"handleClickOnInfoGroup($event, 0)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n            #from>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"owl-dt-container-info-label\">{{fromLabel}}:</span>\n                <span class=\"owl-dt-container-info-value\">{{fromFormattedValue}}</span>\n            </span>\n        </div>\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex === 1\"\n            class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n            [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 1}\"\n            (click)=\"handleClickOnInfoGroup($event, 1)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n            #to>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"owl-dt-container-info-label\">{{toLabel}}:</span>\n                <span class=\"owl-dt-container-info-value\">{{toFormattedValue}}</span>\n            </span>\n        </div>\n    </div>\n\n    <div *ngIf=\"showControlButtons\"\n        class=\"owl-dt-container-buttons owl-dt-container-row\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onCancelClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{cancelLabel}}\n            </span>\n        </button>\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onSetClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{setLabel}}\n            </span>\n        </button>\n    </div>\n</div>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                animations: [
-                    owlDateTimePickerAnimations.transformPicker,
-                    owlDateTimePickerAnimations.fadeInPicker
-                ],
-                styles: [""]
-            },] }
-];
-OwlDateTimeContainerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: OwlDateTimeIntl },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] }
-];
-OwlDateTimeContainerComponent.propDecorators = {
-    calendar: [{ type: ViewChild, args: [OwlCalendarComponent,] }],
-    timer: [{ type: ViewChild, args: [OwlTimerComponent,] }],
-    owlDTContainerClass: [{ type: HostBinding, args: ['class.owl-dt-container',] }],
-    owlDTPopupContainerClass: [{ type: HostBinding, args: ['class.owl-dt-popup-container',] }],
-    owlDTDialogContainerClass: [{ type: HostBinding, args: ['class.owl-dt-dialog-container',] }],
-    owlDTInlineContainerClass: [{ type: HostBinding, args: ['class.owl-dt-inline-container',] }],
-    owlDTContainerDisabledClass: [{ type: HostBinding, args: ['class.owl-dt-container-disabled',] }],
-    owlDTContainerId: [{ type: HostBinding, args: ['attr.id',] }],
-    owlDTContainerAnimation: [{ type: HostBinding, args: ['@transformPicker',] }],
-    handleContainerAnimationDone: [{ type: HostListener, args: ['@transformPicker.done', ['$event'],] }]
-};
+OwlDateTimeContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: OwlDateTimeIntl }, { token: DateTimeAdapter, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDateTimeContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", host: { listeners: { "@transformPicker.done": "handleContainerAnimationDone($event)" }, properties: { "class.owl-dt-container": "this.owlDTContainerClass", "class.owl-dt-popup-container": "this.owlDTPopupContainerClass", "class.owl-dt-dialog-container": "this.owlDTDialogContainerClass", "class.owl-dt-inline-container": "this.owlDTInlineContainerClass", "class.owl-dt-container-disabled": "this.owlDTContainerDisabledClass", "attr.id": "this.owlDTContainerId", "@transformPicker": "this.owlDTContainerAnimation" } }, viewQueries: [{ propertyName: "calendar", first: true, predicate: OwlCalendarComponent, descendants: true }, { propertyName: "timer", first: true, predicate: OwlTimerComponent, descendants: true }], exportAs: ["owlDateTimeContainer"], ngImport: i0, template: "<div [cdkTrapFocus]=\"picker?.pickerMode !== 'inline'\"\n    [@fadeInPicker]=\"picker?.pickerMode === 'inline'? '' : 'enter'\"\n    class=\"owl-dt-container-inner\">\n\n    <owl-date-time-calendar *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n        class=\"owl-dt-container-row\"\n        [firstDayOfWeek]=\"picker?.firstDayOfWeek\"\n        [(pickerMoment)]=\"pickerMoment\"\n        [selected]=\"picker?.selected\"\n        [selecteds]=\"picker?.selecteds\"\n        [selectMode]=\"picker?.selectMode\"\n        [minDate]=\"picker?.minDateTime\"\n        [maxDate]=\"picker?.maxDateTime\"\n        [dateFilter]=\"picker?.dateTimeFilter\"\n        [startView]=\"picker?.startView\"\n        [hideOtherMonths]=\"picker?.hideOtherMonths\"\n        (yearSelected)=\"picker?.selectYear($event)\"\n        (monthSelected)=\"picker?.selectMonth($event)\"\n        (selectedChange)=\"dateSelected($event)\"></owl-date-time-calendar>\n\n    <owl-date-time-timer *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n        class=\"owl-dt-container-row\"\n        [pickerMoment]=\"pickerMoment\"\n        [minDateTime]=\"picker?.minDateTime\"\n        [maxDateTime]=\"picker?.maxDateTime\"\n        [showSecondsTimer]=\"picker?.showSecondsTimer\"\n        [hour12Timer]=\"picker?.hour12Timer\"\n        [stepHour]=\"picker?.stepHour\"\n        [stepMinute]=\"picker?.stepMinute\"\n        [stepSecond]=\"picker?.stepSecond\"\n        (selectedChange)=\"timeSelected($event)\"></owl-date-time-timer>\n\n    <div *ngIf=\"picker?.isInRangeMode\"\n        role=\"radiogroup\"\n        class=\"owl-dt-container-info owl-dt-container-row\">\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex === 0\"\n            class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n            [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 0}\"\n            (click)=\"handleClickOnInfoGroup($event, 0)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n            #from>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"owl-dt-container-info-label\">{{fromLabel}}:</span>\n                <span class=\"owl-dt-container-info-value\">{{fromFormattedValue}}</span>\n            </span>\n        </div>\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex === 1\"\n            class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n            [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 1}\"\n            (click)=\"handleClickOnInfoGroup($event, 1)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n            #to>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"owl-dt-container-info-label\">{{toLabel}}:</span>\n                <span class=\"owl-dt-container-info-value\">{{toFormattedValue}}</span>\n            </span>\n        </div>\n    </div>\n\n    <div *ngIf=\"showControlButtons\"\n        class=\"owl-dt-container-buttons owl-dt-container-row\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onCancelClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{cancelLabel}}\n            </span>\n        </button>\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onSetClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{setLabel}}\n            </span>\n        </button>\n    </div>\n</div>\n", styles: [""], components: [{ type: OwlCalendarComponent, selector: "owl-date-time-calendar", inputs: ["dateFilter", "firstDayOfWeek", "minDate", "maxDate", "pickerMoment", "selectMode", "selected", "selecteds", "startView", "hideOtherMonths"], outputs: ["pickerMomentChange", "selectedChange", "userSelection", "yearSelected", "monthSelected"], exportAs: ["owlDateTimeCalendar"] }, { type: OwlTimerComponent, selector: "owl-date-time-timer", inputs: ["pickerMoment", "minDateTime", "maxDateTime", "showSecondsTimer", "hour12Timer", "stepHour", "stepMinute", "stepSecond"], outputs: ["selectedChange"], exportAs: ["owlDateTimeTimer"] }], directives: [{ type: i1$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+        owlDateTimePickerAnimations.transformPicker,
+        owlDateTimePickerAnimations.fadeInPicker
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeContainerComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'owlDateTimeContainer', selector: 'owl-date-time-container', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, animations: [
+                        owlDateTimePickerAnimations.transformPicker,
+                        owlDateTimePickerAnimations.fadeInPicker
+                    ], template: "<div [cdkTrapFocus]=\"picker?.pickerMode !== 'inline'\"\n    [@fadeInPicker]=\"picker?.pickerMode === 'inline'? '' : 'enter'\"\n    class=\"owl-dt-container-inner\">\n\n    <owl-date-time-calendar *ngIf=\"pickerType === 'both' || pickerType === 'calendar'\"\n        class=\"owl-dt-container-row\"\n        [firstDayOfWeek]=\"picker?.firstDayOfWeek\"\n        [(pickerMoment)]=\"pickerMoment\"\n        [selected]=\"picker?.selected\"\n        [selecteds]=\"picker?.selecteds\"\n        [selectMode]=\"picker?.selectMode\"\n        [minDate]=\"picker?.minDateTime\"\n        [maxDate]=\"picker?.maxDateTime\"\n        [dateFilter]=\"picker?.dateTimeFilter\"\n        [startView]=\"picker?.startView\"\n        [hideOtherMonths]=\"picker?.hideOtherMonths\"\n        (yearSelected)=\"picker?.selectYear($event)\"\n        (monthSelected)=\"picker?.selectMonth($event)\"\n        (selectedChange)=\"dateSelected($event)\"></owl-date-time-calendar>\n\n    <owl-date-time-timer *ngIf=\"pickerType === 'both' || pickerType === 'timer'\"\n        class=\"owl-dt-container-row\"\n        [pickerMoment]=\"pickerMoment\"\n        [minDateTime]=\"picker?.minDateTime\"\n        [maxDateTime]=\"picker?.maxDateTime\"\n        [showSecondsTimer]=\"picker?.showSecondsTimer\"\n        [hour12Timer]=\"picker?.hour12Timer\"\n        [stepHour]=\"picker?.stepHour\"\n        [stepMinute]=\"picker?.stepMinute\"\n        [stepSecond]=\"picker?.stepSecond\"\n        (selectedChange)=\"timeSelected($event)\"></owl-date-time-timer>\n\n    <div *ngIf=\"picker?.isInRangeMode\"\n        role=\"radiogroup\"\n        class=\"owl-dt-container-info owl-dt-container-row\">\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex === 0 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex === 0\"\n            class=\"owl-dt-control owl-dt-container-range owl-dt-container-from\"\n            [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 0}\"\n            (click)=\"handleClickOnInfoGroup($event, 0)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, to, 0)\"\n            #from>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"owl-dt-container-info-label\">{{fromLabel}}:</span>\n                <span class=\"owl-dt-container-info-value\">{{fromFormattedValue}}</span>\n            </span>\n        </div>\n        <div role=\"radio\"\n            [tabindex]=\"activeSelectedIndex === 1 ? 0 : -1\"\n            [attr.aria-checked]=\"activeSelectedIndex === 1\"\n            class=\"owl-dt-control owl-dt-container-range owl-dt-container-to\"\n            [ngClass]=\"{'owl-dt-container-info-active': activeSelectedIndex === 1}\"\n            (click)=\"handleClickOnInfoGroup($event, 1)\"\n            (keydown)=\"handleKeydownOnInfoGroup($event, from, 1)\"\n            #to>\n            <span class=\"owl-dt-control-content owl-dt-container-range-content\"\n                tabindex=\"-1\">\n                <span class=\"owl-dt-container-info-label\">{{toLabel}}:</span>\n                <span class=\"owl-dt-container-info-value\">{{toFormattedValue}}</span>\n            </span>\n        </div>\n    </div>\n\n    <div *ngIf=\"showControlButtons\"\n        class=\"owl-dt-container-buttons owl-dt-container-row\">\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onCancelClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{cancelLabel}}\n            </span>\n        </button>\n        <button class=\"owl-dt-control owl-dt-control-button owl-dt-container-control-button\"\n            type=\"button\"\n            tabindex=\"0\"\n            (click)=\"onSetClicked($event)\">\n            <span class=\"owl-dt-control-content owl-dt-control-button-content\"\n                tabindex=\"-1\">\n                {{setLabel}}\n            </span>\n        </button>\n    </div>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: OwlDateTimeIntl }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { calendar: [{
+                type: ViewChild,
+                args: [OwlCalendarComponent]
+            }], timer: [{
+                type: ViewChild,
+                args: [OwlTimerComponent]
+            }], owlDTContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-container']
+            }], owlDTPopupContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-popup-container']
+            }], owlDTDialogContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-dialog-container']
+            }], owlDTInlineContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-inline-container']
+            }], owlDTContainerDisabledClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-container-disabled']
+            }], owlDTContainerId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], owlDTContainerAnimation: [{
+                type: HostBinding,
+                args: ['@transformPicker']
+            }], handleContainerAnimationDone: [{
+                type: HostListener,
+                args: ['@transformPicker.done', ['$event']]
+            }] } });
 
-const OWL_DATETIME_VALUE_ACCESSOR = {
+const OWL_DATETIME_VALUE_ACCESSOR$1 = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => OwlDateTimeInlineComponent),
     multi: true
@@ -2659,6 +2831,7 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
     get minDateTime() {
         return this._min || null;
     }
+    // eslint-disable-next-line @angular-eslint/no-input-rename
     set minDateTime(value) {
         this._min = this.getValidDate(this.dateTimeAdapter.deserialize(value));
         this.changeDetector.markForCheck();
@@ -2666,6 +2839,7 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
     get maxDateTime() {
         return this._max || null;
     }
+    // eslint-disable-next-line @angular-eslint/no-input-rename
     set maxDateTime(value) {
         this._max = this.getValidDate(this.dateTimeAdapter.deserialize(value));
         this.changeDetector.markForCheck();
@@ -2776,1935 +2950,2001 @@ class OwlDateTimeInlineComponent extends OwlDateTimeDirective {
         this.monthSelected.emit(normalizedMonth);
     }
 }
-OwlDateTimeInlineComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'owl-date-time-inline',
-                template: "<owl-date-time-container></owl-date-time-container>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                providers: [OWL_DATETIME_VALUE_ACCESSOR],
-                styles: [""]
-            },] }
-];
-OwlDateTimeInlineComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DATE_TIME_FORMATS,] }] }
-];
-OwlDateTimeInlineComponent.propDecorators = {
-    container: [{ type: ViewChild, args: [OwlDateTimeContainerComponent, { static: true },] }],
-    pickerType: [{ type: Input }],
-    disabled: [{ type: Input }],
-    selectMode: [{ type: Input }],
-    startAt: [{ type: Input }],
-    dateTimeFilter: [{ type: Input, args: ['owlDateTimeFilter',] }],
-    minDateTime: [{ type: Input, args: ['min',] }],
-    maxDateTime: [{ type: Input, args: ['max',] }],
-    value: [{ type: Input }],
-    values: [{ type: Input }],
-    yearSelected: [{ type: Output }],
-    monthSelected: [{ type: Output }],
-    owlDTInlineClass: [{ type: HostBinding, args: ['class.owl-dt-inline',] }]
-};
+OwlDateTimeInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeInlineComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDateTimeInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlDateTimeInlineComponent, selector: "owl-date-time-inline", inputs: { pickerType: "pickerType", disabled: "disabled", selectMode: "selectMode", startAt: "startAt", dateTimeFilter: ["owlDateTimeFilter", "dateTimeFilter"], minDateTime: ["min", "minDateTime"], maxDateTime: ["max", "maxDateTime"], value: "value", values: "values" }, outputs: { yearSelected: "yearSelected", monthSelected: "monthSelected" }, host: { properties: { "class.owl-dt-inline": "this.owlDTInlineClass" } }, providers: [OWL_DATETIME_VALUE_ACCESSOR$1], viewQueries: [{ propertyName: "container", first: true, predicate: OwlDateTimeContainerComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<owl-date-time-container></owl-date-time-container>\n", styles: [""], components: [{ type: OwlDateTimeContainerComponent, selector: "owl-date-time-container", exportAs: ["owlDateTimeContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeInlineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'owl-date-time-inline', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [OWL_DATETIME_VALUE_ACCESSOR$1], template: "<owl-date-time-container></owl-date-time-container>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DATE_TIME_FORMATS]
+                }] }]; }, propDecorators: { container: [{
+                type: ViewChild,
+                args: [OwlDateTimeContainerComponent, { static: true }]
+            }], pickerType: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], selectMode: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], dateTimeFilter: [{
+                type: Input,
+                args: ['owlDateTimeFilter']
+            }], minDateTime: [{
+                type: Input,
+                args: ['min']
+            }], maxDateTime: [{
+                type: Input,
+                args: ['max']
+            }], value: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], yearSelected: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }], owlDTInlineClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-inline']
+            }] } });
 
-let uniqueId = 0;
-class OwlDialogConfig {
-    constructor() {
-        /**
-         * ID of the element that describes the dialog.
-         */
-        this.ariaDescribedBy = null;
+const OWL_DATETIME_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => OwlDateTimeInputDirective),
+    multi: true
+};
+const OWL_DATETIME_VALIDATORS = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(() => OwlDateTimeInputDirective),
+    multi: true
+};
+class OwlDateTimeInputDirective {
+    constructor(elmRef, renderer, dateTimeAdapter, dateTimeFormats) {
+        this.elmRef = elmRef;
+        this.renderer = renderer;
+        this.dateTimeAdapter = dateTimeAdapter;
+        this.dateTimeFormats = dateTimeFormats;
         /**
-         * Whether to focus the dialog when the dialog is opened
+         * The picker's select mode
          */
-        this.autoFocus = true;
-        /** Whether the dialog has a backdrop. */
-        this.hasBackdrop = true;
-        /** Data being injected into the child component. */
-        this.data = null;
-        /** Whether the user can use escape or clicking outside to close a modal. */
-        this.disableClose = false;
+        this._selectMode = 'single';
         /**
-         * The ARIA role of the dialog element.
+         * The character to separate the 'from' and 'to' in input value
          */
-        this.role = 'dialog';
-        /**
-         * Custom class for the pane
-         * */
-        this.paneClass = '';
-        /**
-         * Mouse Event
-         * */
-        this.event = null;
-        /**
-         * Custom class for the backdrop
-         * */
-        this.backdropClass = '';
+        this.rangeSeparator = '~';
+        this._values = [];
         /**
-         * Whether the dialog should close when the user goes backwards/forwards in history.
+         * Callback to invoke when `change` event is fired on this `<input>`
          * */
-        this.closeOnNavigation = true;
-        /** Width of the dialog. */
-        this.width = '';
-        /** Height of the dialog. */
-        this.height = '';
+        this.dateTimeChange = new EventEmitter();
         /**
-         * The max-width of the overlay panel.
-         * If a number is provided, pixel units are assumed.
+         * Callback to invoke when an `input` event is fired on this `<input>`.
          * */
-        this.maxWidth = '85vw';
+        this.dateTimeInput = new EventEmitter();
+        this.dtPickerSub = Subscription.EMPTY;
+        this.localeSub = Subscription.EMPTY;
+        this.lastValueValid = true;
+        this.onModelChange = () => { };
+        this.onModelTouched = () => { };
+        this.validatorOnChange = () => { };
+        /** The form control validator for whether the input parses. */
+        this.parseValidator = () => this.lastValueValid
+            ? null
+            : { owlDateTimeParse: { text: this.elmRef.nativeElement.value } };
+        /** The form control validator for the min date. */
+        this.minValidator = (control) => {
+            if (this.isInSingleMode) {
+                const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
+                return !this.min ||
+                    !controlValue ||
+                    this.dateTimeAdapter.compare(this.min, controlValue) <= 0
+                    ? null
+                    : { owlDateTimeMin: { min: this.min, actual: controlValue } };
+            }
+            else if (this.isInRangeMode && control.value) {
+                const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
+                const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
+                return !this.min ||
+                    !controlValueFrom ||
+                    !controlValueTo ||
+                    this.dateTimeAdapter.compare(this.min, controlValueFrom) <= 0
+                    ? null
+                    : {
+                        owlDateTimeMin: {
+                            min: this.min,
+                            actual: [controlValueFrom, controlValueTo]
+                        }
+                    };
+            }
+        };
+        /** The form control validator for the max date. */
+        this.maxValidator = (control) => {
+            if (this.isInSingleMode) {
+                const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
+                return !this.max ||
+                    !controlValue ||
+                    this.dateTimeAdapter.compare(this.max, controlValue) >= 0
+                    ? null
+                    : { owlDateTimeMax: { max: this.max, actual: controlValue } };
+            }
+            else if (this.isInRangeMode && control.value) {
+                const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
+                const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
+                return !this.max ||
+                    !controlValueFrom ||
+                    !controlValueTo ||
+                    this.dateTimeAdapter.compare(this.max, controlValueTo) >= 0
+                    ? null
+                    : {
+                        owlDateTimeMax: {
+                            max: this.max,
+                            actual: [controlValueFrom, controlValueTo]
+                        }
+                    };
+            }
+        };
+        /** The form control validator for the date filter. */
+        this.filterValidator = (control) => {
+            const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
+            return !this._dateTimeFilter ||
+                !controlValue ||
+                this._dateTimeFilter(controlValue)
+                ? null
+                : { owlDateTimeFilter: true };
+        };
         /**
-         * The scroll strategy when the dialog is open
-         * Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies
+         * The form control validator for the range.
+         * Check whether the 'before' value is before the 'to' value
          * */
-        this.scrollStrategy = new NoopScrollStrategy();
-        this.id = `owl-dialog-${uniqueId++}`;
-    }
-}
-
-class OwlDialogRef {
-    constructor(overlayRef, container, id, location) {
-        this.overlayRef = overlayRef;
-        this.container = container;
-        this.id = id;
-        this._beforeClose$ = new Subject();
-        this._afterOpen$ = new Subject();
-        this._afterClosed$ = new Subject();
-        /** Subscription to changes in the user's location. */
-        this.locationChanged = Subscription.EMPTY;
-        /** Whether the user is allowed to close the dialog. */
-        this.disableClose = this.container.config.disableClose;
-        this.container.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'enter'), take(1))
-            .subscribe(() => {
-            this._afterOpen$.next();
-            this._afterOpen$.complete();
-        });
-        this.container.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'exit'), take(1))
-            .subscribe(() => {
-            this.overlayRef.dispose();
-            this.locationChanged.unsubscribe();
-            this._afterClosed$.next(this.result);
-            this._afterClosed$.complete();
-            this.componentInstance = null;
-        });
-        this.overlayRef.keydownEvents()
-            .pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose))
-            .subscribe(() => this.close());
-        if (location) {
-            this.locationChanged = location.subscribe(() => {
-                if (this.container.config.closeOnNavigation) {
-                    this.close();
-                }
-            });
-        }
-    }
-    close(dialogResult) {
-        this.result = dialogResult;
-        this.container.animationStateChanged
-            .pipe(filter((event) => event.phaseName === 'start'), take(1))
-            .subscribe(() => {
-            this._beforeClose$.next(dialogResult);
-            this._beforeClose$.complete();
-            this.overlayRef.detachBackdrop();
-        });
-        this.container.startExitAnimation();
+        this.rangeValidator = (control) => {
+            if (this.isInSingleMode || !control.value) {
+                return null;
+            }
+            const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
+            const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
+            return !controlValueFrom ||
+                !controlValueTo ||
+                this.dateTimeAdapter.compare(controlValueFrom, controlValueTo) <= 0
+                ? null
+                : { owlDateTimeRange: true };
+        };
+        /** The combined form control validator for this input. */
+        this.validator = Validators.compose([
+            this.parseValidator,
+            this.minValidator,
+            this.maxValidator,
+            this.filterValidator,
+            this.rangeValidator
+        ]);
+        /** Emits when the value changes (either due to user input or programmatic change). */
+        this.valueChange = new EventEmitter();
+        /** Emits when the disabled state has changed */
+        this.disabledChange = new EventEmitter();
+        if (!this.dateTimeAdapter) {
+            throw Error('OwlDateTimePicker: No provider found for DateTimePicker. You must import one of the following ' +
+                'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
+                'custom implementation.');
+        }
+        if (!this.dateTimeFormats) {
+            throw Error('OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ' +
+                'modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ' +
+                'custom implementation.');
+        }
+        this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
+            this.value = this.value;
+        });
     }
     /**
-     * Gets an observable that emits when the overlay's backdrop has been clicked.
-     */
-    backdropClick() {
-        return this.overlayRef.backdropClick();
+     * The date time picker that this input is associated with.
+     * */
+    set owlDateTime(value) {
+        this.registerDateTimePicker(value);
     }
     /**
-     * Gets an observable that emits when keydown events are targeted on the overlay.
+     * A function to filter date time
      */
-    keydownEvents() {
-        return this.overlayRef.keydownEvents();
+    set owlDateTimeFilter(filter) {
+        this._dateTimeFilter = filter;
+        this.validatorOnChange();
     }
-    /**
-     * Updates the dialog's position.
-     * @param position New dialog position.
-     */
-    updatePosition(position) {
-        const strategy = this.getPositionStrategy();
-        if (position && (position.left || position.right)) {
-            position.left ? strategy.left(position.left) : strategy.right(position.right);
-        }
-        else {
-            strategy.centerHorizontally();
-        }
-        if (position && (position.top || position.bottom)) {
-            position.top ? strategy.top(position.top) : strategy.bottom(position.bottom);
+    get dateTimeFilter() {
+        return this._dateTimeFilter;
+    }
+    get disabled() {
+        return !!this._disabled;
+    }
+    set disabled(value) {
+        const newValue = coerceBooleanProperty(value);
+        const element = this.elmRef.nativeElement;
+        if (this._disabled !== newValue) {
+            this._disabled = newValue;
+            this.disabledChange.emit(newValue);
         }
-        else {
-            strategy.centerVertically();
+        // We need to null check the `blur` method, because it's undefined during SSR.
+        if (newValue && element.blur) {
+            // Normally, native input elements automatically blur if they turn disabled. This behavior
+            // is problematic, because it would mean that it triggers another change detection cycle,
+            // which then causes a changed after checked error if the input element was focused before.
+            element.blur();
         }
-        this.overlayRef.updatePosition();
-        return this;
     }
-    /**
-     * Updates the dialog's width and height.
-     * @param width New width of the dialog.
-     * @param height New height of the dialog.
-     */
-    updateSize(width = 'auto', height = 'auto') {
-        this.getPositionStrategy().width(width).height(height);
-        this.overlayRef.updatePosition();
-        return this;
+    get min() {
+        return this._min;
     }
-    isAnimating() {
-        return this.container.isAnimating;
+    set min(value) {
+        this._min = this.getValidDate(this.dateTimeAdapter.deserialize(value));
+        this.validatorOnChange();
     }
-    afterOpen() {
-        return this._afterOpen$.asObservable();
+    get max() {
+        return this._max;
     }
-    beforeClose() {
-        return this._beforeClose$.asObservable();
+    set max(value) {
+        this._max = this.getValidDate(this.dateTimeAdapter.deserialize(value));
+        this.validatorOnChange();
     }
-    afterClosed() {
-        return this._afterClosed$.asObservable();
+    get selectMode() {
+        return this._selectMode;
     }
-    /** Fetches the position strategy object from the overlay ref. */
-    getPositionStrategy() {
-        return this.overlayRef.getConfig().positionStrategy;
+    set selectMode(mode) {
+        if (mode !== 'single' &&
+            mode !== 'range' &&
+            mode !== 'rangeFrom' &&
+            mode !== 'rangeTo') {
+            throw Error('OwlDateTime Error: invalid selectMode value!');
+        }
+        this._selectMode = mode;
     }
-}
-
-/**
- * Extends an object with the *enumerable* and *own* properties of one or more source objects,
- * similar to Object.assign.
- *
- * @param dest The object which will have properties copied to it.
- * @param sources The source objects from which properties will be copied.
- */
-function extendObject(dest, ...sources) {
-    if (dest == null) {
-        throw TypeError('Cannot convert undefined or null to object');
+    get value() {
+        return this._value;
     }
-    for (const source of sources) {
-        if (source != null) {
-            for (const key in source) {
-                if (source.hasOwnProperty(key)) {
-                    dest[key] = source[key];
-                }
-            }
+    set value(value) {
+        value = this.dateTimeAdapter.deserialize(value);
+        this.lastValueValid = !value || this.dateTimeAdapter.isValid(value);
+        value = this.getValidDate(value);
+        const oldDate = this._value;
+        this._value = value;
+        // set the input property 'value'
+        this.formatNativeInputValue();
+        // check if the input value changed
+        if (!this.dateTimeAdapter.isEqual(oldDate, value)) {
+            this.valueChange.emit(value);
         }
     }
-    return dest;
-}
-
-const zoomFadeIn = {
-    opacity: 0,
-    transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})'
-};
-const zoomFadeInFrom = {
-    opacity: 0,
-    transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})',
-    transformOrigin: '{{ ox }} {{ oy }}'
-};
-class OwlDialogContainerComponent extends BasePortalOutlet {
-    constructor(changeDetector, elementRef, focusTrapFactory, document) {
-        super();
-        this.changeDetector = changeDetector;
-        this.elementRef = elementRef;
-        this.focusTrapFactory = focusTrapFactory;
-        this.document = document;
-        /** ID of the element that should be considered as the dialog's label. */
-        this.ariaLabelledBy = null;
-        /** Emits when an animation state changes. */
-        this.animationStateChanged = new EventEmitter();
-        this.isAnimating = false;
-        this.state = 'enter';
-        // for animation purpose
-        this.params = {
-            x: '0px',
-            y: '0px',
-            ox: '50%',
-            oy: '50%',
-            scale: 0
-        };
-        // A variable to hold the focused element before the dialog was open.
-        // This would help us to refocus back to element when the dialog was closed.
-        this.elementFocusedBeforeDialogWasOpened = null;
-    }
-    get config() {
-        return this._config;
+    get values() {
+        return this._values;
     }
-    get owlDialogContainerClass() {
-        return true;
+    set values(values) {
+        if (values && values.length > 0) {
+            this._values = values.map(v => {
+                v = this.dateTimeAdapter.deserialize(v);
+                return this.getValidDate(v);
+            });
+            this.lastValueValid =
+                (!this._values[0] ||
+                    this.dateTimeAdapter.isValid(this._values[0])) &&
+                    (!this._values[1] ||
+                        this.dateTimeAdapter.isValid(this._values[1]));
+        }
+        else {
+            this._values = [];
+            this.lastValueValid = true;
+        }
+        // set the input property 'value'
+        this.formatNativeInputValue();
+        this.valueChange.emit(this._values);
     }
-    get owlDialogContainerTabIndex() {
-        return -1;
+    get elementRef() {
+        return this.elmRef;
     }
-    get owlDialogContainerId() {
-        return this._config.id;
+    get isInSingleMode() {
+        return this._selectMode === 'single';
     }
-    get owlDialogContainerRole() {
-        return this._config.role || null;
+    get isInRangeMode() {
+        return (this._selectMode === 'range' ||
+            this._selectMode === 'rangeFrom' ||
+            this._selectMode === 'rangeTo');
     }
-    get owlDialogContainerAriaLabelledby() {
-        return this.ariaLabelledBy;
+    get owlDateTimeInputAriaHaspopup() {
+        return true;
     }
-    get owlDialogContainerAriaDescribedby() {
-        return this._config.ariaDescribedBy || null;
+    get owlDateTimeInputAriaOwns() {
+        return (this.dtPicker.opened && this.dtPicker.id) || null;
     }
-    get owlDialogContainerAnimation() {
-        return { value: this.state, params: this.params };
+    get minIso8601() {
+        return this.min ? this.dateTimeAdapter.toIso8601(this.min) : null;
     }
-    ngOnInit() { }
-    /**
-     * Attach a ComponentPortal as content to this dialog container.
-     */
-    attachComponentPortal(portal) {
-        if (this.portalOutlet.hasAttached()) {
-            throw Error('Attempting to attach dialog content after content is already attached');
+    get maxIso8601() {
+        return this.max ? this.dateTimeAdapter.toIso8601(this.max) : null;
+    }
+    get owlDateTimeInputDisabled() {
+        return this.disabled;
+    }
+    ngOnInit() {
+        if (!this.dtPicker) {
+            throw Error('OwlDateTimePicker: the picker input doesn\'t have any associated owl-date-time component');
         }
-        this.savePreviouslyFocusedElement();
-        return this.portalOutlet.attachComponentPortal(portal);
     }
-    attachTemplatePortal(_portal) {
-        throw new Error('Method not implemented.');
+    ngAfterContentInit() {
+        this.dtPickerSub = this.dtPicker.confirmSelectedChange.subscribe((selecteds) => {
+            if (Array.isArray(selecteds)) {
+                this.values = selecteds;
+            }
+            else {
+                this.value = selecteds;
+            }
+            this.onModelChange(selecteds);
+            this.onModelTouched();
+            this.dateTimeChange.emit({
+                source: this,
+                value: selecteds,
+                input: this.elmRef.nativeElement
+            });
+            this.dateTimeInput.emit({
+                source: this,
+                value: selecteds,
+                input: this.elmRef.nativeElement
+            });
+        });
     }
-    setConfig(config) {
-        this._config = config;
-        if (config.event) {
-            this.calculateZoomOrigin(config.event);
+    ngOnDestroy() {
+        this.dtPickerSub.unsubscribe();
+        this.localeSub.unsubscribe();
+        this.valueChange.complete();
+        this.disabledChange.complete();
+    }
+    writeValue(value) {
+        if (this.isInSingleMode) {
+            this.value = value;
+        }
+        else {
+            this.values = value;
         }
     }
-    onAnimationStart(event) {
-        this.isAnimating = true;
-        this.animationStateChanged.emit(event);
+    registerOnChange(fn) {
+        this.onModelChange = fn;
     }
-    onAnimationDone(event) {
-        if (event.toState === 'enter') {
-            this.trapFocus();
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    validate(c) {
+        return this.validator ? this.validator(c) : null;
+    }
+    registerOnValidatorChange(fn) {
+        this.validatorOnChange = fn;
+    }
+    /**
+     * Open the picker when user hold alt + DOWN_ARROW
+     * */
+    handleKeydownOnHost(event) {
+        if (event.altKey && event.keyCode === DOWN_ARROW) {
+            this.dtPicker.open();
+            event.preventDefault();
         }
-        else if (event.toState === 'exit') {
-            this.restoreFocus();
+    }
+    handleBlurOnHost(_event) {
+        this.onModelTouched();
+    }
+    handleInputOnHost(event) {
+        const value = event.target.value;
+        if (this._selectMode === 'single') {
+            this.changeInputInSingleMode(value);
+        }
+        else if (this._selectMode === 'range') {
+            this.changeInputInRangeMode(value);
+        }
+        else {
+            this.changeInputInRangeFromToMode(value);
         }
-        this.animationStateChanged.emit(event);
-        this.isAnimating = false;
     }
-    startExitAnimation() {
-        this.state = 'exit';
-        this.changeDetector.markForCheck();
+    handleChangeOnHost(_event) {
+        let v;
+        if (this.isInSingleMode) {
+            v = this.value;
+        }
+        else if (this.isInRangeMode) {
+            v = this.values;
+        }
+        this.dateTimeChange.emit({
+            source: this,
+            value: v,
+            input: this.elmRef.nativeElement
+        });
     }
     /**
-     * Calculate origin used in the `zoomFadeInFrom()`
-     * for animation purpose
+     * Set the native input property 'value'
      */
-    calculateZoomOrigin(event) {
-        if (!event) {
-            return;
+    formatNativeInputValue() {
+        if (this.isInSingleMode) {
+            this.renderer.setProperty(this.elmRef.nativeElement, 'value', this._value
+                ? this.dateTimeAdapter.format(this._value, this.dtPicker.formatString)
+                : '');
+        }
+        else if (this.isInRangeMode) {
+            if (this._values && this.values.length > 0) {
+                const from = this._values[0];
+                const to = this._values[1];
+                const fromFormatted = from
+                    ? this.dateTimeAdapter.format(from, this.dtPicker.formatString)
+                    : '';
+                const toFormatted = to
+                    ? this.dateTimeAdapter.format(to, this.dtPicker.formatString)
+                    : '';
+                if (!fromFormatted && !toFormatted) {
+                    this.renderer.setProperty(this.elmRef.nativeElement, 'value', null);
+                }
+                else {
+                    if (this._selectMode === 'range') {
+                        this.renderer.setProperty(this.elmRef.nativeElement, 'value', fromFormatted +
+                            ' ' +
+                            this.rangeSeparator +
+                            ' ' +
+                            toFormatted);
+                    }
+                    else if (this._selectMode === 'rangeFrom') {
+                        this.renderer.setProperty(this.elmRef.nativeElement, 'value', fromFormatted);
+                    }
+                    else if (this._selectMode === 'rangeTo') {
+                        this.renderer.setProperty(this.elmRef.nativeElement, 'value', toFormatted);
+                    }
+                }
+            }
+            else {
+                this.renderer.setProperty(this.elmRef.nativeElement, 'value', '');
+            }
         }
-        const clientX = event.clientX;
-        const clientY = event.clientY;
-        const wh = window.innerWidth / 2;
-        const hh = window.innerHeight / 2;
-        const x = clientX - wh;
-        const y = clientY - hh;
-        const ox = clientX / window.innerWidth;
-        const oy = clientY / window.innerHeight;
-        this.params.x = `${x}px`;
-        this.params.y = `${y}px`;
-        this.params.ox = `${ox * 100}%`;
-        this.params.oy = `${oy * 100}%`;
-        this.params.scale = 0;
         return;
     }
     /**
-     * Save the focused element before dialog was open
+     * Register the relationship between this input and its picker component
      */
-    savePreviouslyFocusedElement() {
-        if (this.document) {
-            this.elementFocusedBeforeDialogWasOpened = this.document
-                .activeElement;
-            Promise.resolve().then(() => this.elementRef.nativeElement.focus());
+    registerDateTimePicker(picker) {
+        if (picker) {
+            this.dtPicker = picker;
+            this.dtPicker.registerInput(this);
         }
     }
-    trapFocus() {
-        if (!this.focusTrap) {
-            this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
+    /**
+     * Convert a given obj to a valid date object
+     */
+    getValidDate(obj) {
+        return this.dateTimeAdapter.isDateInstance(obj) &&
+            this.dateTimeAdapter.isValid(obj)
+            ? obj
+            : null;
+    }
+    /**
+     * Convert a time string to a date-time string
+     * When pickerType is 'timer', the value in the picker's input is a time string.
+     * The dateTimeAdapter parse fn could not parse a time string to a Date Object.
+     * Therefore we need this fn to convert a time string to a date-time string.
+     */
+    convertTimeStringToDateTimeString(timeString, dateTime) {
+        if (timeString) {
+            const v = dateTime || this.dateTimeAdapter.now();
+            const dateString = this.dateTimeAdapter.format(v, this.dateTimeFormats.datePickerInput);
+            return dateString + ' ' + timeString;
         }
-        if (this._config.autoFocus) {
-            this.focusTrap.focusInitialElementWhenReady();
+        else {
+            return null;
         }
     }
-    restoreFocus() {
-        const toFocus = this.elementFocusedBeforeDialogWasOpened;
-        // We need the extra check, because IE can set the `activeElement` to null in some cases.
-        if (toFocus && typeof toFocus.focus === 'function') {
-            toFocus.focus();
+    /**
+     * Handle input change in single mode
+     */
+    changeInputInSingleMode(inputValue) {
+        let value = inputValue;
+        if (this.dtPicker.pickerType === 'timer') {
+            value = this.convertTimeStringToDateTimeString(value, this.value);
         }
-        if (this.focusTrap) {
-            this.focusTrap.destroy();
+        let result = this.dateTimeAdapter.parse(value, this.dateTimeFormats.parseInput);
+        this.lastValueValid = !result || this.dateTimeAdapter.isValid(result);
+        result = this.getValidDate(result);
+        // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
+        // result equals to null means there is input event, but the input value is invalid
+        if (!this.isSameValue(result, this._value) || result === null) {
+            this._value = result;
+            this.valueChange.emit(result);
+            this.onModelChange(result);
+            this.dateTimeInput.emit({
+                source: this,
+                value: result,
+                input: this.elmRef.nativeElement
+            });
         }
     }
-}
-OwlDialogContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'owl-dialog-container',
-                template: "<ng-template cdkPortalOutlet></ng-template>\n",
-                animations: [
-                    trigger('slideModal', [
-                        transition('void => enter', [
-                            style(zoomFadeInFrom),
-                            animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style('*')),
-                            animate('150ms', keyframes([
-                                style({ transform: 'scale(1)', offset: 0 }),
-                                style({ transform: 'scale(1.05)', offset: 0.3 }),
-                                style({ transform: 'scale(.95)', offset: 0.8 }),
-                                style({ transform: 'scale(1)', offset: 1.0 })
-                            ])),
-                            animateChild()
-                        ], {
-                            params: {
-                                x: '0px',
-                                y: '0px',
-                                ox: '50%',
-                                oy: '50%',
-                                scale: 1
-                            }
-                        }),
-                        transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
-                    ])
-                ]
-            },] }
-];
-OwlDialogContainerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef },
-    { type: FocusTrapFactory },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }
-];
-OwlDialogContainerComponent.propDecorators = {
-    portalOutlet: [{ type: ViewChild, args: [CdkPortalOutlet, { static: true },] }],
-    owlDialogContainerClass: [{ type: HostBinding, args: ['class.owl-dialog-container',] }],
-    owlDialogContainerTabIndex: [{ type: HostBinding, args: ['attr.tabindex',] }],
-    owlDialogContainerId: [{ type: HostBinding, args: ['attr.id',] }],
-    owlDialogContainerRole: [{ type: HostBinding, args: ['attr.role',] }],
-    owlDialogContainerAriaLabelledby: [{ type: HostBinding, args: ['attr.aria-labelledby',] }],
-    owlDialogContainerAriaDescribedby: [{ type: HostBinding, args: ['attr.aria-describedby',] }],
-    owlDialogContainerAnimation: [{ type: HostBinding, args: ['@slideModal',] }],
-    onAnimationStart: [{ type: HostListener, args: ['@slideModal.start', ['$event'],] }],
-    onAnimationDone: [{ type: HostListener, args: ['@slideModal.done', ['$event'],] }]
-};
-
-const OWL_DIALOG_DATA = new InjectionToken('OwlDialogData');
-/**
- * Injection token that determines the scroll handling while the dialog is open.
- * */
-const OWL_DIALOG_SCROLL_STRATEGY = new InjectionToken('owl-dialog-scroll-strategy');
-function OWL_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
-    const fn = () => overlay.scrollStrategies.block();
-    return fn;
-}
-/** @docs-private */
-const OWL_DIALOG_SCROLL_STRATEGY_PROVIDER = {
-    provide: OWL_DIALOG_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: OWL_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY
-};
-/** I
- * njection token that can be used to specify default dialog options.
- * */
-const OWL_DIALOG_DEFAULT_OPTIONS = new InjectionToken('owl-dialog-default-options');
-class OwlDialogService {
-    constructor(overlay, injector, location, scrollStrategy, defaultOptions, parentDialog, overlayContainer) {
-        this.overlay = overlay;
-        this.injector = injector;
-        this.location = location;
-        this.defaultOptions = defaultOptions;
-        this.parentDialog = parentDialog;
-        this.overlayContainer = overlayContainer;
-        this.ariaHiddenElements = new Map();
-        this._openDialogsAtThisLevel = [];
-        this._afterOpenAtThisLevel = new Subject();
-        this._afterAllClosedAtThisLevel = new Subject();
-        /**
-         * Stream that emits when all open dialog have finished closing.
-         * Will emit on subscribe if there are no open dialogs to begin with.
-         */
-        this.afterAllClosed = defer(() => this._openDialogsAtThisLevel.length
-            ? this._afterAllClosed
-            : this._afterAllClosed.pipe(startWith(undefined)));
-        this.scrollStrategy = scrollStrategy;
-        if (!parentDialog && location) {
-            location.subscribe(() => this.closeAll());
-        }
-    }
-    /** Keeps track of the currently-open dialogs. */
-    get openDialogs() {
-        return this.parentDialog
-            ? this.parentDialog.openDialogs
-            : this._openDialogsAtThisLevel;
-    }
-    /** Stream that emits when a dialog has been opened. */
-    get afterOpen() {
-        return this.parentDialog
-            ? this.parentDialog.afterOpen
-            : this._afterOpenAtThisLevel;
-    }
-    get _afterAllClosed() {
-        const parent = this.parentDialog;
-        return parent
-            ? parent._afterAllClosed
-            : this._afterAllClosedAtThisLevel;
-    }
-    open(componentOrTemplateRef, config) {
-        config = applyConfigDefaults(config, this.defaultOptions);
-        if (config.id && this.getDialogById(config.id)) {
-            throw Error(`Dialog with id "${config.id}" exists already. The dialog id must be unique.`);
+    /**
+     * Handle input change in rangeFrom or rangeTo mode
+     */
+    changeInputInRangeFromToMode(inputValue) {
+        const originalValue = this._selectMode === 'rangeFrom'
+            ? this._values[0]
+            : this._values[1];
+        if (this.dtPicker.pickerType === 'timer') {
+            inputValue = this.convertTimeStringToDateTimeString(inputValue, originalValue);
         }
-        const overlayRef = this.createOverlay(config);
-        const dialogContainer = this.attachDialogContainer(overlayRef, config);
-        const dialogRef = this.attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config);
-        if (!this.openDialogs.length) {
-            this.hideNonDialogContentFromAssistiveTechnology();
+        let result = this.dateTimeAdapter.parse(inputValue, this.dateTimeFormats.parseInput);
+        this.lastValueValid = !result || this.dateTimeAdapter.isValid(result);
+        result = this.getValidDate(result);
+        // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
+        if ((this._selectMode === 'rangeFrom' &&
+            this.isSameValue(result, this._values[0]) &&
+            result) ||
+            (this._selectMode === 'rangeTo' &&
+                this.isSameValue(result, this._values[1]) &&
+                result)) {
+            return;
         }
-        this.openDialogs.push(dialogRef);
-        dialogRef
-            .afterClosed()
-            .subscribe(() => this.removeOpenDialog(dialogRef));
-        this.afterOpen.next(dialogRef);
-        return dialogRef;
+        this._values =
+            this._selectMode === 'rangeFrom'
+                ? [result, this._values[1]]
+                : [this._values[0], result];
+        this.valueChange.emit(this._values);
+        this.onModelChange(this._values);
+        this.dateTimeInput.emit({
+            source: this,
+            value: this._values,
+            input: this.elmRef.nativeElement
+        });
     }
     /**
-     * Closes all of the currently-open dialogs.
+     * Handle input change in range mode
      */
-    closeAll() {
-        let i = this.openDialogs.length;
-        while (i--) {
-            this.openDialogs[i].close();
+    changeInputInRangeMode(inputValue) {
+        const selecteds = inputValue.split(this.rangeSeparator);
+        let fromString = selecteds[0];
+        let toString = selecteds[1];
+        if (this.dtPicker.pickerType === 'timer') {
+            fromString = this.convertTimeStringToDateTimeString(fromString, this.values[0]);
+            toString = this.convertTimeStringToDateTimeString(toString, this.values[1]);
+        }
+        let from = this.dateTimeAdapter.parse(fromString, this.dateTimeFormats.parseInput);
+        let to = this.dateTimeAdapter.parse(toString, this.dateTimeFormats.parseInput);
+        this.lastValueValid =
+            (!from || this.dateTimeAdapter.isValid(from)) &&
+                (!to || this.dateTimeAdapter.isValid(to));
+        from = this.getValidDate(from);
+        to = this.getValidDate(to);
+        // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
+        if (!this.isSameValue(from, this._values[0]) ||
+            !this.isSameValue(to, this._values[1]) ||
+            (from === null && to === null)) {
+            this._values = [from, to];
+            this.valueChange.emit(this._values);
+            this.onModelChange(this._values);
+            this.dateTimeInput.emit({
+                source: this,
+                value: this._values,
+                input: this.elmRef.nativeElement
+            });
         }
     }
     /**
-     * Finds an open dialog by its id.
-     * @param id ID to use when looking up the dialog.
+     * Check if the two value is the same
      */
-    getDialogById(id) {
-        return this.openDialogs.find(dialog => dialog.id === id);
-    }
-    attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config) {
-        const dialogRef = new OwlDialogRef(overlayRef, dialogContainer, config.id, this.location);
-        if (config.hasBackdrop) {
-            overlayRef.backdropClick().subscribe(() => {
-                if (!dialogRef.disableClose) {
-                    dialogRef.close();
-                }
-            });
-        }
-        if (componentOrTemplateRef instanceof TemplateRef) {
-        }
-        else {
-            const injector = this.createInjector(config, dialogRef, dialogContainer);
-            const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, undefined, injector));
-            dialogRef.componentInstance = contentRef.instance;
+    isSameValue(first, second) {
+        if (first && second) {
+            return this.dateTimeAdapter.compare(first, second) === 0;
         }
-        dialogRef
-            .updateSize(config.width, config.height)
-            .updatePosition(config.position);
-        return dialogRef;
+        return first == second;
     }
-    createInjector(config, dialogRef, dialogContainer) {
-        const userInjector = config &&
-            config.viewContainerRef &&
-            config.viewContainerRef.injector;
-        const injectionTokens = new WeakMap();
-        injectionTokens.set(OwlDialogRef, dialogRef);
-        injectionTokens.set(OwlDialogContainerComponent, dialogContainer);
-        injectionTokens.set(OWL_DIALOG_DATA, config.data);
-        return new PortalInjector(userInjector || this.injector, injectionTokens);
+}
+OwlDateTimeInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DateTimeAdapter, optional: true }, { token: OWL_DATE_TIME_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+OwlDateTimeInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: { owlDateTime: "owlDateTime", owlDateTimeFilter: "owlDateTimeFilter", _disabled: "_disabled", min: "min", max: "max", selectMode: "selectMode", rangeSeparator: "rangeSeparator", value: "value", values: "values" }, outputs: { dateTimeChange: "dateTimeChange", dateTimeInput: "dateTimeInput" }, host: { listeners: { "keydown": "handleKeydownOnHost($event)", "blur": "handleBlurOnHost($event)", "input": "handleInputOnHost($event)", "change": "handleChangeOnHost($event)" }, properties: { "attr.aria-haspopup": "this.owlDateTimeInputAriaHaspopup", "attr.aria-owns": "this.owlDateTimeInputAriaOwns", "attr.min": "this.minIso8601", "attr.max": "this.maxIso8601", "disabled": "this.owlDateTimeInputDisabled" } }, providers: [
+        OWL_DATETIME_VALUE_ACCESSOR,
+        OWL_DATETIME_VALIDATORS
+    ], exportAs: ["owlDateTimeInput"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[owlDateTime]',
+                    exportAs: 'owlDateTimeInput',
+                    providers: [
+                        OWL_DATETIME_VALUE_ACCESSOR,
+                        OWL_DATETIME_VALIDATORS
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DATE_TIME_FORMATS]
+                }] }]; }, propDecorators: { owlDateTime: [{
+                type: Input
+            }], owlDateTimeFilter: [{
+                type: Input
+            }], _disabled: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], selectMode: [{
+                type: Input
+            }], rangeSeparator: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], dateTimeChange: [{
+                type: Output
+            }], dateTimeInput: [{
+                type: Output
+            }], owlDateTimeInputAriaHaspopup: [{
+                type: HostBinding,
+                args: ['attr.aria-haspopup']
+            }], owlDateTimeInputAriaOwns: [{
+                type: HostBinding,
+                args: ['attr.aria-owns']
+            }], minIso8601: [{
+                type: HostBinding,
+                args: ['attr.min']
+            }], maxIso8601: [{
+                type: HostBinding,
+                args: ['attr.max']
+            }], owlDateTimeInputDisabled: [{
+                type: HostBinding,
+                args: ['disabled']
+            }], handleKeydownOnHost: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], handleBlurOnHost: [{
+                type: HostListener,
+                args: ['blur', ['$event']]
+            }], handleInputOnHost: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], handleChangeOnHost: [{
+                type: HostListener,
+                args: ['change', ['$event']]
+            }] } });
+
+class OwlDateTimeTriggerDirective {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.stateChanges = Subscription.EMPTY;
     }
-    createOverlay(config) {
-        const overlayConfig = this.getOverlayConfig(config);
-        return this.overlay.create(overlayConfig);
+    get disabled() {
+        return this._disabled === undefined ? this.dtPicker.disabled : !!this._disabled;
     }
-    attachDialogContainer(overlayRef, config) {
-        const containerPortal = new ComponentPortal(OwlDialogContainerComponent, config.viewContainerRef);
-        const containerRef = overlayRef.attach(containerPortal);
-        containerRef.instance.setConfig(config);
-        return containerRef.instance;
+    set disabled(value) {
+        this._disabled = value;
     }
-    getOverlayConfig(dialogConfig) {
-        const state = new OverlayConfig({
-            positionStrategy: this.overlay.position().global(),
-            scrollStrategy: dialogConfig.scrollStrategy || this.scrollStrategy(),
-            panelClass: dialogConfig.paneClass,
-            hasBackdrop: dialogConfig.hasBackdrop,
-            minWidth: dialogConfig.minWidth,
-            minHeight: dialogConfig.minHeight,
-            maxWidth: dialogConfig.maxWidth,
-            maxHeight: dialogConfig.maxHeight
-        });
-        if (dialogConfig.backdropClass) {
-            state.backdropClass = dialogConfig.backdropClass;
-        }
-        return state;
+    get owlDTTriggerDisabledClass() {
+        return this.disabled;
     }
-    removeOpenDialog(dialogRef) {
-        const index = this._openDialogsAtThisLevel.indexOf(dialogRef);
-        if (index > -1) {
-            this.openDialogs.splice(index, 1);
-            // If all the dialogs were closed, remove/restore the `aria-hidden`
-            // to a the siblings and emit to the `afterAllClosed` stream.
-            if (!this.openDialogs.length) {
-                this.ariaHiddenElements.forEach((previousValue, element) => {
-                    if (previousValue) {
-                        element.setAttribute('aria-hidden', previousValue);
-                    }
-                    else {
-                        element.removeAttribute('aria-hidden');
-                    }
-                });
-                this.ariaHiddenElements.clear();
-                this._afterAllClosed.next();
-            }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        if (changes.datepicker) {
+            this.watchStateChanges();
         }
     }
-    /**
-     * Hides all of the content that isn't an overlay from assistive technology.
-     */
-    hideNonDialogContentFromAssistiveTechnology() {
-        const overlayContainer = this.overlayContainer.getContainerElement();
-        // Ensure that the overlay container is attached to the DOM.
-        if (overlayContainer.parentElement) {
-            const siblings = overlayContainer.parentElement.children;
-            for (let i = siblings.length - 1; i > -1; i--) {
-                const sibling = siblings[i];
-                if (sibling !== overlayContainer &&
-                    sibling.nodeName !== 'SCRIPT' &&
-                    sibling.nodeName !== 'STYLE' &&
-                    !sibling.hasAttribute('aria-live')) {
-                    this.ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
-                    sibling.setAttribute('aria-hidden', 'true');
-                }
-            }
+    ngAfterContentInit() {
+        this.watchStateChanges();
+    }
+    ngOnDestroy() {
+        this.stateChanges.unsubscribe();
+    }
+    handleClickOnHost(event) {
+        if (this.dtPicker) {
+            this.dtPicker.open();
+            event.stopPropagation();
         }
     }
+    watchStateChanges() {
+        this.stateChanges.unsubscribe();
+        const inputDisabled = this.dtPicker && this.dtPicker.dtInput ?
+            this.dtPicker.dtInput.disabledChange : of();
+        const pickerDisabled = this.dtPicker ?
+            this.dtPicker.disabledChange : of();
+        this.stateChanges = merge(pickerDisabled, inputDisabled)
+            .subscribe(() => {
+            this.changeDetector.markForCheck();
+        });
+    }
 }
-OwlDialogService.decorators = [
-    { type: Injectable }
-];
-OwlDialogService.ctorParameters = () => [
-    { type: Overlay },
-    { type: Injector },
-    { type: Location, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Inject, args: [OWL_DIALOG_SCROLL_STRATEGY,] }] },
-    { type: OwlDialogConfig, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DIALOG_DEFAULT_OPTIONS,] }] },
-    { type: OwlDialogService, decorators: [{ type: Optional }, { type: SkipSelf }] },
-    { type: OverlayContainer }
-];
-/**
- * Applies default options to the dialog config.
- * @param config Config to be modified.
- * @param defaultOptions Default config setting
- * @returns The new configuration object.
- */
-function applyConfigDefaults(config, defaultOptions) {
-    return extendObject(new OwlDialogConfig(), config, defaultOptions);
-}
+OwlDateTimeTriggerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeTriggerDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+OwlDateTimeTriggerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: { dtPicker: ["owlDateTimeTrigger", "dtPicker"], disabled: "disabled" }, host: { listeners: { "click": "handleClickOnHost($event)" }, properties: { "class.owl-dt-trigger-disabled": "this.owlDTTriggerDisabledClass" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[owlDateTimeTrigger]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { dtPicker: [{
+                type: Input,
+                args: ['owlDateTimeTrigger']
+            }], disabled: [{
+                type: Input
+            }], owlDTTriggerDisabledClass: [{
+                type: HostBinding,
+                args: ['class.owl-dt-trigger-disabled']
+            }], handleClickOnHost: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
 
-/** Injection token that determines the scroll handling while the dtPicker is open. */
-const OWL_DTPICKER_SCROLL_STRATEGY = new InjectionToken('owl-dtpicker-scroll-strategy');
-/** @docs-private */
-function OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
-    const fn = () => overlay.scrollStrategies.block();
-    return fn;
-}
-/** @docs-private */
-const OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER = {
-    provide: OWL_DTPICKER_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY
-};
-class OwlDateTimeComponent extends OwlDateTimeDirective {
-    constructor(overlay, viewContainerRef, dialogService, ngZone, changeDetector, dateTimeAdapter, defaultScrollStrategy, dateTimeFormats, document) {
-        super(dateTimeAdapter, dateTimeFormats);
-        this.overlay = overlay;
-        this.viewContainerRef = viewContainerRef;
-        this.dialogService = dialogService;
-        this.ngZone = ngZone;
-        this.changeDetector = changeDetector;
-        this.dateTimeAdapter = dateTimeAdapter;
-        this.dateTimeFormats = dateTimeFormats;
-        this.document = document;
-        /** Custom class for the picker backdrop. */
-        this.backdropClass = [];
-        /** Custom class for the picker overlay pane. */
-        this.panelClass = [];
+let uniqueId = 0;
+class OwlDialogConfig {
+    constructor() {
         /**
-         * Set the type of the dateTime picker
-         *      'both' -- show both calendar and timer
-         *      'calendar' -- show only calendar
-         *      'timer' -- show only timer
+         * ID of the element that describes the dialog.
          */
-        this._pickerType = 'both';
+        this.ariaDescribedBy = null;
         /**
-         * Whether the picker open as a dialog
+         * Whether to focus the dialog when the dialog is opened
          */
-        this._pickerMode = 'popup';
-        /** Whether the calendar is open. */
-        this._opened = false;
+        this.autoFocus = true;
+        /** Whether the dialog has a backdrop. */
+        this.hasBackdrop = true;
+        /** Data being injected into the child component. */
+        this.data = null;
+        /** Whether the user can use escape or clicking outside to close a modal. */
+        this.disableClose = false;
         /**
-         * Callback when the picker is closed
+         * The ARIA role of the dialog element.
+         */
+        this.role = 'dialog';
+        /**
+         * Custom class for the pane
          * */
-        this.afterPickerClosed = new EventEmitter();
+        this.paneClass = '';
         /**
-         * Callback when the picker is open
+         * Mouse Event
          * */
-        this.afterPickerOpen = new EventEmitter();
+        this.event = null;
         /**
-         * Emits selected year in multi-year view
-         * This doesn't imply a change on the selected date.
+         * Custom class for the backdrop
          * */
-        this.yearSelected = new EventEmitter();
+        this.backdropClass = '';
         /**
-         * Emits selected month in year view
-         * This doesn't imply a change on the selected date.
+         * Whether the dialog should close when the user goes backwards/forwards in history.
          * */
-        this.monthSelected = new EventEmitter();
+        this.closeOnNavigation = true;
+        /** Width of the dialog. */
+        this.width = '';
+        /** Height of the dialog. */
+        this.height = '';
         /**
-         * Emit when the selected value has been confirmed
+         * The max-width of the overlay panel.
+         * If a number is provided, pixel units are assumed.
          * */
-        this.confirmSelectedChange = new EventEmitter();
+        this.maxWidth = '85vw';
         /**
-         * Emits when the date time picker is disabled.
+         * The scroll strategy when the dialog is open
+         * Learn more this from https://material.angular.io/cdk/overlay/overview#scroll-strategies
          * */
-        this.disabledChange = new EventEmitter();
-        this.dtInputSub = Subscription.EMPTY;
-        this.hidePickerStreamSub = Subscription.EMPTY;
-        this.confirmSelectedStreamSub = Subscription.EMPTY;
-        this.pickerOpenedStreamSub = Subscription.EMPTY;
-        /** The element that was focused before the date time picker was opened. */
-        this.focusedElementBeforeOpen = null;
-        this._selecteds = [];
-        this.defaultScrollStrategy = defaultScrollStrategy;
+        this.scrollStrategy = new NoopScrollStrategy();
+        this.id = `owl-dialog-${uniqueId++}`;
     }
-    get startAt() {
-        // If an explicit startAt is set we start there, otherwise we start at whatever the currently
-        // selected value is.
-        if (this._startAt) {
-            return this._startAt;
-        }
-        if (this._dtInput) {
-            if (this._dtInput.selectMode === 'single') {
-                return this._dtInput.value || null;
-            }
-            else if (this._dtInput.selectMode === 'range' ||
-                this._dtInput.selectMode === 'rangeFrom') {
-                return this._dtInput.values[0] || null;
-            }
-            else if (this._dtInput.selectMode === 'rangeTo') {
-                return this._dtInput.values[1] || null;
-            }
-        }
-        else {
-            return null;
+}
+
+class OwlDialogRef {
+    constructor(overlayRef, container, id, location) {
+        this.overlayRef = overlayRef;
+        this.container = container;
+        this.id = id;
+        this._beforeClose$ = new Subject();
+        this._afterOpen$ = new Subject();
+        this._afterClosed$ = new Subject();
+        /** Subscription to changes in the user's location. */
+        this.locationChanged = Subscription.EMPTY;
+        /** Whether the user is allowed to close the dialog. */
+        this.disableClose = this.container.config.disableClose;
+        this.container.animationStateChanged
+            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'enter'), take(1))
+            .subscribe(() => {
+            this._afterOpen$.next();
+            this._afterOpen$.complete();
+        });
+        this.container.animationStateChanged
+            .pipe(filter((event) => event.phaseName === 'done' && event.toState === 'exit'), take(1))
+            .subscribe(() => {
+            this.overlayRef.dispose();
+            this.locationChanged.unsubscribe();
+            this._afterClosed$.next(this.result);
+            this._afterClosed$.complete();
+            this.componentInstance = null;
+        });
+        this.overlayRef.keydownEvents()
+            .pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose))
+            .subscribe(() => this.close());
+        if (location) {
+            this.locationChanged = location.subscribe(() => {
+                if (this.container.config.closeOnNavigation) {
+                    this.close();
+                }
+            });
         }
     }
-    set startAt(date) {
-        this._startAt = this.getValidDate(this.dateTimeAdapter.deserialize(date));
-    }
-    get pickerType() {
-        return this._pickerType;
+    close(dialogResult) {
+        this.result = dialogResult;
+        this.container.animationStateChanged
+            .pipe(filter((event) => event.phaseName === 'start'), take(1))
+            .subscribe(() => {
+            this._beforeClose$.next(dialogResult);
+            this._beforeClose$.complete();
+            this.overlayRef.detachBackdrop();
+        });
+        this.container.startExitAnimation();
     }
-    set pickerType(val) {
-        if (val !== this._pickerType) {
-            this._pickerType = val;
-            if (this._dtInput) {
-                this._dtInput.formatNativeInputValue();
-            }
-        }
+    /**
+     * Gets an observable that emits when the overlay's backdrop has been clicked.
+     */
+    backdropClick() {
+        return this.overlayRef.backdropClick();
     }
-    get pickerMode() {
-        return this._pickerMode;
+    /**
+     * Gets an observable that emits when keydown events are targeted on the overlay.
+     */
+    keydownEvents() {
+        return this.overlayRef.keydownEvents();
     }
-    set pickerMode(mode) {
-        if (mode === 'popup') {
-            this._pickerMode = mode;
+    /**
+     * Updates the dialog's position.
+     *
+     * @param position New dialog position.
+     */
+    updatePosition(position) {
+        const strategy = this.getPositionStrategy();
+        if (position && (position.left || position.right)) {
+            if (position.left)
+                strategy.left(position.left);
+            else
+                strategy.right(position.right);
         }
         else {
-            this._pickerMode = 'dialog';
+            strategy.centerHorizontally();
         }
-    }
-    get disabled() {
-        return this._disabled === undefined && this._dtInput
-            ? this._dtInput.disabled
-            : !!this._disabled;
-    }
-    set disabled(value) {
-        value = coerceBooleanProperty(value);
-        if (value !== this._disabled) {
-            this._disabled = value;
-            this.disabledChange.next(value);
+        if (position && (position.top || position.bottom)) {
+            if (position.top)
+                strategy.top(position.top);
+            else
+                strategy.bottom(position.bottom);
         }
+        else {
+            strategy.centerVertically();
+        }
+        this.overlayRef.updatePosition();
+        return this;
     }
-    get opened() {
-        return this._opened;
+    /**
+     * Updates the dialog's width and height.
+     *
+     * @param width New width of the dialog.
+     * @param height New height of the dialog.
+     */
+    updateSize(width = 'auto', height = 'auto') {
+        this.overlayRef.updateSize({ width, height });
+        this.overlayRef.updatePosition();
+        return this;
     }
-    set opened(val) {
-        val ? this.open() : this.close();
+    isAnimating() {
+        return this.container.isAnimating;
     }
-    get dtInput() {
-        return this._dtInput;
+    afterOpen() {
+        return this._afterOpen$.asObservable();
     }
-    get selected() {
-        return this._selected;
+    beforeClose() {
+        return this._beforeClose$.asObservable();
     }
-    set selected(value) {
-        this._selected = value;
-        this.changeDetector.markForCheck();
+    afterClosed() {
+        return this._afterClosed$.asObservable();
     }
-    get selecteds() {
-        return this._selecteds;
+    /** Fetches the position strategy object from the overlay ref. */
+    getPositionStrategy() {
+        return this.overlayRef.getConfig().positionStrategy;
     }
-    set selecteds(values) {
-        this._selecteds = values;
-        this.changeDetector.markForCheck();
+}
+
+/**
+ * Extends an object with the *enumerable* and *own* properties of one or more source objects,
+ * similar to Object.assign.
+ *
+ * @param dest The object which will have properties copied to it.
+ * @param sources The source objects from which properties will be copied.
+ */
+function extendObject(dest, ...sources) {
+    if (dest == null) {
+        throw TypeError('Cannot convert undefined or null to object');
     }
-    /** The minimum selectable date. */
-    get minDateTime() {
-        return this._dtInput && this._dtInput.min;
+    for (const source of sources) {
+        if (source != null) {
+            for (const key in source) {
+                if (source.hasOwnProperty(key)) {
+                    dest[key] = source[key];
+                }
+            }
+        }
     }
-    /** The maximum selectable date. */
-    get maxDateTime() {
-        return this._dtInput && this._dtInput.max;
+    return dest;
+}
+
+const zoomFadeIn = {
+    opacity: 0,
+    transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})'
+};
+const zoomFadeInFrom = {
+    opacity: 0,
+    transform: 'translateX({{ x }}) translateY({{ y }}) scale({{scale}})',
+    transformOrigin: '{{ ox }} {{ oy }}'
+};
+class OwlDialogContainerComponent extends BasePortalOutlet {
+    constructor(changeDetector, elementRef, focusTrapFactory, document) {
+        super();
+        this.changeDetector = changeDetector;
+        this.elementRef = elementRef;
+        this.focusTrapFactory = focusTrapFactory;
+        this.document = document;
+        /** ID of the element that should be considered as the dialog's label. */
+        this.ariaLabelledBy = null;
+        /** Emits when an animation state changes. */
+        this.animationStateChanged = new EventEmitter();
+        this.isAnimating = false;
+        this.state = 'enter';
+        // for animation purpose
+        this.params = {
+            x: '0px',
+            y: '0px',
+            ox: '50%',
+            oy: '50%',
+            scale: 0
+        };
+        // A variable to hold the focused element before the dialog was open.
+        // This would help us to refocus back to element when the dialog was closed.
+        this.elementFocusedBeforeDialogWasOpened = null;
     }
-    get dateTimeFilter() {
-        return this._dtInput && this._dtInput.dateTimeFilter;
+    get config() {
+        return this._config;
     }
-    get selectMode() {
-        return this._dtInput.selectMode;
+    get owlDialogContainerClass() {
+        return true;
     }
-    get isInSingleMode() {
-        return this._dtInput.isInSingleMode;
+    get owlDialogContainerTabIndex() {
+        return -1;
     }
-    get isInRangeMode() {
-        return this._dtInput.isInRangeMode;
+    get owlDialogContainerId() {
+        return this._config.id;
     }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.close();
-        this.dtInputSub.unsubscribe();
-        this.disabledChange.complete();
-        if (this.popupRef) {
-            this.popupRef.dispose();
-        }
+    get owlDialogContainerRole() {
+        return this._config.role || null;
     }
-    registerInput(input) {
-        if (this._dtInput) {
-            throw Error('A Owl DateTimePicker can only be associated with a single input.');
-        }
-        this._dtInput = input;
-        this.dtInputSub = this._dtInput.valueChange.subscribe((value) => {
-            if (Array.isArray(value)) {
-                this.selecteds = value;
-            }
-            else {
-                this.selected = value;
-            }
-        });
+    get owlDialogContainerAriaLabelledby() {
+        return this.ariaLabelledBy;
     }
-    open() {
-        if (this._opened || this.disabled) {
-            return;
-        }
-        if (!this._dtInput) {
-            throw Error('Attempted to open an DateTimePicker with no associated input.');
-        }
-        if (this.document) {
-            this.focusedElementBeforeOpen = this.document.activeElement;
-        }
-        // reset the picker selected value
-        if (this.isInSingleMode) {
-            this.selected = this._dtInput.value;
-        }
-        else if (this.isInRangeMode) {
-            this.selecteds = this._dtInput.values;
-        }
-        // when the picker is open , we make sure the picker's current selected time value
-        // is the same as the _startAt time value.
-        if (this.selected && this.pickerType !== 'calendar' && this._startAt) {
-            this.selected = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.selected), this.dateTimeAdapter.getMonth(this.selected), this.dateTimeAdapter.getDate(this.selected), this.dateTimeAdapter.getHours(this._startAt), this.dateTimeAdapter.getMinutes(this._startAt), this.dateTimeAdapter.getSeconds(this._startAt));
-        }
-        this.pickerMode === 'dialog' ? this.openAsDialog() : this.openAsPopup();
-        this.pickerContainer.picker = this;
-        // Listen to picker container's hidePickerStream
-        this.hidePickerStreamSub = this.pickerContainer.hidePickerStream.subscribe(() => {
-            this.close();
-        });
-        // Listen to picker container's confirmSelectedStream
-        this.confirmSelectedStreamSub = this.pickerContainer.confirmSelectedStream.subscribe((event) => {
-            this.confirmSelect(event);
-        });
+    get owlDialogContainerAriaDescribedby() {
+        return this._config.ariaDescribedBy || null;
+    }
+    get owlDialogContainerAnimation() {
+        return { value: this.state, params: this.params };
     }
+    ngOnInit() { }
     /**
-     * Selects the given date
+     * Attach a ComponentPortal as content to this dialog container.
      */
-    select(date) {
-        if (Array.isArray(date)) {
-            this.selecteds = [...date];
-        }
-        else {
-            this.selected = date;
+    attachComponentPortal(portal) {
+        if (this.portalOutlet.hasAttached()) {
+            throw Error('Attempting to attach dialog content after content is already attached');
         }
-        /**
-         * Cases in which automatically confirm the select when date or dates are selected:
-         * 1) picker mode is NOT 'dialog'
-         * 2) picker type is 'calendar' and selectMode is 'single'.
-         * 3) picker type is 'calendar' and selectMode is 'range' and
-         *    the 'selecteds' has 'from'(selecteds[0]) and 'to'(selecteds[1]) values.
-         * 4) selectMode is 'rangeFrom' and selecteds[0] has value.
-         * 5) selectMode is 'rangeTo' and selecteds[1] has value.
-         * */
-        if (this.pickerMode !== 'dialog' &&
-            this.pickerType === 'calendar' &&
-            ((this.selectMode === 'single' && this.selected) ||
-                (this.selectMode === 'rangeFrom' && this.selecteds[0]) ||
-                (this.selectMode === 'rangeTo' && this.selecteds[1]) ||
-                (this.selectMode === 'range' &&
-                    this.selecteds[0] &&
-                    this.selecteds[1]))) {
-            this.confirmSelect();
+        this.savePreviouslyFocusedElement();
+        return this.portalOutlet.attachComponentPortal(portal);
+    }
+    attachTemplatePortal(_portal) {
+        throw new Error('Method not implemented.');
+    }
+    setConfig(config) {
+        this._config = config;
+        if (config.event) {
+            this.calculateZoomOrigin(config.event);
         }
     }
-    /**
-     * Emits the selected year in multi-year view
-     * */
-    selectYear(normalizedYear) {
-        this.yearSelected.emit(normalizedYear);
+    onAnimationStart(event) {
+        this.isAnimating = true;
+        this.animationStateChanged.emit(event);
     }
-    /**
-     * Emits selected month in year view
-     * */
-    selectMonth(normalizedMonth) {
-        this.monthSelected.emit(normalizedMonth);
+    onAnimationDone(event) {
+        if (event.toState === 'enter') {
+            this.trapFocus();
+        }
+        else if (event.toState === 'exit') {
+            this.restoreFocus();
+        }
+        this.animationStateChanged.emit(event);
+        this.isAnimating = false;
+    }
+    startExitAnimation() {
+        this.state = 'exit';
+        this.changeDetector.markForCheck();
     }
     /**
-     * Hide the picker
+     * Calculate origin used in the `zoomFadeInFrom()`
+     * for animation purpose
      */
-    close() {
-        if (!this._opened) {
+    calculateZoomOrigin(event) {
+        if (!event) {
             return;
         }
-        if (this.popupRef && this.popupRef.hasAttached()) {
-            this.popupRef.detach();
-        }
-        if (this.pickerContainerPortal &&
-            this.pickerContainerPortal.isAttached) {
-            this.pickerContainerPortal.detach();
+        const clientX = event.clientX;
+        const clientY = event.clientY;
+        const wh = window.innerWidth / 2;
+        const hh = window.innerHeight / 2;
+        const x = clientX - wh;
+        const y = clientY - hh;
+        const ox = clientX / window.innerWidth;
+        const oy = clientY / window.innerHeight;
+        this.params.x = `${x}px`;
+        this.params.y = `${y}px`;
+        this.params.ox = `${ox * 100}%`;
+        this.params.oy = `${oy * 100}%`;
+        this.params.scale = 0;
+        return;
+    }
+    /**
+     * Save the focused element before dialog was open
+     */
+    savePreviouslyFocusedElement() {
+        if (this.document) {
+            this.elementFocusedBeforeDialogWasOpened = this.document
+                .activeElement;
+            Promise.resolve().then(() => this.elementRef.nativeElement.focus());
         }
-        if (this.hidePickerStreamSub) {
-            this.hidePickerStreamSub.unsubscribe();
-            this.hidePickerStreamSub = null;
+    }
+    trapFocus() {
+        if (!this.focusTrap) {
+            this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
         }
-        if (this.confirmSelectedStreamSub) {
-            this.confirmSelectedStreamSub.unsubscribe();
-            this.confirmSelectedStreamSub = null;
+        if (this._config.autoFocus) {
+            this.focusTrap.focusInitialElementWhenReady();
         }
-        if (this.pickerOpenedStreamSub) {
-            this.pickerOpenedStreamSub.unsubscribe();
-            this.pickerOpenedStreamSub = null;
-        }
-        if (this.dialogRef) {
-            this.dialogRef.close();
-            this.dialogRef = null;
+    }
+    restoreFocus() {
+        const toFocus = this.elementFocusedBeforeDialogWasOpened;
+        // We need the extra check, because IE can set the `activeElement` to null in some cases.
+        if (toFocus && typeof toFocus.focus === 'function') {
+            toFocus.focus();
         }
-        const completeClose = () => {
-            if (this._opened) {
-                this._opened = false;
-                this.afterPickerClosed.emit(null);
-                this.focusedElementBeforeOpen = null;
-            }
-        };
-        if (this.focusedElementBeforeOpen &&
-            typeof this.focusedElementBeforeOpen.focus === 'function') {
-            // Because IE moves focus asynchronously, we can't count on it being restored before we've
-            // marked the datepicker as closed. If the event fires out of sequence and the element that
-            // we're refocusing opens the datepicker on focus, the user could be stuck with not being
-            // able to close the calendar at all. We work around it by making the logic, that marks
-            // the datepicker as closed, async as well.
-            this.focusedElementBeforeOpen.focus();
-            setTimeout(completeClose);
+        if (this.focusTrap) {
+            this.focusTrap.destroy();
         }
-        else {
-            completeClose();
+    }
+}
+OwlDialogContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogContainerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDialogContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlDialogContainerComponent, selector: "owl-dialog-container", host: { listeners: { "@slideModal.start": "onAnimationStart($event)", "@slideModal.done": "onAnimationDone($event)" }, properties: { "class.owl-dialog-container": "this.owlDialogContainerClass", "attr.tabindex": "this.owlDialogContainerTabIndex", "attr.id": "this.owlDialogContainerId", "attr.role": "this.owlDialogContainerRole", "attr.aria-labelledby": "this.owlDialogContainerAriaLabelledby", "attr.aria-describedby": "this.owlDialogContainerAriaDescribedby", "@slideModal": "this.owlDialogContainerAnimation" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortalOutlet></ng-template>\n", directives: [{ type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [
+        trigger('slideModal', [
+            transition('void => enter', [
+                style(zoomFadeInFrom),
+                animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style('*')),
+                animate('150ms', keyframes([
+                    style({ transform: 'scale(1)', offset: 0 }),
+                    style({ transform: 'scale(1.05)', offset: 0.3 }),
+                    style({ transform: 'scale(.95)', offset: 0.8 }),
+                    style({ transform: 'scale(1)', offset: 1.0 })
+                ])),
+                animateChild()
+            ], {
+                params: {
+                    x: '0px',
+                    y: '0px',
+                    ox: '50%',
+                    oy: '50%',
+                    scale: 1
+                }
+            }),
+            transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
+        ])
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'owl-dialog-container', animations: [
+                        trigger('slideModal', [
+                            transition('void => enter', [
+                                style(zoomFadeInFrom),
+                                animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style('*')),
+                                animate('150ms', keyframes([
+                                    style({ transform: 'scale(1)', offset: 0 }),
+                                    style({ transform: 'scale(1.05)', offset: 0.3 }),
+                                    style({ transform: 'scale(.95)', offset: 0.8 }),
+                                    style({ transform: 'scale(1)', offset: 1.0 })
+                                ])),
+                                animateChild()
+                            ], {
+                                params: {
+                                    x: '0px',
+                                    y: '0px',
+                                    ox: '50%',
+                                    oy: '50%',
+                                    scale: 1
+                                }
+                            }),
+                            transition('enter => exit', [animateChild(), animate(200, style(zoomFadeIn))], { params: { x: '0px', y: '0px', ox: '50%', oy: '50%' } })
+                        ])
+                    ], template: "<ng-template cdkPortalOutlet></ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: true }]
+            }], owlDialogContainerClass: [{
+                type: HostBinding,
+                args: ['class.owl-dialog-container']
+            }], owlDialogContainerTabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], owlDialogContainerId: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], owlDialogContainerRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], owlDialogContainerAriaLabelledby: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], owlDialogContainerAriaDescribedby: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], owlDialogContainerAnimation: [{
+                type: HostBinding,
+                args: ['@slideModal']
+            }], onAnimationStart: [{
+                type: HostListener,
+                args: ['@slideModal.start', ['$event']]
+            }], onAnimationDone: [{
+                type: HostListener,
+                args: ['@slideModal.done', ['$event']]
+            }] } });
+
+const OWL_DIALOG_DATA = new InjectionToken('OwlDialogData');
+/**
+ * Injection token that determines the scroll handling while the dialog is open.
+ * */
+const OWL_DIALOG_SCROLL_STRATEGY = new InjectionToken('owl-dialog-scroll-strategy');
+function OWL_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
+    const fn = () => overlay.scrollStrategies.block();
+    return fn;
+}
+/** @docs-private */
+const OWL_DIALOG_SCROLL_STRATEGY_PROVIDER = {
+    provide: OWL_DIALOG_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: OWL_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY
+};
+/** I
+ * njection token that can be used to specify default dialog options.
+ * */
+const OWL_DIALOG_DEFAULT_OPTIONS = new InjectionToken('owl-dialog-default-options');
+class OwlDialogService {
+    constructor(overlay, injector, location, scrollStrategy, defaultOptions, parentDialog, overlayContainer) {
+        this.overlay = overlay;
+        this.injector = injector;
+        this.location = location;
+        this.defaultOptions = defaultOptions;
+        this.parentDialog = parentDialog;
+        this.overlayContainer = overlayContainer;
+        this.ariaHiddenElements = new Map();
+        this._openDialogsAtThisLevel = [];
+        this._afterOpenAtThisLevel = new Subject();
+        this._afterAllClosedAtThisLevel = new Subject();
+        /**
+         * Stream that emits when all open dialog have finished closing.
+         * Will emit on subscribe if there are no open dialogs to begin with.
+         */
+        this.afterAllClosed = defer(() => this._openDialogsAtThisLevel.length
+            ? this._afterAllClosed
+            : of([undefined], this._afterAllClosed).pipe(concatAll()));
+        this.scrollStrategy = scrollStrategy;
+        if (!parentDialog && location) {
+            location.subscribe(() => this.closeAll());
         }
     }
-    /**
-     * Confirm the selected value
-     */
-    confirmSelect(_event) {
-        if (this.isInSingleMode) {
-            const selected = this.selected || this.startAt || this.dateTimeAdapter.now();
-            this.confirmSelectedChange.emit(selected);
+    /** Keeps track of the currently-open dialogs. */
+    get openDialogs() {
+        return this.parentDialog
+            ? this.parentDialog.openDialogs
+            : this._openDialogsAtThisLevel;
+    }
+    /** Stream that emits when a dialog has been opened. */
+    get afterOpen() {
+        return this.parentDialog
+            ? this.parentDialog.afterOpen
+            : this._afterOpenAtThisLevel;
+    }
+    get _afterAllClosed() {
+        const parent = this.parentDialog;
+        return parent
+            ? parent._afterAllClosed
+            : this._afterAllClosedAtThisLevel;
+    }
+    open(componentOrTemplateRef, config) {
+        config = applyConfigDefaults(config, this.defaultOptions);
+        if (config.id && this.getDialogById(config.id)) {
+            throw Error(`Dialog with id "${config.id}" exists already. The dialog id must be unique.`);
         }
-        else if (this.isInRangeMode) {
-            this.confirmSelectedChange.emit(this.selecteds);
+        const overlayRef = this.createOverlay(config);
+        const dialogContainer = this.attachDialogContainer(overlayRef, config);
+        const dialogRef = this.attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config);
+        if (!this.openDialogs.length) {
+            this.hideNonDialogContentFromAssistiveTechnology();
         }
-        this.close();
-        return;
+        this.openDialogs.push(dialogRef);
+        dialogRef
+            .afterClosed()
+            .subscribe(() => this.removeOpenDialog(dialogRef));
+        this.afterOpen.next(dialogRef);
+        return dialogRef;
     }
     /**
-     * Open the picker as a dialog
+     * Closes all of the currently-open dialogs.
      */
-    openAsDialog() {
-        this.dialogRef = this.dialogService.open(OwlDateTimeContainerComponent, {
-            autoFocus: false,
-            backdropClass: [
-                'cdk-overlay-dark-backdrop',
-                ...coerceArray(this.backdropClass)
-            ],
-            paneClass: ['owl-dt-dialog', ...coerceArray(this.panelClass)],
-            viewContainerRef: this.viewContainerRef,
-            scrollStrategy: this.scrollStrategy || this.defaultScrollStrategy()
-        });
-        this.pickerContainer = this.dialogRef.componentInstance;
-        this.dialogRef.afterOpen().subscribe(() => {
-            this.afterPickerOpen.emit(null);
-            this._opened = true;
-        });
-        this.dialogRef.afterClosed().subscribe(() => this.close());
+    closeAll() {
+        let i = this.openDialogs.length;
+        while (i--) {
+            this.openDialogs[i].close();
+        }
     }
     /**
-     * Open the picker as popup
+     * Finds an open dialog by its id.
+     *
+     * @param id ID to use when looking up the dialog.
      */
-    openAsPopup() {
-        if (!this.pickerContainerPortal) {
-            this.pickerContainerPortal = new ComponentPortal(OwlDateTimeContainerComponent, this.viewContainerRef);
+    getDialogById(id) {
+        return this.openDialogs.find(dialog => dialog.id === id);
+    }
+    attachDialogContent(componentOrTemplateRef, dialogContainer, overlayRef, config) {
+        const dialogRef = new OwlDialogRef(overlayRef, dialogContainer, config.id, this.location);
+        if (config.hasBackdrop) {
+            overlayRef.backdropClick().subscribe(() => {
+                if (!dialogRef.disableClose) {
+                    dialogRef.close();
+                }
+            });
         }
-        if (!this.popupRef) {
-            this.createPopup();
+        if (componentOrTemplateRef instanceof TemplateRef) {
         }
-        if (!this.popupRef.hasAttached()) {
-            const componentRef = this.popupRef.attach(this.pickerContainerPortal);
-            this.pickerContainer = componentRef.instance;
-            // Update the position once the calendar has rendered.
-            this.ngZone.onStable
-                .asObservable()
-                .pipe(take(1))
-                .subscribe(() => {
-                this.popupRef.updatePosition();
-            });
-            // emit open stream
-            this.pickerOpenedStreamSub = this.pickerContainer.pickerOpenedStream
-                .pipe(take(1))
-                .subscribe(() => {
-                this.afterPickerOpen.emit(null);
-                this._opened = true;
-            });
+        else {
+            const injector = this.createInjector(config, dialogRef, dialogContainer);
+            const contentRef = dialogContainer.attachComponentPortal(new ComponentPortal(componentOrTemplateRef, undefined, injector));
+            dialogRef.componentInstance = contentRef.instance;
         }
+        dialogRef
+            .updateSize(config.width, config.height)
+            .updatePosition(config.position);
+        return dialogRef;
     }
-    createPopup() {
-        const overlayConfig = new OverlayConfig({
-            positionStrategy: this.createPopupPositionStrategy(),
-            hasBackdrop: true,
-            backdropClass: [
-                'cdk-overlay-transparent-backdrop',
-                ...coerceArray(this.backdropClass)
+    createInjector(config, dialogRef, dialogContainer) {
+        const userInjector = config &&
+            config.viewContainerRef &&
+            config.viewContainerRef.injector;
+        return Injector.create({
+            providers: [
+                { provide: OwlDialogRef, useValue: dialogRef },
+                { provide: OwlDialogContainerComponent, useValue: dialogContainer },
+                { provide: OWL_DIALOG_DATA, useValue: config.data }
             ],
-            scrollStrategy: this.scrollStrategy || this.defaultScrollStrategy(),
-            panelClass: ['owl-dt-popup', ...coerceArray(this.panelClass)]
+            parent: userInjector || this.injector
         });
-        this.popupRef = this.overlay.create(overlayConfig);
-        merge(this.popupRef.backdropClick(), this.popupRef.detachments(), this.popupRef
-            .keydownEvents()
-            .pipe(filter(event => event.keyCode === ESCAPE ||
-            (this._dtInput &&
-                event.altKey &&
-                event.keyCode === UP_ARROW)))).subscribe(() => this.close());
+    }
+    createOverlay(config) {
+        const overlayConfig = this.getOverlayConfig(config);
+        return this.overlay.create(overlayConfig);
+    }
+    attachDialogContainer(overlayRef, config) {
+        const containerPortal = new ComponentPortal(OwlDialogContainerComponent, config.viewContainerRef);
+        const containerRef = overlayRef.attach(containerPortal);
+        containerRef.instance.setConfig(config);
+        return containerRef.instance;
+    }
+    getOverlayConfig(dialogConfig) {
+        const state = new OverlayConfig({
+            positionStrategy: this.overlay.position().global(),
+            scrollStrategy: dialogConfig.scrollStrategy || this.scrollStrategy(),
+            panelClass: dialogConfig.paneClass,
+            hasBackdrop: dialogConfig.hasBackdrop,
+            minWidth: dialogConfig.minWidth,
+            minHeight: dialogConfig.minHeight,
+            maxWidth: dialogConfig.maxWidth,
+            maxHeight: dialogConfig.maxHeight
+        });
+        if (dialogConfig.backdropClass) {
+            state.backdropClass = dialogConfig.backdropClass;
+        }
+        return state;
+    }
+    removeOpenDialog(dialogRef) {
+        const index = this._openDialogsAtThisLevel.indexOf(dialogRef);
+        if (index > -1) {
+            this.openDialogs.splice(index, 1);
+            // If all the dialogs were closed, remove/restore the `aria-hidden`
+            // to a the siblings and emit to the `afterAllClosed` stream.
+            if (!this.openDialogs.length) {
+                this.ariaHiddenElements.forEach((previousValue, element) => {
+                    if (previousValue) {
+                        element.setAttribute('aria-hidden', previousValue);
+                    }
+                    else {
+                        element.removeAttribute('aria-hidden');
+                    }
+                });
+                this.ariaHiddenElements.clear();
+                this._afterAllClosed.next();
+            }
+        }
     }
     /**
-     * Create the popup PositionStrategy.
-     * */
-    createPopupPositionStrategy() {
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(this._dtInput.elementRef)
-            .withTransformOriginOn('.owl-dt-container')
-            .withFlexibleDimensions(false)
-            .withPush(false)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top'
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom'
-            },
-            {
-                originX: 'end',
-                originY: 'bottom',
-                overlayX: 'end',
-                overlayY: 'top'
-            },
-            {
-                originX: 'end',
-                originY: 'top',
-                overlayX: 'end',
-                overlayY: 'bottom'
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: -176
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: -352
+     * Hides all of the content that isn't an overlay from assistive technology.
+     */
+    hideNonDialogContentFromAssistiveTechnology() {
+        const overlayContainer = this.overlayContainer.getContainerElement();
+        // Ensure that the overlay container is attached to the DOM.
+        if (overlayContainer.parentElement) {
+            const siblings = overlayContainer.parentElement.children;
+            for (let i = siblings.length - 1; i > -1; i--) {
+                const sibling = siblings[i];
+                if (sibling !== overlayContainer &&
+                    sibling.nodeName !== 'SCRIPT' &&
+                    sibling.nodeName !== 'STYLE' &&
+                    !sibling.hasAttribute('aria-live')) {
+                    this.ariaHiddenElements.set(sibling, sibling.getAttribute('aria-hidden'));
+                    sibling.setAttribute('aria-hidden', 'true');
+                }
             }
-        ]);
+        }
     }
 }
-OwlDateTimeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'owl-date-time',
-                exportAs: 'owlDateTime',
-                template: "<p>date-time-picker works!</p>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                preserveWhitespaces: false,
-                styles: [""]
-            },] }
-];
-OwlDateTimeComponent.ctorParameters = () => [
-    { type: Overlay },
-    { type: ViewContainerRef },
-    { type: OwlDialogService },
-    { type: NgZone },
-    { type: ChangeDetectorRef },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Inject, args: [OWL_DTPICKER_SCROLL_STRATEGY,] }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DATE_TIME_FORMATS,] }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }
-];
-OwlDateTimeComponent.propDecorators = {
-    backdropClass: [{ type: Input }],
-    panelClass: [{ type: Input }],
-    startAt: [{ type: Input }],
-    pickerType: [{ type: Input }],
-    pickerMode: [{ type: Input }],
-    disabled: [{ type: Input }],
-    opened: [{ type: Input }],
-    scrollStrategy: [{ type: Input }],
-    afterPickerClosed: [{ type: Output }],
-    afterPickerOpen: [{ type: Output }],
-    yearSelected: [{ type: Output }],
-    monthSelected: [{ type: Output }]
-};
+OwlDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogService, deps: [{ token: i1$2.Overlay }, { token: i0.Injector }, { token: i1.Location, optional: true }, { token: OWL_DIALOG_SCROLL_STRATEGY }, { token: OWL_DIALOG_DEFAULT_OPTIONS, optional: true }, { token: OwlDialogService, optional: true, skipSelf: true }, { token: i1$2.OverlayContainer }], target: i0.ɵɵFactoryTarget.Injectable });
+OwlDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.Injector }, { type: i1.Location, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [OWL_DIALOG_SCROLL_STRATEGY]
+                }] }, { type: OwlDialogConfig, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DIALOG_DEFAULT_OPTIONS]
+                }] }, { type: OwlDialogService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1$2.OverlayContainer }]; } });
+/**
+ * Applies default options to the dialog config.
+ *
+ * @param config Config to be modified.
+ * @param defaultOptions Default config setting
+ * @returns The new configuration object.
+ */
+function applyConfigDefaults(config, defaultOptions) {
+    return extendObject(new OwlDialogConfig(), config, defaultOptions);
+}
 
-const OWL_DATETIME_VALUE_ACCESSOR$1 = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => OwlDateTimeInputDirective),
-    multi: true
-};
-const OWL_DATETIME_VALIDATORS = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => OwlDateTimeInputDirective),
-    multi: true
+/** Injection token that determines the scroll handling while the dtPicker is open. */
+const OWL_DTPICKER_SCROLL_STRATEGY = new InjectionToken('owl-dtpicker-scroll-strategy');
+/** @docs-private */
+function OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
+    const fn = () => overlay.scrollStrategies.block();
+    return fn;
+}
+/** @docs-private */
+const OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER = {
+    provide: OWL_DTPICKER_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY
 };
-class OwlDateTimeInputDirective {
-    constructor(elmRef, renderer, dateTimeAdapter, dateTimeFormats) {
-        this.elmRef = elmRef;
-        this.renderer = renderer;
+class OwlDateTimeComponent extends OwlDateTimeDirective {
+    constructor(overlay, viewContainerRef, dialogService, ngZone, changeDetector, dateTimeAdapter, defaultScrollStrategy, dateTimeFormats, document) {
+        super(dateTimeAdapter, dateTimeFormats);
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.dialogService = dialogService;
+        this.ngZone = ngZone;
+        this.changeDetector = changeDetector;
         this.dateTimeAdapter = dateTimeAdapter;
         this.dateTimeFormats = dateTimeFormats;
+        this.document = document;
+        /** Custom class for the picker backdrop. */
+        this.backdropClass = [];
+        /** Custom class for the picker overlay pane. */
+        this.panelClass = [];
         /**
-         * The picker's select mode
+         * Set the type of the dateTime picker
+         *      'both' -- show both calendar and timer
+         *      'calendar' -- show only calendar
+         *      'timer' -- show only timer
          */
-        this._selectMode = 'single';
+        this._pickerType = 'both';
         /**
-         * The character to separate the 'from' and 'to' in input value
+         * Whether the picker open as a dialog
          */
-        this.rangeSeparator = '~';
-        this._values = [];
+        this._pickerMode = 'popup';
+        /** Whether the calendar is open. */
+        this._opened = false;
         /**
-         * Callback to invoke when `change` event is fired on this `<input>`
+         * Callback when the picker is closed
          * */
-        this.dateTimeChange = new EventEmitter();
+        this.afterPickerClosed = new EventEmitter();
         /**
-         * Callback to invoke when an `input` event is fired on this `<input>`.
+         * Callback when the picker is open
          * */
-        this.dateTimeInput = new EventEmitter();
-        this.dtPickerSub = Subscription.EMPTY;
-        this.localeSub = Subscription.EMPTY;
-        this.lastValueValid = true;
-        this.onModelChange = () => { };
-        this.onModelTouched = () => { };
-        this.validatorOnChange = () => { };
-        /** The form control validator for whether the input parses. */
-        this.parseValidator = () => {
-            return this.lastValueValid
-                ? null
-                : { owlDateTimeParse: { text: this.elmRef.nativeElement.value } };
-        };
-        /** The form control validator for the min date. */
-        this.minValidator = (control) => {
-            if (this.isInSingleMode) {
-                const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
-                return !this.min ||
-                    !controlValue ||
-                    this.dateTimeAdapter.compare(this.min, controlValue) <= 0
-                    ? null
-                    : { owlDateTimeMin: { min: this.min, actual: controlValue } };
+        this.afterPickerOpen = new EventEmitter();
+        /**
+         * Emits selected year in multi-year view
+         * This doesn't imply a change on the selected date.
+         * */
+        this.yearSelected = new EventEmitter();
+        /**
+         * Emits selected month in year view
+         * This doesn't imply a change on the selected date.
+         * */
+        this.monthSelected = new EventEmitter();
+        /**
+         * Emit when the selected value has been confirmed
+         * */
+        this.confirmSelectedChange = new EventEmitter();
+        /**
+         * Emits when the date time picker is disabled.
+         * */
+        this.disabledChange = new EventEmitter();
+        this.dtInputSub = Subscription.EMPTY;
+        this.hidePickerStreamSub = Subscription.EMPTY;
+        this.confirmSelectedStreamSub = Subscription.EMPTY;
+        this.pickerOpenedStreamSub = Subscription.EMPTY;
+        /** The element that was focused before the date time picker was opened. */
+        this.focusedElementBeforeOpen = null;
+        this._selecteds = [];
+        this.defaultScrollStrategy = defaultScrollStrategy;
+    }
+    get startAt() {
+        // If an explicit startAt is set we start there, otherwise we start at whatever the currently
+        // selected value is.
+        if (this._startAt) {
+            return this._startAt;
+        }
+        if (this._dtInput) {
+            if (this._dtInput.selectMode === 'single') {
+                return this._dtInput.value || null;
             }
-            else if (this.isInRangeMode && control.value) {
-                const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
-                const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
-                return !this.min ||
-                    !controlValueFrom ||
-                    !controlValueTo ||
-                    this.dateTimeAdapter.compare(this.min, controlValueFrom) <= 0
-                    ? null
-                    : {
-                        owlDateTimeMin: {
-                            min: this.min,
-                            actual: [controlValueFrom, controlValueTo]
-                        }
-                    };
+            else if (this._dtInput.selectMode === 'range' ||
+                this._dtInput.selectMode === 'rangeFrom') {
+                return this._dtInput.values[0] || null;
             }
-        };
-        /** The form control validator for the max date. */
-        this.maxValidator = (control) => {
-            if (this.isInSingleMode) {
-                const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
-                return !this.max ||
-                    !controlValue ||
-                    this.dateTimeAdapter.compare(this.max, controlValue) >= 0
-                    ? null
-                    : { owlDateTimeMax: { max: this.max, actual: controlValue } };
+            else if (this._dtInput.selectMode === 'rangeTo') {
+                return this._dtInput.values[1] || null;
             }
-            else if (this.isInRangeMode && control.value) {
-                const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
-                const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
-                return !this.max ||
-                    !controlValueFrom ||
-                    !controlValueTo ||
-                    this.dateTimeAdapter.compare(this.max, controlValueTo) >= 0
-                    ? null
-                    : {
-                        owlDateTimeMax: {
-                            max: this.max,
-                            actual: [controlValueFrom, controlValueTo]
-                        }
-                    };
+        }
+        else {
+            return null;
+        }
+    }
+    set startAt(date) {
+        this._startAt = this.getValidDate(this.dateTimeAdapter.deserialize(date));
+    }
+    get pickerType() {
+        return this._pickerType;
+    }
+    set pickerType(val) {
+        if (val !== this._pickerType) {
+            this._pickerType = val;
+            if (this._dtInput) {
+                this._dtInput.formatNativeInputValue();
             }
-        };
-        /** The form control validator for the date filter. */
-        this.filterValidator = (control) => {
-            const controlValue = this.getValidDate(this.dateTimeAdapter.deserialize(control.value));
-            return !this._dateTimeFilter ||
-                !controlValue ||
-                this._dateTimeFilter(controlValue)
-                ? null
-                : { owlDateTimeFilter: true };
-        };
-        /**
-         * The form control validator for the range.
-         * Check whether the 'before' value is before the 'to' value
-         * */
-        this.rangeValidator = (control) => {
-            if (this.isInSingleMode || !control.value) {
-                return null;
-            }
-            const controlValueFrom = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[0]));
-            const controlValueTo = this.getValidDate(this.dateTimeAdapter.deserialize(control.value[1]));
-            return !controlValueFrom ||
-                !controlValueTo ||
-                this.dateTimeAdapter.compare(controlValueFrom, controlValueTo) <= 0
-                ? null
-                : { owlDateTimeRange: true };
-        };
-        /** The combined form control validator for this input. */
-        this.validator = Validators.compose([
-            this.parseValidator,
-            this.minValidator,
-            this.maxValidator,
-            this.filterValidator,
-            this.rangeValidator
-        ]);
-        /** Emits when the value changes (either due to user input or programmatic change). */
-        this.valueChange = new EventEmitter();
-        /** Emits when the disabled state has changed */
-        this.disabledChange = new EventEmitter();
-        if (!this.dateTimeAdapter) {
-            throw Error(`OwlDateTimePicker: No provider found for DateTimePicker. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
         }
-        if (!this.dateTimeFormats) {
-            throw Error(`OwlDateTimePicker: No provider found for OWL_DATE_TIME_FORMATS. You must import one of the following ` +
-                `modules at your application root: OwlNativeDateTimeModule, OwlMomentDateTimeModule, or provide a ` +
-                `custom implementation.`);
-        }
-        this.localeSub = this.dateTimeAdapter.localeChanges.subscribe(() => {
-            this.value = this.value;
-        });
-    }
-    /**
-     * The date time picker that this input is associated with.
-     * */
-    set owlDateTime(value) {
-        this.registerDateTimePicker(value);
     }
-    /**
-     * A function to filter date time
-     */
-    set owlDateTimeFilter(filter) {
-        this._dateTimeFilter = filter;
-        this.validatorOnChange();
+    get pickerMode() {
+        return this._pickerMode;
     }
-    get dateTimeFilter() {
-        return this._dateTimeFilter;
+    set pickerMode(mode) {
+        if (mode === 'popup') {
+            this._pickerMode = mode;
+        }
+        else {
+            this._pickerMode = 'dialog';
+        }
     }
     get disabled() {
-        return !!this._disabled;
+        return this._disabled === undefined && this._dtInput
+            ? this._dtInput.disabled
+            : !!this._disabled;
     }
     set disabled(value) {
-        const newValue = coerceBooleanProperty(value);
-        const element = this.elmRef.nativeElement;
-        if (this._disabled !== newValue) {
-            this._disabled = newValue;
-            this.disabledChange.emit(newValue);
-        }
-        // We need to null check the `blur` method, because it's undefined during SSR.
-        if (newValue && element.blur) {
-            // Normally, native input elements automatically blur if they turn disabled. This behavior
-            // is problematic, because it would mean that it triggers another change detection cycle,
-            // which then causes a changed after checked error if the input element was focused before.
-            element.blur();
+        value = coerceBooleanProperty(value);
+        if (value !== this._disabled) {
+            this._disabled = value;
+            this.disabledChange.next(value);
         }
     }
-    get min() {
-        return this._min;
+    get opened() {
+        return this._opened;
     }
-    set min(value) {
-        this._min = this.getValidDate(this.dateTimeAdapter.deserialize(value));
-        this.validatorOnChange();
+    set opened(val) {
+        if (val)
+            this.open();
+        else
+            this.close();
     }
-    get max() {
-        return this._max;
+    get dtInput() {
+        return this._dtInput;
     }
-    set max(value) {
-        this._max = this.getValidDate(this.dateTimeAdapter.deserialize(value));
-        this.validatorOnChange();
+    get selected() {
+        return this._selected;
     }
-    get selectMode() {
-        return this._selectMode;
+    set selected(value) {
+        this._selected = value;
+        this.changeDetector.markForCheck();
     }
-    set selectMode(mode) {
-        if (mode !== 'single' &&
-            mode !== 'range' &&
-            mode !== 'rangeFrom' &&
-            mode !== 'rangeTo') {
-            throw Error('OwlDateTime Error: invalid selectMode value!');
-        }
-        this._selectMode = mode;
+    get selecteds() {
+        return this._selecteds;
     }
-    get value() {
-        return this._value;
+    set selecteds(values) {
+        this._selecteds = values;
+        this.changeDetector.markForCheck();
     }
-    set value(value) {
-        value = this.dateTimeAdapter.deserialize(value);
-        this.lastValueValid = !value || this.dateTimeAdapter.isValid(value);
-        value = this.getValidDate(value);
-        const oldDate = this._value;
-        this._value = value;
-        // set the input property 'value'
-        this.formatNativeInputValue();
-        // check if the input value changed
-        if (!this.dateTimeAdapter.isEqual(oldDate, value)) {
-            this.valueChange.emit(value);
-        }
+    /** The minimum selectable date. */
+    get minDateTime() {
+        return this._dtInput && this._dtInput.min;
     }
-    get values() {
-        return this._values;
+    /** The maximum selectable date. */
+    get maxDateTime() {
+        return this._dtInput && this._dtInput.max;
     }
-    set values(values) {
-        if (values && values.length > 0) {
-            this._values = values.map(v => {
-                v = this.dateTimeAdapter.deserialize(v);
-                return this.getValidDate(v);
-            });
-            this.lastValueValid =
-                (!this._values[0] ||
-                    this.dateTimeAdapter.isValid(this._values[0])) &&
-                    (!this._values[1] ||
-                        this.dateTimeAdapter.isValid(this._values[1]));
-        }
-        else {
-            this._values = [];
-            this.lastValueValid = true;
-        }
-        // set the input property 'value'
-        this.formatNativeInputValue();
-        this.valueChange.emit(this._values);
+    get dateTimeFilter() {
+        return this._dtInput && this._dtInput.dateTimeFilter;
     }
-    get elementRef() {
-        return this.elmRef;
+    get selectMode() {
+        return this._dtInput.selectMode;
     }
     get isInSingleMode() {
-        return this._selectMode === 'single';
+        return this._dtInput.isInSingleMode;
     }
     get isInRangeMode() {
-        return (this._selectMode === 'range' ||
-            this._selectMode === 'rangeFrom' ||
-            this._selectMode === 'rangeTo');
-    }
-    get owlDateTimeInputAriaHaspopup() {
-        return true;
-    }
-    get owlDateTimeInputAriaOwns() {
-        return (this.dtPicker.opened && this.dtPicker.id) || null;
-    }
-    get minIso8601() {
-        return this.min ? this.dateTimeAdapter.toIso8601(this.min) : null;
-    }
-    get maxIso8601() {
-        return this.max ? this.dateTimeAdapter.toIso8601(this.max) : null;
-    }
-    get owlDateTimeInputDisabled() {
-        return this.disabled;
+        return this._dtInput.isInRangeMode;
     }
-    ngOnInit() {
-        if (!this.dtPicker) {
-            throw Error(`OwlDateTimePicker: the picker input doesn't have any associated owl-date-time component`);
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.close();
+        this.dtInputSub.unsubscribe();
+        this.disabledChange.complete();
+        if (this.popupRef) {
+            this.popupRef.dispose();
         }
     }
-    ngAfterContentInit() {
-        this.dtPickerSub = this.dtPicker.confirmSelectedChange.subscribe((selecteds) => {
-            if (Array.isArray(selecteds)) {
-                this.values = selecteds;
+    registerInput(input) {
+        if (this._dtInput) {
+            throw Error('A Owl DateTimePicker can only be associated with a single input.');
+        }
+        this._dtInput = input;
+        this.dtInputSub = this._dtInput.valueChange.subscribe((value) => {
+            if (Array.isArray(value)) {
+                this.selecteds = value;
             }
             else {
-                this.value = selecteds;
+                this.selected = value;
             }
-            this.onModelChange(selecteds);
-            this.onModelTouched();
-            this.dateTimeChange.emit({
-                source: this,
-                value: selecteds,
-                input: this.elmRef.nativeElement
-            });
-            this.dateTimeInput.emit({
-                source: this,
-                value: selecteds,
-                input: this.elmRef.nativeElement
-            });
         });
     }
-    ngOnDestroy() {
-        this.dtPickerSub.unsubscribe();
-        this.localeSub.unsubscribe();
-        this.valueChange.complete();
-        this.disabledChange.complete();
-    }
-    writeValue(value) {
+    open() {
+        if (this._opened || this.disabled) {
+            return;
+        }
+        if (!this._dtInput) {
+            throw Error('Attempted to open an DateTimePicker with no associated input.');
+        }
+        if (this.document) {
+            this.focusedElementBeforeOpen = this.document.activeElement;
+        }
+        // reset the picker selected value
         if (this.isInSingleMode) {
-            this.value = value;
+            this.selected = this._dtInput.value;
         }
-        else {
-            this.values = value;
+        else if (this.isInRangeMode) {
+            this.selecteds = this._dtInput.values;
         }
-    }
-    registerOnChange(fn) {
-        this.onModelChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onModelTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    validate(c) {
-        return this.validator ? this.validator(c) : null;
-    }
-    registerOnValidatorChange(fn) {
-        this.validatorOnChange = fn;
-    }
-    /**
-     * Open the picker when user hold alt + DOWN_ARROW
-     * */
-    handleKeydownOnHost(event) {
-        if (event.altKey && event.keyCode === DOWN_ARROW) {
-            this.dtPicker.open();
-            event.preventDefault();
-        }
-    }
-    handleBlurOnHost(_event) {
-        this.onModelTouched();
-    }
-    handleInputOnHost(event) {
-        const value = event.target.value;
-        if (this._selectMode === 'single') {
-            this.changeInputInSingleMode(value);
-        }
-        else if (this._selectMode === 'range') {
-            this.changeInputInRangeMode(value);
-        }
-        else {
-            this.changeInputInRangeFromToMode(value);
-        }
-    }
-    handleChangeOnHost(_event) {
-        let v;
-        if (this.isInSingleMode) {
-            v = this.value;
-        }
-        else if (this.isInRangeMode) {
-            v = this.values;
+        // when the picker is open , we make sure the picker's current selected time value
+        // is the same as the _startAt time value.
+        if (this.selected && this.pickerType !== 'calendar' && this._startAt) {
+            this.selected = this.dateTimeAdapter.createDate(this.dateTimeAdapter.getYear(this.selected), this.dateTimeAdapter.getMonth(this.selected), this.dateTimeAdapter.getDate(this.selected), this.dateTimeAdapter.getHours(this._startAt), this.dateTimeAdapter.getMinutes(this._startAt), this.dateTimeAdapter.getSeconds(this._startAt));
         }
-        this.dateTimeChange.emit({
-            source: this,
-            value: v,
-            input: this.elmRef.nativeElement
+        if (this.pickerMode === 'dialog')
+            this.openAsDialog();
+        else
+            this.openAsPopup();
+        this.pickerContainer.picker = this;
+        // Listen to picker container's hidePickerStream
+        this.hidePickerStreamSub = this.pickerContainer.hidePickerStream.subscribe(() => {
+            this.close();
+        });
+        // Listen to picker container's confirmSelectedStream
+        this.confirmSelectedStreamSub = this.pickerContainer.confirmSelectedStream.subscribe((event) => {
+            this.confirmSelect(event);
         });
     }
     /**
-     * Set the native input property 'value'
+     * Selects the given date
      */
-    formatNativeInputValue() {
-        if (this.isInSingleMode) {
-            this.renderer.setProperty(this.elmRef.nativeElement, 'value', this._value
-                ? this.dateTimeAdapter.format(this._value, this.dtPicker.formatString)
-                : '');
+    select(date) {
+        if (Array.isArray(date)) {
+            this.selecteds = [...date];
         }
-        else if (this.isInRangeMode) {
-            if (this._values && this.values.length > 0) {
-                const from = this._values[0];
-                const to = this._values[1];
-                const fromFormatted = from
-                    ? this.dateTimeAdapter.format(from, this.dtPicker.formatString)
-                    : '';
-                const toFormatted = to
-                    ? this.dateTimeAdapter.format(to, this.dtPicker.formatString)
-                    : '';
-                if (!fromFormatted && !toFormatted) {
-                    this.renderer.setProperty(this.elmRef.nativeElement, 'value', null);
-                }
-                else {
-                    if (this._selectMode === 'range') {
-                        this.renderer.setProperty(this.elmRef.nativeElement, 'value', fromFormatted +
-                            ' ' +
-                            this.rangeSeparator +
-                            ' ' +
-                            toFormatted);
-                    }
-                    else if (this._selectMode === 'rangeFrom') {
-                        this.renderer.setProperty(this.elmRef.nativeElement, 'value', fromFormatted);
-                    }
-                    else if (this._selectMode === 'rangeTo') {
-                        this.renderer.setProperty(this.elmRef.nativeElement, 'value', toFormatted);
-                    }
-                }
-            }
-            else {
-                this.renderer.setProperty(this.elmRef.nativeElement, 'value', '');
-            }
+        else {
+            this.selected = date;
+        }
+        /**
+         * Cases in which automatically confirm the select when date or dates are selected:
+         * 1) picker mode is NOT 'dialog'
+         * 2) picker type is 'calendar' and selectMode is 'single'.
+         * 3) picker type is 'calendar' and selectMode is 'range' and
+         *    the 'selecteds' has 'from'(selecteds[0]) and 'to'(selecteds[1]) values.
+         * 4) selectMode is 'rangeFrom' and selecteds[0] has value.
+         * 5) selectMode is 'rangeTo' and selecteds[1] has value.
+         * */
+        if (this.pickerMode !== 'dialog' &&
+            this.pickerType === 'calendar' &&
+            ((this.selectMode === 'single' && this.selected) ||
+                (this.selectMode === 'rangeFrom' && this.selecteds[0]) ||
+                (this.selectMode === 'rangeTo' && this.selecteds[1]) ||
+                (this.selectMode === 'range' &&
+                    this.selecteds[0] &&
+                    this.selecteds[1]))) {
+            this.confirmSelect();
         }
-        return;
     }
     /**
-     * Register the relationship between this input and its picker component
-     */
-    registerDateTimePicker(picker) {
-        if (picker) {
-            this.dtPicker = picker;
-            this.dtPicker.registerInput(this);
-        }
+     * Emits the selected year in multi-year view
+     * */
+    selectYear(normalizedYear) {
+        this.yearSelected.emit(normalizedYear);
     }
     /**
-     * Convert a given obj to a valid date object
-     */
-    getValidDate(obj) {
-        return this.dateTimeAdapter.isDateInstance(obj) &&
-            this.dateTimeAdapter.isValid(obj)
-            ? obj
-            : null;
+     * Emits selected month in year view
+     * */
+    selectMonth(normalizedMonth) {
+        this.monthSelected.emit(normalizedMonth);
     }
     /**
-     * Convert a time string to a date-time string
-     * When pickerType is 'timer', the value in the picker's input is a time string.
-     * The dateTimeAdapter parse fn could not parse a time string to a Date Object.
-     * Therefore we need this fn to convert a time string to a date-time string.
+     * Hide the picker
      */
-    convertTimeStringToDateTimeString(timeString, dateTime) {
-        if (timeString) {
-            const v = dateTime || this.dateTimeAdapter.now();
-            const dateString = this.dateTimeAdapter.format(v, this.dateTimeFormats.datePickerInput);
-            return dateString + ' ' + timeString;
+    close() {
+        if (!this._opened) {
+            return;
         }
-        else {
-            return null;
+        if (this.popupRef && this.popupRef.hasAttached()) {
+            this.popupRef.detach();
         }
-    }
-    /**
-     * Handle input change in single mode
-     */
-    changeInputInSingleMode(inputValue) {
-        let value = inputValue;
-        if (this.dtPicker.pickerType === 'timer') {
-            value = this.convertTimeStringToDateTimeString(value, this.value);
+        if (this.pickerContainerPortal &&
+            this.pickerContainerPortal.isAttached) {
+            this.pickerContainerPortal.detach();
         }
-        let result = this.dateTimeAdapter.parse(value, this.dateTimeFormats.parseInput);
-        this.lastValueValid = !result || this.dateTimeAdapter.isValid(result);
-        result = this.getValidDate(result);
-        // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
-        // result equals to null means there is input event, but the input value is invalid
-        if (!this.isSameValue(result, this._value) || result === null) {
-            this._value = result;
-            this.valueChange.emit(result);
-            this.onModelChange(result);
-            this.dateTimeInput.emit({
-                source: this,
-                value: result,
-                input: this.elmRef.nativeElement
-            });
+        if (this.hidePickerStreamSub) {
+            this.hidePickerStreamSub.unsubscribe();
+            this.hidePickerStreamSub = null;
+        }
+        if (this.confirmSelectedStreamSub) {
+            this.confirmSelectedStreamSub.unsubscribe();
+            this.confirmSelectedStreamSub = null;
+        }
+        if (this.pickerOpenedStreamSub) {
+            this.pickerOpenedStreamSub.unsubscribe();
+            this.pickerOpenedStreamSub = null;
+        }
+        if (this.dialogRef) {
+            this.dialogRef.close();
+            this.dialogRef = null;
+        }
+        const completeClose = () => {
+            if (this._opened) {
+                this._opened = false;
+                this.afterPickerClosed.emit(null);
+                this.focusedElementBeforeOpen = null;
+            }
+        };
+        if (this.focusedElementBeforeOpen &&
+            typeof this.focusedElementBeforeOpen.focus === 'function') {
+            // Because IE moves focus asynchronously, we can't count on it being restored before we've
+            // marked the datepicker as closed. If the event fires out of sequence and the element that
+            // we're refocusing opens the datepicker on focus, the user could be stuck with not being
+            // able to close the calendar at all. We work around it by making the logic, that marks
+            // the datepicker as closed, async as well.
+            this.focusedElementBeforeOpen.focus();
+            setTimeout(completeClose);
+        }
+        else {
+            completeClose();
         }
     }
     /**
-     * Handle input change in rangeFrom or rangeTo mode
+     * Confirm the selected value
      */
-    changeInputInRangeFromToMode(inputValue) {
-        const originalValue = this._selectMode === 'rangeFrom'
-            ? this._values[0]
-            : this._values[1];
-        if (this.dtPicker.pickerType === 'timer') {
-            inputValue = this.convertTimeStringToDateTimeString(inputValue, originalValue);
+    confirmSelect(_event) {
+        if (this.isInSingleMode) {
+            const selected = this.selected || this.startAt || this.dateTimeAdapter.now();
+            this.confirmSelectedChange.emit(selected);
         }
-        let result = this.dateTimeAdapter.parse(inputValue, this.dateTimeFormats.parseInput);
-        this.lastValueValid = !result || this.dateTimeAdapter.isValid(result);
-        result = this.getValidDate(result);
-        // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
-        if ((this._selectMode === 'rangeFrom' &&
-            this.isSameValue(result, this._values[0]) &&
-            result) ||
-            (this._selectMode === 'rangeTo' &&
-                this.isSameValue(result, this._values[1]) &&
-                result)) {
-            return;
+        else if (this.isInRangeMode) {
+            this.confirmSelectedChange.emit(this.selecteds);
         }
-        this._values =
-            this._selectMode === 'rangeFrom'
-                ? [result, this._values[1]]
-                : [this._values[0], result];
-        this.valueChange.emit(this._values);
-        this.onModelChange(this._values);
-        this.dateTimeInput.emit({
-            source: this,
-            value: this._values,
-            input: this.elmRef.nativeElement
-        });
+        this.close();
+        return;
     }
     /**
-     * Handle input change in range mode
+     * Open the picker as a dialog
      */
-    changeInputInRangeMode(inputValue) {
-        const selecteds = inputValue.split(this.rangeSeparator);
-        let fromString = selecteds[0];
-        let toString = selecteds[1];
-        if (this.dtPicker.pickerType === 'timer') {
-            fromString = this.convertTimeStringToDateTimeString(fromString, this.values[0]);
-            toString = this.convertTimeStringToDateTimeString(toString, this.values[1]);
-        }
-        let from = this.dateTimeAdapter.parse(fromString, this.dateTimeFormats.parseInput);
-        let to = this.dateTimeAdapter.parse(toString, this.dateTimeFormats.parseInput);
-        this.lastValueValid =
-            (!from || this.dateTimeAdapter.isValid(from)) &&
-                (!to || this.dateTimeAdapter.isValid(to));
-        from = this.getValidDate(from);
-        to = this.getValidDate(to);
-        // if the newValue is the same as the oldValue, we intend to not fire the valueChange event
-        if (!this.isSameValue(from, this._values[0]) ||
-            !this.isSameValue(to, this._values[1]) ||
-            (from === null && to === null)) {
-            this._values = [from, to];
-            this.valueChange.emit(this._values);
-            this.onModelChange(this._values);
-            this.dateTimeInput.emit({
-                source: this,
-                value: this._values,
-                input: this.elmRef.nativeElement
-            });
-        }
+    openAsDialog() {
+        this.dialogRef = this.dialogService.open(OwlDateTimeContainerComponent, {
+            autoFocus: false,
+            backdropClass: [
+                'cdk-overlay-dark-backdrop',
+                ...coerceArray(this.backdropClass)
+            ],
+            paneClass: ['owl-dt-dialog', ...coerceArray(this.panelClass)],
+            viewContainerRef: this.viewContainerRef,
+            scrollStrategy: this.scrollStrategy || this.defaultScrollStrategy()
+        });
+        this.pickerContainer = this.dialogRef.componentInstance;
+        this.dialogRef.afterOpen().subscribe(() => {
+            this.afterPickerOpen.emit(null);
+            this._opened = true;
+        });
+        this.dialogRef.afterClosed().subscribe(() => this.close());
     }
     /**
-     * Check if the two value is the same
+     * Open the picker as popup
      */
-    isSameValue(first, second) {
-        if (first && second) {
-            return this.dateTimeAdapter.compare(first, second) === 0;
+    openAsPopup() {
+        if (!this.pickerContainerPortal) {
+            this.pickerContainerPortal = new ComponentPortal(OwlDateTimeContainerComponent, this.viewContainerRef);
         }
-        return first == second;
-    }
-}
-OwlDateTimeInputDirective.decorators = [
-    { type: Directive, args: [{
-                selector: 'input[owlDateTime]',
-                exportAs: 'owlDateTimeInput',
-                providers: [
-                    OWL_DATETIME_VALUE_ACCESSOR$1,
-                    OWL_DATETIME_VALIDATORS
-                ]
-            },] }
-];
-OwlDateTimeInputDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: Renderer2 },
-    { type: DateTimeAdapter, decorators: [{ type: Optional }] },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OWL_DATE_TIME_FORMATS,] }] }
-];
-OwlDateTimeInputDirective.propDecorators = {
-    owlDateTime: [{ type: Input }],
-    owlDateTimeFilter: [{ type: Input }],
-    _disabled: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }],
-    selectMode: [{ type: Input }],
-    rangeSeparator: [{ type: Input }],
-    value: [{ type: Input }],
-    values: [{ type: Input }],
-    dateTimeChange: [{ type: Output }],
-    dateTimeInput: [{ type: Output }],
-    owlDateTimeInputAriaHaspopup: [{ type: HostBinding, args: ['attr.aria-haspopup',] }],
-    owlDateTimeInputAriaOwns: [{ type: HostBinding, args: ['attr.aria-owns',] }],
-    minIso8601: [{ type: HostBinding, args: ['attr.min',] }],
-    maxIso8601: [{ type: HostBinding, args: ['attr.max',] }],
-    owlDateTimeInputDisabled: [{ type: HostBinding, args: ['disabled',] }],
-    handleKeydownOnHost: [{ type: HostListener, args: ['keydown', ['$event'],] }],
-    handleBlurOnHost: [{ type: HostListener, args: ['blur', ['$event'],] }],
-    handleInputOnHost: [{ type: HostListener, args: ['input', ['$event'],] }],
-    handleChangeOnHost: [{ type: HostListener, args: ['change', ['$event'],] }]
-};
-
-class OwlDateTimeTriggerDirective {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.stateChanges = Subscription.EMPTY;
-    }
-    get disabled() {
-        return this._disabled === undefined ? this.dtPicker.disabled : !!this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = value;
-    }
-    get owlDTTriggerDisabledClass() {
-        return this.disabled;
-    }
-    ngOnInit() {
-    }
-    ngOnChanges(changes) {
-        if (changes.datepicker) {
-            this.watchStateChanges();
+        if (!this.popupRef) {
+            this.createPopup();
         }
-    }
-    ngAfterContentInit() {
-        this.watchStateChanges();
-    }
-    ngOnDestroy() {
-        this.stateChanges.unsubscribe();
-    }
-    handleClickOnHost(event) {
-        if (this.dtPicker) {
-            this.dtPicker.open();
-            event.stopPropagation();
+        if (!this.popupRef.hasAttached()) {
+            const componentRef = this.popupRef.attach(this.pickerContainerPortal);
+            this.pickerContainer = componentRef.instance;
+            // Update the position once the calendar has rendered.
+            this.ngZone.onStable
+                .asObservable()
+                .pipe(take(1))
+                .subscribe(() => {
+                this.popupRef.updatePosition();
+            });
+            // emit open stream
+            this.pickerOpenedStreamSub = this.pickerContainer.pickerOpenedStream
+                .pipe(take(1))
+                .subscribe(() => {
+                this.afterPickerOpen.emit(null);
+                this._opened = true;
+            });
         }
     }
-    watchStateChanges() {
-        this.stateChanges.unsubscribe();
-        const inputDisabled = this.dtPicker && this.dtPicker.dtInput ?
-            this.dtPicker.dtInput.disabledChange : of();
-        const pickerDisabled = this.dtPicker ?
-            this.dtPicker.disabledChange : of();
-        this.stateChanges = merge(pickerDisabled, inputDisabled)
-            .subscribe(() => {
-            this.changeDetector.markForCheck();
+    createPopup() {
+        const overlayConfig = new OverlayConfig({
+            positionStrategy: this.createPopupPositionStrategy(),
+            hasBackdrop: true,
+            backdropClass: [
+                'cdk-overlay-transparent-backdrop',
+                ...coerceArray(this.backdropClass)
+            ],
+            scrollStrategy: this.scrollStrategy || this.defaultScrollStrategy(),
+            panelClass: ['owl-dt-popup', ...coerceArray(this.panelClass)]
         });
+        this.popupRef = this.overlay.create(overlayConfig);
+        merge(this.popupRef.backdropClick(), this.popupRef.detachments(), this.popupRef
+            .keydownEvents()
+            .pipe(filter(event => event.keyCode === ESCAPE ||
+            (this._dtInput &&
+                event.altKey &&
+                event.keyCode === UP_ARROW)))).subscribe(() => this.close());
     }
-}
-OwlDateTimeTriggerDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[owlDateTimeTrigger]'
-            },] }
-];
-OwlDateTimeTriggerDirective.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-OwlDateTimeTriggerDirective.propDecorators = {
-    dtPicker: [{ type: Input, args: ['owlDateTimeTrigger',] }],
-    disabled: [{ type: Input }],
-    owlDTTriggerDisabledClass: [{ type: HostBinding, args: ['class.owl-dt-trigger-disabled',] }],
-    handleClickOnHost: [{ type: HostListener, args: ['click', ['$event'],] }]
-};
-
-class OwlDialogModule {
-}
-OwlDialogModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, A11yModule, OverlayModule, PortalModule],
-                exports: [],
-                declarations: [
-                    OwlDialogContainerComponent
-                ],
-                providers: [
-                    OWL_DIALOG_SCROLL_STRATEGY_PROVIDER,
-                    OwlDialogService
-                ],
-                entryComponents: [
-                    OwlDialogContainerComponent
-                ]
-            },] }
-];
-
-class NumberFixedLenPipe {
-    transform(num, len) {
-        const number = Math.floor(num);
-        const length = Math.floor(len);
-        if (num === null || isNaN(number) || isNaN(length)) {
-            return num;
-        }
-        let numString = number.toString();
-        while (numString.length < length) {
-            numString = '0' + numString;
-        }
-        return numString;
+    /**
+     * Create the popup PositionStrategy.
+     * */
+    createPopupPositionStrategy() {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this._dtInput.elementRef)
+            .withTransformOriginOn('.owl-dt-container')
+            .withFlexibleDimensions(false)
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top'
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'bottom'
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top'
+            },
+            {
+                originX: 'end',
+                originY: 'top',
+                overlayX: 'end',
+                overlayY: 'bottom'
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: -176
+            },
+            {
+                originX: 'start',
+                originY: 'top',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: -352
+            }
+        ]);
     }
 }
-NumberFixedLenPipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'numberFixedLen'
-            },] }
-];
+OwlDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: OwlDialogService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: DateTimeAdapter, optional: true }, { token: OWL_DTPICKER_SCROLL_STRATEGY }, { token: OWL_DATE_TIME_FORMATS, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+OwlDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: OwlDateTimeComponent, selector: "owl-date-time", inputs: { backdropClass: "backdropClass", panelClass: "panelClass", startAt: "startAt", pickerType: "pickerType", pickerMode: "pickerMode", disabled: "disabled", opened: "opened", scrollStrategy: "scrollStrategy" }, outputs: { afterPickerClosed: "afterPickerClosed", afterPickerOpen: "afterPickerOpen", yearSelected: "yearSelected", monthSelected: "monthSelected" }, exportAs: ["owlDateTime"], usesInheritance: true, ngImport: i0, template: "<p>date-time-picker works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'owl-date-time', exportAs: 'owlDateTime', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<p>date-time-picker works!</p>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: OwlDialogService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: DateTimeAdapter, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [OWL_DTPICKER_SCROLL_STRATEGY]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [OWL_DATE_TIME_FORMATS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { backdropClass: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], pickerType: [{
+                type: Input
+            }], pickerMode: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], scrollStrategy: [{
+                type: Input
+            }], afterPickerClosed: [{
+                type: Output
+            }], afterPickerOpen: [{
+                type: Output
+            }], yearSelected: [{
+                type: Output
+            }], monthSelected: [{
+                type: Output
+            }] } });
 
-class OwlTimerBoxComponent {
-    constructor() {
-        this.showDivider = false;
-        this.step = 1;
-        this.valueChange = new EventEmitter();
-        this.inputChange = new EventEmitter();
-        this.inputStream = new Subject();
-        this.inputStreamSub = Subscription.EMPTY;
-    }
-    get displayValue() {
-        return this.boxValue || this.value;
-    }
-    get owlDTTimerBoxClass() {
-        return true;
-    }
-    ngOnInit() {
-        this.inputStreamSub = this.inputStream.pipe(debounceTime(500), distinctUntilChanged()).subscribe((val) => {
-            if (val) {
-                const inputValue = coerceNumberProperty(val, 0);
-                this.updateValueViaInput(inputValue);
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.inputStreamSub.unsubscribe();
-    }
-    upBtnClicked() {
-        this.updateValue(this.value + this.step);
-    }
-    downBtnClicked() {
-        this.updateValue(this.value - this.step);
-    }
-    handleInputChange(val) {
-        this.inputStream.next(val);
-    }
-    updateValue(value) {
-        this.valueChange.emit(value);
-    }
-    updateValueViaInput(value) {
-        if (value > this.max || value < this.min) {
-            return;
-        }
-        this.inputChange.emit(value);
-    }
+class OwlDialogModule {
 }
-OwlTimerBoxComponent.decorators = [
-    { type: Component, args: [{
-                exportAs: 'owlDateTimeTimerBox',
-                selector: 'owl-date-time-timer-box',
-                template: "<div *ngIf=\"showDivider\"\n    class=\"owl-dt-timer-divider\"\n    aria-hidden=\"true\"></div>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"upBtnDisabled\"\n    [attr.aria-label]=\"upBtnAriaLabel\"\n    (click)=\"upBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Up\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background:new 0 0 451.847 451.846;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path d=\"M248.292,106.406l194.281,194.29c12.365,12.359,12.365,32.391,0,44.744c-12.354,12.354-32.391,12.354-44.744,0\n                        L225.923,173.529L54.018,345.44c-12.36,12.354-32.395,12.354-44.748,0c-12.359-12.354-12.359-32.391,0-44.75L203.554,106.4\n                        c6.18-6.174,14.271-9.259,22.369-9.259C234.018,97.141,242.115,100.232,248.292,106.406z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n<label class=\"owl-dt-timer-content\">\n    <input class=\"owl-dt-timer-input\"\n        maxlength=\"2\"\n        [value]=\"displayValue | numberFixedLen : 2\"\n        (input)=\"handleInputChange(valueInput.value)\"\n        #valueInput>\n    <span class=\"owl-hidden-accessible\">{{inputLabel}}</span>\n</label>\n<button class=\"owl-dt-control-button owl-dt-control-arrow-button\"\n    type=\"button\"\n    tabindex=\"-1\"\n    [disabled]=\"downBtnDisabled\"\n    [attr.aria-label]=\"downBtnAriaLabel\"\n    (click)=\"downBtnClicked()\">\n    <span class=\"owl-dt-control-button-content\"\n        tabindex=\"-1\">\n        <!-- <editor-fold desc=\"SVG Arrow Down\"> -->\n        <svg xmlns=\"http://www.w3.org/2000/svg\"\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            version=\"1.1\"\n            x=\"0px\"\n            y=\"0px\"\n            viewBox=\"0 0 451.847 451.846\"\n            style=\"enable-background:new 0 0 451.847 451.846;\"\n            xml:space=\"preserve\"\n            width=\"100%\"\n            height=\"100%\">\n            <path\n                d=\"M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751\n                        c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0\n                        c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z\" />\n        </svg>\n        <!-- </editor-fold> -->\n    </span>\n</button>\n",
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OwlTimerBoxComponent.ctorParameters = () => [];
-OwlTimerBoxComponent.propDecorators = {
-    showDivider: [{ type: Input }],
-    upBtnAriaLabel: [{ type: Input }],
-    upBtnDisabled: [{ type: Input }],
-    downBtnAriaLabel: [{ type: Input }],
-    downBtnDisabled: [{ type: Input }],
-    boxValue: [{ type: Input }],
-    value: [{ type: Input }],
-    min: [{ type: Input }],
-    max: [{ type: Input }],
-    step: [{ type: Input }],
-    inputLabel: [{ type: Input }],
-    valueChange: [{ type: Output }],
-    inputChange: [{ type: Output }],
-    owlDTTimerBoxClass: [{ type: HostBinding, args: ['class.owl-dt-timer-box',] }]
-};
+OwlDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OwlDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogModule, declarations: [OwlDialogContainerComponent], imports: [CommonModule, A11yModule, OverlayModule, PortalModule] });
+OwlDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogModule, providers: [
+        OWL_DIALOG_SCROLL_STRATEGY_PROVIDER,
+        OwlDialogService
+    ], imports: [[CommonModule, A11yModule, OverlayModule, PortalModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, A11yModule, OverlayModule, PortalModule],
+                    exports: [],
+                    declarations: [
+                        OwlDialogContainerComponent
+                    ],
+                    providers: [
+                        OWL_DIALOG_SCROLL_STRATEGY_PROVIDER,
+                        OwlDialogService
+                    ],
+                    entryComponents: [
+                        OwlDialogContainerComponent
+                    ]
+                }]
+        }] });
 
 class OwlDateTimeModule {
 }
-OwlDateTimeModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule],
-                exports: [
-                    OwlCalendarComponent,
-                    OwlTimerComponent,
-                    OwlDateTimeTriggerDirective,
-                    OwlDateTimeInputDirective,
-                    OwlDateTimeComponent,
-                    OwlDateTimeInlineComponent,
-                    OwlMultiYearViewComponent,
-                    OwlYearViewComponent,
-                    OwlMonthViewComponent
-                ],
-                declarations: [
-                    OwlDateTimeTriggerDirective,
-                    OwlDateTimeInputDirective,
-                    OwlDateTimeComponent,
-                    OwlDateTimeContainerComponent,
-                    OwlMultiYearViewComponent,
-                    OwlYearViewComponent,
-                    OwlMonthViewComponent,
-                    OwlTimerComponent,
-                    OwlTimerBoxComponent,
-                    OwlCalendarComponent,
-                    OwlCalendarBodyComponent,
-                    NumberFixedLenPipe,
-                    OwlDateTimeInlineComponent
-                ],
-                providers: [
-                    OwlDateTimeIntl,
-                    OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER
-                ],
-                entryComponents: [
-                    OwlDateTimeContainerComponent
-                ]
-            },] }
-];
+OwlDateTimeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+OwlDateTimeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeModule, declarations: [OwlDateTimeTriggerDirective,
+        OwlDateTimeInputDirective,
+        OwlDateTimeComponent,
+        OwlDateTimeContainerComponent,
+        OwlMultiYearViewComponent,
+        OwlYearViewComponent,
+        OwlMonthViewComponent,
+        OwlTimerComponent,
+        OwlTimerBoxComponent,
+        OwlCalendarComponent,
+        OwlCalendarBodyComponent,
+        NumberFixedLenPipe,
+        OwlDateTimeInlineComponent], imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule], exports: [OwlCalendarComponent,
+        OwlTimerComponent,
+        OwlDateTimeTriggerDirective,
+        OwlDateTimeInputDirective,
+        OwlDateTimeComponent,
+        OwlDateTimeInlineComponent,
+        OwlMultiYearViewComponent,
+        OwlYearViewComponent,
+        OwlMonthViewComponent] });
+OwlDateTimeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeModule, providers: [
+        OwlDateTimeIntl,
+        OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER
+    ], imports: [[CommonModule, OverlayModule, OwlDialogModule, A11yModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: OwlDateTimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, OverlayModule, OwlDialogModule, A11yModule],
+                    exports: [
+                        OwlCalendarComponent,
+                        OwlTimerComponent,
+                        OwlDateTimeTriggerDirective,
+                        OwlDateTimeInputDirective,
+                        OwlDateTimeComponent,
+                        OwlDateTimeInlineComponent,
+                        OwlMultiYearViewComponent,
+                        OwlYearViewComponent,
+                        OwlMonthViewComponent
+                    ],
+                    declarations: [
+                        OwlDateTimeTriggerDirective,
+                        OwlDateTimeInputDirective,
+                        OwlDateTimeComponent,
+                        OwlDateTimeContainerComponent,
+                        OwlMultiYearViewComponent,
+                        OwlYearViewComponent,
+                        OwlMonthViewComponent,
+                        OwlTimerComponent,
+                        OwlTimerBoxComponent,
+                        OwlCalendarComponent,
+                        OwlCalendarBodyComponent,
+                        NumberFixedLenPipe,
+                        OwlDateTimeInlineComponent
+                    ],
+                    providers: [
+                        OwlDateTimeIntl,
+                        OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER
+                    ],
+                    entryComponents: [
+                        OwlDateTimeContainerComponent
+                    ]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE, OWL_DATE_TIME_LOCALE_PROVIDER, OwlCalendarComponent, OwlDateTimeComponent, OwlDateTimeInlineComponent, OwlDateTimeInputDirective, OwlDateTimeIntl, OwlDateTimeModule, OwlDateTimeTriggerDirective, OwlMonthViewComponent, OwlMultiYearViewComponent, OwlTimerComponent, OwlYearViewComponent, OWL_DATE_TIME_LOCALE_FACTORY as ɵa, OWL_DATETIME_VALUE_ACCESSOR as ɵb, OWL_DATETIME_VALUE_ACCESSOR$1 as ɵc, OWL_DATETIME_VALIDATORS as ɵd, OWL_DTPICKER_SCROLL_STRATEGY as ɵe, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵf, OWL_DTPICKER_SCROLL_STRATEGY_PROVIDER as ɵg, OwlCalendarBodyComponent as ɵh, OwlDateTimeDirective as ɵi, OwlDateTimeContainerComponent as ɵj, owlDateTimePickerAnimations as ɵk, OWL_DIALOG_SCROLL_STRATEGY as ɵl, OWL_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY as ɵm, OWL_DIALOG_SCROLL_STRATEGY_PROVIDER as ɵn, OWL_DIALOG_DEFAULT_OPTIONS as ɵo, OwlDialogService as ɵp, OwlDialogConfig as ɵq, OwlDialogModule as ɵr, OwlDialogContainerComponent as ɵs, OwlTimerBoxComponent as ɵt, NumberFixedLenPipe as ɵu };
-//# sourceMappingURL=nxt-pick-datetime.js.map
+export { DateTimeAdapter, OWL_DATE_TIME_FORMATS, OWL_DATE_TIME_LOCALE, OWL_DATE_TIME_LOCALE_PROVIDER, OwlCalendarComponent, OwlDateTimeComponent, OwlDateTimeInlineComponent, OwlDateTimeInputDirective, OwlDateTimeIntl, OwlDateTimeModule, OwlDateTimeTriggerDirective, OwlMonthViewComponent, OwlMultiYearViewComponent, OwlTimerComponent, OwlYearViewComponent };