@testgorilla/tgo-ui 11.22.3 → 12.0.1

package/fesm2022/testgorilla-tgo-ui-components-snackbar.mjs

@@ -1,330 +1,456 @@
-import { trigger, transition, style, animate } from '@angular/animations';
-import { NgClass, AsyncPipe, UpperCasePipe, SlicePipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Input, Optional, Inject, ChangeDetectionStrategy, Component, Injectable, NgModule } from '@angular/core';
-import * as i1 from '@angular/material/snack-bar';
-import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-import { ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { alertBarsUtil, UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';
-import * as i2 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-
-class SnackbarComponent {
-    /**
-     * Snackbar message from html
-     *
-     * @memberof SnackbarComponent
-     */
-    set html(value) {
-        if (value) {
-            this.safeHtml = value;
-        }
-    }
-    get dismissButtonTestId() {
-        return this.testId ? `${this.testId}-dismiss` : null;
-    }
-    constructor(defaultAppTheme, data, snackbarRef, cdr) {
-        this.defaultAppTheme = defaultAppTheme;
-        this.data = data;
-        this.snackbarRef = snackbarRef;
-        this.cdr = cdr;
-        /**
-         * Background color of the button while in active state
-         *
-         * @type {SnackbarType}
-         * @memberof SnackbarComponent
-         */
-        this.snackbarType = 'success';
-        /**
-         * Snackbar message
-         *
-         * @memberof SnackbarComponent
-         */
-        this.message = '';
-        /**
-         * Set the time that the snackbar will be visible
-         *
-         * @memberof SnackbarComponent
-         */
-        this.seconds = 5;
-        /**
-         * Include dismmiss button
-         *
-         * @memberof SnackbarComponent
-         */
-        this.includeDismissButton = true;
-        /**
-         * Static or fixed position
-         *
-         * @memberof SnackbarComponent
-         */
-        this.fixed = true;
-        /**
-         * Link text that will appended at the end of message
-         *
-         * @memberof AlertBannerComponent
-         */
-        this.linkText = '';
-        /**
-         * Link target
-         *
-         * @type {@type {LinkTargetType}}
-         * @memberof AlertBannerComponent
-         */
-        this.linkTarget = '_blank';
-        /**
-         * The variant to be used
-         *
-         * @type {SnackbarVariant}
-         * @memberof SnackbarComponent
-         */
-        this.variant = 'desktop';
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof SnackbarComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * Close button tooltip
-         *
-         * @type {string}
-         * @memberof SnackbarComponent
-         */
-        this.closeButtonTooltip = '';
-        this.testId = null;
-        /**
-         * A string representing the ARIA requirement for accessibility.
-         * This attribute is used to indicate whether an input field is required for form submission.
-         * @type {string}
-         * @memberof SnackbarComponent
-         */
-        this.ariaDescribedby = '';
-        this.showSnackbar = true;
-        this.visible = false;
-        this.timerStartedAt = 0;
-        this.timerPausedAt = 0;
-        this.translationContext = 'SNACKBAR.';
-        this.maxCharacters = 70;
-        if (defaultAppTheme) {
-            this.applicationTheme = defaultAppTheme;
-        }
-        this.snackbarType = data.snackbarType ?? 'success';
-        this.message = data.message ?? '';
-        this.safeHtml = data.html ?? '';
-        this.linkText = data.link?.text ?? '';
-        this.linkUrl = data.link?.url ?? '';
-        this.seconds = data.seconds ?? 5;
-    }
-    ngOnInit() {
-        this.milisenconds = this.seconds * 1000;
-        this.iconName = alertBarsUtil.setIcon(this.snackbarType);
-        this.show();
-        this.position = alertBarsUtil.setPosition(this.fixed);
-    }
-    //Show snackbar
-    show() {
-        this.timerStartedAt = Date.now();
-        this.visible = true;
-        this.timer = window.setTimeout(() => this.hide(), this.milisenconds);
-    }
-    //Hide snackbar
-    hide() {
-        this.visible = false;
-        this.timerPausedAt = 0;
-        this.timerStartedAt = 0;
-        clearTimeout(this.timer);
-        this.timer = undefined;
-        this.dismissSnackbar();
-        // `visible` gates the template and this runs from setTimeout.
-        this.cdr.markForCheck();
-    }
-    //Pause timer when mouse enter
-    onMouseEnter() {
-        this.visible = true;
-        this.timerPausedAt = Date.now();
-        clearTimeout(this.timer);
-    }
-    //Continue timer when mouse leave
-    onMouseLeave() {
-        const diff = this.timerPausedAt - this.timerStartedAt;
-        if (diff <= 0) {
-            return this.hide();
-        }
-        this.timer = window.setTimeout(() => this.hide(), this.milisenconds - diff);
-    }
-    //Hide snackbar when dismiss button is clicked
-    dismissClick() {
-        this.visible = false;
-        this.dismissSnackbar();
-    }
-    onLinkClick(event) {
-        event?.preventDefault();
-        if (this.data.link?.action) {
-            this.data.link?.action();
-        }
-        else if (this.data.link?.url) {
-            window.open(this.data.link?.url, '_blank');
-        }
-    }
-    dismissSnackbar() {
-        if (Object.keys(this.snackbarRef).length > 0) {
-            this.snackbarRef.dismiss();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: MAT_SNACK_BAR_DATA }, { token: i1.MatSnackBarRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SnackbarComponent, isStandalone: true, selector: "ui-snackbar", inputs: { snackbarType: "snackbarType", message: "message", html: "html", seconds: "seconds", includeDismissButton: "includeDismissButton", fixed: "fixed", linkText: "linkText", linkUrl: "linkUrl", linkTarget: "linkTarget", variant: "variant", applicationTheme: "applicationTheme", closeButtonTooltip: "closeButtonTooltip", testId: "testId", ariaDescribedby: "ariaDescribedby" }, ngImport: i0, template: "<ng-container>\n  @if (visible) {\n    <!-- Kept as role=\"alert\": the E2E suite reads the message through getByRole('alert'). -->\n    <div\n      [ngClass]=\"snackbarType + ' ' + position\"\n      [@openClose]\n      class=\"snackbar-container\"\n      [attr.theme]=\"applicationTheme\"\n      [class.mobile]=\"variant === 'mobile'\"\n      [class.desktop]=\"variant === 'desktop'\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n      [attr.data-testid]=\"testId ?? 'snackbar-wrapper'\"\n      [attr.data-test-snackbar-type]=\"snackbarType\"\n      [attr.aria-describedby]=\"'describedby'\"\n      role=\"alert\"\n      [attr.aria-labelledby]=\"'labelledby'\"\n    >\n      <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n        'ALERT_BANNER.' + (snackbarType | uppercase) | uiTranslate | async\n      }}</span>\n      <span style=\"position: absolute; left: -9999px\"\n        >{{ message }}\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </span>\n      <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n      <div\n        aria-hidden=\"true\"\n        class=\"snackbar-text\"\n        [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n        data-testid=\"snackbar-content\"\n      >\n        @if (applicationTheme === 'classic') {\n          <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        }\n        {{ message.length > maxCharacters ? (message | slice: 0 : maxCharacters) + '..' : message }}\n        @if (safeHtml) {\n          <div [innerHTML]=\"safeHtml\"></div>\n        }\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </div>\n      @if (includeDismissButton && applicationTheme === 'classic') {\n        <ui-button\n          variant=\"text\"\n          [label]=\"(translationContext + 'DISMISS' | uiTranslate | async)!\"\n          [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n          (buttonClickEvent)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n      @if (includeDismissButton && applicationTheme !== 'classic') {\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"'Close-in-line'\"\n          [size]=\"'small'\"\n          [tooltip]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          (click)=\"dismissClick()\"\n          [ariaLabel]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .snackbar-container[theme=dark] ui-icon,:host .snackbar-container[theme=light] ui-icon{margin-right:10px;cursor:pointer}:host .snackbar-container[theme=dark] .snackbar-text,:host .snackbar-container[theme=light] .snackbar-text{padding-left:10px;margin-right:8px}:host .snackbar-container[theme=dark] .snackbar-text a,:host .snackbar-container[theme=light] .snackbar-text a{margin-left:4px}:host .snackbar-container[theme=dark].desktop,:host .snackbar-container[theme=light].desktop{border-radius:24px;box-shadow:0 4px 16px #2424240a;width:fit-content;max-width:600px;min-height:48px;line-height:1.4;font-size:14px;padding:16px 24px}:host .snackbar-container[theme=dark].mobile,:host .snackbar-container[theme=light].mobile{width:100%;min-width:100%;word-break:break-word}:host .mat-mdc-snack-bar-container{margin:16px 8px}::ng-deep .mdc-snackbar__surface{height:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
-            trigger('openClose', [
-                transition(':enter', [
-                    style({ bottom: '-55px', opacity: 0 }),
-                    animate('0.2s ease-out', style({ opacity: 1, bottom: '10px' })),
-                ]),
-                transition(':leave', [
-                    style({ bottom: '10px', opacity: 1 }),
-                    animate('0.2s ease-in', style({ bottom: '-55px', opacity: 0 })),
-                ]),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-snackbar', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('openClose', [
-                            transition(':enter', [
-                                style({ bottom: '-55px', opacity: 0 }),
-                                animate('0.2s ease-out', style({ opacity: 1, bottom: '10px' })),
-                            ]),
-                            transition(':leave', [
-                                style({ bottom: '10px', opacity: 1 }),
-                                animate('0.2s ease-in', style({ bottom: '-55px', opacity: 0 })),
-                            ]),
-                        ]),
-                    ], imports: [
-                        NgClass,
-                        MatTooltip,
-                        IconComponentModule,
-                        ButtonComponent,
-                        AsyncPipe,
-                        UpperCasePipe,
-                        SlicePipe,
-                        UiTranslatePipe,
-                    ], template: "<ng-container>\n  @if (visible) {\n    <!-- Kept as role=\"alert\": the E2E suite reads the message through getByRole('alert'). -->\n    <div\n      [ngClass]=\"snackbarType + ' ' + position\"\n      [@openClose]\n      class=\"snackbar-container\"\n      [attr.theme]=\"applicationTheme\"\n      [class.mobile]=\"variant === 'mobile'\"\n      [class.desktop]=\"variant === 'desktop'\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n      [attr.data-testid]=\"testId ?? 'snackbar-wrapper'\"\n      [attr.data-test-snackbar-type]=\"snackbarType\"\n      [attr.aria-describedby]=\"'describedby'\"\n      role=\"alert\"\n      [attr.aria-labelledby]=\"'labelledby'\"\n    >\n      <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n        'ALERT_BANNER.' + (snackbarType | uppercase) | uiTranslate | async\n      }}</span>\n      <span style=\"position: absolute; left: -9999px\"\n        >{{ message }}\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </span>\n      <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n      <div\n        aria-hidden=\"true\"\n        class=\"snackbar-text\"\n        [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n        data-testid=\"snackbar-content\"\n      >\n        @if (applicationTheme === 'classic') {\n          <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        }\n        {{ message.length > maxCharacters ? (message | slice: 0 : maxCharacters) + '..' : message }}\n        @if (safeHtml) {\n          <div [innerHTML]=\"safeHtml\"></div>\n        }\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </div>\n      @if (includeDismissButton && applicationTheme === 'classic') {\n        <ui-button\n          variant=\"text\"\n          [label]=\"(translationContext + 'DISMISS' | uiTranslate | async)!\"\n          [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n          (buttonClickEvent)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n      @if (includeDismissButton && applicationTheme !== 'classic') {\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"'Close-in-line'\"\n          [size]=\"'small'\"\n          [tooltip]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          (click)=\"dismissClick()\"\n          [ariaLabel]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n    </div>\n  }\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .snackbar-container[theme=dark] ui-icon,:host .snackbar-container[theme=light] ui-icon{margin-right:10px;cursor:pointer}:host .snackbar-container[theme=dark] .snackbar-text,:host .snackbar-container[theme=light] .snackbar-text{padding-left:10px;margin-right:8px}:host .snackbar-container[theme=dark] .snackbar-text a,:host .snackbar-container[theme=light] .snackbar-text a{margin-left:4px}:host .snackbar-container[theme=dark].desktop,:host .snackbar-container[theme=light].desktop{border-radius:24px;box-shadow:0 4px 16px #2424240a;width:fit-content;max-width:600px;min-height:48px;line-height:1.4;font-size:14px;padding:16px 24px}:host .snackbar-container[theme=dark].mobile,:host .snackbar-container[theme=light].mobile{width:100%;min-width:100%;word-break:break-word}:host .mat-mdc-snack-bar-container{margin:16px 8px}::ng-deep .mdc-snackbar__surface{height:0}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_SNACK_BAR_DATA]
-                }] }, { type: i1.MatSnackBarRef }, { type: i0.ChangeDetectorRef }], propDecorators: { snackbarType: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], html: [{
-                type: Input
-            }], seconds: [{
-                type: Input
-            }], includeDismissButton: [{
-                type: Input
-            }], fixed: [{
-                type: Input
-            }], linkText: [{
-                type: Input
-            }], linkUrl: [{
-                type: Input
-            }], linkTarget: [{
-                type: Input
-            }], variant: [{
-                type: Input
-            }], applicationTheme: [{
-                type: Input
-            }], closeButtonTooltip: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], ariaDescribedby: [{
-                type: Input
-            }] } });
-
-class SnackbarService {
-    constructor(snackBar) {
-        this.snackBar = snackBar;
-    }
-    error(message, applicationTheme, html, link, seconds) {
-        return this.show('error', message, applicationTheme, html, link, seconds);
-    }
-    success(message, applicationTheme, html, link, seconds) {
-        return this.show('success', message, applicationTheme, html, link, seconds);
-    }
-    info(message, applicationTheme, html, link, seconds) {
-        return this.show('info', message, applicationTheme, html, link, seconds);
-    }
-    warning(message, applicationTheme, html, link, seconds) {
-        return this.show('warning', message, applicationTheme, html, link, seconds);
-    }
-    // eslint-disable-next-line max-params -- public method signature; options-object refactor is breaking, deferred to the breaking-change MAJOR (see plan)
-    show(snackbarType, message, applicationTheme, html, link, seconds) {
-        const componentRef = this.snackBar.openFromComponent(SnackbarComponent, {
-            data: {
-                snackbarType,
-                message,
-                link,
-                html,
-                seconds,
-            },
-        });
-        if (applicationTheme) {
-            componentRef.instance.applicationTheme = applicationTheme;
-        }
-        return componentRef;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarService, deps: [{ token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.MatSnackBar }] });
-
-class SnackbarComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: SnackbarComponentModule, imports: [CommonModule,
-            ButtonComponentModule,
-            IconComponentModule,
-            UiTranslatePipe,
-            MatSnackBarModule,
-            MatTooltipModule,
-            SnackbarComponent], exports: [SnackbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarComponentModule, providers: [SnackbarService], imports: [CommonModule,
-            ButtonComponentModule,
-            IconComponentModule,
-            MatSnackBarModule,
-            MatTooltipModule,
-            SnackbarComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SnackbarComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ButtonComponentModule,
-                        IconComponentModule,
-                        UiTranslatePipe,
-                        MatSnackBarModule,
-                        MatTooltipModule,
-                        SnackbarComponent,
-                    ],
-                    exports: [SnackbarComponent],
-                    providers: [SnackbarService],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { animate, style, transition, trigger } from "@angular/animations";
+import { AsyncPipe, CommonModule, NgClass, SlicePipe, UpperCasePipe } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Inject, Injectable, Input, NgModule, Optional } from "@angular/core";
+import * as i1 from "@angular/material/snack-bar";
+import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from "@angular/material/snack-bar";
+import { MatTooltip, MatTooltipModule } from "@angular/material/tooltip";
+import { ButtonComponent, ButtonComponentModule } from "@testgorilla/tgo-ui/components/button";
+import { UiTranslatePipe, alertBarsUtil } from "@testgorilla/tgo-ui/components/core";
+import * as i2 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+var SnackbarComponent = class SnackbarComponent {
+	set html(value) {
+		if (value) this.safeHtml = value;
+	}
+	get dismissButtonTestId() {
+		return this.testId ? `${this.testId}-dismiss` : null;
+	}
+	constructor(defaultAppTheme, data, snackbarRef, cdr) {
+		this.defaultAppTheme = defaultAppTheme;
+		this.data = data;
+		this.snackbarRef = snackbarRef;
+		this.cdr = cdr;
+		this.snackbarType = "success";
+		this.message = "";
+		this.seconds = 5;
+		this.includeDismissButton = true;
+		this.fixed = true;
+		this.linkText = "";
+		this.linkTarget = "_blank";
+		this.variant = "desktop";
+		this.applicationTheme = "light";
+		this.closeButtonTooltip = "";
+		this.testId = null;
+		this.ariaDescribedby = "";
+		this.showSnackbar = true;
+		this.visible = false;
+		this.timerStartedAt = 0;
+		this.timerPausedAt = 0;
+		this.translationContext = "SNACKBAR.";
+		this.maxCharacters = 70;
+		if (defaultAppTheme) this.applicationTheme = defaultAppTheme;
+		this.snackbarType = data.snackbarType ?? "success";
+		this.message = data.message ?? "";
+		this.safeHtml = data.html ?? "";
+		this.linkText = data.link?.text ?? "";
+		this.linkUrl = data.link?.url ?? "";
+		this.seconds = data.seconds ?? 5;
+	}
+	ngOnInit() {
+		this.milisenconds = this.seconds * 1e3;
+		this.iconName = alertBarsUtil.setIcon(this.snackbarType);
+		this.show();
+		this.position = alertBarsUtil.setPosition(this.fixed);
+	}
+	show() {
+		this.timerStartedAt = Date.now();
+		this.visible = true;
+		this.timer = window.setTimeout(() => this.hide(), this.milisenconds);
+	}
+	hide() {
+		this.visible = false;
+		this.timerPausedAt = 0;
+		this.timerStartedAt = 0;
+		clearTimeout(this.timer);
+		this.timer = void 0;
+		this.dismissSnackbar();
+		this.cdr.markForCheck();
+	}
+	onMouseEnter() {
+		this.visible = true;
+		this.timerPausedAt = Date.now();
+		clearTimeout(this.timer);
+	}
+	onMouseLeave() {
+		const diff = this.timerPausedAt - this.timerStartedAt;
+		if (diff <= 0) return this.hide();
+		this.timer = window.setTimeout(() => this.hide(), this.milisenconds - diff);
+	}
+	dismissClick() {
+		this.visible = false;
+		this.dismissSnackbar();
+	}
+	onLinkClick(event) {
+		event?.preventDefault();
+		if (this.data.link?.action) this.data.link?.action();
+		else if (this.data.link?.url) window.open(this.data.link?.url, "_blank");
+	}
+	dismissSnackbar() {
+		if (Object.keys(this.snackbarRef).length > 0) this.snackbarRef.dismiss();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SnackbarComponent,
+			deps: [
+				{
+					token: "CANOPYUI_DEFAULT_APPLICATION_THEME",
+					optional: true
+				},
+				{ token: MAT_SNACK_BAR_DATA },
+				{ token: i1.MatSnackBarRef },
+				{ token: i0.ChangeDetectorRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: SnackbarComponent,
+			isStandalone: true,
+			selector: "ui-snackbar",
+			inputs: {
+				snackbarType: "snackbarType",
+				message: "message",
+				html: "html",
+				seconds: "seconds",
+				includeDismissButton: "includeDismissButton",
+				fixed: "fixed",
+				linkText: "linkText",
+				linkUrl: "linkUrl",
+				linkTarget: "linkTarget",
+				variant: "variant",
+				applicationTheme: "applicationTheme",
+				closeButtonTooltip: "closeButtonTooltip",
+				testId: "testId",
+				ariaDescribedby: "ariaDescribedby"
+			},
+			ngImport: i0,
+			template: "<ng-container>\n  @if (visible) {\n    <!-- Kept as role=\"alert\": the E2E suite reads the message through getByRole('alert'). -->\n    <div\n      [ngClass]=\"snackbarType + ' ' + position\"\n      [@openClose]\n      class=\"snackbar-container\"\n      [attr.theme]=\"applicationTheme\"\n      [class.mobile]=\"variant === 'mobile'\"\n      [class.desktop]=\"variant === 'desktop'\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n      [attr.data-testid]=\"testId ?? 'snackbar-wrapper'\"\n      [attr.data-test-snackbar-type]=\"snackbarType\"\n      [attr.aria-describedby]=\"'describedby'\"\n      role=\"alert\"\n      [attr.aria-labelledby]=\"'labelledby'\"\n    >\n      <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n        'ALERT_BANNER.' + (snackbarType | uppercase) | uiTranslate | async\n      }}</span>\n      <span style=\"position: absolute; left: -9999px\"\n        >{{ message }}\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </span>\n      <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n      <div\n        aria-hidden=\"true\"\n        class=\"snackbar-text\"\n        [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n        data-testid=\"snackbar-content\"\n      >\n        @if (applicationTheme === 'classic') {\n          <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        }\n        {{ message.length > maxCharacters ? (message | slice: 0 : maxCharacters) + '..' : message }}\n        @if (safeHtml) {\n          <div [innerHTML]=\"safeHtml\"></div>\n        }\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </div>\n      @if (includeDismissButton && applicationTheme === 'classic') {\n        <ui-button\n          variant=\"text\"\n          [label]=\"(translationContext + 'DISMISS' | uiTranslate | async)!\"\n          [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n          (buttonClickEvent)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n      @if (includeDismissButton && applicationTheme !== 'classic') {\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"'Close-in-line'\"\n          [size]=\"'small'\"\n          [tooltip]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          (click)=\"dismissClick()\"\n          [ariaLabel]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n    </div>\n  }\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .snackbar-container[theme=dark] ui-icon,:host .snackbar-container[theme=light] ui-icon{margin-right:10px;cursor:pointer}:host .snackbar-container[theme=dark] .snackbar-text,:host .snackbar-container[theme=light] .snackbar-text{padding-left:10px;margin-right:8px}:host .snackbar-container[theme=dark] .snackbar-text a,:host .snackbar-container[theme=light] .snackbar-text a{margin-left:4px}:host .snackbar-container[theme=dark].desktop,:host .snackbar-container[theme=light].desktop{border-radius:24px;box-shadow:0 4px 16px #2424240a;width:fit-content;max-width:600px;min-height:48px;line-height:1.4;font-size:14px;padding:16px 24px}:host .snackbar-container[theme=dark].mobile,:host .snackbar-container[theme=light].mobile{width:100%;min-width:100%;word-break:break-word}:host .mat-mdc-snack-bar-container{margin:16px 8px}::ng-deep .mdc-snackbar__surface{height:0}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i2.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "pipe",
+					type: AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: UpperCasePipe,
+					name: "uppercase"
+				},
+				{
+					kind: "pipe",
+					type: SlicePipe,
+					name: "slice"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				}
+			],
+			animations: [trigger("openClose", [transition(":enter", [style({
+				bottom: "-55px",
+				opacity: 0
+			}), animate("0.2s ease-out", style({
+				opacity: 1,
+				bottom: "10px"
+			}))]), transition(":leave", [style({
+				bottom: "10px",
+				opacity: 1
+			}), animate("0.2s ease-in", style({
+				bottom: "-55px",
+				opacity: 0
+			}))])])],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SnackbarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-snackbar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			animations: [trigger("openClose", [transition(":enter", [style({
+				bottom: "-55px",
+				opacity: 0
+			}), animate("0.2s ease-out", style({
+				opacity: 1,
+				bottom: "10px"
+			}))]), transition(":leave", [style({
+				bottom: "10px",
+				opacity: 1
+			}), animate("0.2s ease-in", style({
+				bottom: "-55px",
+				opacity: 0
+			}))])])],
+			imports: [
+				NgClass,
+				MatTooltip,
+				IconComponentModule,
+				ButtonComponent,
+				AsyncPipe,
+				UpperCasePipe,
+				SlicePipe,
+				UiTranslatePipe
+			],
+			template: "<ng-container>\n  @if (visible) {\n    <!-- Kept as role=\"alert\": the E2E suite reads the message through getByRole('alert'). -->\n    <div\n      [ngClass]=\"snackbarType + ' ' + position\"\n      [@openClose]\n      class=\"snackbar-container\"\n      [attr.theme]=\"applicationTheme\"\n      [class.mobile]=\"variant === 'mobile'\"\n      [class.desktop]=\"variant === 'desktop'\"\n      (mouseenter)=\"onMouseEnter()\"\n      (mouseleave)=\"onMouseLeave()\"\n      [attr.data-testid]=\"testId ?? 'snackbar-wrapper'\"\n      [attr.data-test-snackbar-type]=\"snackbarType\"\n      [attr.aria-describedby]=\"'describedby'\"\n      role=\"alert\"\n      [attr.aria-labelledby]=\"'labelledby'\"\n    >\n      <span style=\"position: absolute; left: -9999px\" id=\"labelledby\">{{\n        'ALERT_BANNER.' + (snackbarType | uppercase) | uiTranslate | async\n      }}</span>\n      <span style=\"position: absolute; left: -9999px\"\n        >{{ message }}\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </span>\n      <span [style.display]=\"'none'\" id=\"describedby\">{{ ariaDescribedby }}</span>\n      <div\n        aria-hidden=\"true\"\n        class=\"snackbar-text\"\n        [matTooltip]=\"message.length > maxCharacters ? message : ''\"\n        data-testid=\"snackbar-content\"\n      >\n        @if (applicationTheme === 'classic') {\n          <ui-icon [name]=\"iconName\" size=\"24\"></ui-icon>\n        }\n        {{ message.length > maxCharacters ? (message | slice: 0 : maxCharacters) + '..' : message }}\n        @if (safeHtml) {\n          <div [innerHTML]=\"safeHtml\"></div>\n        }\n        @if (!!linkText) {\n          <a [target]=\"linkTarget\" [href]=\"linkUrl\" (click)=\"onLinkClick($event)\">{{ linkText }}</a>\n        }\n      </div>\n      @if (includeDismissButton && applicationTheme === 'classic') {\n        <ui-button\n          variant=\"text\"\n          [label]=\"(translationContext + 'DISMISS' | uiTranslate | async)!\"\n          [applicationTheme]=\"applicationTheme !== 'classic' ? 'light' : 'classic'\"\n          (buttonClickEvent)=\"dismissClick()\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n      @if (includeDismissButton && applicationTheme !== 'classic') {\n        <ui-button\n          [variant]=\"'icon-button'\"\n          [applicationTheme]=\"'light'\"\n          [iconName]=\"'Close-in-line'\"\n          [size]=\"'small'\"\n          [tooltip]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          (click)=\"dismissClick()\"\n          [ariaLabel]=\"(closeButtonTooltip || ('COMMON.CLOSE' | uiTranslate | async))!\"\n          data-testid=\"snackbar-dismiss-button\"\n          [testId]=\"dismissButtonTestId\"\n        ></ui-button>\n      }\n    </div>\n  }\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;width:100%;justify-content:center}:host .snackbar-container{max-width:600px}:host .alert-container,:host .snackbar-container{margin:0 auto;display:flex;padding:0 14px;border-radius:4px;align-items:center;justify-content:space-between;opacity:1;min-height:48px}:host .alert-container.fixed,:host .snackbar-container.fixed{position:fixed}:host .alert-container.static,:host .snackbar-container.static{position:relative}:host .alert-container ui-icon,:host .snackbar-container ui-icon{margin-right:14px}:host .alert-container ui-button,:host .snackbar-container ui-button{margin-left:14px}:host .alert-container ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container ::ng-deep button.mat-mdc-unelevated-button.big{padding:0;min-width:auto}:host .alert-container .alert-text,:host .alert-container .snackbar-text,:host .snackbar-container .alert-text,:host .snackbar-container .snackbar-text{display:flex;align-items:center;color:#000}:host .alert-container .alert-text a,:host .alert-container .snackbar-text a,:host .snackbar-container .alert-text a,:host .snackbar-container .snackbar-text a{color:#000;text-decoration:underline;font-weight:700}:host .alert-container .alert-text a:hover,:host .alert-container .alert-text a:visited,:host .alert-container .alert-text a:focus,:host .alert-container .snackbar-text a:hover,:host .alert-container .snackbar-text a:visited,:host .alert-container .snackbar-text a:focus,:host .snackbar-container .alert-text a:hover,:host .snackbar-container .alert-text a:visited,:host .snackbar-container .alert-text a:focus,:host .snackbar-container .snackbar-text a:hover,:host .snackbar-container .snackbar-text a:visited,:host .snackbar-container .snackbar-text a:focus{text-decoration:none}:host .alert-container.success,:host .snackbar-container.success{background-color:#cbd6cb}:host .alert-container.info,:host .snackbar-container.info{background-color:#c8d7de}:host .alert-container.warning,:host .snackbar-container.warning{background-color:#f0d6bb}:host .alert-container.error,:host .snackbar-container.error{background-color:#e3c3c6}:host .alert-container[theme=dark].success,:host .alert-container[theme=light].success,:host .snackbar-container[theme=dark].success,:host .snackbar-container[theme=light].success{background-color:#aae47a}:host .alert-container[theme=dark].info,:host .alert-container[theme=light].info,:host .snackbar-container[theme=dark].info,:host .snackbar-container[theme=light].info{background-color:#d9e8ff}:host .alert-container[theme=dark].warning,:host .alert-container[theme=light].warning,:host .snackbar-container[theme=dark].warning,:host .snackbar-container[theme=light].warning{background-color:#ffe1b3}:host .alert-container[theme=dark].error,:host .alert-container[theme=light].error,:host .snackbar-container[theme=dark].error,:host .snackbar-container[theme=light].error{background-color:#ffac9a}:host .alert-container[theme=dark].ai,:host .alert-container[theme=light].ai,:host .snackbar-container[theme=dark].ai,:host .snackbar-container[theme=light].ai{background-color:#fff2fc;border:1px solid #ffe6fa;padding:12px 16px}:host .alert-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .alert-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=dark].ai ::ng-deep button.mat-mdc-unelevated-button.big,:host .snackbar-container[theme=light].ai ::ng-deep button.mat-mdc-unelevated-button.big{padding:12px 24px}::ng-deep .display-none{display:none!important}@media(max-width:600px){:host .alert-container,:host .snackbar-container{padding:8px 14px}}:host .snackbar-container{bottom:0;z-index:98}:host .snackbar-container[theme=dark] ui-icon,:host .snackbar-container[theme=light] ui-icon{margin-right:10px;cursor:pointer}:host .snackbar-container[theme=dark] .snackbar-text,:host .snackbar-container[theme=light] .snackbar-text{padding-left:10px;margin-right:8px}:host .snackbar-container[theme=dark] .snackbar-text a,:host .snackbar-container[theme=light] .snackbar-text a{margin-left:4px}:host .snackbar-container[theme=dark].desktop,:host .snackbar-container[theme=light].desktop{border-radius:24px;box-shadow:0 4px 16px #2424240a;width:fit-content;max-width:600px;min-height:48px;line-height:1.4;font-size:14px;padding:16px 24px}:host .snackbar-container[theme=dark].mobile,:host .snackbar-container[theme=light].mobile{width:100%;min-width:100%;word-break:break-word}:host .mat-mdc-snack-bar-container{margin:16px 8px}::ng-deep .mdc-snackbar__surface{height:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: ["CANOPYUI_DEFAULT_APPLICATION_THEME"]
+			}]
+		},
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [MAT_SNACK_BAR_DATA]
+			}]
+		},
+		{ type: i1.MatSnackBarRef },
+		{ type: i0.ChangeDetectorRef }
+	],
+	propDecorators: {
+		snackbarType: [{ type: Input }],
+		message: [{ type: Input }],
+		html: [{ type: Input }],
+		seconds: [{ type: Input }],
+		includeDismissButton: [{ type: Input }],
+		fixed: [{ type: Input }],
+		linkText: [{ type: Input }],
+		linkUrl: [{ type: Input }],
+		linkTarget: [{ type: Input }],
+		variant: [{ type: Input }],
+		applicationTheme: [{ type: Input }],
+		closeButtonTooltip: [{ type: Input }],
+		testId: [{ type: Input }],
+		ariaDescribedby: [{ type: Input }]
+	}
+});
+var SnackbarService = class SnackbarService {
+	constructor(snackBar) {
+		this.snackBar = snackBar;
+	}
+	error(message, applicationTheme, html, link, seconds) {
+		return this.show("error", message, applicationTheme, html, link, seconds);
+	}
+	success(message, applicationTheme, html, link, seconds) {
+		return this.show("success", message, applicationTheme, html, link, seconds);
+	}
+	info(message, applicationTheme, html, link, seconds) {
+		return this.show("info", message, applicationTheme, html, link, seconds);
+	}
+	warning(message, applicationTheme, html, link, seconds) {
+		return this.show("warning", message, applicationTheme, html, link, seconds);
+	}
+	show(snackbarType, message, applicationTheme, html, link, seconds) {
+		const componentRef = this.snackBar.openFromComponent(SnackbarComponent, { data: {
+			snackbarType,
+			message,
+			link,
+			html,
+			seconds
+		} });
+		if (applicationTheme) componentRef.instance.applicationTheme = applicationTheme;
+		return componentRef;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SnackbarService,
+			deps: [{ token: i1.MatSnackBar }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SnackbarService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SnackbarService,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: i1.MatSnackBar }]
+});
+var SnackbarComponentModule = class SnackbarComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SnackbarComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SnackbarComponentModule,
+			imports: [
+				CommonModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				MatSnackBarModule,
+				MatTooltipModule,
+				SnackbarComponent
+			],
+			exports: [SnackbarComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SnackbarComponentModule,
+			providers: [SnackbarService],
+			imports: [
+				CommonModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				MatSnackBarModule,
+				MatTooltipModule,
+				SnackbarComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SnackbarComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				ButtonComponentModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				MatSnackBarModule,
+				MatTooltipModule,
+				SnackbarComponent
+			],
+			exports: [SnackbarComponent],
+			providers: [SnackbarService]
+		}]
+	}]
+});
 export { SnackbarComponent, SnackbarComponentModule, SnackbarService };
-//# sourceMappingURL=testgorilla-tgo-ui-components-snackbar.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-snackbar.mjs.map