primeng 11.4.4 → 12.0.1

package/bundles/primeng-calendar.umd.js

@@ -2,7 +2,33 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/animations'), require('@angular/common'), require('primeng/button'), require('primeng/ripple'), require('primeng/dom'), require('primeng/api'), require('@angular/forms')) :
     typeof define === 'function' && define.amd ? define('primeng/calendar', ['exports', '@angular/core', '@angular/animations', '@angular/common', 'primeng/button', 'primeng/ripple', 'primeng/dom', 'primeng/api', '@angular/forms'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.primeng = global.primeng || {}, global.primeng.calendar = {}), global.ng.core, global.ng.animations, global.ng.common, global.primeng.button, global.primeng.ripple, global.primeng.dom, global.primeng.api, global.ng.forms));
-}(this, (function (exports, core, animations, common, button, ripple, dom, api, forms) { 'use strict';
+}(this, (function (exports, i0, animations, i2, i3, i4, dom, i1, forms) { 'use strict';
+
+    function _interopNamespace(e) {
+        if (e && e.__esModule) return e;
+        var n = Object.create(null);
+        if (e) {
+            Object.keys(e).forEach(function (k) {
+                if (k !== 'default') {
+                    var d = Object.getOwnPropertyDescriptor(e, k);
+                    Object.defineProperty(n, k, d.get ? d : {
+                        enumerable: true,
+                        get: function () {
+                            return e[k];
+                        }
+                    });
+                }
+            });
+        }
+        n['default'] = e;
+        return Object.freeze(n);
+    }
+
+    var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -324,7 +350,7 @@
 
     var CALENDAR_VALUE_ACCESSOR = {
         provide: forms.NG_VALUE_ACCESSOR,
-        useExisting: core.forwardRef(function () { return Calendar; }),
+        useExisting: i0.forwardRef(function () { return Calendar; }),
         multi: true
     };
     var Calendar = /** @class */ (function () {
@@ -363,17 +389,17 @@
             this.firstDayOfWeek = 0;
             this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
             this.hideTransitionOptions = '.1s linear';
-            this.onFocus = new core.EventEmitter();
-            this.onBlur = new core.EventEmitter();
-            this.onClose = new core.EventEmitter();
-            this.onSelect = new core.EventEmitter();
-            this.onInput = new core.EventEmitter();
-            this.onTodayClick = new core.EventEmitter();
-            this.onClearClick = new core.EventEmitter();
-            this.onMonthChange = new core.EventEmitter();
-            this.onYearChange = new core.EventEmitter();
-            this.onClickOutside = new core.EventEmitter();
-            this.onShow = new core.EventEmitter();
+            this.onFocus = new i0.EventEmitter();
+            this.onBlur = new i0.EventEmitter();
+            this.onClose = new i0.EventEmitter();
+            this.onSelect = new i0.EventEmitter();
+            this.onInput = new i0.EventEmitter();
+            this.onTodayClick = new i0.EventEmitter();
+            this.onClearClick = new i0.EventEmitter();
+            this.onMonthChange = new i0.EventEmitter();
+            this.onYearChange = new i0.EventEmitter();
+            this.onClickOutside = new i0.EventEmitter();
+            this.onShow = new i0.EventEmitter();
             this.onModelChange = function () { };
             this.onModelTouched = function () { };
             this.inputFieldValue = null;
@@ -571,7 +597,7 @@
         Calendar.prototype.createWeekDays = function () {
             this.weekDays = [];
             var dayIndex = this.firstDayOfWeek;
-            var dayLabels = this.getTranslation(api.TranslationKeys.DAY_NAMES_MIN);
+            var dayLabels = this.getTranslation(i1.TranslationKeys.DAY_NAMES_MIN);
             for (var i = 0; i < 7; i++) {
                 this.weekDays.push(dayLabels[dayIndex]);
                 dayIndex = (dayIndex == 6) ? 0 : ++dayIndex;
@@ -579,7 +605,7 @@
         };
         Calendar.prototype.createMonthPickerValues = function () {
             this.monthPickerValues = [];
-            var monthLabels = this.getTranslation(api.TranslationKeys.MONTH_NAMES_SHORT);
+            var monthLabels = this.getTranslation(i1.TranslationKeys.MONTH_NAMES_SHORT);
             for (var i = 0; i <= 11; i++) {
                 this.monthPickerValues.push(monthLabels[i]);
             }
@@ -870,7 +896,7 @@
                 this.updateModel(date);
             }
             else if (this.isMultipleSelection()) {
-                this.updateModel(this.value ? __spread(this.value, [date]) : [date]);
+                this.updateModel(this.value ? __spreadArray(__spreadArray([], __read(this.value)), [date]) : [date]);
             }
             else if (this.isRangeSelection()) {
                 if (this.value && this.value.length) {
@@ -1676,7 +1702,7 @@
                     value = [value, null];
             }
             if (this.isMultipleSelection()) {
-                value = __spread(this.value.slice(0, -1), [value]);
+                value = __spreadArray(__spreadArray([], __read(this.value.slice(0, -1))), [value]);
             }
             this.updateModel(value);
             this.onSelect.emit(value);
@@ -1989,7 +2015,7 @@
                                 output += formatNumber('d', date.getDate(), 2);
                                 break;
                             case 'D':
-                                output += formatName('D', date.getDay(), this.getTranslation(api.TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(api.TranslationKeys.DAY_NAMES));
+                                output += formatName('D', date.getDay(), this.getTranslation(i1.TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(i1.TranslationKeys.DAY_NAMES));
                                 break;
                             case 'o':
                                 output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() -
@@ -1999,7 +2025,7 @@
                                 output += formatNumber('m', date.getMonth() + 1, 2);
                                 break;
                             case 'M':
-                                output += formatName('M', date.getMonth(), this.getTranslation(api.TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(api.TranslationKeys.MONTH_NAMES));
+                                output += formatName('M', date.getMonth(), this.getTranslation(i1.TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(i1.TranslationKeys.MONTH_NAMES));
                                 break;
                             case 'y':
                                 output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
@@ -2149,7 +2175,7 @@
                             day = getNumber("d");
                             break;
                         case "D":
-                            getName("D", this.getTranslation(api.TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(api.TranslationKeys.DAY_NAMES));
+                            getName("D", this.getTranslation(i1.TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(i1.TranslationKeys.DAY_NAMES));
                             break;
                         case "o":
                             doy = getNumber("o");
@@ -2158,7 +2184,7 @@
                             month = getNumber("m");
                             break;
                         case "M":
-                            month = getName("M", this.getTranslation(api.TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(api.TranslationKeys.MONTH_NAMES));
+                            month = getName("M", this.getTranslation(i1.TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(i1.TranslationKeys.MONTH_NAMES));
                             break;
                         case "y":
                             year = getNumber("y");
@@ -2327,141 +2353,242 @@
         };
         return Calendar;
     }());
-    Calendar.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'p-calendar',
-                    template: "\n        <span #container [ngClass]=\"{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled':disabled, 'p-focus': focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [attr.aria-required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick()\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.inputmode]=\"touchUI ? 'off' : null\"\n                    [ngClass]=\"'p-inputtext p-component'\" autocomplete=\"off\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton pRipple *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"p-datepicker-trigger\"\n                    [disabled]=\"disabled\" tabindex=\"0\"></button>\n            </ng-template>\n            <div #contentWrapper [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'p-datepicker p-component': true, 'p-datepicker-inline':inline,\n                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}\"\n                [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:\n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"p-datepicker-group-container\">\n                        <div class=\"p-datepicker-group\" *ngFor=\"let month of months; let i = index;\">\n                            <div class=\"p-datepicker-header\">\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-prev p-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-prev-icon pi pi-chevron-left\"></span>\n                                </button>\n                                <div class=\"p-datepicker-title\">\n                                    <span class=\"p-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{getTranslation('monthNames')[month.month]}}</span>\n                                    <select tabindex=\"0\" class=\"p-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                        <option [value]=\"i\" *ngFor=\"let monthName of getTranslation('monthNames');let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                    </select>\n                                    <select tabindex=\"0\" class=\"p-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                        <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                    </select>\n                                    <span class=\"p-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                                </div>\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-next p-link\" (click)=\"onNextButtonClick($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-next-icon pi pi-chevron-right\"></span>\n                                </button>\n                            </div>\n                            <div class=\"p-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                                <table class=\"p-datepicker-calendar\">\n                                    <thead>\n                                        <tr>\n                                            <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-disabled\">\n                                                <span>{{getTranslation('weekHeader')}}</span>\n                                            </th>\n                                            <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                                <span>{{weekDay}}</span>\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr *ngFor=\"let week of month.dates; let j = index;\">\n                                            <td *ngIf=\"showWeek\" class=\"p-datepicker-weeknumber\">\n                                                <span class=\"p-disabled\">\n                                                    {{month.weekNumbers[j]}}\n                                                </span>\n                                            </td>\n                                            <td *ngFor=\"let date of week\" [ngClass]=\"{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}\">\n                                                <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                    <span [ngClass]=\"{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}\"\n                                                        (click)=\"onDateSelect($event,date)\" draggable=\"false\" (keydown)=\"onDateCellKeydown($event,date,i)\" pRipple>\n                                                        <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                        <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                    </span>\n                                                </ng-container>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-monthpicker\" *ngIf=\"view === 'month'\">\n                        <span *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event,i)\" class=\"p-monthpicker-month\" [ngClass]=\"{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}\" pRipple>\n                            {{m}}\n                        </span>\n                    </div>\n                </ng-container>\n                <div class=\"p-timepicker\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"p-hour-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{currentHour}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-minute-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{currentMinute}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\" *ngIf=\"showSeconds\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-second-picker\" *ngIf=\"showSeconds\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{currentSecond}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"p-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                    <button type=\"button\" [label]=\"getTranslation('today')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onTodayButtonClick($event)\" pButton pRipple [ngClass]=\"[todayButtonStyleClass]\"></button>\n                    <button type=\"button\" [label]=\"getTranslation('clear')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onClearButtonClick($event)\" pButton pRipple [ngClass]=\"[clearButtonStyleClass]\"></button>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </span>\n    ",
-                    animations: [
-                        animations.trigger('overlayAnimation', [
-                            animations.state('visibleTouchUI', animations.style({
-                                transform: 'translate(-50%,-50%)',
-                                opacity: 1
-                            })),
-                            animations.transition('void => visible', [
-                                animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                                animations.animate('{{showTransitionParams}}', animations.style({ opacity: 1, transform: '*' }))
-                            ]),
-                            animations.transition('visible => void', [
-                                animations.animate('{{hideTransitionParams}}', animations.style({ opacity: 0 }))
-                            ]),
-                            animations.transition('void => visibleTouchUI', [
-                                animations.style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
-                                animations.animate('{{showTransitionParams}}')
-                            ]),
-                            animations.transition('visibleTouchUI => void', [
-                                animations.animate(('{{hideTransitionParams}}'), animations.style({
-                                    opacity: 0,
-                                    transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
-                                }))
+    Calendar.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: Calendar, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: i1__namespace.PrimeNGConfig }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Calendar.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: Calendar, selector: "p-calendar", inputs: { style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", disabled: "disabled", dateFormat: "dateFormat", multipleSeparator: "multipleSeparator", rangeSeparator: "rangeSeparator", inline: "inline", showOtherMonths: "showOtherMonths", selectOtherMonths: "selectOtherMonths", showIcon: "showIcon", icon: "icon", appendTo: "appendTo", readonlyInput: "readonlyInput", shortYearCutoff: "shortYearCutoff", monthNavigator: "monthNavigator", yearNavigator: "yearNavigator", hourFormat: "hourFormat", timeOnly: "timeOnly", stepHour: "stepHour", stepMinute: "stepMinute", stepSecond: "stepSecond", showSeconds: "showSeconds", required: "required", showOnFocus: "showOnFocus", showWeek: "showWeek", dataType: "dataType", selectionMode: "selectionMode", maxDateCount: "maxDateCount", showButtonBar: "showButtonBar", todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: "keepInvalid", hideOnDateTimeSelect: "hideOnDateTimeSelect", numberOfMonths: "numberOfMonths", view: "view", touchUI: "touchUI", timeSeparator: "timeSeparator", focusTrap: "focusTrap", firstDayOfWeek: "firstDayOfWeek", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: "tabindex", defaultDate: "defaultDate", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", locale: "locale" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus" } }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: i1.PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "inputfieldViewChild", first: true, predicate: ["inputfield"], descendants: true }, { propertyName: "content", first: true, predicate: ["contentWrapper"], descendants: true }], ngImport: i0__namespace, template: "\n        <span #container [ngClass]=\"{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled':disabled, 'p-focus': focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [attr.aria-required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick()\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.inputmode]=\"touchUI ? 'off' : null\"\n                    [ngClass]=\"'p-inputtext p-component'\" autocomplete=\"off\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton pRipple *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"p-datepicker-trigger\"\n                    [disabled]=\"disabled\" tabindex=\"0\"></button>\n            </ng-template>\n            <div #contentWrapper [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'p-datepicker p-component': true, 'p-datepicker-inline':inline,\n                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}\"\n                [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:\n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"p-datepicker-group-container\">\n                        <div class=\"p-datepicker-group\" *ngFor=\"let month of months; let i = index;\">\n                            <div class=\"p-datepicker-header\">\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-prev p-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-prev-icon pi pi-chevron-left\"></span>\n                                </button>\n                                <div class=\"p-datepicker-title\">\n                                    <span class=\"p-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{getTranslation('monthNames')[month.month]}}</span>\n                                    <select tabindex=\"0\" class=\"p-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                        <option [value]=\"i\" *ngFor=\"let monthName of getTranslation('monthNames');let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                    </select>\n                                    <select tabindex=\"0\" class=\"p-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                        <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                    </select>\n                                    <span class=\"p-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                                </div>\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-next p-link\" (click)=\"onNextButtonClick($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-next-icon pi pi-chevron-right\"></span>\n                                </button>\n                            </div>\n                            <div class=\"p-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                                <table class=\"p-datepicker-calendar\">\n                                    <thead>\n                                        <tr>\n                                            <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-disabled\">\n                                                <span>{{getTranslation('weekHeader')}}</span>\n                                            </th>\n                                            <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                                <span>{{weekDay}}</span>\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr *ngFor=\"let week of month.dates; let j = index;\">\n                                            <td *ngIf=\"showWeek\" class=\"p-datepicker-weeknumber\">\n                                                <span class=\"p-disabled\">\n                                                    {{month.weekNumbers[j]}}\n                                                </span>\n                                            </td>\n                                            <td *ngFor=\"let date of week\" [ngClass]=\"{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}\">\n                                                <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                    <span [ngClass]=\"{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}\"\n                                                        (click)=\"onDateSelect($event,date)\" draggable=\"false\" (keydown)=\"onDateCellKeydown($event,date,i)\" pRipple>\n                                                        <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                        <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                    </span>\n                                                </ng-container>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-monthpicker\" *ngIf=\"view === 'month'\">\n                        <span *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event,i)\" class=\"p-monthpicker-month\" [ngClass]=\"{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}\" pRipple>\n                            {{m}}\n                        </span>\n                    </div>\n                </ng-container>\n                <div class=\"p-timepicker\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"p-hour-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{currentHour}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-minute-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{currentMinute}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\" *ngIf=\"showSeconds\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-second-picker\" *ngIf=\"showSeconds\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{currentSecond}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"p-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                    <button type=\"button\" [label]=\"getTranslation('today')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onTodayButtonClick($event)\" pButton pRipple [ngClass]=\"[todayButtonStyleClass]\"></button>\n                    <button type=\"button\" [label]=\"getTranslation('clear')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onClearButtonClick($event)\" pButton pRipple [ngClass]=\"[clearButtonStyleClass]\"></button>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </span>\n    ", isInline: true, styles: [".p-calendar{position:relative;display:inline-flex}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-top-right-radius:0;border-bottom-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-top-left-radius:0;border-bottom-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{width:auto;position:absolute}.p-datepicker-inline{position:static}.p-datepicker-header{display:flex;align-items:center;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-next,.p-datepicker-prev{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{width:100%;border-collapse:collapse}.p-datepicker td>span{display:flex;margin:0 auto}.p-datepicker td>span,.p-monthpicker-month{justify-content:center;align-items:center;cursor:pointer;overflow:hidden;position:relative}.p-monthpicker-month{width:33.3%;display:inline-flex}.p-datepicker-buttonbar{display:flex;justify-content:space-between;align-items:center}.p-timepicker,.p-timepicker button{display:flex;justify-content:center;align-items:center}.p-timepicker button{cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{display:flex;align-items:center;flex-direction:column}.p-calendar .p-datepicker-touch-ui,.p-datepicker-touch-ui{position:fixed;top:50%;left:50%;min-width:80vw;transform:translate(-50%,-50%)}"], directives: [{ type: i2__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { type: i4__namespace.Ripple, selector: "[pRipple]" }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+            animations.trigger('overlayAnimation', [
+                animations.state('visibleTouchUI', animations.style({
+                    transform: 'translate(-50%,-50%)',
+                    opacity: 1
+                })),
+                animations.transition('void => visible', [
+                    animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                    animations.animate('{{showTransitionParams}}', animations.style({ opacity: 1, transform: '*' }))
+                ]),
+                animations.transition('visible => void', [
+                    animations.animate('{{hideTransitionParams}}', animations.style({ opacity: 0 }))
+                ]),
+                animations.transition('void => visibleTouchUI', [
+                    animations.style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
+                    animations.animate('{{showTransitionParams}}')
+                ]),
+                animations.transition('visibleTouchUI => void', [
+                    animations.animate(('{{hideTransitionParams}}'), animations.style({
+                        opacity: 0,
+                        transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
+                    }))
+                ])
+            ])
+        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: Calendar, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'p-calendar',
+                        template: "\n        <span #container [ngClass]=\"{'p-calendar':true, 'p-calendar-w-btn': showIcon, 'p-calendar-timeonly': timeOnly, 'p-calendar-disabled':disabled, 'p-focus': focus}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ng-template [ngIf]=\"!inline\">\n                <input #inputfield type=\"text\" [attr.id]=\"inputId\" [attr.name]=\"name\" [attr.required]=\"required\" [attr.aria-required]=\"required\" [value]=\"inputFieldValue\" (focus)=\"onInputFocus($event)\" (keydown)=\"onInputKeydown($event)\" (click)=\"onInputClick()\" (blur)=\"onInputBlur($event)\"\n                    [readonly]=\"readonlyInput\" (input)=\"onUserInput($event)\" [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [placeholder]=\"placeholder||''\" [disabled]=\"disabled\" [attr.tabindex]=\"tabindex\" [attr.inputmode]=\"touchUI ? 'off' : null\"\n                    [ngClass]=\"'p-inputtext p-component'\" autocomplete=\"off\" [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    ><button type=\"button\" [icon]=\"icon\" pButton pRipple *ngIf=\"showIcon\" (click)=\"onButtonClick($event,inputfield)\" class=\"p-datepicker-trigger\"\n                    [disabled]=\"disabled\" tabindex=\"0\"></button>\n            </ng-template>\n            <div #contentWrapper [class]=\"panelStyleClass\" [ngStyle]=\"panelStyle\" [ngClass]=\"{'p-datepicker p-component': true, 'p-datepicker-inline':inline,\n                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}\"\n                [@overlayAnimation]=\"touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:\n                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}\"\n                                            [@.disabled]=\"inline === true\" (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\" (@overlayAnimation.done)=\"onOverlayAnimationDone($event)\" *ngIf=\"inline || overlayVisible\">\n                <ng-content select=\"p-header\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                <ng-container *ngIf=\"!timeOnly\">\n                    <div class=\"p-datepicker-group-container\">\n                        <div class=\"p-datepicker-group\" *ngFor=\"let month of months; let i = index;\">\n                            <div class=\"p-datepicker-header\">\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-prev p-link\" (click)=\"onPrevButtonClick($event)\" *ngIf=\"i === 0\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-prev-icon pi pi-chevron-left\"></span>\n                                </button>\n                                <div class=\"p-datepicker-title\">\n                                    <span class=\"p-datepicker-month\" *ngIf=\"!monthNavigator && (view !== 'month')\">{{getTranslation('monthNames')[month.month]}}</span>\n                                    <select tabindex=\"0\" class=\"p-datepicker-month\" *ngIf=\"monthNavigator && (view !== 'month') && numberOfMonths === 1\" (change)=\"onMonthDropdownChange($event.target.value)\">\n                                        <option [value]=\"i\" *ngFor=\"let monthName of getTranslation('monthNames');let i = index\" [selected]=\"i === month.month\">{{monthName}}</option>\n                                    </select>\n                                    <select tabindex=\"0\" class=\"p-datepicker-year\" *ngIf=\"yearNavigator && numberOfMonths === 1\" (change)=\"onYearDropdownChange($event.target.value)\">\n                                        <option [value]=\"year\" *ngFor=\"let year of yearOptions\" [selected]=\"year === currentYear\">{{year}}</option>\n                                    </select>\n                                    <span class=\"p-datepicker-year\" *ngIf=\"!yearNavigator\">{{view === 'month' ? currentYear : month.year}}</span>\n                                </div>\n                                <button (keydown)=\"onContainerButtonKeydown($event)\" class=\"p-datepicker-next p-link\" (click)=\"onNextButtonClick($event)\" *ngIf=\"numberOfMonths === 1 ? true : (i === numberOfMonths -1)\" type=\"button\" pRipple>\n                                    <span class=\"p-datepicker-next-icon pi pi-chevron-right\"></span>\n                                </button>\n                            </div>\n                            <div class=\"p-datepicker-calendar-container\" *ngIf=\"view ==='date'\">\n                                <table class=\"p-datepicker-calendar\">\n                                    <thead>\n                                        <tr>\n                                            <th *ngIf=\"showWeek\" class=\"p-datepicker-weekheader p-disabled\">\n                                                <span>{{getTranslation('weekHeader')}}</span>\n                                            </th>\n                                            <th scope=\"col\" *ngFor=\"let weekDay of weekDays;let begin = first; let end = last\">\n                                                <span>{{weekDay}}</span>\n                                            </th>\n                                        </tr>\n                                    </thead>\n                                    <tbody>\n                                        <tr *ngFor=\"let week of month.dates; let j = index;\">\n                                            <td *ngIf=\"showWeek\" class=\"p-datepicker-weeknumber\">\n                                                <span class=\"p-disabled\">\n                                                    {{month.weekNumbers[j]}}\n                                                </span>\n                                            </td>\n                                            <td *ngFor=\"let date of week\" [ngClass]=\"{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}\">\n                                                <ng-container *ngIf=\"date.otherMonth ? showOtherMonths : true\">\n                                                    <span [ngClass]=\"{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}\"\n                                                        (click)=\"onDateSelect($event,date)\" draggable=\"false\" (keydown)=\"onDateCellKeydown($event,date,i)\" pRipple>\n                                                        <ng-container *ngIf=\"!dateTemplate\">{{date.day}}</ng-container>\n                                                        <ng-container *ngTemplateOutlet=\"dateTemplate; context: {$implicit: date}\"></ng-container>\n                                                    </span>\n                                                </ng-container>\n                                            </td>\n                                        </tr>\n                                    </tbody>\n                                </table>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"p-monthpicker\" *ngIf=\"view === 'month'\">\n                        <span *ngFor=\"let m of monthPickerValues; let i = index\" (click)=\"onMonthSelect($event, i)\" (keydown)=\"onMonthCellKeydown($event,i)\" class=\"p-monthpicker-month\" [ngClass]=\"{'p-highlight': isMonthSelected(i), 'p-disabled':!isSelectable(1, i, this.currentYear, false)}\" pRipple>\n                            {{m}}\n                        </span>\n                    </div>\n                </ng-container>\n                <div class=\"p-timepicker\" *ngIf=\"showTime||timeOnly\">\n                    <div class=\"p-hour-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentHour < 10\">0</ng-container>{{currentHour}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementHour($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 0, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-minute-picker\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentMinute < 10\">0</ng-container>{{currentMinute}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementMinute($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 1, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-separator\" *ngIf=\"showSeconds\">\n                        <span>{{timeSeparator}}</span>\n                    </div>\n                    <div class=\"p-second-picker\" *ngIf=\"showSeconds\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"incrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, 1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span><ng-container *ngIf=\"currentSecond < 10\">0</ng-container>{{currentSecond}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (keydown.enter)=\"decrementSecond($event)\" (mousedown)=\"onTimePickerElementMouseDown($event, 2, -1)\" (mouseup)=\"onTimePickerElementMouseUp($event)\" (mouseleave)=\"onTimePickerElementMouseLeave()\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                    <div class=\"p-ampm-picker\" *ngIf=\"hourFormat=='12'\">\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-up\"></span>\n                        </button>\n                        <span>{{pm ? 'PM' : 'AM'}}</span>\n                        <button class=\"p-link\" type=\"button\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"toggleAMPM($event)\" (keydown.enter)=\"toggleAMPM($event)\" pRipple>\n                            <span class=\"pi pi-chevron-down\"></span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"p-datepicker-buttonbar\" *ngIf=\"showButtonBar\">\n                    <button type=\"button\" [label]=\"getTranslation('today')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onTodayButtonClick($event)\" pButton pRipple [ngClass]=\"[todayButtonStyleClass]\"></button>\n                    <button type=\"button\" [label]=\"getTranslation('clear')\" (keydown)=\"onContainerButtonKeydown($event)\" (click)=\"onClearButtonClick($event)\" pButton pRipple [ngClass]=\"[clearButtonStyleClass]\"></button>\n                </div>\n                <ng-content select=\"p-footer\"></ng-content>\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </span>\n    ",
+                        animations: [
+                            animations.trigger('overlayAnimation', [
+                                animations.state('visibleTouchUI', animations.style({
+                                    transform: 'translate(-50%,-50%)',
+                                    opacity: 1
+                                })),
+                                animations.transition('void => visible', [
+                                    animations.style({ opacity: 0, transform: 'scaleY(0.8)' }),
+                                    animations.animate('{{showTransitionParams}}', animations.style({ opacity: 1, transform: '*' }))
+                                ]),
+                                animations.transition('visible => void', [
+                                    animations.animate('{{hideTransitionParams}}', animations.style({ opacity: 0 }))
+                                ]),
+                                animations.transition('void => visibleTouchUI', [
+                                    animations.style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
+                                    animations.animate('{{showTransitionParams}}')
+                                ]),
+                                animations.transition('visibleTouchUI => void', [
+                                    animations.animate(('{{hideTransitionParams}}'), animations.style({
+                                        opacity: 0,
+                                        transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
+                                    }))
+                                ])
                             ])
-                        ])
-                    ],
-                    host: {
-                        '[class.p-inputwrapper-filled]': 'filled',
-                        '[class.p-inputwrapper-focus]': 'focus'
-                    },
-                    providers: [CALENDAR_VALUE_ACCESSOR],
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    encapsulation: core.ViewEncapsulation.None,
-                    styles: [".p-calendar{display:inline-flex;position:relative}.p-calendar .p-inputtext{flex:1 1 auto;width:1%}.p-calendar-w-btn .p-inputtext{border-bottom-right-radius:0;border-top-right-radius:0}.p-calendar-w-btn .p-datepicker-trigger{border-bottom-left-radius:0;border-top-left-radius:0}.p-fluid .p-calendar{display:flex}.p-fluid .p-calendar .p-inputtext{width:1%}.p-calendar .p-datepicker{min-width:100%}.p-datepicker{position:absolute;width:auto}.p-datepicker-inline{position:static}.p-datepicker-header{align-items:center;display:flex;justify-content:space-between}.p-datepicker-header .p-datepicker-title{margin:0 auto}.p-datepicker-next,.p-datepicker-prev{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative}.p-datepicker-multiple-month .p-datepicker-group-container{display:flex}.p-datepicker table{border-collapse:collapse;width:100%}.p-datepicker td>span{display:flex;margin:0 auto}.p-datepicker td>span,.p-monthpicker-month{align-items:center;cursor:pointer;justify-content:center;overflow:hidden;position:relative}.p-monthpicker-month{display:inline-flex;width:33.3%}.p-datepicker-buttonbar{align-items:center;display:flex;justify-content:space-between}.p-timepicker,.p-timepicker button{align-items:center;display:flex;justify-content:center}.p-timepicker button{cursor:pointer;overflow:hidden;position:relative}.p-timepicker>div{align-items:center;display:flex;flex-direction:column}.p-calendar .p-datepicker-touch-ui,.p-datepicker-touch-ui{left:50%;min-width:80vw;position:fixed;top:50%;transform:translate(-50%,-50%)}"]
-                },] }
-    ];
-    Calendar.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: core.Renderer2 },
-        { type: core.ChangeDetectorRef },
-        { type: core.NgZone },
-        { type: api.PrimeNGConfig }
-    ]; };
-    Calendar.propDecorators = {
-        style: [{ type: core.Input }],
-        styleClass: [{ type: core.Input }],
-        inputStyle: [{ type: core.Input }],
-        inputId: [{ type: core.Input }],
-        name: [{ type: core.Input }],
-        inputStyleClass: [{ type: core.Input }],
-        placeholder: [{ type: core.Input }],
-        ariaLabelledBy: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        dateFormat: [{ type: core.Input }],
-        multipleSeparator: [{ type: core.Input }],
-        rangeSeparator: [{ type: core.Input }],
-        inline: [{ type: core.Input }],
-        showOtherMonths: [{ type: core.Input }],
-        selectOtherMonths: [{ type: core.Input }],
-        showIcon: [{ type: core.Input }],
-        icon: [{ type: core.Input }],
-        appendTo: [{ type: core.Input }],
-        readonlyInput: [{ type: core.Input }],
-        shortYearCutoff: [{ type: core.Input }],
-        monthNavigator: [{ type: core.Input }],
-        yearNavigator: [{ type: core.Input }],
-        hourFormat: [{ type: core.Input }],
-        timeOnly: [{ type: core.Input }],
-        stepHour: [{ type: core.Input }],
-        stepMinute: [{ type: core.Input }],
-        stepSecond: [{ type: core.Input }],
-        showSeconds: [{ type: core.Input }],
-        required: [{ type: core.Input }],
-        showOnFocus: [{ type: core.Input }],
-        showWeek: [{ type: core.Input }],
-        dataType: [{ type: core.Input }],
-        selectionMode: [{ type: core.Input }],
-        maxDateCount: [{ type: core.Input }],
-        showButtonBar: [{ type: core.Input }],
-        todayButtonStyleClass: [{ type: core.Input }],
-        clearButtonStyleClass: [{ type: core.Input }],
-        autoZIndex: [{ type: core.Input }],
-        baseZIndex: [{ type: core.Input }],
-        panelStyleClass: [{ type: core.Input }],
-        panelStyle: [{ type: core.Input }],
-        keepInvalid: [{ type: core.Input }],
-        hideOnDateTimeSelect: [{ type: core.Input }],
-        numberOfMonths: [{ type: core.Input }],
-        view: [{ type: core.Input }],
-        touchUI: [{ type: core.Input }],
-        timeSeparator: [{ type: core.Input }],
-        focusTrap: [{ type: core.Input }],
-        firstDayOfWeek: [{ type: core.Input }],
-        showTransitionOptions: [{ type: core.Input }],
-        hideTransitionOptions: [{ type: core.Input }],
-        onFocus: [{ type: core.Output }],
-        onBlur: [{ type: core.Output }],
-        onClose: [{ type: core.Output }],
-        onSelect: [{ type: core.Output }],
-        onInput: [{ type: core.Output }],
-        onTodayClick: [{ type: core.Output }],
-        onClearClick: [{ type: core.Output }],
-        onMonthChange: [{ type: core.Output }],
-        onYearChange: [{ type: core.Output }],
-        onClickOutside: [{ type: core.Output }],
-        onShow: [{ type: core.Output }],
-        templates: [{ type: core.ContentChildren, args: [api.PrimeTemplate,] }],
-        tabindex: [{ type: core.Input }],
-        containerViewChild: [{ type: core.ViewChild, args: ['container', { static: false },] }],
-        inputfieldViewChild: [{ type: core.ViewChild, args: ['inputfield', { static: false },] }],
-        content: [{ type: core.ViewChild, args: ['contentWrapper', { static: false },] }],
-        defaultDate: [{ type: core.Input }],
-        minDate: [{ type: core.Input }],
-        maxDate: [{ type: core.Input }],
-        disabledDates: [{ type: core.Input }],
-        disabledDays: [{ type: core.Input }],
-        yearRange: [{ type: core.Input }],
-        showTime: [{ type: core.Input }],
-        locale: [{ type: core.Input }]
-    };
+                        ],
+                        host: {
+                            '[class.p-inputwrapper-filled]': 'filled',
+                            '[class.p-inputwrapper-focus]': 'focus'
+                        },
+                        providers: [CALENDAR_VALUE_ACCESSOR],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        encapsulation: i0.ViewEncapsulation.None,
+                        styleUrls: ['./calendar.css']
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: i1__namespace.PrimeNGConfig }]; }, propDecorators: { style: [{
+                    type: i0.Input
+                }], styleClass: [{
+                    type: i0.Input
+                }], inputStyle: [{
+                    type: i0.Input
+                }], inputId: [{
+                    type: i0.Input
+                }], name: [{
+                    type: i0.Input
+                }], inputStyleClass: [{
+                    type: i0.Input
+                }], placeholder: [{
+                    type: i0.Input
+                }], ariaLabelledBy: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], dateFormat: [{
+                    type: i0.Input
+                }], multipleSeparator: [{
+                    type: i0.Input
+                }], rangeSeparator: [{
+                    type: i0.Input
+                }], inline: [{
+                    type: i0.Input
+                }], showOtherMonths: [{
+                    type: i0.Input
+                }], selectOtherMonths: [{
+                    type: i0.Input
+                }], showIcon: [{
+                    type: i0.Input
+                }], icon: [{
+                    type: i0.Input
+                }], appendTo: [{
+                    type: i0.Input
+                }], readonlyInput: [{
+                    type: i0.Input
+                }], shortYearCutoff: [{
+                    type: i0.Input
+                }], monthNavigator: [{
+                    type: i0.Input
+                }], yearNavigator: [{
+                    type: i0.Input
+                }], hourFormat: [{
+                    type: i0.Input
+                }], timeOnly: [{
+                    type: i0.Input
+                }], stepHour: [{
+                    type: i0.Input
+                }], stepMinute: [{
+                    type: i0.Input
+                }], stepSecond: [{
+                    type: i0.Input
+                }], showSeconds: [{
+                    type: i0.Input
+                }], required: [{
+                    type: i0.Input
+                }], showOnFocus: [{
+                    type: i0.Input
+                }], showWeek: [{
+                    type: i0.Input
+                }], dataType: [{
+                    type: i0.Input
+                }], selectionMode: [{
+                    type: i0.Input
+                }], maxDateCount: [{
+                    type: i0.Input
+                }], showButtonBar: [{
+                    type: i0.Input
+                }], todayButtonStyleClass: [{
+                    type: i0.Input
+                }], clearButtonStyleClass: [{
+                    type: i0.Input
+                }], autoZIndex: [{
+                    type: i0.Input
+                }], baseZIndex: [{
+                    type: i0.Input
+                }], panelStyleClass: [{
+                    type: i0.Input
+                }], panelStyle: [{
+                    type: i0.Input
+                }], keepInvalid: [{
+                    type: i0.Input
+                }], hideOnDateTimeSelect: [{
+                    type: i0.Input
+                }], numberOfMonths: [{
+                    type: i0.Input
+                }], view: [{
+                    type: i0.Input
+                }], touchUI: [{
+                    type: i0.Input
+                }], timeSeparator: [{
+                    type: i0.Input
+                }], focusTrap: [{
+                    type: i0.Input
+                }], firstDayOfWeek: [{
+                    type: i0.Input
+                }], showTransitionOptions: [{
+                    type: i0.Input
+                }], hideTransitionOptions: [{
+                    type: i0.Input
+                }], onFocus: [{
+                    type: i0.Output
+                }], onBlur: [{
+                    type: i0.Output
+                }], onClose: [{
+                    type: i0.Output
+                }], onSelect: [{
+                    type: i0.Output
+                }], onInput: [{
+                    type: i0.Output
+                }], onTodayClick: [{
+                    type: i0.Output
+                }], onClearClick: [{
+                    type: i0.Output
+                }], onMonthChange: [{
+                    type: i0.Output
+                }], onYearChange: [{
+                    type: i0.Output
+                }], onClickOutside: [{
+                    type: i0.Output
+                }], onShow: [{
+                    type: i0.Output
+                }], templates: [{
+                    type: i0.ContentChildren,
+                    args: [i1.PrimeTemplate]
+                }], tabindex: [{
+                    type: i0.Input
+                }], containerViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['container', { static: false }]
+                }], inputfieldViewChild: [{
+                    type: i0.ViewChild,
+                    args: ['inputfield', { static: false }]
+                }], content: [{
+                    type: i0.ViewChild,
+                    args: ['contentWrapper', { static: false }]
+                }], defaultDate: [{
+                    type: i0.Input
+                }], minDate: [{
+                    type: i0.Input
+                }], maxDate: [{
+                    type: i0.Input
+                }], disabledDates: [{
+                    type: i0.Input
+                }], disabledDays: [{
+                    type: i0.Input
+                }], yearRange: [{
+                    type: i0.Input
+                }], showTime: [{
+                    type: i0.Input
+                }], locale: [{
+                    type: i0.Input
+                }] } });
     var CalendarModule = /** @class */ (function () {
         function CalendarModule() {
         }
         return CalendarModule;
     }());
-    CalendarModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [common.CommonModule, button.ButtonModule, api.SharedModule, ripple.RippleModule],
-                    exports: [Calendar, button.ButtonModule, api.SharedModule],
-                    declarations: [Calendar]
-                },] }
-    ];
+    CalendarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CalendarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    CalendarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CalendarModule, declarations: [Calendar], imports: [i2.CommonModule, i3.ButtonModule, i1.SharedModule, i4.RippleModule], exports: [Calendar, i3.ButtonModule, i1.SharedModule] });
+    CalendarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CalendarModule, imports: [[i2.CommonModule, i3.ButtonModule, i1.SharedModule, i4.RippleModule], i3.ButtonModule, i1.SharedModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: CalendarModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [i2.CommonModule, i3.ButtonModule, i1.SharedModule, i4.RippleModule],
+                        exports: [Calendar, i3.ButtonModule, i1.SharedModule],
+                        declarations: [Calendar]
+                    }]
+            }] });
 
     /**
      * Generated bundle index. Do not edit.