primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-dynamicdialog.mjs

@@ -40,6 +40,54 @@ class DynamicDialogStyle extends DialogStyle {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DynamicDialogStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * DynamicDialog is a container to display content in an overlay window.
+ *
+ * [Live Demo](https://www.primeng.org/dynamicdialog)
+ *
+ * @module dynamicdialogstyle
+ *
+ */
+var DynamicDialogClasses;
+(function (DynamicDialogClasses) {
+    /**
+     * Class name of the mask element
+     */
+    DynamicDialogClasses["mask"] = "p-dialog-mask";
+    /**
+     * Class name of the root element
+     */
+    DynamicDialogClasses["root"] = "p-dialog";
+    /**
+     * Class name of the header element
+     */
+    DynamicDialogClasses["header"] = "p-dialog-header";
+    /**
+     * Class name of the title element
+     */
+    DynamicDialogClasses["title"] = "p-dialog-title";
+    /**
+     * Class name of the header actions element
+     */
+    DynamicDialogClasses["headerActions"] = "p-dialog-header-actions";
+    /**
+     * Class name of the maximize button element
+     */
+    DynamicDialogClasses["pcMaximizeButton"] = "p-dialog-maximize-button";
+    /**
+     * Class name of the close button element
+     */
+    DynamicDialogClasses["pcCloseButton"] = "p-dialog-close-button";
+    /**
+     * Class name of the content element
+     */
+    DynamicDialogClasses["content"] = "p-dialog-content";
+    /**
+     * Class name of the footer element
+     */
+    DynamicDialogClasses["footer"] = "p-dialog-footer";
+})(DynamicDialogClasses || (DynamicDialogClasses = {}));
 
 /**
  * Dialogs can be created dynamically with any component as the content using a DialogService.
@@ -459,6 +507,15 @@ class DynamicDialogComponent extends BaseComponent {
     get closeIconTemplate() {
         return this.ddconfig?.templates?.closeicon;
     }
+    get maskClass() {
+        const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
+        const pos = positions.find((item) => item === this.position);
+        return {
+            'p-dialog-mask': true,
+            'p-overlay-mask p-overlay-mask-enter': this.ddconfig.modal || this.ddconfig.dismissableMask,
+            [`p-dialog-${pos}`]: pos,
+        };
+    }
     constructor(renderer, ddconfig, dialogRef, zone, parentDialog) {
         super();
         this.renderer = renderer;
@@ -483,7 +540,7 @@ class DynamicDialogComponent extends BaseComponent {
                 for (let breakpoint in this.breakpoints) {
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {
-                            .p-dialog[${this.id}]:not(.p-dialog-maximized) {
+                            .p-dialog[${this.attrSelector}]:not(.p-dialog-maximized) {
                                 width: ${this.breakpoints[breakpoint]} !important;
                             }
                         }
@@ -501,6 +558,7 @@ class DynamicDialogComponent extends BaseComponent {
         }
     }
     ngAfterViewInit() {
+        super.ngAfterViewInit();
         this.loadChildComponent(this.childComponentType);
         this.ariaLabelledBy = this.getAriaLabelledBy();
         this.cd.detectChanges();
@@ -833,12 +891,37 @@ class DynamicDialogComponent extends BaseComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: i0.Renderer2 }, { token: DynamicDialogConfig }, { token: DynamicDialogRef }, { token: i0.NgZone }, { token: DynamicDialogComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.2", type: DynamicDialogComponent, selector: "p-dynamicDialog", providers: [DynamicDialogStyle], 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 }], usesInheritance: true, ngImport: i0, template: `
-        <div #mask [ngClass]="cx('mask')" [ngStyle]="sx('mask')" [class]="ddconfig.maskStyleClass">
+        <div
+            #mask
+            [ngStyle]="{
+                position: 'fixed',
+                height: '100%',
+                width: '100%',
+                left: 0,
+                top: 0,
+                display: 'flex',
+                'justify-content':
+                    position === 'left' || position === 'topleft' || position === 'bottomleft'
+                        ? 'flex-start'
+                        : position === 'right' || position === 'topright' || position === 'bottomright'
+                          ? 'flex-end'
+                          : 'center',
+                'align-items':
+                    position === 'top' || position === 'topleft' || position === 'topright'
+                        ? 'flex-start'
+                        : position === 'bottom' || position === 'bottomleft' || position === 'bottomright'
+                          ? 'flex-end'
+                          : 'center',
+                'pointer-events': ddconfig.modal ? 'auto' : 'none',
+            }"
+            [class]="ddconfig.maskStyleClass"
+            [ngClass]="maskClass"
+        >
             <div
                 *ngIf="visible"
                 #container
-                [ngClass]="cx('root')"
-                [ngStyle]="sx('root')"
+                [ngClass]="{ 'p-dialog p-component': true, 'p-dialog-maximized': maximizable && maximized }"
+                [ngStyle]="{ display: 'flex', 'flex-direction': 'column', 'pointer-events': 'auto' }"
                 [style]="ddconfig.style"
                 [class]="ddconfig.styleClass"
                 [@animation]="{
@@ -858,15 +941,20 @@ class DynamicDialogComponent extends BaseComponent {
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-modal]="true"
             >
-                <div *ngIf="ddconfig.resizable" [ngClass]="cx('resizeHandle')" style="z-index: 90;" (mousedown)="initResize($event)"></div>
-                <div #titlebar [ngClass]="cx('header')" (mousedown)="initDrag($event)" *ngIf="ddconfig.showHeader === false ? false : true">
+                <div
+                    *ngIf="ddconfig.resizable"
+                    [ngClass]="'p-resizable-handle'"
+                    style="z-index: 90;"
+                    (mousedown)="initResize($event)"
+                ></div>
+                <div #titlebar [ngClass]="'p-dialog-header'" (mousedown)="initDrag($event)" *ngIf="ddconfig.showHeader !== false">
                     <ng-container *ngComponentOutlet="headerTemplate"></ng-container>
                     <ng-container *ngIf="!headerTemplate">
-                        <span [ngClass]="cx('title')" [id]="ariaLabelledBy">{{ ddconfig.header }}</span>
-                        <div [ngClass]="cx('headerActions')">
+                        <span [ngClass]="'p-dialog-title'" [id]="ariaLabelledBy">{{ ddconfig.header }}</span>
+                        <div [ngClass]="'p-dialog-header-actions'">
                             <p-button
                                 *ngIf="ddconfig.maximizable"
-                                [styleClass]="cx('pcMaximizeButton')"
+                                [styleClass]="'p-dialog-maximize-button'"
                                 (onClick)="maximize()"
                                 (keydown.enter)="maximize()"
                                 [tabindex]="maximizable ? '0' : '-1'"
@@ -884,7 +972,7 @@ class DynamicDialogComponent extends BaseComponent {
                             </p-button>
                             <p-button
                                 *ngIf="closable"
-                                [styleClass]="cx('pcCloseButton')"
+                                [styleClass]="'p-dialog-close-button'"
                                 [ariaLabel]="closeAriaLabel"
                                 (onClick)="hide()"
                                 (keydown.enter)="hide()"
@@ -902,11 +990,11 @@ class DynamicDialogComponent extends BaseComponent {
                         </div>
                     </ng-container>
                 </div>
-                <div #content [ngClass]="cx('content')" [ngStyle]="ddconfig.contentStyle">
+                <div #content [ngClass]="'p-dialog-content'" [ngStyle]="ddconfig.contentStyle">
                     <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
                     <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
                 </div>
-                <div #footer [ngClass]="cx('footer')" *ngIf="ddconfig.footer || footerTemplate">
+                <div #footer [ngClass]="'p-dialog-footer'" *ngIf="ddconfig.footer || footerTemplate">
                     <ng-container *ngIf="!footerTemplate">
                         {{ ddconfig.footer }}
                     </ng-container>
@@ -926,12 +1014,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             args: [{
                     selector: 'p-dynamicDialog',
                     template: `
-        <div #mask [ngClass]="cx('mask')" [ngStyle]="sx('mask')" [class]="ddconfig.maskStyleClass">
+        <div
+            #mask
+            [ngStyle]="{
+                position: 'fixed',
+                height: '100%',
+                width: '100%',
+                left: 0,
+                top: 0,
+                display: 'flex',
+                'justify-content':
+                    position === 'left' || position === 'topleft' || position === 'bottomleft'
+                        ? 'flex-start'
+                        : position === 'right' || position === 'topright' || position === 'bottomright'
+                          ? 'flex-end'
+                          : 'center',
+                'align-items':
+                    position === 'top' || position === 'topleft' || position === 'topright'
+                        ? 'flex-start'
+                        : position === 'bottom' || position === 'bottomleft' || position === 'bottomright'
+                          ? 'flex-end'
+                          : 'center',
+                'pointer-events': ddconfig.modal ? 'auto' : 'none',
+            }"
+            [class]="ddconfig.maskStyleClass"
+            [ngClass]="maskClass"
+        >
             <div
                 *ngIf="visible"
                 #container
-                [ngClass]="cx('root')"
-                [ngStyle]="sx('root')"
+                [ngClass]="{ 'p-dialog p-component': true, 'p-dialog-maximized': maximizable && maximized }"
+                [ngStyle]="{ display: 'flex', 'flex-direction': 'column', 'pointer-events': 'auto' }"
                 [style]="ddconfig.style"
                 [class]="ddconfig.styleClass"
                 [@animation]="{
@@ -951,15 +1064,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                 [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.aria-modal]="true"
             >
-                <div *ngIf="ddconfig.resizable" [ngClass]="cx('resizeHandle')" style="z-index: 90;" (mousedown)="initResize($event)"></div>
-                <div #titlebar [ngClass]="cx('header')" (mousedown)="initDrag($event)" *ngIf="ddconfig.showHeader === false ? false : true">
+                <div
+                    *ngIf="ddconfig.resizable"
+                    [ngClass]="'p-resizable-handle'"
+                    style="z-index: 90;"
+                    (mousedown)="initResize($event)"
+                ></div>
+                <div #titlebar [ngClass]="'p-dialog-header'" (mousedown)="initDrag($event)" *ngIf="ddconfig.showHeader !== false">
                     <ng-container *ngComponentOutlet="headerTemplate"></ng-container>
                     <ng-container *ngIf="!headerTemplate">
-                        <span [ngClass]="cx('title')" [id]="ariaLabelledBy">{{ ddconfig.header }}</span>
-                        <div [ngClass]="cx('headerActions')">
+                        <span [ngClass]="'p-dialog-title'" [id]="ariaLabelledBy">{{ ddconfig.header }}</span>
+                        <div [ngClass]="'p-dialog-header-actions'">
                             <p-button
                                 *ngIf="ddconfig.maximizable"
-                                [styleClass]="cx('pcMaximizeButton')"
+                                [styleClass]="'p-dialog-maximize-button'"
                                 (onClick)="maximize()"
                                 (keydown.enter)="maximize()"
                                 [tabindex]="maximizable ? '0' : '-1'"
@@ -977,7 +1095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             </p-button>
                             <p-button
                                 *ngIf="closable"
-                                [styleClass]="cx('pcCloseButton')"
+                                [styleClass]="'p-dialog-close-button'"
                                 [ariaLabel]="closeAriaLabel"
                                 (onClick)="hide()"
                                 (keydown.enter)="hide()"
@@ -995,11 +1113,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         </div>
                     </ng-container>
                 </div>
-                <div #content [ngClass]="cx('content')" [ngStyle]="ddconfig.contentStyle">
+                <div #content [ngClass]="'p-dialog-content'" [ngStyle]="ddconfig.contentStyle">
                     <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
                     <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
                 </div>
-                <div #footer [ngClass]="cx('footer')" *ngIf="ddconfig.footer || footerTemplate">
+                <div #footer [ngClass]="'p-dialog-footer'" *ngIf="ddconfig.footer || footerTemplate">
                     <ng-container *ngIf="!footerTemplate">
                         {{ ddconfig.footer }}
                     </ng-container>
@@ -1168,5 +1286,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DialogService, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef };
+export { DialogService, DynamicDialogClasses, DynamicDialogComponent, DynamicDialogConfig, DynamicDialogInjector, DynamicDialogModule, DynamicDialogRef, DynamicDialogStyle };
 //# sourceMappingURL=primeng-dynamicdialog.mjs.map