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

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

@@ -1,709 +1,996 @@
-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';
-
+import { FocusTrapFactory } from "@angular/cdk/a11y";
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Injectable, InjectionToken, Injector, RendererFactory2, ViewEncapsulation, afterRenderEffect, booleanAttribute, computed, inject, input, output, signal, untracked, viewChild } 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 { RT_KIT_LABELS, carryThemeScopeOfFocus, materialPresetClassesOfFocus, rtKitDefault, rtKitLabel } 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 { EMPTY, Observable, Subject, map, merge, mergeMap, take, takeUntil } 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 { RtDialogComponent, RtDialogRef } from "@rt-tools/ui-kit-v2/dialog";
 function errorAsText(error) {
-    try {
-        return JSON.stringify(error) ?? String(error);
-    }
-    catch {
-        return String(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 }); }
+	return `Error time: ${now.toDateString()}_${now.toTimeString()};Error info: ${errorAsText(error)}`;
 }
-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 BEM_BLOCK$4 = "rt-aside-error-box";
+const CONFIRM_DELAY_MS = 1e3;
+var RtAsideErrorBoxComponent = 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, ...ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []);
+		this.buttonLabel = computed(() => this.copied() ? this.#copiedLabel() : this.#copyLabel(), ...ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []);
+		this.buttonIcon = computed(() => this.copied() ? "check" : null, ...ngDevMode ? [{ debugName: "buttonIcon" }] : /* istanbul ignore next */ []);
+		this.error = input.required(...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+		this.#destroyRef.onDestroy(() => this.#clearTimer());
+	}
+	onCopy() {
+		this.#clipboard.copy(rtAsideErrorCopyText(this.error(), /* @__PURE__ */ 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.2.2",
+			ngImport: i0,
+			type: RtAsideErrorBoxComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			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.2.2",
+	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";
+var RtAsideComponent = 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", ...ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []);
+		this.hasRequestError = computed(() => this.requestError() !== null && this.requestError() !== void 0, ...ngDevMode ? [{ debugName: "hasRequestError" }] : /* istanbul ignore next */ []);
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.contentLayout = input("default", ...ngDevMode ? [{ debugName: "contentLayout" }] : /* istanbul ignore next */ []);
+		this.width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.requestError = input(null, ...ngDevMode ? [{ debugName: "requestError" }] : /* istanbul ignore next */ []);
+		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);
+		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.2.2",
+			ngImport: i0,
+			type: RtAsideComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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.2.2",
+	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
+			}]
+		}]
+	}
+});
 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: config?.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 одновременно со слайдом.
-        // Панель могли снять до кадра — `close()`, переходом или уничтожением хозяина в том же такте.
-        requestAnimationFrame(() => {
-            if (!overlayRef.hasAttached()) {
-                return;
-            }
-            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]` — строка под заголовком на всю ширину шапки: поиск, вкладки,
- * сводка. Пустой слот места не занимает.
- *
- * Слот `[asideHeadingContent]` — содержимое в колонке заголовка, под подписью и бэйджами, по её
- * левому краю. Пустой слот ничего не рисует.
- *
- * `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\n            <ng-content select=\"[asideHeadingContent]\" />\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-default: var(--rt-text-xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-bold);--rt-aside-header-subtitle-size-default: var(--rt-text-sm);--rt-aside-header-gap-default: var(--rt-space-sm);--rt-aside-header-min-height-default: 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, var(--rt-aside-header-min-height-default));align-items:center;gap:var(--rt-aside-header-gap, var(--rt-aside-header-gap-default))}.rt-aside-header__back{--rt-icon-step-sm: var(--rt-aside-header-back-icon-size, var(--rt-size-4));flex-shrink:0}.rt-aside-header .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-aside-header-back-size, var(--rt-control-height-sm))}.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, var(--rt-aside-header-title-size-default));font-weight:var(--rt-aside-header-title-weight, var(--rt-aside-header-title-weight-default));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, var(--rt-aside-header-subtitle-size-default));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, var(--rt-aside-header-gap-default))}.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\n            <ng-content select=\"[asideHeadingContent]\" />\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-default: var(--rt-text-xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-bold);--rt-aside-header-subtitle-size-default: var(--rt-text-sm);--rt-aside-header-gap-default: var(--rt-space-sm);--rt-aside-header-min-height-default: 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, var(--rt-aside-header-min-height-default));align-items:center;gap:var(--rt-aside-header-gap, var(--rt-aside-header-gap-default))}.rt-aside-header__back{--rt-icon-step-sm: var(--rt-aside-header-back-icon-size, var(--rt-size-4));flex-shrink:0}.rt-aside-header .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-aside-header-back-size, var(--rt-control-height-sm))}.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, var(--rt-aside-header-title-size-default));font-weight:var(--rt-aside-header-title-weight, var(--rt-aside-header-title-weight-default));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, var(--rt-aside-header-subtitle-size-default));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, var(--rt-aside-header-gap-default))}.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 RtAsideRef = class {
+	#overlayRef;
+	#renderer;
+	#afterClosedSource;
+	#closeRequestsSource;
+	#isClosing;
+	constructor(overlayRef, renderer, closeRequestsSource = new Subject()) {
+		this.disableClose = signal(false, ...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(void 0));
+	}
+	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");
+		this.#emit(result);
+		setTimeout(() => {
+			this.#overlayRef.dispose();
+		}, LEAVE_ANIMATION_DURATION_MS);
+	}
+	afterClosed() {
+		return this.#afterClosedSource.asObservable();
+	}
+	closeRequests() {
+		return this.#closeRequestsSource.asObservable();
+	}
+	#finish(result) {
+		if (this.#isClosing) return;
+		this.#isClosing = true;
+		this.#emit(result);
+	}
+	#emit(result) {
+		this.#afterClosedSource.next(result);
+		this.#afterClosedSource.complete();
+		this.#closeRequestsSource.complete();
+	}
+};
+const RT_ASIDE_DATA = new InjectionToken("RT_ASIDE_DATA");
+var RtAsideService = class RtAsideService {
+	#overlay = inject(Overlay);
+	#injector = inject(Injector);
+	#document = inject(DOCUMENT);
+	#renderer = inject(RendererFactory2).createRenderer(null, null);
+	#openSource = new Subject();
+	#closeOnEscape = rtKitDefault("aside", (it) => it.closeOnEscape, true);
+	constructor() {
+		this.#openSource.pipe(mergeMap((openContext) => {
+			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 !== void 0 ? [...panelClasses, ...this.#toArray(config.panelClass)] : panelClasses,
+			disposeOnNavigation: config?.disposeOnNavigation ?? true
+		};
+		const overlayRef = this.#overlay.create(overlayConfig);
+		carryThemeScopeOfFocus(overlayRef.overlayElement, this.#document);
+		const closeRequests = new Subject();
+		const asideRef = new RtAsideRef(overlayRef, this.#renderer, closeRequests);
+		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);
+		requestAnimationFrame(() => {
+			if (!overlayRef.hasAttached()) return;
+			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;
+	}
+	#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()));
+	}
+	#toArray(value) {
+		return Array.isArray(value) ? value : [value];
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtAsideService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtAsideService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtAsideService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const BEM_BLOCK$2 = "rt-aside-header";
+var RtAsideHeaderComponent = class RtAsideHeaderComponent {
+	constructor() {
+		this.#asideRef = inject(RtAsideRef, { optional: true });
+		this.t = inject(RT_KIT_LABELS);
+		this.title = input(null, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.overline = input(null, ...ngDevMode ? [{ debugName: "overline" }] : /* istanbul ignore next */ []);
+		this.subtitle = input(null, ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+		this.badges = input([], ...ngDevMode ? [{ debugName: "badges" }] : /* istanbul ignore next */ []);
+		this.closable = input(true, {
+			...ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.loading = input(false, {
+			...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.dismiss = output();
+	}
+	#asideRef;
+	onDismiss() {
+		this.dismiss.emit();
+		this.#asideRef?.close();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtAsideHeaderComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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\n            <ng-content select=\"[asideHeadingContent]\" />\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-default: var(--rt-text-xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-bold);--rt-aside-header-subtitle-size-default: var(--rt-text-sm);--rt-aside-header-gap-default: var(--rt-space-sm);--rt-aside-header-min-height-default: 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, var(--rt-aside-header-min-height-default));align-items:center;gap:var(--rt-aside-header-gap, var(--rt-aside-header-gap-default))}.rt-aside-header__back{--rt-icon-step-sm: var(--rt-aside-header-back-icon-size, var(--rt-size-4));flex-shrink:0}.rt-aside-header .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-aside-header-back-size, var(--rt-control-height-sm))}.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, var(--rt-aside-header-title-size-default));font-weight:var(--rt-aside-header-title-weight, var(--rt-aside-header-title-weight-default));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, var(--rt-aside-header-subtitle-size-default));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, var(--rt-aside-header-gap-default))}.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: 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: "component",
+					type: RtSkeletonWrapperComponent,
+					selector: "rt-skeleton-wrapper",
+					inputs: [
+						"width",
+						"height",
+						"shape",
+						"size",
+						"radius",
+						"animation",
+						"isLoading"
+					]
+				},
+				{
+					kind: "component",
+					type: RtTagComponent,
+					selector: "rt-tag",
+					inputs: [
+						"value",
+						"highlight",
+						"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.2.2",
+	ngImport: i0,
+	type: RtAsideHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-aside-header",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				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\n            <ng-content select=\"[asideHeadingContent]\" />\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-default: var(--rt-text-xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-bold);--rt-aside-header-subtitle-size-default: var(--rt-text-sm);--rt-aside-header-gap-default: var(--rt-space-sm);--rt-aside-header-min-height-default: 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, var(--rt-aside-header-min-height-default));align-items:center;gap:var(--rt-aside-header-gap, var(--rt-aside-header-gap-default))}.rt-aside-header__back{--rt-icon-step-sm: var(--rt-aside-header-back-icon-size, var(--rt-size-4));flex-shrink:0}.rt-aside-header .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-aside-header-back-size, var(--rt-control-height-sm))}.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, var(--rt-aside-header-title-size-default));font-weight:var(--rt-aside-header-title-weight, var(--rt-aside-header-title-weight-default));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, var(--rt-aside-header-subtitle-size-default));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, var(--rt-aside-header-gap-default))}.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";
+var RtAsideFooterComponent = class RtAsideFooterComponent {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtAsideFooterComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			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.2.2",
+	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";
+(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";
+(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;
+	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.
- */
-
+const BEM_BLOCK = "rt-aside-unsaved-dialog";
+var RtAsideUnsavedDialogComponent = 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.2.2",
+			ngImport: i0,
+			type: RtAsideUnsavedDialogComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			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: 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.2.2",
+	ngImport: i0,
+	type: RtAsideUnsavedDialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-aside-unsaved-dialog",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				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"]
+		}]
+	}]
+});
 export { ERtAsideCloseIntent, ERtAsideUnsavedOutcome, RT_ASIDE_DATA, RtAsideComponent, RtAsideErrorBoxComponent, RtAsideFooterComponent, RtAsideHeaderComponent, RtAsideRef, RtAsideService, RtAsideUnsavedDialogComponent, resolveCloseIntent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-aside.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-aside.mjs.map