primeng 17.12.0 → 17.14.0

package/fesm2022/primeng-dynamicdialog.mjs

@@ -5,7 +5,9 @@ import { animation, style, animate, trigger, transition, useAnimation } from '@a
 import * as i4 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i3 from 'primeng/api';
-import { SharedModule } from 'primeng/api';
+import { TranslationKeys, SharedModule } from 'primeng/api';
+import * as i5 from 'primeng/focustrap';
+import { FocusTrapModule } from 'primeng/focustrap';
 import { TimesIcon } from 'primeng/icons/times';
 import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize';
 import { WindowMinimizeIcon } from 'primeng/icons/windowminimize';
@@ -75,6 +77,11 @@ class DynamicDialogConfig {
      * @group Props
      */
     focusOnShow = true;
+    /**
+     * When enabled, can only focus on elements inside the dialog.
+     * @group Props
+     */
+    focusTrap = true;
     /**
      * Base zIndex value to use in layering.
      * @group Props
@@ -317,6 +324,12 @@ class DynamicDialogRef {
      * @group Events
      */
     onMaximize = this._onMaximize.asObservable();
+    /**
+     * Event triggered on child component load.
+     * @param {*} value - Chi.
+     * @group Events
+     */
+    onChildComponentLoaded = new Subject();
 }
 
 const showAnimation = animation([style({ transform: '{{transform}}', opacity: 0 }), animate('{{transition}}', style({ transform: 'none', opacity: 1 }))]);
@@ -347,6 +360,7 @@ class DynamicDialogComponent {
     insertionPoint;
     maskViewChild;
     contentViewChild;
+    footerViewChild;
     headerViewChild;
     childComponentType;
     container;
@@ -383,6 +397,9 @@ class DynamicDialogComponent {
     get position() {
         return this.config.position;
     }
+    get closeAriaLabel() {
+        return this.primeNGConfig.getTranslation(TranslationKeys.ARIA)['close'];
+    }
     set style(value) {
         if (value) {
             this._style = { ...value };
@@ -395,6 +412,14 @@ class DynamicDialogComponent {
             return domElements.pop();
         }
     }
+    get parentContent() {
+        const domElements = Array.from(this.document.getElementsByClassName('p-dialog'));
+        if (domElements.length > 0) {
+            const contentElements = domElements[domElements.length - 1].querySelector('.p-dialog-content');
+            if (contentElements)
+                return Array.isArray(contentElements) ? contentElements[0] : contentElements;
+        }
+    }
     get header() {
         return this.config.header;
     }
@@ -476,6 +501,7 @@ class DynamicDialogComponent {
         let viewContainerRef = this.insertionPoint?.viewContainerRef;
         viewContainerRef?.clear();
         this.componentRef = viewContainerRef?.createComponent(componentType);
+        this.dialogRef.onChildComponentLoaded.next(this.componentRef.instance);
     }
     moveOnTop() {
         if (this.config.autoZIndex !== false) {
@@ -497,7 +523,7 @@ class DynamicDialogComponent {
                 if (this.config.modal !== false) {
                     this.enableModality();
                 }
-                if (this.config.focusOnShow === true) {
+                if (this.config.focusOnShow !== false) {
                     this.focus();
                 }
                 break;
@@ -510,6 +536,9 @@ class DynamicDialogComponent {
     }
     onAnimationEnd(event) {
         if (event.toState === 'void') {
+            if (this.parentContent) {
+                this.focus(this.parentContent);
+            }
             this.onContainerDestroy();
             this.dialogRef.destroy();
         }
@@ -558,47 +587,24 @@ class DynamicDialogComponent {
             }
         }
     }
-    onKeydown(event) {
-        // tab
-        if (event.which === 9) {
-            event.preventDefault();
-            let focusableElements = DomHandler.getFocusableElements(this.container);
-            if (focusableElements && focusableElements.length > 0) {
-                if (!focusableElements[0].ownerDocument.activeElement) {
-                    focusableElements[0].focus();
-                }
-                else {
-                    let focusedIndex = focusableElements.indexOf(focusableElements[0].ownerDocument.activeElement);
-                    if (event.shiftKey) {
-                        if (focusedIndex == -1 || focusedIndex === 0)
-                            focusableElements[focusableElements.length - 1].focus();
-                        else
-                            focusableElements[focusedIndex - 1].focus();
-                    }
-                    else {
-                        if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1)
-                            focusableElements[0].focus();
-                        else
-                            focusableElements[focusedIndex + 1].focus();
-                    }
-                }
-            }
-        }
-    }
-    focus() {
-        const autoFocusElement = DomHandler.findSingle(this.container, '[autofocus]');
-        if (autoFocusElement) {
+    focus(focusParentElement = this.contentViewChild.nativeElement) {
+        let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]');
+        if (focusable) {
             this.zone.runOutsideAngular(() => {
-                setTimeout(() => autoFocusElement.focus(), 5);
+                setTimeout(() => focusable.focus(), 5);
             });
             return;
         }
-        const focusableElements = DomHandler.getFocusableElements(this.container);
-        if (focusableElements && focusableElements.length > 0) {
+        const focusableElement = DomHandler.getFocusableElement(focusParentElement);
+        if (focusableElement) {
             this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusableElements[0].focus(), 5);
+                setTimeout(() => focusableElement.focus(), 5);
             });
         }
+        else if (this.footerViewChild) {
+            // If the content section is empty try to focus on footer
+            this.focus(this.footerViewChild.nativeElement);
+        }
     }
     maximize() {
         this.maximized = !this.maximized;
@@ -763,10 +769,6 @@ class DynamicDialogComponent {
         }
     }
     bindGlobalListeners() {
-        if (this.parentDialog) {
-            this.parentDialog.unbindDocumentKeydownListener();
-        }
-        this.bindDocumentKeydownListener();
         if (this.config.closeOnEscape !== false && this.config.closable !== false) {
             this.bindDocumentEscapeListener();
         }
@@ -779,32 +781,10 @@ class DynamicDialogComponent {
         }
     }
     unbindGlobalListeners() {
-        this.unbindDocumentKeydownListener();
         this.unbindDocumentEscapeListener();
         this.unbindDocumentResizeListeners();
         this.unbindDocumentDragListener();
         this.unbindDocumentDragEndListener();
-        if (this.parentDialog) {
-            this.parentDialog.bindDocumentKeydownListener();
-        }
-    }
-    bindDocumentKeydownListener() {
-        if (isPlatformBrowser(this.platformId)) {
-            if (this.documentKeydownListener) {
-                return;
-            }
-            else {
-                this.zone.runOutsideAngular(() => {
-                    this.documentKeydownListener = this.renderer.listen(this.document, 'keydown', this.onKeydown.bind(this));
-                });
-            }
-        }
-    }
-    unbindDocumentKeydownListener() {
-        if (this.documentKeydownListener) {
-            this.documentKeydownListener();
-            this.documentKeydownListener = null;
-        }
     }
     bindDocumentEscapeListener() {
         const documentTarget = this.maskViewChild ? this.maskViewChild.nativeElement.ownerDocument : 'document';
@@ -836,7 +816,7 @@ class DynamicDialogComponent {
         this.destroyStyle();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: i3.PrimeNGConfig }, { token: DynamicDialogComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: DynamicDialogComponent, selector: "p-dynamicDialog", host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: DynamicDialogComponent, selector: "p-dynamicDialog", host: { classAttribute: "p-element" }, viewQueries: [{ propertyName: "insertionPoint", first: true, predicate: DynamicDialogContent, descendants: true }, { propertyName: "maskViewChild", first: true, predicate: ["mask"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }, { propertyName: "footerViewChild", first: true, predicate: ["footer"], descendants: true }, { propertyName: "headerViewChild", first: true, predicate: ["titlebar"], descendants: true }], ngImport: i0, template: `
         <div
             #mask
             [ngClass]="{
@@ -863,6 +843,8 @@ class DynamicDialogComponent {
                 (@animation.done)="onAnimationEnd($event)"
                 role="dialog"
                 *ngIf="visible"
+                pFocusTrap
+                [pFocusTrapDisabled]="config.focusTrap === false"
                 [style.width]="config.width"
                 [style.height]="config.height"
                 [attr.aria-labelledby]="ariaLabelledBy"
@@ -892,7 +874,7 @@ class DynamicDialogComponent {
                     <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
                     <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
                 </div>
-                <div class="p-dialog-footer" *ngIf="config.footer || footerTemplate">
+                <div #footer class="p-dialog-footer" *ngIf="config.footer || footerTemplate">
                     <ng-container *ngIf="!footerTemplate">
                         {{ config.footer }}
                     </ng-container>
@@ -900,7 +882,7 @@ class DynamicDialogComponent {
                 </div>
             </div>
         </div>
-    `, isInline: true, styles: ["@layer primeng{.p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-draggable .p-dialog-header{cursor:move}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i4.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => WindowMaximizeIcon), selector: "WindowMaximizeIcon" }, { kind: "component", type: i0.forwardRef(() => WindowMinimizeIcon), selector: "WindowMinimizeIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["@layer primeng{.p-dialog-mask{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none}.p-dialog-mask.p-component-overlay{pointer-events:auto}.p-dialog{display:flex;flex-direction:column;pointer-events:auto;max-height:90%;transform:scale(1);position:relative}.p-dialog-content{overflow-y:auto;flex-grow:1}.p-dialog-header{display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.p-dialog-draggable .p-dialog-header{cursor:move}.p-dialog-footer{flex-shrink:0}.p-dialog .p-dialog-header-icons{display:flex;align-items:center}.p-dialog .p-dialog-header-icon{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.p-fluid .p-dialog-footer .p-button{width:auto}.p-dialog-top .p-dialog,.p-dialog-bottom .p-dialog,.p-dialog-left .p-dialog,.p-dialog-right .p-dialog,.p-dialog-top-left .p-dialog,.p-dialog-top-right .p-dialog,.p-dialog-bottom-left .p-dialog,.p-dialog-bottom-right .p-dialog{margin:.75rem;transform:translateZ(0)}.p-dialog-maximized{-webkit-transition:none;transition:none;transform:none;width:100vw!important;height:100vh!important;top:0!important;left:0!important;max-height:100%;height:100%}.p-dialog-maximized .p-dialog-content{flex-grow:1}.p-dialog-left{justify-content:flex-start}.p-dialog-right{justify-content:flex-end}.p-dialog-top{align-items:flex-start}.p-dialog-top-left{justify-content:flex-start;align-items:flex-start}.p-dialog-top-right{justify-content:flex-end;align-items:flex-start}.p-dialog-bottom{align-items:flex-end}.p-dialog-bottom-left{justify-content:flex-start;align-items:flex-end}.p-dialog-bottom-right{justify-content:flex-end;align-items:flex-end}.p-dialog .p-resizable-handle{position:absolute;font-size:.1px;display:block;cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.p-confirm-dialog .p-dialog-content{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i4.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgComponentOutlet), selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i4.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => WindowMaximizeIcon), selector: "WindowMaximizeIcon" }, { kind: "component", type: i0.forwardRef(() => WindowMinimizeIcon), selector: "WindowMinimizeIcon" }, { kind: "component", type: i0.forwardRef(() => TimesIcon), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(() => i5.FocusTrap), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: i0.forwardRef(() => DynamicDialogContent), selector: "[pDynamicDialogContent]" }], animations: [trigger('animation', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
@@ -931,6 +913,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 (@animation.done)="onAnimationEnd($event)"
                 role="dialog"
                 *ngIf="visible"
+                pFocusTrap
+                [pFocusTrapDisabled]="config.focusTrap === false"
                 [style.width]="config.width"
                 [style.height]="config.height"
                 [attr.aria-labelledby]="ariaLabelledBy"
@@ -960,7 +944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                     <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
                     <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
                 </div>
-                <div class="p-dialog-footer" *ngIf="config.footer || footerTemplate">
+                <div #footer class="p-dialog-footer" *ngIf="config.footer || footerTemplate">
                     <ng-container *ngIf="!footerTemplate">
                         {{ config.footer }}
                     </ng-container>
@@ -990,19 +974,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
             }], contentViewChild: [{
                 type: ViewChild,
                 args: ['content']
+            }], footerViewChild: [{
+                type: ViewChild,
+                args: ['footer']
             }], headerViewChild: [{
                 type: ViewChild,
                 args: ['titlebar']
             }] } });
 class DynamicDialogModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogModule, declarations: [DynamicDialogComponent, DynamicDialogContent], imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule], exports: [SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogModule, imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogModule, declarations: [DynamicDialogComponent, DynamicDialogContent], imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule], exports: [SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogModule, imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule, SharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DynamicDialogModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule],
+                    imports: [CommonModule, WindowMaximizeIcon, WindowMinimizeIcon, TimesIcon, SharedModule, FocusTrapModule],
                     declarations: [DynamicDialogComponent, DynamicDialogContent],
                     exports: [SharedModule]
                 }]
@@ -1048,7 +1035,7 @@ class DialogService {
         if (!this.duplicationPermission(componentType, config)) {
             return null;
         }
-        const dialogRef = this.appendDialogComponentToBody(config);
+        const dialogRef = this.appendDialogComponentToBody(config, componentType);
         this.dialogComponentRefMap.get(dialogRef).instance.childComponentType = componentType;
         return dialogRef;
     }
@@ -1060,7 +1047,7 @@ class DialogService {
     getInstance(ref) {
         return this.dialogComponentRefMap.get(ref).instance;
     }
-    appendDialogComponentToBody(config) {
+    appendDialogComponentToBody(config, componentType) {
         const map = new WeakMap();
         map.set(DynamicDialogConfig, config);
         const dialogRef = new DynamicDialogRef();