primeng 18.0.0 → 18.0.1

package/fesm2022/primeng-dialog.mjs

@@ -2,15 +2,14 @@ import { animation, style, animate, trigger, transition, useAnimation } from '@a
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import { uuid, blockBodyScroll, unblockBodyScroll, setAttribute, hasClass, addClass, getOuterWidth, getOuterHeight, getViewport, removeClass, appendChild } from '@primeuix/utils';
-import { TranslationKeys, SharedModule } from 'primeng/api';
+import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Button } from 'primeng/button';
 import { DomHandler } from 'primeng/dom';
 import { FocusTrap } from 'primeng/focustrap';
 import { TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon } from 'primeng/icons';
-import { Ripple } from 'primeng/ripple';
 import { ZIndexUtils } from 'primeng/utils';
 import { BaseStyle } from 'primeng/base';
 
@@ -319,7 +318,7 @@ function Dialog_div_0_div_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._headlessTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._headlessTemplate || ctx_r1.headlessTemplate || ctx_r1.headlessT);
 } }
 function Dialog_div_0_div_1_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -362,9 +361,9 @@ function Dialog_div_0_div_1_ng_template_3_p_button_6_ng_container_2_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.maximized && !ctx_r1._maximizeiconTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1.maximized && !ctx_r1._maximizeiconTemplate && !ctx_r1.maximizeIconTemplate && !ctx_r1.maximizeIconT);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.maximized && !ctx_r1._minimizeiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1.maximized && !ctx_r1._minimizeiconTemplate && !ctx_r1.minimizeIconTemplate && !ctx_r1.minimizeIconT);
 } }
 function Dialog_div_0_div_1_ng_template_3_p_button_6_ng_container_3_1_ng_template_0_Template(rf, ctx) { }
 function Dialog_div_0_div_1_ng_template_3_p_button_6_ng_container_3_1_Template(rf, ctx) { if (rf & 1) {
@@ -377,7 +376,7 @@ function Dialog_div_0_div_1_ng_template_3_p_button_6_ng_container_3_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._maximizeiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._maximizeiconTemplate || ctx_r1.maximizeIconTemplate || ctx_r1.maximizeIconT);
 } }
 function Dialog_div_0_div_1_ng_template_3_p_button_6_ng_container_4_1_ng_template_0_Template(rf, ctx) { }
 function Dialog_div_0_div_1_ng_template_3_p_button_6_ng_container_4_1_Template(rf, ctx) { if (rf & 1) {
@@ -390,7 +389,7 @@ function Dialog_div_0_div_1_ng_template_3_p_button_6_ng_container_4_Template(rf,
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._minimizeiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._minimizeiconTemplate || ctx_r1.minimizeIconTemplate || ctx_r1.minimizeIconT);
 } }
 function Dialog_div_0_div_1_ng_template_3_p_button_6_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
@@ -441,15 +440,15 @@ function Dialog_div_0_div_1_ng_template_3_p_button_7_ng_template_1_span_1_Templa
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._closeiconTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._closeiconTemplate || ctx_r1.closeIconTemplate || ctx_r1.closeIconT);
 } }
 function Dialog_div_0_div_1_ng_template_3_p_button_7_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, Dialog_div_0_div_1_ng_template_3_p_button_7_ng_template_1_ng_container_0_Template, 3, 2, "ng-container", 22)(1, Dialog_div_0_div_1_ng_template_3_p_button_7_ng_template_1_span_1_Template, 2, 1, "span", 22);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("ngIf", !ctx_r1._closeiconTemplate && !(ctx_r1.closeButtonProps == null ? null : ctx_r1.closeButtonProps.icon));
+    i0.ɵɵproperty("ngIf", !ctx_r1._closeiconTemplate && !ctx_r1.closeIconTemplate && !ctx_r1.closeIconT && !(ctx_r1.closeButtonProps == null ? null : ctx_r1.closeButtonProps.icon));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1._closeiconTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1._closeiconTemplate || ctx_r1.closeIconTemplate || ctx_r1.closeIconT);
 } }
 function Dialog_div_0_div_1_ng_template_3_p_button_7_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
@@ -476,7 +475,7 @@ function Dialog_div_0_div_1_ng_template_3_div_12_Template(rf, ctx) { if (rf & 1)
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("ngClass", ctx_r1.cx("footer"));
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._footerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._footerTemplate || ctx_r1.footerTemplate || ctx_r1.footerT);
 } }
 function Dialog_div_0_div_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -498,9 +497,9 @@ function Dialog_div_0_div_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.cx("header"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", !ctx_r1._headerTemplate);
+    i0.ɵɵproperty("ngIf", !ctx_r1._headerTemplate && !ctx_r1.headerTemplate && !ctx_r1.headerT);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._headerTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._headerTemplate || ctx_r1.headerTemplate || ctx_r1.headerT);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r1.cx("headerActions"));
     i0.ɵɵadvance();
@@ -512,9 +511,9 @@ function Dialog_div_0_div_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngClass", ctx_r1.cx("content"))("ngStyle", ctx_r1.contentStyle);
     i0.ɵɵattribute("data-pc-section", "content");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._contentTemplate);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1._contentTemplate || ctx_r1.contentTemplate || ctx_r1.contentT);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1._footerTemplate);
+    i0.ɵɵproperty("ngIf", ctx_r1._footerTemplate || ctx_r1.footerTemplate || ctx_r1.footerT);
 } }
 function Dialog_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -530,7 +529,7 @@ function Dialog_div_0_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(13, _c11, ctx_r1.maximizable && ctx_r1.maximized))("ngStyle", i0.ɵɵpureFunction0(15, _c12))("pFocusTrapDisabled", ctx_r1.focusTrap === false)("@animation", i0.ɵɵpureFunction1(19, _c14, i0.ɵɵpureFunction2(16, _c13, ctx_r1.transformOptions, ctx_r1.transitionOptions)));
     i0.ɵɵattribute("role", ctx_r1.role)("aria-labelledby", ctx_r1.ariaLabelledBy)("aria-modal", true);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1._headlessTemplate)("ngIfElse", notHeadless_r7);
+    i0.ɵɵproperty("ngIf", ctx_r1._headlessTemplate || ctx_r1.headlessTemplate || ctx_r1.headlessT)("ngIfElse", notHeadless_r7);
 } }
 function Dialog_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -944,6 +943,13 @@ class Dialog extends BaseComponent {
     styleElement;
     window;
     _componentStyle = inject(DialogStyle);
+    headerT;
+    contentT;
+    footerT;
+    closeIconT;
+    maximizeIconT;
+    minimizeIconT;
+    headlessT;
     get maximizeLabel() {
         return this.config.getTranslation(TranslationKeys.ARIA)['maximizeLabel'];
     }
@@ -963,6 +969,37 @@ class Dialog extends BaseComponent {
             this.createStyle();
         }
     }
+    templates;
+    ngAfterContentInit() {
+        this.templates?.forEach((item) => {
+            switch (item.getType()) {
+                case 'header':
+                    this.headerT = item.template;
+                    break;
+                case 'content':
+                    this.contentT = item.template;
+                    break;
+                case 'footer':
+                    this.footerT = item.template;
+                    break;
+                case 'closeicon':
+                    this.closeIconT = item.template;
+                    break;
+                case 'maximizeicon':
+                    this.maximizeIconT = item.template;
+                    break;
+                case 'minimizeicon':
+                    this.minimizeIconT = item.template;
+                    break;
+                case 'headless':
+                    this.headlessT = item.template;
+                    break;
+                default:
+                    this.contentT = item.template;
+                    break;
+            }
+        });
+    }
     getAriaLabelledBy() {
         return this.header !== null ? uuid('pn_id_') + '_header' : null;
     }
@@ -985,24 +1022,29 @@ class Dialog extends BaseComponent {
         }
         return totalMilliseconds;
     }
-    focus(focusParentElement = this.contentViewChild.nativeElement) {
-        const timeoutDuration = this.parseDurationToMilliseconds(this.transitionOptions);
-        let focusable = DomHandler.getFocusableElement(focusParentElement, '[autofocus]');
-        if (focusable) {
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusable.focus(), timeoutDuration || 5);
-            });
-            return;
-        }
-        const focusableElement = DomHandler.getFocusableElement(focusParentElement);
-        if (focusableElement) {
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => focusableElement.focus(), timeoutDuration || 5);
-            });
+    _focus(focusParentElement) {
+        if (focusParentElement) {
+            const timeoutDuration = this.parseDurationToMilliseconds(this.transitionOptions);
+            let _focusableElements = DomHandler.getFocusableElements(focusParentElement);
+            if (_focusableElements && _focusableElements.length > 0) {
+                this.zone.runOutsideAngular(() => {
+                    setTimeout(() => _focusableElements[0].focus(), timeoutDuration || 5);
+                });
+                return true;
+            }
         }
-        else if (this.footerViewChild) {
-            // If the content section is empty try to focus on footer
-            this.focus(this.footerViewChild.nativeElement);
+        return false;
+    }
+    focus(focusParentElement) {
+        let focused = this._focus(focusParentElement);
+        if (!focused) {
+            focused = this._focus(this.footerViewChild?.nativeElement);
+            if (!focused) {
+                focused = this._focus(this.headerViewChild?.nativeElement);
+                if (!focused) {
+                    this._focus(this.contentViewChild?.nativeElement);
+                }
+            }
         }
     }
     close(event) {
@@ -1297,8 +1339,7 @@ class Dialog extends BaseComponent {
                 //     addClass(this.document.body, 'p-overflow-hidden');
                 // }
                 if (this.focusOnShow) {
-                    const el = this.contentViewChild?.nativeElement || this.container;
-                    this.focus(el);
+                    this.focus();
                 }
                 break;
             case 'void':
@@ -1368,6 +1409,7 @@ class Dialog extends BaseComponent {
             i0.ɵɵcontentQuery(dirIndex, _c4, 4);
             i0.ɵɵcontentQuery(dirIndex, _c5, 4);
             i0.ɵɵcontentQuery(dirIndex, _c6, 4);
+            i0.ɵɵcontentQuery(dirIndex, PrimeTemplate, 4);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._headerTemplate = _t.first);
@@ -1377,6 +1419,7 @@ class Dialog extends BaseComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._maximizeiconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._minimizeiconTemplate = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._headlessTemplate = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.templates = _t);
         } }, viewQuery: function Dialog_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c7, 5);
             i0.ɵɵviewQuery(_c1, 5);
@@ -1398,7 +1441,7 @@ class Dialog extends BaseComponent {
         args: [{
                 selector: 'p-dialog',
                 standalone: true,
-                imports: [CommonModule, Button, Ripple, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule],
+                imports: [CommonModule, Button, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, SharedModule],
                 template: `
         <div
             *ngIf="maskVisible"
@@ -1436,37 +1479,37 @@ class Dialog extends BaseComponent {
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-modal]="true"
             >
-                <ng-container *ngIf="_headlessTemplate; else notHeadless">
-                    <ng-container *ngTemplateOutlet="_headlessTemplate"></ng-container>
+                <ng-container *ngIf="_headlessTemplate || headlessTemplate || headlessT; else notHeadless">
+                    <ng-container *ngTemplateOutlet="_headlessTemplate || headlessTemplate || headlessT"></ng-container>
                 </ng-container>
 
                 <ng-template #notHeadless>
                     <div *ngIf="resizable" [ngClass]="cx('resizeHandle')" style="z-index: 90;" (mousedown)="initResize($event)"></div>
                     <div #titlebar [ngClass]="cx('header')" (mousedown)="initDrag($event)">
-                        <span [id]="ariaLabelledBy" [ngClass]="cx('title')" *ngIf="!_headerTemplate">{{ header }}</span>
-                        <ng-container *ngTemplateOutlet="_headerTemplate"></ng-container>
+                        <span [id]="ariaLabelledBy" [ngClass]="cx('title')" *ngIf="!_headerTemplate && !headerTemplate && !headerT">{{ header }}</span>
+                        <ng-container *ngTemplateOutlet="_headerTemplate || headerTemplate || headerT"></ng-container>
                         <div [ngClass]="cx('headerActions')">
                             <p-button *ngIf="maximizable" [styleClass]="cx('pcMaximizeButton')" (onClick)="maximize()" (keydown.enter)="maximize()" [tabindex]="maximizable ? '0' : '-1'" [ariaLabel]="maximizeLabel" [buttonProps]="maximizeButtonProps">
                                 <span *ngIf="maximizeIcon && !_maximizeiconTemplate && !_minimizeiconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
                                 <ng-container *ngIf="!maximizeIcon && !maximizeButtonProps?.icon">
-                                    <WindowMaximizeIcon *ngIf="!maximized && !_maximizeiconTemplate" />
-                                    <WindowMinimizeIcon *ngIf="maximized && !_minimizeiconTemplate" />
+                                    <WindowMaximizeIcon *ngIf="!maximized && !_maximizeiconTemplate && !maximizeIconTemplate && !maximizeIconT" />
+                                    <WindowMinimizeIcon *ngIf="maximized && !_minimizeiconTemplate && !minimizeIconTemplate && !minimizeIconT" />
                                 </ng-container>
                                 <ng-container *ngIf="!maximized">
-                                    <ng-template *ngTemplateOutlet="_maximizeiconTemplate"></ng-template>
+                                    <ng-template *ngTemplateOutlet="_maximizeiconTemplate || maximizeIconTemplate || maximizeIconT"></ng-template>
                                 </ng-container>
                                 <ng-container *ngIf="maximized">
-                                    <ng-template *ngTemplateOutlet="_minimizeiconTemplate"></ng-template>
+                                    <ng-template *ngTemplateOutlet="_minimizeiconTemplate || minimizeIconTemplate || minimizeIconT"></ng-template>
                                 </ng-container>
                             </p-button>
                             <p-button *ngIf="closable" [styleClass]="cx('pcCloseButton')" [ariaLabel]="closeAriaLabel" (onClick)="close($event)" (keydown.enter)="close($event)" [tabindex]="closeTabindex" [buttonProps]="closeButtonProps">
                                 <ng-template #icon>
-                                    <ng-container *ngIf="!_closeiconTemplate && !closeButtonProps?.icon">
+                                    <ng-container *ngIf="!_closeiconTemplate && !closeIconTemplate && !closeIconT && !closeButtonProps?.icon">
                                         <span *ngIf="closeIcon" [ngClass]="closeIcon"></span>
                                         <TimesIcon *ngIf="!closeIcon" />
                                     </ng-container>
-                                    <span *ngIf="_closeiconTemplate">
-                                        <ng-template *ngTemplateOutlet="_closeiconTemplate"></ng-template>
+                                    <span *ngIf="_closeiconTemplate || closeIconTemplate || closeIconT">
+                                        <ng-template *ngTemplateOutlet="_closeiconTemplate || closeIconTemplate || closeIconT"></ng-template>
                                     </span>
                                 </ng-template>
                             </p-button>
@@ -1474,11 +1517,11 @@ class Dialog extends BaseComponent {
                     </div>
                     <div #content [ngClass]="cx('content')" [class]="contentStyleClass" [ngStyle]="contentStyle" [attr.data-pc-section]="'content'">
                         <ng-content></ng-content>
-                        <ng-container *ngTemplateOutlet="_contentTemplate"></ng-container>
+                        <ng-container *ngTemplateOutlet="_contentTemplate || contentTemplate || contentT"></ng-container>
                     </div>
-                    <div #footer [ngClass]="cx('footer')" *ngIf="_footerTemplate">
+                    <div #footer [ngClass]="cx('footer')" *ngIf="_footerTemplate || footerTemplate || footerT">
                         <ng-content select="p-footer"></ng-content>
-                        <ng-container *ngTemplateOutlet="_footerTemplate"></ng-container>
+                        <ng-container *ngTemplateOutlet="_footerTemplate || footerTemplate || footerT"></ng-container>
                     </div>
                 </ng-template>
             </div>
@@ -1647,6 +1690,9 @@ class Dialog extends BaseComponent {
         }], _headlessTemplate: [{
             type: ContentChild,
             args: ['headless', { descendants: false }]
+        }], templates: [{
+            type: ContentChildren,
+            args: [PrimeTemplate]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(Dialog, { className: "Dialog" }); })();
 class DialogModule {