@bravobit/bb-foundation 0.51.0 → 0.51.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/collections/lib/collections.config.d.ts +3 -0
- package/collections/lib/collections.interfaces.d.ts +10 -0
- package/collections/lib/components/collections-actions/collections-actions.component.d.ts +3 -0
- package/collections/lib/components/collections-pager/collections-pager.component.d.ts +3 -0
- package/collections/public_api.d.ts +2 -0
- package/dialog/lib/dialog-confirm/dialog-confirm.component.d.ts +3 -5
- package/dialog/lib/dialog-header/dialog-header.component.d.ts +7 -1
- package/dialog/lib/dialog-modal/dialog-modal.component.d.ts +4 -7
- package/dialog/lib/dialog-overlay/dialog-overlay.component.d.ts +3 -2
- package/dialog/lib/dialog.insertion.d.ts +1 -2
- package/dialog/lib/dialog.interfaces.d.ts +5 -0
- package/dialog/lib/dialog.module.d.ts +5 -6
- package/dialog/lib/dialog.service.d.ts +4 -4
- package/dialog/lib/directives/confirm.directive.d.ts +2 -1
- package/dialog/public_api.d.ts +0 -1
- package/elements/lib/checkbox/checkbox.component.d.ts +3 -1
- package/elements/lib/elements.module.d.ts +22 -23
- package/elements/lib/radio-button/radio-button.component.d.ts +1 -3
- package/elements/public_api.d.ts +0 -1
- package/fesm2022/bravobit-bb-foundation-collections.mjs +27 -9
- package/fesm2022/bravobit-bb-foundation-collections.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-dashboard.mjs +4 -4
- package/fesm2022/bravobit-bb-foundation-dashboard.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-dialog.mjs +75 -85
- package/fesm2022/bravobit-bb-foundation-dialog.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-elements.mjs +17 -44
- package/fesm2022/bravobit-bb-foundation-elements.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-localize.mjs +24 -0
- package/fesm2022/bravobit-bb-foundation-localize.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-notifications.mjs +2 -2
- package/fesm2022/bravobit-bb-foundation-notifications.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-table.mjs +26 -8
- package/fesm2022/bravobit-bb-foundation-table.mjs.map +1 -1
- package/localize/lib/localizations/dutch.localization.d.ts +6 -0
- package/localize/lib/localizations/english.localization.d.ts +6 -0
- package/localize/lib/localizations/papiamento.localization.d.ts +6 -0
- package/localize/lib/localizations/spanish.localization.d.ts +6 -0
- package/localize/lib/transforms/interpolate.transform.d.ts +1 -1
- package/localize/lib/transforms/plural.transform.d.ts +1 -1
- package/localize/lib/transforms/reference.transform.d.ts +1 -1
- package/package.json +5 -5
- package/styles/theme.scss +7 -1
- package/table/lib/components/table/table.component.d.ts +3 -0
- package/table/lib/components/table-pager/table-pager.component.d.ts +3 -0
- package/table/lib/interfaces/table.interfaces.d.ts +10 -0
- package/table/lib/table.config.d.ts +3 -0
- package/table/public_api.d.ts +1 -0
- package/dialog/lib/dialog-link/dialog-link.component.d.ts +0 -5
- package/elements/lib/directives/addon.directive.d.ts +0 -9
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { take, filter, switchMap } from 'rxjs/operators';
|
|
2
2
|
import { Subject, Subscription, timer, firstValueFrom, fromEvent, takeUntil } from 'rxjs';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { InjectionToken, inject, Renderer2, ElementRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation,
|
|
4
|
+
import { InjectionToken, inject, Renderer2, ElementRef, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, HostBinding, HostListener, ViewContainerRef, Directive, ViewChild, ApplicationRef, EnvironmentInjector, createEnvironmentInjector, createComponent, Injectable, makeEnvironmentProviders, NgModule } from '@angular/core';
|
|
5
5
|
import { DOCUMENT, NgClass } from '@angular/common';
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import { BbFocusTrap, BbTemplate } from '@bravobit/bb-foundation/utils';
|
|
6
|
+
import { BbIcon, BbFormGroup, BbButton } from '@bravobit/bb-foundation/elements';
|
|
7
|
+
import { BbFocusTrap, BbTemplate, BbFocus } from '@bravobit/bb-foundation/utils';
|
|
9
8
|
import { BbLocalize } from '@bravobit/bb-foundation/localize';
|
|
10
9
|
|
|
11
10
|
class BbDialogRef {
|
|
@@ -27,6 +26,7 @@ class BbDialogConfig {
|
|
|
27
26
|
}
|
|
28
27
|
class DialogConfig {
|
|
29
28
|
animationMs;
|
|
29
|
+
icons;
|
|
30
30
|
}
|
|
31
31
|
const DIALOG_CONFIG = new InjectionToken('dialog config');
|
|
32
32
|
|
|
@@ -36,6 +36,8 @@ class BbDialogOverlay {
|
|
|
36
36
|
_renderer = inject(Renderer2);
|
|
37
37
|
_elementRef = inject(ElementRef);
|
|
38
38
|
_document = inject(DOCUMENT);
|
|
39
|
+
// Inputs.
|
|
40
|
+
closeRequestedDisabled = false;
|
|
39
41
|
// Outputs.
|
|
40
42
|
closeRequested = new EventEmitter();
|
|
41
43
|
// Subscriptions.
|
|
@@ -46,12 +48,6 @@ class BbDialogOverlay {
|
|
|
46
48
|
ngOnDestroy() {
|
|
47
49
|
this._subscription?.unsubscribe();
|
|
48
50
|
}
|
|
49
|
-
onKeyEvent(event) {
|
|
50
|
-
if (event?.key !== 'Escape') {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
this.closeRequested.emit();
|
|
54
|
-
}
|
|
55
51
|
async close() {
|
|
56
52
|
this._renderer.addClass(this._elementRef.nativeElement, 'leaving');
|
|
57
53
|
const timer$ = timer(this._config?.animationMs ?? 240);
|
|
@@ -65,6 +61,9 @@ class BbDialogOverlay {
|
|
|
65
61
|
const startY = pointerDownEvent.clientY;
|
|
66
62
|
return fromEvent(this._document, 'pointerup').pipe(filter(pointerUpEvent => pointerUpEvent?.target === element && this.getMoveDistance(pointerUpEvent, startX, startY) <= elementMovePx), takeUntil(fromEvent(this._document, 'pointermove').pipe(filter(pointerMoveEvent => this.getMoveDistance(pointerMoveEvent, startX, startY) > elementMovePx))));
|
|
67
63
|
})).subscribe(() => {
|
|
64
|
+
if (this.closeRequestedDisabled) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
68
67
|
this.closeRequested.emit();
|
|
69
68
|
});
|
|
70
69
|
this._subscription.add(subscription);
|
|
@@ -74,33 +73,28 @@ class BbDialogOverlay {
|
|
|
74
73
|
Math.pow(event.clientY - initialY, 2));
|
|
75
74
|
}
|
|
76
75
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
77
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
76
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: BbDialogOverlay, isStandalone: true, selector: "bb-dialog-overlay", inputs: { closeRequestedDisabled: ["closeRequestedDisabled", "closeRequestedDisabled", booleanAttribute] }, outputs: { closeRequested: "closeRequested" }, host: { classAttribute: "bb-dialog-overlay" }, ngImport: i0, template: "<ng-content select=\"[bb-dialog-modal]\"></ng-content>\n", styles: [".bb-dialog-overlay{inset:0;display:flex;z-index:1000;position:fixed;padding:1.5rem;flex-direction:column;will-change:background-color;background-color:#1119;animation:dialogOverlayEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay:has(.bb-dialog-modal.fullscreen){padding:0}.bb-dialog-overlay.leaving{animation:dialogOverlayLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving .bb-dialog-modal.fullscreen{animation:dialogModalFullscreenLeaving .24s cubic-bezier(0,0,.2,1) forwards}@keyframes dialogOverlayEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogOverlayLeaving{to{background-color:transparent}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
78
77
|
}
|
|
79
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogOverlay, decorators: [{
|
|
80
79
|
type: Component,
|
|
81
|
-
args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-overlay' }, template: "<ng-content select=\"[bb-dialog-modal]\"></ng-content>\n", styles: [".bb-dialog-overlay{inset:0;display:flex;z-index:1000;position:fixed;padding:1.5rem;flex-direction:column;will-change:background-color;background-color:#1119;animation:dialogOverlayEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay:has(.bb-dialog-modal.fullscreen){padding:0}.bb-dialog-overlay.leaving{animation:dialogOverlayLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}@keyframes dialogOverlayEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogOverlayLeaving{to{background-color:transparent}}\n"] }]
|
|
82
|
-
}], propDecorators: {
|
|
80
|
+
args: [{ selector: 'bb-dialog-overlay', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-overlay' }, template: "<ng-content select=\"[bb-dialog-modal]\"></ng-content>\n", styles: [".bb-dialog-overlay{inset:0;display:flex;z-index:1000;position:fixed;padding:1.5rem;flex-direction:column;will-change:background-color;background-color:#1119;animation:dialogOverlayEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay:has(.bb-dialog-modal.fullscreen){padding:0}.bb-dialog-overlay.leaving{animation:dialogOverlayLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-overlay.leaving .bb-dialog-modal.fullscreen{animation:dialogModalFullscreenLeaving .24s cubic-bezier(0,0,.2,1) forwards}@keyframes dialogOverlayEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogOverlayLeaving{to{background-color:transparent}}\n"] }]
|
|
81
|
+
}], propDecorators: { closeRequestedDisabled: [{
|
|
82
|
+
type: Input,
|
|
83
|
+
args: [{ transform: booleanAttribute }]
|
|
84
|
+
}], closeRequested: [{
|
|
83
85
|
type: Output
|
|
84
|
-
}], onKeyEvent: [{
|
|
85
|
-
type: HostListener,
|
|
86
|
-
args: ['window:keyup', ['$event']]
|
|
87
86
|
}] } });
|
|
88
87
|
|
|
89
88
|
class BbDialogModal {
|
|
90
|
-
|
|
91
|
-
_renderer;
|
|
92
|
-
_document;
|
|
89
|
+
// Dependencies.
|
|
90
|
+
_renderer = inject(Renderer2);
|
|
91
|
+
_document = inject(DOCUMENT, { optional: true });
|
|
93
92
|
// Styling.
|
|
94
93
|
maxWidth = '30rem';
|
|
94
|
+
// Inputs.
|
|
95
95
|
fullscreen = false;
|
|
96
96
|
withoutBodyPadding = false;
|
|
97
|
-
constructor(_patch, _renderer, _document) {
|
|
98
|
-
this._patch = _patch;
|
|
99
|
-
this._renderer = _renderer;
|
|
100
|
-
this._document = _document;
|
|
101
|
-
}
|
|
102
97
|
ngOnInit() {
|
|
103
|
-
this._patch.mobileVerticalHeight();
|
|
104
98
|
this.allowGlobalOverflow(false);
|
|
105
99
|
}
|
|
106
100
|
ngOnDestroy() {
|
|
@@ -115,8 +109,8 @@ class BbDialogModal {
|
|
|
115
109
|
? this._renderer.removeStyle(element, 'overflow')
|
|
116
110
|
: this._renderer.setStyle(element, 'overflow', 'hidden');
|
|
117
111
|
}
|
|
118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogModal, deps: [
|
|
119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: BbDialogModal, isStandalone: true, selector: "[bb-dialog-modal]", inputs: { maxWidth: "maxWidth", fullscreen: ["fullscreen", "fullscreen", booleanAttribute], withoutBodyPadding: ["withoutBodyPadding", "withoutBodyPadding", booleanAttribute] }, host: { attributes: { "role": "dialog" }, properties: { "class.without-body-padding": "withoutBodyPadding", "class.fullscreen": "fullscreen", "style.max-width": "this.maxWidth" }, classAttribute: "bb-dialog-modal" }, ngImport: i0, template: "<ng-content select=\"[bb-dialog-header]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;pointer-events:auto;
|
|
112
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
113
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.0.5", type: BbDialogModal, isStandalone: true, selector: "[bb-dialog-modal]", inputs: { maxWidth: "maxWidth", fullscreen: ["fullscreen", "fullscreen", booleanAttribute], withoutBodyPadding: ["withoutBodyPadding", "withoutBodyPadding", booleanAttribute] }, host: { attributes: { "role": "dialog" }, properties: { "class.without-body-padding": "withoutBodyPadding", "class.fullscreen": "fullscreen", "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;overflow:clip;max-width:25rem;position:relative;pointer-events:auto;flex-direction:column;background-color:#fff;max-height:calc(100dvh - 3rem);will-change:opacity,transform;border-radius:var(--bb-dialog-border-radius, .25rem);animation:dialogModalEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-modal.fullscreen{min-width:100vw;border-radius:0;min-height:100dvh;max-height:100dvh;animation:dialogModalFullscreenEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-modal.fullscreen>.bb-dialog-modal-body{flex:1}.bb-dialog-modal.without-body-padding>.bb-dialog-modal-body{padding:0}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}@keyframes dialogModalEntering{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}@keyframes dialogModalLeaving{0%{opacity:1;transform:none}to{opacity:0;transform:scale(.98)}}@keyframes dialogModalFullscreenEntering{0%{opacity:0}to{opacity:1}}@keyframes dialogModalFullscreenLeaving{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
120
114
|
}
|
|
121
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogModal, decorators: [{
|
|
122
116
|
type: Component,
|
|
@@ -125,13 +119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
125
119
|
'[class.without-body-padding]': 'withoutBodyPadding',
|
|
126
120
|
'[class.fullscreen]': 'fullscreen',
|
|
127
121
|
'role': 'dialog'
|
|
128
|
-
}, template: "<ng-content select=\"[bb-dialog-header]\"></ng-content>\n\n<div class=\"bb-dialog-modal-body\">\n <ng-content></ng-content>\n</div>\n\n<ng-content select=\"[bb-dialog-actions]\"></ng-content>\n", styles: [".bb-dialog-modal{width:100%;margin:auto;z-index:1001;display:flex;max-width:25rem;position:relative;pointer-events:auto;
|
|
129
|
-
}],
|
|
130
|
-
type: Optional
|
|
131
|
-
}, {
|
|
132
|
-
type: Inject,
|
|
133
|
-
args: [DOCUMENT]
|
|
134
|
-
}] }], propDecorators: { maxWidth: [{
|
|
122
|
+
}, 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;overflow:clip;max-width:25rem;position:relative;pointer-events:auto;flex-direction:column;background-color:#fff;max-height:calc(100dvh - 3rem);will-change:opacity,transform;border-radius:var(--bb-dialog-border-radius, .25rem);animation:dialogModalEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-modal.fullscreen{min-width:100vw;border-radius:0;min-height:100dvh;max-height:100dvh;animation:dialogModalFullscreenEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-modal.fullscreen>.bb-dialog-modal-body{flex:1}.bb-dialog-modal.without-body-padding>.bb-dialog-modal-body{padding:0}.bb-dialog-modal-body{color:#738694;padding:1.5rem;overflow-y:auto;line-height:1.4;font-size:.8125rem;background-color:#f1f3f6}@keyframes dialogModalEntering{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}@keyframes dialogModalLeaving{0%{opacity:1;transform:none}to{opacity:0;transform:scale(.98)}}@keyframes dialogModalFullscreenEntering{0%{opacity:0}to{opacity:1}}@keyframes dialogModalFullscreenLeaving{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
123
|
+
}], propDecorators: { maxWidth: [{
|
|
135
124
|
type: HostBinding,
|
|
136
125
|
args: ['style.max-width']
|
|
137
126
|
}, {
|
|
@@ -145,42 +134,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
145
134
|
}] } });
|
|
146
135
|
|
|
147
136
|
class BbDialogHeader {
|
|
137
|
+
// Dependencies.
|
|
138
|
+
_config = inject(DIALOG_CONFIG);
|
|
139
|
+
// Readonly data.
|
|
140
|
+
closeIconName = this._config?.icons?.closeIcon ?? 'material:close';
|
|
141
|
+
// Inputs.
|
|
142
|
+
icon = null;
|
|
143
|
+
closeRequestedDisabled = false;
|
|
148
144
|
// Outputs.
|
|
149
145
|
closeRequested = new EventEmitter();
|
|
146
|
+
onKeyEvent(event) {
|
|
147
|
+
if (event?.key !== 'Escape' || this.closeRequestedDisabled) {
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
this.closeRequested.emit();
|
|
151
|
+
}
|
|
150
152
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
151
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BbDialogHeader, isStandalone: true, selector: "[bb-dialog-header]", outputs: { closeRequested: "closeRequested" }, host: { classAttribute: "bb-dialog-header" }, ngImport: i0, template: "
|
|
153
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BbDialogHeader, isStandalone: true, selector: "[bb-dialog-header]", inputs: { icon: "icon", closeRequestedDisabled: ["closeRequestedDisabled", "closeRequestedDisabled", booleanAttribute] }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "window:keyup": "onKeyEvent($event)" }, classAttribute: "bb-dialog-header" }, ngImport: i0, template: "@if (icon; as iconSrc) {\n <bb-icon [src]=\"iconSrc\"></bb-icon>\n}\n\n<ng-content></ng-content>\n\n@if (closeRequested?.observed && !closeRequestedDisabled) {\n <button (click)=\"closeRequested?.emit()\"\n type=\"button\"\n class=\"bb-dialog-header-close\">\n <bb-icon [src]=\"closeIconName\"></bb-icon>\n </button>\n}\n", styles: [".bb-dialog-header{gap:.5rem;display:flex;align-items:center;min-height:3.75rem;padding:.75rem 1.5rem;background-color:#fff;border-bottom:1px solid #d8d8d8}.bb-dialog-header>h1,.bb-dialog-header>strong{flex:1;color:#111;display:block;max-width:100%;font-weight:500;overflow:hidden;font-size:1.125rem;white-space:nowrap;text-overflow:ellipsis}.bb-dialog-header-close{width:2rem;height:2rem;border:none;display:flex;min-width:2rem;min-height:2rem;overflow:hidden;position:relative;border-radius:50%;align-items:center;margin-right:-.5rem;justify-content:center;background-color:transparent}.bb-dialog-header-close:hover,.bb-dialog-header-close:focus{background-color:#f2f2f2}.bb-dialog-header-close:active{background-color:#e6e6e6}\n"], dependencies: [{ kind: "component", type: BbIcon, selector: "bb-icon", inputs: ["alt", "size", "ariaHidden", "unit", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
152
154
|
}
|
|
153
155
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogHeader, decorators: [{
|
|
154
156
|
type: Component,
|
|
155
|
-
args: [{ selector: '[bb-dialog-header]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-header' }, template: "
|
|
156
|
-
}], propDecorators: {
|
|
157
|
+
args: [{ selector: '[bb-dialog-header]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-header' }, imports: [BbIcon], template: "@if (icon; as iconSrc) {\n <bb-icon [src]=\"iconSrc\"></bb-icon>\n}\n\n<ng-content></ng-content>\n\n@if (closeRequested?.observed && !closeRequestedDisabled) {\n <button (click)=\"closeRequested?.emit()\"\n type=\"button\"\n class=\"bb-dialog-header-close\">\n <bb-icon [src]=\"closeIconName\"></bb-icon>\n </button>\n}\n", styles: [".bb-dialog-header{gap:.5rem;display:flex;align-items:center;min-height:3.75rem;padding:.75rem 1.5rem;background-color:#fff;border-bottom:1px solid #d8d8d8}.bb-dialog-header>h1,.bb-dialog-header>strong{flex:1;color:#111;display:block;max-width:100%;font-weight:500;overflow:hidden;font-size:1.125rem;white-space:nowrap;text-overflow:ellipsis}.bb-dialog-header-close{width:2rem;height:2rem;border:none;display:flex;min-width:2rem;min-height:2rem;overflow:hidden;position:relative;border-radius:50%;align-items:center;margin-right:-.5rem;justify-content:center;background-color:transparent}.bb-dialog-header-close:hover,.bb-dialog-header-close:focus{background-color:#f2f2f2}.bb-dialog-header-close:active{background-color:#e6e6e6}\n"] }]
|
|
158
|
+
}], propDecorators: { icon: [{
|
|
159
|
+
type: Input
|
|
160
|
+
}], closeRequestedDisabled: [{
|
|
161
|
+
type: Input,
|
|
162
|
+
args: [{ transform: booleanAttribute }]
|
|
163
|
+
}], closeRequested: [{
|
|
157
164
|
type: Output
|
|
165
|
+
}], onKeyEvent: [{
|
|
166
|
+
type: HostListener,
|
|
167
|
+
args: ['window:keyup', ['$event']]
|
|
158
168
|
}] } });
|
|
159
169
|
|
|
160
|
-
class BbDialogLink {
|
|
161
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
162
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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 });
|
|
163
|
-
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogLink, decorators: [{
|
|
165
|
-
type: Component,
|
|
166
|
-
args: [{ selector: '[bb-dialog-link]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-link' }, 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"] }]
|
|
167
|
-
}] });
|
|
168
|
-
|
|
169
170
|
class BbDialogActions {
|
|
170
171
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
171
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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:
|
|
172
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.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:1rem 1.5rem;background-color:#fff;border-top:1px solid #d8d8d8}\n"], dependencies: [{ kind: "component", type: BbFormGroup, selector: "bb-form-group", inputs: ["grouped"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
172
173
|
}
|
|
173
174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogActions, decorators: [{
|
|
174
175
|
type: Component,
|
|
175
|
-
args: [{ selector: '[bb-dialog-actions]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-actions' }, 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:
|
|
176
|
+
args: [{ selector: '[bb-dialog-actions]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-actions' }, 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:1rem 1.5rem;background-color:#fff;border-top:1px solid #d8d8d8}\n"] }]
|
|
176
177
|
}] });
|
|
177
178
|
|
|
178
179
|
class BbDialogInsertion {
|
|
179
|
-
viewContainerRef;
|
|
180
|
-
|
|
181
|
-
this.viewContainerRef = viewContainerRef;
|
|
182
|
-
}
|
|
183
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogInsertion, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
180
|
+
viewContainerRef = inject(ViewContainerRef);
|
|
181
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogInsertion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
184
182
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BbDialogInsertion, isStandalone: true, selector: "[bbDialogInsertion]", ngImport: i0 });
|
|
185
183
|
}
|
|
186
184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogInsertion, decorators: [{
|
|
@@ -188,7 +186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
188
186
|
args: [{
|
|
189
187
|
selector: '[bbDialogInsertion]'
|
|
190
188
|
}]
|
|
191
|
-
}]
|
|
189
|
+
}] });
|
|
192
190
|
|
|
193
191
|
class BbDialogContainer {
|
|
194
192
|
// Dependencies.
|
|
@@ -240,11 +238,11 @@ class BbDialogContainer {
|
|
|
240
238
|
Math.pow(event.clientY - initialY, 2));
|
|
241
239
|
}
|
|
242
240
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: BbDialogContainer, isStandalone: true, selector: "bb-dialog-container", host: { classAttribute: "bb-dialog-container" }, viewQueries: [{ propertyName: "insertion", first: true, predicate: BbDialogInsertion, descendants: true, static: true }], ngImport: i0, template: "<div class=\"bb-dialog-container-component\">\n <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container{inset:0;z-index:1000;display:flex;position:fixed;will-change:opacity;background-color:#1119;animation:dialogContainerEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving{animation:dialogContainerLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}.bb-dialog-container-component:has(.bb-dialog-modal.fullscreen){padding:0}@keyframes dialogContainerEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogContainerLeaving{to{background-color:transparent}}\n"], dependencies: [{ kind: "directive", type: BbDialogInsertion, selector: "[bbDialogInsertion]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
241
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: BbDialogContainer, isStandalone: true, selector: "bb-dialog-container", host: { classAttribute: "bb-dialog-container" }, viewQueries: [{ propertyName: "insertion", first: true, predicate: BbDialogInsertion, descendants: true, static: true }], ngImport: i0, template: "<div class=\"bb-dialog-container-component\">\n <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container{inset:0;z-index:1000;display:flex;position:fixed;will-change:opacity;background-color:#1119;animation:dialogContainerEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving{animation:dialogContainerLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal.fullscreen{animation:dialogModalFullscreenLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}.bb-dialog-container-component:has(.bb-dialog-modal.fullscreen){padding:0}@keyframes dialogContainerEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogContainerLeaving{to{background-color:transparent}}\n"], dependencies: [{ kind: "directive", type: BbDialogInsertion, selector: "[bbDialogInsertion]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
244
242
|
}
|
|
245
243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogContainer, decorators: [{
|
|
246
244
|
type: Component,
|
|
247
|
-
args: [{ selector: 'bb-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-container' }, imports: [BbDialogInsertion], template: "<div class=\"bb-dialog-container-component\">\n <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container{inset:0;z-index:1000;display:flex;position:fixed;will-change:opacity;background-color:#1119;animation:dialogContainerEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving{animation:dialogContainerLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}.bb-dialog-container-component:has(.bb-dialog-modal.fullscreen){padding:0}@keyframes dialogContainerEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogContainerLeaving{to{background-color:transparent}}\n"] }]
|
|
245
|
+
args: [{ selector: 'bb-dialog-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-container' }, imports: [BbDialogInsertion], template: "<div class=\"bb-dialog-container-component\">\n <ng-container bbDialogInsertion></ng-container>\n</div>\n", styles: [".bb-dialog-container{inset:0;z-index:1000;display:flex;position:fixed;will-change:opacity;background-color:#1119;animation:dialogContainerEntering .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving{animation:dialogContainerLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal{animation:dialogModalLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container.leaving .bb-dialog-modal.fullscreen{animation:dialogModalFullscreenLeaving .24s cubic-bezier(0,0,.2,1) forwards}.bb-dialog-container-component{width:100%;margin:auto;z-index:1001;display:block;padding:1.5rem;pointer-events:none;will-change:opacity,transform}.bb-dialog-container-component:has(.bb-dialog-modal.fullscreen){padding:0}@keyframes dialogContainerEntering{0%{background-color:transparent}to{background-color:#1119}}@keyframes dialogContainerLeaving{to{background-color:transparent}}\n"] }]
|
|
248
246
|
}], propDecorators: { insertion: [{
|
|
249
247
|
type: ViewChild,
|
|
250
248
|
args: [BbDialogInsertion, { static: true }]
|
|
@@ -263,40 +261,31 @@ class BbDialogConfirm {
|
|
|
263
261
|
cancelButtonText = this._config?.data?.cancelButtonText ?? 'dialog.default_cancel_button';
|
|
264
262
|
confirmButtonClass = this._config?.data?.confirmButtonClass ?? null;
|
|
265
263
|
cancelButtonClass = this._config?.data?.cancelButtonClass ?? null;
|
|
264
|
+
icon = this._config?.data?.icon ?? 'material:notifications_active';
|
|
266
265
|
width = this._config?.data?.width ?? '30rem';
|
|
267
|
-
// Views.
|
|
268
|
-
confirmButton;
|
|
269
|
-
ngAfterViewInit() {
|
|
270
|
-
// Initial focus the button.
|
|
271
|
-
this.confirmButton?.focus();
|
|
272
|
-
}
|
|
273
266
|
onClose(result) {
|
|
274
267
|
this._dialogRef.close(result);
|
|
275
268
|
}
|
|
276
269
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogConfirm, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
277
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BbDialogConfirm, isStandalone: true, selector: "bb-dialog-confirm", host: { classAttribute: "bb-dialog-confirm" },
|
|
270
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BbDialogConfirm, isStandalone: true, selector: "bb-dialog-confirm", host: { classAttribute: "bb-dialog-confirm" }, ngImport: i0, template: "<div [attr.aria-labelledby]=\"dialogId\"\n [maxWidth]=\"width\"\n bb-dialog-modal\n bbFocusTrap>\n <header [icon]=\"icon\"\n bb-dialog-header>\n @if (title; as titleContent) {\n <strong [id]=\"dialogId\">\n <ng-template [bbTemplate]=\"titleContent\">\n {{ $any(titleContent) | bbLocalize:{optional: true} }}\n </ng-template>\n </strong>\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 [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive full'\"\n (click)=\"onClose(true)\"\n bb-button\n bbFocus\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}.bb-dialog-confirm>.bb-dialog-modal>.bb-dialog-header>.bb-icon{color:var(--bb-destructive-color-500)}.bb-dialog-confirm-description{line-height:2;font-size:.875rem}.bb-dialog-confirm-footer{gap:1rem;display:flex;margin-top:1.5rem;flex-direction:column}@media only screen and (min-width: 768px){.bb-dialog-confirm-footer{flex-direction:row}}\n"], dependencies: [{ kind: "component", type: BbDialogModal, selector: "[bb-dialog-modal]", inputs: ["maxWidth", "fullscreen", "withoutBodyPadding"] }, { kind: "component", type: BbDialogHeader, selector: "[bb-dialog-header]", inputs: ["icon", "closeRequestedDisabled"], 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"] }, { kind: "directive", type: BbFocus, selector: "[bbFocus]", inputs: ["bbFocusMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
278
271
|
}
|
|
279
272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbDialogConfirm, decorators: [{
|
|
280
273
|
type: Component,
|
|
281
|
-
args: [{ selector: 'bb-dialog-confirm', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-confirm' }, 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 <
|
|
282
|
-
}]
|
|
283
|
-
type: ViewChild,
|
|
284
|
-
args: ['confirm', { read: BbButton, static: false }]
|
|
285
|
-
}] } });
|
|
274
|
+
args: [{ selector: 'bb-dialog-confirm', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'bb-dialog-confirm' }, imports: [BbDialogModal, BbDialogHeader, BbFocusTrap, BbLocalize, BbTemplate, NgClass, BbButton, BbFocus], template: "<div [attr.aria-labelledby]=\"dialogId\"\n [maxWidth]=\"width\"\n bb-dialog-modal\n bbFocusTrap>\n <header [icon]=\"icon\"\n bb-dialog-header>\n @if (title; as titleContent) {\n <strong [id]=\"dialogId\">\n <ng-template [bbTemplate]=\"titleContent\">\n {{ $any(titleContent) | bbLocalize:{optional: true} }}\n </ng-template>\n </strong>\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 [ngClass]=\"confirmButtonClass ? confirmButtonClass : 'destructive full'\"\n (click)=\"onClose(true)\"\n bb-button\n bbFocus\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}.bb-dialog-confirm>.bb-dialog-modal>.bb-dialog-header>.bb-icon{color:var(--bb-destructive-color-500)}.bb-dialog-confirm-description{line-height:2;font-size:.875rem}.bb-dialog-confirm-footer{gap:1rem;display:flex;margin-top:1.5rem;flex-direction:column}@media only screen and (min-width: 768px){.bb-dialog-confirm-footer{flex-direction:row}}\n"] }]
|
|
275
|
+
}] });
|
|
286
276
|
|
|
287
277
|
class Dialog {
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
this._environmentInjector = _environmentInjector;
|
|
293
|
-
}
|
|
278
|
+
// Dependencies.
|
|
279
|
+
_config = inject(DIALOG_CONFIG, { optional: true });
|
|
280
|
+
_applicationRef = inject(ApplicationRef);
|
|
281
|
+
_environmentInjector = inject(EnvironmentInjector);
|
|
294
282
|
open(componentType, config) {
|
|
295
283
|
return this.createDialog(componentType, config);
|
|
296
284
|
}
|
|
297
285
|
async confirm(title, description, options) {
|
|
286
|
+
const icon = options?.confirmIconName ?? this._config?.icons?.confirmIcon ?? null;
|
|
298
287
|
const dialogRef = this.open(BbDialogConfirm, {
|
|
299
|
-
data: { title, description, ...(options ?? {}) }
|
|
288
|
+
data: { title, description, ...(options ?? {}), icon }
|
|
300
289
|
});
|
|
301
290
|
return await firstValueFrom(dialogRef.afterClosed);
|
|
302
291
|
}
|
|
@@ -342,7 +331,7 @@ class Dialog {
|
|
|
342
331
|
dialogComponentRef.destroy();
|
|
343
332
|
dialogComponentRef = null;
|
|
344
333
|
}
|
|
345
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Dialog, deps: [
|
|
334
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Dialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
346
335
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Dialog, providedIn: 'root' });
|
|
347
336
|
}
|
|
348
337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: Dialog, decorators: [{
|
|
@@ -350,7 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
350
339
|
args: [{
|
|
351
340
|
providedIn: 'root'
|
|
352
341
|
}]
|
|
353
|
-
}]
|
|
342
|
+
}] });
|
|
354
343
|
|
|
355
344
|
class BbConfirm {
|
|
356
345
|
// Dependencies.
|
|
@@ -358,6 +347,7 @@ class BbConfirm {
|
|
|
358
347
|
// Inputs.
|
|
359
348
|
bbConfirmTitle = 'dialog.default_title';
|
|
360
349
|
bbConfirmDescription = 'dialog.default_description';
|
|
350
|
+
bbConfirmIconName = null;
|
|
361
351
|
bbConfirmButtonText = null;
|
|
362
352
|
bbCancelButtonText = null;
|
|
363
353
|
// Outputs.
|
|
@@ -365,7 +355,8 @@ class BbConfirm {
|
|
|
365
355
|
async onClick(event) {
|
|
366
356
|
const confirmed = await this._dialog.confirm(this.bbConfirmTitle, this.bbConfirmDescription, {
|
|
367
357
|
confirmButtonText: this.bbConfirmButtonText,
|
|
368
|
-
cancelButtonText: this.bbCancelButtonText
|
|
358
|
+
cancelButtonText: this.bbCancelButtonText,
|
|
359
|
+
confirmIconName: this.bbConfirmIconName
|
|
369
360
|
});
|
|
370
361
|
if (!confirmed) {
|
|
371
362
|
return;
|
|
@@ -373,7 +364,7 @@ class BbConfirm {
|
|
|
373
364
|
this.confirm.emit(event);
|
|
374
365
|
}
|
|
375
366
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbConfirm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
376
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.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 });
|
|
367
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BbConfirm, isStandalone: true, selector: "[bbConfirm]", inputs: { bbConfirmTitle: "bbConfirmTitle", bbConfirmDescription: "bbConfirmDescription", bbConfirmIconName: "bbConfirmIconName", bbConfirmButtonText: "bbConfirmButtonText", bbCancelButtonText: "bbCancelButtonText" }, outputs: { confirm: "bbConfirm" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 });
|
|
377
368
|
}
|
|
378
369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BbConfirm, decorators: [{
|
|
379
370
|
type: Directive,
|
|
@@ -384,6 +375,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
384
375
|
type: Input
|
|
385
376
|
}], bbConfirmDescription: [{
|
|
386
377
|
type: Input
|
|
378
|
+
}], bbConfirmIconName: [{
|
|
379
|
+
type: Input
|
|
387
380
|
}], bbConfirmButtonText: [{
|
|
388
381
|
type: Input
|
|
389
382
|
}], bbCancelButtonText: [{
|
|
@@ -416,17 +409,16 @@ class DialogModule {
|
|
|
416
409
|
BbDialogOverlay,
|
|
417
410
|
BbDialogModal,
|
|
418
411
|
BbDialogHeader,
|
|
419
|
-
BbDialogLink,
|
|
420
412
|
BbDialogActions,
|
|
421
413
|
BbDialogConfirm,
|
|
422
414
|
BbDialogInsertion,
|
|
423
415
|
BbConfirm], exports: [BbDialogOverlay,
|
|
424
416
|
BbDialogModal,
|
|
425
417
|
BbDialogHeader,
|
|
426
|
-
BbDialogLink,
|
|
427
418
|
BbDialogActions,
|
|
428
419
|
BbConfirm] });
|
|
429
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogModule, imports: [
|
|
420
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogModule, imports: [BbDialogHeader,
|
|
421
|
+
BbDialogActions,
|
|
430
422
|
BbDialogConfirm] });
|
|
431
423
|
}
|
|
432
424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogModule, decorators: [{
|
|
@@ -437,7 +429,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
437
429
|
BbDialogOverlay,
|
|
438
430
|
BbDialogModal,
|
|
439
431
|
BbDialogHeader,
|
|
440
|
-
BbDialogLink,
|
|
441
432
|
BbDialogActions,
|
|
442
433
|
BbDialogConfirm,
|
|
443
434
|
BbDialogInsertion,
|
|
@@ -447,7 +438,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
447
438
|
BbDialogOverlay,
|
|
448
439
|
BbDialogModal,
|
|
449
440
|
BbDialogHeader,
|
|
450
|
-
BbDialogLink,
|
|
451
441
|
BbDialogActions,
|
|
452
442
|
BbConfirm
|
|
453
443
|
]
|
|
@@ -458,5 +448,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
458
448
|
* Generated bundle index. Do not edit.
|
|
459
449
|
*/
|
|
460
450
|
|
|
461
|
-
export { BbConfirm, BbDialogActions, BbDialogConfig, BbDialogHeader,
|
|
451
|
+
export { BbConfirm, BbDialogActions, BbDialogConfig, BbDialogHeader, BbDialogModal, BbDialogOverlay, BbDialogRef, DIALOG_CONFIG, Dialog, DialogConfig, DialogModule, provideDialogConfig };
|
|
462
452
|
//# sourceMappingURL=bravobit-bb-foundation-dialog.mjs.map
|