@koobiq/components 18.10.0 → 18.12.0

package/fesm2022/koobiq-components-toast.mjs

@@ -1,22 +1,28 @@
 import * as i1 from '@angular/cdk/overlay';
-import { CdkScrollable, OverlayModule } from '@angular/cdk/overlay';
+import { CdkScrollable } from '@angular/cdk/overlay';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, Injector, forwardRef, ViewContainerRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Directive, TemplateRef, NgModule } from '@angular/core';
+import { InjectionToken, Directive, TemplateRef, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Injectable, Optional, Injector, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { BehaviorSubject, timer, filter, shareReplay, merge } from 'rxjs';
+import { BehaviorSubject, merge, timer, filter as filter$1, shareReplay } from 'rxjs';
 import * as i2 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ThemePalette } from '@koobiq/components/core';
-import { filter as filter$1 } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as i3 from '@koobiq/components/title';
-import { KbqTitleModule } from '@koobiq/components/title';
-import * as i4 from '@koobiq/components/icon';
+import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i5 from '@angular/common';
-import { NgTemplateOutlet, NgClass } from '@angular/common';
-import { KbqButtonModule } from '@koobiq/components/button';
+import * as i4 from '@koobiq/components/title';
+import { KbqTitleModule } from '@koobiq/components/title';
+import { filter } from 'rxjs/operators';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+const kbqToastAnimations = {
+    toastState: trigger('state', [
+        state('void', style({ transform: 'translateX(100%)', opacity: 0 })),
+        transition('* => visible', animate('150ms ease-out', style({ transform: 'translateX(0%)', opacity: 1 }))),
+        transition('* => void', animate('300ms ease-in', style({ transform: 'translateX(50%)', opacity: 0, 'max-height': 0 })))
+    ])
+};
+const toastState = kbqToastAnimations.toastState;
 
 var KbqToastStyle;
 (function (KbqToastStyle) {
@@ -39,7 +45,110 @@ class KbqToastData {
 }
 const KBQ_TOAST_CONFIG = new InjectionToken('kbq-toast-config');
 
-const KBQ_TOAST_FACTORY = new InjectionToken('KbqToastFactory');
+class KbqToastCloseButton {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqToastCloseButton, isStandalone: true, selector: "[kbq-toast-close-button]", host: { classAttribute: "kbq-toast__close-button" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastCloseButton, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbq-toast-close-button]',
+                    host: {
+                        class: 'kbq-toast__close-button'
+                    }
+                }]
+        }] });
+let id = 0;
+class KbqToastComponent {
+    get toastStyle() {
+        return {
+            [`kbq-toast_${this.data.style}`]: true
+        };
+    }
+    get isFocusedOrHovered() {
+        return this.hovered.getValue() || this.focused.getValue();
+    }
+    constructor(data, service, elementRef, focusMonitor) {
+        this.data = data;
+        this.service = service;
+        this.elementRef = elementRef;
+        this.focusMonitor = focusMonitor;
+        this.themePalette = ThemePalette;
+        this.animationState = 'void';
+        this.hovered = new BehaviorSubject(false);
+        this.focused = new BehaviorSubject(false);
+        this.id = id++;
+        this.$implicit = this;
+        this.data.style = this.data.style || KbqToastStyle.Contrast;
+        this.data.icon = this.data.icon !== undefined ? this.data.icon : true;
+        this.data.iconClass = this.data.iconClass || undefined;
+        this.data.closeButton = this.data.closeButton !== undefined ? this.data.closeButton : true;
+        this.animationState = 'visible';
+        this.runFocusMonitor();
+        this.hovered.subscribe(this.service.hovered);
+        this.focused.subscribe(this.service.focused);
+        merge(this.hovered, this.focused)
+            .pipe(filter((value) => value), takeUntilDestroyed())
+            .subscribe(() => {
+            if (this.ttl === 0) {
+                return;
+            }
+            this.ttl = this.ttl < this.delay ? this.delay : this.ttl;
+        });
+    }
+    ngOnDestroy() {
+        this.stopFocusMonitor();
+        this.hovered.next(false);
+        this.focused.next(false);
+    }
+    close() {
+        this.service.hide(this.id);
+    }
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    onAnimation($event) {
+        this.service.animation.next($event);
+    }
+    runFocusMonitor() {
+        this.focusMonitor
+            .monitor(this.elementRef.nativeElement, true)
+            .subscribe((origin) => this.focused.next(!!origin));
+    }
+    stopFocusMonitor() {
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastComponent, deps: [{ token: KbqToastData }, { token: forwardRef(() => KbqToastService) }, { token: i0.ElementRef }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqToastComponent, isStandalone: true, selector: "kbq-toast", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)", "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)", "keydown.esc": "close()" }, properties: { "class": "toastStyle", "class.kbq-toast_dismissible": "data.closeButton", "@state": "animationState" }, classAttribute: "kbq-toast" }, ngImport: i0, template: "@if (data.icon) {\n    <div class=\"kbq-toast__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-info-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-check-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        }\n        @if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div kbq-title class=\"kbq-toast__title\" [class.kbq-toast__title_with-content]=\"data.caption || data.content\">\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div kbq-title [class.kbq-toast__text]=\"data.title\" [class.kbq-toast__title]=\"!data.title\">\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.caption)) {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.content)) {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.actions)) {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (data.closeButton) {\n    <div>\n        @if (data.closeButton === true) {\n            <i kbq-icon-button=\"kbq-xmark-s_16\" kbq-toast-close-button (click)=\"close()\"></i>\n        }\n        @if (isTemplateRef(data.closeButton)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.closeButton)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n", styles: [".kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius);padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right)}.kbq-toast__icon-container{flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-container-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:calc(var(--kbq-toast-size-content-padding-top) - (var(--kbq-icon-button-size-small-vertical-padding) * 2 + 16px - var(--kbq-typography-text-normal-line-height)) / 2);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast,.kbq-toast__title{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-toast-container{--kbq-toast-stack-size-margin-top: var(--kbq-size-m);--kbq-toast-stack-size-margin-right: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: 50%;--kbq-toast-size-close-button-margin-top: var(--kbq-size-m);--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i3.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i4.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "directive", type: KbqToastCloseButton, selector: "[kbq-toast-close-button]" }], animations: [kbqToastAnimations.toastState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        NgTemplateOutlet,
+                        KbqIconModule,
+                        NgClass,
+                        KbqTitleModule,
+                        KbqToastCloseButton
+                    ], selector: 'kbq-toast', host: {
+                        class: 'kbq-toast',
+                        '[class]': 'toastStyle',
+                        '[class.kbq-toast_dismissible]': 'data.closeButton',
+                        '[@state]': 'animationState',
+                        '(@state.start)': 'onAnimation($event)',
+                        '(@state.done)': 'onAnimation($event)',
+                        '(mouseenter)': 'hovered.next(true)',
+                        '(mouseleave)': 'hovered.next(false)',
+                        '(keydown.esc)': 'close()'
+                    }, animations: [kbqToastAnimations.toastState], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (data.icon) {\n    <div class=\"kbq-toast__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-info-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-check-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        }\n        @if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div kbq-title class=\"kbq-toast__title\" [class.kbq-toast__title_with-content]=\"data.caption || data.content\">\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div kbq-title [class.kbq-toast__text]=\"data.title\" [class.kbq-toast__title]=\"!data.title\">\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.caption)) {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.content)) {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.actions)) {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (data.closeButton) {\n    <div>\n        @if (data.closeButton === true) {\n            <i kbq-icon-button=\"kbq-xmark-s_16\" kbq-toast-close-button (click)=\"close()\"></i>\n        }\n        @if (isTemplateRef(data.closeButton)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.closeButton)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n", styles: [".kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius);padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right)}.kbq-toast__icon-container{flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-container-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:calc(var(--kbq-toast-size-content-padding-top) - (var(--kbq-icon-button-size-small-vertical-padding) * 2 + 16px - var(--kbq-typography-text-normal-line-height)) / 2);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast,.kbq-toast__title{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-toast-container{--kbq-toast-stack-size-margin-top: var(--kbq-size-m);--kbq-toast-stack-size-margin-right: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: 50%;--kbq-toast-size-close-button-margin-top: var(--kbq-size-m);--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"] }]
+        }], ctorParameters: () => [{ type: KbqToastData }, { type: KbqToastService, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => KbqToastService)]
+                }] }, { type: i0.ElementRef }, { type: i2.FocusMonitor }] });
+
+const KBQ_TOAST_FACTORY = new InjectionToken('KBQ_TOAST_FACTORY', {
+    factory: () => KbqToastComponent
+});
 const defaultToastConfig = {
     position: KbqToastPosition.TOP_RIGHT,
     duration: 5000,
@@ -66,7 +175,7 @@ class KbqToastService {
         this.hovered = new BehaviorSubject(false);
         this.focused = new BehaviorSubject(false);
         this.animation = new BehaviorSubject(null);
-        this.timer = timer(CHECK_INTERVAL, CHECK_INTERVAL).pipe(filter(() => this.toasts.length > 0 && !this.hovered.getValue() && !this.focused.getValue()), 
+        this.timer = timer(CHECK_INTERVAL, CHECK_INTERVAL).pipe(filter$1(() => this.toasts.length > 0 && !this.hovered.getValue() && !this.focused.getValue()), 
         // eslint-disable-next-line rxjs/no-ignored-replay-buffer
         shareReplay());
         this.toastsDict = {};
@@ -256,11 +365,11 @@ class KbqToastContainerComponent extends CdkScrollable {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastContainerComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: forwardRef(() => KbqToastService) }, { token: i0.ElementRef }, { token: i1.ScrollDispatcher }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqToastContainerComponent, selector: "kbq-toast-container", host: { classAttribute: "kbq-toast-container" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<ng-container #container />', isInline: true, styles: [".kbq-toast-container{display:flex;flex-direction:column;align-items:flex-end;margin-top:var(--kbq-toast-stack-size-margin-top);margin-right:var(--kbq-toast-stack-size-margin-right);gap:var(--kbq-toast-stack-size-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: KbqToastContainerComponent, isStandalone: true, selector: "kbq-toast-container", host: { classAttribute: "kbq-toast-container" }, viewQueries: [{ propertyName: "viewContainer", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: '<ng-container #container />', isInline: true, styles: [".kbq-toast-container{display:flex;flex-direction:column;align-items:flex-end;margin-top:var(--kbq-toast-stack-size-margin-top);margin-right:var(--kbq-toast-stack-size-margin-right);gap:var(--kbq-toast-stack-size-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-toast-container', template: '<ng-container #container />', host: {
+            args: [{ standalone: true, selector: 'kbq-toast-container', template: '<ng-container #container />', host: {
                         class: 'kbq-toast-container'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-toast-container{display:flex;flex-direction:column;align-items:flex-end;margin-top:var(--kbq-toast-stack-size-margin-top);margin-right:var(--kbq-toast-stack-size-margin-right);gap:var(--kbq-toast-stack-size-gap)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: KbqToastService, decorators: [{
@@ -271,157 +380,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
                 args: ['container', { static: true, read: ViewContainerRef }]
             }] } });
 
-const kbqToastAnimations = {
-    toastState: trigger('state', [
-        state('void', style({ transform: 'translateX(100%)', opacity: 0 })),
-        transition('* => visible', animate('150ms ease-out', style({ transform: 'translateX(0%)', opacity: 1 }))),
-        transition('* => void', animate('300ms ease-in', style({ transform: 'translateX(50%)', opacity: 0, 'max-height': 0 })))
-    ])
-};
-const toastState = kbqToastAnimations.toastState;
-
-class KbqToastCloseButton {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastCloseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.6", type: KbqToastCloseButton, selector: "[kbq-toast-close-button]", host: { classAttribute: "kbq-toast__close-button" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastCloseButton, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kbq-toast-close-button]',
-                    host: {
-                        class: 'kbq-toast__close-button'
-                    }
-                }]
-        }] });
-let id = 0;
-class KbqToastComponent {
-    get toastStyle() {
-        return {
-            [`kbq-toast_${this.data.style}`]: true
-        };
-    }
-    get isFocusedOrHovered() {
-        return this.hovered.getValue() || this.focused.getValue();
-    }
-    constructor(data, service, elementRef, focusMonitor) {
-        this.data = data;
-        this.service = service;
-        this.elementRef = elementRef;
-        this.focusMonitor = focusMonitor;
-        this.themePalette = ThemePalette;
-        this.animationState = 'void';
-        this.hovered = new BehaviorSubject(false);
-        this.focused = new BehaviorSubject(false);
-        this.id = id++;
-        this.$implicit = this;
-        this.data.style = this.data.style || KbqToastStyle.Contrast;
-        this.data.icon = this.data.icon !== undefined ? this.data.icon : true;
-        this.data.iconClass = this.data.iconClass || undefined;
-        this.data.closeButton = this.data.closeButton !== undefined ? this.data.closeButton : true;
-        this.animationState = 'visible';
-        this.runFocusMonitor();
-        this.hovered.subscribe(this.service.hovered);
-        this.focused.subscribe(this.service.focused);
-        merge(this.hovered, this.focused)
-            .pipe(filter$1((value) => value), takeUntilDestroyed())
-            .subscribe(() => {
-            if (this.ttl === 0) {
-                return;
-            }
-            this.ttl = this.ttl < this.delay ? this.delay : this.ttl;
-        });
-    }
-    ngOnDestroy() {
-        this.stopFocusMonitor();
-        this.hovered.next(false);
-        this.focused.next(false);
-    }
-    close() {
-        this.service.hide(this.id);
-    }
-    isTemplateRef(value) {
-        return value instanceof TemplateRef;
-    }
-    onAnimation($event) {
-        this.service.animation.next($event);
-    }
-    runFocusMonitor() {
-        this.focusMonitor
-            .monitor(this.elementRef.nativeElement, true)
-            .subscribe((origin) => this.focused.next(!!origin));
-    }
-    stopFocusMonitor() {
-        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastComponent, deps: [{ token: KbqToastData }, { token: forwardRef(() => KbqToastService) }, { token: i0.ElementRef }, { token: i2.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqToastComponent, selector: "kbq-toast", host: { listeners: { "@state.start": "onAnimation($event)", "@state.done": "onAnimation($event)", "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)", "keydown.esc": "close()" }, properties: { "class": "toastStyle", "class.kbq-toast_dismissible": "data.closeButton", "@state": "animationState" }, classAttribute: "kbq-toast" }, ngImport: i0, template: "@if (data.icon) {\n    <div class=\"kbq-toast__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-info-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-check-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        }\n        @if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div kbq-title class=\"kbq-toast__title\" [class.kbq-toast__title_with-content]=\"data.caption || data.content\">\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div kbq-title [class.kbq-toast__text]=\"data.title\" [class.kbq-toast__title]=\"!data.title\">\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.caption)) {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.content)) {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.actions)) {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (data.closeButton) {\n    <div>\n        @if (data.closeButton === true) {\n            <i kbq-icon-button=\"kbq-xmark-s_16\" kbq-toast-close-button (click)=\"close()\"></i>\n        }\n        @if (isTemplateRef(data.closeButton)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.closeButton)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n", styles: [".kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius);padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right)}.kbq-toast__icon-container{flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-container-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:calc(var(--kbq-toast-size-content-padding-top) - (var(--kbq-icon-button-size-small-vertical-padding) * 2 + 16px - var(--kbq-typography-text-normal-line-height)) / 2);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast,.kbq-toast__title{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-toast-container{--kbq-toast-stack-size-margin-top: var(--kbq-size-m);--kbq-toast-stack-size-margin-right: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: 50%;--kbq-toast-size-close-button-margin-top: var(--kbq-size-m);--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "component", type: i4.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i4.KbqIconButton, selector: "[kbq-icon-button]", inputs: ["color", "small", "tabindex", "disabled"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: KbqToastCloseButton, selector: "[kbq-toast-close-button]" }], animations: [kbqToastAnimations.toastState], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kbq-toast', host: {
-                        class: 'kbq-toast',
-                        '[class]': 'toastStyle',
-                        '[class.kbq-toast_dismissible]': 'data.closeButton',
-                        '[@state]': 'animationState',
-                        '(@state.start)': 'onAnimation($event)',
-                        '(@state.done)': 'onAnimation($event)',
-                        '(mouseenter)': 'hovered.next(true)',
-                        '(mouseleave)': 'hovered.next(false)',
-                        '(keydown.esc)': 'close()'
-                    }, animations: [kbqToastAnimations.toastState], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (data.icon) {\n    <div class=\"kbq-toast__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-info-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-check-circle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-toast__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        }\n        @if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-toast__container\">\n    @if (data.title) {\n        <div kbq-title class=\"kbq-toast__title\" [class.kbq-toast__title_with-content]=\"data.caption || data.content\">\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n        </div>\n    }\n\n    @if (data.caption) {\n        <div kbq-title [class.kbq-toast__text]=\"data.title\" [class.kbq-toast__title]=\"!data.title\">\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.caption)) {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-toast__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.content)) {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-toast__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.actions)) {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n@if (data.closeButton) {\n    <div>\n        @if (data.closeButton === true) {\n            <i kbq-icon-button=\"kbq-xmark-s_16\" kbq-toast-close-button (click)=\"close()\"></i>\n        }\n        @if (isTemplateRef(data.closeButton)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.closeButton)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n", styles: [".kbq-toast{display:flex;box-sizing:border-box;width:var(--kbq-toast-size-container-width);height:auto;border-radius:var(--kbq-toast-size-container-border-radius);padding-left:var(--kbq-toast-size-container-padding-left);padding-right:var(--kbq-toast-size-container-padding-right)}.kbq-toast__icon-container{flex-shrink:0;width:var(--kbq-toast-size-icon-width);max-width:var(--kbq-toast-size-icon-width);height:var(--kbq-toast-size-icon-height);max-height:var(--kbq-toast-size-icon-height);border-radius:var(--kbq-toast-size-container-border-radius);margin-right:var(--kbq-toast-size-icon-margin-right);padding-top:calc(var(--kbq-toast-size-content-padding-top) + (var(--kbq-typography-text-normal-line-height) - var(--kbq-toast-size-icon-height)) / 2)}.kbq-toast__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-toast-size-content-padding-top);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-toast-size-content-padding-bottom);overflow:hidden}.kbq-toast__title{overflow:hidden;text-overflow:ellipsis}.kbq-toast__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-toast__title_with-content{padding-bottom:var(--kbq-toast-size-caption-padding-bottom)}.kbq-toast__text{display:flex;flex:1;align-items:center}.kbq-toast__content{display:flex;flex-direction:column}.kbq-toast__actions{display:flex;padding-top:var(--kbq-toast-size-button-stack-padding-top);gap:var(--kbq-toast-size-button-stack-content-gap-horizontal)}.kbq-toast__close-button{margin-top:calc(var(--kbq-toast-size-content-padding-top) - (var(--kbq-icon-button-size-small-vertical-padding) * 2 + 16px - var(--kbq-typography-text-normal-line-height)) / 2);margin-right:var(--kbq-toast-size-close-button-margin-right)}.kbq-toast__close-button.kbq-icon-button{--kbq-icon-button-size-normal-horizontal-padding: 4px;--kbq-icon-button-size-normal-vertical-padding: 4px}.kbq-toast.kbq-toast_contrast{box-shadow:var(--kbq-toast-contrast-container-shadow);background:var(--kbq-toast-contrast-container-background)}.kbq-toast.kbq-toast_contrast .kbq-toast__title{color:var(--kbq-toast-contrast-container-title)}.kbq-toast.kbq-toast_contrast .kbq-toast__text{color:var(--kbq-toast-contrast-container-text)}.kbq-toast.kbq-toast_success{box-shadow:var(--kbq-toast-success-container-shadow);background:var(--kbq-toast-success-container-background)}.kbq-toast.kbq-toast_success .kbq-toast__title{color:var(--kbq-toast-success-container-title)}.kbq-toast.kbq-toast_success .kbq-toast__text{color:var(--kbq-toast-success-container-text)}.kbq-toast.kbq-toast_warning{box-shadow:var(--kbq-toast-warning-container-shadow);background:var(--kbq-toast-warning-container-background)}.kbq-toast.kbq-toast_warning .kbq-toast__title{color:var(--kbq-toast-warning-container-title)}.kbq-toast.kbq-toast_warning .kbq-toast__text{color:var(--kbq-toast-warning-container-text)}.kbq-toast.kbq-toast_error{box-shadow:var(--kbq-toast-error-container-shadow);background:var(--kbq-toast-error-container-background)}.kbq-toast.kbq-toast_error .kbq-toast__title{color:var(--kbq-toast-error-container-title)}.kbq-toast.kbq-toast_error .kbq-toast__text{color:var(--kbq-toast-error-container-text)}.kbq-toast,.kbq-toast__title{font-size:var(--kbq-typography-text-normal-font-size);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}\n", ".kbq-toast-container{--kbq-toast-stack-size-margin-top: var(--kbq-size-m);--kbq-toast-stack-size-margin-right: var(--kbq-size-m);--kbq-toast-stack-size-gap: var(--kbq-size-s);--kbq-toast-size-container-width: 360px;--kbq-toast-size-container-border-radius: var(--kbq-size-s);--kbq-toast-size-container-padding-left: var(--kbq-size-m);--kbq-toast-size-container-padding-right: var(--kbq-size-s);--kbq-toast-size-content-padding-top: var(--kbq-size-l);--kbq-toast-size-content-padding-bottom: var(--kbq-size-l);--kbq-toast-size-caption-padding-bottom: var(--kbq-size-xxs);--kbq-toast-size-icon-width: var(--kbq-size-l);--kbq-toast-size-icon-height: var(--kbq-size-l);--kbq-toast-size-icon-margin-right: var(--kbq-size-s);--kbq-toast-size-icon-border-radius: 50%;--kbq-toast-size-close-button-margin-top: var(--kbq-size-m);--kbq-toast-size-close-button-margin-right: var(--kbq-size-xxs);--kbq-toast-size-button-stack-padding-top: var(--kbq-size-s);--kbq-toast-size-button-stack-content-gap-horizontal: var(--kbq-size-m);--kbq-toast-contrast-container-background: var(--kbq-background-card);--kbq-toast-contrast-container-title: var(--kbq-foreground-contrast);--kbq-toast-contrast-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-contrast-container-shadow: var(--kbq-shadow-popup);--kbq-toast-error-container-background: var(--kbq-background-card);--kbq-toast-error-container-title: var(--kbq-foreground-contrast);--kbq-toast-error-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-error-container-shadow: var(--kbq-shadow-popup);--kbq-toast-warning-container-background: var(--kbq-background-card);--kbq-toast-warning-container-title: var(--kbq-foreground-contrast);--kbq-toast-warning-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-warning-container-shadow: var(--kbq-shadow-popup);--kbq-toast-success-container-background: var(--kbq-background-card);--kbq-toast-success-container-title: var(--kbq-foreground-contrast);--kbq-toast-success-container-text: var(--kbq-foreground-contrast-secondary);--kbq-toast-success-container-shadow: var(--kbq-shadow-popup)}\n"] }]
-        }], ctorParameters: () => [{ type: KbqToastData }, { type: KbqToastService, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => KbqToastService)]
-                }] }, { type: i0.ElementRef }, { type: i2.FocusMonitor }] });
-
+const COMPONENTS = [
+    KbqToastComponent,
+    KbqToastCloseButton,
+    KbqToastContainerComponent
+];
 class KbqToastModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: KbqToastModule, declarations: [KbqToastComponent,
-            KbqToastContainerComponent,
-            KbqToastCloseButton], imports: [OverlayModule,
-            KbqTitleModule,
-            A11yModule,
-            KbqIconModule,
-            KbqButtonModule,
-            NgTemplateOutlet,
-            NgClass], exports: [KbqToastComponent,
-            KbqToastContainerComponent,
-            KbqToastCloseButton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastModule, providers: [
-            KbqToastService,
-            { provide: KBQ_TOAST_FACTORY, useFactory: (() => KbqToastComponent) }
-        ], imports: [OverlayModule,
-            KbqTitleModule,
-            A11yModule,
-            KbqIconModule,
-            KbqButtonModule] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.6", ngImport: i0, type: KbqToastModule, imports: [KbqToastComponent,
+            KbqToastCloseButton,
+            KbqToastContainerComponent], exports: [KbqToastComponent,
+            KbqToastCloseButton,
+            KbqToastContainerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastModule, imports: [KbqToastComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: KbqToastModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        KbqToastComponent,
-                        KbqToastContainerComponent,
-                        KbqToastCloseButton
-                    ],
-                    imports: [
-                        OverlayModule,
-                        KbqTitleModule,
-                        A11yModule,
-                        KbqIconModule,
-                        KbqButtonModule,
-                        NgTemplateOutlet,
-                        NgClass
-                    ],
-                    exports: [
-                        KbqToastComponent,
-                        KbqToastContainerComponent,
-                        KbqToastCloseButton
-                    ],
-                    providers: [
-                        KbqToastService,
-                        { provide: KBQ_TOAST_FACTORY, useFactory: (() => KbqToastComponent) }
-                    ]
+                    imports: COMPONENTS,
+                    exports: COMPONENTS
                 }]
         }] });