@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

package/fesm2022/rt-tools-ui-kit-v2-toast.mjs

@@ -1,343 +1,757 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, signal, computed, input, booleanAttribute, output, effect, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, linkedSignal, numberAttribute } from '@angular/core';
-import { BlockDirective, ElemDirective } from '@rt-tools/core';
-import { RT_KIT_LABELS, NotificationBus, rtKitLabel } from '@rt-tools/ui-kit-v2/core';
-import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
-import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, InjectionToken, ViewEncapsulation, booleanAttribute, computed, effect, inject, input, linkedSignal, numberAttribute, output, signal } from "@angular/core";
+import { BlockDirective, ElemDirective } from "@rt-tools/core";
+import { NotificationBus, RT_KIT_LABELS, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 const RT_TOASTER_GAP_PX = 14;
-/**
- * Значки severity у тоста. Приложение подменяет карту целиком — например, на имена
- * Material, — а тост со своим `icon` берёт свой значок мимо карты.
- */
-const RT_TOAST_SEVERITY_ICONS = new InjectionToken('RT_TOAST_SEVERITY_ICONS', {
-    providedIn: 'root',
-    factory: () => ({
-        info: 'info-circle',
-        success: 'check-circle',
-        warning: 'exclamation-circle',
-        danger: 'times-circle',
-    }),
+const RT_TOAST_SEVERITY_ICONS = new InjectionToken("RT_TOAST_SEVERITY_ICONS", {
+	providedIn: "root",
+	factory: () => ({
+		info: "info-circle",
+		success: "check-circle",
+		warning: "exclamation-circle",
+		danger: "times-circle"
+	})
 });
-
-const BEM_BLOCK$1 = 'rt-toast';
+const BEM_BLOCK$1 = "rt-toast";
 const UNMOUNT_DELAY_MS = 200;
-class RtToastComponent {
-    #host;
-    #severityIcons;
-    #mounted;
-    #removed;
-    #offsetBeforeRemove;
-    #initialHeight;
-    #heightIndex;
-    #heightBefore;
-    #offset;
-    #positionY;
-    #timeoutId;
-    #unmountTimeoutId;
-    #remainingTimeMs;
-    #closeTimerStartedAt;
-    #closeTimerPausedAt;
-    get hostModifierClasses() {
-        return {
-            [`${BEM_BLOCK$1}--severity--${this.toast().severity}`]: true,
-            [`${BEM_BLOCK$1}--filled`]: this.toast().filled === true,
-            [`${BEM_BLOCK$1}--y--${this.#positionY()}`]: true,
-            [`${BEM_BLOCK$1}--mounted`]: this.#mounted(),
-            [`${BEM_BLOCK$1}--removed`]: this.#removed(),
-            [`${BEM_BLOCK$1}--front`]: this.index() === 0,
-            [`${BEM_BLOCK$1}--hidden`]: this.index() + 1 > this.visibleToasts(),
-            [`${BEM_BLOCK$1}--expanded`]: this.expanded() || (this.expandByDefault() && this.#mounted()),
-            [`${BEM_BLOCK$1}--paused`]: this.paused(),
-        };
-    }
-    get hostStackStyles() {
-        return {
-            '--index': `${this.index()}`,
-            '--toasts-before': `${this.index()}`,
-            '--z-index': `${this.totalToasts() - this.index()}`,
-            '--offset': `${this.#removed() ? this.#offsetBeforeRemove() : this.#offset()}px`,
-            '--initial-height': this.expandByDefault() ? 'auto' : `${this.#initialHeight()}px`,
-            '--lifetime': `${this.lifetime() ?? 0}ms`,
-        };
-    }
-    constructor() {
-        this.#host = inject(ElementRef);
-        this.#severityIcons = inject(RT_TOAST_SEVERITY_ICONS);
-        this.#mounted = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#mounted" }] : /* istanbul ignore next */ []));
-        this.#removed = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#removed" }] : /* istanbul ignore next */ []));
-        this.#offsetBeforeRemove = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#offsetBeforeRemove" }] : /* istanbul ignore next */ []));
-        this.#initialHeight = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#initialHeight" }] : /* istanbul ignore next */ []));
-        this.#heightIndex = computed(() => this.heights().findIndex((item) => item.toastId === this.toast().id), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#heightIndex" }] : /* istanbul ignore next */ []));
-        this.#heightBefore = computed(() => this.heights().reduce((total, item, itemIndex) => itemIndex >= this.#heightIndex() ? total : total + item.height, 0), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#heightBefore" }] : /* istanbul ignore next */ []));
-        this.#offset = computed(() => Math.round(this.#heightIndex() * RT_TOASTER_GAP_PX + this.#heightBefore()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#offset" }] : /* istanbul ignore next */ []));
-        this.#positionY = computed(() => this.position().startsWith('top') ? 'top' : 'bottom', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#positionY" }] : /* istanbul ignore next */ []));
-        this.#remainingTimeMs = 0;
-        this.#closeTimerStartedAt = 0;
-        this.#closeTimerPausedAt = 0;
-        this.t = inject(RT_KIT_LABELS);
-        /** Свой значок тоста важнее карты severity; `null` у тоста значок снимает. */
-        this.icon = computed(() => {
-            const icon = this.toast().icon;
-            return icon === undefined ? this.#severityIcons[this.toast().severity] : icon;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        /** Срок жизни тоста: свой, если задан, иначе тостера; `null` — таймера нет. */
-        this.lifetime = computed(() => {
-            const duration = this.toast().duration;
-            return duration === undefined ? this.duration() : duration;
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "lifetime" }] : /* istanbul ignore next */ []));
-        this.showProgress = computed(() => this.toast().progress === true && this.lifetime() !== null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showProgress" }] : /* istanbul ignore next */ []));
-        /** Таймер и полоса срока встают от одного признака, чтобы не разойтись. */
-        this.paused = computed(() => this.expanded() || this.interacting(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []));
-        this.toast = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
-        this.index = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-        this.totalToasts = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "totalToasts" }] : /* istanbul ignore next */ []));
-        this.heights = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []));
-        this.expanded = input.required({ ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.expandByDefault = input(false, { ...(ngDevMode ? { debugName: "expandByDefault" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.interacting = input(false, { ...(ngDevMode ? { debugName: "interacting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.position = input('bottom-right', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-        this.visibleToasts = input(3, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "visibleToasts" }] : /* istanbul ignore next */ []));
-        this.duration = input(4000, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
-        this.heightAdded = output();
-        this.heightRemoved = output();
-        this.dismissed = output();
-        effect((onCleanup) => {
-            if (!this.#mounted() || this.#removed() || this.lifetime() === null) {
-                return;
-            }
-            if (this.paused()) {
-                this.#pauseTimer();
-            }
-            else {
-                this.#startTimer();
-            }
-            onCleanup(() => clearTimeout(this.#timeoutId));
-        });
-        // Вытесненный в режиме `replace` уходит тем же путём, что и закрытый крестиком.
-        effect(() => {
-            if (this.#mounted() && this.toast().replaced === true) {
-                this.#deleteToast('replaced');
-            }
-        });
-    }
-    ngAfterViewInit() {
-        this.#remainingTimeMs = this.lifetime() ?? 0;
-        const height = this.#host.nativeElement.getBoundingClientRect().height;
-        this.#initialHeight.set(height);
-        this.heightAdded.emit({ toastId: this.toast().id, height });
-        this.#mounted.set(true);
-    }
-    ngOnDestroy() {
-        clearTimeout(this.#timeoutId);
-        clearTimeout(this.#unmountTimeoutId);
-    }
-    onAction() {
-        this.toast().action?.handler();
-        this.#deleteToast(null);
-    }
-    onSecondaryAction() {
-        this.toast().secondaryAction?.handler();
-        this.#deleteToast(null);
-    }
-    onClose() {
-        this.#deleteToast('close');
-    }
-    /** Уход тоста. Причина — для колбэка приложения; ушедший по действию её не сообщает: `null`. */
-    #deleteToast(reason) {
-        if (this.#removed()) {
-            return;
-        }
-        this.#removed.set(true);
-        if (reason !== null) {
-            this.toast().onDismiss?.(reason);
-        }
-        this.#offsetBeforeRemove.set(this.#offset());
-        this.heightRemoved.emit(this.toast().id);
-        this.#unmountTimeoutId = setTimeout(() => this.dismissed.emit(this.toast().id), UNMOUNT_DELAY_MS);
-    }
-    #startTimer() {
-        this.#closeTimerStartedAt = Date.now();
-        this.#timeoutId = setTimeout(() => this.#deleteToast('timeout'), this.#remainingTimeMs);
-    }
-    #pauseTimer() {
-        if (this.#closeTimerPausedAt < this.#closeTimerStartedAt) {
-            const elapsedMs = Date.now() - this.#closeTimerStartedAt;
-            this.#remainingTimeMs = this.#remainingTimeMs - elapsedMs;
-        }
-        this.#closeTimerPausedAt = Date.now();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtToastComponent, isStandalone: true, selector: "rt-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, totalToasts: { classPropertyName: "totalToasts", publicName: "totalToasts", isSignal: true, isRequired: true, transformFunction: null }, heights: { classPropertyName: "heights", publicName: "heights", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, expandByDefault: { classPropertyName: "expandByDefault", publicName: "expandByDefault", isSignal: true, isRequired: false, transformFunction: null }, interacting: { classPropertyName: "interacting", publicName: "interacting", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { heightAdded: "heightAdded", heightRemoved: "heightRemoved", dismissed: "dismissed" }, host: { attributes: { "role": "status", "aria-atomic": "true" }, properties: { "class": "this.hostModifierClasses", "style": "this.hostStackStyles" }, classAttribute: "rt-toast" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-toast\">\n    @if (icon(); as icon) {\n        <rt-icon rtElem=\"icon\" qa-dataid=\"toast-icon\" size=\"sm\" [name]=\"icon\" />\n    }\n    <div rtElem=\"content\" qa-dataid=\"toast-content\">\n        @if (toast().meta; as meta) {\n            <span rtElem=\"meta\" qa-dataid=\"toast-meta\">{{ meta }}</span>\n        }\n        <span rtElem=\"message\" qa-dataid=\"toast-message\">{{ toast().message }}</span>\n        @if (toast().description; as description) {\n            <span rtElem=\"description\" qa-dataid=\"toast-description\">{{ description }}</span>\n        }\n        @if (toast().action || toast().secondaryAction) {\n            <div rtElem=\"actions\">\n                @if (toast().action; as action) {\n                    <button rtButton rtElem=\"action\" qa-dataid=\"toast-action\" size=\"sm\" type=\"button\" (click)=\"onAction()\">\n                        {{ action.label }}\n                    </button>\n                }\n                @if (toast().secondaryAction; as secondaryAction) {\n                    <button\n                        rtButton\n                        rtElem=\"action\"\n                        qa-dataid=\"toast-secondary-action\"\n                        size=\"sm\"\n                        theme=\"secondary\"\n                        appearance=\"text\"\n                        type=\"button\"\n                        (click)=\"onSecondaryAction()\">\n                        {{ secondaryAction.label }}\n                    </button>\n                }\n            </div>\n        }\n    </div>\n    <rt-icon-button\n        rtElem=\"close\"\n        qa-dataid=\"toast-close\"\n        icon=\"ico-close\"\n        variant=\"ghost\"\n        size=\"sm\"\n        [ariaLabel]=\"t().uiClose\"\n        (clicked)=\"onClose()\" />\n    @if (showProgress()) {\n        <span rtElem=\"progress\" qa-dataid=\"toast-progress\" aria-hidden=\"true\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toast{--rt-toast-radius: var(--rt-radius-md);--rt-toast-border-width: var(--rt-border-width-thin);--rt-toast-shadow: var(--rt-shadow-card);--rt-toast-enter-duration: var(--rt-duration-slow);--rt-toast-shadow-duration: var(--rt-duration-base);--rt-toast-leave-duration: var(--rt-duration-slower);--rt-toast-fade-duration: var(--rt-duration-fast);--rt-toast-severity-color: var(--rt-color-state-info);--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));position:absolute;z-index:var(--z-index);display:flex;width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-space-4);border:var(--rt-toast-border-width) solid var(--rt-toast-border-color, var(--rt-color-border-subtle));border-radius:var(--rt-toast-radius);background:var(--rt-toast-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-toast-shadow);color:var(--rt-toast-color, var(--rt-color-text-primary));font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);gap:var(--rt-space-2);line-height:var(--rt-leading-normal);opacity:0;outline:none;overflow-wrap:anywhere;touch-action:none;transform:var(--y);transition:transform var(--rt-toast-enter-duration),opacity var(--rt-toast-enter-duration),height var(--rt-toast-enter-duration),box-shadow var(--rt-toast-shadow-duration)}.rt-toast:after{position:absolute;bottom:100%;left:0;width:100%;height:calc(var(--gap) + 1px);content:\"\"}.rt-toast>*{transition:opacity var(--rt-toast-enter-duration)}.rt-toast--y--top{--y: translateY(-100%);--lift: 1;top:0}.rt-toast--y--bottom{--y: translateY(100%);--lift: -1;bottom:0}.rt-toast--severity--success{--rt-toast-severity-color: var(--rt-color-state-success)}.rt-toast--severity--warning{--rt-toast-severity-color: var(--rt-color-state-warning)}.rt-toast--severity--danger{--rt-toast-severity-color: var(--rt-color-state-danger)}.rt-toast--filled .rt-toast__description{color:inherit}.rt-toast--filled .rt-toast__icon{color:currentcolor}.rt-toast--filled.rt-toast--severity--info{border-color:var(--rt-toast-filled-info-border-color, var(--rt-color-state-info-bg));background:var(--rt-toast-filled-info-bg, var(--rt-color-state-info-bg));color:var(--rt-toast-filled-info-color, var(--rt-color-state-info))}.rt-toast--filled.rt-toast--severity--success{border-color:var(--rt-toast-filled-success-border-color, var(--rt-color-state-success-bg));background:var(--rt-toast-filled-success-bg, var(--rt-color-state-success-bg));color:var(--rt-toast-filled-success-color, var(--rt-color-state-success))}.rt-toast--filled.rt-toast--severity--warning{border-color:var(--rt-toast-filled-warning-border-color, var(--rt-color-state-warning-bg));background:var(--rt-toast-filled-warning-bg, var(--rt-color-state-warning-bg));color:var(--rt-toast-filled-warning-color, var(--rt-color-state-warning))}.rt-toast--filled.rt-toast--severity--danger{border-color:var(--rt-toast-filled-danger-border-color, var(--rt-color-state-danger-bg));background:var(--rt-toast-filled-danger-bg, var(--rt-color-state-danger-bg));color:var(--rt-toast-filled-danger-color, var(--rt-color-state-danger))}.rt-toast--mounted{--y: translateY(0);opacity:1}.rt-toast:not(.rt-toast--expanded,.rt-toast--front){--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}.rt-toast:not(.rt-toast--expanded,.rt-toast--front)>*{opacity:0}.rt-toast--hidden{opacity:0;pointer-events:none}.rt-toast--mounted.rt-toast--expanded{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}.rt-toast--removed.rt-toast--front{--y: translateY(calc(var(--lift) * -100%));opacity:0}.rt-toast--removed.rt-toast--expanded:not(.rt-toast--front){--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}.rt-toast--removed:not(.rt-toast--front,.rt-toast--expanded){--y: translateY(40%);opacity:0;transition:transform var(--rt-toast-leave-duration),opacity var(--rt-toast-shadow-duration)}.rt-toast--removed:not(.rt-toast--front):before{position:absolute;content:\"\";inset:0;transform:scaleY(2)}.rt-toast__icon{flex-shrink:0;color:var(--rt-toast-icon-color, var(--rt-toast-severity-color))}.rt-toast__progress{position:absolute;bottom:0;animation:rt-toast-progress var(--lifetime) linear forwards;background:var(--rt-toast-progress-color, var(--rt-toast-severity-color));block-size:var(--rt-toast-progress-height, var(--rt-space-0-5));border-end-end-radius:var(--rt-toast-radius);border-end-start-radius:var(--rt-toast-radius);inset-inline:0;transform-origin:left center}.rt-toast--paused .rt-toast__progress{animation-play-state:paused}.rt-toast__content{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-0-5)}.rt-toast__description,.rt-toast__meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular)}.rt-toast__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2);margin-block-start:var(--rt-space-1)}.rt-toast .rt-toast__action{align-self:flex-start}.rt-toast .rt-toast__action:not(.rt-button--text){--rt-btn-bg: var(--rt-toast-action-color, var(--rt-color-action-primary));--rt-btn-bg-hover: var(--rt-toast-action-color, var(--rt-color-action-primary-hover));--rt-btn-bg-active: var(--rt-toast-action-color, var(--rt-color-action-primary-active))}.rt-toast .rt-toast__close{--rt-icon-button-color: var(--rt-toast-close-color, var(--rt-color-text-primary));flex-shrink:0;align-self:flex-start;margin-inline-start:auto;opacity:0;transition:opacity var(--rt-toast-fade-duration)}.rt-toast:hover .rt-toast__close,.rt-toast .rt-toast__close:focus-visible{opacity:1}@media(prefers-reduced-motion){.rt-toast{transition:none}.rt-toast>*{transition:none}}@keyframes rt-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}}\n"], dependencies: [{ kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToastComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-toast', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtButtonDirective, RtIconComponent, RtIconButtonComponent, BlockDirective, ElemDirective], host: {
-                        class: BEM_BLOCK$1,
-                        role: 'status',
-                        'aria-atomic': 'true',
-                    }, template: "<ng-container rtBlock=\"rt-toast\">\n    @if (icon(); as icon) {\n        <rt-icon rtElem=\"icon\" qa-dataid=\"toast-icon\" size=\"sm\" [name]=\"icon\" />\n    }\n    <div rtElem=\"content\" qa-dataid=\"toast-content\">\n        @if (toast().meta; as meta) {\n            <span rtElem=\"meta\" qa-dataid=\"toast-meta\">{{ meta }}</span>\n        }\n        <span rtElem=\"message\" qa-dataid=\"toast-message\">{{ toast().message }}</span>\n        @if (toast().description; as description) {\n            <span rtElem=\"description\" qa-dataid=\"toast-description\">{{ description }}</span>\n        }\n        @if (toast().action || toast().secondaryAction) {\n            <div rtElem=\"actions\">\n                @if (toast().action; as action) {\n                    <button rtButton rtElem=\"action\" qa-dataid=\"toast-action\" size=\"sm\" type=\"button\" (click)=\"onAction()\">\n                        {{ action.label }}\n                    </button>\n                }\n                @if (toast().secondaryAction; as secondaryAction) {\n                    <button\n                        rtButton\n                        rtElem=\"action\"\n                        qa-dataid=\"toast-secondary-action\"\n                        size=\"sm\"\n                        theme=\"secondary\"\n                        appearance=\"text\"\n                        type=\"button\"\n                        (click)=\"onSecondaryAction()\">\n                        {{ secondaryAction.label }}\n                    </button>\n                }\n            </div>\n        }\n    </div>\n    <rt-icon-button\n        rtElem=\"close\"\n        qa-dataid=\"toast-close\"\n        icon=\"ico-close\"\n        variant=\"ghost\"\n        size=\"sm\"\n        [ariaLabel]=\"t().uiClose\"\n        (clicked)=\"onClose()\" />\n    @if (showProgress()) {\n        <span rtElem=\"progress\" qa-dataid=\"toast-progress\" aria-hidden=\"true\"></span>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toast{--rt-toast-radius: var(--rt-radius-md);--rt-toast-border-width: var(--rt-border-width-thin);--rt-toast-shadow: var(--rt-shadow-card);--rt-toast-enter-duration: var(--rt-duration-slow);--rt-toast-shadow-duration: var(--rt-duration-base);--rt-toast-leave-duration: var(--rt-duration-slower);--rt-toast-fade-duration: var(--rt-duration-fast);--rt-toast-severity-color: var(--rt-color-state-info);--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));position:absolute;z-index:var(--z-index);display:flex;width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-space-4);border:var(--rt-toast-border-width) solid var(--rt-toast-border-color, var(--rt-color-border-subtle));border-radius:var(--rt-toast-radius);background:var(--rt-toast-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-toast-shadow);color:var(--rt-toast-color, var(--rt-color-text-primary));font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);gap:var(--rt-space-2);line-height:var(--rt-leading-normal);opacity:0;outline:none;overflow-wrap:anywhere;touch-action:none;transform:var(--y);transition:transform var(--rt-toast-enter-duration),opacity var(--rt-toast-enter-duration),height var(--rt-toast-enter-duration),box-shadow var(--rt-toast-shadow-duration)}.rt-toast:after{position:absolute;bottom:100%;left:0;width:100%;height:calc(var(--gap) + 1px);content:\"\"}.rt-toast>*{transition:opacity var(--rt-toast-enter-duration)}.rt-toast--y--top{--y: translateY(-100%);--lift: 1;top:0}.rt-toast--y--bottom{--y: translateY(100%);--lift: -1;bottom:0}.rt-toast--severity--success{--rt-toast-severity-color: var(--rt-color-state-success)}.rt-toast--severity--warning{--rt-toast-severity-color: var(--rt-color-state-warning)}.rt-toast--severity--danger{--rt-toast-severity-color: var(--rt-color-state-danger)}.rt-toast--filled .rt-toast__description{color:inherit}.rt-toast--filled .rt-toast__icon{color:currentcolor}.rt-toast--filled.rt-toast--severity--info{border-color:var(--rt-toast-filled-info-border-color, var(--rt-color-state-info-bg));background:var(--rt-toast-filled-info-bg, var(--rt-color-state-info-bg));color:var(--rt-toast-filled-info-color, var(--rt-color-state-info))}.rt-toast--filled.rt-toast--severity--success{border-color:var(--rt-toast-filled-success-border-color, var(--rt-color-state-success-bg));background:var(--rt-toast-filled-success-bg, var(--rt-color-state-success-bg));color:var(--rt-toast-filled-success-color, var(--rt-color-state-success))}.rt-toast--filled.rt-toast--severity--warning{border-color:var(--rt-toast-filled-warning-border-color, var(--rt-color-state-warning-bg));background:var(--rt-toast-filled-warning-bg, var(--rt-color-state-warning-bg));color:var(--rt-toast-filled-warning-color, var(--rt-color-state-warning))}.rt-toast--filled.rt-toast--severity--danger{border-color:var(--rt-toast-filled-danger-border-color, var(--rt-color-state-danger-bg));background:var(--rt-toast-filled-danger-bg, var(--rt-color-state-danger-bg));color:var(--rt-toast-filled-danger-color, var(--rt-color-state-danger))}.rt-toast--mounted{--y: translateY(0);opacity:1}.rt-toast:not(.rt-toast--expanded,.rt-toast--front){--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}.rt-toast:not(.rt-toast--expanded,.rt-toast--front)>*{opacity:0}.rt-toast--hidden{opacity:0;pointer-events:none}.rt-toast--mounted.rt-toast--expanded{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}.rt-toast--removed.rt-toast--front{--y: translateY(calc(var(--lift) * -100%));opacity:0}.rt-toast--removed.rt-toast--expanded:not(.rt-toast--front){--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}.rt-toast--removed:not(.rt-toast--front,.rt-toast--expanded){--y: translateY(40%);opacity:0;transition:transform var(--rt-toast-leave-duration),opacity var(--rt-toast-shadow-duration)}.rt-toast--removed:not(.rt-toast--front):before{position:absolute;content:\"\";inset:0;transform:scaleY(2)}.rt-toast__icon{flex-shrink:0;color:var(--rt-toast-icon-color, var(--rt-toast-severity-color))}.rt-toast__progress{position:absolute;bottom:0;animation:rt-toast-progress var(--lifetime) linear forwards;background:var(--rt-toast-progress-color, var(--rt-toast-severity-color));block-size:var(--rt-toast-progress-height, var(--rt-space-0-5));border-end-end-radius:var(--rt-toast-radius);border-end-start-radius:var(--rt-toast-radius);inset-inline:0;transform-origin:left center}.rt-toast--paused .rt-toast__progress{animation-play-state:paused}.rt-toast__content{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-0-5)}.rt-toast__description,.rt-toast__meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular)}.rt-toast__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2);margin-block-start:var(--rt-space-1)}.rt-toast .rt-toast__action{align-self:flex-start}.rt-toast .rt-toast__action:not(.rt-button--text){--rt-btn-bg: var(--rt-toast-action-color, var(--rt-color-action-primary));--rt-btn-bg-hover: var(--rt-toast-action-color, var(--rt-color-action-primary-hover));--rt-btn-bg-active: var(--rt-toast-action-color, var(--rt-color-action-primary-active))}.rt-toast .rt-toast__close{--rt-icon-button-color: var(--rt-toast-close-color, var(--rt-color-text-primary));flex-shrink:0;align-self:flex-start;margin-inline-start:auto;opacity:0;transition:opacity var(--rt-toast-fade-duration)}.rt-toast:hover .rt-toast__close,.rt-toast .rt-toast__close:focus-visible{opacity:1}@media(prefers-reduced-motion){.rt-toast{transition:none}.rt-toast>*{transition:none}}@keyframes rt-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], totalToasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalToasts", required: true }] }], heights: [{ type: i0.Input, args: [{ isSignal: true, alias: "heights", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: true }] }], expandByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandByDefault", required: false }] }], interacting: [{ type: i0.Input, args: [{ isSignal: true, alias: "interacting", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], visibleToasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleToasts", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], heightAdded: [{ type: i0.Output, args: ["heightAdded"] }], heightRemoved: [{ type: i0.Output, args: ["heightRemoved"] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], hostModifierClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStackStyles: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
-
-const BEM_BLOCK = 'rt-toaster';
-const DEFAULT_DURATION_MS = 4000;
+var RtToastComponent = class RtToastComponent {
+	#host;
+	#severityIcons;
+	#mounted;
+	#removed;
+	#offsetBeforeRemove;
+	#initialHeight;
+	#heightIndex;
+	#heightBefore;
+	#offset;
+	#positionY;
+	#timeoutId;
+	#unmountTimeoutId;
+	#remainingTimeMs;
+	#closeTimerStartedAt;
+	#closeTimerPausedAt;
+	get hostModifierClasses() {
+		return {
+			[`${BEM_BLOCK$1}--severity--${this.toast().severity}`]: true,
+			[`${BEM_BLOCK$1}--filled`]: this.toast().filled === true,
+			[`${BEM_BLOCK$1}--y--${this.#positionY()}`]: true,
+			[`${BEM_BLOCK$1}--mounted`]: this.#mounted(),
+			[`${BEM_BLOCK$1}--removed`]: this.#removed(),
+			[`${BEM_BLOCK$1}--front`]: this.index() === 0,
+			[`${BEM_BLOCK$1}--hidden`]: this.index() + 1 > this.visibleToasts(),
+			[`${BEM_BLOCK$1}--expanded`]: this.expanded() || this.expandByDefault() && this.#mounted(),
+			[`${BEM_BLOCK$1}--paused`]: this.paused()
+		};
+	}
+	get hostStackStyles() {
+		return {
+			"--index": `${this.index()}`,
+			"--toasts-before": `${this.index()}`,
+			"--z-index": `${this.totalToasts() - this.index()}`,
+			"--offset": `${this.#removed() ? this.#offsetBeforeRemove() : this.#offset()}px`,
+			"--initial-height": this.expandByDefault() ? "auto" : `${this.#initialHeight()}px`,
+			"--lifetime": `${this.lifetime() ?? 0}ms`
+		};
+	}
+	constructor() {
+		this.#host = inject(ElementRef);
+		this.#severityIcons = inject(RT_TOAST_SEVERITY_ICONS);
+		this.#mounted = signal(false, ...ngDevMode ? [{ debugName: "#mounted" }] : /* istanbul ignore next */ []);
+		this.#removed = signal(false, ...ngDevMode ? [{ debugName: "#removed" }] : /* istanbul ignore next */ []);
+		this.#offsetBeforeRemove = signal(0, ...ngDevMode ? [{ debugName: "#offsetBeforeRemove" }] : /* istanbul ignore next */ []);
+		this.#initialHeight = signal(0, ...ngDevMode ? [{ debugName: "#initialHeight" }] : /* istanbul ignore next */ []);
+		this.#heightIndex = computed(() => this.heights().findIndex((item) => item.toastId === this.toast().id), ...ngDevMode ? [{ debugName: "#heightIndex" }] : /* istanbul ignore next */ []);
+		this.#heightBefore = computed(() => this.heights().reduce((total, item, itemIndex) => itemIndex >= this.#heightIndex() ? total : total + item.height, 0), ...ngDevMode ? [{ debugName: "#heightBefore" }] : /* istanbul ignore next */ []);
+		this.#offset = computed(() => Math.round(this.#heightIndex() * 14 + this.#heightBefore()), ...ngDevMode ? [{ debugName: "#offset" }] : /* istanbul ignore next */ []);
+		this.#positionY = computed(() => this.position().startsWith("top") ? "top" : "bottom", ...ngDevMode ? [{ debugName: "#positionY" }] : /* istanbul ignore next */ []);
+		this.#remainingTimeMs = 0;
+		this.#closeTimerStartedAt = 0;
+		this.#closeTimerPausedAt = 0;
+		this.t = inject(RT_KIT_LABELS);
+		this.icon = computed(() => {
+			const icon = this.toast().icon;
+			return icon === void 0 ? this.#severityIcons[this.toast().severity] : icon;
+		}, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+		this.lifetime = computed(() => {
+			const duration = this.toast().duration;
+			return duration === void 0 ? this.duration() : duration;
+		}, ...ngDevMode ? [{ debugName: "lifetime" }] : /* istanbul ignore next */ []);
+		this.showProgress = computed(() => this.toast().progress === true && this.lifetime() !== null, ...ngDevMode ? [{ debugName: "showProgress" }] : /* istanbul ignore next */ []);
+		this.paused = computed(() => this.expanded() || this.interacting(), ...ngDevMode ? [{ debugName: "paused" }] : /* istanbul ignore next */ []);
+		this.toast = input.required(...ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []);
+		this.index = input.required(...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+		this.totalToasts = input.required(...ngDevMode ? [{ debugName: "totalToasts" }] : /* istanbul ignore next */ []);
+		this.heights = input.required(...ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []);
+		this.expanded = input.required({
+			...ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.expandByDefault = input(false, {
+			...ngDevMode ? { debugName: "expandByDefault" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.interacting = input(false, {
+			...ngDevMode ? { debugName: "interacting" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.position = input("bottom-right", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+		this.visibleToasts = input(3, ...ngDevMode ? [{ debugName: "visibleToasts" }] : /* istanbul ignore next */ []);
+		this.duration = input(4e3, ...ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []);
+		this.heightAdded = output();
+		this.heightRemoved = output();
+		this.dismissed = output();
+		effect((onCleanup) => {
+			if (!this.#mounted() || this.#removed() || this.lifetime() === null) return;
+			if (this.paused()) this.#pauseTimer();
+			else this.#startTimer();
+			onCleanup(() => clearTimeout(this.#timeoutId));
+		});
+		effect(() => {
+			if (this.#mounted() && this.toast().replaced === true) this.#deleteToast("replaced");
+		});
+	}
+	ngAfterViewInit() {
+		this.#remainingTimeMs = this.lifetime() ?? 0;
+		const height = this.#host.nativeElement.getBoundingClientRect().height;
+		this.#initialHeight.set(height);
+		this.heightAdded.emit({
+			toastId: this.toast().id,
+			height
+		});
+		this.#mounted.set(true);
+	}
+	ngOnDestroy() {
+		clearTimeout(this.#timeoutId);
+		clearTimeout(this.#unmountTimeoutId);
+	}
+	onAction() {
+		this.toast().action?.handler();
+		this.#deleteToast(null);
+	}
+	onSecondaryAction() {
+		this.toast().secondaryAction?.handler();
+		this.#deleteToast(null);
+	}
+	onClose() {
+		this.#deleteToast("close");
+	}
+	#deleteToast(reason) {
+		if (this.#removed()) return;
+		this.#removed.set(true);
+		if (reason !== null) this.toast().onDismiss?.(reason);
+		this.#offsetBeforeRemove.set(this.#offset());
+		this.heightRemoved.emit(this.toast().id);
+		this.#unmountTimeoutId = setTimeout(() => this.dismissed.emit(this.toast().id), UNMOUNT_DELAY_MS);
+	}
+	#startTimer() {
+		this.#closeTimerStartedAt = Date.now();
+		this.#timeoutId = setTimeout(() => this.#deleteToast("timeout"), this.#remainingTimeMs);
+	}
+	#pauseTimer() {
+		if (this.#closeTimerPausedAt < this.#closeTimerStartedAt) {
+			const elapsedMs = Date.now() - this.#closeTimerStartedAt;
+			this.#remainingTimeMs = this.#remainingTimeMs - elapsedMs;
+		}
+		this.#closeTimerPausedAt = Date.now();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtToastComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtToastComponent,
+			isStandalone: true,
+			selector: "rt-toast",
+			inputs: {
+				toast: {
+					classPropertyName: "toast",
+					publicName: "toast",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				index: {
+					classPropertyName: "index",
+					publicName: "index",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				totalToasts: {
+					classPropertyName: "totalToasts",
+					publicName: "totalToasts",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				heights: {
+					classPropertyName: "heights",
+					publicName: "heights",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				expanded: {
+					classPropertyName: "expanded",
+					publicName: "expanded",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				expandByDefault: {
+					classPropertyName: "expandByDefault",
+					publicName: "expandByDefault",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				interacting: {
+					classPropertyName: "interacting",
+					publicName: "interacting",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				position: {
+					classPropertyName: "position",
+					publicName: "position",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				visibleToasts: {
+					classPropertyName: "visibleToasts",
+					publicName: "visibleToasts",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				duration: {
+					classPropertyName: "duration",
+					publicName: "duration",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				heightAdded: "heightAdded",
+				heightRemoved: "heightRemoved",
+				dismissed: "dismissed"
+			},
+			host: {
+				attributes: {
+					"role": "status",
+					"aria-atomic": "true"
+				},
+				properties: {
+					"class": "this.hostModifierClasses",
+					"style": "this.hostStackStyles"
+				},
+				classAttribute: "rt-toast"
+			},
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-toast\">\n    @if (icon(); as icon) {\n        <rt-icon rtElem=\"icon\" qa-dataid=\"toast-icon\" size=\"sm\" [name]=\"icon\" />\n    }\n    <div rtElem=\"content\" qa-dataid=\"toast-content\">\n        @if (toast().meta; as meta) {\n            <span rtElem=\"meta\" qa-dataid=\"toast-meta\">{{ meta }}</span>\n        }\n        <span rtElem=\"message\" qa-dataid=\"toast-message\">{{ toast().message }}</span>\n        @if (toast().description; as description) {\n            <span rtElem=\"description\" qa-dataid=\"toast-description\">{{ description }}</span>\n        }\n        @if (toast().action || toast().secondaryAction) {\n            <div rtElem=\"actions\">\n                @if (toast().action; as action) {\n                    <button rtButton rtElem=\"action\" qa-dataid=\"toast-action\" size=\"sm\" type=\"button\" (click)=\"onAction()\">\n                        {{ action.label }}\n                    </button>\n                }\n                @if (toast().secondaryAction; as secondaryAction) {\n                    <button\n                        rtButton\n                        rtElem=\"action\"\n                        qa-dataid=\"toast-secondary-action\"\n                        size=\"sm\"\n                        theme=\"secondary\"\n                        appearance=\"text\"\n                        type=\"button\"\n                        (click)=\"onSecondaryAction()\">\n                        {{ secondaryAction.label }}\n                    </button>\n                }\n            </div>\n        }\n    </div>\n    <rt-icon-button\n        rtElem=\"close\"\n        qa-dataid=\"toast-close\"\n        icon=\"ico-close\"\n        variant=\"ghost\"\n        size=\"sm\"\n        [ariaLabel]=\"t().uiClose\"\n        (clicked)=\"onClose()\" />\n    @if (showProgress()) {\n        <span rtElem=\"progress\" qa-dataid=\"toast-progress\" aria-hidden=\"true\"></span>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toast{--rt-toast-radius: var(--rt-radius-md);--rt-toast-border-width: var(--rt-border-width-thin);--rt-toast-shadow: var(--rt-shadow-card);--rt-toast-enter-duration: var(--rt-duration-slow);--rt-toast-shadow-duration: var(--rt-duration-base);--rt-toast-leave-duration: var(--rt-duration-slower);--rt-toast-fade-duration: var(--rt-duration-fast);--rt-toast-severity-color: var(--rt-color-state-info);--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));position:absolute;z-index:var(--z-index);display:flex;width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-space-4);border:var(--rt-toast-border-width) solid var(--rt-toast-border-color, var(--rt-color-border-subtle));border-radius:var(--rt-toast-radius);background:var(--rt-toast-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-toast-shadow);color:var(--rt-toast-color, var(--rt-color-text-primary));font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);gap:var(--rt-space-2);line-height:var(--rt-leading-normal);opacity:0;outline:none;overflow-wrap:anywhere;touch-action:none;transform:var(--y);transition:transform var(--rt-toast-enter-duration),opacity var(--rt-toast-enter-duration),height var(--rt-toast-enter-duration),box-shadow var(--rt-toast-shadow-duration)}.rt-toast:after{position:absolute;bottom:100%;left:0;width:100%;height:calc(var(--gap) + 1px);content:\"\"}.rt-toast>*{transition:opacity var(--rt-toast-enter-duration)}.rt-toast--y--top{--y: translateY(-100%);--lift: 1;top:0}.rt-toast--y--bottom{--y: translateY(100%);--lift: -1;bottom:0}.rt-toast--severity--success{--rt-toast-severity-color: var(--rt-color-state-success)}.rt-toast--severity--warning{--rt-toast-severity-color: var(--rt-color-state-warning)}.rt-toast--severity--danger{--rt-toast-severity-color: var(--rt-color-state-danger)}.rt-toast--filled .rt-toast__description{color:inherit}.rt-toast--filled .rt-toast__icon{color:currentcolor}.rt-toast--filled.rt-toast--severity--info{border-color:var(--rt-toast-filled-info-border-color, var(--rt-color-state-info-bg));background:var(--rt-toast-filled-info-bg, var(--rt-color-state-info-bg));color:var(--rt-toast-filled-info-color, var(--rt-color-state-info))}.rt-toast--filled.rt-toast--severity--success{border-color:var(--rt-toast-filled-success-border-color, var(--rt-color-state-success-bg));background:var(--rt-toast-filled-success-bg, var(--rt-color-state-success-bg));color:var(--rt-toast-filled-success-color, var(--rt-color-state-success))}.rt-toast--filled.rt-toast--severity--warning{border-color:var(--rt-toast-filled-warning-border-color, var(--rt-color-state-warning-bg));background:var(--rt-toast-filled-warning-bg, var(--rt-color-state-warning-bg));color:var(--rt-toast-filled-warning-color, var(--rt-color-state-warning))}.rt-toast--filled.rt-toast--severity--danger{border-color:var(--rt-toast-filled-danger-border-color, var(--rt-color-state-danger-bg));background:var(--rt-toast-filled-danger-bg, var(--rt-color-state-danger-bg));color:var(--rt-toast-filled-danger-color, var(--rt-color-state-danger))}.rt-toast--mounted{--y: translateY(0);opacity:1}.rt-toast:not(.rt-toast--expanded,.rt-toast--front){--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}.rt-toast:not(.rt-toast--expanded,.rt-toast--front)>*{opacity:0}.rt-toast--hidden{opacity:0;pointer-events:none}.rt-toast--mounted.rt-toast--expanded{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}.rt-toast--removed.rt-toast--front{--y: translateY(calc(var(--lift) * -100%));opacity:0}.rt-toast--removed.rt-toast--expanded:not(.rt-toast--front){--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}.rt-toast--removed:not(.rt-toast--front,.rt-toast--expanded){--y: translateY(40%);opacity:0;transition:transform var(--rt-toast-leave-duration),opacity var(--rt-toast-shadow-duration)}.rt-toast--removed:not(.rt-toast--front):before{position:absolute;content:\"\";inset:0;transform:scaleY(2)}.rt-toast__icon{flex-shrink:0;color:var(--rt-toast-icon-color, var(--rt-toast-severity-color))}.rt-toast__progress{position:absolute;bottom:0;animation:rt-toast-progress var(--lifetime) linear forwards;background:var(--rt-toast-progress-color, var(--rt-toast-severity-color));block-size:var(--rt-toast-progress-height, var(--rt-space-0-5));border-end-end-radius:var(--rt-toast-radius);border-end-start-radius:var(--rt-toast-radius);inset-inline:0;transform-origin:left center}.rt-toast--paused .rt-toast__progress{animation-play-state:paused}.rt-toast__content{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-0-5)}.rt-toast__description,.rt-toast__meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular)}.rt-toast__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2);margin-block-start:var(--rt-space-1)}.rt-toast .rt-toast__action{align-self:flex-start}.rt-toast .rt-toast__action:not(.rt-button--text){--rt-btn-bg: var(--rt-toast-action-color, var(--rt-color-action-primary));--rt-btn-bg-hover: var(--rt-toast-action-color, var(--rt-color-action-primary-hover));--rt-btn-bg-active: var(--rt-toast-action-color, var(--rt-color-action-primary-active))}.rt-toast .rt-toast__close{--rt-icon-button-color: var(--rt-toast-close-color, var(--rt-color-text-primary));flex-shrink:0;align-self:flex-start;margin-inline-start:auto;opacity:0;transition:opacity var(--rt-toast-fade-duration)}.rt-toast:hover .rt-toast__close,.rt-toast .rt-toast__close:focus-visible{opacity:1}@media(prefers-reduced-motion){.rt-toast{transition:none}.rt-toast>*{transition:none}}@keyframes rt-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtToastComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-toast",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtButtonDirective,
+				RtIconComponent,
+				RtIconButtonComponent,
+				BlockDirective,
+				ElemDirective
+			],
+			host: {
+				class: BEM_BLOCK$1,
+				role: "status",
+				"aria-atomic": "true"
+			},
+			template: "<ng-container rtBlock=\"rt-toast\">\n    @if (icon(); as icon) {\n        <rt-icon rtElem=\"icon\" qa-dataid=\"toast-icon\" size=\"sm\" [name]=\"icon\" />\n    }\n    <div rtElem=\"content\" qa-dataid=\"toast-content\">\n        @if (toast().meta; as meta) {\n            <span rtElem=\"meta\" qa-dataid=\"toast-meta\">{{ meta }}</span>\n        }\n        <span rtElem=\"message\" qa-dataid=\"toast-message\">{{ toast().message }}</span>\n        @if (toast().description; as description) {\n            <span rtElem=\"description\" qa-dataid=\"toast-description\">{{ description }}</span>\n        }\n        @if (toast().action || toast().secondaryAction) {\n            <div rtElem=\"actions\">\n                @if (toast().action; as action) {\n                    <button rtButton rtElem=\"action\" qa-dataid=\"toast-action\" size=\"sm\" type=\"button\" (click)=\"onAction()\">\n                        {{ action.label }}\n                    </button>\n                }\n                @if (toast().secondaryAction; as secondaryAction) {\n                    <button\n                        rtButton\n                        rtElem=\"action\"\n                        qa-dataid=\"toast-secondary-action\"\n                        size=\"sm\"\n                        theme=\"secondary\"\n                        appearance=\"text\"\n                        type=\"button\"\n                        (click)=\"onSecondaryAction()\">\n                        {{ secondaryAction.label }}\n                    </button>\n                }\n            </div>\n        }\n    </div>\n    <rt-icon-button\n        rtElem=\"close\"\n        qa-dataid=\"toast-close\"\n        icon=\"ico-close\"\n        variant=\"ghost\"\n        size=\"sm\"\n        [ariaLabel]=\"t().uiClose\"\n        (clicked)=\"onClose()\" />\n    @if (showProgress()) {\n        <span rtElem=\"progress\" qa-dataid=\"toast-progress\" aria-hidden=\"true\"></span>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toast{--rt-toast-radius: var(--rt-radius-md);--rt-toast-border-width: var(--rt-border-width-thin);--rt-toast-shadow: var(--rt-shadow-card);--rt-toast-enter-duration: var(--rt-duration-slow);--rt-toast-shadow-duration: var(--rt-duration-base);--rt-toast-leave-duration: var(--rt-duration-slower);--rt-toast-fade-duration: var(--rt-duration-fast);--rt-toast-severity-color: var(--rt-color-state-info);--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));position:absolute;z-index:var(--z-index);display:flex;width:100%;box-sizing:border-box;align-items:center;padding:var(--rt-space-4);border:var(--rt-toast-border-width) solid var(--rt-toast-border-color, var(--rt-color-border-subtle));border-radius:var(--rt-toast-radius);background:var(--rt-toast-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-toast-shadow);color:var(--rt-toast-color, var(--rt-color-text-primary));font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);gap:var(--rt-space-2);line-height:var(--rt-leading-normal);opacity:0;outline:none;overflow-wrap:anywhere;touch-action:none;transform:var(--y);transition:transform var(--rt-toast-enter-duration),opacity var(--rt-toast-enter-duration),height var(--rt-toast-enter-duration),box-shadow var(--rt-toast-shadow-duration)}.rt-toast:after{position:absolute;bottom:100%;left:0;width:100%;height:calc(var(--gap) + 1px);content:\"\"}.rt-toast>*{transition:opacity var(--rt-toast-enter-duration)}.rt-toast--y--top{--y: translateY(-100%);--lift: 1;top:0}.rt-toast--y--bottom{--y: translateY(100%);--lift: -1;bottom:0}.rt-toast--severity--success{--rt-toast-severity-color: var(--rt-color-state-success)}.rt-toast--severity--warning{--rt-toast-severity-color: var(--rt-color-state-warning)}.rt-toast--severity--danger{--rt-toast-severity-color: var(--rt-color-state-danger)}.rt-toast--filled .rt-toast__description{color:inherit}.rt-toast--filled .rt-toast__icon{color:currentcolor}.rt-toast--filled.rt-toast--severity--info{border-color:var(--rt-toast-filled-info-border-color, var(--rt-color-state-info-bg));background:var(--rt-toast-filled-info-bg, var(--rt-color-state-info-bg));color:var(--rt-toast-filled-info-color, var(--rt-color-state-info))}.rt-toast--filled.rt-toast--severity--success{border-color:var(--rt-toast-filled-success-border-color, var(--rt-color-state-success-bg));background:var(--rt-toast-filled-success-bg, var(--rt-color-state-success-bg));color:var(--rt-toast-filled-success-color, var(--rt-color-state-success))}.rt-toast--filled.rt-toast--severity--warning{border-color:var(--rt-toast-filled-warning-border-color, var(--rt-color-state-warning-bg));background:var(--rt-toast-filled-warning-bg, var(--rt-color-state-warning-bg));color:var(--rt-toast-filled-warning-color, var(--rt-color-state-warning))}.rt-toast--filled.rt-toast--severity--danger{border-color:var(--rt-toast-filled-danger-border-color, var(--rt-color-state-danger-bg));background:var(--rt-toast-filled-danger-bg, var(--rt-color-state-danger-bg));color:var(--rt-toast-filled-danger-color, var(--rt-color-state-danger))}.rt-toast--mounted{--y: translateY(0);opacity:1}.rt-toast:not(.rt-toast--expanded,.rt-toast--front){--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}.rt-toast:not(.rt-toast--expanded,.rt-toast--front)>*{opacity:0}.rt-toast--hidden{opacity:0;pointer-events:none}.rt-toast--mounted.rt-toast--expanded{--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}.rt-toast--removed.rt-toast--front{--y: translateY(calc(var(--lift) * -100%));opacity:0}.rt-toast--removed.rt-toast--expanded:not(.rt-toast--front){--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}.rt-toast--removed:not(.rt-toast--front,.rt-toast--expanded){--y: translateY(40%);opacity:0;transition:transform var(--rt-toast-leave-duration),opacity var(--rt-toast-shadow-duration)}.rt-toast--removed:not(.rt-toast--front):before{position:absolute;content:\"\";inset:0;transform:scaleY(2)}.rt-toast__icon{flex-shrink:0;color:var(--rt-toast-icon-color, var(--rt-toast-severity-color))}.rt-toast__progress{position:absolute;bottom:0;animation:rt-toast-progress var(--lifetime) linear forwards;background:var(--rt-toast-progress-color, var(--rt-toast-severity-color));block-size:var(--rt-toast-progress-height, var(--rt-space-0-5));border-end-end-radius:var(--rt-toast-radius);border-end-start-radius:var(--rt-toast-radius);inset-inline:0;transform-origin:left center}.rt-toast--paused .rt-toast__progress{animation-play-state:paused}.rt-toast__content{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-0-5)}.rt-toast__description,.rt-toast__meta{color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-regular)}.rt-toast__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2);margin-block-start:var(--rt-space-1)}.rt-toast .rt-toast__action{align-self:flex-start}.rt-toast .rt-toast__action:not(.rt-button--text){--rt-btn-bg: var(--rt-toast-action-color, var(--rt-color-action-primary));--rt-btn-bg-hover: var(--rt-toast-action-color, var(--rt-color-action-primary-hover));--rt-btn-bg-active: var(--rt-toast-action-color, var(--rt-color-action-primary-active))}.rt-toast .rt-toast__close{--rt-icon-button-color: var(--rt-toast-close-color, var(--rt-color-text-primary));flex-shrink:0;align-self:flex-start;margin-inline-start:auto;opacity:0;transition:opacity var(--rt-toast-fade-duration)}.rt-toast:hover .rt-toast__close,.rt-toast .rt-toast__close:focus-visible{opacity:1}@media(prefers-reduced-motion){.rt-toast{transition:none}.rt-toast>*{transition:none}}@keyframes rt-toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		toast: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toast",
+				required: true
+			}]
+		}],
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: true
+			}]
+		}],
+		totalToasts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "totalToasts",
+				required: true
+			}]
+		}],
+		heights: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heights",
+				required: true
+			}]
+		}],
+		expanded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expanded",
+				required: true
+			}]
+		}],
+		expandByDefault: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandByDefault",
+				required: false
+			}]
+		}],
+		interacting: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "interacting",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		visibleToasts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibleToasts",
+				required: false
+			}]
+		}],
+		duration: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "duration",
+				required: false
+			}]
+		}],
+		heightAdded: [{
+			type: i0.Output,
+			args: ["heightAdded"]
+		}],
+		heightRemoved: [{
+			type: i0.Output,
+			args: ["heightRemoved"]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}],
+		hostModifierClasses: [{
+			type: HostBinding,
+			args: ["class"]
+		}],
+		hostStackStyles: [{
+			type: HostBinding,
+			args: ["style"]
+		}]
+	}
+});
+const BEM_BLOCK = "rt-toaster";
+const DEFAULT_DURATION_MS = 4e3;
 const DEFAULT_VISIBLE_TOASTS = 3;
-class RtToasterComponent {
-    #notificationBus;
-    #toastCounter;
-    get hostModifierClasses() {
-        return {
-            [`${BEM_BLOCK}--y--${this.positionY()}`]: true,
-            [`${BEM_BLOCK}--x--${this.positionX()}`]: true,
-        };
-    }
-    get hostStackStyles() {
-        return {
-            '--front-toast-height': `${this.heights()[0]?.height ?? 0}px`,
-            '--gap': `${RT_TOASTER_GAP_PX}px`,
-        };
-    }
-    constructor() {
-        this.#notificationBus = inject(NotificationBus);
-        this.ariaLabel = rtKitLabel('uiNotifications');
-        this.#toastCounter = 0;
-        this.toasts = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
-        this.heights = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []));
-        this.expanded = linkedSignal({ ...(ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {}), source: this.toasts,
-            computation: (toasts) => toasts.length < 1 });
-        this.interacting = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "interacting" }] : /* istanbul ignore next */ []));
-        this.positionY = computed(() => this.position().startsWith('top') ? 'top' : 'bottom', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "positionY" }] : /* istanbul ignore next */ []));
-        this.positionX = computed(() => {
-            if (this.position().endsWith('left')) {
-                return 'left';
-            }
-            return this.position().endsWith('center') ? 'center' : 'right';
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "positionX" }] : /* istanbul ignore next */ []));
-        this.position = input('bottom-right', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-        this.duration = input(DEFAULT_DURATION_MS, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        this.visibleToasts = input(DEFAULT_VISIBLE_TOASTS, { ...(ngDevMode ? { debugName: "visibleToasts" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /** `replace` — новый тост уводит прежние их же анимацией ухода, а не копится стопкой. */
-        this.mode = input('stack', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-        this.expand = input(false, { ...(ngDevMode ? { debugName: "expand" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.#notificationBus
-            .onEmit()
-            .pipe(takeUntilDestroyed())
-            .subscribe((event) => this.#addToast(event));
-    }
-    onStackEnter() {
-        if (this.toasts().length > 0) {
-            this.expanded.set(true);
-        }
-    }
-    onStackLeave() {
-        if (!this.interacting()) {
-            this.expanded.set(false);
-        }
-    }
-    onStackPointerDown() {
-        this.interacting.set(true);
-    }
-    onStackPointerUp() {
-        this.interacting.set(false);
-    }
-    onHeightAdded(height) {
-        this.heights.update((items) => this.#sortHeights([height, ...items.filter((item) => item.toastId !== height.toastId)]));
-    }
-    onHeightRemoved(toastId) {
-        this.heights.update((items) => items.filter((item) => item.toastId !== toastId));
-    }
-    onDismissed(toastId) {
-        this.onHeightRemoved(toastId);
-        this.toasts.update((items) => items.filter((item) => item.id !== toastId));
-    }
-    #addToast(event) {
-        this.#toastCounter += 1;
-        const toast = {
-            id: this.#toastCounter,
-            severity: event.payload.severity,
-            message: event.payload.message,
-            description: event.payload.description,
-            meta: event.payload.meta,
-            action: event.payload.action,
-            secondaryAction: event.payload.secondaryAction,
-            filled: event.payload.filled,
-            duration: event.payload.duration,
-            progress: event.payload.progress,
-            icon: event.payload.icon,
-            onDismiss: event.payload.onDismiss,
-        };
-        this.toasts.update((items) => [
-            toast,
-            ...(this.mode() === 'replace' ? items.map((item) => this.#replaced(item)) : items),
-        ]);
-    }
-    #replaced(toast) {
-        return toast.replaced ? toast : { ...toast, replaced: true };
-    }
-    #sortHeights(items) {
-        const order = this.toasts().map((toast) => toast.id);
-        return [...items].sort((left, right) => order.indexOf(left.toastId) - order.indexOf(right.toastId));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtToasterComponent, isStandalone: true, selector: "rt-toaster", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region" }, listeners: { "mouseenter": "onStackEnter()", "mousemove": "onStackEnter()", "mouseleave": "onStackLeave()", "pointerdown": "onStackPointerDown()", "pointerup": "onStackPointerUp()" }, properties: { "attr.aria-label": "ariaLabel()", "class": "this.hostModifierClasses", "style": "this.hostStackStyles" }, classAttribute: "rt-toaster" }, ngImport: i0, template: "@for (item of toasts(); track item.id) {\n    <rt-toast\n        qa-dataid=\"toast\"\n        [toast]=\"item\"\n        [index]=\"$index\"\n        [totalToasts]=\"toasts().length\"\n        [heights]=\"heights()\"\n        [expanded]=\"expanded()\"\n        [expandByDefault]=\"expand()\"\n        [interacting]=\"interacting()\"\n        [position]=\"position()\"\n        [visibleToasts]=\"visibleToasts()\"\n        [duration]=\"duration()\"\n        (heightAdded)=\"onHeightAdded($event)\"\n        (heightRemoved)=\"onHeightRemoved($event)\"\n        (dismissed)=\"onDismissed($event)\" />\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toaster{--width: 356px;--toaster-offset: 32px;--rt-toaster-z-index: var(--rt-z-sticky);position:fixed;z-index:var(--rt-toaster-z-index);width:var(--width);box-sizing:border-box;padding:0;margin:0;outline:none}.rt-toaster--x--right{right:max(var(--toaster-offset),env(safe-area-inset-right))}.rt-toaster--x--left{left:max(var(--toaster-offset),env(safe-area-inset-left))}.rt-toaster--x--center{left:50%;transform:translate(-50%)}.rt-toaster--y--top{top:max(var(--toaster-offset),env(safe-area-inset-top))}.rt-toaster--y--bottom{bottom:max(var(--toaster-offset),env(safe-area-inset-bottom))}@media(width<=480px){.rt-toaster{--toaster-offset: 16px;right:var(--toaster-offset);left:var(--toaster-offset);width:auto}.rt-toaster--x--center{transform:none}}}\n"], dependencies: [{ kind: "component", type: RtToastComponent, selector: "rt-toast", inputs: ["toast", "index", "totalToasts", "heights", "expanded", "expandByDefault", "interacting", "position", "visibleToasts", "duration"], outputs: ["heightAdded", "heightRemoved", "dismissed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtToasterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-toaster', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtToastComponent], host: {
-                        class: BEM_BLOCK,
-                        role: 'region',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '(mouseenter)': 'onStackEnter()',
-                        '(mousemove)': 'onStackEnter()',
-                        '(mouseleave)': 'onStackLeave()',
-                        '(pointerdown)': 'onStackPointerDown()',
-                        '(pointerup)': 'onStackPointerUp()',
-                    }, template: "@for (item of toasts(); track item.id) {\n    <rt-toast\n        qa-dataid=\"toast\"\n        [toast]=\"item\"\n        [index]=\"$index\"\n        [totalToasts]=\"toasts().length\"\n        [heights]=\"heights()\"\n        [expanded]=\"expanded()\"\n        [expandByDefault]=\"expand()\"\n        [interacting]=\"interacting()\"\n        [position]=\"position()\"\n        [visibleToasts]=\"visibleToasts()\"\n        [duration]=\"duration()\"\n        (heightAdded)=\"onHeightAdded($event)\"\n        (heightRemoved)=\"onHeightRemoved($event)\"\n        (dismissed)=\"onDismissed($event)\" />\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toaster{--width: 356px;--toaster-offset: 32px;--rt-toaster-z-index: var(--rt-z-sticky);position:fixed;z-index:var(--rt-toaster-z-index);width:var(--width);box-sizing:border-box;padding:0;margin:0;outline:none}.rt-toaster--x--right{right:max(var(--toaster-offset),env(safe-area-inset-right))}.rt-toaster--x--left{left:max(var(--toaster-offset),env(safe-area-inset-left))}.rt-toaster--x--center{left:50%;transform:translate(-50%)}.rt-toaster--y--top{top:max(var(--toaster-offset),env(safe-area-inset-top))}.rt-toaster--y--bottom{bottom:max(var(--toaster-offset),env(safe-area-inset-bottom))}@media(width<=480px){.rt-toaster{--toaster-offset: 16px;right:var(--toaster-offset);left:var(--toaster-offset);width:auto}.rt-toaster--x--center{transform:none}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], visibleToasts: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleToasts", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], expand: [{ type: i0.Input, args: [{ isSignal: true, alias: "expand", required: false }] }], hostModifierClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], hostStackStyles: [{
-                type: HostBinding,
-                args: ['style']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtToasterComponent = class RtToasterComponent {
+	#notificationBus;
+	#toastCounter;
+	get hostModifierClasses() {
+		return {
+			[`${BEM_BLOCK}--y--${this.positionY()}`]: true,
+			[`${BEM_BLOCK}--x--${this.positionX()}`]: true
+		};
+	}
+	get hostStackStyles() {
+		return {
+			"--front-toast-height": `${this.heights()[0]?.height ?? 0}px`,
+			"--gap": `14px`
+		};
+	}
+	constructor() {
+		this.#notificationBus = inject(NotificationBus);
+		this.ariaLabel = rtKitLabel("uiNotifications");
+		this.#toastCounter = 0;
+		this.toasts = signal([], ...ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []);
+		this.heights = signal([], ...ngDevMode ? [{ debugName: "heights" }] : /* istanbul ignore next */ []);
+		this.expanded = linkedSignal({
+			...ngDevMode ? { debugName: "expanded" } : /* istanbul ignore next */ {},
+			source: this.toasts,
+			computation: (toasts) => toasts.length < 1
+		});
+		this.interacting = signal(false, ...ngDevMode ? [{ debugName: "interacting" }] : /* istanbul ignore next */ []);
+		this.positionY = computed(() => this.position().startsWith("top") ? "top" : "bottom", ...ngDevMode ? [{ debugName: "positionY" }] : /* istanbul ignore next */ []);
+		this.positionX = computed(() => {
+			if (this.position().endsWith("left")) return "left";
+			return this.position().endsWith("center") ? "center" : "right";
+		}, ...ngDevMode ? [{ debugName: "positionX" }] : /* istanbul ignore next */ []);
+		this.position = input("bottom-right", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+		this.duration = input(DEFAULT_DURATION_MS, {
+			...ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.visibleToasts = input(DEFAULT_VISIBLE_TOASTS, {
+			...ngDevMode ? { debugName: "visibleToasts" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.mode = input("stack", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+		this.expand = input(false, {
+			...ngDevMode ? { debugName: "expand" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.#notificationBus.onEmit().pipe(takeUntilDestroyed()).subscribe((event) => this.#addToast(event));
+	}
+	onStackEnter() {
+		if (this.toasts().length > 0) this.expanded.set(true);
+	}
+	onStackLeave() {
+		if (!this.interacting()) this.expanded.set(false);
+	}
+	onStackPointerDown() {
+		this.interacting.set(true);
+	}
+	onStackPointerUp() {
+		this.interacting.set(false);
+	}
+	onHeightAdded(height) {
+		this.heights.update((items) => this.#sortHeights([height, ...items.filter((item) => item.toastId !== height.toastId)]));
+	}
+	onHeightRemoved(toastId) {
+		this.heights.update((items) => items.filter((item) => item.toastId !== toastId));
+	}
+	onDismissed(toastId) {
+		this.onHeightRemoved(toastId);
+		this.toasts.update((items) => items.filter((item) => item.id !== toastId));
+	}
+	#addToast(event) {
+		this.#toastCounter += 1;
+		const toast = {
+			id: this.#toastCounter,
+			severity: event.payload.severity,
+			message: event.payload.message,
+			description: event.payload.description,
+			meta: event.payload.meta,
+			action: event.payload.action,
+			secondaryAction: event.payload.secondaryAction,
+			filled: event.payload.filled,
+			duration: event.payload.duration,
+			progress: event.payload.progress,
+			icon: event.payload.icon,
+			onDismiss: event.payload.onDismiss
+		};
+		this.toasts.update((items) => [toast, ...this.mode() === "replace" ? items.map((item) => this.#replaced(item)) : items]);
+	}
+	#replaced(toast) {
+		return toast.replaced ? toast : {
+			...toast,
+			replaced: true
+		};
+	}
+	#sortHeights(items) {
+		const order = this.toasts().map((toast) => toast.id);
+		return [...items].sort((left, right) => order.indexOf(left.toastId) - order.indexOf(right.toastId));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtToasterComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtToasterComponent,
+			isStandalone: true,
+			selector: "rt-toaster",
+			inputs: {
+				position: {
+					classPropertyName: "position",
+					publicName: "position",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				duration: {
+					classPropertyName: "duration",
+					publicName: "duration",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				visibleToasts: {
+					classPropertyName: "visibleToasts",
+					publicName: "visibleToasts",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				mode: {
+					classPropertyName: "mode",
+					publicName: "mode",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				expand: {
+					classPropertyName: "expand",
+					publicName: "expand",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				attributes: { "role": "region" },
+				listeners: {
+					"mouseenter": "onStackEnter()",
+					"mousemove": "onStackEnter()",
+					"mouseleave": "onStackLeave()",
+					"pointerdown": "onStackPointerDown()",
+					"pointerup": "onStackPointerUp()"
+				},
+				properties: {
+					"attr.aria-label": "ariaLabel()",
+					"class": "this.hostModifierClasses",
+					"style": "this.hostStackStyles"
+				},
+				classAttribute: "rt-toaster"
+			},
+			ngImport: i0,
+			template: "@for (item of toasts(); track item.id) {\n    <rt-toast\n        qa-dataid=\"toast\"\n        [toast]=\"item\"\n        [index]=\"$index\"\n        [totalToasts]=\"toasts().length\"\n        [heights]=\"heights()\"\n        [expanded]=\"expanded()\"\n        [expandByDefault]=\"expand()\"\n        [interacting]=\"interacting()\"\n        [position]=\"position()\"\n        [visibleToasts]=\"visibleToasts()\"\n        [duration]=\"duration()\"\n        (heightAdded)=\"onHeightAdded($event)\"\n        (heightRemoved)=\"onHeightRemoved($event)\"\n        (dismissed)=\"onDismissed($event)\" />\n}\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toaster{--width: 356px;--toaster-offset: 32px;--rt-toaster-z-index: var(--rt-z-sticky);position:fixed;z-index:var(--rt-toaster-z-index);width:var(--width);box-sizing:border-box;padding:0;margin:0;outline:none}.rt-toaster--x--right{right:max(var(--toaster-offset),env(safe-area-inset-right))}.rt-toaster--x--left{left:max(var(--toaster-offset),env(safe-area-inset-left))}.rt-toaster--x--center{left:50%;transform:translate(-50%)}.rt-toaster--y--top{top:max(var(--toaster-offset),env(safe-area-inset-top))}.rt-toaster--y--bottom{bottom:max(var(--toaster-offset),env(safe-area-inset-bottom))}@media(width<=480px){.rt-toaster{--toaster-offset: 16px;right:var(--toaster-offset);left:var(--toaster-offset);width:auto}.rt-toaster--x--center{transform:none}}}\n"],
+			dependencies: [{
+				kind: "component",
+				type: RtToastComponent,
+				selector: "rt-toast",
+				inputs: [
+					"toast",
+					"index",
+					"totalToasts",
+					"heights",
+					"expanded",
+					"expandByDefault",
+					"interacting",
+					"position",
+					"visibleToasts",
+					"duration"
+				],
+				outputs: [
+					"heightAdded",
+					"heightRemoved",
+					"dismissed"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtToasterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-toaster",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [RtToastComponent],
+			host: {
+				class: BEM_BLOCK,
+				role: "region",
+				"[attr.aria-label]": "ariaLabel()",
+				"(mouseenter)": "onStackEnter()",
+				"(mousemove)": "onStackEnter()",
+				"(mouseleave)": "onStackLeave()",
+				"(pointerdown)": "onStackPointerDown()",
+				"(pointerup)": "onStackPointerUp()"
+			},
+			template: "@for (item of toasts(); track item.id) {\n    <rt-toast\n        qa-dataid=\"toast\"\n        [toast]=\"item\"\n        [index]=\"$index\"\n        [totalToasts]=\"toasts().length\"\n        [heights]=\"heights()\"\n        [expanded]=\"expanded()\"\n        [expandByDefault]=\"expand()\"\n        [interacting]=\"interacting()\"\n        [position]=\"position()\"\n        [visibleToasts]=\"visibleToasts()\"\n        [duration]=\"duration()\"\n        (heightAdded)=\"onHeightAdded($event)\"\n        (heightRemoved)=\"onHeightRemoved($event)\"\n        (dismissed)=\"onDismissed($event)\" />\n}\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-toaster{--width: 356px;--toaster-offset: 32px;--rt-toaster-z-index: var(--rt-z-sticky);position:fixed;z-index:var(--rt-toaster-z-index);width:var(--width);box-sizing:border-box;padding:0;margin:0;outline:none}.rt-toaster--x--right{right:max(var(--toaster-offset),env(safe-area-inset-right))}.rt-toaster--x--left{left:max(var(--toaster-offset),env(safe-area-inset-left))}.rt-toaster--x--center{left:50%;transform:translate(-50%)}.rt-toaster--y--top{top:max(var(--toaster-offset),env(safe-area-inset-top))}.rt-toaster--y--bottom{bottom:max(var(--toaster-offset),env(safe-area-inset-bottom))}@media(width<=480px){.rt-toaster{--toaster-offset: 16px;right:var(--toaster-offset);left:var(--toaster-offset);width:auto}.rt-toaster--x--center{transform:none}}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		duration: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "duration",
+				required: false
+			}]
+		}],
+		visibleToasts: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibleToasts",
+				required: false
+			}]
+		}],
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		expand: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expand",
+				required: false
+			}]
+		}],
+		hostModifierClasses: [{
+			type: HostBinding,
+			args: ["class"]
+		}],
+		hostStackStyles: [{
+			type: HostBinding,
+			args: ["style"]
+		}]
+	}
+});
 export { RT_TOASTER_GAP_PX, RT_TOAST_SEVERITY_ICONS, RtToastComponent, RtToasterComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-toast.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-toast.mjs.map