primeng 14.1.2 → 14.2.0

package/fesm2020/primeng-calendar.mjs

@@ -1,16 +1,16 @@
-import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChildren, ViewChild, NgModule } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChildren, ViewChild, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1 from 'primeng/api';
+import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
+import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import * as i4 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
-import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import * as i1 from 'primeng/api';
-import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'primeng/utils';
 
 const CALENDAR_VALUE_ACCESSOR = {
@@ -48,7 +48,7 @@ class Calendar {
         this.baseZIndex = 0;
         this.keepInvalid = false;
         this.hideOnDateTimeSelect = true;
-        this.timeSeparator = ":";
+        this.timeSeparator = ':';
         this.focusTrap = true;
         this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
         this.hideTransitionOptions = '.1s linear';
@@ -73,10 +73,10 @@ class Calendar {
         this.convertTo24Hour = function (hours, pm) {
             if (this.hourFormat == '12') {
                 if (hours === 12) {
-                    return (pm ? 12 : 0);
+                    return pm ? 12 : 0;
                 }
                 else {
-                    return (pm ? hours + 12 : hours);
+                    return pm ? hours + 12 : hours;
                 }
             }
             return hours;
@@ -96,11 +96,9 @@ class Calendar {
             }
         }
     }
-    ;
     get view() {
         return this._view;
     }
-    ;
     set view(view) {
         this._view = view;
         this.currentView = this._view;
@@ -108,7 +106,6 @@ class Calendar {
     get defaultDate() {
         return this._defaultDate;
     }
-    ;
     set defaultDate(defaultDate) {
         this._defaultDate = defaultDate;
         if (this.initialized) {
@@ -183,7 +180,6 @@ class Calendar {
     get responsiveOptions() {
         return this._responsiveOptions;
     }
-    ;
     set responsiveOptions(responsiveOptions) {
         this._responsiveOptions = responsiveOptions;
         this.destroyResponsiveStyleElement();
@@ -205,7 +201,7 @@ class Calendar {
         this.createWeekDays();
     }
     set locale(newLocale) {
-        console.warn("Locale property has no effect, use new i18n API instead.");
+        console.warn('Locale property has no effect, use new i18n API instead.');
     }
     ngOnInit() {
         this.attributeSelector = UniqueComponentId();
@@ -218,7 +214,7 @@ class Calendar {
             this.createWeekDays();
             this.initTime(date);
             this.createMonths(this.currentMonth, this.currentYear);
-            this.ticksTo1970 = (((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000);
+            this.ticksTo1970 = ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000;
         }
         this.translationSubscription = this.config.translationObserver.subscribe(() => {
             this.createWeekDays();
@@ -275,7 +271,7 @@ class Calendar {
         let dayLabels = this.getTranslation(TranslationKeys.DAY_NAMES_MIN);
         for (let i = 0; i < 7; i++) {
             this.weekDays.push(dayLabels[dayIndex]);
-            dayIndex = (dayIndex == 6) ? 0 : ++dayIndex;
+            dayIndex = dayIndex == 6 ? 0 : ++dayIndex;
         }
     }
     monthPickerValues() {
@@ -299,7 +295,7 @@ class Calendar {
             let m = month + i;
             let y = year;
             if (m > 11) {
-                m = m % 11 - 1;
+                m = (m % 11) - 1;
                 y = year + 1;
             }
             this.months.push(this.createMonth(m, y));
@@ -325,15 +321,13 @@ class Calendar {
         for (let i = 0; i < monthRows; i++) {
             let week = [];
             if (i == 0) {
-                for (let j = (prevMonthDaysLength - firstDay + 1); j <= prevMonthDaysLength; j++) {
+                for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
                     let prev = this.getPreviousMonthAndYear(month, year);
-                    week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true,
-                        today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) });
+                    week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true, today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) });
                 }
                 let remainingDaysLength = 7 - week.length;
                 for (let j = 0; j < remainingDaysLength; j++) {
-                    week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
-                        selectable: this.isSelectable(dayNo, month, year, false) });
+                    week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
                     dayNo++;
                 }
             }
@@ -341,13 +335,17 @@ class Calendar {
                 for (let j = 0; j < 7; j++) {
                     if (dayNo > daysLength) {
                         let next = this.getNextMonthAndYear(month, year);
-                        week.push({ day: dayNo - daysLength, month: next.month, year: next.year, otherMonth: true,
+                        week.push({
+                            day: dayNo - daysLength,
+                            month: next.month,
+                            year: next.year,
+                            otherMonth: true,
                             today: this.isToday(today, dayNo - daysLength, next.month, next.year),
-                            selectable: this.isSelectable((dayNo - daysLength), next.month, next.year, true) });
+                            selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
+                        });
                     }
                     else {
-                        week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
-                            selectable: this.isSelectable(dayNo, month, year, false) });
+                        week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
                     }
                     dayNo++;
                 }
@@ -534,7 +532,7 @@ class Calendar {
                 for (let i = 0; i < this.value.length; i++) {
                     let dateAsString = this.formatDateTime(this.value[i]);
                     formattedValue += dateAsString;
-                    if (i !== (this.value.length - 1)) {
+                    if (i !== this.value.length - 1) {
                         formattedValue += this.multipleSeparator + ' ';
                     }
                 }
@@ -575,10 +573,10 @@ class Calendar {
         if (this.hourFormat == '12') {
             this.pm = hours > 11;
             if (hours >= 12) {
-                this.currentHour = (hours == 12) ? 12 : hours - 12;
+                this.currentHour = hours == 12 ? 12 : hours - 12;
             }
             else {
-                this.currentHour = (hours == 0) ? 12 : hours;
+                this.currentHour = hours == 0 ? 12 : hours;
             }
         }
         else {
@@ -654,7 +652,7 @@ class Calendar {
             else {
                 let stringArrValue = null;
                 if (this.value) {
-                    stringArrValue = this.value.map(date => this.formatDateTime(date));
+                    stringArrValue = this.value.map((date) => this.formatDateTime(date));
                 }
                 this.onModelChange(stringArrValue);
             }
@@ -685,7 +683,7 @@ class Calendar {
             m = month - 1;
             y = year;
         }
-        return { 'month': m, 'year': y };
+        return { month: m, year: y };
     }
     getNextMonthAndYear(month, year) {
         let m, y;
@@ -697,7 +695,7 @@ class Calendar {
             m = month + 1;
             y = year;
         }
-        return { 'month': m, 'year': y };
+        return { month: m, year: y };
     }
     getSundayIndex() {
         let firstDayOfWeek = this.getFirstDateOfWeek();
@@ -746,7 +744,7 @@ class Calendar {
     isYearSelected(year) {
         if (this.isComparable()) {
             let value = this.isRangeSelection() ? this.value[0] : this.value;
-            return !this.isMultipleSelection() ? (value.getFullYear() === year) : false;
+            return !this.isMultipleSelection() ? value.getFullYear() === year : false;
         }
         return false;
     }
@@ -934,7 +932,7 @@ class Calendar {
             }
         }
         else if (event.keyCode === 9 && this.contentViewChild) {
-            DomHandler.getFocusableElements(this.contentViewChild.nativeElement).forEach(el => el.tabIndex = '-1');
+            DomHandler.getFocusableElements(this.contentViewChild.nativeElement).forEach((el) => (el.tabIndex = '-1'));
             if (this.overlayVisible) {
                 this.overlayVisible = false;
             }
@@ -1208,7 +1206,7 @@ class Calendar {
     }
     navigateToMonth(prev, groupIndex) {
         if (prev) {
-            if (this.numberOfMonths === 1 || (groupIndex === 0)) {
+            if (this.numberOfMonths === 1 || groupIndex === 0) {
                 this.navigationState = { backward: true };
                 this.navBackward(event);
             }
@@ -1221,7 +1219,7 @@ class Calendar {
             }
         }
         else {
-            if (this.numberOfMonths === 1 || (groupIndex === this.numberOfMonths - 1)) {
+            if (this.numberOfMonths === 1 || groupIndex === this.numberOfMonths - 1) {
                 this.navigationState = { backward: false };
                 this.navForward(event);
             }
@@ -1282,35 +1280,36 @@ class Calendar {
         }
     }
     initFocusableCell() {
+        const contentEl = this.contentViewChild?.nativeElement;
         let cell;
         if (this.currentView === 'month') {
-            let cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
-            let selectedCell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month.p-highlight');
-            cells.forEach(cell => cell.tabIndex = -1);
+            let cells = DomHandler.find(contentEl, '.p-monthpicker .p-monthpicker-month:not(.p-disabled)');
+            let selectedCell = DomHandler.findSingle(contentEl, '.p-monthpicker .p-monthpicker-month.p-highlight');
+            cells.forEach((cell) => (cell.tabIndex = -1));
             cell = selectedCell || cells[0];
             if (cells.length === 0) {
-                let disabledCells = DomHandler.find(this.contentViewChild.nativeElement, '.p-monthpicker .p-monthpicker-month.p-disabled[tabindex = "0"]');
-                disabledCells.forEach(cell => cell.tabIndex = -1);
+                let disabledCells = DomHandler.find(contentEl, '.p-monthpicker .p-monthpicker-month.p-disabled[tabindex = "0"]');
+                disabledCells.forEach((cell) => (cell.tabIndex = -1));
             }
         }
         else if (this.currentView === 'year') {
-            let cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
-            let selectedCell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year.p-highlight');
-            cells.forEach(cell => cell.tabIndex = -1);
+            let cells = DomHandler.find(contentEl, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
+            let selectedCell = DomHandler.findSingle(contentEl, '.p-yearpicker .p-yearpicker-year.p-highlight');
+            cells.forEach((cell) => (cell.tabIndex = -1));
             cell = selectedCell || cells[0];
             if (cells.length === 0) {
-                let disabledCells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]');
-                disabledCells.forEach(cell => cell.tabIndex = -1);
+                let disabledCells = DomHandler.find(contentEl, '.p-yearpicker .p-yearpicker-year.p-disabled[tabindex = "0"]');
+                disabledCells.forEach((cell) => (cell.tabIndex = -1));
             }
         }
         else {
-            cell = DomHandler.findSingle(this.contentViewChild.nativeElement, 'span.p-highlight');
+            cell = DomHandler.findSingle(contentEl, 'span.p-highlight');
             if (!cell) {
-                let todayCell = DomHandler.findSingle(this.contentViewChild.nativeElement, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)');
+                let todayCell = DomHandler.findSingle(contentEl, 'td.p-datepicker-today span:not(.p-disabled):not(.p-ink)');
                 if (todayCell)
                     cell = todayCell;
                 else
-                    cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                    cell = DomHandler.findSingle(contentEl, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
             }
         }
         if (cell) {
@@ -1348,7 +1347,7 @@ class Calendar {
                     }
                 }
                 else {
-                    if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1)) {
+                    if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) {
                         if (!this.focusTrap && focusedIndex != -1)
                             return this.hideOverlay();
                         else
@@ -1419,13 +1418,13 @@ class Calendar {
         let newHour = this.currentHour + this.stepHour;
         let newPM = this.pm;
         if (this.hourFormat == '24')
-            newHour = (newHour >= 24) ? (newHour - 24) : newHour;
+            newHour = newHour >= 24 ? newHour - 24 : newHour;
         else if (this.hourFormat == '12') {
             // Before the AM/PM break, now after
             if (prevHour < 12 && newHour > 11) {
                 newPM = !this.pm;
             }
-            newHour = (newHour >= 13) ? (newHour - 12) : newHour;
+            newHour = newHour >= 13 ? newHour - 12 : newHour;
         }
         if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
             this.currentHour = newHour;
@@ -1490,13 +1489,13 @@ class Calendar {
         let newHour = this.currentHour - this.stepHour;
         let newPM = this.pm;
         if (this.hourFormat == '24')
-            newHour = (newHour < 0) ? (24 + newHour) : newHour;
+            newHour = newHour < 0 ? 24 + newHour : newHour;
         else if (this.hourFormat == '12') {
             // If we were at noon/midnight, then switch
             if (this.currentHour === 12) {
                 newPM = !this.pm;
             }
-            newHour = (newHour <= 0) ? (12 + newHour) : newHour;
+            newHour = newHour <= 0 ? 12 + newHour : newHour;
         }
         if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
             this.currentHour = newHour;
@@ -1506,7 +1505,7 @@ class Calendar {
     }
     incrementMinute(event) {
         let newMinute = this.currentMinute + this.stepMinute;
-        newMinute = (newMinute > 59) ? newMinute - 60 : newMinute;
+        newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
         if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
             this.currentMinute = newMinute;
         }
@@ -1514,7 +1513,7 @@ class Calendar {
     }
     decrementMinute(event) {
         let newMinute = this.currentMinute - this.stepMinute;
-        newMinute = (newMinute < 0) ? 60 + newMinute : newMinute;
+        newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
         if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
             this.currentMinute = newMinute;
         }
@@ -1522,7 +1521,7 @@ class Calendar {
     }
     incrementSecond(event) {
         let newSecond = this.currentSecond + this.stepSecond;
-        newSecond = (newSecond > 59) ? newSecond - 60 : newSecond;
+        newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
         if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
             this.currentSecond = newSecond;
         }
@@ -1530,7 +1529,7 @@ class Calendar {
     }
     decrementSecond(event) {
         let newSecond = this.currentSecond - this.stepSecond;
-        newSecond = (newSecond < 0) ? 60 + newSecond : newSecond;
+        newSecond = newSecond < 0 ? 60 + newSecond : newSecond;
         if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
             this.currentSecond = newSecond;
         }
@@ -1606,7 +1605,7 @@ class Calendar {
                 isValid = false;
             }
         }
-        else if (value.every(v => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
+        else if (value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
             if (this.isRangeSelection()) {
                 isValid = value.length > 1 && value[1] > value[0] ? true : false;
             }
@@ -1662,7 +1661,7 @@ class Calendar {
         if (this.hourFormat == '12' && !ampm) {
             throw 'Invalid Time';
         }
-        this.pm = (ampm === 'PM' || ampm === 'pm');
+        this.pm = ampm === 'PM' || ampm === 'pm';
         let time = this.parseTime(timeString);
         value.setHours(time.hour);
         value.setMinutes(time.minute);
@@ -1676,7 +1675,7 @@ class Calendar {
         if (Array.isArray(propValue)) {
             propValue = propValue[0];
         }
-        let val = this.defaultDate && this.isValidDate(this.defaultDate) && !this.value ? this.defaultDate : (propValue && this.isValidDate(propValue) ? propValue : new Date());
+        let val = this.defaultDate && this.isValidDate(this.defaultDate) && !this.value ? this.defaultDate : propValue && this.isValidDate(propValue) ? propValue : new Date();
         this.currentMonth = val.getMonth();
         this.currentYear = val.getFullYear();
         this.createMonths(this.currentMonth, this.currentYear);
@@ -1881,7 +1880,7 @@ class Calendar {
         }
         let iFormat;
         const lookAhead = (match) => {
-            const matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) === match);
+            const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
             if (matches) {
                 iFormat++;
             }
@@ -1895,14 +1894,14 @@ class Calendar {
             }
             return num;
         }, formatName = (match, value, shortNames, longNames) => {
-            return (lookAhead(match) ? longNames[value] : shortNames[value]);
+            return lookAhead(match) ? longNames[value] : shortNames[value];
         };
         let output = '';
         let literal = false;
         if (date) {
             for (iFormat = 0; iFormat < format.length; iFormat++) {
                 if (literal) {
-                    if (format.charAt(iFormat) === '\'' && !lookAhead('\'')) {
+                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
                         literal = false;
                     }
                     else {
@@ -1918,8 +1917,7 @@ class Calendar {
                             output += formatName('D', date.getDay(), this.getTranslation(TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(TranslationKeys.DAY_NAMES));
                             break;
                         case 'o':
-                            output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() -
-                                new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                            output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
                             break;
                         case 'm':
                             output += formatNumber('m', date.getMonth() + 1, 2);
@@ -1936,9 +1934,9 @@ class Calendar {
                         case '!':
                             output += date.getTime() * 10000 + this.ticksTo1970;
                             break;
-                        case '\'':
-                            if (lookAhead('\'')) {
-                                output += '\'';
+                        case "'":
+                            if (lookAhead("'")) {
+                                output += "'";
                             }
                             else {
                                 literal = true;
@@ -1964,16 +1962,16 @@ class Calendar {
             hours -= 12;
         }
         if (this.hourFormat == '12') {
-            output += hours === 0 ? 12 : (hours < 10) ? '0' + hours : hours;
+            output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
         }
         else {
-            output += (hours < 10) ? '0' + hours : hours;
+            output += hours < 10 ? '0' + hours : hours;
         }
         output += ':';
-        output += (minutes < 10) ? '0' + minutes : minutes;
+        output += minutes < 10 ? '0' + minutes : minutes;
         if (this.showSeconds) {
             output += ':';
-            output += (seconds < 10) ? '0' + seconds : seconds;
+            output += seconds < 10 ? '0' + seconds : seconds;
         }
         if (this.hourFormat == '12') {
             output += date.getHours() > 11 ? ' PM' : ' AM';
@@ -1984,13 +1982,13 @@ class Calendar {
         let tokens = value.split(':');
         let validTokenLength = this.showSeconds ? 3 : 2;
         if (tokens.length !== validTokenLength) {
-            throw "Invalid time";
+            throw 'Invalid time';
         }
         let h = parseInt(tokens[0]);
         let m = parseInt(tokens[1]);
         let s = this.showSeconds ? parseInt(tokens[2]) : null;
         if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12) || (this.showSeconds && (isNaN(s) || s > 59))) {
-            throw "Invalid time";
+            throw 'Invalid time';
         }
         else {
             if (this.hourFormat == '12') {
@@ -2007,23 +2005,22 @@ class Calendar {
     // Ported from jquery-ui datepicker parseDate
     parseDate(value, format) {
         if (format == null || value == null) {
-            throw "Invalid arguments";
+            throw 'Invalid arguments';
         }
-        value = (typeof value === "object" ? value.toString() : value + "");
-        if (value === "") {
+        value = typeof value === 'object' ? value.toString() : value + '';
+        if (value === '') {
             return null;
         }
-        let iFormat, dim, extra, iValue = 0, shortYearCutoff = (typeof this.shortYearCutoff !== "string" ? this.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(this.shortYearCutoff, 10)), year = -1, month = -1, day = -1, doy = -1, literal = false, date, lookAhead = (match) => {
-            let matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) === match);
+        let iFormat, dim, extra, iValue = 0, shortYearCutoff = typeof this.shortYearCutoff !== 'string' ? this.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(this.shortYearCutoff, 10), year = -1, month = -1, day = -1, doy = -1, literal = false, date, lookAhead = (match) => {
+            let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
             if (matches) {
                 iFormat++;
             }
             return matches;
         }, getNumber = (match) => {
-            let isDoubled = lookAhead(match), size = (match === "@" ? 14 : (match === "!" ? 20 :
-                (match === "y" && isDoubled ? 4 : (match === "o" ? 3 : 2)))), minSize = (match === "y" ? size : 1), digits = new RegExp("^\\d{" + minSize + "," + size + "}"), num = value.substring(iValue).match(digits);
+            let isDoubled = lookAhead(match), size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2, minSize = match === 'y' ? size : 1, digits = new RegExp('^\\d{' + minSize + ',' + size + '}'), num = value.substring(iValue).match(digits);
             if (!num) {
-                throw "Missing number at position " + iValue;
+                throw 'Missing number at position ' + iValue;
             }
             iValue += num[0].length;
             return parseInt(num[0], 10);
@@ -2049,11 +2046,11 @@ class Calendar {
                 return index + 1;
             }
             else {
-                throw "Unknown name at position " + iValue;
+                throw 'Unknown name at position ' + iValue;
             }
         }, checkLiteral = () => {
             if (value.charAt(iValue) !== format.charAt(iFormat)) {
-                throw "Unexpected literal at position " + iValue;
+                throw 'Unexpected literal at position ' + iValue;
             }
             iValue++;
         };
@@ -2071,32 +2068,32 @@ class Calendar {
             }
             else {
                 switch (format.charAt(iFormat)) {
-                    case "d":
-                        day = getNumber("d");
+                    case 'd':
+                        day = getNumber('d');
                         break;
-                    case "D":
-                        getName("D", this.getTranslation(TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(TranslationKeys.DAY_NAMES));
+                    case 'D':
+                        getName('D', this.getTranslation(TranslationKeys.DAY_NAMES_SHORT), this.getTranslation(TranslationKeys.DAY_NAMES));
                         break;
-                    case "o":
-                        doy = getNumber("o");
+                    case 'o':
+                        doy = getNumber('o');
                         break;
-                    case "m":
-                        month = getNumber("m");
+                    case 'm':
+                        month = getNumber('m');
                         break;
-                    case "M":
-                        month = getName("M", this.getTranslation(TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(TranslationKeys.MONTH_NAMES));
+                    case 'M':
+                        month = getName('M', this.getTranslation(TranslationKeys.MONTH_NAMES_SHORT), this.getTranslation(TranslationKeys.MONTH_NAMES));
                         break;
-                    case "y":
-                        year = getNumber("y");
+                    case 'y':
+                        year = getNumber('y');
                         break;
-                    case "@":
-                        date = new Date(getNumber("@"));
+                    case '@':
+                        date = new Date(getNumber('@'));
                         year = date.getFullYear();
                         month = date.getMonth() + 1;
                         day = date.getDate();
                         break;
-                    case "!":
-                        date = new Date((getNumber("!") - this.ticksTo1970) / 10000);
+                    case '!':
+                        date = new Date((getNumber('!') - this.ticksTo1970) / 10000);
                         year = date.getFullYear();
                         month = date.getMonth() + 1;
                         day = date.getDate();
@@ -2117,15 +2114,14 @@ class Calendar {
         if (iValue < value.length) {
             extra = value.substr(iValue);
             if (!/^\s+/.test(extra)) {
-                throw "Extra/unparsed characters found in date: " + extra;
+                throw 'Extra/unparsed characters found in date: ' + extra;
             }
         }
         if (year === -1) {
             year = new Date().getFullYear();
         }
         else if (year < 100) {
-            year += new Date().getFullYear() - new Date().getFullYear() % 100 +
-                (year <= shortYearCutoff ? 0 : -100);
+            year += new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100);
         }
         if (doy > -1) {
             month = 1;
@@ -2145,7 +2141,7 @@ class Calendar {
         }
         date = this.daylightSavingAdjust(new Date(year, month - 1, day));
         if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
-            throw "Invalid date"; // E.g. 31/02/00
+            throw 'Invalid date'; // E.g. 31/02/00
         }
         return date;
     }
@@ -2180,9 +2176,7 @@ class Calendar {
             }
             let innerHTML = '';
             if (this.responsiveOptions) {
-                let responsiveOptions = [...this.responsiveOptions]
-                    .filter(o => !!(o.breakpoint && o.numMonths))
-                    .sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
+                let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
                 for (let i = 0; i < responsiveOptions.length; i++) {
                     let { breakpoint, numMonths } = responsiveOptions[i];
                     let styles = `
@@ -2263,12 +2257,10 @@ class Calendar {
         }
     }
     isOutsideClicked(event) {
-        return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) ||
-            this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+        return !(this.el.nativeElement.isSameNode(event.target) || this.isNavIconClicked(event) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
     }
     isNavIconClicked(event) {
-        return (DomHandler.hasClass(event.target, 'p-datepicker-prev') || DomHandler.hasClass(event.target, 'p-datepicker-prev-icon')
-            || DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon'));
+        return (DomHandler.hasClass(event.target, 'p-datepicker-prev') || DomHandler.hasClass(event.target, 'p-datepicker-prev-icon') || DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon'));
     }
     onWindowResize() {
         if (this.overlayVisible && !DomHandler.isTouchDevice()) {
@@ -2304,70 +2296,115 @@ class Calendar {
 }
 Calendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Calendar, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
 Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: Calendar, selector: "p-calendar", inputs: { style: "style", styleClass: "styleClass", inputStyle: "inputStyle", inputId: "inputId", name: "name", inputStyleClass: "inputStyleClass", placeholder: "placeholder", ariaLabelledBy: "ariaLabelledBy", iconAriaLabel: "iconAriaLabel", 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", showClear: "showClear", dataType: "dataType", selectionMode: "selectionMode", maxDateCount: "maxDateCount", showButtonBar: "showButtonBar", todayButtonStyleClass: "todayButtonStyleClass", clearButtonStyleClass: "clearButtonStyleClass", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", panelStyleClass: "panelStyleClass", panelStyle: "panelStyle", keepInvalid: "keepInvalid", hideOnDateTimeSelect: "hideOnDateTimeSelect", touchUI: "touchUI", timeSeparator: "timeSeparator", focusTrap: "focusTrap", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", tabindex: "tabindex", view: "view", defaultDate: "defaultDate", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onClear: "onClear", 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", "class.p-calendar-clearable": "showClear && !disabled" }, classAttribute: "p-element p-inputwrapper" }, providers: [CALENDAR_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: 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, template: `
-        <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">
+        <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">
             <ng-template [ngIf]="!inline">
-                <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)"
-                    [readonly]="readonlyInput" (input)="onUserInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.inputmode]="touchUI ? 'off' : null"
-                    [ngClass]="'p-inputtext p-component'" autocomplete="off" [attr.aria-labelledby]="ariaLabelledBy">
-                    <i *ngIf="showClear && !disabled && value != null" class="p-calendar-clear-icon pi pi-times" (click)="clear()"></i>
-                    <button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event,inputfield)" class="p-datepicker-trigger"
-                    [disabled]="disabled" tabindex="0"></button>
+                <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)"
+                    [readonly]="readonlyInput"
+                    (input)="onUserInput($event)"
+                    [ngStyle]="inputStyle"
+                    [class]="inputStyleClass"
+                    [placeholder]="placeholder || ''"
+                    [disabled]="disabled"
+                    [attr.tabindex]="tabindex"
+                    [attr.inputmode]="touchUI ? 'off' : null"
+                    [ngClass]="'p-inputtext p-component'"
+                    autocomplete="off"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                />
+                <i *ngIf="showClear && !disabled && value != null" class="p-calendar-clear-icon pi pi-times" (click)="clear()"></i>
+                <button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event, inputfield)" class="p-datepicker-trigger" [disabled]="disabled" tabindex="0"></button>
             </ng-template>
-            <div #contentWrapper [class]="panelStyleClass" [ngStyle]="panelStyle" [ngClass]="{'p-datepicker p-component': true, 'p-datepicker-inline':inline,
-                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}"
-                [@overlayAnimation]="touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:
-                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
-                                            [@.disabled]="inline === true" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)" (click)="onOverlayClick($event)" *ngIf="inline || overlayVisible">
+            <div
+                #contentWrapper
+                [class]="panelStyleClass"
+                [ngStyle]="panelStyle"
+                [ngClass]="{
+                    'p-datepicker p-component': true,
+                    'p-datepicker-inline': inline,
+                    'p-disabled': disabled,
+                    'p-datepicker-timeonly': timeOnly,
+                    'p-datepicker-multiple-month': this.numberOfMonths > 1,
+                    'p-datepicker-monthpicker': view === 'month',
+                    'p-datepicker-touch-ui': touchUI
+                }"
+                [@overlayAnimation]="
+                    touchUI
+                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
+                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
+                "
+                [@.disabled]="inline === true"
+                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+                (@overlayAnimation.done)="onOverlayAnimationDone($event)"
+                (click)="onOverlayClick($event)"
+                *ngIf="inline || overlayVisible"
+            >
                 <ng-content select="p-header"></ng-content>
                 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <ng-container *ngIf="!timeOnly">
                     <div class="p-datepicker-group-container">
-                        <div class="p-datepicker-group" *ngFor="let month of months; let i = index;">
+                        <div class="p-datepicker-group" *ngFor="let month of months; let i = index">
                             <div class="p-datepicker-header">
                                 <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" pRipple>
                                     <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
                                 </button>
                                 <div class="p-datepicker-title">
                                     <button type="button" (click)="switchToMonthView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView === 'date'" class="p-datepicker-month p-link" [disabled]="switchViewButtonDisabled()">
-                                        {{getMonthName(month.month)}}
+                                        {{ getMonthName(month.month) }}
                                     </button>
                                     <button type="button" (click)="switchToYearView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
-                                        {{getYear(month)}}
+                                        {{ getYear(month) }}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
-                                        <ng-container *ngIf="!decadeTemplate">{{yearPickerValues()[0]}} - {{yearPickerValues()[yearPickerValues().length - 1]}}</ng-container>
-                                        <ng-container *ngTemplateOutlet="decadeTemplate; context: {$implicit: yearPickerValues}"></ng-container>
+                                        <ng-container *ngIf="!decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
                                     </span>
                                 </div>
-                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" [style.display]="numberOfMonths === 1 ? 'inline-flex' : (i === numberOfMonths -1) ? 'inline-flex' : 'none'" type="button" pRipple>
+                                <button
+                                    (keydown)="onContainerButtonKeydown($event)"
+                                    class="p-datepicker-next p-link"
+                                    (click)="onNextButtonClick($event)"
+                                    [style.display]="numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'"
+                                    type="button"
+                                    pRipple
+                                >
                                     <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
                                 </button>
                             </div>
-                            <div class="p-datepicker-calendar-container" *ngIf="currentView ==='date'">
+                            <div class="p-datepicker-calendar-container" *ngIf="currentView === 'date'">
                                 <table class="p-datepicker-calendar">
                                     <thead>
                                         <tr>
                                             <th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
-                                                <span>{{getTranslation('weekHeader')}}</span>
+                                                <span>{{ getTranslation('weekHeader') }}</span>
                                             </th>
-                                            <th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
-                                                <span>{{weekDay}}</span>
+                                            <th scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last">
+                                                <span>{{ weekDay }}</span>
                                             </th>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr *ngFor="let week of month.dates; let j = index;">
+                                        <tr *ngFor="let week of month.dates; let j = index">
                                             <td *ngIf="showWeek" class="p-datepicker-weeknumber">
                                                 <span class="p-disabled">
-                                                    {{month.weekNumbers[j]}}
+                                                    {{ month.weekNumbers[j] }}
                                                 </span>
                                             </td>
-                                            <td *ngFor="let date of week" [ngClass]="{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}">
+                                            <td *ngFor="let date of week" [ngClass]="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
                                                 <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
-                                                    <span [ngClass]="{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}"
-                                                        (click)="onDateSelect($event,date)" draggable="false" (keydown)="onDateCellKeydown($event,date,i)" pRipple>
-                                                        <ng-container *ngIf="!dateTemplate">{{date.day}}</ng-container>
-                                                        <ng-container *ngTemplateOutlet="dateTemplate; context: {$implicit: date}"></ng-container>
+                                                    <span [ngClass]="{ 'p-highlight': isSelected(date), 'p-disabled': !date.selectable }" (click)="onDateSelect($event, date)" draggable="false" (keydown)="onDateCellKeydown($event, date, i)" pRipple>
+                                                        <ng-container *ngIf="!dateTemplate">{{ date.day }}</ng-container>
+                                                        <ng-container *ngTemplateOutlet="dateTemplate; context: { $implicit: date }"></ng-container>
                                                     </span>
                                                 </ng-container>
                                             </td>
@@ -2378,55 +2415,134 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
                         </div>
                     </div>
                     <div class="p-monthpicker" *ngIf="currentView === 'month'">
-                        <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': isMonthDisabled(i)}" pRipple>
-                            {{m}}
+                        <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': isMonthDisabled(i) }"
+                            pRipple
+                        >
+                            {{ m }}
                         </span>
                     </div>
                     <div class="p-yearpicker" *ngIf="currentView === 'year'">
-                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event,y)" class="p-yearpicker-year" [ngClass]="{'p-highlight': isYearSelected(y)}" pRipple>
-                            {{y}}
+                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" class="p-yearpicker-year" [ngClass]="{ 'p-highlight': isYearSelected(y) }" pRipple>
+                            {{ y }}
                         </span>
                     </div>
                 </ng-container>
-                <div class="p-timepicker" *ngIf="(showTime||timeOnly) && currentView === 'date'">
+                <div class="p-timepicker" *ngIf="(showTime || timeOnly) && currentView === 'date'">
                     <div class="p-hour-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (keydown.space)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementHour($event)"
+                            (keydown.space)="incrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{currentHour}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (keydown.space)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementHour($event)"
+                            (keydown.space)="decrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
                     <div class="p-separator">
-                        <span>{{timeSeparator}}</span>
+                        <span>{{ timeSeparator }}</span>
                     </div>
                     <div class="p-minute-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (keydown.space)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementMinute($event)"
+                            (keydown.space)="incrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{currentMinute}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (keydown.space)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementMinute($event)"
+                            (keydown.space)="decrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
                     <div class="p-separator" *ngIf="showSeconds">
-                        <span>{{timeSeparator}}</span>
+                        <span>{{ timeSeparator }}</span>
                     </div>
                     <div class="p-second-picker" *ngIf="showSeconds">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (keydown.space)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementSecond($event)"
+                            (keydown.space)="incrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{currentSecond}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (keydown.space)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementSecond($event)"
+                            (keydown.space)="decrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
-                    <div class="p-ampm-picker" *ngIf="hourFormat=='12'">
+                    <div class="p-ampm-picker" *ngIf="hourFormat == '12'">
                         <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span>{{pm ? 'PM' : 'AM'}}</span>
+                        <span>{{ pm ? 'PM' : 'AM' }}</span>
                         <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
@@ -2446,19 +2562,11 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
                 transform: 'translate(-50%,-50%)',
                 opacity: 1
             })),
-            transition('void => visible', [
-                style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))
-            ]),
-            transition('visible => void', [
-                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
-            ]),
-            transition('void => visibleTouchUI', [
-                style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
-                animate('{{showTransitionParams}}')
-            ]),
+            transition('void => visible', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))]),
+            transition('visible => void', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))]),
+            transition('void => visibleTouchUI', [style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
             transition('visibleTouchUI => void', [
-                animate(('{{hideTransitionParams}}'), style({
+                animate('{{hideTransitionParams}}', style({
                     opacity: 0,
                     transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
                 }))
@@ -2468,70 +2576,115 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: Calendar, decorators: [{
             type: Component,
             args: [{ selector: 'p-calendar', template: `
-        <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">
+        <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">
             <ng-template [ngIf]="!inline">
-                <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)"
-                    [readonly]="readonlyInput" (input)="onUserInput($event)" [ngStyle]="inputStyle" [class]="inputStyleClass" [placeholder]="placeholder||''" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.inputmode]="touchUI ? 'off' : null"
-                    [ngClass]="'p-inputtext p-component'" autocomplete="off" [attr.aria-labelledby]="ariaLabelledBy">
-                    <i *ngIf="showClear && !disabled && value != null" class="p-calendar-clear-icon pi pi-times" (click)="clear()"></i>
-                    <button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event,inputfield)" class="p-datepicker-trigger"
-                    [disabled]="disabled" tabindex="0"></button>
+                <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)"
+                    [readonly]="readonlyInput"
+                    (input)="onUserInput($event)"
+                    [ngStyle]="inputStyle"
+                    [class]="inputStyleClass"
+                    [placeholder]="placeholder || ''"
+                    [disabled]="disabled"
+                    [attr.tabindex]="tabindex"
+                    [attr.inputmode]="touchUI ? 'off' : null"
+                    [ngClass]="'p-inputtext p-component'"
+                    autocomplete="off"
+                    [attr.aria-labelledby]="ariaLabelledBy"
+                />
+                <i *ngIf="showClear && !disabled && value != null" class="p-calendar-clear-icon pi pi-times" (click)="clear()"></i>
+                <button type="button" [attr.aria-label]="iconAriaLabel" [icon]="icon" pButton pRipple *ngIf="showIcon" (click)="onButtonClick($event, inputfield)" class="p-datepicker-trigger" [disabled]="disabled" tabindex="0"></button>
             </ng-template>
-            <div #contentWrapper [class]="panelStyleClass" [ngStyle]="panelStyle" [ngClass]="{'p-datepicker p-component': true, 'p-datepicker-inline':inline,
-                'p-disabled':disabled,'p-datepicker-timeonly':timeOnly,'p-datepicker-multiple-month': this.numberOfMonths > 1, 'p-datepicker-monthpicker': (view === 'month'), 'p-datepicker-touch-ui': touchUI}"
-                [@overlayAnimation]="touchUI ? {value: 'visibleTouchUI', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}:
-                                            {value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}"
-                                            [@.disabled]="inline === true" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)" (click)="onOverlayClick($event)" *ngIf="inline || overlayVisible">
+            <div
+                #contentWrapper
+                [class]="panelStyleClass"
+                [ngStyle]="panelStyle"
+                [ngClass]="{
+                    'p-datepicker p-component': true,
+                    'p-datepicker-inline': inline,
+                    'p-disabled': disabled,
+                    'p-datepicker-timeonly': timeOnly,
+                    'p-datepicker-multiple-month': this.numberOfMonths > 1,
+                    'p-datepicker-monthpicker': view === 'month',
+                    'p-datepicker-touch-ui': touchUI
+                }"
+                [@overlayAnimation]="
+                    touchUI
+                        ? { value: 'visibleTouchUI', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
+                        : { value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }
+                "
+                [@.disabled]="inline === true"
+                (@overlayAnimation.start)="onOverlayAnimationStart($event)"
+                (@overlayAnimation.done)="onOverlayAnimationDone($event)"
+                (click)="onOverlayClick($event)"
+                *ngIf="inline || overlayVisible"
+            >
                 <ng-content select="p-header"></ng-content>
                 <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 <ng-container *ngIf="!timeOnly">
                     <div class="p-datepicker-group-container">
-                        <div class="p-datepicker-group" *ngFor="let month of months; let i = index;">
+                        <div class="p-datepicker-group" *ngFor="let month of months; let i = index">
                             <div class="p-datepicker-header">
                                 <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" pRipple>
                                     <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
                                 </button>
                                 <div class="p-datepicker-title">
                                     <button type="button" (click)="switchToMonthView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView === 'date'" class="p-datepicker-month p-link" [disabled]="switchViewButtonDisabled()">
-                                        {{getMonthName(month.month)}}
+                                        {{ getMonthName(month.month) }}
                                     </button>
                                     <button type="button" (click)="switchToYearView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
-                                        {{getYear(month)}}
+                                        {{ getYear(month) }}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
-                                        <ng-container *ngIf="!decadeTemplate">{{yearPickerValues()[0]}} - {{yearPickerValues()[yearPickerValues().length - 1]}}</ng-container>
-                                        <ng-container *ngTemplateOutlet="decadeTemplate; context: {$implicit: yearPickerValues}"></ng-container>
+                                        <ng-container *ngIf="!decadeTemplate">{{ yearPickerValues()[0] }} - {{ yearPickerValues()[yearPickerValues().length - 1] }}</ng-container>
+                                        <ng-container *ngTemplateOutlet="decadeTemplate; context: { $implicit: yearPickerValues }"></ng-container>
                                     </span>
                                 </div>
-                                <button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" [style.display]="numberOfMonths === 1 ? 'inline-flex' : (i === numberOfMonths -1) ? 'inline-flex' : 'none'" type="button" pRipple>
+                                <button
+                                    (keydown)="onContainerButtonKeydown($event)"
+                                    class="p-datepicker-next p-link"
+                                    (click)="onNextButtonClick($event)"
+                                    [style.display]="numberOfMonths === 1 ? 'inline-flex' : i === numberOfMonths - 1 ? 'inline-flex' : 'none'"
+                                    type="button"
+                                    pRipple
+                                >
                                     <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
                                 </button>
                             </div>
-                            <div class="p-datepicker-calendar-container" *ngIf="currentView ==='date'">
+                            <div class="p-datepicker-calendar-container" *ngIf="currentView === 'date'">
                                 <table class="p-datepicker-calendar">
                                     <thead>
                                         <tr>
                                             <th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
-                                                <span>{{getTranslation('weekHeader')}}</span>
+                                                <span>{{ getTranslation('weekHeader') }}</span>
                                             </th>
-                                            <th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
-                                                <span>{{weekDay}}</span>
+                                            <th scope="col" *ngFor="let weekDay of weekDays; let begin = first; let end = last">
+                                                <span>{{ weekDay }}</span>
                                             </th>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr *ngFor="let week of month.dates; let j = index;">
+                                        <tr *ngFor="let week of month.dates; let j = index">
                                             <td *ngIf="showWeek" class="p-datepicker-weeknumber">
                                                 <span class="p-disabled">
-                                                    {{month.weekNumbers[j]}}
+                                                    {{ month.weekNumbers[j] }}
                                                 </span>
                                             </td>
-                                            <td *ngFor="let date of week" [ngClass]="{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}">
+                                            <td *ngFor="let date of week" [ngClass]="{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }">
                                                 <ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
-                                                    <span [ngClass]="{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}"
-                                                        (click)="onDateSelect($event,date)" draggable="false" (keydown)="onDateCellKeydown($event,date,i)" pRipple>
-                                                        <ng-container *ngIf="!dateTemplate">{{date.day}}</ng-container>
-                                                        <ng-container *ngTemplateOutlet="dateTemplate; context: {$implicit: date}"></ng-container>
+                                                    <span [ngClass]="{ 'p-highlight': isSelected(date), 'p-disabled': !date.selectable }" (click)="onDateSelect($event, date)" draggable="false" (keydown)="onDateCellKeydown($event, date, i)" pRipple>
+                                                        <ng-container *ngIf="!dateTemplate">{{ date.day }}</ng-container>
+                                                        <ng-container *ngTemplateOutlet="dateTemplate; context: { $implicit: date }"></ng-container>
                                                     </span>
                                                 </ng-container>
                                             </td>
@@ -2542,55 +2695,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                         </div>
                     </div>
                     <div class="p-monthpicker" *ngIf="currentView === 'month'">
-                        <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': isMonthDisabled(i)}" pRipple>
-                            {{m}}
+                        <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': isMonthDisabled(i) }"
+                            pRipple
+                        >
+                            {{ m }}
                         </span>
                     </div>
                     <div class="p-yearpicker" *ngIf="currentView === 'year'">
-                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event,y)" class="p-yearpicker-year" [ngClass]="{'p-highlight': isYearSelected(y)}" pRipple>
-                            {{y}}
+                        <span *ngFor="let y of yearPickerValues()" (click)="onYearSelect($event, y)" (keydown)="onYearCellKeydown($event, y)" class="p-yearpicker-year" [ngClass]="{ 'p-highlight': isYearSelected(y) }" pRipple>
+                            {{ y }}
                         </span>
                     </div>
                 </ng-container>
-                <div class="p-timepicker" *ngIf="(showTime||timeOnly) && currentView === 'date'">
+                <div class="p-timepicker" *ngIf="(showTime || timeOnly) && currentView === 'date'">
                     <div class="p-hour-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementHour($event)" (keydown.space)="incrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementHour($event)"
+                            (keydown.space)="incrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{currentHour}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementHour($event)" (keydown.space)="decrementHour($event)" (mousedown)="onTimePickerElementMouseDown($event, 0, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <span><ng-container *ngIf="currentHour < 10">0</ng-container>{{ currentHour }}</span>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementHour($event)"
+                            (keydown.space)="decrementHour($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 0, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
                     <div class="p-separator">
-                        <span>{{timeSeparator}}</span>
+                        <span>{{ timeSeparator }}</span>
                     </div>
                     <div class="p-minute-picker">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementMinute($event)" (keydown.space)="incrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementMinute($event)"
+                            (keydown.space)="incrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{currentMinute}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementMinute($event)" (keydown.space)="decrementMinute($event)" (mousedown)="onTimePickerElementMouseDown($event, 1, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <span><ng-container *ngIf="currentMinute < 10">0</ng-container>{{ currentMinute }}</span>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementMinute($event)"
+                            (keydown.space)="decrementMinute($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 1, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
                     <div class="p-separator" *ngIf="showSeconds">
-                        <span>{{timeSeparator}}</span>
+                        <span>{{ timeSeparator }}</span>
                     </div>
                     <div class="p-second-picker" *ngIf="showSeconds">
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="incrementSecond($event)" (keydown.space)="incrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, 1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="incrementSecond($event)"
+                            (keydown.space)="incrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, 1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{currentSecond}}</span>
-                        <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (keydown.enter)="decrementSecond($event)" (keydown.space)="decrementSecond($event)" (mousedown)="onTimePickerElementMouseDown($event, 2, -1)" (mouseup)="onTimePickerElementMouseUp($event)" (keyup.enter)="onTimePickerElementMouseUp($event)" (keyup.space)="onTimePickerElementMouseUp($event)" (mouseleave)="onTimePickerElementMouseLeave()" pRipple>
+                        <span><ng-container *ngIf="currentSecond < 10">0</ng-container>{{ currentSecond }}</span>
+                        <button
+                            class="p-link"
+                            type="button"
+                            (keydown)="onContainerButtonKeydown($event)"
+                            (keydown.enter)="decrementSecond($event)"
+                            (keydown.space)="decrementSecond($event)"
+                            (mousedown)="onTimePickerElementMouseDown($event, 2, -1)"
+                            (mouseup)="onTimePickerElementMouseUp($event)"
+                            (keyup.enter)="onTimePickerElementMouseUp($event)"
+                            (keyup.space)="onTimePickerElementMouseUp($event)"
+                            (mouseleave)="onTimePickerElementMouseLeave()"
+                            pRipple
+                        >
                             <span class="pi pi-chevron-down"></span>
                         </button>
                     </div>
-                    <div class="p-ampm-picker" *ngIf="hourFormat=='12'">
+                    <div class="p-ampm-picker" *ngIf="hourFormat == '12'">
                         <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span>{{pm ? 'PM' : 'AM'}}</span>
+                        <span>{{ pm ? 'PM' : 'AM' }}</span>
                         <button class="p-link" type="button" (keydown)="onContainerButtonKeydown($event)" (click)="toggleAMPM($event)" (keydown.enter)="toggleAMPM($event)" pRipple>
                             <span class="pi pi-chevron-down"></span>
                         </button>
@@ -2610,26 +2842,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                                 transform: 'translate(-50%,-50%)',
                                 opacity: 1
                             })),
-                            transition('void => visible', [
-                                style({ opacity: 0, transform: 'scaleY(0.8)' }),
-                                animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))
-                            ]),
-                            transition('visible => void', [
-                                animate('{{hideTransitionParams}}', style({ opacity: 0 }))
-                            ]),
-                            transition('void => visibleTouchUI', [
-                                style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }),
-                                animate('{{showTransitionParams}}')
-                            ]),
+                            transition('void => visible', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}', style({ opacity: 1, transform: '*' }))]),
+                            transition('visible => void', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))]),
+                            transition('void => visibleTouchUI', [style({ opacity: 0, transform: 'translate3d(-50%, -40%, 0) scale(0.9)' }), animate('{{showTransitionParams}}')]),
                             transition('visibleTouchUI => void', [
-                                animate(('{{hideTransitionParams}}'), style({
+                                animate('{{hideTransitionParams}}', style({
                                     opacity: 0,
                                     transform: 'translate3d(-50%, -40%, 0) scale(0.9)'
                                 }))
                             ])
                         ])
                     ], host: {
-                        'class': 'p-element p-inputwrapper',
+                        class: 'p-element p-inputwrapper',
                         '[class.p-inputwrapper-filled]': 'filled',
                         '[class.p-inputwrapper-focus]': 'focus',
                         '[class.p-calendar-clearable]': 'showClear && !disabled'