@bravobit/bb-foundation 0.15.4 → 0.16.1

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

@@ -0,0 +1,584 @@
+import { take, switchMap } from 'rxjs/operators';
+import { Subject, 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 { 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 * as i6 from '@bravobit/bb-foundation/elements';
+import { BbButton, ElementsModule } from '@bravobit/bb-foundation/elements';
+import * as i8 from '@bravobit/bb-foundation/localize';
+import { LocalizeModule } from '@bravobit/bb-foundation/localize';
+
+class BbDialogRef {
+    constructor() {
+        // Data.
+        this._afterClosed$ = new Subject();
+        this._overlayClicked$ = new Subject();
+    }
+    get afterClosed() {
+        return this._afterClosed$.pipe(take(1));
+    }
+    get overlayClicked() {
+        return this._overlayClicked$.pipe(take(1));
+    }
+    onOverlayClicked() {
+        this._overlayClicked$.next();
+    }
+    close(result) {
+        this._afterClosed$.next(result);
+    }
+}
+
+class BbDialogConfig {
+}
+
+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._closed$ = new Subject();
+    }
+    get state() {
+        return this.animations
+            ? this._state
+            : 'none';
+    }
+    ngAfterViewInit() {
+        this.listenForClicks();
+    }
+    ngOnDestroy() {
+        this._subscription?.unsubscribe();
+    }
+    onKeyEvent(event) {
+        if (event.key === 'Escape') {
+            this.closeRequested.emit();
+        }
+    }
+    onAnimationDone(event) {
+        // Check if the dialog is being destroyed.
+        if (!['close', 'none'].includes(event.toState)) {
+            return;
+        }
+        this._closed$.next();
+        this._closed$.complete();
+    }
+    close() {
+        // We need change detection to run
+        // here else it won't close in all scenario's.
+        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) {
+            return;
+        }
+        const mouseDown$ = fromEvent(this._elementRef.nativeElement, 'mousedown');
+        const touchStart$ = fromEvent(this._elementRef.nativeElement, 'touchstart');
+        const start$ = race([mouseDown$, touchStart$]);
+        const mouseUp$ = fromEvent(this._elementRef.nativeElement, 'mouseup');
+        const touchEnd$ = fromEvent(this._elementRef.nativeElement, 'touchend');
+        const end$ = race([mouseUp$, touchEnd$]);
+        this._subscription = start$.pipe(switchMap(() => end$)).subscribe(() => {
+            this.closeRequested.next();
+        });
+    }
+}
+BbDialogOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogOverlay, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogOverlay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", 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: "13.1.0", 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: [{
+                type: Output
+            }], onKeyEvent: [{
+                type: HostListener,
+                args: ['window:keyup', ['$event']]
+            }], onAnimationDone: [{
+                type: HostListener,
+                args: ['@bbDialogAnimation.done', ['$event']]
+            }] } });
+
+class BbDialogModal {
+    constructor(_patch) {
+        this._patch = _patch;
+        // Styling.
+        this.maxWidth = '420px';
+    }
+    onOverlayClickedEvent(event) {
+        event.stopPropagation();
+    }
+    ngOnInit() {
+        this._patch.mobileVerticalHeight();
+    }
+}
+BbDialogModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogModal, deps: [{ token: i1.Patch }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", 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: "13.1.0", 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: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }, {
+                type: Input
+            }], onOverlayClickedEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchend', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class BbDialogHeader {
+    constructor() {
+        // Inputs.
+        this.iconName = null;
+        this.iconColor = 'black';
+        // Outputs.
+        this.closeRequested = new EventEmitter();
+    }
+}
+BbDialogHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbDialogHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", 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?.observers?.length > 0\"\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"], directives: [{ 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: "13.1.0", 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?.observers?.length > 0\"\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: [{
+                type: Output
+            }] } });
+
+class BbDialogLink {
+}
+BbDialogLink.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbDialogLink.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", 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: "13.1.0", 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"] }]
+        }] });
+
+class BbDialogActions {
+}
+BbDialogActions.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BbDialogActions.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", 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"], components: [{ type: i6.BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", 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"] }]
+        }] });
+
+class BbDialogInsertion {
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+}
+BbDialogInsertion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+BbDialogInsertion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: BbDialogInsertion, selector: "[bbDialogInsertion]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogInsertion, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbDialogInsertion]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+
+class BbDialogContainer {
+    constructor(_elementRef, _changeDetection, _componentFactoryResolver) {
+        this._elementRef = _elementRef;
+        this._changeDetection = _changeDetection;
+        this._componentFactoryResolver = _componentFactoryResolver;
+        // Data.
+        this.componentRef = null;
+        this.childComponentType = null;
+        // State.
+        this.overlayClicked$ = new Subject();
+    }
+    get onOverlayClicked() {
+        return this.overlayClicked$.pipe(take(1));
+    }
+    ngAfterViewInit() {
+        // 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();
+    }
+    onAnimationDone(event) {
+        // Check if the dialog is being destroyed.
+        if (event.toState !== 'void') {
+            return;
+        }
+        // Destroy the ref if it exists.
+        this.componentRef && this.componentRef.destroy();
+    }
+    listenForClicks() {
+        if (!this._elementRef || !this._elementRef.nativeElement) {
+            return;
+        }
+        const mouseDown$ = fromEvent(this._elementRef.nativeElement, 'mousedown');
+        const touchStart$ = fromEvent(this._elementRef.nativeElement, 'touchstart');
+        const start$ = race([mouseDown$, touchStart$]);
+        const mouseUp$ = fromEvent(this._elementRef.nativeElement, 'mouseup');
+        const touchEnd$ = fromEvent(this._elementRef.nativeElement, 'touchend');
+        const end$ = race([mouseUp$, touchEnd$]);
+        this._subscription = start$.pipe(switchMap(() => end$)).subscribe(() => {
+            this.overlayClicked$.next();
+        });
+    }
+    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);
+    }
+}
+BbDialogContainer.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogContainer, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", 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"], directives: [{ 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: "13.1.0", 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: [{
+                type: ViewChild,
+                args: [BbDialogInsertion, { static: true }]
+            }], onAnimationDone: [{
+                type: HostListener,
+                args: ['@bbDialogAnimation.done', ['$event']]
+            }] } });
+
+let nextUniqueId = 0;
+class BbDialogConfirm {
+    constructor(config, dialogRef) {
+        this.config = config;
+        this.dialogRef = dialogRef;
+        // Id.
+        this.dialogId = `bb-dialog-confirm-${nextUniqueId++}`;
+    }
+    ngAfterViewInit() {
+        // Initial focus the button.
+        this.confirmButton.focus();
+    }
+    onClose(result) {
+        this.dialogRef.close(result);
+    }
+}
+BbDialogConfirm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: BbDialogConfirm, deps: [{ token: BbDialogConfig }, { token: BbDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+BbDialogConfirm.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", 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"], components: [{ type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: ["maxWidth"] }, { type: BbDialogHeader, selector: "[bb-dialog-header]", inputs: ["iconName", "iconColor"], outputs: ["closeRequested"] }, { type: BbDialogActions, selector: "[bb-dialog-actions]" }, { type: i6.BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }], directives: [{ type: i6.BbFocusTrap, selector: "[bbFocusTrap]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "bbLocalize": i8.BbLocalize }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", 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"] }]
+        }], ctorParameters: function () { return [{ type: BbDialogConfig }, { type: BbDialogRef }]; }, propDecorators: { confirmButton: [{
+                type: ViewChild,
+                args: ['confirm', { read: BbButton }]
+            }] } });
+
+class BbDialogInjector {
+    constructor(_parentInjector, _additionalTokens) {
+        this._parentInjector = _parentInjector;
+        this._additionalTokens = _additionalTokens;
+    }
+    get(token, notFoundValue) {
+        // First check if the additional token
+        // contains the token.
+        const value = this._additionalTokens.get(token);
+        // If that value exists return it.
+        if (value) {
+            return value;
+        }
+        // Else query the parent injector.
+        return this._parentInjector.get(token, notFoundValue);
+    }
+}
+
+class Dialog {
+    constructor(_injector, _applicationRef, _componentFactoryResolver) {
+        this._injector = _injector;
+        this._applicationRef = _applicationRef;
+        this._componentFactoryResolver = _componentFactoryResolver;
+    }
+    open(componentType, config) {
+        return this.createDialog(componentType, config);
+    }
+    confirm(title, description, options = {}) {
+        return this.open(BbDialogConfirm, {
+            data: {
+                title,
+                description,
+                cancelButtonText: options.cancelButtonText || 'dialog.default_cancel_button',
+                confirmButtonText: options.confirmButtonText || 'dialog.default_confirm_button'
+            }
+        });
+    }
+    createDialog(componentType, config) {
+        // Create a reference.
+        const dialogRef = new BbDialogRef();
+        // Create a map with the config.
+        const map = new WeakMap();
+        map.set(BbDialogConfig, config);
+        map.set(BbDialogRef, dialogRef);
+        // Create a custom injector.
+        const dialogInjector = new BbDialogInjector(this._injector, map);
+        // Resolve the dialog component reference.
+        const dialogComponentRef = this._componentFactoryResolver
+            .resolveComponentFactory(BbDialogContainer)
+            .create(dialogInjector);
+        // Attach the host view to the application.
+        this._applicationRef.attachView(dialogComponentRef.hostView);
+        try {
+            // Remove the current focus.
+            const activeElement = document.activeElement;
+            activeElement.blur();
+            // Append the element to the DOM.
+            document.body.appendChild(dialogComponentRef.location.nativeElement);
+        }
+        catch {
+            // Don't do anything, because it must've failed.
+        }
+        // Set the child component type on the component.
+        dialogComponentRef.instance.childComponentType = componentType;
+        dialogComponentRef.instance.onOverlayClicked.subscribe(() => dialogRef.onOverlayClicked());
+        // Listen for close events.
+        dialogRef.afterClosed.subscribe(() => this.deleteDialog(dialogComponentRef));
+        // Return the reference.
+        return dialogRef;
+    }
+    deleteDialog(dialogComponentRef) {
+        // Only continue if the dialog component ref exists.
+        if (!dialogComponentRef) {
+            return;
+        }
+        // Detach the dialog.
+        this._applicationRef.detachView(dialogComponentRef.hostView);
+        // Destroy the dialog.
+        dialogComponentRef.destroy();
+        dialogComponentRef = null;
+    }
+}
+Dialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", 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: "13.1.0", ngImport: i0, type: Dialog });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: Dialog, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }]; } });
+
+class DialogModule {
+    static forRoot() {
+        return {
+            ngModule: DialogModule,
+            providers: [Dialog]
+        };
+    }
+}
+DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: DialogModule, declarations: [BbDialogContainer,
+        BbDialogOverlay,
+        BbDialogModal,
+        BbDialogHeader,
+        BbDialogLink,
+        BbDialogActions,
+        BbDialogConfirm,
+        BbDialogInsertion], imports: [CommonModule,
+        LocalizeModule,
+        ElementsModule], exports: [BbDialogOverlay,
+        BbDialogModal,
+        BbDialogHeader,
+        BbDialogLink,
+        BbDialogActions] });
+DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: DialogModule, imports: [[
+            CommonModule,
+            LocalizeModule,
+            ElementsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        LocalizeModule,
+                        ElementsModule
+                    ],
+                    declarations: [
+                        BbDialogContainer,
+                        BbDialogOverlay,
+                        BbDialogModal,
+                        BbDialogHeader,
+                        BbDialogLink,
+                        BbDialogActions,
+                        BbDialogConfirm,
+                        BbDialogInsertion
+                    ],
+                    exports: [
+                        BbDialogOverlay,
+                        BbDialogModal,
+                        BbDialogHeader,
+                        BbDialogLink,
+                        BbDialogActions
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BbDialogActions, BbDialogConfig, BbDialogHeader, BbDialogLink, BbDialogModal, BbDialogOverlay, BbDialogRef, Dialog, DialogModule };
+//# sourceMappingURL=bravobit-bb-foundation-dialog.mjs.map