@bravobit/bb-foundation 0.32.1 → 0.40.0

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

@@ -1,16 +1,13 @@
 import { take, switchMap } from 'rxjs/operators';
 import { Subject, Subscription, lastValueFrom, fromEvent, race, firstValueFrom } from 'rxjs';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Output, HostListener, Inject, HostBinding, Input, Directive, ViewChild, createEnvironmentInjector, createComponent, Injectable, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Inject, Output, HostListener, HostBinding, Input, Directive, ViewChild, createEnvironmentInjector, createComponent, Injectable, inject, makeEnvironmentProviders, NgModule } from '@angular/core';
 import { trigger, transition, group, query, style, animate } from '@angular/animations';
-import * as i3 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { DOCUMENT, NgClass } from '@angular/common';
 import * as i1 from '@bravobit/bb-foundation';
-import * as i1$1 from '@bravobit/bb-foundation/elements';
-import { BbButton, ElementsModule } from '@bravobit/bb-foundation/elements';
-import * as i5 from '@bravobit/bb-foundation/utils';
-import * as i9 from '@bravobit/bb-foundation/localize';
-import { LocalizeModule } from '@bravobit/bb-foundation/localize';
+import { BbFormGroup, BbButton } from '@bravobit/bb-foundation/elements';
+import { BbFocusTrap, BbTemplate } from '@bravobit/bb-foundation/utils';
+import { BbLocalize } from '@bravobit/bb-foundation/localize';
 
 class BbDialogRef {
     constructor() {
@@ -36,6 +33,7 @@ class BbDialogConfig {
 }
 class DialogConfig {
 }
+const DIALOG_CONFIG = new InjectionToken('dialog config');
 
 const bbDialogOverlayAnimation = trigger('bbDialogOverlayAnimation', [
     transition(':enter, * => open', [
@@ -120,18 +118,21 @@ class BbDialogOverlay {
         const subscription = clicks$.subscribe(() => this.closeRequested.next());
         this._subscription.add(subscription);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogOverlay, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DialogConfig, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbDialogOverlay, selector: "bb-dialog-overlay", outputs: { closeRequested: "closeRequested" }, host: { listeners: { "window:keyup": "onKeyEvent($event)", "@bbDialogOverlayAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogOverlayAnimation": "state", "@.disabled": "disableOverlayAnimations" }, classAttribute: "bb-dialog-overlay" }, 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{inset: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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogOverlay, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: DIALOG_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: BbDialogOverlay, isStandalone: true, selector: "bb-dialog-overlay", outputs: { closeRequested: "closeRequested" }, host: { listeners: { "window:keyup": "onKeyEvent($event)", "@bbDialogOverlayAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogOverlayAnimation": "state", "@.disabled": "disableOverlayAnimations" }, classAttribute: "bb-dialog-overlay" }, 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{inset:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:1.5rem}.bb-dialog-overlay-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-overlay-component{z-index:1001;display:block;position:relative}\n"], animations: [bbDialogOverlayAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogOverlay, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogOverlay, decorators: [{
             type: Component,
-            args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
+            args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bb-dialog-overlay',
                         '[@bbDialogOverlayAnimation]': 'state',
                         '[@.disabled]': 'disableOverlayAnimations'
-                    }, 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{inset: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"] }]
+                    }, preserveWhitespaces: false, animations: [bbDialogOverlayAnimation], standalone: true, 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{inset:0;display:flex;z-index:1000;position:fixed;flex-direction:column}.bb-dialog-overlay{padding:1.5rem}.bb-dialog-overlay-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-overlay-component{z-index:1001;display:block;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: DialogConfig, decorators: [{
                     type: Optional
+                }, {
+                    type: Inject,
+                    args: [DIALOG_CONFIG]
                 }] }], propDecorators: { closeRequested: [{
                 type: Output
             }], onKeyEvent: [{
@@ -151,7 +152,7 @@ class BbDialogModal {
         this._renderer = _renderer;
         this._document = _document;
         // Styling.
-        this.maxWidth = '420px';
+        this.maxWidth = '30rem';
     }
     ngOnInit() {
         this._patch.mobileVerticalHeight();
@@ -169,15 +170,15 @@ class BbDialogModal {
             ? this._renderer.removeStyle(element, 'overflow')
             : this._renderer.setStyle(element, 'overflow', 'hidden');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogModal, deps: [{ token: i1.Patch }, { token: i0.Renderer2 }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogModal, deps: [{ token: i1.Patch }, { token: i0.Renderer2 }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: BbDialogModal, isStandalone: true, 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]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;border-radius:.25rem;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 3rem)}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogModal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogModal, decorators: [{
             type: Component,
-            args: [{ selector: '[bb-dialog-modal]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: {
+            args: [{ selector: '[bb-dialog-modal]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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;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"] }]
+                    }, preserveWhitespaces: false, standalone: true, template: "<ng-content select=\"[bb-dialog-header]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;border-radius:.25rem;flex-direction:column;background-color:#fff;will-change:opacity,transform;max-height:calc(var(--vh, 1vh) * 100 - 3rem)}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}\n"] }]
         }], ctorParameters: () => [{ type: i1.Patch }, { type: i0.Renderer2 }, { type: Document, decorators: [{
                     type: Optional
                 }, {
@@ -210,32 +211,32 @@ class BbDialogHeader {
         // Outputs.
         this.closeRequested = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbDialogHeader, isStandalone: true, selector: "[bb-dialog-header]", outputs: { closeRequested: "closeRequested" }, host: { classAttribute: "bb-dialog-header" }, ngImport: i0, template: "<div class=\"bb-dialog-header-row\">\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (closeRequested?.observed) {\n        <button (click)=\"closeRequested?.emit()\"\n                type=\"button\"\n                class=\"bb-dialog-header-close\">\n        </button>\n    }\n</div>\n\n<nav class=\"bb-dialog-header-navigation\">\n    <ng-content select=\"[bb-dialog-link]\"></ng-content>\n</nav>\n", styles: [".bb-dialog-header{display:flex;min-height:3.75rem;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{color:#111;max-width:100%;font-weight:500;overflow:hidden;font-size:1.25rem;white-space:nowrap;text-overflow:ellipsis}.bb-dialog-header-row,.bb-dialog-header-navigation{width:100%;display:flex;align-items:center}.bb-dialog-header-row{padding:.75rem 1.5rem}.bb-dialog-header-navigation{width:100%;overflow-x:auto;padding:0 1.5rem;white-space:nowrap}.bb-dialog-header-navigation:empty{margin:0;height:0;padding:0;visibility:hidden}.bb-dialog-header-content{flex:1}.bb-dialog-header-close{width:2rem;height:2rem;border:none;min-width:2rem;min-height:2rem;overflow:hidden;position:relative;margin-left:.75rem;display:inline-block;margin-right:-.75rem;border-radius:.25rem;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;content:\"\";height:.125rem;margin-top:-1px;position:absolute;background-color:#999}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover,.bb-dialog-header-close:focus{background-color:#e6e6e6}.bb-dialog-header-close:active{background-color:#d9d9d9}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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 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"] }]
+            args: [{ selector: '[bb-dialog-header]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-header' }, preserveWhitespaces: false, standalone: true, template: "<div class=\"bb-dialog-header-row\">\n    <div class=\"bb-dialog-header-content\">\n        <ng-content></ng-content>\n    </div>\n\n    @if (closeRequested?.observed) {\n        <button (click)=\"closeRequested?.emit()\"\n                type=\"button\"\n                class=\"bb-dialog-header-close\">\n        </button>\n    }\n</div>\n\n<nav class=\"bb-dialog-header-navigation\">\n    <ng-content select=\"[bb-dialog-link]\"></ng-content>\n</nav>\n", styles: [".bb-dialog-header{display:flex;min-height:3.75rem;flex-direction:column;justify-content:center;background-color:#fff;border-top-left-radius:.25rem;border-bottom:1px solid #d8d8d8;border-top-right-radius:.25rem}.bb-dialog-header .bb-dialog-header-content,.bb-dialog-header .bb-dialog-header-content h1{color:#111;max-width:100%;font-weight:500;overflow:hidden;font-size:1.25rem;white-space:nowrap;text-overflow:ellipsis}.bb-dialog-header-row,.bb-dialog-header-navigation{width:100%;display:flex;align-items:center}.bb-dialog-header-row{padding:.75rem 1.5rem}.bb-dialog-header-navigation{width:100%;overflow-x:auto;padding:0 1.5rem;white-space:nowrap}.bb-dialog-header-navigation:empty{margin:0;height:0;padding:0;visibility:hidden}.bb-dialog-header-content{flex:1}.bb-dialog-header-close{width:2rem;height:2rem;border:none;min-width:2rem;min-height:2rem;overflow:hidden;position:relative;margin-left:.75rem;display:inline-block;margin-right:-.75rem;border-radius:.25rem;background-color:transparent}.bb-dialog-header-close:before,.bb-dialog-header-close:after{top:50%;left:20%;width:60%;content:\"\";height:.125rem;margin-top:-1px;position:absolute;background-color:#999}.bb-dialog-header-close:before{transform:rotate(45deg)}.bb-dialog-header-close:after{transform:rotate(-45deg)}.bb-dialog-header-close:hover,.bb-dialog-header-close:focus{background-color:#e6e6e6}.bb-dialog-header-close:active{background-color:#d9d9d9}\n"] }]
         }], propDecorators: { closeRequested: [{
                 type: Output
             }] } });
 
 class BbDialogLink {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.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;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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: BbDialogLink, isStandalone: true, selector: "[bb-dialog-link]", host: { classAttribute: "bb-dialog-link" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{border:none;height:2rem;display:flex;font-size:1rem;appearance:none;font-weight:500;white-space:nowrap;align-items:center;color:#6b5c5c!important;background-color:transparent;text-decoration:none!important;border-bottom:2px solid transparent}.bb-dialog-link+.bb-dialog-link{margin-left:.75rem}.bb-dialog-link:hover:not(.disabled){border-bottom:2px solid rgba(117,119,148,.2)}.bb-dialog-link.active,.bb-dialog-link.active:hover{color:#5b53ff!important;border-bottom-color:#5b53ff}.bb-dialog-link.disabled,.bb-dialog-link.disabled:focus,.bb-dialog-link.disabled:hover,.bb-dialog-link.disabled:active{opacity:.4;cursor:default;box-shadow:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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{border:none;height:30px;display:flex;font-size:16px;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"] }]
+            args: [{ selector: '[bb-dialog-link]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-link' }, preserveWhitespaces: false, standalone: true, template: "<ng-content></ng-content>\n", styles: [".bb-dialog-link{border:none;height:2rem;display:flex;font-size:1rem;appearance:none;font-weight:500;white-space:nowrap;align-items:center;color:#6b5c5c!important;background-color:transparent;text-decoration:none!important;border-bottom:2px solid transparent}.bb-dialog-link+.bb-dialog-link{margin-left:.75rem}.bb-dialog-link:hover:not(.disabled){border-bottom:2px solid rgba(117,119,148,.2)}.bb-dialog-link.active,.bb-dialog-link.active:hover{color:#5b53ff!important;border-bottom-color:#5b53ff}.bb-dialog-link.disabled,.bb-dialog-link.disabled:focus,.bb-dialog-link.disabled:hover,.bb-dialog-link.disabled:active{opacity:.4;cursor:default;box-shadow:none}\n"] }]
         }] });
 
 class BbDialogActions {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.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: i1$1.BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: BbDialogActions, isStandalone: true, selector: "[bb-dialog-actions]", host: { classAttribute: "bb-dialog-actions" }, ngImport: i0, template: "<bb-form-group class=\"end\">\n    <ng-content></ng-content>\n</bb-form-group>\n", styles: [".bb-dialog-actions{display:block;padding:1.5rem;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}\n"], dependencies: [{ kind: "component", type: BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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"] }]
+            args: [{ selector: '[bb-dialog-actions]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-actions' }, preserveWhitespaces: false, standalone: true, imports: [BbFormGroup], template: "<bb-form-group class=\"end\">\n    <ng-content></ng-content>\n</bb-form-group>\n", styles: [".bb-dialog-actions{display:block;padding:1.5rem;background-color:#fff;border-top:1px solid #d8d8d8;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}\n"] }]
         }] });
 
 const bbDialogContainerAnimation = trigger('bbDialogContainerAnimation', [
@@ -270,13 +271,14 @@ class BbDialogInsertion {
     constructor(viewContainerRef) {
         this.viewContainerRef = viewContainerRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: BbDialogInsertion, selector: "[bbDialogInsertion]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbDialogInsertion, isStandalone: true, selector: "[bbDialogInsertion]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogInsertion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogInsertion, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[bbDialogInsertion]'
+                    selector: '[bbDialogInsertion]',
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
@@ -336,18 +338,21 @@ class BbDialogContainer {
         // Create an instance of the component.
         this.componentRef = viewContainerRef.createComponent(componentType);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogContainer, deps: [{ token: i0.ElementRef }, { token: DialogConfig, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: BbDialogContainer, selector: "bb-dialog-container", host: { listeners: { "@bbDialogContainerAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogContainerAnimation": "true", "@.disabled": "disableContainerAnimations" }, 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{inset:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-container-component{width:100%;margin:auto;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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogContainer, deps: [{ token: i0.ElementRef }, { token: DIALOG_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.5", type: BbDialogContainer, isStandalone: true, selector: "bb-dialog-container", host: { listeners: { "@bbDialogContainerAnimation.done": "onAnimationDone($event)" }, properties: { "@bbDialogContainerAnimation": "true", "@.disabled": "disableContainerAnimations" }, classAttribute: "bb-dialog-container" }, viewQueries: [{ propertyName: "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{inset:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;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: "17.3.1", ngImport: i0, type: BbDialogContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogContainer, decorators: [{
             type: Component,
             args: [{ selector: 'bb-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'class': 'bb-dialog-container',
                         '[@bbDialogContainerAnimation]': 'true',
                         '[@.disabled]': 'disableContainerAnimations'
-                    }, preserveWhitespaces: false, animations: [bbDialogContainerAnimation], 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{inset:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-container-component{width:100%;margin:auto;padding:20px;z-index:1001;display:block;will-change:opacity,transform}\n"] }]
+                    }, preserveWhitespaces: false, animations: [bbDialogContainerAnimation], standalone: true, imports: [BbDialogInsertion], 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{inset:0;z-index:1000;position:fixed}.bb-dialog-container{display:flex}.bb-dialog-container-backdrop{will-change:opacity;background-color:#1119}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;will-change:opacity,transform}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DialogConfig, decorators: [{
                     type: Optional
+                }, {
+                    type: Inject,
+                    args: [DIALOG_CONFIG]
                 }] }], propDecorators: { insertion: [{
                 type: ViewChild,
                 args: [BbDialogInsertion, { static: true }]
@@ -362,15 +367,14 @@ class BbDialogConfirm {
         this._config = _config;
         this._dialogRef = _dialogRef;
         // Readonly data.
+        this.dialogId = `bb-dialog-confirm-${nextUniqueId++}`;
         this.title = this._config?.data?.title ?? null;
         this.description = this._config?.data?.description ?? null;
         this.confirmButtonText = this._config?.data?.confirmButtonText ?? 'dialog.default_confirm_button';
         this.cancelButtonText = this._config?.data?.cancelButtonText ?? 'dialog.default_cancel_button';
         this.confirmButtonClass = this._config?.data?.confirmButtonClass ?? null;
         this.cancelButtonClass = this._config?.data?.cancelButtonClass ?? null;
-        this.width = this._config?.data?.width ?? '420px';
-        // Id.
-        this.dialogId = `bb-dialog-confirm-${nextUniqueId++}`;
+        this.width = this._config?.data?.width ?? '30rem';
     }
     ngAfterViewInit() {
         // Initial focus the button.
@@ -379,12 +383,12 @@ class BbDialogConfirm {
     onClose(result) {
         this._dialogRef.close(result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogConfirm, deps: [{ token: BbDialogConfig }, { token: BbDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.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 titleContent\"\n            [id]=\"dialogId\">\n            <ng-template [bbTemplate]=\"titleContent\">\n                {{ $any(titleContent) | bbLocalize:{optional: true} }}\n            </ng-template>\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                [ngClass]=\"cancelButtonClass ? cancelButtonClass : null\"\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                [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive'\"\n                (click)=\"onClose(true)\"\n                bb-button\n                type=\"button\">\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$1.BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }, { kind: "directive", type: i5.BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "directive", type: i5.BbFocusTrap, selector: "[bbFocusTrap]" }, { 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: i9.BbLocalize, name: "bbLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbDialogConfirm, deps: [{ token: BbDialogConfig }, { token: BbDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: BbDialogConfirm, isStandalone: true, selector: "bb-dialog-confirm", host: { classAttribute: "bb-dialog-confirm" }, viewQueries: [{ propertyName: "confirmButton", first: true, predicate: ["confirm"], descendants: true, read: BbButton }], ngImport: i0, template: "<div [attr.aria-labelledby]=\"dialogId\"\n     [maxWidth]=\"width\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        @if (title; as titleContent) {\n            <h1 [id]=\"dialogId\">\n                <ng-template [bbTemplate]=\"titleContent\">\n                    {{ $any(titleContent) | bbLocalize:{optional: true} }}\n                </ng-template>\n            </h1>\n        }\n    </header>\n\n    @if (description; as descriptionContent) {\n        <p class=\"bb-dialog-confirm-description\">\n            <ng-template [bbTemplate]=\"descriptionContent\">\n                {{ $any(descriptionContent) | bbLocalize:{optional: true} }}\n            </ng-template>\n        </p>\n    }\n\n    <footer class=\"bb-dialog-confirm-footer\">\n        @if (cancelButtonText; as cancelButtonTextLabel) {\n            <button [ngClass]=\"cancelButtonClass ? cancelButtonClass : 'secondary full'\"\n                    (click)=\"onClose(false)\"\n                    bb-button\n                    type=\"button\">\n                {{ cancelButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n        @if (confirmButtonText; as confirmButtonTextLabel) {\n            <button #confirm\n                    [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive full'\"\n                    (click)=\"onClose(true)\"\n                    bb-button\n                    type=\"button\">\n                {{ confirmButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}.bb-dialog-confirm>.bb-dialog-modal>.bb-dialog-modal-body{background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-dialog-confirm-description{line-height:2;font-size:.875rem}.bb-dialog-confirm-footer{display:flex;margin-top:1.5rem;flex-direction:column}.bb-dialog-confirm-footer>*+*{margin-top:1rem}@media only screen and (min-width: 768px){.bb-dialog-confirm-footer{flex-direction:row}.bb-dialog-confirm-footer>*+*{margin-top:0;margin-left:1rem}}\n"], dependencies: [{ kind: "component", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: ["maxWidth"] }, { kind: "component", type: BbDialogHeader, selector: "[bb-dialog-header]", outputs: ["closeRequested"] }, { kind: "directive", type: BbFocusTrap, selector: "[bbFocusTrap]" }, { kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BbButton, selector: "button[bb-button]", inputs: ["disabled", "loading"], exportAs: ["bbButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: BbDialogConfirm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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     [maxWidth]=\"width\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        <h1 *ngIf=\"title as titleContent\"\n            [id]=\"dialogId\">\n            <ng-template [bbTemplate]=\"titleContent\">\n                {{ $any(titleContent) | bbLocalize:{optional: true} }}\n            </ng-template>\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                [ngClass]=\"cancelButtonClass ? cancelButtonClass : null\"\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                [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive'\"\n                (click)=\"onClose(true)\"\n                bb-button\n                type=\"button\">\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"] }]
+            args: [{ selector: 'bb-dialog-confirm', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, host: { 'class': 'bb-dialog-confirm' }, standalone: true, imports: [BbDialogModal, BbDialogHeader, BbFocusTrap, BbLocalize, BbTemplate, NgClass, BbButton], template: "<div [attr.aria-labelledby]=\"dialogId\"\n     [maxWidth]=\"width\"\n     bb-dialog-modal\n     bbFocusTrap>\n    <header bb-dialog-header>\n        @if (title; as titleContent) {\n            <h1 [id]=\"dialogId\">\n                <ng-template [bbTemplate]=\"titleContent\">\n                    {{ $any(titleContent) | bbLocalize:{optional: true} }}\n                </ng-template>\n            </h1>\n        }\n    </header>\n\n    @if (description; as descriptionContent) {\n        <p class=\"bb-dialog-confirm-description\">\n            <ng-template [bbTemplate]=\"descriptionContent\">\n                {{ $any(descriptionContent) | bbLocalize:{optional: true} }}\n            </ng-template>\n        </p>\n    }\n\n    <footer class=\"bb-dialog-confirm-footer\">\n        @if (cancelButtonText; as cancelButtonTextLabel) {\n            <button [ngClass]=\"cancelButtonClass ? cancelButtonClass : 'secondary full'\"\n                    (click)=\"onClose(false)\"\n                    bb-button\n                    type=\"button\">\n                {{ cancelButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n        @if (confirmButtonText; as confirmButtonTextLabel) {\n            <button #confirm\n                    [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive full'\"\n                    (click)=\"onClose(true)\"\n                    bb-button\n                    type=\"button\">\n                {{ confirmButtonTextLabel | bbLocalize:{optional: true} }}\n            </button>\n        }\n    </footer>\n</div>\n", styles: [".bb-dialog-confirm{display:block}.bb-dialog-confirm>.bb-dialog-modal>.bb-dialog-modal-body{background-color:#fff;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.bb-dialog-confirm-description{line-height:2;font-size:.875rem}.bb-dialog-confirm-footer{display:flex;margin-top:1.5rem;flex-direction:column}.bb-dialog-confirm-footer>*+*{margin-top:1rem}@media only screen and (min-width: 768px){.bb-dialog-confirm-footer{flex-direction:row}.bb-dialog-confirm-footer>*+*{margin-top:0;margin-left:1rem}}\n"] }]
         }], ctorParameters: () => [{ type: BbDialogConfig }, { type: BbDialogRef }], propDecorators: { confirmButton: [{
                 type: ViewChild,
                 args: ['confirm', { read: BbButton, static: false }]
@@ -443,51 +447,100 @@ class Dialog {
         dialogComponentRef.destroy();
         dialogComponentRef = null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: Dialog, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: Dialog }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: Dialog, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: Dialog, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: Dialog, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: Dialog, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
 
+class BbConfirm {
+    constructor() {
+        // Dependencies.
+        this._dialog = inject(Dialog);
+        // Inputs.
+        this.bbConfirmTitle = 'dialog.default_title';
+        this.bbConfirmDescription = 'dialog.default_description';
+        this.bbConfirmButtonText = null;
+        this.bbCancelButtonText = null;
+        // Outputs.
+        this.confirm = new EventEmitter();
+    }
+    async onClick(event) {
+        const confirmed = await this._dialog.confirm(this.bbConfirmTitle, this.bbConfirmDescription, {
+            confirmButtonText: this.bbConfirmButtonText,
+            cancelButtonText: this.bbCancelButtonText
+        });
+        if (!confirmed) {
+            return;
+        }
+        this.confirm.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbConfirm, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.5", type: BbConfirm, isStandalone: true, selector: "[bbConfirm]", inputs: { bbConfirmTitle: "bbConfirmTitle", bbConfirmDescription: "bbConfirmDescription", bbConfirmButtonText: "bbConfirmButtonText", bbCancelButtonText: "bbCancelButtonText" }, outputs: { confirm: "bbConfirm" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BbConfirm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bbConfirm]',
+                    standalone: true
+                }]
+        }], propDecorators: { bbConfirmTitle: [{
+                type: Input
+            }], bbConfirmDescription: [{
+                type: Input
+            }], bbConfirmButtonText: [{
+                type: Input
+            }], bbCancelButtonText: [{
+                type: Input
+            }], confirm: [{
+                type: Output,
+                args: ['bbConfirm']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+function provideDialogConfig(config) {
+    return makeEnvironmentProviders([
+        { provide: DIALOG_CONFIG, useValue: config ?? {} }
+    ]);
+}
+
 class DialogModule {
     static forRoot(config) {
         return {
             ngModule: DialogModule,
             providers: [
-                Dialog,
-                { provide: DialogConfig, useValue: config },
+                provideDialogConfig(config)
             ]
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: DialogModule, declarations: [BbDialogContainer,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.5", ngImport: i0, type: DialogModule, imports: [BbDialogContainer,
             BbDialogOverlay,
             BbDialogModal,
             BbDialogHeader,
             BbDialogLink,
             BbDialogActions,
             BbDialogConfirm,
-            BbDialogInsertion], imports: [CommonModule,
-            LocalizeModule,
-            ElementsModule], exports: [BbDialogOverlay,
+            BbDialogInsertion,
+            BbConfirm], exports: [BbDialogOverlay,
             BbDialogModal,
             BbDialogHeader,
             BbDialogLink,
-            BbDialogActions] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DialogModule, imports: [CommonModule,
-            LocalizeModule,
-            ElementsModule] }); }
+            BbDialogActions,
+            BbConfirm] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DialogModule, imports: [BbDialogActions,
+            BbDialogConfirm] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: DialogModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: DialogModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
-                        LocalizeModule,
-                        ElementsModule
-                    ],
-                    declarations: [
                         BbDialogContainer,
                         BbDialogOverlay,
                         BbDialogModal,
@@ -495,14 +548,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                         BbDialogLink,
                         BbDialogActions,
                         BbDialogConfirm,
-                        BbDialogInsertion
+                        BbDialogInsertion,
+                        BbConfirm
                     ],
                     exports: [
                         BbDialogOverlay,
                         BbDialogModal,
                         BbDialogHeader,
                         BbDialogLink,
-                        BbDialogActions
+                        BbDialogActions,
+                        BbConfirm
                     ]
                 }]
         }] });
@@ -511,5 +566,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BbDialogActions, BbDialogConfig, BbDialogHeader, BbDialogLink, BbDialogModal, BbDialogOverlay, BbDialogRef, Dialog, DialogConfig, DialogModule };
+export { BbConfirm, BbDialogActions, BbDialogConfig, BbDialogHeader, BbDialogLink, BbDialogModal, BbDialogOverlay, BbDialogRef, DIALOG_CONFIG, Dialog, DialogConfig, DialogModule, provideDialogConfig };
 //# sourceMappingURL=bravobit-bb-foundation-dialog.mjs.map