@bravobit/bb-foundation 0.21.4 → 0.22.0

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

@@ -1,11 +1,11 @@
 import { take, switchMap } from 'rxjs/operators';
-import { Subject, lastValueFrom, fromEvent, race } from 'rxjs';
+import { Subject, Subscription, lastValueFrom, fromEvent, race } from 'rxjs';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostListener, HostBinding, Directive, ViewChild, Injectable, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, HostListener, Optional, Inject, HostBinding, Input, Directive, ViewChild, Injectable, NgModule } from '@angular/core';
 import { trigger, transition, group, query, style, animate } from '@angular/animations';
-import * as i1 from '@bravobit/bb-foundation';
 import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import * as i1 from '@bravobit/bb-foundation';
 import * as i4 from '@bravobit/bb-foundation/elements';
 import { BbButton, ElementsModule } from '@bravobit/bb-foundation/elements';
 import * as i8 from '@bravobit/bb-foundation/localize';
@@ -34,37 +34,57 @@ class BbDialogRef {
 class BbDialogConfig {
 }
 
+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 {
     constructor(_elementRef, _changeDetection) {
         this._elementRef = _elementRef;
         this._changeDetection = _changeDetection;
-        // Inputs.
-        this.animations = true;
         // Outputs.
         this.closeRequested = new EventEmitter();
         // State.
-        this._state = 'open';
+        this.state = 'open';
         this._closed$ = new Subject();
+        // Subscriptions.
+        this._subscription = new Subscription();
     }
-    get state() {
-        return this.animations
-            ? this._state
-            : 'none';
-    }
-    ngAfterViewInit() {
+    ngOnInit() {
         this.listenForClicks();
     }
     ngOnDestroy() {
         this._subscription?.unsubscribe();
     }
     onKeyEvent(event) {
-        if (event.key === 'Escape') {
+        if (event?.key === 'Escape') {
             this.closeRequested.emit();
         }
     }
     onAnimationDone(event) {
         // Check if the dialog is being destroyed.
-        if (!['close', 'none'].includes(event.toState)) {
+        if (!['close'].includes(event?.toState)) {
             return;
         }
         this._closed$.next();
@@ -73,99 +93,51 @@ class BbDialogOverlay {
     close() {
         // We need change detection to run
         // here else it won't close in all scenario's.
-        this._state = 'close';
+        this.state = 'close';
         this._changeDetection.markForCheck();
         // Listen for the closed trigger.
         const observable$ = this._closed$.pipe(take(1));
         return lastValueFrom(observable$);
     }
     listenForClicks() {
-        if (!this._elementRef || !this._elementRef.nativeElement) {
+        const element = this._elementRef?.nativeElement ?? null;
+        if (!element) {
             return;
         }
-        const mouseDown$ = fromEvent(this._elementRef.nativeElement, 'mousedown');
-        const touchStart$ = fromEvent(this._elementRef.nativeElement, 'touchstart');
+        const mouseDown$ = fromEvent(element, 'mousedown');
+        const touchStart$ = fromEvent(element, 'touchstart');
         const start$ = race([mouseDown$, touchStart$]);
-        const mouseUp$ = fromEvent(this._elementRef.nativeElement, 'mouseup');
-        const touchEnd$ = fromEvent(this._elementRef.nativeElement, 'touchend');
+        const mouseUp$ = fromEvent(element, 'mouseup');
+        const touchEnd$ = fromEvent(element, 'touchend');
         const end$ = race([mouseUp$, touchEnd$]);
-        this._subscription = start$.pipe(switchMap(() => end$)).subscribe(() => {
-            this.closeRequested.next();
-        });
+        const clicks$ = start$.pipe(switchMap(() => end$));
+        const subscription = clicks$.subscribe(() => this.closeRequested.next());
+        this._subscription.add(subscription);
     }
 }
-BbDialogOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogOverlay, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BbDialogOverlay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogOverlay, selector: "bb-dialog-overlay", inputs: { animations: "animations" }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "window:keyup": "onKeyEvent($event)", "@bbDialogAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogAnimation": "state" }, classAttribute: "bb-dialog-overlay" }, ngImport: i0, template: "<div 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{top:0;left:0;right:0;bottom:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:20px}.bb-dialog-overlay-backdrop{background-color:#00000080}.bb-dialog-overlay-component{z-index:1001;display:block;position:relative}\n"], animations: [
-        trigger('bbDialogAnimation', [
-            transition('* => none', []),
-            transition(':enter, * => open', [
-                group([
-                    query('.bb-dialog-overlay-backdrop', [
-                        style({ opacity: 0 }),
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1 }))
-                    ]),
-                    query('.bb-dialog-modal', [
-                        style({ transform: 'scale(0.95)' }),
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' }))
-                    ])
-                ])
-            ]),
-            transition(':leave, * => close', [
-                group([
-                    query('.bb-dialog-overlay-backdrop', [
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0 }))
-                    ]),
-                    query('.bb-dialog-modal', [
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0, transform: 'scale(0.95)' }))
-                    ])
-                ])
-            ])
-        ])
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogOverlay, decorators: [{
+BbDialogOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogOverlay, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogOverlay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogOverlay, selector: "bb-dialog-overlay", outputs: { closeRequested: "closeRequested" }, host: { listeners: { "window:keyup": "onKeyEvent($event)", "@bbDialogOverlayAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogOverlayAnimation": "state" }, classAttribute: "bb-dialog-overlay" }, ngImport: i0, template: "<div 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{top:0;left:0;right:0;bottom:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:20px}.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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogOverlay, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-overlay', '[@bbDialogAnimation]': 'state' }, animations: [
-                        trigger('bbDialogAnimation', [
-                            transition('* => none', []),
-                            transition(':enter, * => open', [
-                                group([
-                                    query('.bb-dialog-overlay-backdrop', [
-                                        style({ opacity: 0 }),
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1 }))
-                                    ]),
-                                    query('.bb-dialog-modal', [
-                                        style({ transform: 'scale(0.95)' }),
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ transform: 'scale(1)' }))
-                                    ])
-                                ])
-                            ]),
-                            transition(':leave, * => close', [
-                                group([
-                                    query('.bb-dialog-overlay-backdrop', [
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0 }))
-                                    ]),
-                                    query('.bb-dialog-modal', [
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 0, transform: 'scale(0.95)' }))
-                                    ])
-                                ])
-                            ])
-                        ])
-                    ], template: "<div 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{top:0;left:0;right:0;bottom:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:20px}.bb-dialog-overlay-backdrop{background-color:#00000080}.bb-dialog-overlay-component{z-index:1001;display:block;position:relative}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { animations: [{
-                type: Input
-            }], closeRequested: [{
+            args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
+                        'class': 'bb-dialog-overlay',
+                        '[@bbDialogOverlayAnimation]': 'state'
+                    }, animations: [bbDialogOverlayAnimation], template: "<div 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{top:0;left:0;right:0;bottom:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:20px}.bb-dialog-overlay-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-overlay-component{z-index:1001;display:block;position:relative}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { closeRequested: [{
                 type: Output
             }], onKeyEvent: [{
                 type: HostListener,
                 args: ['window:keyup', ['$event']]
             }], onAnimationDone: [{
                 type: HostListener,
-                args: ['@bbDialogAnimation.done', ['$event']]
+                args: ['@bbDialogOverlayAnimation.done', ['$event']]
             }] } });
 
 class BbDialogModal {
-    constructor(_patch) {
+    constructor(_patch, _renderer, _document) {
         this._patch = _patch;
+        this._renderer = _renderer;
+        this._document = _document;
         // Styling.
         this.maxWidth = '420px';
     }
@@ -174,17 +146,35 @@ class BbDialogModal {
     }
     ngOnInit() {
         this._patch.mobileVerticalHeight();
+        this.allowGlobalOverflow(false);
+    }
+    ngOnDestroy() {
+        this.allowGlobalOverflow(true);
+    }
+    allowGlobalOverflow(allow) {
+        const element = this._document?.documentElement ?? null;
+        if (!element) {
+            return;
+        }
+        allow
+            ? this._renderer.removeStyle(element, 'overflow')
+            : this._renderer.setStyle(element, 'overflow', 'hidden');
     }
 }
-BbDialogModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogModal, deps: [{ token: i1.Patch }], target: i0.ɵɵFactoryTarget.Component });
-BbDialogModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: { maxWidth: "maxWidth" }, host: { attributes: { "role": "dialog" }, listeners: { "click": "onOverlayClickedEvent($event)", "touchstart": "onOverlayClickedEvent($event)", "touchend": "onOverlayClickedEvent($event)", "mouseup": "onOverlayClickedEvent($event)", "mousedown": "onOverlayClickedEvent($event)" }, properties: { "style.max-width": "this.maxWidth" }, classAttribute: "bb-dialog-modal" }, ngImport: i0, template: "<ng-content select=\"[bb-dialog-header]\">\n\n</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]\">\n\n</ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:420px;border-radius:4px;position:relative;flex-direction:column;background-color:#fff;max-height:calc(var(--vh, 1vh) * 100 - 40px)}.bb-dialog-modal-body{padding:20px;color:#738694;font-size:13px;overflow-y:auto;line-height:1.4;background-color:#f1f3f6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogModal, decorators: [{
+BbDialogModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogModal, deps: [{ token: i1.Patch }, { token: i0.Renderer2 }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: { maxWidth: "maxWidth" }, host: { attributes: { "role": "dialog" }, listeners: { "click": "onOverlayClickedEvent($event)", "touchstart": "onOverlayClickedEvent($event)", "touchend": "onOverlayClickedEvent($event)", "mouseup": "onOverlayClickedEvent($event)", "mousedown": "onOverlayClickedEvent($event)" }, properties: { "style.max-width": "this.maxWidth" }, classAttribute: "bb-dialog-modal" }, ngImport: i0, template: "<ng-content select=\"[bb-dialog-header]\">\n\n</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]\">\n\n</ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:420px;border-radius:4px;position:relative;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 40px)}.bb-dialog-modal-body{padding:20px;color:#738694;font-size:13px;overflow-y:auto;line-height:1.4;background-color:#f1f3f6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogModal, decorators: [{
             type: Component,
             args: [{ selector: '[bb-dialog-modal]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
                         'class': 'bb-dialog-modal',
                         'role': 'dialog'
-                    }, template: "<ng-content select=\"[bb-dialog-header]\">\n\n</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]\">\n\n</ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:420px;border-radius:4px;position:relative;flex-direction:column;background-color:#fff;max-height:calc(var(--vh, 1vh) * 100 - 40px)}.bb-dialog-modal-body{padding:20px;color:#738694;font-size:13px;overflow-y:auto;line-height:1.4;background-color:#f1f3f6}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Patch }]; }, propDecorators: { maxWidth: [{
+                    }, template: "<ng-content select=\"[bb-dialog-header]\">\n\n</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]\">\n\n</ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:420px;border-radius:4px;position:relative;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 40px)}.bb-dialog-modal-body{padding:20px;color:#738694;font-size:13px;overflow-y:auto;line-height:1.4;background-color:#f1f3f6}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Patch }, { type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { maxWidth: [{
                 type: HostBinding,
                 args: ['style.max-width']
             }, {
@@ -208,52 +198,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImpor
 
 class BbDialogHeader {
     constructor() {
-        // Inputs.
-        this.iconName = null;
-        this.iconColor = 'black';
         // Outputs.
         this.closeRequested = new EventEmitter();
     }
 }
-BbDialogHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbDialogHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogHeader, selector: "[bb-dialog-header]", inputs: { iconName: "iconName", iconColor: "iconColor" }, outputs: { closeRequested: "closeRequested" }, host: { classAttribute: "bb-dialog-header" }, ngImport: i0, template: "<div class=\"bb-dialog-header-row\">\n    <div *ngIf=\"iconName as icon\"\n         [style.color]=\"iconColor\"\n         class=\"bb-dialog-header-icon\">\n        <i class=\"material-icons\">{{ icon }}</i>\n    </div>\n\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    <button *ngIf=\"closeRequested?.observed\"\n            (click)=\"closeRequested?.emit()\"\n            type=\"button\"\n            class=\"bb-dialog-header-close\">\n    </button>\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:60px;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #d8d8d8}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{max-width:100%;font-size:20px;font-weight:500;overflow:hidden;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:10px 20px}.bb-dialog-header-navigation{width:100%;padding:0 20px;overflow-x:auto;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-icon{width:40px;height:40px;display:flex;min-width:40px;overflow:hidden;min-height:40px;margin-right:10px;border-radius:50%;position:relative;align-items:center;justify-content:center}.bb-dialog-header-icon:after{top:0;left:0;right:0;bottom:0;content:\"\";opacity:.14;position:absolute;background-color:currentColor}.bb-dialog-header-close{width:32px;height:32px;border:none;min-width:32px;min-height:32px;overflow:hidden;margin-left:10px;border-radius:4px;position:relative;margin-right:-10px;display:inline-block;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;height:2px;content:\"\";margin-top:-1px;position:absolute;background-color:#a2a9ba}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover{background-color:#00000014}.bb-dialog-header-close:focus{background-color:#0000001f}.bb-dialog-header-close:active{background-color:#00000029}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogHeader, decorators: [{
+BbDialogHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbDialogHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogHeader, 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    <button *ngIf=\"closeRequested?.observed\"\n            (click)=\"closeRequested?.emit()\"\n            type=\"button\"\n            class=\"bb-dialog-header-close\">\n    </button>\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:60px;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #d8d8d8}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{max-width:100%;font-size:20px;font-weight:500;overflow:hidden;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:10px 20px}.bb-dialog-header-navigation{width:100%;padding:0 20px;overflow-x:auto;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:32px;height:32px;border:none;min-width:32px;min-height:32px;overflow:hidden;margin-left:10px;border-radius:4px;position:relative;margin-right:-10px;display:inline-block;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;height:2px;content:\"\";margin-top:-1px;position:absolute;background-color:#a2a9ba}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover{background-color:#00000014}.bb-dialog-header-close:focus{background-color:#0000001f}.bb-dialog-header-close:active{background-color:#00000029}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogHeader, decorators: [{
             type: Component,
-            args: [{ selector: '[bb-dialog-header]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-header' }, template: "<div class=\"bb-dialog-header-row\">\n    <div *ngIf=\"iconName as icon\"\n         [style.color]=\"iconColor\"\n         class=\"bb-dialog-header-icon\">\n        <i class=\"material-icons\">{{ icon }}</i>\n    </div>\n\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    <button *ngIf=\"closeRequested?.observed\"\n            (click)=\"closeRequested?.emit()\"\n            type=\"button\"\n            class=\"bb-dialog-header-close\">\n    </button>\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:60px;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #d8d8d8}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{max-width:100%;font-size:20px;font-weight:500;overflow:hidden;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:10px 20px}.bb-dialog-header-navigation{width:100%;padding:0 20px;overflow-x:auto;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-icon{width:40px;height:40px;display:flex;min-width:40px;overflow:hidden;min-height:40px;margin-right:10px;border-radius:50%;position:relative;align-items:center;justify-content:center}.bb-dialog-header-icon:after{top:0;left:0;right:0;bottom:0;content:\"\";opacity:.14;position:absolute;background-color:currentColor}.bb-dialog-header-close{width:32px;height:32px;border:none;min-width:32px;min-height:32px;overflow:hidden;margin-left:10px;border-radius:4px;position:relative;margin-right:-10px;display:inline-block;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;height:2px;content:\"\";margin-top:-1px;position:absolute;background-color:#a2a9ba}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover{background-color:#00000014}.bb-dialog-header-close:focus{background-color:#0000001f}.bb-dialog-header-close:active{background-color:#00000029}\n"] }]
-        }], propDecorators: { iconName: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], closeRequested: [{
+            args: [{ selector: '[bb-dialog-header]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-header' }, template: "<div class=\"bb-dialog-header-row\">\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    <button *ngIf=\"closeRequested?.observed\"\n            (click)=\"closeRequested?.emit()\"\n            type=\"button\"\n            class=\"bb-dialog-header-close\">\n    </button>\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:60px;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom:1px solid #d8d8d8}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{max-width:100%;font-size:20px;font-weight:500;overflow:hidden;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:10px 20px}.bb-dialog-header-navigation{width:100%;padding:0 20px;overflow-x:auto;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:32px;height:32px;border:none;min-width:32px;min-height:32px;overflow:hidden;margin-left:10px;border-radius:4px;position:relative;margin-right:-10px;display:inline-block;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;height:2px;content:\"\";margin-top:-1px;position:absolute;background-color:#a2a9ba}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover{background-color:#00000014}.bb-dialog-header-close:focus{background-color:#0000001f}.bb-dialog-header-close:active{background-color:#00000029}\n"] }]
+        }], propDecorators: { closeRequested: [{
                 type: Output
             }] } });
 
 class BbDialogLink {
 }
-BbDialogLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbDialogLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogLink, selector: "[bb-dialog-link]", host: { classAttribute: "bb-dialog-link" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{height:30px;display:flex;font-size:16px;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:10px}.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: "14.0.4", ngImport: i0, type: BbDialogLink, decorators: [{
+BbDialogLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbDialogLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogLink, selector: "[bb-dialog-link]", host: { classAttribute: "bb-dialog-link" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{border:none;height:30px;display:flex;font-size:16px;-webkit-appearance:none;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:10px}.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: "14.1.1", ngImport: i0, type: BbDialogLink, decorators: [{
             type: Component,
-            args: [{ selector: '[bb-dialog-link]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-link' }, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{height:30px;display:flex;font-size:16px;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:10px}.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"] }]
+            args: [{ selector: '[bb-dialog-link]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-link' }, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{border:none;height:30px;display:flex;font-size:16px;-webkit-appearance:none;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:10px}.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 {
 }
-BbDialogActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BbDialogActions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogActions, 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{padding:20px;display:block;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:4px;border-bottom-right-radius:4px}\n"], dependencies: [{ kind: "component", type: i4.BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogActions, decorators: [{
+BbDialogActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbDialogActions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogActions, 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{padding:20px;display:block;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:4px;border-bottom-right-radius:4px}\n"], dependencies: [{ kind: "component", type: i4.BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogActions, decorators: [{
             type: Component,
             args: [{ selector: '[bb-dialog-actions]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-actions' }, template: "<bb-form-group class=\"end\">\n    <ng-content></ng-content>\n</bb-form-group>\n", styles: [".bb-dialog-actions{padding:20px;display:block;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:4px;border-bottom-right-radius:4px}\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 {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
 }
-BbDialogInsertion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-BbDialogInsertion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogInsertion, selector: "[bbDialogInsertion]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogInsertion, decorators: [{
+BbDialogInsertion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+BbDialogInsertion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogInsertion, selector: "[bbDialogInsertion]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogInsertion, decorators: [{
             type: Directive,
             args: [{
                     selector: '[bbDialogInsertion]'
@@ -261,29 +272,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImpor
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
 
 class BbDialogContainer {
-    constructor(_elementRef, _changeDetection, _componentFactoryResolver) {
+    constructor(_elementRef) {
         this._elementRef = _elementRef;
-        this._changeDetection = _changeDetection;
-        this._componentFactoryResolver = _componentFactoryResolver;
         // Data.
         this.componentRef = null;
         this.childComponentType = null;
         // State.
         this.overlayClicked$ = new Subject();
+        // Subscription.
+        this._subscription = new Subscription();
     }
     get onOverlayClicked() {
         return this.overlayClicked$.pipe(take(1));
     }
-    ngAfterViewInit() {
+    ngOnInit() {
         // Load the child component.
         this.loadChildComponent(this.childComponentType);
         // Listen for mouse click on the dialog container.
         this.listenForClicks();
-        // Detect changes to notify change detection.
-        this._changeDetection.detectChanges();
     }
     ngOnDestroy() {
-        this._subscription && this._subscription.unsubscribe();
+        this._subscription?.unsubscribe();
     }
     onAnimationDone(event) {
         // Check if the dialog is being destroyed.
@@ -291,145 +300,77 @@ class BbDialogContainer {
             return;
         }
         // Destroy the ref if it exists.
-        this.componentRef && this.componentRef.destroy();
+        this.componentRef?.destroy();
     }
     listenForClicks() {
-        if (!this._elementRef || !this._elementRef.nativeElement) {
+        const element = this._elementRef?.nativeElement ?? null;
+        if (!element) {
             return;
         }
-        const mouseDown$ = fromEvent(this._elementRef.nativeElement, 'mousedown');
-        const touchStart$ = fromEvent(this._elementRef.nativeElement, 'touchstart');
+        const mouseDown$ = fromEvent(element, 'mousedown');
+        const touchStart$ = fromEvent(element, 'touchstart');
         const start$ = race([mouseDown$, touchStart$]);
-        const mouseUp$ = fromEvent(this._elementRef.nativeElement, 'mouseup');
-        const touchEnd$ = fromEvent(this._elementRef.nativeElement, 'touchend');
+        const mouseUp$ = fromEvent(element, 'mouseup');
+        const touchEnd$ = fromEvent(element, 'touchend');
         const end$ = race([mouseUp$, touchEnd$]);
-        this._subscription = start$.pipe(switchMap(() => end$)).subscribe(() => {
-            this.overlayClicked$.next();
-        });
+        const clicks$ = start$.pipe(switchMap(() => end$));
+        const subscription = clicks$.subscribe(() => this.overlayClicked$.next());
+        this._subscription.add(subscription);
     }
     loadChildComponent(componentType) {
-        // Resolve the component.
-        const componentFactory = this._componentFactoryResolver.resolveComponentFactory(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(componentFactory);
+        this.componentRef = viewContainerRef.createComponent(componentType);
     }
 }
-BbDialogContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogContainer, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-BbDialogContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogContainer, selector: "bb-dialog-container", host: { listeners: { "@bbDialogAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogAnimation": "true" }, classAttribute: "bb-dialog-container" }, viewQueries: [{ propertyName: "insertion", first: true, predicate: BbDialogInsertion, descendants: true, static: true }], ngImport: i0, template: "<div class=\"bb-dialog-container-backdrop\">\n</div>\n\n<div class=\"bb-dialog-container-component\">\n    <ng-container bbDialogInsertion>\n    </ng-container>\n</div>\n", styles: [".bb-dialog-container,.bb-dialog-container-backdrop{top:0;left:0;right:0;bottom:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{background-color:#00000080}.bb-dialog-container-component{width:100%;margin:auto;padding:20px;z-index:1001;display:block}\n"], dependencies: [{ kind: "directive", type: BbDialogInsertion, selector: "[bbDialogInsertion]" }], animations: [
-        trigger('bbDialogAnimation', [
-            transition(':enter', [
-                group([
-                    query('.bb-dialog-container-backdrop', [
-                        style({
-                            opacity: 0
-                        }),
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                            opacity: 1
-                        }))
-                    ]),
-                    query('.bb-dialog-container-component', [
-                        style({
-                            transform: 'scale(0.95)'
-                        }),
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                            transform: 'scale(1)'
-                        }))
-                    ])
-                ])
-            ]),
-            transition(':leave', [
-                group([
-                    query('.bb-dialog-container-backdrop', [
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                            opacity: 0
-                        }))
-                    ]),
-                    query('.bb-dialog-container-component', [
-                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                            opacity: 0,
-                            transform: 'scale(0.95)'
-                        }))
-                    ])
-                ])
-            ])
-        ])
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogContainer, decorators: [{
+BbDialogContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogContainer, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogContainer, selector: "bb-dialog-container", host: { listeners: { "@bbDialogContainerAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogContainerAnimation": "true" }, classAttribute: "bb-dialog-container" }, viewQueries: [{ propertyName: "insertion", first: true, predicate: BbDialogInsertion, descendants: true, static: true }], ngImport: i0, template: "<div 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{top:0;left:0;right:0;bottom: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;padding:20px;z-index:1001;display:block;will-change:opacity,transform}\n"], dependencies: [{ kind: "directive", type: BbDialogInsertion, selector: "[bbDialogInsertion]" }], animations: [bbDialogContainerAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogContainer, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-container', '[@bbDialogAnimation]': 'true' }, preserveWhitespaces: false, animations: [
-                        trigger('bbDialogAnimation', [
-                            transition(':enter', [
-                                group([
-                                    query('.bb-dialog-container-backdrop', [
-                                        style({
-                                            opacity: 0
-                                        }),
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                                            opacity: 1
-                                        }))
-                                    ]),
-                                    query('.bb-dialog-container-component', [
-                                        style({
-                                            transform: 'scale(0.95)'
-                                        }),
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                                            transform: 'scale(1)'
-                                        }))
-                                    ])
-                                ])
-                            ]),
-                            transition(':leave', [
-                                group([
-                                    query('.bb-dialog-container-backdrop', [
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                                            opacity: 0
-                                        }))
-                                    ]),
-                                    query('.bb-dialog-container-component', [
-                                        animate('150ms cubic-bezier(0, 0, 0.2, 1)', style({
-                                            opacity: 0,
-                                            transform: 'scale(0.95)'
-                                        }))
-                                    ])
-                                ])
-                            ])
-                        ])
-                    ], template: "<div class=\"bb-dialog-container-backdrop\">\n</div>\n\n<div class=\"bb-dialog-container-component\">\n    <ng-container bbDialogInsertion>\n    </ng-container>\n</div>\n", styles: [".bb-dialog-container,.bb-dialog-container-backdrop{top:0;left:0;right:0;bottom:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{background-color:#00000080}.bb-dialog-container-component{width:100%;margin:auto;padding:20px;z-index:1001;display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { insertion: [{
+            args: [{ selector: 'bb-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'bb-dialog-container',
+                        '[@bbDialogContainerAnimation]': 'true'
+                    }, preserveWhitespaces: false, animations: [bbDialogContainerAnimation], template: "<div 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{top:0;left:0;right:0;bottom: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;padding:20px;z-index:1001;display:block;will-change:opacity,transform}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { insertion: [{
                 type: ViewChild,
                 args: [BbDialogInsertion, { static: true }]
             }], onAnimationDone: [{
                 type: HostListener,
-                args: ['@bbDialogAnimation.done', ['$event']]
+                args: ['@bbDialogContainerAnimation.done', ['$event']]
             }] } });
 
 let nextUniqueId = 0;
 class BbDialogConfirm {
-    constructor(config, dialogRef) {
-        this.config = config;
-        this.dialogRef = dialogRef;
+    constructor(_config, _dialogRef) {
+        this._config = _config;
+        this._dialogRef = _dialogRef;
+        // Readonly data.
+        this.title = this._config?.data?.title ?? null;
+        this.description = this._config?.data?.description ?? null;
+        this.cancelButtonText = this._config?.data?.cancelButtonText ?? null;
+        this.confirmButtonText = this._config?.data?.confirmButtonText ?? null;
+        this.width = this._config?.data?.width ?? null;
         // Id.
         this.dialogId = `bb-dialog-confirm-${nextUniqueId++}`;
     }
     ngAfterViewInit() {
         // Initial focus the button.
-        this.confirmButton.focus();
+        this.confirmButton?.focus();
     }
     onClose(result) {
-        this.dialogRef.close(result);
+        this._dialogRef.close(result);
     }
 }
-BbDialogConfirm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogConfirm, deps: [{ token: BbDialogConfig }, { token: BbDialogRef }], target: i0.ɵɵFactoryTarget.Component });
-BbDialogConfirm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.4", type: BbDialogConfirm, 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     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        <h1 *ngIf=\"config?.data?.title as title\"\n            [id]=\"dialogId\">\n            {{ title | bbLocalize:{optional: true} }}\n        </h1>\n    </header>\n\n    <p>\n        {{ config?.data?.description | bbLocalize:{optional: true} }}\n    </p>\n\n    <footer bb-dialog-actions>\n        <button *ngIf=\"config?.data?.cancelButtonText as cancelButtonText\"\n                (click)=\"onClose(false)\"\n                bb-button\n                type=\"button\">\n            {{ cancelButtonText | bbLocalize:{optional: true} }}\n        </button>\n        <button #confirm\n                *ngIf=\"config?.data?.confirmButtonText as confirmButtonText\"\n                (click)=\"onClose(true)\"\n                bb-button\n                type=\"button\"\n                class=\"destructive\">\n            {{ confirmButtonText | bbLocalize:{optional: true} }}\n        </button>\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.BbFocusTrap, selector: "[bbFocusTrap]" }, { kind: "component", type: i4.BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }, { kind: "component", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: ["maxWidth"] }, { kind: "component", type: BbDialogHeader, selector: "[bb-dialog-header]", inputs: ["iconName", "iconColor"], outputs: ["closeRequested"] }, { kind: "component", type: BbDialogActions, selector: "[bb-dialog-actions]" }, { kind: "pipe", type: i8.BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: BbDialogConfirm, decorators: [{
+BbDialogConfirm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: BbDialogConfirm, deps: [{ token: BbDialogConfig }, { token: BbDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogConfirm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: BbDialogConfirm, 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        <h1 *ngIf=\"title as titleLabel\"\n            [id]=\"dialogId\">\n            {{ titleLabel | bbLocalize:{optional: true} }}\n        </h1>\n    </header>\n\n    <p *ngIf=\"description as descriptionContent\"\n       class=\"bb-dialog-confirm-description\">\n        <ng-template [bbTemplate]=\"descriptionContent\">\n            {{ $any(descriptionContent) | bbLocalize:{optional: true} }}\n        </ng-template>\n    </p>\n\n    <footer bb-dialog-actions>\n        <button *ngIf=\"cancelButtonText as cancelButtonTextLabel\"\n                (click)=\"onClose(false)\"\n                bb-button\n                type=\"button\">\n            {{ cancelButtonTextLabel | bbLocalize:{optional: true} }}\n        </button>\n        <button #confirm\n                *ngIf=\"confirmButtonText as confirmButtonTextLabel\"\n                (click)=\"onClose(true)\"\n                bb-button\n                type=\"button\"\n                class=\"destructive\">\n            {{ confirmButtonTextLabel | bbLocalize:{optional: true} }}\n        </button>\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}.bb-dialog-confirm-description{line-height:2}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "directive", type: i4.BbFocusTrap, selector: "[bbFocusTrap]" }, { kind: "component", type: i4.BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }, { kind: "component", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: ["maxWidth"] }, { kind: "component", type: BbDialogHeader, selector: "[bb-dialog-header]", outputs: ["closeRequested"] }, { kind: "component", type: BbDialogActions, selector: "[bb-dialog-actions]" }, { kind: "pipe", type: i8.BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", 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' }, template: "<div [attr.aria-labelledby]=\"dialogId\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        <h1 *ngIf=\"config?.data?.title as title\"\n            [id]=\"dialogId\">\n            {{ title | bbLocalize:{optional: true} }}\n        </h1>\n    </header>\n\n    <p>\n        {{ config?.data?.description | bbLocalize:{optional: true} }}\n    </p>\n\n    <footer bb-dialog-actions>\n        <button *ngIf=\"config?.data?.cancelButtonText as cancelButtonText\"\n                (click)=\"onClose(false)\"\n                bb-button\n                type=\"button\">\n            {{ cancelButtonText | bbLocalize:{optional: true} }}\n        </button>\n        <button #confirm\n                *ngIf=\"config?.data?.confirmButtonText as confirmButtonText\"\n                (click)=\"onClose(true)\"\n                bb-button\n                type=\"button\"\n                class=\"destructive\">\n            {{ confirmButtonText | bbLocalize:{optional: true} }}\n        </button>\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}\n"] }]
+            args: [{ selector: 'bb-dialog-confirm', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-confirm' }, template: "<div [attr.aria-labelledby]=\"dialogId\"\n     [maxWidth]=\"width\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        <h1 *ngIf=\"title as titleLabel\"\n            [id]=\"dialogId\">\n            {{ titleLabel | bbLocalize:{optional: true} }}\n        </h1>\n    </header>\n\n    <p *ngIf=\"description as descriptionContent\"\n       class=\"bb-dialog-confirm-description\">\n        <ng-template [bbTemplate]=\"descriptionContent\">\n            {{ $any(descriptionContent) | bbLocalize:{optional: true} }}\n        </ng-template>\n    </p>\n\n    <footer bb-dialog-actions>\n        <button *ngIf=\"cancelButtonText as cancelButtonTextLabel\"\n                (click)=\"onClose(false)\"\n                bb-button\n                type=\"button\">\n            {{ cancelButtonTextLabel | bbLocalize:{optional: true} }}\n        </button>\n        <button #confirm\n                *ngIf=\"confirmButtonText as confirmButtonTextLabel\"\n                (click)=\"onClose(true)\"\n                bb-button\n                type=\"button\"\n                class=\"destructive\">\n            {{ confirmButtonTextLabel | bbLocalize:{optional: true} }}\n        </button>\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}.bb-dialog-confirm-description{line-height:2}\n"] }]
         }], ctorParameters: function () { return [{ type: BbDialogConfig }, { type: BbDialogRef }]; }, propDecorators: { confirmButton: [{
                 type: ViewChild,
-                args: ['confirm', { read: BbButton }]
+                args: ['confirm', { read: BbButton, static: false }]
             }] } });
 
 class BbDialogInjector {
@@ -464,8 +405,9 @@ class Dialog {
             data: {
                 title,
                 description,
-                cancelButtonText: options.cancelButtonText || 'dialog.default_cancel_button',
-                confirmButtonText: options.confirmButtonText || 'dialog.default_confirm_button'
+                width: options?.width ?? '420px',
+                cancelButtonText: options.cancelButtonText ?? 'dialog.default_cancel_button',
+                confirmButtonText: options.confirmButtonText ?? 'dialog.default_confirm_button'
             }
         });
     }
@@ -474,7 +416,7 @@ class Dialog {
         const dialogRef = new BbDialogRef();
         // Create a map with the config.
         const map = new WeakMap();
-        map.set(BbDialogConfig, config);
+        map.set(BbDialogConfig, config ?? {});
         map.set(BbDialogRef, dialogRef);
         // Create a custom injector.
         const dialogInjector = new BbDialogInjector(this._injector, map);
@@ -514,9 +456,9 @@ class Dialog {
         dialogComponentRef = null;
     }
 }
-Dialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: Dialog, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
-Dialog.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: Dialog });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: Dialog, decorators: [{
+Dialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: Dialog, deps: [{ token: i0.Injector }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Injectable });
+Dialog.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: Dialog });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: Dialog, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }]; } });
 
@@ -528,8 +470,8 @@ class DialogModule {
         };
     }
 }
-DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.4", ngImport: i0, type: DialogModule, declarations: [BbDialogContainer,
+DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: DialogModule, declarations: [BbDialogContainer,
         BbDialogOverlay,
         BbDialogModal,
         BbDialogHeader,
@@ -543,10 +485,10 @@ DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
         BbDialogHeader,
         BbDialogLink,
         BbDialogActions] });
-DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: DialogModule, imports: [CommonModule,
+DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DialogModule, imports: [CommonModule,
         LocalizeModule,
         ElementsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [