@versatiledatakit/shared
Version:
Versatile Data Kit Shared library enables reusability of shared features like: NgRx Redux, Error Handlers, Utils, Generic Components, etc.
503 lines • 93.3 kB
JavaScript
/*
* Copyright 2023-2025 Broadcom
* SPDX-License-Identifier: Apache-2.0
*/
/* eslint-disable */
import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { trigger, group, style, animate, transition, query, animateChild, keyframes } from '@angular/animations';
import { timer } from 'rxjs';
import { take } from 'rxjs/operators';
import { VmwToastType } from './toast.model';
import { TRANSLATIONS } from './toast.l10n';
import { multiply, componentPrimaryEnterCurve, componentPrimaryEnterTiming, componentPrimaryLeaveCurve, componentPrimaryLeaveTiming, linePrimaryEnterCurve, linePrimaryEnterTiming, linePrimaryEnterDelay, lineSecondaryEnterCurve, lineSecondaryEnterTiming, lineSecondaryEnterDelay, DISMISS_ICON_DELAY, DISMISS_ICON_DURATION, DISMISS_ICON_CURVE, GRADIENT_DURATION, GRADIENT_DELAY, GRADIENT_LEAVE_CURVE } from '../animation-constants';
import * as i0 from "@angular/core";
import * as i1 from "../../ngx-utils";
import * as i2 from "@angular/common";
import * as i3 from "@clr/angular";
import * as i4 from "../../ngx-utils/simple-translate-service/simple-translate.pipe";
function VdkToastComponent_div_0_ng_container_4_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(1, "svg", 13);
i0.ɵɵelement(2, "path", 14)(3, "path", 15)(4, "circle", 16);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
i0.ɵɵadvance(3);
i0.ɵɵproperty("@errorLine", undefined);
i0.ɵɵadvance(1);
i0.ɵɵproperty("@errorDot", undefined);
} }
function VdkToastComponent_div_0_ng_container_5_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(1, "svg", 13);
i0.ɵɵelement(2, "path", 17)(3, "path", 18)(4, "circle", 19);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
i0.ɵɵadvance(3);
i0.ɵɵproperty("@infoLine", undefined);
i0.ɵɵadvance(1);
i0.ɵɵproperty("@infoDot", undefined);
} }
function VdkToastComponent_div_0_ng_container_6_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(1, "svg", 13);
i0.ɵɵelement(2, "path", 20)(3, "circle", 21)(4, "path", 22);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
i0.ɵɵadvance(2);
i0.ɵɵproperty("@warnLine", undefined);
i0.ɵɵadvance(1);
i0.ɵɵproperty("@warnDot", undefined);
} }
function VdkToastComponent_div_0_ng_container_7_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainerStart(0);
i0.ɵɵnamespaceSVG();
i0.ɵɵelementStart(1, "svg", 23);
i0.ɵɵpipe(2, "simpleTranslate");
i0.ɵɵpipe(3, "simpleTranslate");
i0.ɵɵelement(4, "circle", 24)(5, "path", 25);
i0.ɵɵelementEnd();
i0.ɵɵelementContainerEnd();
} if (rf & 2) {
i0.ɵɵadvance(1);
i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(3, 5, "toast.info-icon"));
i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 3, "toast.success-icon"));
i0.ɵɵadvance(4);
i0.ɵɵproperty("@checkmarkLine", undefined);
} }
function VdkToastComponent_div_0_button_14_Template(rf, ctx) { if (rf & 1) {
const _r9 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 26);
i0.ɵɵlistener("click", function VdkToastComponent_div_0_button_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(2); return ctx_r8.dismiss(true); })("focus", function VdkToastComponent_div_0_button_14_Template_button_focus_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r10 = i0.ɵɵnextContext(2); return ctx_r10.focus(true); })("blur", function VdkToastComponent_div_0_button_14_Template_button_blur_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r11 = i0.ɵɵnextContext(2); return ctx_r11.focus(false); });
i0.ɵɵpipe(1, "simpleTranslate");
i0.ɵɵelementStart(2, "span", 27);
i0.ɵɵelement(3, "cds-icon", 28);
i0.ɵɵelementEnd()();
} if (rf & 2) {
i0.ɵɵpropertyInterpolate("title", i0.ɵɵpipeBind1(1, 2, "toast.dismiss-notification"));
i0.ɵɵadvance(2);
i0.ɵɵproperty("@dismissIconVisible", undefined);
} }
function VdkToastComponent_div_0_button_18_Template(rf, ctx) { if (rf & 1) {
const _r13 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 29);
i0.ɵɵlistener("focus", function VdkToastComponent_div_0_button_18_Template_button_focus_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(2); return ctx_r12.focus(true); })("blur", function VdkToastComponent_div_0_button_18_Template_button_blur_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(2); return ctx_r14.focus(false); })("click", function VdkToastComponent_div_0_button_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r15 = i0.ɵɵnextContext(2); return ctx_r15.primaryButtonClick.emit(); });
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r6 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("title", ctx_r6.primaryButtonText);
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1(" ", ctx_r6.primaryButtonText, " ");
} }
function VdkToastComponent_div_0_button_19_Template(rf, ctx) { if (rf & 1) {
const _r17 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "button", 30);
i0.ɵɵlistener("focus", function VdkToastComponent_div_0_button_19_Template_button_focus_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(2); return ctx_r16.focus(true); })("blur", function VdkToastComponent_div_0_button_19_Template_button_blur_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r18 = i0.ɵɵnextContext(2); return ctx_r18.focus(false); })("click", function VdkToastComponent_div_0_button_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r19 = i0.ɵɵnextContext(2); return ctx_r19.secondaryButtonClick.emit(); });
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
const ctx_r7 = i0.ɵɵnextContext(2);
i0.ɵɵproperty("title", ctx_r7.secondaryButtonText);
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate1(" ", ctx_r7.secondaryButtonText, " ");
} }
function VdkToastComponent_div_0_Template(rf, ctx) { if (rf & 1) {
const _r21 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 1);
i0.ɵɵlistener("mouseover", function VdkToastComponent_div_0_Template_div_mouseover_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r20 = i0.ɵɵnextContext(); return ctx_r20.mouseOver(true); })("mouseleave", function VdkToastComponent_div_0_Template_div_mouseleave_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r22 = i0.ɵɵnextContext(); return ctx_r22.mouseOver(false); });
i0.ɵɵelement(1, "span", 2);
i0.ɵɵelementStart(2, "div", 3);
i0.ɵɵelementContainerStart(3, 4);
i0.ɵɵtemplate(4, VdkToastComponent_div_0_ng_container_4_Template, 5, 2, "ng-container", 5);
i0.ɵɵtemplate(5, VdkToastComponent_div_0_ng_container_5_Template, 5, 2, "ng-container", 5);
i0.ɵɵtemplate(6, VdkToastComponent_div_0_ng_container_6_Template, 5, 2, "ng-container", 5);
i0.ɵɵtemplate(7, VdkToastComponent_div_0_ng_container_7_Template, 6, 7, "ng-container", 5);
i0.ɵɵelementContainerEnd();
i0.ɵɵprojection(8);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(9, "div", 6)(10, "div", 7)(11, "div", 8);
i0.ɵɵprojection(12, 1);
i0.ɵɵprojection(13, 2);
i0.ɵɵtemplate(14, VdkToastComponent_div_0_button_14_Template, 4, 4, "button", 9);
i0.ɵɵelementEnd()();
i0.ɵɵprojection(15, 3);
i0.ɵɵprojection(16, 4);
i0.ɵɵelementStart(17, "div", 10);
i0.ɵɵtemplate(18, VdkToastComponent_div_0_button_18_Template, 2, 2, "button", 11);
i0.ɵɵtemplate(19, VdkToastComponent_div_0_button_19_Template, 2, 2, "button", 12);
i0.ɵɵelementEnd()()();
} if (rf & 2) {
const ctx_r0 = i0.ɵɵnextContext();
i0.ɵɵproperty("@launchToast", ctx_r0.loaded);
i0.ɵɵadvance(1);
i0.ɵɵproperty("@gradientMove", undefined);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngSwitch", ctx_r0.type);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngSwitchCase", ctx_r0.VmwToastType.FAILURE);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngSwitchCase", ctx_r0.VmwToastType.INFO);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngSwitchCase", ctx_r0.VmwToastType.WARN);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngSwitchCase", ctx_r0.VmwToastType.SUCCESS);
i0.ɵɵadvance(7);
i0.ɵɵproperty("ngIf", ctx_r0.dismissible);
i0.ɵɵadvance(4);
i0.ɵɵproperty("ngIf", ctx_r0.primaryButtonText);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx_r0.secondaryButtonText);
} }
const _c0 = [[["cds-icon"]], [["", 8, "toast-title"]], [["span", 8, "toast-date"]], [["p", 8, "toast-description"]], [["a", 8, "toast-link"]]];
const _c1 = ["cds-icon", ".toast-title", "span.toast-date", "p.toast-description", "a.toast-link"];
const AUTODISMISS_TIMEOUT_SECONDS = 6;
const TRACKED_TAG = {
A: true,
BUTTON: true
};
export class VdkToastComponent {
constructor(element, ngZone, translateService // @Optional() private segmentService,
) {
this.element = element;
this.ngZone = ngZone;
this.translateService = translateService;
this.mouseover = false;
this.focused = false;
this.type = VmwToastType.INFO;
this.dismissible = true;
this.timeoutSeconds = AUTODISMISS_TIMEOUT_SECONDS;
this.dismissed = new EventEmitter();
this.primaryButtonClick = new EventEmitter();
this.secondaryButtonClick = new EventEmitter();
this.VmwToastType = VmwToastType;
this.disableAutoDismiss = false;
this.animate = true;
this.translateService.loadTranslationsForComponent('toast', TRANSLATIONS);
}
ngOnInit() {
this.setUpTimer();
}
trackClicks(event) {
return;
}
mouseOver(over) {
// If the user moves their mouse over the snack, disable auto-dismiss
this.disableAutoDismiss = over;
}
focus(focused) {
this.disableAutoDismiss = focused;
}
get loaded() {
return {
value: this.animate,
params: {
height: this.element.nativeElement.clientHeight
}
};
}
dismiss(userDismissed = false) {
this.animate = false;
// before we tell the app to remove the toast, give the leave animation
// some time to run...
timer(multiply(componentPrimaryLeaveTiming + 200))
.pipe(take(1))
.subscribe(() => {
this.dismissed.emit();
});
}
setUpTimer() {
if (this.timeoutSeconds > 0) {
this.ngZone.runOutsideAngular(() => {
timer(this.timeoutSeconds * multiply(1000))
.pipe(take(1))
.subscribe(() => {
this.ngZone.run(() => {
if (this.disableAutoDismiss) {
this.setUpTimer();
return;
}
this.dismiss();
});
});
});
}
}
}
VdkToastComponent.ɵfac = function VdkToastComponent_Factory(t) { return new (t || VdkToastComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i1.VdkSimpleTranslateService)); };
VdkToastComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: VdkToastComponent, selectors: [["vdk-toast"]], hostBindings: function VdkToastComponent_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("click", function VdkToastComponent_click_HostBindingHandler($event) { return ctx.trackClicks($event); });
} }, inputs: { type: "type", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", dismissible: "dismissible", timeoutSeconds: "timeoutSeconds" }, outputs: { dismissed: "dismissed", primaryButtonClick: "primaryButtonClick", secondaryButtonClick: "secondaryButtonClick" }, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["class", "toast", 3, "mouseover", "mouseleave", 4, "ngIf"], [1, "toast", 3, "mouseover", "mouseleave"], [1, "gradient"], [1, "icon"], [3, "ngSwitch"], [4, "ngSwitchCase"], [1, "content"], [1, "content-wrapper"], ["tabindex", "0", 1, "toast-title-container"], ["class", "dismiss-bg", 3, "title", "click", "focus", "blur", 4, "ngIf"], [1, "button-container"], ["class", "toast-button", 3, "title", "focus", "blur", "click", 4, "ngIf"], ["class", "toast-button secondary", 3, "title", "focus", "blur", "click", 4, "ngIf"], ["width", "36", "height", "36", "viewBox", "0 0 36 36", 1, "icon-container"], ["id", "error-icon-outline", "d", "M18,7A11,11,0,1,1,7,18,11,11,0,0,1,18,7"], ["id", "error-icon-line", "d", "M18,12.8v5.9"], ["id", "error-icon-dot", "cx", "18", "cy", "23", "r", "1.4"], ["id", "info-icon-outline", "d", "M18,7A11,11,0,1,1,7,18,11,11,0,0,1,18,7"], ["id", "info-icon-line", "d", "M16,16h2v8m-3,0h6"], ["id", "info-icon-dot", "cx", "17.9", "cy", "11.85", "r", "1.3"], ["id", "warn-icon-line", "d", "m18.34483,21.57552a1,0.60591 0 0 1 -1,-0.60591l0,-7.27097a1,0.60591 0 1 1 2,0l0,7.27097a1,0.60591 0 0 1 -1,0.60591z"], ["id", "warn-icon-dot", "r", "1.33", "cy", "24.6807", "cx", "18.34483"], ["id", "warn-icon-triangle", "d", "m16.13908,7.08311c0.41921,-0.76188 1.21734,-1.23369 2.08417,-1.23369c0.86684,0 1.66496,0.47181 2.0847,1.23467l10.25504,18.87105c0.40026,0.73655 0.38302,1.62945 -0.04535,2.35c-0.42838,0.72056 -1.20458,1.16225 -2.04305,1.16247l-20.48617,-0.00018c-0.84779,0.01899 -1.64152,-0.41505 -2.083,-1.13908c-0.44148,-0.72403 -0.46386,-1.6284 -0.05831,-2.37417l10.29196,-18.87105zm-8.99518,19.57726c-0.15349,0.28226 -0.14501,0.62491 0.02226,0.89923c0.16726,0.27432 0.468,0.43877 0.80574,0.43139l20.5025,0c0.31761,-0.00008 0.6117,-0.16743 0.774,-0.44044c0.16231,-0.273 0.16884,-0.61131 0.01719,-0.89037l-10.25319,-18.86765c-0.15833,-0.28775 -0.46072,-0.4665 -0.78915,-0.4665c-0.32804,0 -0.63011,0.17834 -0.78859,0.46548l-10.29076,18.86886z"], ["width", "24", "height", "24", "viewBox", "0 0 24 24", 3, "title"], ["fill", "#60B515", "cx", "12", "cy", "12", "r", "10.67", 1, "success-bg"], ["d", "M5.69 11.33 10.21 15.83 18.3 7.76", 1, "checkmark"], [1, "dismiss-bg", 3, "title", "click", "focus", "blur"], [1, "dismiss"], ["shape", "times", "size", "16"], [1, "toast-button", 3, "title", "focus", "blur", "click"], [1, "toast-button", "secondary", 3, "title", "focus", "blur", "click"]], template: function VdkToastComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef(_c0);
i0.ɵɵtemplate(0, VdkToastComponent_div_0_Template, 20, 10, "div", 0);
} if (rf & 2) {
i0.ɵɵproperty("ngIf", ctx.animate);
} }, directives: [i2.NgIf, i2.NgSwitch, i2.NgSwitchCase, i3.CdsIconCustomTag], pipes: [i4.VdkSimpleTranslatePipe], styles: ["@media screen and (max-width: 990px){.medium-and-up[_ngcontent-%COMP%]{display:none!important}}@media screen and (max-width: 543px){.small-and-up[_ngcontent-%COMP%]{display:none!important}}@media screen and (min-width: 991px){.medium-and-down[_ngcontent-%COMP%]{display:none!important}}@media screen and (min-width: 767px){.small-and-down[_ngcontent-%COMP%]{display:none!important}}@media screen and (max-width: 543px){[_nghost-%COMP%]{max-width:75vw}}[_nghost-%COMP%] .toast-description{font-size:1em;color:#adbbc4;margin-top:3px;line-height:18px;-webkit-line-clamp:4;-moz-line-clamp:4;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;max-height:70px}[_nghost-%COMP%] .toast-link{font-size:.85em;color:#89cbdf;display:block;text-transform:uppercase;font-family:Metropolis-Semibold;margin-top:12px;float:right;letter-spacing:1px}[_nghost-%COMP%] .toast-date{color:#adbbc4;font-size:11px;margin-left:6px;position:relative;top:1px}[_nghost-%COMP%] .toast-title{font-weight:500;color:#e9ecef;font-size:14px;margin-top:0;line-height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:240px}.toast[_ngcontent-%COMP%]{display:flex;flex-direction:row;max-width:100%;min-width:310px;background-color:#25333d;border-radius:3px;box-shadow:0 2px 10px #0006;position:relative;right:18px;padding:12px;margin:0 0 12px;transform:scale(1);transform-origin:100% 0}.dismiss-bg[_ngcontent-%COMP%]{background:transparent;width:30px;height:30px;display:inline-block;position:absolute;right:8px;top:8px;cursor:pointer;border-radius:100%;border:none}.dismiss-bg[_ngcontent-%COMP%] .dismiss[_ngcontent-%COMP%] cds-icon[shape=times][_ngcontent-%COMP%]{fill:#adbbc4;margin-top:-8px;margin-left:1px}.dismiss-bg[_ngcontent-%COMP%]:hover{background-color:#00000026}.dismiss[_ngcontent-%COMP%]{position:absolute;left:6px;top:6px}.gradient[_ngcontent-%COMP%]{width:35%;height:100%;background:linear-gradient(-90deg,rgba(37,51,61,0) -14.71%,#25333d 46.71%);display:inline-block;position:absolute;top:0;transform:scaleX(0);transform-origin:0 100%}.toast-button[_ngcontent-%COMP%]{font-weight:500;color:#89cbdf;text-transform:uppercase;font-size:11px;letter-spacing:1px;margin-top:12px}.toast-button.secondary[_ngcontent-%COMP%]{margin-right:6px}button.toast-button[_ngcontent-%COMP%]{background:none;border:none}.toast-title-container[_ngcontent-%COMP%]{display:flex;flex-direction:row}div.clr-row[_ngcontent-%COMP%]{padding-bottom:10px}div.content[_ngcontent-%COMP%]{padding-left:12px;width:100%}div.content-wrapper[_ngcontent-%COMP%]{flex:1;display:flex}div.button-container[_ngcontent-%COMP%]{text-align:right}div.button-container[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{cursor:pointer}div.button-container[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:hover{color:#0095d3}.icon[_ngcontent-%COMP%]{transform:scale(1);transform-origin:center}.icon-container[_ngcontent-%COMP%]{margin:-6px}#info-icon-outline[_ngcontent-%COMP%], #info-icon-line[_ngcontent-%COMP%]{fill:none;stroke:#0095d3;stroke-miterlimit:10;stroke-width:2}#info-icon-line[_ngcontent-%COMP%]{stroke-linecap:round;stroke-dasharray:16;stroke-dashoffset:0;animation-fill-mode:forwards}#info-icon-dot[_ngcontent-%COMP%]{transform-origin:50% 42%;fill:#0095d3}#warn-icon-line[_ngcontent-%COMP%], #warn-icon-triangle[_ngcontent-%COMP%], #warn-icon-dot[_ngcontent-%COMP%]{fill:#ffef5ff1}#warn-icon-dot[_ngcontent-%COMP%]{transform-origin:50% 54%}#error-icon-outline[_ngcontent-%COMP%], #error-icon-line[_ngcontent-%COMP%]{fill:none;stroke:#f54f47;stroke-miterlimit:10;stroke-width:2}#error-icon-line[_ngcontent-%COMP%]{stroke-linecap:round;stroke-width:2.65;stroke-dasharray:7;animation-fill-mode:forwards;stroke-dashoffset:0}#error-icon-dot[_ngcontent-%COMP%]{transform-origin:50% 54%;fill:#f54f47}.checkmark[_ngcontent-%COMP%]{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.9px;stroke-dasharray:31.3866882324;animation-fill-mode:forwards}.dark[_nghost-%COMP%] .toast[_ngcontent-%COMP%], .dark [_nghost-%COMP%] .toast[_ngcontent-%COMP%]{background-color:#0f171c}.dark[_nghost-%COMP%] .gradient[_ngcontent-%COMP%], .dark [_nghost-%COMP%] .gradient[_ngcontent-%COMP%]{background:linear-gradient(-90deg,rgba(15,23,28,0) -14.71%,#0f171c 46.71%)}.dark[_nghost-%COMP%] .toast-description, .dark [_nghost-%COMP%] .toast-description{color:#a9b6be}.dark[_nghost-%COMP%] .toast-button, .dark [_nghost-%COMP%] .toast-button{color:#49afd9}.dark[_nghost-%COMP%] .toast-button:hover, .dark [_nghost-%COMP%] .toast-button:hover{color:#0095d3}.dark[_nghost-%COMP%] .toast-date, .dark [_nghost-%COMP%] .toast-date{color:#a9b6be}.dark[_nghost-%COMP%] .dismiss-bg[_ngcontent-%COMP%]:hover, .dark [_nghost-%COMP%] .dismiss-bg[_ngcontent-%COMP%]:hover{background-color:#ffffff1a}.muted[_nghost-%COMP%] .toast-title, .muted [_nghost-%COMP%] .toast-title, .muted[_nghost-%COMP%] .toast-date, .muted [_nghost-%COMP%] .toast-date, .muted[_nghost-%COMP%] .toast-description, .muted [_nghost-%COMP%] .toast-description, .muted[_nghost-%COMP%] .button-container button, .muted [_nghost-%COMP%] .button-container button{color:#95a4b2}.muted[_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted[_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .error-bg[_ngcontent-%COMP%]{fill:#95a4b2}.muted[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%]{fill:#25333d}.muted[_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted[_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .muted[_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .muted[_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .muted[_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .muted[_nghost-%COMP%] .error-dot[_ngcontent-%COMP%], .muted [_nghost-%COMP%] .error-dot[_ngcontent-%COMP%]{stroke:#25333d}.muted.dark[_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .info-bg[_ngcontent-%COMP%], .muted.dark[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted.dark[_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .info-line-vertical[_ngcontent-%COMP%], .muted.dark[_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .info-line-horizontal[_ngcontent-%COMP%], .muted.dark[_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .error-bg[_ngcontent-%COMP%], .muted.dark[_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .error-line[_ngcontent-%COMP%], .muted.dark[_nghost-%COMP%] .error-dot[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .error-dot[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .error-dot[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .error-dot[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .error-dot[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .error-dot[_ngcontent-%COMP%]{stroke:#0f171c}.muted.dark[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted.dark [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted .dark[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .muted .dark [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .dark .muted[_nghost-%COMP%] .info-dot[_ngcontent-%COMP%], .dark .muted [_nghost-%COMP%] .info-dot[_ngcontent-%COMP%]{fill:#0f171c}"], data: { animation: [
trigger('launchToast', [
transition(':enter', [
// toast parent element animation
group([
style({
transform: 'translateX(48px) scale(0, 1)'
}),
animate(`${multiply(componentPrimaryEnterTiming)}ms ${componentPrimaryEnterCurve}`, style({
transform: 'translateX(0) scale(1, 1)'
})),
// use optional: true for if/else elements
query('.checkmark', animateChild(), { optional: true }),
query('#info-icon-dot', animateChild(), { optional: true }),
query('#info-icon-line', animateChild(), { optional: true }),
query('#warn-icon-dot', animateChild(), { optional: true }),
query('#warn-icon-line', animateChild(), { optional: true }),
query('#error-icon-dot', animateChild(), { optional: true }),
query('#error-icon-line', animateChild(), { optional: true }),
query('.gradient', animateChild()),
query('.dismiss', animateChild(), { optional: true })
])
]),
// START LEAVE ANIMATION
// ':leave' is a default state for ngIf and ngFor, doesn't need to be predefined
transition(':leave', [
group([
style({
transform: 'translateX(0px) scale(1, 1)',
marginTop: '*'
}),
// use query self to be able to group the animation on the current element
query(':self', [
animate(`${multiply(componentPrimaryLeaveTiming)}ms ${componentPrimaryLeaveCurve}`, style({
transform: 'translateX(18px) scale(0, 1)'
})),
animate(`${multiply(componentPrimaryLeaveTiming)}ms ${componentPrimaryLeaveCurve}`, style({
marginTop: '-{{height}}px'
}))
]),
query('.toast-description, .toast-title, .icon, .button-container, .dismiss-bg, .dismiss, .toast-date', [
animate(`${multiply(10)}ms`, style({
opacity: '0'
}))
])
])
], {
params: {
height: 0
}
})
// end launchToast
]),
// info icon animation
trigger('infoLine', [
transition('* => *', [
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '16', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
trigger('infoDot', [
transition('* => *', [
style({
transform: 'scale(0)'
}),
animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({
transform: 'scale(1)'
}))
])
]),
// error icon animation
trigger('errorLine', [
transition('* => *', [
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '7.919999599456787', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
trigger('errorDot', [
transition('* => *', [
style({
transform: 'scale(0)'
}),
animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({
transform: 'scale(1)'
}))
])
]),
//warning icon animation
trigger('warnLine', [
transition('* => *', [
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '7.919999599456787', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
trigger('warnDot', [
transition('* => *', [
style({
transform: 'scale(0)'
}),
animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({
transform: 'scale(1)'
}))
])
]),
// success icon animation
trigger('checkmarkLine', [
transition('* => *', [
// css keyframe animation
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '31.386688232421875', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
// moving the gradient offview
trigger('gradientMove', [
transition('* => *', [
style({
transform: 'scale(1, 1)'
}),
animate(`${multiply(GRADIENT_DURATION)}ms ${multiply(GRADIENT_DELAY)}ms ${GRADIENT_LEAVE_CURVE}`, style({
transform: 'scale(0, 1)'
}))
])
]),
// fade in the dismiss icon
trigger('dismissIconVisible', [
transition('* => *', [
style({
opacity: '0'
}),
animate(`${multiply(DISMISS_ICON_DURATION)}ms ${multiply(DISMISS_ICON_DELAY)}ms ${DISMISS_ICON_CURVE}`, style({
opacity: '1'
}))
])
])
] } });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(VdkToastComponent, [{
type: Component,
args: [{ selector: 'vdk-toast', animations: [
trigger('launchToast', [
transition(':enter', [
// toast parent element animation
group([
style({
transform: 'translateX(48px) scale(0, 1)'
}),
animate(`${multiply(componentPrimaryEnterTiming)}ms ${componentPrimaryEnterCurve}`, style({
transform: 'translateX(0) scale(1, 1)'
})),
// use optional: true for if/else elements
query('.checkmark', animateChild(), { optional: true }),
query('#info-icon-dot', animateChild(), { optional: true }),
query('#info-icon-line', animateChild(), { optional: true }),
query('#warn-icon-dot', animateChild(), { optional: true }),
query('#warn-icon-line', animateChild(), { optional: true }),
query('#error-icon-dot', animateChild(), { optional: true }),
query('#error-icon-line', animateChild(), { optional: true }),
query('.gradient', animateChild()),
query('.dismiss', animateChild(), { optional: true })
])
]),
// START LEAVE ANIMATION
// ':leave' is a default state for ngIf and ngFor, doesn't need to be predefined
transition(':leave', [
group([
style({
transform: 'translateX(0px) scale(1, 1)',
marginTop: '*'
}),
// use query self to be able to group the animation on the current element
query(':self', [
animate(`${multiply(componentPrimaryLeaveTiming)}ms ${componentPrimaryLeaveCurve}`, style({
transform: 'translateX(18px) scale(0, 1)'
})),
animate(`${multiply(componentPrimaryLeaveTiming)}ms ${componentPrimaryLeaveCurve}`, style({
marginTop: '-{{height}}px'
}))
]),
query('.toast-description, .toast-title, .icon, .button-container, .dismiss-bg, .dismiss, .toast-date', [
animate(`${multiply(10)}ms`, style({
opacity: '0'
}))
])
])
], {
params: {
height: 0
}
})
// end launchToast
]),
// info icon animation
trigger('infoLine', [
transition('* => *', [
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '16', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
trigger('infoDot', [
transition('* => *', [
style({
transform: 'scale(0)'
}),
animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({
transform: 'scale(1)'
}))
])
]),
// error icon animation
trigger('errorLine', [
transition('* => *', [
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '7.919999599456787', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
trigger('errorDot', [
transition('* => *', [
style({
transform: 'scale(0)'
}),
animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({
transform: 'scale(1)'
}))
])
]),
//warning icon animation
trigger('warnLine', [
transition('* => *', [
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '7.919999599456787', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
trigger('warnDot', [
transition('* => *', [
style({
transform: 'scale(0)'
}),
animate(`${multiply(lineSecondaryEnterTiming)}ms ${multiply(lineSecondaryEnterDelay)}ms ${lineSecondaryEnterCurve}`, style({
transform: 'scale(1)'
}))
])
]),
// success icon animation
trigger('checkmarkLine', [
transition('* => *', [
// css keyframe animation
animate(`${multiply(linePrimaryEnterTiming)}ms ${multiply(linePrimaryEnterDelay)}ms ${linePrimaryEnterCurve}`, keyframes([style({ strokeDashoffset: '31.386688232421875', offset: 0 }), style({ strokeDashoffset: '0', offset: 1.0 })]))
])
]),
// moving the gradient offview
trigger('gradientMove', [
transition('* => *', [
style({
transform: 'scale(1, 1)'
}),
animate(`${multiply(GRADIENT_DURATION)}ms ${multiply(GRADIENT_DELAY)}ms ${GRADIENT_LEAVE_CURVE}`, style({
transform: 'scale(0, 1)'
}))
])
]),
// fade in the dismiss icon
trigger('dismissIconVisible', [
transition('* => *', [
style({
opacity: '0'
}),
animate(`${multiply(DISMISS_ICON_DURATION)}ms ${multiply(DISMISS_ICON_DELAY)}ms ${DISMISS_ICON_CURVE}`, style({
opacity: '1'
}))
])
])
], template: "<!--\n ~ Copyright 2023-2025 Broadcom\n ~ SPDX-License-Identifier: Apache-2.0\n -->\n\n<div\n [@launchToast]=\"loaded\"\n class=\"toast\"\n *ngIf=\"animate\"\n (mouseover)=\"mouseOver(true)\"\n (mouseleave)=\"mouseOver(false)\"\n>\n <span [@gradientMove] class=\"gradient\"></span>\n\n <div class=\"icon\">\n <ng-container [ngSwitch]=\"type\">\n <ng-container *ngSwitchCase=\"VmwToastType.FAILURE\">\n <svg\n class=\"icon-container\"\n width=\"36\"\n height=\"36\"\n viewBox=\"0 0 36 36\"\n >\n <path\n id=\"error-icon-outline\"\n d=\"M18,7A11,11,0,1,1,7,18,11,11,0,0,1,18,7\"\n />\n <path [@errorLine] id=\"error-icon-line\" d=\"M18,12.8v5.9\" />\n <circle\n [@errorDot]\n id=\"error-icon-dot\"\n cx=\"18\"\n cy=\"23\"\n r=\"1.4\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"VmwToastType.INFO\">\n <svg\n class=\"icon-container\"\n width=\"36\"\n height=\"36\"\n viewBox=\"0 0 36 36\"\n >\n <path\n id=\"info-icon-outline\"\n d=\"M18,7A11,11,0,1,1,7,18,11,11,0,0,1,18,7\"\n />\n <path\n [@infoLine]\n id=\"info-icon-line\"\n d=\"M16,16h2v8m-3,0h6\"\n />\n <circle\n [@infoDot]\n id=\"info-icon-dot\"\n cx=\"17.9\"\n cy=\"11.85\"\n r=\"1.3\"\n />\n </svg>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"VmwToastType.WARN\">\n <svg\n class=\"icon-container\"\n width=\"36\"\n height=\"36\"\n viewBox=\"0 0 36 36\"\n >\n <path\n [@warnLine]\n id=\"warn-icon-line\"\n d=\"m18.34483,21.57552a1,0.60591 0 0 1 -1,-0.60591l0,-7.27097a1,0.60591 0 1 1 2,0l0,7.27097a1,0.60591 0 0 1 -1,0.60591z\"\n ></path>\n <circle\n [@warnDot]\n id=\"warn-icon-dot\"\n r=\"1.33\"\n cy=\"24.6807\"\n cx=\"18.34483\"\n ></circle>\n <path\n id=\"warn-icon-triangle\"\n d=\"m16.13908,7.08311c0.41921,-0.76188 1.21734,-1.23369 2.08417,-1.23369c0.86684,0 1.66496,0.47181 2.0847,1.23467l10.25504,18.87105c0.40026,0.73655 0.38302,1.62945 -0.04535,2.35c-0.42838,0.72056 -1.20458,1.16225 -2.04305,1.16247l-20.48617,-0.00018c-0.84779,0.01899 -1.64152,-0.41505 -2.083,-1.13908c-0.44148,-0.72403 -0.46386,-1.6284 -0.05831,-2.37417l10.29196,-18.87105zm-8.99518,19.57726c-0.15349,0.28226 -0.14501,0.62491 0.02226,0.89923c0.16726,0.27432 0.468,0.43877 0.80574,0.43139l20.5025,0c0.31761,-0.00008 0.6117,-0.16743 0.774,-0.44044c0.16231,-0.273 0.16884,-0.61131 0.01719,-0.89037l-10.25319,-18.86765c-0.15833,-0.28775 -0.46072,-0.4665 -0.78915,-0.4665c-0.32804,0 -0.63011,0.17834 -0.78859,0.46548l-10.29076,18.86886z\"\n ></path>\n </svg>\n </ng-container>\n\n <!-- do we need this? -->\n <!-- If yes, TODO: update to a line icon -->\n <ng-container *ngSwitchCase=\"VmwToastType.SUCCESS\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n [attr.aria-label]=\"'toast.success-icon' | simpleTranslate\"\n title=\"{{'toast.info-icon' | simpleTranslate }}\"\n >\n <circle\n class=\"success-bg\"\n fill=\"#60B515\"\n cx=\"12\"\n cy=\"12\"\n r=\"10.67\"\n />\n <path\n [@checkmarkLine]\n class=\"checkmark\"\n d=\"M5.69 11.33 10.21 15.83 18.3 7.76\"\n />\n </svg>\n </ng-container>\n </ng-container>\n <ng-content select=\"cds-icon\"></ng-content>\n </div>\n\n <div class=\"content\">\n <div class=\"content-wrapper\">\n <div class=\"toast-title-container\" tabindex=\"0\">\n <ng-content select=\".toast-title\"></ng-content>\n <ng-content select=\"span.toast-date\"></ng-content>\n\n <button\n *ngIf=\"dismissible\"\n (click)=\"dismiss(true)\"\n class=\"dismiss-bg\"\n (focus)=\"focus(true)\"\n title=\"{{'toast.dismiss-notification' | simpleTranslate }}\"\n (blur)=\"focus(false)\"\n >\n <span [@dismissIconVisible] class=\"dismiss\">\n <cds-icon shape=\"times\" size=\"16\"></cds-icon>\n </span>\n </button>\n </div>\n </div>\n\n <ng-content select=\"p.toast-description\"></ng-content>\n <ng-content select=\"a.toast-link\"></ng-content>\n\n <div class=\"button-container\">\n <button\n class=\"toast-button\"\n *ngIf=\"primaryButtonText\"\n (focus)=\"focus(true)\"\n (blur)=\"focus(false)\"\n [title]=\"primaryButtonText\"\n (click)=\"primaryButtonClick.emit()\"\n >\n {{primaryButtonText}}\n </button>\n <button\n class=\"toast-button secondary\"\n *ngIf=\"secondaryButtonText\"\n (focus)=\"focus(true)\"\n (blur)=\"focus(false)\"\n [title]=\"secondaryButtonText\"\n (click)=\"secondaryButtonClick.emit()\"\n >\n {{secondaryButtonText}}\n </button>\n </div>\n </div>\n</div>\n", styles: ["/*!\n * Copyright 2023-2025 Broadcom\n * SPDX-License-Identifier: Apache-2.0\n */@media screen and (max-width: 990px){.medium-and-up{display:none!important}}@media screen and (max-width: 543px){.small-and-up{display:none!important}}@media screen and (min-width: 991px){.medium-and-down{display:none!important}}@media screen and (min-width: 767px){.small-and-down{display:none!important}}@media screen and (max-width: 543px){:host{max-width:75vw}}:host ::ng-deep .toast-description{font-size:1em;color:#adbbc4;margin-top:3px;line-height:18px;-webkit-line-clamp:4;-moz-line-clamp:4;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;max-height:70px}:host ::ng-deep .toast-link{font-size:.85em;color:#89cbdf;display:block;text-transform:uppercase;font-family:Metropolis-Semibold;margin-top:12px;float:right;letter-spacing:1px}:host ::ng-deep .toast-date{color:#adbbc4;font-size:11px;margin-left:6px;position:relative;top:1px}:host ::ng-deep .toast-title{font-weight:500;color:#e9ecef;font-size:14px;margin-top:0;line-height:24px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:240px}.toast{display:flex;flex-direction:row;max-width:100%;min-width:310px;background-color:#25333d;border-radius:3px;box-shadow:0 2px 10px #0006;position:relative;right:18px;padding:12px;margin:0 0 12px;transform:scale(1);transform-origin:100% 0}.dismiss-bg{background:transparent;width:30px;height:30px;display:inline-block;position:absolute;right:8px;top:8px;cursor:pointer;border-radius:100%;border:none}.dismiss-bg .dismiss cds-icon[shape=times]{fill:#adbbc4;margin-top:-8px;margin-left:1px}.dismiss-bg:hover{background-color:#00000026}.dismiss{position:absolute;left:6px;top:6px}.gradient{width:35%;height:100%;background:linear-gradient(-90deg,rgba(37,51,61,0) -14.71%,#25333d 46.71%);display:inline-block;position:absolute;top:0;transform:scaleX(0);transform-origin:0 100%}.toast-button{font-weight:500;color:#89cbdf;text-transform:uppercase;font-size:11px;letter-spacing:1px;margin-top:12px}.toast-button.secondary{margin-right:6px}button.toast-button{background:none;border:none}.toast-title-container{display:flex;flex-direction:row}div.clr-row{padding-bottom:10px}div.content{padding-left:12px;width:100%}div.content-wrapper{flex:1;display:flex}div.button-container{text-align:right}div.button-container button{cursor:pointer}div.button-container button:hover{color:#0095d3}.icon{transform:scale(1);transform-origin:center}.icon-container{margin:-6px}#info-icon-outline,#info-icon-line{fill:none;stroke:#0095d3;stroke-miterlimit:10;stroke-width:2}#info-icon-line{stroke-linecap:round;stroke-dasharray:16;stroke-dashoffset:0;animation-fill-mode:forwards}#info-icon-dot{transform-origin:50% 42%;fill:#0095d3}#warn-icon-line,#warn-icon-triangle,#warn-icon-dot{fill:#ffef5ff1}#warn-icon-dot{transform-origin:50% 54%}#error-icon-outline,#error-icon-line{fill:none;stroke:#f54f47;stroke-miterlimit:10;stroke-width:2}#error-icon-line{stroke-linecap:round;stroke-width:2.65;stroke-dasharray:7;animation-fill-mode:forwards;stroke-dashoffset:0}#error-icon-dot{transform-origin:50% 54%;fill:#f54f47}.checkmark{fill:none;stroke:#fff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:1.9px;stroke-dasharray:31.3866882324;animation-fill-mode:forwards}:host-context(.dark) .toast{background-color:#0f171c}:host-context(.dark) .gradient{background:linear-gradient(-90deg,rgba(15,23,28,0) -14.71%,#0f171c 46.71%)}:host-context(.dark) ::ng-deep .toast-description{color:#a9b6be}:host-context(.dark) ::ng-deep .toast-button{color:#49afd9}:host-context(.dark) ::ng-deep .toast-button:hover{color:#0095d3}:host-context(.dark) ::ng-deep .toast-date{color:#a9b6be}:host-context(.dark) .dismiss-bg:hover{background-color:#ffffff1a}:host-context(.muted) ::ng-deep .toast-title,:host-context(.muted) ::ng-deep .toast-date,:host-context(.muted) ::ng-deep .toast-description,:host-context(.muted) ::ng-deep .button-container button{color:#95a4b2}:host-context(.muted) .info-bg,:host-context(.muted) .error-bg{fill:#95a4b2}:host-context(.muted) .info-dot{fill:#25333d}:host-context(.muted) .info-bg,:host-context(.muted) .info-dot,:host-context(.muted) .info-line-vertical,:host-context(.muted) .info-line-horizontal,:host-context(.muted) .error-bg,:host-context(.muted) .error-line,:host-context(.muted) .error-do