@flywheel-io/vision 2.7.7 → 2.8.0
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/components/dialog/dialog-confirm.component.d.ts +3 -3
- package/components/snackbar/snackbar/snackbar.component.d.ts +14 -10
- package/components/snackbar/snackbar-message.model.d.ts +3 -1
- package/components/tooltip/tooltip-panel/tooltip-panel.component.d.ts +1 -1
- package/esm2022/components/dialog/dialog-confirm.component.mjs +10 -5
- package/esm2022/components/snackbar/snackbar/snackbar.component.mjs +48 -64
- package/esm2022/components/snackbar/snackbar-message.model.mjs +1 -1
- package/fesm2022/flywheel-io-vision.mjs +56 -66
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, output, Host, ViewChildren, Self, viewChildren } from '@angular/core';
|
|
2
|
+
import { HostBinding, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule, input, model, computed, ViewEncapsulation, HostListener, signal, effect, inject, ElementRef, ViewContainerRef, Directive, contentChildren, viewChild, ChangeDetectorRef, ContentChildren, ViewChild, forwardRef, Optional, Inject, SkipSelf, Injectable, Pipe, ContentChild, output, Host, ViewChildren, Self, TemplateRef, viewChildren } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -3223,6 +3223,7 @@ class FwDialogConfirmComponent {
|
|
|
3223
3223
|
this.title = 'Confirm';
|
|
3224
3224
|
this.iconColor = 'primary';
|
|
3225
3225
|
this.confirmColor = 'primary';
|
|
3226
|
+
this.cancelColor = 'slate';
|
|
3226
3227
|
this.confirmButtonText = 'Confirm';
|
|
3227
3228
|
this.confirmButtonIcon = 'done-check';
|
|
3228
3229
|
this.cancelButtonText = 'Cancel';
|
|
@@ -3233,7 +3234,6 @@ class FwDialogConfirmComponent {
|
|
|
3233
3234
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
3234
3235
|
this.close = new EventEmitter();
|
|
3235
3236
|
this.confirm = new EventEmitter();
|
|
3236
|
-
this.DialogWidth = DialogWidth;
|
|
3237
3237
|
this.isClosing = false;
|
|
3238
3238
|
}
|
|
3239
3239
|
get classes() {
|
|
@@ -3265,6 +3265,10 @@ class FwDialogConfirmComponent {
|
|
|
3265
3265
|
handleCloseButton() {
|
|
3266
3266
|
this.closeWithAnimation();
|
|
3267
3267
|
}
|
|
3268
|
+
handleConfirm() {
|
|
3269
|
+
this.dialogRef.close(true);
|
|
3270
|
+
this.confirm.emit();
|
|
3271
|
+
}
|
|
3268
3272
|
closeWithAnimation() {
|
|
3269
3273
|
if (this.isClosing) {
|
|
3270
3274
|
return;
|
|
@@ -3276,11 +3280,11 @@ class FwDialogConfirmComponent {
|
|
|
3276
3280
|
}, 300);
|
|
3277
3281
|
}
|
|
3278
3282
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, deps: [{ token: i1$3.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3283
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", cancelColor: "cancelColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", showConfirmButtonIcon: "showConfirmButtonIcon", showClose: "showClose", width: "width", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\">\n {{ contentIcon }}\n </fw-icon>\n }\n\n @if (contentTitle) {\n <p class=\"vision-p2 content-title\">\n {{ contentTitle }}\n </p>\n }\n\n @if (contentText) {\n <p class=\"vision-p2 content-text\">\n {{ contentText }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText) {\n <fw-button\n variant=\"outline\"\n [color]=\"cancelColor\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n }\n\n @if (confirmButtonText) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor\"\n [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n (click)=\"handleConfirm()\">\n {{ confirmButtonText }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
|
|
3280
3284
|
}
|
|
3281
3285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, decorators: [{
|
|
3282
3286
|
type: Component,
|
|
3283
|
-
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\"
|
|
3287
|
+
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\">\n {{ contentIcon }}\n </fw-icon>\n }\n\n @if (contentTitle) {\n <p class=\"vision-p2 content-title\">\n {{ contentTitle }}\n </p>\n }\n\n @if (contentText) {\n <p class=\"vision-p2 content-text\">\n {{ contentText }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText) {\n <fw-button\n variant=\"outline\"\n [color]=\"cancelColor\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n }\n\n @if (confirmButtonText) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor\"\n [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n (click)=\"handleConfirm()\">\n {{ confirmButtonText }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
|
|
3284
3288
|
}], ctorParameters: () => [{ type: i1$3.DialogRef, decorators: [{
|
|
3285
3289
|
type: Optional
|
|
3286
3290
|
}] }, { type: i0.ElementRef }], propDecorators: { title: [{
|
|
@@ -3291,6 +3295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3291
3295
|
type: Input
|
|
3292
3296
|
}], confirmColor: [{
|
|
3293
3297
|
type: Input
|
|
3298
|
+
}], cancelColor: [{
|
|
3299
|
+
type: Input
|
|
3294
3300
|
}], confirmButtonText: [{
|
|
3295
3301
|
type: Input
|
|
3296
3302
|
}], confirmButtonIcon: [{
|
|
@@ -7576,8 +7582,9 @@ class FwSnackbarTimerService {
|
|
|
7576
7582
|
class FwSnackbarComponent {
|
|
7577
7583
|
get cssClass() {
|
|
7578
7584
|
const cssClass = 'fw-snackbar';
|
|
7579
|
-
|
|
7580
|
-
|
|
7585
|
+
const severity = this.message()?.severity;
|
|
7586
|
+
if (severity) {
|
|
7587
|
+
return cssClass + ' ' + this.color();
|
|
7581
7588
|
}
|
|
7582
7589
|
else {
|
|
7583
7590
|
return cssClass;
|
|
@@ -7586,21 +7593,47 @@ class FwSnackbarComponent {
|
|
|
7586
7593
|
constructor(cdr, timerService) {
|
|
7587
7594
|
this.cdr = cdr;
|
|
7588
7595
|
this.timerService = timerService;
|
|
7589
|
-
this.
|
|
7590
|
-
this.
|
|
7591
|
-
this.
|
|
7592
|
-
this.
|
|
7593
|
-
this.
|
|
7596
|
+
this.message = input.required();
|
|
7597
|
+
this.messageDuration = input(9000);
|
|
7598
|
+
this.ready = output();
|
|
7599
|
+
this.dismiss = output();
|
|
7600
|
+
this.action = output();
|
|
7601
|
+
this.defaultIcons = {
|
|
7602
|
+
success: 'done-check-tracked',
|
|
7603
|
+
warning: 'warning-circle',
|
|
7604
|
+
error: 'warning',
|
|
7605
|
+
info: 'information-circle',
|
|
7606
|
+
};
|
|
7607
|
+
this.icon = computed(() => this.message().icon || this.defaultIcons[this.message().severity]);
|
|
7608
|
+
this.showClose = computed(() => {
|
|
7609
|
+
const msg = this.message();
|
|
7610
|
+
return msg.showClose !== undefined ? msg.showClose : msg.severity === 'error';
|
|
7611
|
+
});
|
|
7612
|
+
this.duration = computed(() => {
|
|
7613
|
+
const msg = this.message();
|
|
7614
|
+
if (msg.duration) {
|
|
7615
|
+
return msg.duration;
|
|
7616
|
+
}
|
|
7617
|
+
return msg.severity === 'error' ? 29000 : this.messageDuration();
|
|
7618
|
+
});
|
|
7619
|
+
this.color = computed(() => {
|
|
7620
|
+
const severity = this.message().severity;
|
|
7621
|
+
const colors = {
|
|
7622
|
+
success: 'success',
|
|
7623
|
+
warning: 'warning',
|
|
7624
|
+
error: 'danger',
|
|
7625
|
+
info: 'primary',
|
|
7626
|
+
};
|
|
7627
|
+
return colors[severity] || 'primary';
|
|
7628
|
+
});
|
|
7629
|
+
this.isTemplateRef = computed(() => this.message().message instanceof TemplateRef);
|
|
7594
7630
|
}
|
|
7595
7631
|
ngAfterViewInit() {
|
|
7596
7632
|
this.ready.emit(this);
|
|
7597
7633
|
this.cdr.markForCheck();
|
|
7598
7634
|
}
|
|
7599
7635
|
startTimer() {
|
|
7600
|
-
|
|
7601
|
-
this.messageDuration = this.message.duration;
|
|
7602
|
-
}
|
|
7603
|
-
this.timerService.start(this.messageDuration).then(() => {
|
|
7636
|
+
this.timerService.start(this.duration()).then(() => {
|
|
7604
7637
|
this.handleDismiss();
|
|
7605
7638
|
this.cdr.markForCheck();
|
|
7606
7639
|
});
|
|
@@ -7609,68 +7642,25 @@ class FwSnackbarComponent {
|
|
|
7609
7642
|
this.timerService.stop();
|
|
7610
7643
|
this.cdr.markForCheck();
|
|
7611
7644
|
}
|
|
7612
|
-
ngOnInit() {
|
|
7613
|
-
switch (this.message.severity) {
|
|
7614
|
-
case 'success':
|
|
7615
|
-
if (!this.message.icon) {
|
|
7616
|
-
this.message.icon = 'done-check-tracked';
|
|
7617
|
-
}
|
|
7618
|
-
this.color = 'success';
|
|
7619
|
-
break;
|
|
7620
|
-
case 'warning':
|
|
7621
|
-
if (!this.message.icon) {
|
|
7622
|
-
this.message.icon = 'warning-circle';
|
|
7623
|
-
}
|
|
7624
|
-
this.color = 'warning';
|
|
7625
|
-
break;
|
|
7626
|
-
case 'error':
|
|
7627
|
-
if (!this.message.icon) {
|
|
7628
|
-
this.message.icon = 'warning';
|
|
7629
|
-
}
|
|
7630
|
-
if (this.message.showClose === undefined) {
|
|
7631
|
-
this.message.showClose = true;
|
|
7632
|
-
}
|
|
7633
|
-
if (!this.message.duration) {
|
|
7634
|
-
this.message.duration = 29000;
|
|
7635
|
-
}
|
|
7636
|
-
this.color = 'danger';
|
|
7637
|
-
break;
|
|
7638
|
-
case 'info':
|
|
7639
|
-
if (!this.message.icon) {
|
|
7640
|
-
this.message.icon = 'information-circle';
|
|
7641
|
-
}
|
|
7642
|
-
this.color = 'primary';
|
|
7643
|
-
break;
|
|
7644
|
-
}
|
|
7645
|
-
}
|
|
7646
7645
|
handleDismiss() {
|
|
7647
|
-
this.dismiss.emit(this.message.id);
|
|
7646
|
+
this.dismiss.emit(this.message().id);
|
|
7648
7647
|
this.cdr.markForCheck();
|
|
7649
7648
|
}
|
|
7650
7649
|
handleAction() {
|
|
7651
|
-
this.
|
|
7652
|
-
|
|
7653
|
-
|
|
7650
|
+
const msg = this.message();
|
|
7651
|
+
this.action.emit(msg.id);
|
|
7652
|
+
if (msg.action) {
|
|
7653
|
+
msg.action();
|
|
7654
7654
|
}
|
|
7655
7655
|
this.cdr.markForCheck();
|
|
7656
7656
|
}
|
|
7657
7657
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwSnackbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FwSnackbarTimerService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7658
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
7658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwSnackbarComponent, selector: "fw-snackbar", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, messageDuration: { classPropertyName: "messageDuration", publicName: "messageDuration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ready: "ready", dismiss: "dismiss", action: "action" }, host: { properties: { "class": "this.cssClass" } }, providers: [FwSnackbarTimerService], ngImport: i0, template: "@if (message(); as msg) {\n @if (icon()) {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @if (isTemplateRef()) {\n <ng-container *ngTemplateOutlet=\"$any(msg.message); context: msg.templateContext\"></ng-container>\n } @else {\n @if (msg.message) {\n <h4 class=\"vision-h4\">{{ msg.message }}</h4>\n }\n }\n @if (msg.actionText) {\n <fw-button\n size=\"small\"\n variant=\"ghost\"\n [color]=\"color()\"\n (click)=\"handleAction()\"\n >\n {{ msg.actionText }}\n </fw-button>\n }\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\"\n size=\"small\"\n [color]=\"msg.severity\"\n (click)=\"handleDismiss()\"\n ></fw-icon-button>\n }\n @if (!msg.actionText && !showClose()) {\n <div></div>\n }\n}\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,fw-snackbar{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}fw-snackbar{display:flex;align-items:flex-start;box-sizing:border-box;max-width:320px;min-width:200px;min-height:30px;padding:8px 8px 8px 16px;gap:8px;transform-origin:center;background-color:var(--card-header);color:var(--typography-base);white-space:pre-wrap;border-radius:4px;border:1px solid var(--separations-border);margin:8px}fw-snackbar>fw-icon{width:24px;height:24px;font-size:24px;white-space:nowrap;margin:3px 0}fw-snackbar h4{margin:6px 0 0;flex:1}fw-snackbar.primary fw-icon{color:var(--primary-base)}fw-snackbar.danger fw-icon{color:var(--red-base)}fw-snackbar.success fw-icon{color:var(--green-base)}fw-snackbar.warning fw-icon{color:var(--orange-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconButtonComponent, selector: "fw-icon-button", inputs: ["color", "icon", "size", "disabled", "selected"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7659
7659
|
}
|
|
7660
7660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwSnackbarComponent, decorators: [{
|
|
7661
7661
|
type: Component,
|
|
7662
|
-
args: [{ selector: 'fw-snackbar', providers: [FwSnackbarTimerService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
7663
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FwSnackbarTimerService }], propDecorators: {
|
|
7664
|
-
type: Input
|
|
7665
|
-
}], messageDuration: [{
|
|
7666
|
-
type: Input
|
|
7667
|
-
}], ready: [{
|
|
7668
|
-
type: Output
|
|
7669
|
-
}], dismiss: [{
|
|
7670
|
-
type: Output
|
|
7671
|
-
}], action: [{
|
|
7672
|
-
type: Output
|
|
7673
|
-
}], cssClass: [{
|
|
7662
|
+
args: [{ selector: 'fw-snackbar', providers: [FwSnackbarTimerService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (message(); as msg) {\n @if (icon()) {\n <fw-icon>{{ icon() }}</fw-icon>\n }\n @if (isTemplateRef()) {\n <ng-container *ngTemplateOutlet=\"$any(msg.message); context: msg.templateContext\"></ng-container>\n } @else {\n @if (msg.message) {\n <h4 class=\"vision-h4\">{{ msg.message }}</h4>\n }\n }\n @if (msg.actionText) {\n <fw-button\n size=\"small\"\n variant=\"ghost\"\n [color]=\"color()\"\n (click)=\"handleAction()\"\n >\n {{ msg.actionText }}\n </fw-button>\n }\n @if (showClose()) {\n <fw-icon-button\n icon=\"close\"\n size=\"small\"\n [color]=\"msg.severity\"\n (click)=\"handleDismiss()\"\n ></fw-icon-button>\n }\n @if (!msg.actionText && !showClose()) {\n <div></div>\n }\n}\n", styles: [".vision-shadow-extra-large{box-shadow:0 8px 25px #0000001a}.vision-shadow-large,fw-snackbar{box-shadow:0 5px 15px #0000001a}.vision-shadow-medium{box-shadow:0 2px 5px #0000001a}.vision-shadow-small{box-shadow:0 1px 2px #0000000d}.vision-shadow-inner{box-shadow:0 2px 4px #00000014 inset}fw-snackbar{display:flex;align-items:flex-start;box-sizing:border-box;max-width:320px;min-width:200px;min-height:30px;padding:8px 8px 8px 16px;gap:8px;transform-origin:center;background-color:var(--card-header);color:var(--typography-base);white-space:pre-wrap;border-radius:4px;border:1px solid var(--separations-border);margin:8px}fw-snackbar>fw-icon{width:24px;height:24px;font-size:24px;white-space:nowrap;margin:3px 0}fw-snackbar h4{margin:6px 0 0;flex:1}fw-snackbar.primary fw-icon{color:var(--primary-base)}fw-snackbar.danger fw-icon{color:var(--red-base)}fw-snackbar.success fw-icon{color:var(--green-base)}fw-snackbar.warning fw-icon{color:var(--orange-base)}\n"] }]
|
|
7663
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FwSnackbarTimerService }], propDecorators: { cssClass: [{
|
|
7674
7664
|
type: HostBinding,
|
|
7675
7665
|
args: ['class']
|
|
7676
7666
|
}] } });
|