primeng 16.9.7-lts → 16.9.9-lts

package/fesm2022/primeng-autofocus.mjs

@@ -1,6 +1,6 @@
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule } from '@angular/core';
+import { inject, PLATFORM_ID, ElementRef, booleanAttribute, Directive, Input, NgModule } from '@angular/core';
 import { DomHandler } from 'primeng/dom';
 import { LicenseManager } from 'primeng/api';
 
@@ -9,20 +9,39 @@ import { LicenseManager } from 'primeng/api';
  * @group Components
  */
 class AutoFocus {
-    host;
-    constructor(host) {
-        this.host = host;
-    }
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
      */
-    autofocus;
+    autofocus = false;
     focused = false;
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    host = inject(ElementRef);
+    ngAfterViewInit() {
+        LicenseManager.check();
+    }
     ngAfterContentChecked() {
+        // This sets the `attr.autofocus` which is different than the Input `autofocus` attribute.
+        if (this.autofocus === false) {
+            this.host.nativeElement.removeAttribute('autofocus');
+        }
+        else {
+            this.host.nativeElement.setAttribute('autofocus', true);
+        }
+        if (!this.focused) {
+            this.autoFocus();
+        }
+    }
+    ngAfterViewChecked() {
         if (!this.focused) {
-            if (this.autofocus) {
-                const focusableElements = DomHandler.getFocusableElements(this.host.nativeElement);
+            this.autoFocus();
+        }
+    }
+    autoFocus() {
+        if (isPlatformBrowser(this.platformId) && this.autofocus) {
+            setTimeout(() => {
+                const focusableElements = DomHandler.getFocusableElements(this.host?.nativeElement);
                 if (focusableElements.length === 0) {
                     this.host.nativeElement.focus();
                 }
@@ -30,14 +49,11 @@ class AutoFocus {
                     focusableElements[0].focus();
                 }
                 this.focused = true;
-            }
+            });
         }
     }
-    ngAfterViewInit() {
-        LicenseManager.check();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: AutoFocus, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: AutoFocus, selector: "[pAutoFocus]", inputs: { autofocus: "autofocus" }, host: { classAttribute: "p-element" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: AutoFocus, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: AutoFocus, selector: "[pAutoFocus]", inputs: { autofocus: ["autofocus", "autofocus", booleanAttribute] }, host: { classAttribute: "p-element" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: AutoFocus, decorators: [{
             type: Directive,
@@ -47,8 +63,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                         class: 'p-element'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { autofocus: [{
-                type: Input
+        }], propDecorators: { autofocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 class AutoFocusModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: AutoFocusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });

package/fesm2022/primeng-autofocus.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-autofocus.mjs","sources":["../../src/app/components/autofocus/autofocus.ts","../../src/app/components/autofocus/primeng-autofocus.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Directive, ElementRef, Input, NgModule } from '@angular/core';\nimport { DomHandler } from 'primeng/dom';\nimport { LicenseManager } from 'primeng/api';\n/**\n * AutoFocus manages focus on focusable element on load.\n * @group Components\n */\n@Directive({\n    selector: '[pAutoFocus]',\n    host: {\n        class: 'p-element'\n    }\n})\nexport class AutoFocus {\n    constructor(private host: ElementRef) {}\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input() autofocus: boolean | undefined;\n\n    focused: boolean = false;\n\n    ngAfterContentChecked() {\n        if (!this.focused) {\n            if (this.autofocus) {\n                const focusableElements = DomHandler.getFocusableElements(this.host.nativeElement);\n\n                if (focusableElements.length === 0) {\n                    this.host.nativeElement.focus();\n                }\n                if (focusableElements.length > 0) {\n                    focusableElements[0].focus();\n                }\n\n                this.focused = true;\n            }\n        }\n    }\n\n    ngAfterViewInit() {\n        LicenseManager.check();\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [AutoFocus],\n    declarations: [AutoFocus]\n})\nexport class AutoFocusModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;AAIA;;;AAGG;AACH,MAMa,SAAS,CAAA;AACE,IAAA,IAAA,CAAA;AAApB,IAAA,WAAA,CAAoB,IAAgB,EAAA;QAAhB,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAY;KAAI;AACxC;;;AAGG;AACM,IAAA,SAAS,CAAsB;IAExC,OAAO,GAAY,KAAK,CAAC;IAEzB,qBAAqB,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACf,IAAI,IAAI,CAAC,SAAS,EAAE;AAChB,gBAAA,MAAM,iBAAiB,GAAG,UAAU,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AAEnF,gBAAA,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,oBAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;AACnC,iBAAA;AACD,gBAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9B,oBAAA,iBAAiB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;AAChC,iBAAA;AAED,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;AACvB,aAAA;AACJ,SAAA;KACJ;IAED,eAAe,GAAA;QACX,cAAc,CAAC,KAAK,EAAE,CAAC;KAC1B;uGA7BQ,SAAS,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAAT,SAAS,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,WAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBANrB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,IAAI,EAAE;AACF,wBAAA,KAAK,EAAE,WAAW;AACrB,qBAAA;AACJ,iBAAA,CAAA;iGAOY,SAAS,EAAA,CAAA;sBAAjB,KAAK;;AA0BV,MAKa,eAAe,CAAA;uGAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,EArCf,YAAA,EAAA,CAAA,SAAS,CAiCR,EAAA,OAAA,EAAA,CAAA,YAAY,aAjCb,SAAS,CAAA,EAAA,CAAA,CAAA;AAqCT,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAJd,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAIb,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,SAAS,CAAC;oBACpB,YAAY,EAAE,CAAC,SAAS,CAAC;AAC5B,iBAAA,CAAA;;;AClDD;;AAEG;;;;"}
+{"version":3,"file":"primeng-autofocus.mjs","sources":["../../src/app/components/autofocus/autofocus.ts","../../src/app/components/autofocus/primeng-autofocus.ts"],"sourcesContent":["import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';\nimport { Directive, ElementRef, Input, NgModule, PLATFORM_ID, booleanAttribute, inject } from '@angular/core';\nimport { DomHandler } from 'primeng/dom';\nimport { LicenseManager } from 'primeng/api';\n/**\n * AutoFocus manages focus on focusable element on load.\n * @group Components\n */\n@Directive({\n    selector: '[pAutoFocus]',\n    host: {\n        class: 'p-element'\n    }\n})\nexport class AutoFocus {\n    /**\n     * When present, it specifies that the component should automatically get focus on load.\n     * @group Props\n     */\n    @Input({ transform: booleanAttribute }) autofocus: boolean = false;\n\n    focused: boolean = false;\n\n    platformId = inject(PLATFORM_ID);\n\n    document: Document = inject(DOCUMENT);\n\n    host: ElementRef = inject(ElementRef);\n\n    ngAfterViewInit() {\n        LicenseManager.check();\n    }\n\n    ngAfterContentChecked() {\n        // This sets the `attr.autofocus` which is different than the Input `autofocus` attribute.\n        if (this.autofocus === false) {\n            this.host.nativeElement.removeAttribute('autofocus');\n        } else {\n            this.host.nativeElement.setAttribute('autofocus', true);\n        }\n\n        if (!this.focused) {\n            this.autoFocus();\n        }\n    }\n\n    ngAfterViewChecked() {\n        if (!this.focused) {\n            this.autoFocus();\n        }\n    }\n\n    autoFocus() {\n        if (isPlatformBrowser(this.platformId) && this.autofocus) {\n            setTimeout(() => {\n                const focusableElements = DomHandler.getFocusableElements(this.host?.nativeElement);\n\n                if (focusableElements.length === 0) {\n                    this.host.nativeElement.focus();\n                }\n                if (focusableElements.length > 0) {\n                    focusableElements[0].focus();\n                }\n\n                this.focused = true;\n            });\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule],\n    exports: [AutoFocus],\n    declarations: [AutoFocus]\n})\nexport class AutoFocusModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/primeng-calendar.mjs

@@ -603,6 +603,7 @@ class Calendar {
     _view = 'date';
     preventFocus;
     _defaultDate;
+    _focusKey = null;
     window;
     get locale() {
         return this._locale;
@@ -1016,6 +1017,12 @@ class Calendar {
         }
         return formattedValue;
     }
+    formatDateMetaToDate(dateMeta) {
+        return new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+    }
+    formatDateKey(date) {
+        return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;
+    }
     setCurrentHourPM(hours) {
         if (this.hourFormat == '12') {
             this.pm = hours > 11;
@@ -1036,7 +1043,7 @@ class Calendar {
         this.alignOverlay();
     }
     selectDate(dateMeta) {
-        let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+        let date = this.formatDateMetaToDate(dateMeta);
         if (this.showTime) {
             if (this.hourFormat == '12') {
                 if (this.currentHour === 12)
@@ -1212,7 +1219,7 @@ class Calendar {
     isDateBetween(start, end, dateMeta) {
         let between = false;
         if (ObjectUtils.isDate(start) && ObjectUtils.isDate(end)) {
-            let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+            let date = this.formatDateMetaToDate(dateMeta);
             return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
         }
         return between;
@@ -1395,9 +1402,10 @@ class Calendar {
             }
         }
     }
-    onDateCellKeydown(event, date, groupIndex) {
+    onDateCellKeydown(event, dateMeta, groupIndex) {
         const cellContent = event.currentTarget;
         const cell = cellContent.parentElement;
+        const currentDate = this.formatDateMetaToDate(dateMeta);
         switch (event.which) {
             //down arrow
             case 40: {
@@ -1489,7 +1497,7 @@ class Calendar {
             //space
             case 13:
             case 32: {
-                this.onDateSelect(event, date);
+                this.onDateSelect(event, dateMeta);
                 event.preventDefault();
                 break;
             }
@@ -1507,6 +1515,48 @@ class Calendar {
                 }
                 break;
             }
+            // page up
+            case 33: {
+                cellContent.tabIndex = '-1';
+                const dateToFocus = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, currentDate.getDate());
+                const focusKey = this.formatDateKey(dateToFocus);
+                this.navigateToMonth(true, groupIndex, `span[data-date='${focusKey}']:not(.p-disabled):not(.p-ink)`);
+                event.preventDefault();
+                break;
+            }
+            // page down
+            case 34: {
+                cellContent.tabIndex = '-1';
+                const dateToFocus = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, currentDate.getDate());
+                const focusKey = this.formatDateKey(dateToFocus);
+                this.navigateToMonth(false, groupIndex, `span[data-date='${focusKey}']:not(.p-disabled):not(.p-ink)`);
+                event.preventDefault();
+                break;
+            }
+            //home
+            case 36:
+                cellContent.tabIndex = '-1';
+                const firstDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+                const firstDayDateKey = this.formatDateKey(firstDayDate);
+                const firstDayCell = DomHandler.findSingle(cellContent.offsetParent, `span[data-date='${firstDayDateKey}']:not(.p-disabled):not(.p-ink)`);
+                if (firstDayCell) {
+                    firstDayCell.tabIndex = '0';
+                    firstDayCell.focus();
+                }
+                event.preventDefault();
+                break;
+            //end
+            case 35:
+                cellContent.tabIndex = '-1';
+                const lastDayDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+                const lastDayDateKey = this.formatDateKey(lastDayDate);
+                const lastDayCell = DomHandler.findSingle(cellContent.offsetParent, `span[data-date='${lastDayDateKey}']:not(.p-disabled):not(.p-ink)`);
+                if (lastDayDate) {
+                    lastDayCell.tabIndex = '0';
+                    lastDayCell.focus();
+                }
+                event.preventDefault();
+                break;
             default:
                 //no op
                 break;
@@ -1658,30 +1708,46 @@ class Calendar {
                 break;
         }
     }
-    navigateToMonth(prev, groupIndex) {
+    navigateToMonth(prev, groupIndex, focusKey) {
         if (prev) {
             if (this.numberOfMonths === 1 || groupIndex === 0) {
                 this.navigationState = { backward: true };
+                this._focusKey = focusKey;
                 this.navBackward(event);
             }
             else {
                 let prevMonthContainer = this.contentViewChild.nativeElement.children[groupIndex - 1];
-                let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
-                let focusCell = cells[cells.length - 1];
-                focusCell.tabIndex = '0';
-                focusCell.focus();
+                if (focusKey) {
+                    const firstDayCell = DomHandler.findSingle(prevMonthContainer, focusKey);
+                    firstDayCell.tabIndex = '0';
+                    firstDayCell.focus();
+                }
+                else {
+                    let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                    let focusCell = cells[cells.length - 1];
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
             }
         }
         else {
             if (this.numberOfMonths === 1 || groupIndex === this.numberOfMonths - 1) {
                 this.navigationState = { backward: false };
+                this._focusKey = focusKey;
                 this.navForward(event);
             }
             else {
                 let nextMonthContainer = this.contentViewChild.nativeElement.children[groupIndex + 1];
-                let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
-                focusCell.tabIndex = '0';
-                focusCell.focus();
+                if (focusKey) {
+                    const firstDayCell = DomHandler.findSingle(nextMonthContainer, focusKey);
+                    firstDayCell.tabIndex = '0';
+                    firstDayCell.focus();
+                }
+                else {
+                    let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
             }
         }
     }
@@ -1705,7 +1771,7 @@ class Calendar {
                         cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
                     }
                     else {
-                        cells = DomHandler.find(this.contentViewChild.nativeElement, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                        cells = DomHandler.find(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
                     }
                     if (cells && cells.length > 0) {
                         cell = cells[cells.length - 1];
@@ -1719,7 +1785,7 @@ class Calendar {
                         cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-yearpicker .p-yearpicker-year:not(.p-disabled)');
                     }
                     else {
-                        cell = DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
+                        cell = DomHandler.findSingle(this.contentViewChild.nativeElement, this._focusKey || '.p-datepicker-calendar td span:not(.p-disabled):not(.p-ink)');
                     }
                 }
                 if (cell) {
@@ -1728,6 +1794,7 @@ class Calendar {
                 }
             }
             this.navigationState = null;
+            this._focusKey = null;
         }
         else {
             this.initFocusableCell();
@@ -2947,6 +3014,7 @@ class Calendar {
                                                         [ngClass]="{ 'p-highlight': isSelected(date) && date.selectable, 'p-disabled': !date.selectable }"
                                                         (click)="onDateSelect($event, date)"
                                                         draggable="false"
+                                                        [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
                                                         (keydown)="onDateCellKeydown($event, date, i)"
                                                         pRipple
                                                     >
@@ -3325,6 +3393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                                                         [ngClass]="{ 'p-highlight': isSelected(date) && date.selectable, 'p-disabled': !date.selectable }"
                                                         (click)="onDateSelect($event, date)"
                                                         draggable="false"
+                                                        [attr.data-date]="formatDateKey(formatDateMetaToDate(date))"
                                                         (keydown)="onDateCellKeydown($event, date, i)"
                                                         pRipple
                                                     >