@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

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

@@ -0,0 +1,702 @@
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, computed, input, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, booleanAttribute, afterRenderEffect, untracked, InjectionToken, Injector, RendererFactory2, Injectable, output } from '@angular/core';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RtSpinnerComponent } from '@rt-tools/ui-kit-v2/spinner';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { rtKitLabel, rtKitDefault, materialPresetClassesOfFocus, carryThemeScopeOfFocus, RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
+import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, take, mergeMap, map, merge, takeUntil, EMPTY, Observable } from 'rxjs';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtSkeletonWrapperComponent } from '@rt-tools/ui-kit-v2/skeleton-wrapper';
+import { RtTagComponent } from '@rt-tools/ui-kit-v2/tag';
+import { RtDialogRef, RtDialogComponent } from '@rt-tools/ui-kit-v2/dialog';
+
+function errorAsText(error) {
+    try {
+        return JSON.stringify(error) ?? String(error);
+    }
+    catch {
+        return String(error);
+    }
+}
+/**
+ * Текст, который кнопка блока ошибки кладёт в буфер обмена.
+ *
+ * Вид повторяет первый кит — `Error time: <дата>_<время>;Error info: <JSON>`: кто разбирал такие
+ * копии раньше, читает их так же. Ошибку с петлёй внутри `JSON.stringify` не пишет и бросает —
+ * тогда в копию идёт её строковый вид, и нажатие не падает.
+ */
+function rtAsideErrorCopyText(error, now) {
+    return `Error time: ${now.toDateString()}_${now.toTimeString()};Error info: ${errorAsText(error)}`;
+}
+
+const BEM_BLOCK$4 = 'rt-aside-error-box';
+/** Сколько кнопка держит «скопировано» — секунда, как у первого кита. */
+const CONFIRM_DELAY_MS = 1000;
+/**
+ * Блок ошибки запроса боковой панели: надпись и кнопка, которая кладёт в буфер обмена время и
+ * ошибку. Перенос `rtui-aside-error-box` первого кита без Material.
+ *
+ * Обычно его рисует сама панель по входу `requestError`; отдельно он нужен приложению, которое
+ * показывает ошибку в другом месте.
+ */
+class RtAsideErrorBoxComponent {
+    #clipboard;
+    #destroyRef;
+    #confirmTimer;
+    #copyLabel;
+    #copiedLabel;
+    constructor() {
+        this.#clipboard = inject(Clipboard);
+        this.#destroyRef = inject(DestroyRef);
+        this.#confirmTimer = null;
+        this.#copyLabel = rtKitLabel('asideCopyErrorInfo');
+        this.#copiedLabel = rtKitLabel('uiCopied');
+        this.title = rtKitLabel('asideRequestError');
+        this.copied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+        this.buttonLabel = computed(() => (this.copied() ? this.#copiedLabel() : this.#copyLabel()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+        this.buttonIcon = computed(() => (this.copied() ? 'check' : null), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "buttonIcon" }] : /* istanbul ignore next */ []));
+        /** Ошибка, пришедшая от неудавшегося запроса: уходит в копию как JSON. */
+        this.error = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.#destroyRef.onDestroy(() => this.#clearTimer());
+    }
+    onCopy() {
+        this.#clipboard.copy(rtAsideErrorCopyText(this.error(), new Date()));
+        this.copied.set(true);
+        this.#clearTimer();
+        this.#confirmTimer = setTimeout(() => this.copied.set(false), CONFIRM_DELAY_MS);
+    }
+    #clearTimer() {
+        if (this.#confirmTimer !== null) {
+            clearTimeout(this.#confirmTimer);
+            this.#confirmTimer = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideErrorBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtAsideErrorBoxComponent, isStandalone: true, selector: "rt-aside-error-box", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "rt-aside-error-box" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-aside-error-box\">\n    <div rtElem=\"frame\" qa-dataid=\"aside-error-box\">\n        <span rtElem=\"title\" qa-dataid=\"aside-error-title\">{{ title() }}</span>\n\n        <button\n            rtButton\n            rtElem=\"copy\"\n            qa-dataid=\"aside-error-copy\"\n            type=\"button\"\n            theme=\"secondary\"\n            appearance=\"text\"\n            size=\"sm\"\n            [label]=\"buttonLabel()\"\n            [icon]=\"buttonIcon()\"\n            [attr.aria-label]=\"buttonLabel()\"\n            (click)=\"onCopy()\"></button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-error-box{--rt-aside-error-box-min-height: 2rem;--rt-aside-error-box-border-width: 1px;--rt-aside-error-box-radius: var(--rt-radius-md);display:block;min-width:0}.rt-aside-error-box__frame{display:flex;min-width:0;min-height:var(--rt-aside-error-box-min-height);align-items:center;justify-content:space-between;padding:var(--rt-space-2);border:var(--rt-aside-error-box-border-width) solid var(--rt-color-state-danger);border-radius:var(--rt-aside-error-box-radius);gap:var(--rt-space-2)}.rt-aside-error-box__title{min-width:0;color:var(--rt-color-state-danger);font-size:var(--rt-text-md);overflow-wrap:anywhere}.rt-aside-error-box__copy{flex-shrink:0}}\n"], dependencies: [{ kind: "directive", type: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { 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: RtAsideErrorBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-aside-error-box', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtButtonDirective, BlockDirective, ElemDirective], host: {
+                        class: BEM_BLOCK$4,
+                    }, template: "<ng-container rtBlock=\"rt-aside-error-box\">\n    <div rtElem=\"frame\" qa-dataid=\"aside-error-box\">\n        <span rtElem=\"title\" qa-dataid=\"aside-error-title\">{{ title() }}</span>\n\n        <button\n            rtButton\n            rtElem=\"copy\"\n            qa-dataid=\"aside-error-copy\"\n            type=\"button\"\n            theme=\"secondary\"\n            appearance=\"text\"\n            size=\"sm\"\n            [label]=\"buttonLabel()\"\n            [icon]=\"buttonIcon()\"\n            [attr.aria-label]=\"buttonLabel()\"\n            (click)=\"onCopy()\"></button>\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-error-box{--rt-aside-error-box-min-height: 2rem;--rt-aside-error-box-border-width: 1px;--rt-aside-error-box-radius: var(--rt-radius-md);display:block;min-width:0}.rt-aside-error-box__frame{display:flex;min-width:0;min-height:var(--rt-aside-error-box-min-height);align-items:center;justify-content:space-between;padding:var(--rt-space-2);border:var(--rt-aside-error-box-border-width) solid var(--rt-color-state-danger);border-radius:var(--rt-aside-error-box-radius);gap:var(--rt-space-2)}.rt-aside-error-box__title{min-width:0;color:var(--rt-color-state-danger);font-size:var(--rt-text-md);overflow-wrap:anywhere}.rt-aside-error-box__copy{flex-shrink:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }] } });
+
+const BEM_BLOCK$3 = 'rt-aside';
+/**
+ * Презентационный styled-frame для side-sheet.
+ *
+ * Видимость / backdrop / scroll-block / ESC / slide-in анимация — НЕ внутренняя
+ * ответственность компонента. Это обеспечивает CDK Overlay через
+ * `RtAsideService.open()`. rt-aside здесь — стилизованная "рамка" с size-вариантами
+ * и тремя слотами: `rt-aside-header`, содержимое и `rt-aside-footer`.
+ *
+ * Содержимое лежит в одной зоне `.rt-aside__content` — она и держит инсет панели,
+ * и прокручивается. Пока зоны не было, каждый корневой узел содержимого получал
+ * инсет и прокрутку сам по себе: разделы делили высоту панели между собой, а
+ * обводка фокуса поля срезалась краем такого мини-скроллера.
+ *
+ * Семантика — `role="complementary"` (mirror rt-dialog имеет `role="dialog"`,
+ * aside — другая роль, side-sheet не обязательно блокирующий).
+ *
+ * `ViewEncapsulation.None` — стили префиксованы `.rt-aside`, чтобы соседние
+ * rt-aside-header / rt-aside-footer работали с одним BEM-блоком без
+ * cross-encapsulation хака.
+ */
+class RtAsideComponent {
+    #focusTrapFactory;
+    #document;
+    #focusTrap;
+    #restoreFocusTo;
+    constructor() {
+        this.#focusTrapFactory = inject(FocusTrapFactory);
+        this.#document = inject(DOCUMENT);
+        this.#focusTrap = null;
+        this.#restoreFocusTo = null;
+        this.frame = viewChild.required('frame', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+        this.hasRequestError = computed(() => this.requestError() !== null && this.requestError() !== undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRequestError" }] : /* istanbul ignore next */ []));
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.contentLayout = input('default', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentLayout" }] : /* istanbul ignore next */ []));
+        this.width = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Ошибка неудавшегося запроса. Пока она есть, между шапкой и содержимым стоит блок ошибки с
+         * кнопкой копирования; `null` и `undefined` — ошибки нет, любое другое значение её показывает.
+         */
+        this.requestError = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requestError" }] : /* istanbul ignore next */ []));
+        /**
+         * Держать Tab внутри панели. При включении фокус уходит на `[cdkFocusInitial]` или первый
+         * элемент под Tab, а когда панель уходит или вход гаснет, возвращается туда, где стоял.
+         */
+        this.trapFocus = input(false, { ...(ngDevMode ? { debugName: "trapFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Идёт запрос: панель накрыта слоем с крутилкой и помечена занятой. */
+        this.pending = input(false, { ...(ngDevMode ? { debugName: "pending" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        // После отрисовки: до неё у рамки нет ни полей, ни кнопок, и ловить фокус не на чем.
+        afterRenderEffect(() => {
+            const enabled = this.trapFocus();
+            const frame = this.frame().nativeElement;
+            untracked(() => (enabled ? this.#holdFocus(frame) : this.#releaseFocus()));
+        });
+        inject(DestroyRef).onDestroy(() => this.#releaseFocus());
+    }
+    #holdFocus(frame) {
+        if (this.#focusTrap !== null) {
+            return;
+        }
+        const focused = this.#document.activeElement;
+        this.#restoreFocusTo = focused instanceof HTMLElement ? focused : null;
+        this.#focusTrap = this.#focusTrapFactory.create(frame);
+        void this.#focusTrap.focusInitialElementWhenReady();
+    }
+    #releaseFocus() {
+        if (this.#focusTrap === null) {
+            return;
+        }
+        this.#focusTrap.destroy();
+        this.#focusTrap = null;
+        const restoreTo = this.#restoreFocusTo;
+        this.#restoreFocusTo = null;
+        if (restoreTo?.isConnected === true) {
+            restoreTo.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtAsideComponent, isStandalone: true, selector: "rt-aside", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, contentLayout: { classPropertyName: "contentLayout", publicName: "contentLayout", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, requestError: { classPropertyName: "requestError", publicName: "requestError", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-aside" }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #frame\n    rtBlock=\"rt-aside\"\n    qa-dataid=\"aside\"\n    role=\"complementary\"\n    [rtMod]=\"{ size: size(), content: contentLayout() }\"\n    [style.--rt-aside-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-busy]=\"pending() || null\">\n    <ng-content select=\"rt-aside-header\" />\n\n    @if (hasRequestError()) {\n        <rt-aside-error-box rtElem=\"error\" [error]=\"requestError()\" />\n    }\n\n    <div rtElem=\"content\" qa-dataid=\"aside-content\">\n        <ng-content />\n    </div>\n\n    <ng-content select=\"rt-aside-footer\" />\n\n    @if (pending()) {\n        <div rtElem=\"pending\" qa-dataid=\"aside-pending\">\n            <rt-spinner />\n        </div>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);transition:opacity var(--rt-aside-animation-duration) ease}:is(.rt-preset-material,[data-preset=material]).cdk-overlay-backdrop.rt-aside-backdrop,[data-preset=material] .cdk-overlay-backdrop.rt-aside-backdrop{--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 0}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}}.cdk-overlay-backdrop.rt-aside-backdrop{opacity:0;pointer-events:none}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}@layer rt-kit.components{:root{--rt-aside-width-sm: 400px;--rt-aside-width-md: 540px;--rt-aside-width-lg: 720px;--rt-aside-inset: var(--rt-space-lg);--rt-aside-content-gap: var(--rt-space-md);--rt-aside-narrow-width: 100dvw}rt-aside{display:contents}rt-aside .rt-aside{position:relative;display:flex;width:var(--rt-aside-width, var(--rt-aside-width-md));min-width:0;max-width:100%;height:100%;flex-direction:column;padding:0;border:none;background:var(--rt-aside-bg, var(--rt-color-bg-surface));color:var(--rt-color-text-primary)}rt-aside .rt-aside>rt-aside-header,rt-aside .rt-aside>rt-aside-footer{min-width:0;flex-shrink:0}rt-aside .rt-aside__error{min-width:0;flex-shrink:0;margin-block:var(--rt-aside-error-margin-block, 0);padding-inline:var(--rt-aside-inset)}rt-aside .rt-aside__content{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;padding:var(--rt-aside-content-inset, var(--rt-aside-inset));gap:var(--rt-aside-content-gap);overflow-y:auto;overscroll-behavior:contain}rt-aside .rt-aside__pending{position:absolute;z-index:var(--rt-z-sticky);display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--rt-color-bg-surface) 60%,transparent);inset:0}rt-aside .rt-aside--size--sm{width:var(--rt-aside-width, var(--rt-aside-width-sm))}rt-aside .rt-aside--size--md{width:var(--rt-aside-width, var(--rt-aside-width-md))}rt-aside .rt-aside--size--lg{width:var(--rt-aside-width, var(--rt-aside-width-lg))}rt-aside .rt-aside--content--tabs .rt-aside__content{overflow:hidden;padding-block-end:0}rt-aside .rt-aside--content--tabs rt-tabs{min-height:0;flex:1 1 auto;margin-inline:calc(-1 * var(--rt-aside-inset))}rt-aside .rt-aside--content--tabs .rt-tabs__header{padding-inline:var(--rt-aside-inset)}rt-aside .rt-aside--content--tabs .rt-tabs__content{padding-bottom:var(--rt-aside-inset);padding-inline:var(--rt-aside-inset)}@media(width<=768px){rt-aside .rt-aside,rt-aside .rt-aside--size--sm,rt-aside .rt-aside--size--md,rt-aside .rt-aside--size--lg{width:var(--rt-aside-narrow-width);max-width:var(--rt-aside-narrow-width)}}}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtAsideErrorBoxComponent, selector: "rt-aside-error-box", inputs: ["error"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-aside', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BlockDirective, ElemDirective, ModDirective, RtAsideErrorBoxComponent, RtSpinnerComponent], host: {
+                        class: BEM_BLOCK$3,
+                    }, template: "<div\n    #frame\n    rtBlock=\"rt-aside\"\n    qa-dataid=\"aside\"\n    role=\"complementary\"\n    [rtMod]=\"{ size: size(), content: contentLayout() }\"\n    [style.--rt-aside-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-busy]=\"pending() || null\">\n    <ng-content select=\"rt-aside-header\" />\n\n    @if (hasRequestError()) {\n        <rt-aside-error-box rtElem=\"error\" [error]=\"requestError()\" />\n    }\n\n    <div rtElem=\"content\" qa-dataid=\"aside-content\">\n        <ng-content />\n    </div>\n\n    <ng-content select=\"rt-aside-footer\" />\n\n    @if (pending()) {\n        <div rtElem=\"pending\" qa-dataid=\"aside-pending\">\n            <rt-spinner />\n        </div>\n    }\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{:root{--rt-aside-animation-duration: .2s;--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 5px}.cdk-overlay-backdrop.rt-aside-backdrop{-webkit-backdrop-filter:blur(var(--rt-aside-backdrop-blur));backdrop-filter:blur(var(--rt-aside-backdrop-blur));background:var(--rt-aside-backdrop-bg);transition:opacity var(--rt-aside-animation-duration) ease}:is(.rt-preset-material,[data-preset=material]).cdk-overlay-backdrop.rt-aside-backdrop,[data-preset=material] .cdk-overlay-backdrop.rt-aside-backdrop{--rt-aside-backdrop-bg: var(--rt-color-bg-overlay);--rt-aside-backdrop-blur: 0}.rt-aside-overlay{height:100dvh;transition:transform var(--rt-aside-animation-duration) ease}.rt-aside-overlay.rt-aside-overlay--entering{transition:none}.rt-aside-overlay--position-right.rt-aside-overlay--entering,.rt-aside-overlay--position-right.rt-aside-overlay--leaving{transform:translate(100%)}.rt-aside-overlay--position-left.rt-aside-overlay--entering,.rt-aside-overlay--position-left.rt-aside-overlay--leaving{transform:translate(-100%)}.rt-aside-overlay--position-right.rt-aside-overlay--open,.rt-aside-overlay--position-left.rt-aside-overlay--open{transform:translate(0)}@media(width<=768px){.rt-aside-overlay{overflow:hidden;width:100dvw;max-width:100dvw}}@media(prefers-reduced-motion:reduce){.rt-aside-overlay{transition:none}}}.cdk-overlay-backdrop.rt-aside-backdrop{opacity:0;pointer-events:none}.cdk-overlay-backdrop.rt-aside-backdrop.rt-aside-backdrop--visible{opacity:1;pointer-events:auto}.rt-aside-overlay:not(.rt-aside-overlay--open){pointer-events:none}@layer rt-kit.components{:root{--rt-aside-width-sm: 400px;--rt-aside-width-md: 540px;--rt-aside-width-lg: 720px;--rt-aside-inset: var(--rt-space-lg);--rt-aside-content-gap: var(--rt-space-md);--rt-aside-narrow-width: 100dvw}rt-aside{display:contents}rt-aside .rt-aside{position:relative;display:flex;width:var(--rt-aside-width, var(--rt-aside-width-md));min-width:0;max-width:100%;height:100%;flex-direction:column;padding:0;border:none;background:var(--rt-aside-bg, var(--rt-color-bg-surface));color:var(--rt-color-text-primary)}rt-aside .rt-aside>rt-aside-header,rt-aside .rt-aside>rt-aside-footer{min-width:0;flex-shrink:0}rt-aside .rt-aside__error{min-width:0;flex-shrink:0;margin-block:var(--rt-aside-error-margin-block, 0);padding-inline:var(--rt-aside-inset)}rt-aside .rt-aside__content{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;padding:var(--rt-aside-content-inset, var(--rt-aside-inset));gap:var(--rt-aside-content-gap);overflow-y:auto;overscroll-behavior:contain}rt-aside .rt-aside__pending{position:absolute;z-index:var(--rt-z-sticky);display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--rt-color-bg-surface) 60%,transparent);inset:0}rt-aside .rt-aside--size--sm{width:var(--rt-aside-width, var(--rt-aside-width-sm))}rt-aside .rt-aside--size--md{width:var(--rt-aside-width, var(--rt-aside-width-md))}rt-aside .rt-aside--size--lg{width:var(--rt-aside-width, var(--rt-aside-width-lg))}rt-aside .rt-aside--content--tabs .rt-aside__content{overflow:hidden;padding-block-end:0}rt-aside .rt-aside--content--tabs rt-tabs{min-height:0;flex:1 1 auto;margin-inline:calc(-1 * var(--rt-aside-inset))}rt-aside .rt-aside--content--tabs .rt-tabs__header{padding-inline:var(--rt-aside-inset)}rt-aside .rt-aside--content--tabs .rt-tabs__content{padding-bottom:var(--rt-aside-inset);padding-inline:var(--rt-aside-inset)}@media(width<=768px){rt-aside .rt-aside,rt-aside .rt-aside--size--sm,rt-aside .rt-aside--size--md,rt-aside .rt-aside--size--lg{width:var(--rt-aside-narrow-width);max-width:var(--rt-aside-narrow-width)}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { frame: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], contentLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLayout", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], requestError: [{ type: i0.Input, args: [{ isSignal: true, alias: "requestError", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }] } });
+
+/** Длительность slide-out анимации; синхронизирована с `--rt-aside-animation-duration` в SCSS. */
+const LEAVE_ANIMATION_DURATION_MS = 200;
+/**
+ * Хэндл к программно открытой side-sheet (через `RtAsideService.open()`).
+ *
+ * Контент-компонент инжектит `RtAsideRef` и закрывает aside через `.close(result?)`.
+ * Родитель ждёт результата через `.afterClosed()`.
+ *
+ * Generic `<T>` — тип результата `close(result)`. Дефолт `unknown` — если результат
+ * не нужен, оставляй generic пустым.
+ *
+ * Lifecycle close():
+ *  1. Race-guard `#isClosing` гарантирует один эмит даже при двойном вызове.
+ *  2. Снимает `rt-aside-overlay--open` и ставит `rt-aside-overlay--leaving` на host —
+ *     CSS-transition (200ms) играет slide-out.
+ *  3. Эмиттит result в `afterClosed()` СРАЗУ (consumer не ждёт анимацию).
+ *  4. Через `setTimeout(200ms)` зовёт `overlayRef.dispose()` — overlay убран после анимации.
+ *
+ * Слой, снятый без `close()` — переходом по адресу (`disposeOnNavigation`) или уничтожением
+ * хозяина, — тоже завершает `afterClosed()`: подписчик получает `undefined`.
+ *
+ * @example
+ * \`\`\`ts
+ * // в контент-компоненте
+ * private readonly asideRef = inject(RtAsideRef<{ saved: boolean }>);
+ * onSave(): void { this.asideRef.close({ saved: true }); }
+ *
+ * // в родителе
+ * asideService.open(EditAsideComponent).afterClosed().subscribe(result => {...});
+ * \`\`\`
+ */
+class RtAsideRef {
+    #overlayRef;
+    #renderer;
+    #afterClosedSource;
+    #closeRequestsSource;
+    #isClosing;
+    /**
+     * `closeRequestsSource` наполняет служба: она слушает жесты и знает, отказала ли в них панель.
+     * Хэндл только завершает поток вместе с панелью.
+     */
+    constructor(overlayRef, renderer, closeRequestsSource = new Subject()) {
+        /**
+         * Runtime-флаг, блокирующий close() через ESC / backdrop click.
+         *
+         * Default `false`. Включай (`asideRef.disableClose.set(true)`) на время
+         * in-flight submit'а, чтобы юзер не потерял введённые в форму данные.
+         * Программный `close(result)` гейтом не задет — он всегда закрывает.
+         */
+        this.disableClose = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disableClose" }] : /* istanbul ignore next */ []));
+        this.#afterClosedSource = new Subject();
+        this.#isClosing = false;
+        this.#overlayRef = overlayRef;
+        this.#renderer = renderer;
+        this.#closeRequestsSource = closeRequestsSource;
+        this.#overlayRef
+            .detachments()
+            .pipe(take(1))
+            .subscribe(() => this.#finish(undefined));
+    }
+    /** Закрывает overlay со slide-out анимацией; эмиттит result в `afterClosed()` синхронно. */
+    close(result) {
+        if (this.#isClosing) {
+            return;
+        }
+        this.#isClosing = true;
+        this.#renderer.removeClass(this.#overlayRef.overlayElement, 'rt-aside-overlay--open');
+        this.#renderer.addClass(this.#overlayRef.overlayElement, 'rt-aside-overlay--leaving');
+        // Эмитим результат сразу — consumer не ждёт slide-out.
+        this.#emit(result);
+        // Дефер dispose'а на длительность анимации — overlay остаётся в DOM,
+        // пока CSS-transition не отыграет slide-out.
+        setTimeout(() => {
+            this.#overlayRef.dispose();
+        }, LEAVE_ANIMATION_DURATION_MS);
+    }
+    /** Эмиттит один раз — результат `close(result)` или `undefined` при снятом слое — и завершается. */
+    afterClosed() {
+        return this.#afterClosedSource.asObservable();
+    }
+    /**
+     * Жесты закрытия, в которых панель отказала: `Escape` и нажатие по подложке под
+     * `disableClose()` или выключенные настройкой. Завершается вместе с панелью.
+     */
+    closeRequests() {
+        return this.#closeRequestsSource.asObservable();
+    }
+    /** Слой снят без `close()`: анимации играть не на чем, остаётся отдать результат. */
+    #finish(result) {
+        if (this.#isClosing) {
+            return;
+        }
+        this.#isClosing = true;
+        this.#emit(result);
+    }
+    #emit(result) {
+        this.#afterClosedSource.next(result);
+        this.#afterClosedSource.complete();
+        this.#closeRequestsSource.complete();
+    }
+}
+
+/**
+ * Injection token для передачи данных в side-sheet, открытую через `RtAsideService.open()`.
+ *
+ * Пользовательский компонент-контент aside'а инжектит токен и получает данные,
+ * переданные в `IRtAsideConfig.data`. Тип значения задаётся generic'ом — `inject(RT_ASIDE_DATA)`
+ * вернёт `unknown`, прокастуй через `inject(RT_ASIDE_DATA) as MyDataType` ИЛИ
+ * объяви токен с конкретным generic'ом в feature-либе.
+ *
+ * Намеренно отдельный токен от `RT_DIALOG_DATA`, чтобы type-checker не путал контексты
+ * (rt-dialog vs rt-aside) — оба сервиса могут существовать в одном DI-дереве.
+ *
+ * @example
+ * \`\`\`ts
+ * @Component({...})
+ * export class GuestProfileAsideComponent {
+ *   readonly data = inject(RT_ASIDE_DATA) as { userId: number };
+ * }
+ *
+ * // parent
+ * asideService.open(GuestProfileAsideComponent, { data: { userId: 42 } });
+ * \`\`\`
+ */
+const RT_ASIDE_DATA = new InjectionToken('RT_ASIDE_DATA');
+
+/**
+ * Программный API для открытия side-sheet поверх CDK Overlay.
+ *
+ * Архитектурно зеркалит `RtDialogService`, отличаясь только positionStrategy
+ * (edge-anchored: `right('0')` / `left('0')` + `top('0')`) и slide-in анимацией,
+ * которая триггерится через CSS-классы на overlay host (`Renderer2` инжектится
+ * через `RendererFactory2`, потому что в service нет ComponentRef).
+ *
+ * Lifecycle:
+ *  1. `overlay.create({ panelClass: [..., '--entering'] })` — host получает initial
+ *     CSS-стейт (translateX(±100%)).
+ *  2. `overlayRef.attach(portal)` — контент-компонент монтируется в host.
+ *  3. На следующий paint (`requestAnimationFrame`) сервис снимает `--entering` и
+ *     добавляет `--open` — CSS-transition сделает slide-in.
+ *  4. На `ref.close(result)` ref добавляет `--leaving`, эмиттит result синхронно,
+ *     deferred `dispose()` через 200ms (длительность анимации).
+ *
+ * Альтернатива rt-dialog — для длинных форм / мастеров / side-panels, где
+ * центрированная модалка ощущается тесной. Не предназначено для подтверждений
+ * или коротких диалогов (для этого — `RtDialogService`).
+ *
+ * @example
+ * \`\`\`ts
+ * private readonly asideService = inject(RtAsideService);
+ *
+ * openProfile(userId: number): void {
+ *   const ref = this.asideService.open<GuestProfileAsideComponent, { userId: number }, void>(
+ *     GuestProfileAsideComponent,
+ *     { data: { userId }, position: "right" }
+ *   );
+ *   ref.afterClosed().subscribe(() => this.reloadList());
+ * }
+ *
+ * // контент-компонент
+ * @Component({ ... })
+ * export class GuestProfileAsideComponent {
+ *   readonly data = inject(RT_ASIDE_DATA) as { userId: number };
+ *   readonly #ref = inject(RtAsideRef);
+ *   close(): void { this.#ref.close(); }
+ * }
+ * \`\`\`
+ */
+class RtAsideService {
+    #overlay = inject(Overlay);
+    #injector = inject(Injector);
+    #document = inject(DOCUMENT);
+    // Renderer2 нужен для манипуляции CSS-классами на overlay.hostElement.
+    // В service нет ComponentRef, поэтому Renderer2 берём через factory.
+    #renderer = inject(RendererFactory2).createRenderer(null, null);
+    #openSource = new Subject();
+    /* Закрывает ли `Escape` штору, когда вызов об этом промолчал. Умолчание кита — закрывает;
+       приложению, которому это мешает, иначе пришлось бы писать отказ на каждом вызове, и
+       забытый вызов отличался бы от остальных. */
+    #closeOnEscape = rtKitDefault('aside', (it) => it.closeOnEscape, true);
+    constructor() {
+        // Per-open close-подписки (backdrop / ESC) живут в одном постоянном
+        // конструкторном стриме: open() эмитит контекст открытия, mergeMap
+        // подписывает event-стримы конкретного OverlayRef до его dispose
+        // (`detachments()` терминирует внутренний поток). mergeMap, а не
+        // switchMap — одновременно может быть открыто несколько aside'ов.
+        //
+        // Runtime-guard через asideRef.disableClose() — те же правила, что в
+        // rt-dialog: ESC / backdrop НЕ закрывают overlay, если disableClose=true;
+        // программный ref.close() гейтом не задет.
+        this.#openSource
+            .pipe(mergeMap((openContext) => {
+            // Оба жеста слушаются всегда: отказ в закрытии — тоже ответ, и он уходит в
+            // `closeRequests()` хэндла, будь то `disableClose` или выключенный жест.
+            const backdropClose$ = openContext.overlayRef.backdropClick().pipe(map(() => () => {
+                this.#answerCloseGesture(openContext, 'backdrop', openContext.closeOnBackdropClick);
+            }));
+            const escapeClose$ = openContext.overlayRef.keydownEvents().pipe(map((event) => () => {
+                if (event.key !== 'Escape') {
+                    return;
+                }
+                if (openContext.closeOnEscape) {
+                    event.preventDefault();
+                }
+                this.#answerCloseGesture(openContext, 'escape', openContext.closeOnEscape);
+            }));
+            const ownerClose$ = this.#destroyed(openContext.ownerDestroyRef).pipe(map(() => () => openContext.asideRef.close()));
+            return merge(backdropClose$, escapeClose$, ownerClose$).pipe(takeUntil(openContext.overlayRef.detachments()));
+        }), takeUntilDestroyed())
+            .subscribe((handleCloseIntent) => handleCloseIntent());
+    }
+    open(component, config) {
+        const position = config?.position ?? 'right';
+        const positionStrategy = position === 'right'
+            ? this.#overlay.position().global().right('0').top('0')
+            : this.#overlay.position().global().left('0').top('0');
+        const panelClasses = [
+            'rt-aside-overlay',
+            `rt-aside-overlay--position-${position}`,
+            'rt-aside-overlay--entering',
+            ...materialPresetClassesOfFocus(this.#document),
+        ];
+        const overlayConfig = {
+            positionStrategy,
+            scrollStrategy: this.#overlay.scrollStrategies.block(),
+            hasBackdrop: true,
+            backdropClass: config?.backdropClass ?? 'rt-aside-backdrop',
+            panelClass: config?.panelClass !== undefined ? [...panelClasses, ...this.#toArray(config.panelClass)] : panelClasses,
+            disposeOnNavigation: true,
+        };
+        const overlayRef = this.#overlay.create(overlayConfig);
+        // До attach: содержимое панели может забрать фокус, и кусок темы у кнопки будет потерян.
+        carryThemeScopeOfFocus(overlayRef.overlayElement, this.#document);
+        const closeRequests = new Subject();
+        const asideRef = new RtAsideRef(overlayRef, this.#renderer, closeRequests);
+        // Сами close-подписки объявлены один раз в конструкторе — здесь только
+        // эмит контекста открытия (см. #openSource-стрим).
+        this.#openSource.next({
+            overlayRef,
+            asideRef,
+            closeRequests,
+            ownerDestroyRef: config?.injector?.get(DestroyRef, null) ?? null,
+            closeOnBackdropClick: config?.closeOnBackdropClick !== false,
+            closeOnEscape: config?.closeOnEscape ?? this.#closeOnEscape,
+        });
+        const injector = Injector.create({
+            parent: config?.injector ?? this.#injector,
+            providers: [
+                { provide: RtAsideRef, useValue: asideRef },
+                { provide: RT_ASIDE_DATA, useValue: config?.data ?? null },
+            ],
+        });
+        const portal = new ComponentPortal(component, null, injector);
+        overlayRef.attach(portal);
+        // Slide-in: на следующий paint снимаем --entering и добавляем --open.
+        // CSS transition (см. rt-aside.component.scss) сделает анимацию.
+        // Backdrop default hidden — toggle --visible одновременно со слайдом.
+        requestAnimationFrame(() => {
+            this.#renderer.removeClass(overlayRef.overlayElement, 'rt-aside-overlay--entering');
+            this.#renderer.addClass(overlayRef.overlayElement, 'rt-aside-overlay--open');
+            const backdropEl = overlayRef.backdropElement;
+            if (backdropEl !== null) {
+                this.#renderer.addClass(backdropEl, 'rt-aside-backdrop--visible');
+            }
+        });
+        return asideRef;
+    }
+    /** Жест закрытия: закрывает панель, если жест включён и не держит `disableClose`, иначе сообщает об отказе. */
+    #answerCloseGesture(openContext, gesture, enabled) {
+        if (enabled && !openContext.asideRef.disableClose()) {
+            openContext.asideRef.close();
+            return;
+        }
+        openContext.closeRequests.next(gesture);
+    }
+    /**
+     * Уничтожение хозяина как поток. Отписка — уход панели — снимает слушателя с хозяина, и его
+     * позднее уничтожение панель уже не трогает.
+     */
+    #destroyed(ownerDestroyRef) {
+        if (ownerDestroyRef === null) {
+            return EMPTY;
+        }
+        return new Observable((subscriber) => ownerDestroyRef.onDestroy(() => subscriber.next()));
+    }
+    /** Нормализует `string | string[]` к массиву (panelClass поддерживает оба формата). */
+    #toArray(value) {
+        return Array.isArray(value) ? value : [value];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const BEM_BLOCK$2 = 'rt-aside-header';
+/**
+ * Заголовок side-sheet'а; работает в двух modes:
+ *
+ * 1. **Programmatic** (через `RtAsideService.open()`) — `RtAsideRef` провайдится
+ *    оверлей-инжектором; стрелка «назад» дёргает `asideRef.close()` напрямую,
+ *    consumer подписан на `afterClosed()`.
+ * 2. **Route-driven** (через `[rtContainerRightSidenavPanel]` driver в
+ *    rt-container'е) — `RtAsideRef` НЕ провайдится (overlay принадлежит
+ *    rt-container'у, не RtAsideService). Consumer слушает `(dismiss)` output и
+ *    сам зовёт `panel.close()`.
+ *
+ * Оба пути живут одновременно: `onDismiss()` сперва эмитит output, затем (если
+ * есть) дёргает optional `asideRef.close()`.
+ *
+ * Доменные действия (отклонить / удалить / снять с публикации и т.п.)
+ * проецируются в слот `[asideActions]` как ряд `rt-icon-button` справа от title.
+ *
+ * Слот `[asideHeaderContent]` — строка под заголовком на всю ширину шапки: поиск, вкладки,
+ * сводка. Пустой слот места не занимает.
+ *
+ * `ViewEncapsulation.None` — для единообразия с rt-dialog-header (стили
+ * префиксованы `.rt-aside-header`).
+ *
+ * @example
+ * ```html
+ * <rt-aside-header title="Профиль пользователя" />
+ * <rt-aside-header title="Создание записи" [closable]="false" />
+ * <rt-aside-header title="Детали" (dismiss)="onClose()">
+ *     <rt-icon-button asideActions icon="ico-error" variant="danger"
+ *                     ariaLabel="Отклонить" (clicked)="reject()" />
+ * </rt-aside-header>
+ * ```
+ */
+class RtAsideHeaderComponent {
+    constructor() {
+        this.#asideRef = inject(RtAsideRef, { optional: true });
+        /** Текст заголовка — рендерится в `<h2>`. Null/пустая строка вместе с
+         *  `[loading]=true` показывают skeleton вместо title. */
+        this.t = inject(RT_KIT_LABELS);
+        this.title = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /**
+         * Мелкий приглушённый надзаголовок НАД основным title (контекст действия:
+         * «Создание записи», «Запись № 6»). Null (дефолт) — обычный
+         * однострочный хедер. Overline не участвует в skeleton-режиме — это
+         * статичный текст, известный до загрузки данных.
+         */
+        this.overline = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overline" }] : /* istanbul ignore next */ []));
+        /**
+         * Приглушённая подпись ПОД заголовком: что делается в панели. Null (дефолт) —
+         * строки нет. Как надзаголовок, в skeleton-режиме не участвует.
+         */
+        this.subtitle = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        /**
+         * Ряд бэйджей (`rt-tag`) под заголовком — контекст сущности (статус, метка
+         * записи и т.п.). Пустой массив (дефолт) — ряд не рендерится. Async-данные:
+         * потребитель отдаёт `[]` пока сущность не зарезолвилась.
+         */
+        this.badges = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []));
+        /** Показывать кнопку закрытия в углу заголовка. Дефолт `true`. */
+        this.closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Показывать skeleton вместо title (loading-state aside'а пока данные
+         *  резолвятся через async fasade). Дефолт `false`. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Эмитится при клике по стрелке «назад» — намерение пользователя закрыть
+         * aside (intent, не «закрыто»). Route-driven consumer слушает этот output и
+         * дёргает `panel.close()` сам. Имя `dismiss` вместо `close` — ESLint
+         * `@angular-eslint/no-output-native` блокирует output с именем стандартного
+         * DOM-события (`close`).
+         */
+        this.dismiss = output();
+    }
+    #asideRef;
+    onDismiss() {
+        // Сначала output — route-driven consumer обработает intent.
+        this.dismiss.emit();
+        // Затем (если есть) AsideRef — programmatic mode через RtAsideService.
+        this.#asideRef?.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtAsideHeaderComponent, isStandalone: true, selector: "rt-aside-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, overline: { classPropertyName: "overline", publicName: "overline", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, badges: { classPropertyName: "badges", publicName: "badges", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { classAttribute: "rt-aside-header" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-aside-header\">\n    <header rtElem=\"content\" qa-dataid=\"aside-header\">\n        @if (closable()) {\n            <rt-icon-button\n                rtElem=\"back\"\n                qa-dataid=\"aside-back\"\n                icon=\"arrow-left\"\n                size=\"sm\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiBack\"\n                [tooltip]=\"t().uiBack\"\n                (clicked)=\"onDismiss()\" />\n        }\n\n        <div rtElem=\"heading\">\n            @if (overline(); as overlineText) {\n                <p rtElem=\"overline\" qa-dataid=\"aside-overline\">{{ overlineText }}</p>\n            }\n            <h2 rtElem=\"title\" qa-dataid=\"aside-title\">\n                <rt-skeleton-wrapper width=\"180px\" height=\"20px\" [isLoading]=\"loading()\">\n                    {{ title() }}\n                </rt-skeleton-wrapper>\n            </h2>\n\n            @if (subtitle(); as subtitleText) {\n                <p rtElem=\"subtitle\" qa-dataid=\"aside-subtitle\">{{ subtitleText }}</p>\n            }\n\n            @if (badges().length > 0) {\n                <div rtElem=\"badges\">\n                    @for (badge of badges(); track badge.value) {\n                        @if (badge.href; as href) {\n                            <a rtElem=\"badge-link\" qa-dataid=\"aside-badge-link\" target=\"_blank\" rel=\"noopener\" [href]=\"href\">\n                                <rt-tag\n                                    iconEnd=\"external-link\"\n                                    [value]=\"badge.value\"\n                                    [severity]=\"badge.severity ?? 'neutral'\"\n                                    [appearance]=\"badge.appearance ?? 'solid'\"\n                                    [radius]=\"badge.radius ?? 'md'\"\n                                    [icon]=\"badge.icon ?? null\" />\n                            </a>\n                        } @else {\n                            <rt-tag\n                                [value]=\"badge.value\"\n                                [severity]=\"badge.severity ?? 'neutral'\"\n                                [appearance]=\"badge.appearance ?? 'solid'\"\n                                [radius]=\"badge.radius ?? 'md'\"\n                                [icon]=\"badge.icon ?? null\" />\n                        }\n                    }\n                </div>\n            }\n        </div>\n\n        <div rtElem=\"actions\" qa-dataid=\"aside-actions\">\n            <ng-content select=\"[asideActions]\" />\n        </div>\n    </header>\n\n    <div rtElem=\"row\" qa-dataid=\"aside-header-row\">\n        <ng-content select=\"[asideHeaderContent]\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-header{--rt-aside-header-title-size: var(--rt-text-xl);--rt-aside-header-title-weight: var(--rt-font-weight-bold);--rt-aside-header-subtitle-size: var(--rt-text-sm);--rt-aside-header-gap: var(--rt-space-sm);--rt-aside-header-min-height: auto;padding:var(--rt-aside-header-inset, var(--rt-aside-inset))}.rt-aside-header__content{display:flex;min-width:0;min-height:var(--rt-aside-header-min-height);align-items:center;gap:var(--rt-aside-header-gap)}.rt-aside-header__back{flex-shrink:0}.rt-aside-header__heading{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-0-5)}.rt-aside-header__overline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-aside-header__title{overflow:hidden;min-width:0;margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-aside-header-title-size);font-weight:var(--rt-aside-header-title-weight);line-height:var(--rt-aside-header-title-leading, inherit)}.rt-aside-header__title>rt-skeleton-wrapper{display:block;overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-aside-header__subtitle{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-aside-header-subtitle-size);line-height:var(--rt-leading-snug)}.rt-aside-header__badges{display:flex;flex-wrap:wrap;margin-top:var(--rt-space-1);gap:var(--rt-space-xs)}.rt-aside-header__badge-link{display:inline-flex;cursor:pointer;text-decoration:none}.rt-aside-header__badge-link:hover{opacity:.85}.rt-aside-header__row{min-width:0;margin-top:var(--rt-aside-header-gap)}.rt-aside-header__row:empty{display:none}.rt-aside-header__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--rt-space-xs)}.rt-aside-header__actions:empty{display:none}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtSkeletonWrapperComponent, selector: "rt-skeleton-wrapper", inputs: ["width", "height", "shape", "size", "radius", "animation", "isLoading"] }, { kind: "component", type: RtTagComponent, selector: "rt-tag", inputs: ["value", "severity", "size", "appearance", "icon", "iconEnd", "closable"], outputs: ["closed"] }, { 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: RtAsideHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-aside-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        RtSkeletonWrapperComponent,
+                        RtTagComponent,
+                        BlockDirective,
+                        ElemDirective,
+                    ], host: {
+                        class: BEM_BLOCK$2,
+                    }, template: "<ng-container rtBlock=\"rt-aside-header\">\n    <header rtElem=\"content\" qa-dataid=\"aside-header\">\n        @if (closable()) {\n            <rt-icon-button\n                rtElem=\"back\"\n                qa-dataid=\"aside-back\"\n                icon=\"arrow-left\"\n                size=\"sm\"\n                variant=\"ghost\"\n                [ariaLabel]=\"t().uiBack\"\n                [tooltip]=\"t().uiBack\"\n                (clicked)=\"onDismiss()\" />\n        }\n\n        <div rtElem=\"heading\">\n            @if (overline(); as overlineText) {\n                <p rtElem=\"overline\" qa-dataid=\"aside-overline\">{{ overlineText }}</p>\n            }\n            <h2 rtElem=\"title\" qa-dataid=\"aside-title\">\n                <rt-skeleton-wrapper width=\"180px\" height=\"20px\" [isLoading]=\"loading()\">\n                    {{ title() }}\n                </rt-skeleton-wrapper>\n            </h2>\n\n            @if (subtitle(); as subtitleText) {\n                <p rtElem=\"subtitle\" qa-dataid=\"aside-subtitle\">{{ subtitleText }}</p>\n            }\n\n            @if (badges().length > 0) {\n                <div rtElem=\"badges\">\n                    @for (badge of badges(); track badge.value) {\n                        @if (badge.href; as href) {\n                            <a rtElem=\"badge-link\" qa-dataid=\"aside-badge-link\" target=\"_blank\" rel=\"noopener\" [href]=\"href\">\n                                <rt-tag\n                                    iconEnd=\"external-link\"\n                                    [value]=\"badge.value\"\n                                    [severity]=\"badge.severity ?? 'neutral'\"\n                                    [appearance]=\"badge.appearance ?? 'solid'\"\n                                    [radius]=\"badge.radius ?? 'md'\"\n                                    [icon]=\"badge.icon ?? null\" />\n                            </a>\n                        } @else {\n                            <rt-tag\n                                [value]=\"badge.value\"\n                                [severity]=\"badge.severity ?? 'neutral'\"\n                                [appearance]=\"badge.appearance ?? 'solid'\"\n                                [radius]=\"badge.radius ?? 'md'\"\n                                [icon]=\"badge.icon ?? null\" />\n                        }\n                    }\n                </div>\n            }\n        </div>\n\n        <div rtElem=\"actions\" qa-dataid=\"aside-actions\">\n            <ng-content select=\"[asideActions]\" />\n        </div>\n    </header>\n\n    <div rtElem=\"row\" qa-dataid=\"aside-header-row\">\n        <ng-content select=\"[asideHeaderContent]\" />\n    </div>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-header{--rt-aside-header-title-size: var(--rt-text-xl);--rt-aside-header-title-weight: var(--rt-font-weight-bold);--rt-aside-header-subtitle-size: var(--rt-text-sm);--rt-aside-header-gap: var(--rt-space-sm);--rt-aside-header-min-height: auto;padding:var(--rt-aside-header-inset, var(--rt-aside-inset))}.rt-aside-header__content{display:flex;min-width:0;min-height:var(--rt-aside-header-min-height);align-items:center;gap:var(--rt-aside-header-gap)}.rt-aside-header__back{flex-shrink:0}.rt-aside-header__heading{display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:var(--rt-space-0-5)}.rt-aside-header__overline{overflow:hidden;margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);text-overflow:ellipsis;white-space:nowrap}.rt-aside-header__title{overflow:hidden;min-width:0;margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-aside-header-title-size);font-weight:var(--rt-aside-header-title-weight);line-height:var(--rt-aside-header-title-leading, inherit)}.rt-aside-header__title>rt-skeleton-wrapper{display:block;overflow:hidden;min-width:0;text-overflow:ellipsis;white-space:nowrap}.rt-aside-header__subtitle{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-aside-header-subtitle-size);line-height:var(--rt-leading-snug)}.rt-aside-header__badges{display:flex;flex-wrap:wrap;margin-top:var(--rt-space-1);gap:var(--rt-space-xs)}.rt-aside-header__badge-link{display:inline-flex;cursor:pointer;text-decoration:none}.rt-aside-header__badge-link:hover{opacity:.85}.rt-aside-header__row{min-width:0;margin-top:var(--rt-aside-header-gap)}.rt-aside-header__row:empty{display:none}.rt-aside-header__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--rt-space-xs)}.rt-aside-header__actions:empty{display:none}}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], overline: [{ type: i0.Input, args: [{ isSignal: true, alias: "overline", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], badges: [{ type: i0.Input, args: [{ isSignal: true, alias: "badges", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+
+const BEM_BLOCK$1 = 'rt-aside-footer';
+/**
+ * Footer-слот для композиции внутри `<rt-aside>`. Две зоны через именованные
+ * слоты: `[asideDismiss]` (слева — «Закрыть», `appearance="text"`, всегда) и
+ * `[asidePrimary]` (справа — единственный позитивный глагол: Сохранить /
+ * Отправить / Опубликовать, если есть). Раскладка `justify-content:
+ * space-between`. Доменные/деструктивные действия в футер не кладём — они
+ * проецируются иконками в `<rt-aside-header>` слот `[asideActions]`.
+ *
+ * Только две именованные зоны — безатрибутный контент НЕ проецируется (контент
+ * без `asideDismiss`/`asidePrimary` не отрендерится).
+ *
+ * `ViewEncapsulation.None` — для единообразия с rt-aside.
+ *
+ * @example
+ * \`\`\`html
+ * <rt-aside-footer>
+ *   <button rtButton asideDismiss appearance="text" (click)="onClose()">Закрыть</button>
+ *   <button rtButton asidePrimary theme="primary" (click)="save()">Сохранить</button>
+ * </rt-aside-footer>
+ * \`\`\`
+ */
+class RtAsideFooterComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RtAsideFooterComponent, isStandalone: true, selector: "rt-aside-footer", host: { classAttribute: "rt-aside-footer" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-aside-footer\">\n    <footer rtElem=\"content\" qa-dataid=\"aside-footer\">\n        <ng-content select=\"[asideDismiss]\" />\n        <ng-content select=\"[asidePrimary]\" />\n    </footer>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-footer{--rt-aside-footer-border-width: var(--rt-border-width-thin);padding:var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);margin:var(--rt-aside-footer-margin, var(--rt-aside-inset));border-block-start:var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle)}.rt-aside-footer__content{display:flex;flex-wrap:wrap;justify-content:var(--rt-aside-footer-justify, space-between);gap:var(--rt-aside-footer-gap, var(--rt-space-sm))}.rt-aside-footer:empty{display:none}}\n"], dependencies: [{ 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: RtAsideFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-aside-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BlockDirective, ElemDirective], host: {
+                        class: BEM_BLOCK$1,
+                    }, template: "<ng-container rtBlock=\"rt-aside-footer\">\n    <footer rtElem=\"content\" qa-dataid=\"aside-footer\">\n        <ng-content select=\"[asideDismiss]\" />\n        <ng-content select=\"[asidePrimary]\" />\n    </footer>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-footer{--rt-aside-footer-border-width: var(--rt-border-width-thin);padding:var(--rt-aside-footer-inset, var(--rt-aside-inset) 0 0);margin:var(--rt-aside-footer-margin, var(--rt-aside-inset));border-block-start:var(--rt-aside-footer-border-width) solid var(--rt-color-border-subtle)}.rt-aside-footer__content{display:flex;flex-wrap:wrap;justify-content:var(--rt-aside-footer-justify, space-between);gap:var(--rt-aside-footer-gap, var(--rt-space-sm))}.rt-aside-footer:empty{display:none}}\n"] }]
+        }] });
+
+/** Что делает панель, когда её просят закрыться. */
+var ERtAsideCloseIntent;
+(function (ERtAsideCloseIntent) {
+    /** Ничего: идёт запись, и закрытие посреди неё потеряло бы её результат. */
+    ERtAsideCloseIntent["Ignore"] = "ignore";
+    /** Закрыться сразу: терять нечего. */
+    ERtAsideCloseIntent["Close"] = "close";
+    /** Спросить, что сделать с несохранёнными правками. */
+    ERtAsideCloseIntent["Ask"] = "ask";
+})(ERtAsideCloseIntent || (ERtAsideCloseIntent = {}));
+/** Исход окна с несохранёнными правками. */
+var ERtAsideUnsavedOutcome;
+(function (ERtAsideUnsavedOutcome) {
+    /** Закрыть без сохранения. */
+    ERtAsideUnsavedOutcome["Discard"] = "discard";
+    /** Закрыть с сохранением. */
+    ERtAsideUnsavedOutcome["Save"] = "save";
+    /** Остаться в панели. */
+    ERtAsideUnsavedOutcome["Stay"] = "stay";
+})(ERtAsideUnsavedOutcome || (ERtAsideUnsavedOutcome = {}));
+/**
+ * Решение по намерению закрыть панель. Одно на все четыре пути закрытия: кнопку
+ * в шапке, кнопку в футере, нажатие мимо панели и клавишу Esc — иначе Esc обошёл
+ * бы то, что ловит кнопка.
+ */
+function resolveCloseIntent(state) {
+    if (state.submitting) {
+        return ERtAsideCloseIntent.Ignore;
+    }
+    return state.guarded && !state.pristine ? ERtAsideCloseIntent.Ask : ERtAsideCloseIntent.Close;
+}
+
+const BEM_BLOCK = 'rt-aside-unsaved-dialog';
+/**
+ * Окно, которое видит пользователь, закрывая панель с несохранёнными правками. Три
+ * исхода: закрыть без сохранения, закрыть с сохранением, остаться. Открывает его
+ * общая основа асайда, поэтому наружу компонент не экспортируется.
+ *
+ * Отказ от правок подан красной кнопкой: это единственный исход, после которого
+ * введённое не вернуть.
+ */
+class RtAsideUnsavedDialogComponent {
+    constructor() {
+        this.#dialogRef = inject(RtDialogRef);
+        this.t = inject(RT_KIT_LABELS);
+    }
+    #dialogRef;
+    onDiscard() {
+        this.#dialogRef.close(ERtAsideUnsavedOutcome.Discard);
+    }
+    onSave() {
+        this.#dialogRef.close(ERtAsideUnsavedOutcome.Save);
+    }
+    onStay() {
+        this.#dialogRef.close(ERtAsideUnsavedOutcome.Stay);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtAsideUnsavedDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RtAsideUnsavedDialogComponent, isStandalone: true, selector: "rt-aside-unsaved-dialog", host: { classAttribute: "rt-aside-unsaved-dialog" }, ngImport: i0, template: "<rt-dialog width=\"440px\" qa-dataid=\"aside-unsaved-dialog\" [ariaLabel]=\"t().uiUnsavedTitle\">\n    <div rtBlock=\"rt-aside-unsaved-dialog\">\n        <div rtElem=\"text\">\n            <h2 rtElem=\"title\" qa-dataid=\"aside-unsaved-title\">{{ t().uiUnsavedTitle }}</h2>\n            <p rtElem=\"message\" qa-dataid=\"aside-unsaved-message\">{{ t().uiUnsavedMessage }}</p>\n        </div>\n\n        <div rtElem=\"footer\">\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-discard\"\n                type=\"button\"\n                theme=\"danger\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedDiscard\"\n                [attr.aria-label]=\"t().uiUnsavedDiscard\"\n                (click)=\"onDiscard()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-stay\"\n                type=\"button\"\n                theme=\"secondary\"\n                appearance=\"text\"\n                [label]=\"t().uiUnsavedStay\"\n                [attr.aria-label]=\"t().uiUnsavedStay\"\n                (click)=\"onStay()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-save\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"t().uiUnsavedSave\"\n                [attr.aria-label]=\"t().uiUnsavedSave\"\n                (click)=\"onSave()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-unsaved-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-aside-unsaved-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-aside-unsaved-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-aside-unsaved-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-aside-unsaved-dialog__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--rt-space-sm)}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtDialogComponent, selector: "rt-dialog", inputs: ["size", "width", "ariaLabel"] }, { 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: RtAsideUnsavedDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-aside-unsaved-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtButtonDirective,
+                        RtDialogComponent,
+                        BlockDirective,
+                        ElemDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<rt-dialog width=\"440px\" qa-dataid=\"aside-unsaved-dialog\" [ariaLabel]=\"t().uiUnsavedTitle\">\n    <div rtBlock=\"rt-aside-unsaved-dialog\">\n        <div rtElem=\"text\">\n            <h2 rtElem=\"title\" qa-dataid=\"aside-unsaved-title\">{{ t().uiUnsavedTitle }}</h2>\n            <p rtElem=\"message\" qa-dataid=\"aside-unsaved-message\">{{ t().uiUnsavedMessage }}</p>\n        </div>\n\n        <div rtElem=\"footer\">\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-discard\"\n                type=\"button\"\n                theme=\"danger\"\n                appearance=\"outlined\"\n                [label]=\"t().uiUnsavedDiscard\"\n                [attr.aria-label]=\"t().uiUnsavedDiscard\"\n                (click)=\"onDiscard()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-stay\"\n                type=\"button\"\n                theme=\"secondary\"\n                appearance=\"text\"\n                [label]=\"t().uiUnsavedStay\"\n                [attr.aria-label]=\"t().uiUnsavedStay\"\n                (click)=\"onStay()\"></button>\n            <button\n                rtButton\n                qa-dataid=\"aside-unsaved-save\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"t().uiUnsavedSave\"\n                [attr.aria-label]=\"t().uiUnsavedSave\"\n                (click)=\"onSave()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-aside-unsaved-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-aside-unsaved-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-aside-unsaved-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-aside-unsaved-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-aside-unsaved-dialog__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--rt-space-sm)}}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ERtAsideCloseIntent, ERtAsideUnsavedOutcome, RT_ASIDE_DATA, RtAsideComponent, RtAsideErrorBoxComponent, RtAsideFooterComponent, RtAsideHeaderComponent, RtAsideRef, RtAsideService, RtAsideUnsavedDialogComponent, resolveCloseIntent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-aside.mjs.map