@fundamental-ngx/core 0.46.0-rc.2 → 0.46.0-rc.21

package/fesm2022/fundamental-ngx-core-dialog.mjs

@@ -1,38 +1,41 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Directive, ContentChild, ContentChildren, Component, Optional, Inject, inject, isDevMode, HostBinding, HostListener, Input, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ComponentRef, EmbeddedViewRef, Type, TemplateRef, PLATFORM_ID, Injector, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Component, Optional, Inject, Input, Directive, ContentChildren, ContentChild, inject, isDevMode, HostBinding, HostListener, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ComponentRef, EmbeddedViewRef, Type, TemplateRef, PLATFORM_ID, Injector, NgModule } from '@angular/core';
+import { Subject, BehaviorSubject, Subscription, fromEvent, takeUntil } from 'rxjs';
+import * as i3 from '@fundamental-ngx/core/scrollbar';
+import { ScrollbarDirective, ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
 import * as i4 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i7 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
-import * as i6 from '@angular/cdk/drag-drop';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { ButtonModule } from '@fundamental-ngx/core/button';
-import * as i1$1 from '@fundamental-ngx/core/icon';
-import { IconModule } from '@fundamental-ngx/core/icon';
-import * as i3$2 from '@fundamental-ngx/core/title';
-import { TitleToken, TitleModule } from '@fundamental-ngx/core/title';
-import * as i2 from '@fundamental-ngx/core/bar';
-import { FD_BUTTON_BAR_COMPONENT, BarModule } from '@fundamental-ngx/core/bar';
 import * as i5 from '@fundamental-ngx/core/busy-indicator';
 import { BusyIndicatorModule } from '@fundamental-ngx/core/busy-indicator';
 import * as i4$1 from '@fundamental-ngx/cdk/utils';
 import { TemplateDirective, KeyUtil, applyCssClass, DynamicComponentContainer, RtlService, ResizeModule, TemplateModule, InitialFocusModule, DynamicPortalComponent, DynamicComponentService } from '@fundamental-ngx/cdk/utils';
-import { __decorate, __metadata } from 'tslib';
-import * as i1 from '@angular/router';
-import { NavigationStart } from '@angular/router';
-import * as i3 from '@fundamental-ngx/core/content-density';
-import { contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
-import { Subject, BehaviorSubject, Subscription, fromEvent, takeUntil } from 'rxjs';
-import * as i3$1 from '@fundamental-ngx/core/scrollbar';
-import { ScrollbarDirective, ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
+import * as i1 from '@fundamental-ngx/core/icon';
+import { IconModule } from '@fundamental-ngx/core/icon';
 import { startWith, filter, debounceTime } from 'rxjs/operators';
-import { ESCAPE } from '@angular/cdk/keycodes';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i2 from '@fundamental-ngx/core/bar';
+import { FD_BUTTON_BAR_COMPONENT, BarModule } from '@fundamental-ngx/core/bar';
+import * as i3$1 from '@fundamental-ngx/core/content-density';
+import { contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';
+import * as i3$2 from '@fundamental-ngx/core/title';
+import { TitleToken, TitleModule } from '@fundamental-ngx/core/title';
+import { __decorate, __metadata } from 'tslib';
 import * as i3$3 from '@angular/cdk/portal';
 import { CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/router';
+import { NavigationStart } from '@angular/router';
+import { ESCAPE } from '@angular/cdk/keycodes';
+import * as i6 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i7 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i2$1 from '@angular/cdk/overlay';
 import { OverlayConfig, OverlayModule, OverlayContainer } from '@angular/cdk/overlay';
+import { ButtonModule } from '@fundamental-ngx/core/button';
+
+const FD_DIALOG_BODY_COMPONENT = new InjectionToken('FdDialogBodyComponent');
+const FD_DIALOG_FOCUS_TRAP_ERROR = new InjectionToken('FdDialogFocusTrapError');
 
 /* eslint-disable @typescript-eslint/no-inferrable-types */
 class DialogConfigBase {
@@ -80,82 +83,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             type: Injectable
         }] });
 
-class DialogHeaderBase {
-    /** @hidden */
-    set defaultTitleSize(title) {
-        if (title && !title.headerSize) {
-            title.headerSize = 5;
-            this._changeDetectorRef.detectChanges();
-        }
-    }
-    /** @hidden */
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-    }
-    /** @hidden */
-    ngAfterContentInit() {
-        this._assignCustomTemplates();
-    }
-    /** @hidden Assign custom templates */
-    _assignCustomTemplates() {
-        this.customTemplates.forEach((template) => {
-            switch (template.getName()) {
-                case 'header':
-                    this.headerTemplate = template.templateRef;
-                    break;
-                case 'subheader':
-                    this.subHeaderTemplate = template.templateRef;
-                    break;
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DialogHeaderBase, queries: [{ propertyName: "defaultTitleSize", first: true, predicate: TitleToken, descendants: true }, { propertyName: "customTemplates", predicate: TemplateDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderBase, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { defaultTitleSize: [{
-                type: ContentChild,
-                args: [TitleToken]
-            }], customTemplates: [{
-                type: ContentChildren,
-                args: [TemplateDirective]
-            }] } });
-
-/**
- * Applies fundamental layout and styling to the contents of a dialog header.
- *
- * ```html
- * <fd-dialog-header>
- *     <h1 fd-title>Title</h1>
- *     <button fd-dialog-close-button></button>
- * </fd-dialog-header>
- * ```
- */
-class DialogHeaderComponent extends DialogHeaderBase {
-    /** @hidden */
-    constructor(dialogConfig, changeDetectorRef) {
-        super(changeDetectorRef);
-        this.dialogConfig = dialogConfig;
-        this.dialogConfig = this.dialogConfig || {};
-    }
-    /** @hidden */
-    ngAfterContentInit() {
-        super.ngAfterContentInit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderComponent, deps: [{ token: DialogConfig, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogHeaderComponent, selector: "fd-dialog-header", usesInheritance: true, ngImport: i0, template: "<div\n    fd-bar\n    class=\"fd-dialog__header\"\n    [fdCozy]=\"dialogConfig.mobile\"\n    [barDesign]=\"subHeaderTemplate ? 'header-with-subheader' : 'header'\"\n>\n    <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultTemplate\"></ng-container>\n\n    <ng-template #defaultTemplate>\n        <div fd-bar-left>\n            <fd-bar-element [fullWidth]=\"true\">\n                <ng-content select=\"[fd-title]\"></ng-content>\n            </fd-bar-element>\n        </div>\n        <div fd-bar-right>\n            <fd-bar-element>\n                <ng-content select=\"[fd-dialog-close-button]\"></ng-content>\n            </fd-bar-element>\n        </div>\n    </ng-template>\n</div>\n\n<div fd-bar *ngIf=\"subHeaderTemplate\" class=\"fd-dialog__subheader\" barDesign=\"subheader\" [fdCozy]=\"dialogConfig.mobile\">\n    <ng-container *ngTemplateOutlet=\"subHeaderTemplate\"></ng-container>\n</div>\n", dependencies: [{ kind: "component", type: i2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: i3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fd-dialog-header', template: "<div\n    fd-bar\n    class=\"fd-dialog__header\"\n    [fdCozy]=\"dialogConfig.mobile\"\n    [barDesign]=\"subHeaderTemplate ? 'header-with-subheader' : 'header'\"\n>\n    <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultTemplate\"></ng-container>\n\n    <ng-template #defaultTemplate>\n        <div fd-bar-left>\n            <fd-bar-element [fullWidth]=\"true\">\n                <ng-content select=\"[fd-title]\"></ng-content>\n            </fd-bar-element>\n        </div>\n        <div fd-bar-right>\n            <fd-bar-element>\n                <ng-content select=\"[fd-dialog-close-button]\"></ng-content>\n            </fd-bar-element>\n        </div>\n    </ng-template>\n</div>\n\n<div fd-bar *ngIf=\"subHeaderTemplate\" class=\"fd-dialog__subheader\" barDesign=\"subheader\" [fdCozy]=\"dialogConfig.mobile\">\n    <ng-container *ngTemplateOutlet=\"subHeaderTemplate\"></ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: DialogConfig, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }]; } });
-
-const FD_DIALOG_BODY_COMPONENT = new InjectionToken('FdDialogBodyComponent');
-const FD_DIALOG_FOCUS_TRAP_ERROR = new InjectionToken('FdDialogFocusTrapError');
-
 class DialogRefBase {
     constructor() {
         /** @hidden */
@@ -261,7 +188,7 @@ class DialogBodyComponent {
                 provide: FD_DIALOG_BODY_COMPONENT,
                 useExisting: DialogBodyComponent
             }
-        ], hostDirectives: [{ directive: i3$1.ScrollbarDirective }], ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"fd-dialog__loader fd-busy-indicator-dialog\" *ngIf=\"dialogRef.onLoading | async\">\n    <fdk-dynamic-portal\n        class=\"fd-text\"\n        *ngIf=\"dialogRef.loadingContent\"\n        [auto]=\"dialogRef.loadingContent\"\n    ></fdk-dynamic-portal>\n    <fd-busy-indicator [loading]=\"true\" size=\"l\" [label]=\"dialogRef.loadingLabel\"></fd-busy-indicator>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i4$1.DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template", "auto"], outputs: ["attached"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+        ], hostDirectives: [{ directive: i3.ScrollbarDirective }], ngImport: i0, template: "<ng-content></ng-content>\n<div class=\"fd-dialog__loader fd-busy-indicator-dialog\" *ngIf=\"dialogRef.onLoading | async\">\n    <fdk-dynamic-portal\n        class=\"fd-text\"\n        *ngIf=\"dialogRef.loadingContent\"\n        [auto]=\"dialogRef.loadingContent\"\n    ></fdk-dynamic-portal>\n    <fd-busy-indicator [loading]=\"true\" size=\"l\" [label]=\"dialogRef.loadingLabel\"></fd-busy-indicator>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.BusyIndicatorComponent, selector: "fd-busy-indicator", inputs: ["loading", "size", "block", "ariaLabel", "title", "label", "ariaLive"] }, { kind: "component", type: i4$1.DynamicPortalComponent, selector: "fdk-dynamic-portal", inputs: ["domElement", "component", "template", "auto"], outputs: ["attached"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogBodyComponent, decorators: [{
             type: Component,
@@ -281,11 +208,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     type: Optional
                 }] }, { type: DialogRef, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.ScrollbarDirective, decorators: [{
+                }] }, { type: i3.ScrollbarDirective, decorators: [{
                     type: Inject,
                     args: [ScrollbarDirective]
                 }] }]; } });
 
+/**
+ * Directive that applies fundamental dialog styling to a dialog close button.
+ *
+ * ```html
+ * <button fd-dialog-close-button></button>
+ * ```
+ */
+class DialogCloseButtonComponent {
+    constructor() {
+        /** Displays dialog close button in mobile mode */
+        this.mobile = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: { mobile: "mobile", title: "title" }, host: { properties: { "attr.aria-label": "\"close\"", "class.fd-button": "true", "class.is-compact": "!mobile", "class.fd-button--transparent": "true", "attr.title": "title" } }, ngImport: i0, template: `<fd-icon glyph="decline"></fd-icon><ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: i1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogCloseButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[fd-dialog-close-button]',
+                    host: {
+                        '[attr.aria-label]': '"close"',
+                        '[class.fd-button]': 'true',
+                        '[class.is-compact]': '!mobile',
+                        '[class.fd-button--transparent]': 'true',
+                        '[attr.title]': 'title'
+                    },
+                    template: `<fd-icon glyph="decline"></fd-icon><ng-content></ng-content>`
+                }]
+        }], propDecorators: { mobile: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
+
 class DialogFooterBase {
     /** @hidden */
     ngAfterContentInit() {
@@ -350,7 +312,7 @@ class DialogFooterComponent extends DialogFooterBase {
         this._listenForButtonChanges(DialogButtonClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogFooterComponent, deps: [{ token: DialogConfig, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogFooterComponent, selector: "fd-dialog-footer", usesInheritance: true, ngImport: i0, template: "<footer fd-bar class=\"fd-dialog__footer\" barDesign=\"footer\" [fdCozy]=\"dialogConfig.mobile\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate ? footerTemplate : defaultTemplate\"></ng-container>\n\n    <ng-template #defaultTemplate>\n        <div fd-bar-right>\n            <ng-content></ng-content>\n        </div>\n    </ng-template>\n</footer>\n", dependencies: [{ kind: "component", type: i2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogFooterComponent, selector: "fd-dialog-footer", usesInheritance: true, ngImport: i0, template: "<footer fd-bar class=\"fd-dialog__footer\" barDesign=\"footer\" [fdCozy]=\"dialogConfig.mobile\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate ? footerTemplate : defaultTemplate\"></ng-container>\n\n    <ng-template #defaultTemplate>\n        <div fd-bar-right>\n            <ng-content></ng-content>\n        </div>\n    </ng-template>\n</footer>\n", dependencies: [{ kind: "component", type: i2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i3$1.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogFooterComponent, decorators: [{
             type: Component,
@@ -359,6 +321,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     type: Optional
                 }] }]; } });
 
+class DialogHeaderBase {
+    /** @hidden */
+    set defaultTitleSize(title) {
+        if (title && !title.headerSize) {
+            title.headerSize = 5;
+            this._changeDetectorRef.detectChanges();
+        }
+    }
+    /** @hidden */
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+    }
+    /** @hidden */
+    ngAfterContentInit() {
+        this._assignCustomTemplates();
+    }
+    /** @hidden Assign custom templates */
+    _assignCustomTemplates() {
+        this.customTemplates.forEach((template) => {
+            switch (template.getName()) {
+                case 'header':
+                    this.headerTemplate = template.templateRef;
+                    break;
+                case 'subheader':
+                    this.subHeaderTemplate = template.templateRef;
+                    break;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderBase, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DialogHeaderBase, queries: [{ propertyName: "defaultTitleSize", first: true, predicate: TitleToken, descendants: true }, { propertyName: "customTemplates", predicate: TemplateDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderBase, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { defaultTitleSize: [{
+                type: ContentChild,
+                args: [TitleToken]
+            }], customTemplates: [{
+                type: ContentChildren,
+                args: [TemplateDirective]
+            }] } });
+
+/**
+ * Applies fundamental layout and styling to the contents of a dialog header.
+ *
+ * ```html
+ * <fd-dialog-header>
+ *     <h1 fd-title>Title</h1>
+ *     <button fd-dialog-close-button></button>
+ * </fd-dialog-header>
+ * ```
+ */
+class DialogHeaderComponent extends DialogHeaderBase {
+    /** @hidden */
+    constructor(dialogConfig, changeDetectorRef) {
+        super(changeDetectorRef);
+        this.dialogConfig = dialogConfig;
+        this.dialogConfig = this.dialogConfig || {};
+    }
+    /** @hidden */
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderComponent, deps: [{ token: DialogConfig, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogHeaderComponent, selector: "fd-dialog-header", usesInheritance: true, ngImport: i0, template: "<div\n    fd-bar\n    class=\"fd-dialog__header\"\n    [fdCozy]=\"dialogConfig.mobile\"\n    [barDesign]=\"subHeaderTemplate ? 'header-with-subheader' : 'header'\"\n>\n    <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultTemplate\"></ng-container>\n\n    <ng-template #defaultTemplate>\n        <div fd-bar-left>\n            <fd-bar-element [fullWidth]=\"true\">\n                <ng-content select=\"[fd-title]\"></ng-content>\n            </fd-bar-element>\n        </div>\n        <div fd-bar-right>\n            <fd-bar-element>\n                <ng-content select=\"[fd-dialog-close-button]\"></ng-content>\n            </fd-bar-element>\n        </div>\n    </ng-template>\n</div>\n\n<div fd-bar *ngIf=\"subHeaderTemplate\" class=\"fd-dialog__subheader\" barDesign=\"subheader\" [fdCozy]=\"dialogConfig.mobile\">\n    <ng-container *ngTemplateOutlet=\"subHeaderTemplate\"></ng-container>\n</div>\n", dependencies: [{ kind: "component", type: i2.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i2.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "directive", type: i3$1.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fd-dialog-header', template: "<div\n    fd-bar\n    class=\"fd-dialog__header\"\n    [fdCozy]=\"dialogConfig.mobile\"\n    [barDesign]=\"subHeaderTemplate ? 'header-with-subheader' : 'header'\"\n>\n    <ng-container *ngTemplateOutlet=\"headerTemplate ? headerTemplate : defaultTemplate\"></ng-container>\n\n    <ng-template #defaultTemplate>\n        <div fd-bar-left>\n            <fd-bar-element [fullWidth]=\"true\">\n                <ng-content select=\"[fd-title]\"></ng-content>\n            </fd-bar-element>\n        </div>\n        <div fd-bar-right>\n            <fd-bar-element>\n                <ng-content select=\"[fd-dialog-close-button]\"></ng-content>\n            </fd-bar-element>\n        </div>\n    </ng-template>\n</div>\n\n<div fd-bar *ngIf=\"subHeaderTemplate\" class=\"fd-dialog__subheader\" barDesign=\"subheader\" [fdCozy]=\"dialogConfig.mobile\">\n    <ng-container *ngTemplateOutlet=\"subHeaderTemplate\"></ng-container>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: DialogConfig, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }]; } });
+
 /** @hidden Returns dialog size based on width
  * @param width - dialog window width
  **/
@@ -492,12 +527,12 @@ class DialogBase {
                 .subscribe(() => this.adjustResponsivePadding()));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogBase, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i4$1.RtlService }, { token: i4$1.FocusTrapService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogBase, deps: [{ token: i1$1.Router }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i4$1.RtlService }, { token: i4$1.FocusTrapService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: DialogBase, host: { listeners: { "keydown": "closeDialogEsc($event)", "mousedown": "closeDialog($event.target)" }, properties: { "attr.dir": "this._dir" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogBase, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i4$1.RtlService }, { type: i4$1.FocusTrapService }]; }, propDecorators: { _dir: [{
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i4$1.RtlService }, { type: i4$1.FocusTrapService }]; }, propDecorators: { _dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
             }], closeDialogEsc: [{
@@ -660,8 +695,8 @@ class DialogComponent extends DialogBase {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogComponent, deps: [{ token: DialogConfig, optional: true }, { token: DialogRef, optional: true }, { token: i1.Router, optional: true }, { token: i4$1.RtlService, optional: true }, { token: i4$1.FocusTrapService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogComponent, selector: "fd-dialog", inputs: { class: "class", embeddedDialogRef: ["dialogRef", "embeddedDialogRef"], embeddedDialogConfig: ["dialogConfig", "embeddedDialogConfig"] }, host: { attributes: { "tabindex": "-1" } }, providers: [contentDensityObserverProviders({ alwaysAddModifiers: true })], queries: [{ propertyName: "dialogHeaderConfig", first: true, predicate: DialogHeaderComponent, descendants: true }, { propertyName: "dialogBodyConfig", first: true, predicate: DialogBodyComponent, descendants: true }, { propertyName: "dialogFooterConfig", first: true, predicate: DialogFooterComponent, descendants: true }, { propertyName: "dialogTitle", first: true, predicate: DialogTitleDirective, descendants: true }], viewQueries: [{ propertyName: "dialogWindow", first: true, predicate: ["dialogWindow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n    #dialogWindow\n    role=\"dialog\"\n    tabindex=\"-1\"\n    aria-modal=\"true\"\n    fdkResize\n    cdkTrapFocus\n    cdkDrag\n    cdkDragBoundary=\".fd-dialog\"\n    fd-scrollbar\n    [fdkResizeBoundary]=\"elementRef.nativeElement\"\n    class=\"fd-dialog__content\"\n    [class]=\"dialogConfig.dialogPanelClass\"\n    [class.cdk-drag]=\"dialogConfig.draggable\"\n    [class.fd-dialog__content--s]=\"dialogPaddingSize === 'sm'\"\n    [class.fd-dialog__content--m]=\"dialogPaddingSize === 'md'\"\n    [class.fd-dialog__content--l]=\"dialogPaddingSize === 'lg'\"\n    [class.fd-dialog__content--xl]=\"dialogPaddingSize === 'xl'\"\n    [class.fd-dialog__content--mobile]=\"dialogConfig.mobile\"\n    [class.fd-dialog__content--no-mobile-stretch]=\"dialogConfig.mobileOuterSpacing\"\n    [class.fd-dialog__content--draggable-grab]=\"dialogConfig.draggable && !isDragged\"\n    [class.fd-dialog__content--draggable-grabbing]=\"dialogConfig.draggable && isDragged\"\n    [cdkDragDisabled]=\"!dialogConfig.draggable\"\n    [fdkResizeDisabled]=\"!dialogConfig.resizable\"\n    [attr.id]=\"dialogConfig.id\"\n    [attr.aria-label]=\"dialogConfig.ariaLabel\"\n    [attr.aria-labelledby]=\"dialogConfig.ariaLabelledBy\"\n    [attr.aria-describedby]=\"dialogConfig.ariaDescribedBy\"\n    [attr.aria-modal]=\"dialogConfig.ariaModal\"\n    (cdkDragStarted)=\"isDragged = true\"\n    (cdkDragEnded)=\"isDragged = false\"\n    (onResizeEnd)=\"adjustResponsivePadding()\"\n>\n    <span fdkResizeHandle *ngIf=\"dialogConfig.resizable\" class=\"fd-dialog__resize-handle\"></span>\n\n    <div cdkDragHandle [cdkDragHandleDisabled]=\"!dialogConfig.draggable\">\n        <ng-content select=\"fd-dialog-header\"></ng-content>\n    </div>\n\n    <ng-content select=\"fd-dialog-body\"></ng-content>\n\n    <ng-content select=\"fd-dialog-footer\"></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;justify-content:center;position:fixed}.fd-dialog,.fd-dialog:before{height:100%;left:0;top:0;width:100%}.fd-dialog:before{background-color:var(--sapBlockLayer_Background);content:\"\";opacity:var(--fdDialog_Background_Opacity);position:absolute}.fd-dialog__content{-webkit-box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow3);display:flex;flex-direction:column;max-height:calc(100vh - 6%);max-width:calc(100vw - 10%);min-height:7.5rem;min-width:20rem;outline:none;overflow:hidden;position:absolute}.fd-dialog__body{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--sapGroup_ContentBackground);flex-grow:1;overflow:auto}.fd-dialog__footer.fd-bar,.fd-dialog__header.fd-bar,.fd-dialog__subheader.fd-bar{flex-shrink:0;padding-left:1rem;padding-right:1rem}.fd-dialog__content--mobile{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}.fd-dialog{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog:after,.fd-dialog:before{box-sizing:inherit;font-size:inherit}.fd-dialog--active{display:flex}.fd-dialog__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog__content:after,.fd-dialog__content:before{box-sizing:inherit;font-size:inherit}.fd-dialog__content--def .fd-dialog__body,.fd-dialog__content--def .fd-dialog__footer.fd-bar,.fd-dialog__content--def .fd-dialog__header.fd-bar,.fd-dialog__content--def .fd-dialog__subheader.fd-bar,.fd-dialog__content--s .fd-dialog__body,.fd-dialog__content--s .fd-dialog__footer.fd-bar,.fd-dialog__content--s .fd-dialog__header.fd-bar,.fd-dialog__content--s .fd-dialog__subheader.fd-bar{padding-left:1rem;padding-right:1rem}.fd-dialog__content--l .fd-dialog__body,.fd-dialog__content--l .fd-dialog__footer.fd-bar,.fd-dialog__content--l .fd-dialog__header.fd-bar,.fd-dialog__content--l .fd-dialog__subheader.fd-bar,.fd-dialog__content--m .fd-dialog__body,.fd-dialog__content--m .fd-dialog__footer.fd-bar,.fd-dialog__content--m .fd-dialog__header.fd-bar,.fd-dialog__content--m .fd-dialog__subheader.fd-bar{padding-left:2rem;padding-right:2rem}.fd-dialog__content--xl .fd-dialog__body,.fd-dialog__content--xl .fd-dialog__footer.fd-bar,.fd-dialog__content--xl .fd-dialog__header.fd-bar,.fd-dialog__content--xl .fd-dialog__subheader.fd-bar{padding-left:3rem;padding-right:3rem}.fd-dialog__content--mobile .fd-dialog__body,.fd-dialog__content--mobile .fd-dialog__footer,.fd-dialog__content--mobile .fd-dialog__header,.fd-dialog__content--mobile .fd-menu__item:first-child,.fd-dialog__content--mobile .fd-menu__item:first-child .fd-menu__link:after,.fd-dialog__content--mobile .fd-menu__item:last-child,.fd-dialog__content--mobile .fd-menu__item:last-child .fd-menu__link:after{border-radius:0}.fd-dialog__content--no-mobile-stretch{border-radius:var(--sapElement_BorderCornerRadius);max-height:calc(100vh - 6%);max-width:calc(100vw - 10%)}.fd-dialog__content--draggable-grab.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grab:hover .fd-dialog__header{cursor:move;cursor:grab}.fd-dialog__content--draggable-grabbing.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grabbing:hover .fd-dialog__header{cursor:move;cursor:grabbing}.fd-dialog__footer.fd-bar .fd-dialog__decisive-button,.fd-dialog__header.fd-bar .fd-dialog__decisive-button{justify-content:center;min-width:4rem}.fd-dialog__body{-webkit-box-sizing:border-box;border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0;position:relative}.fd-dialog__body:after,.fd-dialog__body:before{box-sizing:inherit;font-size:inherit}.fd-dialog__body--no-vertical-padding{padding-bottom:0;padding-top:0}.fd-dialog__body--no-horizontal-padding{padding-left:0;padding-right:0}.fd-dialog__body:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.fd-dialog__body:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-dialog__loader{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:1.5rem 0 .5rem;padding:0;text-align:center}.fd-dialog__loader:after,.fd-dialog__loader:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle{-webkit-box-sizing:border-box;-webkit-box-align:end;-ms-flex-align:end;-webkit-box-pack:end;-ms-flex-pack:end;align-items:flex-end;border:0;bottom:0;box-sizing:border-box;color:var(--sapTextColor);cursor:se-resize;display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;height:1rem;justify-content:flex-end;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:.125rem;min-width:1rem;overflow:hidden;padding:0;position:absolute;right:0;width:1rem}.fd-dialog__resize-handle:after,.fd-dialog__resize-handle:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle[dir=rtl],[dir=rtl] .fd-dialog__resize-handle{-webkit-transform:scaleX(-1);-webkit-box-pack:start;-ms-flex-pack:start;cursor:sw-resize;justify-content:flex-start;left:0;right:auto;transform:scaleX(-1)}.fd-dialog__resize-handle:after{color:var(--sapButton_Lite_TextColor);content:\"\\e24f\";font-family:SAP-icons;height:1rem;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-dialog--no-backdrop:not(.fd-dialog--targeted){-webkit-transform:translate(-50%,-50%);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:1000}.fd-dialog{z-index:999}.fd-dialog__resize-handle{z-index:1001;bottom:0;overflow:hidden}.fd-dialog__resize-handle:after{margin-bottom:-.125rem;display:block}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.ResizeDirective, selector: "[fdkResize]", inputs: ["fdkResizeBoundary", "fdkResizeDisabled", "fdkResizeHandleLocation", "fdkResizeResizeHandleRef"], outputs: ["onResizeStart", "onResizeEnd"] }, { kind: "directive", type: i4$1.ResizeHandleDirective, selector: "[fdkResizeHandle]" }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3$1.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogComponent, deps: [{ token: DialogConfig, optional: true }, { token: DialogRef, optional: true }, { token: i1$1.Router, optional: true }, { token: i4$1.RtlService, optional: true }, { token: i4$1.FocusTrapService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogComponent, selector: "fd-dialog", inputs: { class: "class", embeddedDialogRef: ["dialogRef", "embeddedDialogRef"], embeddedDialogConfig: ["dialogConfig", "embeddedDialogConfig"] }, host: { attributes: { "tabindex": "-1" } }, providers: [contentDensityObserverProviders({ alwaysAddModifiers: true })], queries: [{ propertyName: "dialogHeaderConfig", first: true, predicate: DialogHeaderComponent, descendants: true }, { propertyName: "dialogBodyConfig", first: true, predicate: DialogBodyComponent, descendants: true }, { propertyName: "dialogFooterConfig", first: true, predicate: DialogFooterComponent, descendants: true }, { propertyName: "dialogTitle", first: true, predicate: DialogTitleDirective, descendants: true }], viewQueries: [{ propertyName: "dialogWindow", first: true, predicate: ["dialogWindow"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n    #dialogWindow\n    role=\"dialog\"\n    tabindex=\"-1\"\n    aria-modal=\"true\"\n    fdkResize\n    cdkTrapFocus\n    cdkDrag\n    cdkDragBoundary=\".fd-dialog\"\n    fd-scrollbar\n    [fdkResizeBoundary]=\"elementRef.nativeElement\"\n    class=\"fd-dialog__content\"\n    [class]=\"dialogConfig.dialogPanelClass\"\n    [class.cdk-drag]=\"dialogConfig.draggable\"\n    [class.fd-dialog__content--s]=\"dialogPaddingSize === 'sm'\"\n    [class.fd-dialog__content--m]=\"dialogPaddingSize === 'md'\"\n    [class.fd-dialog__content--l]=\"dialogPaddingSize === 'lg'\"\n    [class.fd-dialog__content--xl]=\"dialogPaddingSize === 'xl'\"\n    [class.fd-dialog__content--mobile]=\"dialogConfig.mobile\"\n    [class.fd-dialog__content--no-mobile-stretch]=\"dialogConfig.mobileOuterSpacing\"\n    [class.fd-dialog__content--draggable-grab]=\"dialogConfig.draggable && !isDragged\"\n    [class.fd-dialog__content--draggable-grabbing]=\"dialogConfig.draggable && isDragged\"\n    [cdkDragDisabled]=\"!dialogConfig.draggable\"\n    [fdkResizeDisabled]=\"!dialogConfig.resizable\"\n    [attr.id]=\"dialogConfig.id\"\n    [attr.aria-label]=\"dialogConfig.ariaLabel\"\n    [attr.aria-labelledby]=\"dialogConfig.ariaLabelledBy\"\n    [attr.aria-describedby]=\"dialogConfig.ariaDescribedBy\"\n    [attr.aria-modal]=\"dialogConfig.ariaModal\"\n    (cdkDragStarted)=\"isDragged = true\"\n    (cdkDragEnded)=\"isDragged = false\"\n    (onResizeEnd)=\"adjustResponsivePadding()\"\n>\n    <span fdkResizeHandle *ngIf=\"dialogConfig.resizable\" class=\"fd-dialog__resize-handle\"></span>\n\n    <div cdkDragHandle [cdkDragHandleDisabled]=\"!dialogConfig.draggable\">\n        <ng-content select=\"fd-dialog-header\"></ng-content>\n    </div>\n\n    <ng-content select=\"fd-dialog-body\"></ng-content>\n\n    <ng-content select=\"fd-dialog-footer\"></ng-content>\n</div>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-dialog{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;justify-content:center;position:fixed}.fd-dialog,.fd-dialog:before{height:100%;left:0;top:0;width:100%}.fd-dialog:before{background-color:var(--sapBlockLayer_Background);content:\"\";opacity:var(--fdDialog_Background_Opacity);position:absolute}.fd-dialog__content{-webkit-box-shadow:var(--sapContent_Shadow3);border-radius:var(--sapElement_BorderCornerRadius);box-shadow:var(--sapContent_Shadow3);display:flex;flex-direction:column;max-height:calc(100vh - 6%);max-width:calc(100vw - 10%);min-height:7.5rem;min-width:20rem;outline:none;overflow:hidden;position:absolute}.fd-dialog__body{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--sapGroup_ContentBackground);flex-grow:1;overflow:auto}.fd-dialog__footer.fd-bar,.fd-dialog__header.fd-bar,.fd-dialog__subheader.fd-bar{flex-shrink:0;padding-left:1rem;padding-right:1rem}.fd-dialog__content--mobile{border-radius:0;height:100vh;max-height:100vh;max-width:100vw;width:100vw}.fd-dialog{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog:after,.fd-dialog:before{box-sizing:inherit;font-size:inherit}.fd-dialog--active{display:flex}.fd-dialog__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-dialog__content:after,.fd-dialog__content:before{box-sizing:inherit;font-size:inherit}.fd-dialog__content--def .fd-dialog__body,.fd-dialog__content--def .fd-dialog__footer.fd-bar,.fd-dialog__content--def .fd-dialog__header.fd-bar,.fd-dialog__content--def .fd-dialog__subheader.fd-bar,.fd-dialog__content--s .fd-dialog__body,.fd-dialog__content--s .fd-dialog__footer.fd-bar,.fd-dialog__content--s .fd-dialog__header.fd-bar,.fd-dialog__content--s .fd-dialog__subheader.fd-bar{padding-left:1rem;padding-right:1rem}.fd-dialog__content--l .fd-dialog__body,.fd-dialog__content--l .fd-dialog__footer.fd-bar,.fd-dialog__content--l .fd-dialog__header.fd-bar,.fd-dialog__content--l .fd-dialog__subheader.fd-bar,.fd-dialog__content--m .fd-dialog__body,.fd-dialog__content--m .fd-dialog__footer.fd-bar,.fd-dialog__content--m .fd-dialog__header.fd-bar,.fd-dialog__content--m .fd-dialog__subheader.fd-bar{padding-left:2rem;padding-right:2rem}.fd-dialog__content--xl .fd-dialog__body,.fd-dialog__content--xl .fd-dialog__footer.fd-bar,.fd-dialog__content--xl .fd-dialog__header.fd-bar,.fd-dialog__content--xl .fd-dialog__subheader.fd-bar{padding-left:3rem;padding-right:3rem}.fd-dialog__content--mobile .fd-dialog__body,.fd-dialog__content--mobile .fd-dialog__footer,.fd-dialog__content--mobile .fd-dialog__header,.fd-dialog__content--mobile .fd-menu__item:first-child,.fd-dialog__content--mobile .fd-menu__item:first-child .fd-menu__link:after,.fd-dialog__content--mobile .fd-menu__item:last-child,.fd-dialog__content--mobile .fd-menu__item:last-child .fd-menu__link:after{border-radius:0}.fd-dialog__content--no-mobile-stretch{border-radius:var(--sapElement_BorderCornerRadius);max-height:calc(100vh - 6%);max-width:calc(100vw - 10%)}.fd-dialog__content--draggable-grab.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grab:hover .fd-dialog__header{cursor:move;cursor:grab}.fd-dialog__content--draggable-grabbing.is-hover .fd-dialog__header,.fd-dialog__content--draggable-grabbing:hover .fd-dialog__header{cursor:move;cursor:grabbing}.fd-dialog__footer.fd-bar .fd-dialog__decisive-button,.fd-dialog__header.fd-bar .fd-dialog__decisive-button{justify-content:center;min-width:4rem}.fd-dialog__body{-webkit-box-sizing:border-box;border:0;border-radius:var(--sapElement_BorderCornerRadius);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 0;position:relative}.fd-dialog__body:after,.fd-dialog__body:before{box-sizing:inherit;font-size:inherit}.fd-dialog__body--no-vertical-padding{padding-bottom:0;padding-top:0}.fd-dialog__body--no-horizontal-padding{padding-left:0;padding-right:0}.fd-dialog__body:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.fd-dialog__body:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-dialog__loader{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:1.5rem 0 .5rem;padding:0;text-align:center}.fd-dialog__loader:after,.fd-dialog__loader:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle{-webkit-box-sizing:border-box;-webkit-box-align:end;-ms-flex-align:end;-webkit-box-pack:end;-ms-flex-pack:end;align-items:flex-end;border:0;bottom:0;box-sizing:border-box;color:var(--sapTextColor);cursor:se-resize;display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:1rem;font-weight:400;forced-color-adjust:none;height:1rem;justify-content:flex-end;line-height:var(--sapContent_LineHeight);line-height:1rem;margin:.125rem;min-width:1rem;overflow:hidden;padding:0;position:absolute;right:0;width:1rem}.fd-dialog__resize-handle:after,.fd-dialog__resize-handle:before{box-sizing:inherit;font-size:inherit}.fd-dialog__resize-handle[dir=rtl],[dir=rtl] .fd-dialog__resize-handle{-webkit-transform:scaleX(-1);-webkit-box-pack:start;-ms-flex-pack:start;cursor:sw-resize;justify-content:flex-start;left:0;right:auto;transform:scaleX(-1)}.fd-dialog__resize-handle:after{color:var(--sapButton_Lite_TextColor);content:\"\\e24f\";font-family:SAP-icons;height:1rem;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-dialog--no-backdrop:not(.fd-dialog--targeted){-webkit-transform:translate(-50%,-50%);left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:1000}.fd-dialog{z-index:999}.fd-dialog__resize-handle{z-index:1001;bottom:0;overflow:hidden}.fd-dialog__resize-handle:after{margin-bottom:-.125rem;display:block}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.ResizeDirective, selector: "[fdkResize]", inputs: ["fdkResizeBoundary", "fdkResizeDisabled", "fdkResizeHandleLocation", "fdkResizeResizeHandleRef"], outputs: ["onResizeStart", "onResizeEnd"] }, { kind: "directive", type: i4$1.ResizeHandleDirective, selector: "[fdkResizeHandle]" }, { kind: "directive", type: i6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i6.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i7.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -678,7 +713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                     type: Optional
                 }] }, { type: DialogRef, decorators: [{
                     type: Optional
-                }] }, { type: i1.Router, decorators: [{
+                }] }, { type: i1$1.Router, decorators: [{
                     type: Optional
                 }] }, { type: i4$1.RtlService, decorators: [{
                     type: Optional
@@ -707,41 +742,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 args: [DialogTitleDirective]
             }], buildComponentCssClass: [] } });
 
-/**
- * Directive that applies fundamental dialog styling to a dialog close button.
- *
- * ```html
- * <button fd-dialog-close-button></button>
- * ```
- */
-class DialogCloseButtonComponent {
-    constructor() {
-        /** Displays dialog close button in mobile mode */
-        this.mobile = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: { mobile: "mobile", title: "title" }, host: { properties: { "attr.aria-label": "\"close\"", "class.fd-button": "true", "class.is-compact": "!mobile", "class.fd-button--transparent": "true", "attr.title": "title" } }, ngImport: i0, template: `<fd-icon glyph="decline"></fd-icon><ng-content></ng-content>`, isInline: true, dependencies: [{ kind: "component", type: i1$1.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogCloseButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/component-selector
-                    selector: '[fd-dialog-close-button]',
-                    host: {
-                        '[attr.aria-label]': '"close"',
-                        '[class.fd-button]': 'true',
-                        '[class.is-compact]': '!mobile',
-                        '[class.fd-button--transparent]': 'true',
-                        '[attr.title]': 'title'
-                    },
-                    template: `<fd-icon glyph="decline"></fd-icon><ng-content></ng-content>`
-                }]
-        }], propDecorators: { mobile: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
-
 /** Dialog component used to create the dialog in object based approach */
 class DialogDefaultComponent {
     /** @hidden */
@@ -772,7 +772,7 @@ class DialogDefaultComponent {
         this._defaultDialogContent?.cancelButtonCallback?.();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogDefaultComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogDefaultComponent, selector: "fd-dialog-default", ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 fd-title [id]=\"_defaultDialogContent?.titleId\">{{ _defaultDialogContent?.title }}</h1>\n        <button\n            fd-dialog-close-button\n            *ngIf=\"_defaultDialogContent?.closeButtonCallback\"\n            [title]=\"_defaultDialogContent?.closeButtonTitle || ''\"\n            (click)=\"_closeButtonClicked()\"\n        ></button>\n        <ng-container *ngIf=\"_defaultDialogContent?.subHeader\">\n            <ng-template fdkTemplate=\"subheader\">\n                <ng-container *ngTemplateOutlet=\"_defaultDialogContent!.subHeader!\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </fd-dialog-header>\n\n    <fd-dialog-body *ngIf=\"_defaultDialogContent?.content\">\n        <ng-container *ngTemplateOutlet=\"_defaultDialogContent?.content!\"></ng-container>\n    </fd-dialog-body>\n\n    <fd-dialog-footer *ngIf=\"_showFooter()\">\n        <fd-button-bar\n            *ngIf=\"_defaultDialogContent?.approveButton\"\n            fdType=\"emphasized\"\n            fdkInitialFocus\n            [label]=\"_defaultDialogContent?.approveButton || ''\"\n            [fdCozy]=\"_defaultDialogConfiguration.mobile\"\n            (click)=\"_approveButtonClicked()\"\n            [ariaLabel]=\"_defaultDialogContent?.approveButtonAriaLabel\"\n            [id]=\"_defaultDialogContent?.approveButtonId\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            *ngIf=\"_defaultDialogContent?.cancelButton\"\n            [label]=\"_defaultDialogContent?.cancelButton || ''\"\n            [fdCozy]=\"_defaultDialogConfiguration.mobile\"\n            (click)=\"_cancelButtonClicked()\"\n            [ariaLabel]=\"_defaultDialogContent?.closeButtonAriaLabel\"\n            [id]=\"_defaultDialogContent?.cancelButtonId\"\n        >\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: i2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: i3.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i4$1.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: DialogDefaultComponent, selector: "fd-dialog-default", ngImport: i0, template: "<fd-dialog>\n    <fd-dialog-header>\n        <h1 fd-title [id]=\"_defaultDialogContent?.titleId\">{{ _defaultDialogContent?.title }}</h1>\n        <button\n            fd-dialog-close-button\n            *ngIf=\"_defaultDialogContent?.closeButtonCallback\"\n            [title]=\"_defaultDialogContent?.closeButtonTitle || ''\"\n            (click)=\"_closeButtonClicked()\"\n        ></button>\n        <ng-container *ngIf=\"_defaultDialogContent?.subHeader\">\n            <ng-template fdkTemplate=\"subheader\">\n                <ng-container *ngTemplateOutlet=\"_defaultDialogContent!.subHeader!\"></ng-container>\n            </ng-template>\n        </ng-container>\n    </fd-dialog-header>\n\n    <fd-dialog-body *ngIf=\"_defaultDialogContent?.content\">\n        <ng-container *ngTemplateOutlet=\"_defaultDialogContent?.content!\"></ng-container>\n    </fd-dialog-body>\n\n    <fd-dialog-footer *ngIf=\"_showFooter()\">\n        <fd-button-bar\n            *ngIf=\"_defaultDialogContent?.approveButton\"\n            fdType=\"emphasized\"\n            fdkInitialFocus\n            [label]=\"_defaultDialogContent?.approveButton || ''\"\n            [fdCozy]=\"_defaultDialogConfiguration.mobile\"\n            (click)=\"_approveButtonClicked()\"\n            [ariaLabel]=\"_defaultDialogContent?.approveButtonAriaLabel\"\n            [id]=\"_defaultDialogContent?.approveButtonId\"\n        >\n        </fd-button-bar>\n        <fd-button-bar\n            *ngIf=\"_defaultDialogContent?.cancelButton\"\n            [label]=\"_defaultDialogContent?.cancelButton || ''\"\n            [fdCozy]=\"_defaultDialogConfiguration.mobile\"\n            (click)=\"_cancelButtonClicked()\"\n            [ariaLabel]=\"_defaultDialogContent?.closeButtonAriaLabel\"\n            [id]=\"_defaultDialogContent?.cancelButtonId\"\n        >\n        </fd-button-bar>\n    </fd-dialog-footer>\n</fd-dialog>\n", dependencies: [{ kind: "component", type: i2.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabel", "ariaLabelledby", "id"] }, { kind: "directive", type: i3$1.ContentDensityDirective, selector: "[fdContentDensity]:not([fdCompact]):not([fdCondensed]):not([fdCozy]),                [fdCompact]:not([fdContentDensity]):not([fdCondensed]):not([fdCozy]),                [fdCondensed]:not([fdContentDensity]):not([fdCompact]):not([fdCozy]),                [fdCozy]:not([fdContentDensity]):not([fdCompact]):not([fdCondensed])", inputs: ["fdContentDensity", "fdCompact", "fdCondensed", "fdCozy"], exportAs: ["fdContentDensity"] }, { kind: "component", type: i3$2.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: i4$1.InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body" }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: DialogDefaultComponent, decorators: [{
             type: Component,
@@ -806,10 +806,10 @@ class DialogContainerComponent extends DynamicComponentContainer {
         this.buildComponentCssClass();
     }
     /** @hidden */
-    constructor(dialogConfig, _dialogRef, _destroyRef, elementRef, changeDetectorRef, injector) {
+    constructor(dialogConfig, ref, _destroyRef, elementRef, changeDetectorRef, injector) {
         super(elementRef, injector, changeDetectorRef);
         this.dialogConfig = dialogConfig;
-        this._dialogRef = _dialogRef;
+        this.ref = ref;
         this._destroyRef = _destroyRef;
         /** The state of the Dialog animations. */
         this._animationState = 'void';
@@ -824,8 +824,8 @@ class DialogContainerComponent extends DynamicComponentContainer {
     onAnimationEnd(event) {
         const { toState } = event;
         if (toState === 'hidden') {
-            this._dialogRef._endClose$.next();
-            this._dialogRef._endClose$.complete();
+            this.ref._endClose$.next();
+            this.ref._endClose$.complete();
         }
     }
     /** @hidden */
@@ -869,7 +869,7 @@ class DialogContainerComponent extends DynamicComponentContainer {
     }
     /** @hidden Returns context for embedded template*/
     _templateContext() {
-        return { $implicit: this._dialogRef, dialogConfig: this.dialogConfig };
+        return { $implicit: this.ref, dialogConfig: this.dialogConfig };
     }
     /** @hidden Load Dialog component from passed object */
     _createFromDefaultDialog(config) {
@@ -887,7 +887,7 @@ class DialogContainerComponent extends DynamicComponentContainer {
             this._animationState = 'hidden';
             this._cdr.detectChanges();
         };
-        this._dialogRef.afterClosed.pipe(takeUntilDestroyed(this._destroyRef)).subscribe({
+        this.ref.afterClosed.pipe(takeUntilDestroyed(this._destroyRef)).subscribe({
             next: () => callback(),
             error: () => callback()
         });
@@ -933,8 +933,12 @@ class DialogBaseService {
         return this._dialogs && this._dialogs.length > 0;
     }
     /** Dismisses all currently open dialogs. */
-    dismissAll() {
-        this._dialogs.forEach((item) => this._destroyDialog(item));
+    dismissAll(reason) {
+        this._dialogs.forEach((item) => {
+            item.instance.ref.dismiss(reason);
+            item.destroy();
+        });
+        this._dialogs = [];
     }
     /** @hidden */
     ngOnDestroy() {
@@ -1108,18 +1112,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                 }]
         }] });
 
-/**
- * Represents the positioning of the dialog on the screen.
- */
-class DialogPosition {
-}
-
 class DialogContentBase {
 }
 
 class DialogDefaultContent extends DialogContentBase {
 }
 
+/**
+ * Represents the positioning of the dialog on the screen.
+ */
+class DialogPosition {
+}
+
 class DialogOverlayContainer extends OverlayContainer {
     /**
      * This method returns the overlay container element. It will lazily