primeng 16.0.0-rc.1 → 16.0.0

package/fesm2022/primeng-calendar.mjs

@@ -24,6 +24,10 @@ const CALENDAR_VALUE_ACCESSOR = {
     useExisting: forwardRef(() => Calendar),
     multi: true
 };
+/**
+ * Calendar also known as DatePicker, is a form component to work with dates.
+ * @group Components
+ */
 class Calendar {
     document;
     el;
@@ -32,70 +36,487 @@ class Calendar {
     zone;
     config;
     overlayService;
+    /**
+     * Inline style of the component.
+     * @group Props
+     */
     style;
+    /**
+     * Style class of the component.
+     * @group Props
+     */
     styleClass;
+    /**
+     * Inline style of the input field.
+     * @group Props
+     */
     inputStyle;
+    /**
+     * Identifier of the focus input to match a label defined for the component.
+     * @group Props
+     */
     inputId;
+    /**
+     * Name of the input element.
+     * @group Props
+     */
     name;
+    /**
+     * Style class of the input field.
+     * @group Props
+     */
     inputStyleClass;
+    /**
+     * Placeholder text for the input.
+     * @group Props
+     */
     placeholder;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * @group Props
+     */
     ariaLabelledBy;
+    /**
+     * Defines a string that labels the icon button for accessibility.
+     * @group Props
+     */
     iconAriaLabel;
+    /**
+     * When specified, disables the component.
+     * @group Props
+     */
     disabled;
+    /**
+     * Format of the date which can also be defined at locale settings.
+     * @group Props
+     */
     dateFormat;
+    /**
+     * Separator for multiple selection mode.
+     * @group Props
+     */
     multipleSeparator = ',';
+    /**
+     * Separator for joining start and end dates on range selection mode.
+     * @group Props
+     */
     rangeSeparator = '-';
+    /**
+     * When enabled, displays the calendar as inline. Default is false for popup mode.
+     * @group Props
+     */
     inline = false;
+    /**
+     * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
+     * @group Props
+     */
     showOtherMonths = true;
+    /**
+     * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
+     * @group Props
+     */
     selectOtherMonths;
+    /**
+     * When enabled, displays a button with icon next to input.
+     * @group Props
+     */
     showIcon;
+    /**
+     * Icon of the calendar button.
+     * @group Props
+     */
     icon;
+    /**
+     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having#mydiv as variable name).
+     * @group Props
+     */
     appendTo;
+    /**
+     * When specified, prevents entering the date manually with keyboard.
+     * @group Props
+     */
     readonlyInput;
+    /**
+     * The cutoff year for determining the century for a date.
+     * @group Props
+     */
     shortYearCutoff = '+10';
+    /**
+     * Whether the month should be rendered as a dropdown instead of text.
+     * @group Props
+     * @deprecated Navigator is always on.
+     */
     monthNavigator;
+    /**
+     * Whether the year should be rendered as a dropdown instead of text.
+     * @group Props
+     * @deprecated  Navigator is always on.
+     */
     yearNavigator;
+    /**
+     * Specifies 12 or 24 hour format.
+     * @group Props
+     */
     hourFormat = '24';
+    /**
+     * Whether to display timepicker only.
+     * @group Props
+     */
     timeOnly;
+    /**
+     * Hours to change per step.
+     * @group Props
+     */
     stepHour = 1;
+    /**
+     * Minutes to change per step.
+     * @group Props
+     */
     stepMinute = 1;
+    /**
+     * Seconds to change per step.
+     * @group Props
+     */
     stepSecond = 1;
+    /**
+     * Whether to show the seconds in time picker.
+     * @group Props
+     */
     showSeconds = false;
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form.
+     * @group Props
+     */
     required;
+    /**
+     * When disabled, datepicker will not be visible with input focus.
+     * @group Props
+     */
     showOnFocus = true;
+    /**
+     * When enabled, calendar will show week numbers.
+     * @group Props
+     */
     showWeek = false;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @group Props
+     */
     showClear = false;
+    /**
+     * Type of the value to write back to ngModel, default is date and alternative is string.
+     * @group Props
+     */
     dataType = 'date';
+    /**
+     * Defines the quantity of the selection, valid values are "single", "multiple" and "range".
+     * @group Props
+     */
     selectionMode = 'single';
+    /**
+     * Maximum number of selectable dates in multiple mode.
+     * @group Props
+     */
     maxDateCount;
+    /**
+     * Whether to display today and clear buttons at the footer
+     * @group Props
+     */
     showButtonBar;
+    /**
+     * Style class of the today button.
+     * @group Props
+     */
     todayButtonStyleClass = 'p-button-text';
+    /**
+     * Style class of the clear button.
+     * @group Props
+     */
     clearButtonStyleClass = 'p-button-text';
+    /**
+     * Whether to automatically manage layering.
+     * @group Props
+     */
     autoZIndex = true;
+    /**
+     * Base zIndex value to use in layering.
+     * @group Props
+     */
     baseZIndex = 0;
+    /**
+     * Style class of the datetimepicker container element.
+     * @group Props
+     */
     panelStyleClass;
+    /**
+     * Inline style of the datetimepicker container element.
+     * @group Props
+     */
     panelStyle;
+    /**
+     * Keep invalid value when input blur.
+     * @group Props
+     */
     keepInvalid = false;
+    /**
+     * Whether to hide the overlay on date selection.
+     * @group Props
+     */
     hideOnDateTimeSelect = true;
+    /**
+     * When enabled, calendar overlay is displayed as optimized for touch devices.
+     * @group Props
+     */
     touchUI;
+    /**
+     * Separator of time selector.
+     * @group Props
+     */
     timeSeparator = ':';
+    /**
+     * When enabled, can only focus on elements inside the calendar.
+     * @group Props
+     */
     focusTrap = true;
+    /**
+     * Transition options of the show animation.
+     * @group Props
+     */
     showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
+    /**
+     * Transition options of the hide animation.
+     * @group Props
+     */
     hideTransitionOptions = '.1s linear';
+    /**
+     * Index of the element in tabbing order.
+     * @group Props
+     */
+    tabindex;
+    /**
+     * The minimum selectable date.
+     * @group Props
+     */
+    get minDate() {
+        return this._minDate;
+    }
+    set minDate(date) {
+        this._minDate = date;
+        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    /**
+     * The maximum selectable date.
+     * @group Props
+     */
+    get maxDate() {
+        return this._maxDate;
+    }
+    set maxDate(date) {
+        this._maxDate = date;
+        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    /**
+     * Array with dates that should be disabled (not selectable).
+     * @group Props
+     */
+    get disabledDates() {
+        return this._disabledDates;
+    }
+    set disabledDates(disabledDates) {
+        this._disabledDates = disabledDates;
+        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    /**
+     * Array with weekday numbers that should be disabled (not selectable).
+     * @group Props
+     */
+    get disabledDays() {
+        return this._disabledDays;
+    }
+    set disabledDays(disabledDays) {
+        this._disabledDays = disabledDays;
+        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    /**
+     * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
+     * @group Props
+     * @deprecated Years are based on decades by default.
+     */
+    get yearRange() {
+        return this._yearRange;
+    }
+    set yearRange(yearRange) {
+        this._yearRange = yearRange;
+        if (yearRange) {
+            const years = yearRange.split(':');
+            const yearStart = parseInt(years[0]);
+            const yearEnd = parseInt(years[1]);
+            this.populateYearOptions(yearStart, yearEnd);
+        }
+    }
+    /**
+     * Whether to display timepicker.
+     * @group Props
+     */
+    get showTime() {
+        return this._showTime;
+    }
+    set showTime(showTime) {
+        this._showTime = showTime;
+        if (this.currentHour === undefined) {
+            this.initTime(this.value || new Date());
+        }
+        this.updateInputfield();
+    }
+    /**
+     * An array of options for responsive design.
+     * @group Props
+     */
+    get responsiveOptions() {
+        return this._responsiveOptions;
+    }
+    set responsiveOptions(responsiveOptions) {
+        this._responsiveOptions = responsiveOptions;
+        this.destroyResponsiveStyleElement();
+        this.createResponsiveStyle();
+    }
+    /**
+     * Number of months to display.
+     * @group Props
+     */
+    get numberOfMonths() {
+        return this._numberOfMonths;
+    }
+    set numberOfMonths(numberOfMonths) {
+        this._numberOfMonths = numberOfMonths;
+        this.destroyResponsiveStyleElement();
+        this.createResponsiveStyle();
+    }
+    /**
+     * Defines the first of the week for various date calculations.
+     * @group Props
+     */
+    get firstDayOfWeek() {
+        return this._firstDayOfWeek;
+    }
+    set firstDayOfWeek(firstDayOfWeek) {
+        this._firstDayOfWeek = firstDayOfWeek;
+        this.createWeekDays();
+    }
+    /**
+     * Option to set calendar locale.
+     * @group Props
+     * @deprecated Locale property has no effect, use new i18n API instead.
+     */
+    set locale(newLocale) {
+        console.warn('Locale property has no effect, use new i18n API instead.');
+    }
+    /**
+     * Type of view to display, valid values are "date" for datepicker and "month" for month picker.
+     * @group Props
+     */
+    get view() {
+        return this._view;
+    }
+    set view(view) {
+        this._view = view;
+        this.currentView = this._view;
+    }
+    /**
+     * Set the date to highlight on first opening if the field is blank.
+     * @group Props
+     */
+    get defaultDate() {
+        return this._defaultDate;
+    }
+    set defaultDate(defaultDate) {
+        this._defaultDate = defaultDate;
+        if (this.initialized) {
+            const date = defaultDate || new Date();
+            this.currentMonth = date.getMonth();
+            this.currentYear = date.getFullYear();
+            this.initTime(date);
+            this.createMonths(this.currentMonth, this.currentYear);
+        }
+    }
+    /**
+     * Callback to invoke on focus of input field.
+     * @param {Event} event - browser event.
+     * @group Emits
+     */
     onFocus = new EventEmitter();
+    /**
+     * Callback to invoke on blur of input field.
+     * @param {Event} event - browser event.
+     * @group Emits
+     */
     onBlur = new EventEmitter();
+    /**
+     * Callback to invoke when date panel closed.
+     * @param {Event} event - Mouse event
+     * @group Emits
+     */
     onClose = new EventEmitter();
+    /**
+     * Callback to invoke on date select.
+     * @param {Date} date - date value.
+     * @group Emits
+     */
     onSelect = new EventEmitter();
+    /**
+     * Callback to invoke when input field cleared.
+     * @group Emits
+     */
     onClear = new EventEmitter();
+    /**
+     * Callback to invoke when input field is being typed.
+     * @param {Event} event - browser event
+     * @group Emits
+     */
     onInput = new EventEmitter();
+    /**
+     * Callback to invoke when today button is clicked.
+     * @param {Date} date - today as a date instance.
+     * @group Emits
+     */
     onTodayClick = new EventEmitter();
+    /**
+     * Callback to invoke when clear button is clicked.
+     * @param {Event} event - browser event.
+     * @group Emits
+     */
     onClearClick = new EventEmitter();
+    /**
+     * Callback to invoke when a month is changed using the navigators.
+     * @param {CalendarMonthChangeEvent} event - custom month change event.
+     * @group Emits
+     */
     onMonthChange = new EventEmitter();
+    /**
+     * Callback to invoke when a year is changed using the navigators.
+     * @param {CalendarYearChangeEvent} event - custom year change event.
+     * @group Emits
+     */
     onYearChange = new EventEmitter();
+    /**
+     * Callback to invoke when clicked outside of the date panel.
+     * @group Emits
+     */
     onClickOutside = new EventEmitter();
+    /**
+     * Callback to invoke when datepicker panel is shown.
+     * @group Emits
+     */
     onShow = new EventEmitter();
     templates;
-    tabindex;
     containerViewChild;
     inputfieldViewChild;
     set content(content) {
@@ -175,115 +596,11 @@ class Calendar {
     _firstDayOfWeek;
     _view = 'date';
     preventFocus;
-    get view() {
-        return this._view;
-    }
-    set view(view) {
-        this._view = view;
-        this.currentView = this._view;
-    }
-    get defaultDate() {
-        return this._defaultDate;
-    }
-    set defaultDate(defaultDate) {
-        this._defaultDate = defaultDate;
-        if (this.initialized) {
-            const date = defaultDate || new Date();
-            this.currentMonth = date.getMonth();
-            this.currentYear = date.getFullYear();
-            this.initTime(date);
-            this.createMonths(this.currentMonth, this.currentYear);
-        }
-    }
     _defaultDate;
-    get minDate() {
-        return this._minDate;
-    }
-    set minDate(date) {
-        this._minDate = date;
-        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
-            this.createMonths(this.currentMonth, this.currentYear);
-        }
-    }
-    get maxDate() {
-        return this._maxDate;
-    }
-    set maxDate(date) {
-        this._maxDate = date;
-        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
-            this.createMonths(this.currentMonth, this.currentYear);
-        }
-    }
-    get disabledDates() {
-        return this._disabledDates;
-    }
-    set disabledDates(disabledDates) {
-        this._disabledDates = disabledDates;
-        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
-            this.createMonths(this.currentMonth, this.currentYear);
-        }
-    }
-    get disabledDays() {
-        return this._disabledDays;
-    }
-    set disabledDays(disabledDays) {
-        this._disabledDays = disabledDays;
-        if (this.currentMonth != undefined && this.currentMonth != null && this.currentYear) {
-            this.createMonths(this.currentMonth, this.currentYear);
-        }
-    }
-    get yearRange() {
-        return this._yearRange;
-    }
-    set yearRange(yearRange) {
-        this._yearRange = yearRange;
-        if (yearRange) {
-            const years = yearRange.split(':');
-            const yearStart = parseInt(years[0]);
-            const yearEnd = parseInt(years[1]);
-            this.populateYearOptions(yearStart, yearEnd);
-        }
-    }
-    get showTime() {
-        return this._showTime;
-    }
-    set showTime(showTime) {
-        this._showTime = showTime;
-        if (this.currentHour === undefined) {
-            this.initTime(this.value || new Date());
-        }
-        this.updateInputfield();
-    }
+    window;
     get locale() {
         return this._locale;
     }
-    get responsiveOptions() {
-        return this._responsiveOptions;
-    }
-    set responsiveOptions(responsiveOptions) {
-        this._responsiveOptions = responsiveOptions;
-        this.destroyResponsiveStyleElement();
-        this.createResponsiveStyle();
-    }
-    get numberOfMonths() {
-        return this._numberOfMonths;
-    }
-    set numberOfMonths(numberOfMonths) {
-        this._numberOfMonths = numberOfMonths;
-        this.destroyResponsiveStyleElement();
-        this.createResponsiveStyle();
-    }
-    get firstDayOfWeek() {
-        return this._firstDayOfWeek;
-    }
-    set firstDayOfWeek(firstDayOfWeek) {
-        this._firstDayOfWeek = firstDayOfWeek;
-        this.createWeekDays();
-    }
-    set locale(newLocale) {
-        console.warn('Locale property has no effect, use new i18n API instead.');
-    }
-    window;
     constructor(document, el, renderer, cd, zone, config, overlayService) {
         this.document = document;
         this.el = el;
@@ -361,7 +678,7 @@ class Calendar {
             if (!this.disabled) {
                 this.initFocusableCell();
                 if (this.numberOfMonths === 1) {
-                    this.contentViewChild.nativeElement.style.width = DomHandler.getOuterWidth(this.containerViewChild.nativeElement) + 'px';
+                    this.contentViewChild.nativeElement.style.width = DomHandler.getOuterWidth(this.containerViewChild?.nativeElement) + 'px';
                 }
             }
         }
@@ -547,9 +864,10 @@ class Calendar {
     }
     decrementYear() {
         this.currentYear--;
-        if (this.yearNavigator && this.currentYear < this.yearOptions[0]) {
-            let difference = this.yearOptions[this.yearOptions.length - 1] - this.yearOptions[0];
-            this.populateYearOptions(this.yearOptions[0] - difference, this.yearOptions[this.yearOptions.length - 1] - difference);
+        let _yearOptions = this.yearOptions;
+        if (this.yearNavigator && this.currentYear < _yearOptions[0]) {
+            let difference = _yearOptions[_yearOptions.length - 1] - _yearOptions[0];
+            this.populateYearOptions(_yearOptions[0] - difference, _yearOptions[_yearOptions.length - 1] - difference);
         }
     }
     decrementDecade() {
@@ -560,9 +878,10 @@ class Calendar {
     }
     incrementYear() {
         this.currentYear++;
-        if (this.yearNavigator && this.currentYear > this.yearOptions[this.yearOptions.length - 1]) {
-            let difference = this.yearOptions[this.yearOptions.length - 1] - this.yearOptions[0];
-            this.populateYearOptions(this.yearOptions[0] + difference, this.yearOptions[this.yearOptions.length - 1] + difference);
+        let _yearOptions = this.yearOptions;
+        if (this.yearNavigator && this.currentYear > _yearOptions[_yearOptions.length - 1]) {
+            let difference = _yearOptions[_yearOptions.length - 1] - _yearOptions[0];
+            this.populateYearOptions(_yearOptions[0] + difference, _yearOptions[_yearOptions.length - 1] + difference);
         }
     }
     switchToMonthView(event) {
@@ -1489,6 +1808,7 @@ class Calendar {
         this.createMonths(this.currentMonth, this.currentYear);
     }
     convertTo24Hour = function (hours, pm) {
+        //@ts-ignore
         if (this.hourFormat == '12') {
             if (hours === 12) {
                 return pm ? 12 : 0;
@@ -1723,7 +2043,7 @@ class Calendar {
             let value = this.keepInvalid ? val : null;
             this.updateModel(value);
         }
-        this.filled = val != null && val.length;
+        this.filled = (val != null && val.length);
         this.onInput.emit(event);
     }
     isValidSelection(value) {
@@ -1834,7 +2154,7 @@ class Calendar {
         if (!this.inline) {
             if (!this.overlayVisible) {
                 this.showOverlay();
-                this.inputfieldViewChild.nativeElement.focus();
+                this.inputfieldViewChild?.nativeElement.focus();
             }
             else {
                 this.hideOverlay();
@@ -1847,7 +2167,7 @@ class Calendar {
             case 'visibleTouchUI':
                 if (!this.inline) {
                     this.overlay = event.element;
-                    this.overlay.setAttribute(this.attributeSelector, '');
+                    this.overlay?.setAttribute(this.attributeSelector, '');
                     this.appendOverlay();
                     this.updateFocus();
                     if (this.autoZIndex) {
@@ -1904,15 +2224,15 @@ class Calendar {
             if (this.appendTo) {
                 if (this.view === 'date') {
                     this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
-                    this.overlay.style.minWidth = DomHandler.getOuterWidth(this.inputfieldViewChild.nativeElement) + 'px';
+                    this.overlay.style.minWidth = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
                 }
                 else {
-                    this.overlay.style.width = DomHandler.getOuterWidth(this.inputfieldViewChild.nativeElement) + 'px';
+                    this.overlay.style.width = DomHandler.getOuterWidth(this.inputfieldViewChild?.nativeElement) + 'px';
                 }
-                DomHandler.absolutePosition(this.overlay, this.inputfieldViewChild.nativeElement);
+                DomHandler.absolutePosition(this.overlay, this.inputfieldViewChild?.nativeElement);
             }
             else {
-                DomHandler.relativePosition(this.overlay, this.inputfieldViewChild.nativeElement);
+                DomHandler.relativePosition(this.overlay, this.inputfieldViewChild?.nativeElement);
             }
         }
     }
@@ -2282,7 +2602,7 @@ class Calendar {
         return date;
     }
     updateFilledState() {
-        this.filled = this.inputFieldValue && this.inputFieldValue != '';
+        this.filled = (this.inputFieldValue && this.inputFieldValue != '');
     }
     onTodayButtonClick(event) {
         let date = new Date();
@@ -2371,7 +2691,7 @@ class Calendar {
     }
     bindScrollListener() {
         if (!this.scrollHandler) {
-            this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement, () => {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerViewChild?.nativeElement, () => {
                 if (this.overlayVisible) {
                     this.hideOverlay();
                 }
@@ -2422,8 +2742,8 @@ class Calendar {
         this.restoreOverlayAppend();
         this.onOverlayHide();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Calendar, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.PrimeNGConfig }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", 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", minDate: "minDate", maxDate: "maxDate", disabledDates: "disabledDates", disabledDays: "disabledDays", yearRange: "yearRange", showTime: "showTime", responsiveOptions: "responsiveOptions", numberOfMonths: "numberOfMonths", firstDayOfWeek: "firstDayOfWeek", locale: "locale", view: "view", defaultDate: "defaultDate" }, 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">
             <ng-template [ngIf]="!inline">
                 <input
@@ -2727,7 +3047,7 @@ class Calendar {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: Calendar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", 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">
@@ -3140,6 +3460,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }], hideTransitionOptions: [{
                 type: Input
+            }], tabindex: [{
+                type: Input
+            }], minDate: [{
+                type: Input
+            }], maxDate: [{
+                type: Input
+            }], disabledDates: [{
+                type: Input
+            }], disabledDays: [{
+                type: Input
+            }], yearRange: [{
+                type: Input
+            }], showTime: [{
+                type: Input
+            }], responsiveOptions: [{
+                type: Input
+            }], numberOfMonths: [{
+                type: Input
+            }], firstDayOfWeek: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], view: [{
+                type: Input
+            }], defaultDate: [{
+                type: Input
             }], onFocus: [{
                 type: Output
             }], onBlur: [{
@@ -3167,8 +3513,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
-            }], tabindex: [{
-                type: Input
             }], containerViewChild: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
@@ -3178,37 +3522,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }], content: [{
                 type: ViewChild,
                 args: ['contentWrapper', { static: false }]
-            }], view: [{
-                type: Input
-            }], defaultDate: [{
-                type: Input
-            }], minDate: [{
-                type: Input
-            }], maxDate: [{
-                type: Input
-            }], disabledDates: [{
-                type: Input
-            }], disabledDays: [{
-                type: Input
-            }], yearRange: [{
-                type: Input
-            }], showTime: [{
-                type: Input
-            }], responsiveOptions: [{
-                type: Input
-            }], numberOfMonths: [{
-                type: Input
-            }], firstDayOfWeek: [{
-                type: Input
-            }], locale: [{
-                type: Input
             }] } });
 class CalendarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: CalendarModule, declarations: [Calendar], imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon], exports: [Calendar, ButtonModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CalendarModule, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, ButtonModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, declarations: [Calendar], imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon], exports: [Calendar, ButtonModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon, ButtonModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: CalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ButtonModule, SharedModule, RippleModule, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, TimesIcon, CalendarIcon],