@bravobit/bb-foundation 0.45.0 → 0.45.2

package/fesm2022/bravobit-bb-foundation-dialog.mjs

@@ -1,8 +1,7 @@
-import { take, switchMap } from 'rxjs/operators';
-import { Subject, Subscription, lastValueFrom, fromEvent, race, firstValueFrom } from 'rxjs';
+import { take, filter, switchMap } from 'rxjs/operators';
+import { Subject, Subscription, timer, firstValueFrom, fromEvent, takeUntil } from 'rxjs';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Output, HostListener, booleanAttribute, Optional, Inject, HostBinding, Input, Directive, createEnvironmentInjector, createComponent, Injectable, makeEnvironmentProviders, NgModule } from '@angular/core';
-import { trigger, transition, group, query, style, animate } from '@angular/animations';
+import { InjectionToken, inject, Renderer2, ElementRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, HostListener, booleanAttribute, Optional, Inject, HostBinding, Input, Directive, ViewChild, createEnvironmentInjector, createComponent, Injectable, makeEnvironmentProviders, NgModule } from '@angular/core';
 import { DOCUMENT, NgClass } from '@angular/common';
 import * as i1 from '@bravobit/bb-foundation';
 import { BbFormGroup, BbButton } from '@bravobit/bb-foundation/elements';
@@ -13,12 +12,8 @@ class BbDialogRef {
     // Data.
     _afterClosed$ = new Subject();
     _overlayClicked$ = new Subject();
-    get afterClosed() {
-        return this._afterClosed$.pipe(take(1));
-    }
-    get overlayClicked() {
-        return this._overlayClicked$.pipe(take(1));
-    }
+    afterClosed = this._afterClosed$.pipe(take(1));
+    overlayClicked = this._overlayClicked$.pipe(take(1));
     onOverlayClicked() {
         this._overlayClicked$.next();
     }
@@ -31,115 +26,55 @@ class BbDialogConfig {
     data;
 }
 class DialogConfig {
-    disableContainerAnimations;
-    disableOverlayAnimations;
+    animationMs;
 }
 const DIALOG_CONFIG = new InjectionToken('dialog config');
 
-const bbDialogOverlayAnimation = trigger('bbDialogOverlayAnimation', [
-    transition(':enter, * => open', [
-        group([
-            query('.bb-dialog-overlay-backdrop', [
-                style({ opacity: 0 }),
-                animate('240ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1 }))
-            ]),
-            query('.bb-dialog-modal', [
-                style({ opacity: 0, transform: 'scale(0.98)' }),
-                animate('200ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: 'none' }))
-            ])
-        ])
-    ]),
-    transition(':leave, * => close', [
-        group([
-            query('.bb-dialog-modal', [
-                animate('200ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0, transform: 'scale(0.98)' }))
-            ]),
-            query('.bb-dialog-overlay-backdrop', [
-                animate('240ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0 }))
-            ])
-        ])
-    ])
-]);
-
 class BbDialogOverlay {
     // Dependencies.
     _config = inject(DIALOG_CONFIG, { optional: true });
-    _changeDetectorRef = inject(ChangeDetectorRef);
-    // Readonly data.
-    disableOverlayAnimations = this._config?.disableOverlayAnimations ?? false;
-    // Views.
-    overlayElementRef;
+    _renderer = inject(Renderer2);
+    _elementRef = inject(ElementRef);
+    _document = inject(DOCUMENT);
     // Outputs.
     closeRequested = new EventEmitter();
-    // State.
-    state = 'open';
-    _closed$ = new Subject();
     // Subscriptions.
     _subscription = new Subscription();
     ngOnInit() {
-        this.listenForClicks();
+        this.handleOverlayClicks();
     }
     ngOnDestroy() {
         this._subscription?.unsubscribe();
     }
     onKeyEvent(event) {
-        if (event?.key === 'Escape') {
-            this.closeRequested.emit();
-        }
-    }
-    onAnimationDone(event) {
-        // Check if the dialog is being destroyed.
-        if (!['close'].includes(event?.toState)) {
+        if (event?.key !== 'Escape') {
             return;
         }
-        this._closed$.next();
-        this._closed$.complete();
+        this.closeRequested.emit();
     }
-    close() {
-        // We need change detection to run
-        // here else it won't close in all scenario's.
-        this.state = 'close';
-        this._changeDetectorRef.markForCheck();
-        // Listen for the closed trigger.
-        const observable$ = this._closed$.pipe(take(1));
-        return lastValueFrom(observable$);
+    async close() {
+        this._renderer.addClass(this._elementRef.nativeElement, 'leaving');
+        const timer$ = timer(this._config?.animationMs ?? 240);
+        return firstValueFrom(timer$);
     }
-    listenForClicks() {
-        const element = this.overlayElementRef?.nativeElement ?? null;
-        if (!element) {
-            return;
-        }
-        const mouseDown$ = fromEvent(element, 'mousedown');
-        const touchStart$ = fromEvent(element, 'touchstart');
-        const start$ = race([mouseDown$, touchStart$]);
-        const mouseUp$ = fromEvent(element, 'mouseup');
-        const touchEnd$ = fromEvent(element, 'touchend');
-        const end$ = race([mouseUp$, touchEnd$]);
-        const clicks$ = start$.pipe(switchMap(() => end$));
-        const subscription = clicks$.subscribe(() => this.closeRequested.next());
+    handleOverlayClicks() {
+        const element = this._elementRef.nativeElement ?? null;
+        const subscription = fromEvent(element, 'pointerdown').pipe(filter(event => event?.target === element), switchMap(() => fromEvent(this._document, 'pointerup').pipe(filter((event) => event?.target === element), takeUntil(fromEvent(this._document, 'pointermove'))))).subscribe(() => {
+            this.closeRequested.emit();
+        });
         this._subscription.add(subscription);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: BbDialogOverlay, isStandalone: true, selector: "bb-dialog-overlay", outputs: { closeRequested: "closeRequested" }, host: { listeners: { "window:keyup": "onKeyEvent($event)", "@bbDialogOverlayAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogOverlayAnimation": "state", "@.disabled": "disableOverlayAnimations" }, classAttribute: "bb-dialog-overlay" }, viewQueries: [{ propertyName: "overlayElementRef", first: true, predicate: ["overlay"], descendants: true, static: true }], ngImport: i0, template: "<div #overlay\n     class=\"bb-dialog-overlay-backdrop\"></div>\n\n<ng-content select=\"[bb-dialog-modal]\"></ng-content>\n", styles: [".bb-dialog-overlay,.bb-dialog-overlay-backdrop{inset:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:1.5rem}.bb-dialog-overlay-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-overlay-component{z-index:1001;display:block;position:relative}\n"], animations: [bbDialogOverlayAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: BbDialogOverlay, isStandalone: true, selector: "bb-dialog-overlay", outputs: { closeRequested: "closeRequested" }, host: { listeners: { "window:keyup": "onKeyEvent($event)" }, classAttribute: "bb-dialog-overlay" }, ngImport: i0, template: "<ng-content select=\"[bb-dialog-modal]\"></ng-content>\n", styles: [".bb-dialog-overlay{inset:0;display:flex;z-index:1000;position:fixed;padding:1.5rem;flex-direction:column;will-change:background-color;background-color:#1119;animation:dialogOverlayEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving{animation:dialogOverlayLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}@keyframes dialogOverlayEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogOverlayLeaving{to{background-color:transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogOverlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogOverlay, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'bb-dialog-overlay',
-                        '[@bbDialogOverlayAnimation]': 'state',
-                        '[@.disabled]': 'disableOverlayAnimations'
-                    }, preserveWhitespaces: false, animations: [bbDialogOverlayAnimation], standalone: true, template: "<div #overlay\n     class=\"bb-dialog-overlay-backdrop\"></div>\n\n<ng-content select=\"[bb-dialog-modal]\"></ng-content>\n", styles: [".bb-dialog-overlay,.bb-dialog-overlay-backdrop{inset:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:1.5rem}.bb-dialog-overlay-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-overlay-component{z-index:1001;display:block;position:relative}\n"] }]
-        }], propDecorators: { overlayElementRef: [{
-                type: ViewChild,
-                args: ['overlay', { static: true }]
-            }], closeRequested: [{
+            args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-overlay' }, preserveWhitespaces: false, standalone: true, template: "<ng-content select=\"[bb-dialog-modal]\"></ng-content>\n", styles: [".bb-dialog-overlay{inset:0;display:flex;z-index:1000;position:fixed;padding:1.5rem;flex-direction:column;will-change:background-color;background-color:#1119;animation:dialogOverlayEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving{animation:dialogOverlayLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}@keyframes dialogOverlayEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogOverlayLeaving{to{background-color:transparent}}\n"] }]
+        }], propDecorators: { closeRequested: [{
                 type: Output
             }], onKeyEvent: [{
                 type: HostListener,
                 args: ['window:keyup', ['$event']]
-            }], onAnimationDone: [{
-                type: HostListener,
-                args: ['@bbDialogOverlayAnimation.done', ['$event']]
             }] } });
 
 class BbDialogModal {
@@ -170,16 +105,16 @@ class BbDialogModal {
             ? this._renderer.removeStyle(element, 'overflow')
             : this._renderer.setStyle(element, 'overflow', 'hidden');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogModal, deps: [{ token: i1.Patch }, { token: i0.Renderer2 }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.10", type: BbDialogModal, isStandalone: true, selector: "[bb-dialog-modal]", inputs: { maxWidth: "maxWidth", withoutBodyPadding: ["withoutBodyPadding", "withoutBodyPadding", booleanAttribute] }, host: { attributes: { "role": "dialog" }, properties: { "class.without-body-padding": "withoutBodyPadding", "style.max-width": "this.maxWidth" }, classAttribute: "bb-dialog-modal" }, ngImport: i0, template: "<ng-content select=\"[bb-dialog-header]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;pointer-events:auto;border-radius:.25rem;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 3rem)}.bb-dialog-modal.without-body-padding>.bb-dialog-modal-body{padding:0}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogModal, deps: [{ token: i1.Patch }, { token: i0.Renderer2 }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.12", type: BbDialogModal, isStandalone: true, selector: "[bb-dialog-modal]", inputs: { maxWidth: "maxWidth", withoutBodyPadding: ["withoutBodyPadding", "withoutBodyPadding", booleanAttribute] }, host: { attributes: { "role": "dialog" }, properties: { "class.without-body-padding": "withoutBodyPadding", "style.max-width": "this.maxWidth" }, classAttribute: "bb-dialog-modal" }, ngImport: i0, template: "<ng-content select=\"[bb-dialog-header]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;pointer-events:auto;border-radius:.25rem;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 3rem);animation:dialogModalEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-modal.without-body-padding>.bb-dialog-modal-body{padding:0}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}@keyframes dialogModalEntering{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}@keyframes dialogModalLeaving{0%{opacity:1;transform:none}to{opacity:0;transform:scale(.98)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogModal, decorators: [{
             type: Component,
             args: [{ selector: '[bb-dialog-modal]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bb-dialog-modal',
                         '[class.without-body-padding]': 'withoutBodyPadding',
                         'role': 'dialog'
-                    }, preserveWhitespaces: false, standalone: true, template: "<ng-content select=\"[bb-dialog-header]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;pointer-events:auto;border-radius:.25rem;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 3rem)}.bb-dialog-modal.without-body-padding>.bb-dialog-modal-body{padding:0}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}\n"] }]
+                    }, preserveWhitespaces: false, standalone: true, template: "<ng-content select=\"[bb-dialog-header]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;pointer-events:auto;border-radius:.25rem;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 3rem);animation:dialogModalEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-modal.without-body-padding>.bb-dialog-modal-body{padding:0}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}@keyframes dialogModalEntering{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}@keyframes dialogModalLeaving{0%{opacity:1;transform:none}to{opacity:0;transform:scale(.98)}}\n"] }]
         }], ctorParameters: () => [{ type: i1.Patch }, { type: i0.Renderer2 }, { type: Document, decorators: [{
                     type: Optional
                 }, {
@@ -198,10 +133,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
 class BbDialogHeader {
     // Outputs.
     closeRequested = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: BbDialogHeader, isStandalone: true, selector: "[bb-dialog-header]", outputs: { closeRequested: "closeRequested" }, host: { classAttribute: "bb-dialog-header" }, ngImport: i0, template: "<div class=\"bb-dialog-header-row\">\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (closeRequested?.observed) {\n        <button (click)=\"closeRequested?.emit()\"\n                type=\"button\"\n                class=\"bb-dialog-header-close\">\n        </button>\n    }\n</div>\n\n<nav class=\"bb-dialog-header-navigation\">\n    <ng-content select=\"[bb-dialog-link]\"></ng-content>\n</nav>\n", styles: [".bb-dialog-header{display:flex;min-height:3.75rem;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{color:#111;max-width:100%;font-weight:500;overflow:hidden;font-size:1.25rem;white-space:nowrap;text-overflow:ellipsis}.bb-dialog-header-row,.bb-dialog-header-navigation{width:100%;display:flex;align-items:center}.bb-dialog-header-row{padding:.75rem 1.5rem}.bb-dialog-header-navigation{width:100%;overflow-x:auto;padding:0 1.5rem;white-space:nowrap}.bb-dialog-header-navigation:empty{margin:0;height:0;padding:0;visibility:hidden}.bb-dialog-header-content{flex:1}.bb-dialog-header-close{width:2rem;height:2rem;border:none;min-width:2rem;min-height:2rem;overflow:hidden;position:relative;margin-left:.75rem;display:inline-block;margin-right:-.75rem;border-radius:.25rem;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;content:\"\";height:.125rem;margin-top:-1px;position:absolute;background-color:#999}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover,.bb-dialog-header-close:focus{background-color:#e6e6e6}.bb-dialog-header-close:active{background-color:#d9d9d9}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: BbDialogHeader, isStandalone: true, selector: "[bb-dialog-header]", outputs: { closeRequested: "closeRequested" }, host: { classAttribute: "bb-dialog-header" }, ngImport: i0, template: "<div class=\"bb-dialog-header-row\">\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (closeRequested?.observed) {\n        <button (click)=\"closeRequested?.emit()\"\n                type=\"button\"\n                class=\"bb-dialog-header-close\">\n        </button>\n    }\n</div>\n\n<nav class=\"bb-dialog-header-navigation\">\n    <ng-content select=\"[bb-dialog-link]\"></ng-content>\n</nav>\n", styles: [".bb-dialog-header{display:flex;min-height:3.75rem;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{color:#111;max-width:100%;font-weight:500;overflow:hidden;font-size:1.25rem;white-space:nowrap;text-overflow:ellipsis}.bb-dialog-header-row,.bb-dialog-header-navigation{width:100%;display:flex;align-items:center}.bb-dialog-header-row{padding:.75rem 1.5rem}.bb-dialog-header-navigation{width:100%;overflow-x:auto;padding:0 1.5rem;white-space:nowrap}.bb-dialog-header-navigation:empty{margin:0;height:0;padding:0;visibility:hidden}.bb-dialog-header-content{flex:1}.bb-dialog-header-close{width:2rem;height:2rem;border:none;min-width:2rem;min-height:2rem;overflow:hidden;position:relative;margin-left:.75rem;display:inline-block;margin-right:-.75rem;border-radius:.25rem;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;content:\"\";height:.125rem;margin-top:-1px;position:absolute;background-color:#999}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover,.bb-dialog-header-close:focus{background-color:#e6e6e6}.bb-dialog-header-close:active{background-color:#d9d9d9}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogHeader, decorators: [{
             type: Component,
             args: [{ selector: '[bb-dialog-header]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-header' }, preserveWhitespaces: false, standalone: true, template: "<div class=\"bb-dialog-header-row\">\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (closeRequested?.observed) {\n        <button (click)=\"closeRequested?.emit()\"\n                type=\"button\"\n                class=\"bb-dialog-header-close\">\n        </button>\n    }\n</div>\n\n<nav class=\"bb-dialog-header-navigation\">\n    <ng-content select=\"[bb-dialog-link]\"></ng-content>\n</nav>\n", styles: [".bb-dialog-header{display:flex;min-height:3.75rem;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{color:#111;max-width:100%;font-weight:500;overflow:hidden;font-size:1.25rem;white-space:nowrap;text-overflow:ellipsis}.bb-dialog-header-row,.bb-dialog-header-navigation{width:100%;display:flex;align-items:center}.bb-dialog-header-row{padding:.75rem 1.5rem}.bb-dialog-header-navigation{width:100%;overflow-x:auto;padding:0 1.5rem;white-space:nowrap}.bb-dialog-header-navigation:empty{margin:0;height:0;padding:0;visibility:hidden}.bb-dialog-header-content{flex:1}.bb-dialog-header-close{width:2rem;height:2rem;border:none;min-width:2rem;min-height:2rem;overflow:hidden;position:relative;margin-left:.75rem;display:inline-block;margin-right:-.75rem;border-radius:.25rem;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;content:\"\";height:.125rem;margin-top:-1px;position:absolute;background-color:#999}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover,.bb-dialog-header-close:focus{background-color:#e6e6e6}.bb-dialog-header-close:active{background-color:#d9d9d9}\n"] }]
         }], propDecorators: { closeRequested: [{
@@ -209,60 +144,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
             }] } });
 
 class BbDialogLink {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: BbDialogLink, isStandalone: true, selector: "[bb-dialog-link]", host: { classAttribute: "bb-dialog-link" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{border:none;height:2rem;display:flex;font-size:1rem;appearance:none;font-weight:500;white-space:nowrap;align-items:center;color:#6b5c5c!important;background-color:transparent;text-decoration:none!important;border-bottom:2px solid transparent}.bb-dialog-link+.bb-dialog-link{margin-left:.75rem}.bb-dialog-link:hover:not(.disabled){border-bottom:2px solid rgba(117,119,148,.2)}.bb-dialog-link.active,.bb-dialog-link.active:hover{color:#5b53ff!important;border-bottom-color:#5b53ff}.bb-dialog-link.disabled,.bb-dialog-link.disabled:focus,.bb-dialog-link.disabled:hover,.bb-dialog-link.disabled:active{opacity:.4;cursor:default;box-shadow:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: BbDialogLink, isStandalone: true, selector: "[bb-dialog-link]", host: { classAttribute: "bb-dialog-link" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{border:none;height:2rem;display:flex;font-size:1rem;appearance:none;font-weight:500;white-space:nowrap;align-items:center;color:#6b5c5c!important;background-color:transparent;text-decoration:none!important;border-bottom:2px solid transparent}.bb-dialog-link+.bb-dialog-link{margin-left:.75rem}.bb-dialog-link:hover:not(.disabled){border-bottom:2px solid rgba(117,119,148,.2)}.bb-dialog-link.active,.bb-dialog-link.active:hover{color:#5b53ff!important;border-bottom-color:#5b53ff}.bb-dialog-link.disabled,.bb-dialog-link.disabled:focus,.bb-dialog-link.disabled:hover,.bb-dialog-link.disabled:active{opacity:.4;cursor:default;box-shadow:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogLink, decorators: [{
             type: Component,
             args: [{ selector: '[bb-dialog-link]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-link' }, preserveWhitespaces: false, standalone: true, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{border:none;height:2rem;display:flex;font-size:1rem;appearance:none;font-weight:500;white-space:nowrap;align-items:center;color:#6b5c5c!important;background-color:transparent;text-decoration:none!important;border-bottom:2px solid transparent}.bb-dialog-link+.bb-dialog-link{margin-left:.75rem}.bb-dialog-link:hover:not(.disabled){border-bottom:2px solid rgba(117,119,148,.2)}.bb-dialog-link.active,.bb-dialog-link.active:hover{color:#5b53ff!important;border-bottom-color:#5b53ff}.bb-dialog-link.disabled,.bb-dialog-link.disabled:focus,.bb-dialog-link.disabled:hover,.bb-dialog-link.disabled:active{opacity:.4;cursor:default;box-shadow:none}\n"] }]
         }] });
 
 class BbDialogActions {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: BbDialogActions, isStandalone: true, selector: "[bb-dialog-actions]", host: { classAttribute: "bb-dialog-actions" }, ngImport: i0, template: "<bb-form-group class=\"end\">\n    <ng-content></ng-content>\n</bb-form-group>\n", styles: [".bb-dialog-actions{display:block;padding:1.25rem 1.5rem;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}\n"], dependencies: [{ kind: "component", type: BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: BbDialogActions, isStandalone: true, selector: "[bb-dialog-actions]", host: { classAttribute: "bb-dialog-actions" }, ngImport: i0, template: "<bb-form-group class=\"end\">\n    <ng-content></ng-content>\n</bb-form-group>\n", styles: [".bb-dialog-actions{display:block;padding:1.25rem 1.5rem;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}\n"], dependencies: [{ kind: "component", type: BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogActions, decorators: [{
             type: Component,
             args: [{ selector: '[bb-dialog-actions]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-actions' }, preserveWhitespaces: false, standalone: true, imports: [BbFormGroup], template: "<bb-form-group class=\"end\">\n    <ng-content></ng-content>\n</bb-form-group>\n", styles: [".bb-dialog-actions{display:block;padding:1.25rem 1.5rem;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}\n"] }]
         }] });
 
-const bbDialogContainerAnimation = trigger('bbDialogContainerAnimation', [
-    transition(':enter', [
-        group([
-            query('.bb-dialog-container-backdrop', [
-                style({ opacity: 0 }),
-                animate('180ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1 }))
-            ]),
-            query('.bb-dialog-container-component', [
-                style({ opacity: 0, transform: 'scale(0.96)' }),
-                animate('180ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: 'none' }))
-            ])
-        ])
-    ]),
-    transition(':leave', [
-        group([
-            query('.bb-dialog-container-backdrop', [
-                animate('180ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0 }))
-            ]),
-            query('.bb-dialog-container-component', [
-                animate('180ms cubic-bezier(0, 0, 0.2, 1)', style({
-                    opacity: 0,
-                    transform: 'scale(0.96)'
-                }))
-            ])
-        ])
-    ])
-]);
-
 class BbDialogInsertion {
     viewContainerRef;
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: BbDialogInsertion, isStandalone: true, selector: "[bbDialogInsertion]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: BbDialogInsertion, isStandalone: true, selector: "[bbDialogInsertion]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogInsertion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogInsertion, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bbDialogInsertion]',
@@ -273,80 +180,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImpo
 class BbDialogContainer {
     // Dependencies.
     _config = inject(DIALOG_CONFIG, { optional: true });
-    // Readonly data.
-    disableContainerAnimations = this._config?.disableContainerAnimations ?? false;
-    // Views.
-    backdropElementRef;
+    _renderer = inject(Renderer2);
+    _elementRef = inject(ElementRef);
+    _document = inject(DOCUMENT);
     // Views.
     insertion;
     // Data.
     componentRef = null;
     childComponentType = null;
     // State.
-    overlayClicked$ = new Subject();
-    // Subscription.
+    _overlayClicked$ = new Subject();
+    onOverlayClicked = this._overlayClicked$.pipe(take(1));
+    // Subscriptions.
     _subscription = new Subscription();
-    get onOverlayClicked() {
-        return this.overlayClicked$.pipe(take(1));
-    }
     ngOnInit() {
-        // Load the child component.
+        this.handleOverlayClicks();
         this.loadChildComponent(this.childComponentType);
-        // Listen for mouse click on the dialog container.
-        this.listenForClicks();
     }
     ngOnDestroy() {
         this._subscription?.unsubscribe();
     }
-    onAnimationDone(event) {
-        // Check if the dialog is being destroyed.
-        if (event?.toState !== 'void') {
-            return;
-        }
-        // Destroy the ref if it exists.
-        this.componentRef?.destroy();
-    }
-    listenForClicks() {
-        const element = this.backdropElementRef?.nativeElement ?? null;
-        if (!element) {
-            return;
-        }
-        const mouseDown$ = fromEvent(element, 'mousedown');
-        const touchStart$ = fromEvent(element, 'touchstart');
-        const start$ = race([mouseDown$, touchStart$]);
-        const mouseUp$ = fromEvent(element, 'mouseup');
-        const touchEnd$ = fromEvent(element, 'touchend');
-        const end$ = race([mouseUp$, touchEnd$]);
-        const clicks$ = start$.pipe(switchMap(() => end$));
-        const subscription = clicks$.subscribe(() => this.overlayClicked$.next());
-        this._subscription.add(subscription);
+    async close() {
+        this._renderer.addClass(this._elementRef.nativeElement, 'leaving');
+        const timer$ = timer(this._config?.animationMs ?? 240);
+        return firstValueFrom(timer$);
     }
     loadChildComponent(componentType) {
-        // Get the view container ref and clear it.
         const viewContainerRef = this.insertion.viewContainerRef;
         viewContainerRef.clear();
-        // Create an instance of the component.
         this.componentRef = viewContainerRef.createComponent(componentType);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.10", type: BbDialogContainer, isStandalone: true, selector: "bb-dialog-container", host: { listeners: { "@bbDialogContainerAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogContainerAnimation": "true", "@.disabled": "disableContainerAnimations" }, classAttribute: "bb-dialog-container" }, viewQueries: [{ propertyName: "backdropElementRef", first: true, predicate: ["backdrop"], descendants: true, static: true }, { propertyName: "insertion", first: true, predicate: BbDialogInsertion, descendants: true, static: true }], ngImport: i0, template: "<div #backdrop\n     class=\"bb-dialog-container-backdrop\"></div>\n\n<div class=\"bb-dialog-container-component\">\n    <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container,.bb-dialog-container-backdrop{inset:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}\n"], dependencies: [{ kind: "directive", type: BbDialogInsertion, selector: "[bbDialogInsertion]" }], animations: [bbDialogContainerAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    handleOverlayClicks() {
+        const element = this._elementRef.nativeElement ?? null;
+        const subscription = fromEvent(element, 'pointerdown').pipe(filter(event => event?.target === element), switchMap(() => fromEvent(this._document, 'pointerup').pipe(filter((event) => event?.target === element), takeUntil(fromEvent(this._document, 'pointermove'))))).subscribe(() => {
+            this._overlayClicked$.next();
+        });
+        this._subscription.add(subscription);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: BbDialogContainer, isStandalone: true, selector: "bb-dialog-container", host: { classAttribute: "bb-dialog-container" }, viewQueries: [{ propertyName: "insertion", first: true, predicate: BbDialogInsertion, descendants: true, static: true }], ngImport: i0, template: "<div class=\"bb-dialog-container-component\">\n    <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container{inset:0;z-index:1000;display:flex;position:fixed;will-change:opacity;background-color:#1119;animation:dialogContainerEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving{animation:dialogContainerLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}@keyframes dialogContainerEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogContainerLeaving{to{background-color:transparent}}\n"], dependencies: [{ kind: "directive", type: BbDialogInsertion, selector: "[bbDialogInsertion]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        'class': 'bb-dialog-container',
-                        '[@bbDialogContainerAnimation]': 'true',
-                        '[@.disabled]': 'disableContainerAnimations'
-                    }, preserveWhitespaces: false, animations: [bbDialogContainerAnimation], standalone: true, imports: [BbDialogInsertion], template: "<div #backdrop\n     class=\"bb-dialog-container-backdrop\"></div>\n\n<div class=\"bb-dialog-container-component\">\n    <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container,.bb-dialog-container-backdrop{inset:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}\n"] }]
-        }], propDecorators: { backdropElementRef: [{
-                type: ViewChild,
-                args: ['backdrop', { static: true }]
-            }], insertion: [{
+            args: [{ selector: 'bb-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-container' }, preserveWhitespaces: false, standalone: true, imports: [BbDialogInsertion], template: "<div class=\"bb-dialog-container-component\">\n    <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container{inset:0;z-index:1000;display:flex;position:fixed;will-change:opacity;background-color:#1119;animation:dialogContainerEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving{animation:dialogContainerLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}@keyframes dialogContainerEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogContainerLeaving{to{background-color:transparent}}\n"] }]
+        }], propDecorators: { insertion: [{
                 type: ViewChild,
                 args: [BbDialogInsertion, { static: true }]
-            }], onAnimationDone: [{
-                type: HostListener,
-                args: ['@bbDialogContainerAnimation.done', ['$event']]
             }] } });
 
 let nextUniqueId = 0;
@@ -372,10 +251,10 @@ class BbDialogConfirm {
     onClose(result) {
         this._dialogRef.close(result);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogConfirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.10", type: BbDialogConfirm, isStandalone: true, selector: "bb-dialog-confirm", host: { classAttribute: "bb-dialog-confirm" }, viewQueries: [{ propertyName: "confirmButton", first: true, predicate: ["confirm"], descendants: true, read: BbButton }], ngImport: i0, template: "<div [attr.aria-labelledby]=\"dialogId\"\n     [maxWidth]=\"width\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        @if (title; as titleContent) {\n            <h1 [id]=\"dialogId\">\n                <ng-template [bbTemplate]=\"titleContent\">\n                    {{ $any(titleContent) | bbLocalize:{optional: true} }}\n                </ng-template>\n            </h1>\n        }\n    </header>\n\n    @if (description; as descriptionContent) {\n        <p class=\"bb-dialog-confirm-description\">\n            <ng-template [bbTemplate]=\"descriptionContent\">\n                {{ $any(descriptionContent) | bbLocalize:{optional: true} }}\n            </ng-template>\n        </p>\n    }\n\n    <footer class=\"bb-dialog-confirm-footer\">\n        @if (cancelButtonText; as cancelButtonTextLabel) {\n            <button [ngClass]=\"cancelButtonClass ? cancelButtonClass : 'secondary full'\"\n                    (click)=\"onClose(false)\"\n                    bb-button\n                    type=\"button\">\n                {{ cancelButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n        @if (confirmButtonText; as confirmButtonTextLabel) {\n            <button #confirm\n                    [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive full'\"\n                    (click)=\"onClose(true)\"\n                    bb-button\n                    type=\"button\">\n                {{ confirmButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}.bb-dialog-confirm>.bb-dialog-modal>.bb-dialog-modal-body{background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-dialog-confirm-description{line-height:2;font-size:.875rem}.bb-dialog-confirm-footer{display:flex;margin-top:1.5rem;flex-direction:column}.bb-dialog-confirm-footer>*+*{margin-top:1rem}@media only screen and (min-width: 768px){.bb-dialog-confirm-footer{flex-direction:row}.bb-dialog-confirm-footer>*+*{margin-top:0;margin-left:1rem}}\n"], dependencies: [{ kind: "component", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: ["maxWidth", "withoutBodyPadding"] }, { kind: "component", type: BbDialogHeader, selector: "[bb-dialog-header]", outputs: ["closeRequested"] }, { kind: "directive", type: BbFocusTrap, selector: "[bbFocusTrap]" }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogConfirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: BbDialogConfirm, isStandalone: true, selector: "bb-dialog-confirm", host: { classAttribute: "bb-dialog-confirm" }, viewQueries: [{ propertyName: "confirmButton", first: true, predicate: ["confirm"], descendants: true, read: BbButton }], ngImport: i0, template: "<div [attr.aria-labelledby]=\"dialogId\"\n     [maxWidth]=\"width\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        @if (title; as titleContent) {\n            <h1 [id]=\"dialogId\">\n                <ng-template [bbTemplate]=\"titleContent\">\n                    {{ $any(titleContent) | bbLocalize:{optional: true} }}\n                </ng-template>\n            </h1>\n        }\n    </header>\n\n    @if (description; as descriptionContent) {\n        <p class=\"bb-dialog-confirm-description\">\n            <ng-template [bbTemplate]=\"descriptionContent\">\n                {{ $any(descriptionContent) | bbLocalize:{optional: true} }}\n            </ng-template>\n        </p>\n    }\n\n    <footer class=\"bb-dialog-confirm-footer\">\n        @if (cancelButtonText; as cancelButtonTextLabel) {\n            <button [ngClass]=\"cancelButtonClass ? cancelButtonClass : 'secondary full'\"\n                    (click)=\"onClose(false)\"\n                    bb-button\n                    type=\"button\">\n                {{ cancelButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n        @if (confirmButtonText; as confirmButtonTextLabel) {\n            <button #confirm\n                    [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive full'\"\n                    (click)=\"onClose(true)\"\n                    bb-button\n                    type=\"button\">\n                {{ confirmButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}.bb-dialog-confirm>.bb-dialog-modal>.bb-dialog-modal-body{background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-dialog-confirm-description{line-height:2;font-size:.875rem}.bb-dialog-confirm-footer{display:flex;margin-top:1.5rem;flex-direction:column}.bb-dialog-confirm-footer>*+*{margin-top:1rem}@media only screen and (min-width: 768px){.bb-dialog-confirm-footer{flex-direction:row}.bb-dialog-confirm-footer>*+*{margin-top:0;margin-left:1rem}}\n"], dependencies: [{ kind: "component", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: ["maxWidth", "withoutBodyPadding"] }, { kind: "component", type: BbDialogHeader, selector: "[bb-dialog-header]", outputs: ["closeRequested"] }, { kind: "directive", type: BbFocusTrap, selector: "[bbFocusTrap]" }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbDialogConfirm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbDialogConfirm, decorators: [{
             type: Component,
             args: [{ selector: 'bb-dialog-confirm', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-confirm' }, standalone: true, imports: [BbDialogModal, BbDialogHeader, BbFocusTrap, BbLocalize, BbTemplate, NgClass, BbButton], template: "<div [attr.aria-labelledby]=\"dialogId\"\n     [maxWidth]=\"width\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        @if (title; as titleContent) {\n            <h1 [id]=\"dialogId\">\n                <ng-template [bbTemplate]=\"titleContent\">\n                    {{ $any(titleContent) | bbLocalize:{optional: true} }}\n                </ng-template>\n            </h1>\n        }\n    </header>\n\n    @if (description; as descriptionContent) {\n        <p class=\"bb-dialog-confirm-description\">\n            <ng-template [bbTemplate]=\"descriptionContent\">\n                {{ $any(descriptionContent) | bbLocalize:{optional: true} }}\n            </ng-template>\n        </p>\n    }\n\n    <footer class=\"bb-dialog-confirm-footer\">\n        @if (cancelButtonText; as cancelButtonTextLabel) {\n            <button [ngClass]=\"cancelButtonClass ? cancelButtonClass : 'secondary full'\"\n                    (click)=\"onClose(false)\"\n                    bb-button\n                    type=\"button\">\n                {{ cancelButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n        @if (confirmButtonText; as confirmButtonTextLabel) {\n            <button #confirm\n                    [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive full'\"\n                    (click)=\"onClose(true)\"\n                    bb-button\n                    type=\"button\">\n                {{ confirmButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}.bb-dialog-confirm>.bb-dialog-modal>.bb-dialog-modal-body{background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-dialog-confirm-description{line-height:2;font-size:.875rem}.bb-dialog-confirm-footer{display:flex;margin-top:1.5rem;flex-direction:column}.bb-dialog-confirm-footer>*+*{margin-top:1rem}@media only screen and (min-width: 768px){.bb-dialog-confirm-footer{flex-direction:row}.bb-dialog-confirm-footer>*+*{margin-top:0;margin-left:1rem}}\n"] }]
         }], propDecorators: { confirmButton: [{
@@ -423,7 +302,10 @@ class Dialog {
         dialogComponentRef.instance.childComponentType = componentType;
         dialogComponentRef.instance.onOverlayClicked.subscribe(() => dialogRef.onOverlayClicked());
         // Listen for close events.
-        dialogRef.afterClosed.subscribe(() => this.deleteDialog(dialogComponentRef));
+        dialogRef.afterClosed.subscribe(async () => {
+            await dialogComponentRef?.instance?.close();
+            return this.deleteDialog(dialogComponentRef);
+        });
         // Return the reference.
         return dialogRef;
     }
@@ -438,10 +320,10 @@ class Dialog {
         dialogComponentRef.destroy();
         dialogComponentRef = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: Dialog, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: Dialog, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: Dialog, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: Dialog, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: Dialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: Dialog, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -468,10 +350,10 @@ class BbConfirm {
         }
         this.confirm.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbConfirm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.10", type: BbConfirm, isStandalone: true, selector: "[bbConfirm]", inputs: { bbConfirmTitle: "bbConfirmTitle", bbConfirmDescription: "bbConfirmDescription", bbConfirmButtonText: "bbConfirmButtonText", bbCancelButtonText: "bbCancelButtonText" }, outputs: { confirm: "bbConfirm" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbConfirm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: BbConfirm, isStandalone: true, selector: "[bbConfirm]", inputs: { bbConfirmTitle: "bbConfirmTitle", bbConfirmDescription: "bbConfirmDescription", bbConfirmButtonText: "bbConfirmButtonText", bbCancelButtonText: "bbCancelButtonText" }, outputs: { confirm: "bbConfirm" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: BbConfirm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BbConfirm, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bbConfirm]',
@@ -508,8 +390,8 @@ class DialogModule {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.10", ngImport: i0, type: DialogModule, imports: [BbDialogContainer,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: DialogModule, imports: [BbDialogContainer,
             BbDialogOverlay,
             BbDialogModal,
             BbDialogHeader,
@@ -523,10 +405,10 @@ class DialogModule {
             BbDialogLink,
             BbDialogActions,
             BbConfirm] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DialogModule, imports: [BbDialogActions,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogModule, imports: [BbDialogActions,
             BbDialogConfirm] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.10", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [