primeng 13.0.3 → 13.2.0

package/fesm2020/primeng-calendar.mjs

@@ -11,7 +11,7 @@ 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, ZIndexUtils } from 'primeng/utils';
+import { UniqueComponentId, ObjectUtils, ZIndexUtils } from 'primeng/utils';
 
 const CALENDAR_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -49,7 +49,6 @@ class Calendar {
         this.hideOnDateTimeSelect = true;
         this.timeSeparator = ":";
         this.focusTrap = true;
-        this.firstDayOfWeek = 0;
         this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
         this.hideTransitionOptions = '.1s linear';
         this.onFocus = new EventEmitter();
@@ -196,6 +195,13 @@ class Calendar {
         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.");
     }
@@ -263,7 +269,7 @@ class Calendar {
     }
     createWeekDays() {
         this.weekDays = [];
-        let dayIndex = this.firstDayOfWeek;
+        let dayIndex = this.getFirstDateOfWeek();
         let dayLabels = this.getTranslation(TranslationKeys.DAY_NAMES_MIN);
         for (let i = 0; i < 7; i++) {
             this.weekDays.push(dayLabels[dayIndex]);
@@ -451,10 +457,14 @@ class Calendar {
     }
     switchToMonthView(event) {
         this.currentView = 'month';
+        this.cd.detectChanges();
+        this.alignOverlay();
         event.preventDefault();
     }
     switchToYearView(event) {
         this.currentView = 'year';
+        this.cd.detectChanges();
+        this.alignOverlay();
         event.preventDefault();
     }
     onDateSelect(event, dateMeta) {
@@ -550,8 +560,8 @@ class Calendar {
         }
     }
     formatDateTime(date) {
-        let formattedValue = null;
-        if (date) {
+        let formattedValue = this.keepInvalid ? date : null;
+        if (this.isValidDate(date)) {
             if (this.timeOnly) {
                 formattedValue = this.formatTime(date);
             }
@@ -688,7 +698,8 @@ class Calendar {
         return { 'month': m, 'year': y };
     }
     getSundayIndex() {
-        return this.firstDayOfWeek > 0 ? 7 - this.firstDayOfWeek : 0;
+        let firstDayOfWeek = this.getFirstDateOfWeek();
+        return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
     }
     isSelected(dateMeta) {
         if (this.value) {
@@ -734,7 +745,7 @@ class Calendar {
         return false;
     }
     isDateEquals(value, dateMeta) {
-        if (value)
+        if (value && value instanceof Date)
             return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
         else
             return false;
@@ -861,6 +872,9 @@ class Calendar {
     getMonthName(index) {
         return this.config.getTranslation('monthNames')[index];
     }
+    getYear(month) {
+        return this.currentView === 'month' ? this.currentYear : month.year;
+    }
     switchViewButtonDisabled() {
         return this.numberOfMonths > 1 || this.disabled;
     }
@@ -1567,7 +1581,8 @@ class Calendar {
         }
         catch (err) {
             //invalid date
-            this.updateModel(null);
+            let value = this.keepInvalid ? val : null;
+            this.updateModel(value);
         }
         this.filled = val != null && val.length;
         this.onInput.emit(event);
@@ -1641,11 +1656,15 @@ class Calendar {
         value.setMinutes(time.minute);
         value.setSeconds(time.second);
     }
+    isValidDate(date) {
+        return date instanceof Date && ObjectUtils.isNotEmpty(date);
+    }
     updateUI() {
-        let val = this.value || this.defaultDate || new Date();
-        if (Array.isArray(val)) {
-            val = val[0];
+        let propValue = this.value;
+        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());
         this.currentMonth = val.getMonth();
         this.currentYear = val.getFullYear();
         this.createMonths(this.currentMonth, this.currentYear);
@@ -1811,7 +1830,14 @@ class Calendar {
     writeValue(value) {
         this.value = value;
         if (this.value && typeof this.value === 'string') {
-            this.value = this.parseValueFromString(this.value);
+            try {
+                this.value = this.parseValueFromString(this.value);
+            }
+            catch {
+                if (this.keepInvalid) {
+                    this.value = value;
+                }
+            }
         }
         this.updateInputfield();
         this.updateUI();
@@ -1830,6 +1856,9 @@ class Calendar {
     getDateFormat() {
         return this.dateFormat || this.getTranslation('dateFormat');
     }
+    getFirstDateOfWeek() {
+        return this._firstDayOfWeek || this.getTranslation(TranslationKeys.FIRST_DAY_OF_WEEK);
+    }
     // Ported from jquery-ui datepicker formatDate
     formatDate(date, format) {
         if (!date) {
@@ -2255,7 +2284,7 @@ class Calendar {
     }
 }
 Calendar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", 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: "12.0.0", version: "13.0.3", 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", 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", firstDayOfWeek: "firstDayOfWeek", 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", locale: "locale" }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onClose: "onClose", onSelect: "onSelect", onInput: "onInput", onTodayClick: "onTodayClick", onClearClick: "onClearClick", onMonthChange: "onMonthChange", onYearChange: "onYearChange", onClickOutside: "onClickOutside", onShow: "onShow" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focus" }, 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: `
+Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", 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", 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", 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" }, 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 #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)"
@@ -2283,7 +2312,7 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                                         {{getMonthName(month.month)}}
                                     </button>
                                     <button type="button" (click)="switchToYearView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
-                                        {{currentYear}}
+                                        {{getYear(month)}}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
                                         <ng-container *ngIf="!decadeTemplate">{{yearPickerValues()[0]}} - {{yearPickerValues()[yearPickerValues().length - 1]}}</ng-container>
@@ -2329,7 +2358,7 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                         </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':!isSelectable(1, i, this.currentYear, false)}" pRipple>
+                        <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)}" pRipple>
                             {{m}}
                         </span>
                     </div>
@@ -2339,7 +2368,7 @@ Calendar.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.
                         </span>
                     </div>
                 </ng-container>
-                <div class="p-timepicker" *ngIf="showTime||timeOnly">
+                <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>
                             <span class="pi pi-chevron-up"></span>
@@ -2446,7 +2475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                                         {{getMonthName(month.month)}}
                                     </button>
                                     <button type="button" (click)="switchToYearView($event)" (keydown)="onContainerButtonKeydown($event)" *ngIf="currentView !== 'year'" class="p-datepicker-year p-link" [disabled]="switchViewButtonDisabled()">
-                                        {{currentYear}}
+                                        {{getYear(month)}}
                                     </button>
                                     <span class="p-datepicker-decade" *ngIf="currentView === 'year'">
                                         <ng-container *ngIf="!decadeTemplate">{{yearPickerValues()[0]}} - {{yearPickerValues()[yearPickerValues().length - 1]}}</ng-container>
@@ -2492,7 +2521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", 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':!isSelectable(1, i, this.currentYear, false)}" pRipple>
+                        <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)}" pRipple>
                             {{m}}
                         </span>
                     </div>
@@ -2502,7 +2531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         </span>
                     </div>
                 </ng-container>
-                <div class="p-timepicker" *ngIf="showTime||timeOnly">
+                <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>
                             <span class="pi pi-chevron-up"></span>
@@ -2677,8 +2706,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], focusTrap: [{
                 type: Input
-            }], firstDayOfWeek: [{
-                type: Input
             }], showTransitionOptions: [{
                 type: Input
             }], hideTransitionOptions: [{
@@ -2739,6 +2766,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 type: Input
             }], numberOfMonths: [{
                 type: Input
+            }], firstDayOfWeek: [{
+                type: Input
             }], locale: [{
                 type: Input
             }] } });