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

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

@@ -1,478 +1,551 @@
-import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, InjectionToken, inject, Injector, afterNextRender, Injectable, booleanAttribute } from '@angular/core';
-import { BlockDirective, ModDirective, ElemDirective } from '@rt-tools/core';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-import { FocusTrapFactory } from '@angular/cdk/a11y';
-import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subject, take, mergeMap, map, EMPTY, merge, takeUntil } from 'rxjs';
-import { materialPresetClassesOfFocus, carryThemeScopeOfFocus, RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
-import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
-
-const BEM_BLOCK$3 = 'rt-dialog';
-/**
- * Презентационный styled-frame для модалки поверх CDK Overlay.
- *
- * Видимость / backdrop / scroll-block / ESC / фокус — НЕ внутренняя
- * ответственность компонента. Это обеспечивает `RtDialogService.open()`: оверлей CDK, а
- * ловушку и первый фокус — по флагам `trapFocus`, `restoreFocus` и `autoFocus` (по
- * умолчанию выключены). Рамка несёт `tabindex="-1"`, чтобы `autoFocus: 'dialog'` мог её взять. rt-dialog здесь — стилизованная "рамка"
- * (padding-free контейнер) с size-вариантами + ng-content слотом.
- *
- * Композиция:
- * \`\`\`html
- * <rt-dialog size="md">
- *   <rt-dialog-header title="Создание записи" />
- *   <div style="padding: var(--rt-space-lg);">body...</div>
- *   <rt-dialog-footer>
- *     <button rtButton (click)="cancel()">Отмена</button>
- *     <button rtButton (click)="save()">Сохранить</button>
- *   </rt-dialog-footer>
- * </rt-dialog>
- * \`\`\`
- *
- * Открытие — через `RtDialogService.open(MyModalComponent, { data })` →
- * получаешь `RtDialogRef<T>` с `.close(result)` + `.afterClosed()`.
- *
- * `ViewEncapsulation.None` — стили префиксованы `.rt-dialog`, чтобы
- * rt-dialog-header / rt-dialog-footer subscriptions работали с одним
- * BEM-классом без cross-encapsulation хака.
- */
-class RtDialogComponent {
-    constructor() {
-        /**
-         * Размер модалки:
-         * - `sm` — 460px (`--rt-dialog-width-sm`)
-         * - `md` — 660px (`--rt-dialog-width-md`, дефолт)
-         * - `lg` — 860px (`--rt-dialog-width-lg`)
-         */
-        this.size = input('md', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        /** Override ширины через CSS-property `--rt-dialog-width`. Имеет приоритет над `size`. */
-        this.width = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-        /** ARIA-label для dialog-обёртки (если нет видимого заголовка). */
-        this.ariaLabel = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtDialogComponent, isStandalone: true, selector: "rt-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", 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 } }, host: { properties: { "style.--rt-dialog-width": "width()" }, classAttribute: "rt-dialog" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog{display:contents}rt-dialog[data-rt-radius=none]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-none)}rt-dialog[data-rt-radius=xs]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xs)}rt-dialog[data-rt-radius=sm]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-sm)}rt-dialog[data-rt-radius=ms]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-ms)}rt-dialog[data-rt-radius=md]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-md)}rt-dialog[data-rt-radius=lg]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-lg)}rt-dialog[data-rt-radius=xl]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xl)}rt-dialog[data-rt-radius=\"2xl\"]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-2xl)}rt-dialog[data-rt-radius=full]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-full)}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: var(--rt-shadow-dialog);--rt-dialog-radius: var(--rt-radius-xl);--rt-dialog-backdrop-bg: var(--rt-overlay-navy-70);--rt-dialog-backdrop-blur: 5px}rt-dialog .rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:var(--rt-dialog-border, none);border-radius:var(--rt-dialog-radius);background:var(--rt-dialog-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}rt-dialog .rt-dialog:focus{outline:none}rt-dialog .rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}rt-dialog .rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}rt-dialog .rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BlockDirective, ModDirective], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK$3,
-                        '[style.--rt-dialog-width]': 'width()',
-                    }, template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog{display:contents}rt-dialog[data-rt-radius=none]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-none)}rt-dialog[data-rt-radius=xs]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xs)}rt-dialog[data-rt-radius=sm]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-sm)}rt-dialog[data-rt-radius=ms]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-ms)}rt-dialog[data-rt-radius=md]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-md)}rt-dialog[data-rt-radius=lg]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-lg)}rt-dialog[data-rt-radius=xl]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xl)}rt-dialog[data-rt-radius=\"2xl\"]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-2xl)}rt-dialog[data-rt-radius=full]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-full)}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: var(--rt-shadow-dialog);--rt-dialog-radius: var(--rt-radius-xl);--rt-dialog-backdrop-bg: var(--rt-overlay-navy-70);--rt-dialog-backdrop-blur: 5px}rt-dialog .rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:var(--rt-dialog-border, none);border-radius:var(--rt-dialog-radius);background:var(--rt-dialog-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}rt-dialog .rt-dialog:focus{outline:none}rt-dialog .rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}rt-dialog .rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}rt-dialog .rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}}\n"] }]
-        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
-
-/**
- * Хэндл к программно открытой модалке (через `RtDialogService.open()`).
- *
- * Контент-компонент инжектит `RtDialogRef` и закрывает модалку через `.close(result?)`.
- * Родитель, открывший модалку, ждёт результата через `.afterClosed()`.
- *
- * Слой, снятый без `close()` — переходом по адресу или уничтожением хозяина, — тоже завершает
- * `afterClosed()`: подписчик получает `undefined`. Иначе он ждал бы ответа, которого не будет.
- *
- * Generic `<T>` — тип результата `close(result)`. Дефолт `unknown` — если результат
- * не нужен, оставляй generic пустым.
- *
- * @example
- * \`\`\`ts
- * // в контент-компоненте
- * private readonly dialogRef = inject(RtDialogRef);
- * close(): void { this.dialogRef.close({ confirmed: true }); }
- *
- * // в родителе
- * dialogService.open(MyDialogComponent).afterClosed().subscribe((result) => {...});
- * \`\`\`
- */
-class RtDialogRef {
-    #overlayRef;
-    #afterClosedSource;
-    #isClosed;
-    constructor(overlayRef) {
-        /**
-         * Runtime-флаг, блокирующий close() через ESC / backdrop click.
-         *
-         * Default `false`. Включай (`dialogRef.disableClose.set(true)`) на
-         * время in-flight submit'а, чтобы юзер не потерял введённые в форму
-         * данные на случайном ESC. После next/error subscribe ставь обратно
-         * в `false`. Не влияет на программный `close(result)` — он всегда
-         * закрывает overlay.
-         *
-         * Статические config-флаги `closeOnEscape` / `closeOnBackdropClick`
-         * (см. `IRtDialogConfig`) определяют, подписан ли вообще handler на
-         * соответствующее событие; `disableClose` — это runtime-override,
-         * который гейтит dispatch внутри уже-подписанного handler'а.
-         */
-        this.disableClose = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disableClose" }] : /* istanbul ignore next */ []));
-        this.#afterClosedSource = new Subject();
-        this.#isClosed = false;
-        this.#overlayRef = overlayRef;
-        this.#overlayRef
-            .detachments()
-            .pipe(take(1))
-            .subscribe(() => this.#finish(undefined));
-    }
-    /** Закрывает overlay; опционально передаёт результат подписчикам `afterClosed()`. */
-    close(result) {
-        if (this.#isClosed) {
-            return;
-        }
-        // Флаг до dispose: снятие слоя само отзовётся в detachments(), а результат отдаёт close().
-        this.#isClosed = true;
-        this.#overlayRef.dispose();
-        this.#afterClosedSource.next(result);
-        this.#afterClosedSource.complete();
-    }
-    /** Эмиттит один раз — результат `close(result)` или `undefined` при снятом слое — и завершается. */
-    afterClosed() {
-        return this.#afterClosedSource.asObservable();
-    }
-    #finish(result) {
-        if (this.#isClosed) {
-            return;
-        }
-        this.#isClosed = true;
-        this.#afterClosedSource.next(result);
-        this.#afterClosedSource.complete();
-    }
-}
-
-/**
- * Injection token для передачи данных в модалку, открытую через `RtDialogService.open()`.
- *
- * Пользовательский компонент-контент модалки инжектит токен и получает данные,
- * переданные в `DialogConfig.data`. Тип значения задаётся generic'ом — `inject(RT_DIALOG_DATA)`
- * вернёт `unknown`, прокастуй через `inject(RT_DIALOG_DATA) as MyDataType` ИЛИ
- * объяви токен с конкретным generic'ом в feature-либе.
- *
- * @example
- * \`\`\`ts
- * @Component({...})
- * export class WelcomeModalComponent {
- *   readonly data = inject(RT_DIALOG_DATA) as { userName: string };
- * }
- *
- * // parent
- * dialogService.open(WelcomeModalComponent, { data: { userName: "Иван" } });
- * \`\`\`
- */
-const RT_DIALOG_DATA = new InjectionToken('RT_DIALOG_DATA');
-
-/**
- * Программный API для открытия модалок поверх CDK Overlay.
- *
- * Устройство сервиса:
- * - `Overlay.position().global().centerHorizontally().centerVertically()` — центрирование.
- * - `scrollStrategies.block()` — фиксирует background-scroll.
- * - `hasBackdrop: true` + кастомный класс — затемнение.
- * - `ComponentPortal` + custom `Injector` подкидывает `RtDialogRef` + `RT_DIALOG_DATA` в DI
- *   контент-компонента.
- *
- * Альтернатива: legacy inline `<rt-dialog [visible]>` форма продолжает работать через
- * native `<dialog>.showModal()`. Новые экраны — на программный API.
- *
- * @example
- * \`\`\`ts
- * // открытие
- * private readonly dialogService = inject(RtDialogService);
- *
- * openConfirm(): void {
- *   const ref = this.dialogService.open<ConfirmDialogComponent, { question: string }, boolean>(
- *     ConfirmDialogComponent,
- *     { data: { question: "Удалить?" } }
- *   );
- *   ref.afterClosed().subscribe((confirmed) => {
- *     if (confirmed) this.delete();
- *   });
- * }
- *
- * // контент-компонент
- * @Component({
- *   selector: "rt-confirm-dialog",
- *   template: \`
- *     <rt-dialog size="sm">
- *       <rt-dialog-header [title]="data.question" />
- *       <div>Действие необратимо.</div>
- *       <rt-dialog-footer>
- *         <button rtButton (click)="close(false)">Отмена</button>
- *         <button rtButton theme="danger" (click)="close(true)">Удалить</button>
- *       </rt-dialog-footer>
- *     </rt-dialog>
- *   \`,
- * })
- * export class ConfirmDialogComponent {
- *   readonly data = inject(RT_DIALOG_DATA) as { question: string };
- *   readonly #ref = inject(RtDialogRef<boolean>);
- *   close(result: boolean): void { this.#ref.close(result); }
- * }
- * \`\`\`
- */
-class RtDialogService {
-    #overlay = inject(Overlay);
-    #injector = inject(Injector);
-    #document = inject(DOCUMENT);
-    #focusTrapFactory = inject(FocusTrapFactory);
-    #openSource = new Subject();
-    constructor() {
-        // Per-open close-подписки (backdrop / ESC) живут в одном постоянном
-        // конструкторном стриме: open() эмитит контекст открытия, mergeMap
-        // подписывает event-стримы конкретного OverlayRef. `detachments()`
-        // терминирует внутренний поток при overlay.dispose() (дёргается из
-        // RtDialogRef.close()). mergeMap, а не switchMap — одновременно может
-        // быть открыто несколько модалок (стек).
-        //
-        // Внутри обоих handler'ов — runtime-guard через `dialogRef.disableClose()`:
-        // если контент-компонент выставил `disableClose.set(true)` (например, на
-        // время in-flight submit'а), ESC / backdrop НЕ закрывают overlay.
-        // Программный `dialogRef.close(result)` гейтом не задет — он всегда работает.
-        this.#openSource
-            .pipe(mergeMap((openContext) => {
-            const backdropClose$ = openContext.closeOnBackdropClick
-                ? openContext.overlayRef.backdropClick().pipe(map(() => () => {
-                    if (openContext.dialogRef.disableClose()) {
-                        return;
-                    }
-                    openContext.dialogRef.close();
-                }))
-                : EMPTY;
-            const escapeClose$ = openContext.closeOnEscape
-                ? openContext.overlayRef.keydownEvents().pipe(map((event) => () => {
-                    if (event.key !== 'Escape') {
-                        return;
-                    }
-                    event.preventDefault();
-                    if (openContext.dialogRef.disableClose()) {
-                        return;
-                    }
-                    openContext.dialogRef.close();
-                }))
-                : EMPTY;
-            // Уход оверлея снимает ловушку фокуса и возвращает фокус. Отдельно от закрывающих
-            // потоков: те обрываются тем же уходом и до него не доживают.
-            const releaseFocus$ = openContext.overlayRef.detachments().pipe(take(1), map(() => () => this.#releaseFocus(openContext.focus)));
-            return merge(merge(backdropClose$, escapeClose$).pipe(takeUntil(openContext.overlayRef.detachments())), releaseFocus$);
-        }), takeUntilDestroyed())
-            .subscribe((handleCloseIntent) => handleCloseIntent());
-    }
-    open(component, config) {
-        const overlayRef = this.#overlay.create({
-            positionStrategy: this.#overlay.position().global().centerHorizontally().centerVertically(),
-            scrollStrategy: this.#overlay.scrollStrategies.block(),
-            hasBackdrop: true,
-            backdropClass: config?.backdropClass ?? 'rt-dialog-backdrop',
-            panelClass: [config?.panelClass ?? 'rt-dialog-overlay', materialPresetClassesOfFocus(this.#document)].flat(),
-            disposeOnNavigation: true,
-        });
-        // До attach: содержимое диалога может забрать фокус, и кусок темы у кнопки будет потерян.
-        carryThemeScopeOfFocus(overlayRef.overlayElement, this.#document);
-        const dialogRef = new RtDialogRef(overlayRef);
-        const focus = {
-            trap: null,
-            restoreTo: config?.restoreFocus === true ? this.#focusedElement() : null,
-        };
-        // Сами close-подписки объявлены один раз в конструкторе — здесь только
-        // эмит контекста открытия (см. #openSource-стрим).
-        this.#openSource.next({
-            overlayRef,
-            dialogRef,
-            focus,
-            closeOnBackdropClick: config?.closeOnBackdropClick !== false,
-            closeOnEscape: config?.closeOnEscape !== false,
-        });
-        const injector = Injector.create({
-            parent: this.#injector,
-            providers: [
-                { provide: RtDialogRef, useValue: dialogRef },
-                { provide: RT_DIALOG_DATA, useValue: config?.data ?? null },
-            ],
-        });
-        const portal = new ComponentPortal(component, null, injector);
-        overlayRef.attach(portal);
-        this.#holdFocus(overlayRef.overlayElement, focus, config?.trapFocus === true, config?.autoFocus ?? false);
-        return dialogRef;
-    }
-    /**
-     * Ловушка и первый фокус ставятся после отрисовки содержимого: до неё в оверлее нет ни рамки,
-     * ни кнопок, и ловушке не на что опереться.
-     */
-    #holdFocus(pane, focus, trapFocus, autoFocus) {
-        if (!trapFocus && autoFocus === false) {
-            return;
-        }
-        afterNextRender(() => {
-            if (trapFocus) {
-                focus.trap = this.#focusTrapFactory.create(pane);
-            }
-            switch (autoFocus) {
-                case 'dialog':
-                    pane.querySelector('[role="dialog"]')?.focus();
-                    break;
-                case 'first-tabbable':
-                    this.#focusFirstTabbable(pane, focus.trap);
-                    break;
-                default:
-                    break;
-            }
-        }, { injector: this.#injector });
-    }
-    /** Без ловушки первый элемент ищет временная ловушка: обход по Tab у неё уже есть. */
-    #focusFirstTabbable(pane, trap) {
-        if (trap) {
-            trap.focusFirstTabbableElement();
-            return;
-        }
-        const lookup = this.#focusTrapFactory.create(pane);
-        lookup.focusFirstTabbableElement();
-        lookup.destroy();
-    }
-    #releaseFocus(focus) {
-        focus.trap?.destroy();
-        focus.trap = null;
-        if (focus.restoreTo?.isConnected) {
-            focus.restoreTo.focus();
-        }
-    }
-    #focusedElement() {
-        const active = this.#document.activeElement;
-        return active instanceof HTMLElement && active !== this.#document.body ? active : null;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-const BEM_BLOCK$2 = 'rt-dialog-header';
-/**
- * Заголовок модалки для композиции внутри `<rt-dialog>`.
- *
- * Если компонент рендерится внутри overlay-портала, открытого через `RtDialogService.open()`,
- * кнопка закрытия дёргает `inject(RtDialogRef).close()` автоматически. В legacy-режиме
- * (внутри inline `<rt-dialog [visible]>`) `RtDialogRef` не зарегистрирован — клик
- * по close-кнопке эмитит output `(closeAction)`, который должен повесить родитель.
- *
- * Перед заголовком — место для значка или другого элемента: узел с атрибутом
- * `rtDialogHeaderLead` проецируется туда. Пустое место ничего не занимает.
- *
- * `ViewEncapsulation.None` — для единообразия с rt-dialog (стили префиксованы `.rt-dialog-header`).
- *
- * @example
- * \`\`\`html
- * <rt-dialog size="md">
- *   <rt-dialog-header title="Создание записи" />
- *   <div>...форма...</div>
- *   <rt-dialog-footer>
- *     <button rtButton (click)="cancel()">Отмена</button>
- *     <button rtButton theme="primary" (click)="save()">Сохранить</button>
- *   </rt-dialog-footer>
- * </rt-dialog>
- * \`\`\`
- */
-class RtDialogHeaderComponent {
-    constructor() {
-        this.#dialogRef = inject(RtDialogRef, { optional: true });
-        /** Текст заголовка — рендерится в `<h2>`. */
-        this.t = inject(RT_KIT_LABELS);
-        this.title = input.required(/* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-        /** Показывать кнопку закрытия в углу заголовка. Дефолт `true`. */
-        this.closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    }
-    #dialogRef;
-    onClose() {
-        // Programmatic mode — закрываем через DialogRef.
-        this.#dialogRef?.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDialogHeaderComponent, isStandalone: true, selector: "rt-dialog-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-dialog-header" }, ngImport: i0, template: "<header rtBlock=\"rt-dialog-header\" qa-dataid=\"dialog-header\">\n    <span rtElem=\"lead\" qa-dataid=\"dialog-header-lead\"><ng-content select=\"[rtDialogHeaderLead]\" /></span>\n    <h2 rtElem=\"title\" qa-dataid=\"dialog-title\">{{ title() }}</h2>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"dialog-close\"\n            icon=\"ico-close\"\n            size=\"sm\"\n            variant=\"ghost\"\n            [ariaLabel]=\"t().uiClose\"\n            (clicked)=\"onClose()\" />\n    }\n</header>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-header{display:contents}rt-dialog-header .rt-dialog-header{--rt-dialog-header-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;align-items:center;justify-content:space-between;padding:var(--rt-dialog-header-padding, var(--rt-space-lg));border-block-end:var(--rt-dialog-header-border, var(--rt-dialog-header-border-default));gap:var(--rt-space-sm)}rt-dialog-header .rt-dialog-header__lead{display:inline-flex;flex-shrink:0;align-items:center}rt-dialog-header .rt-dialog-header__lead:empty{display:none}rt-dialog-header .rt-dialog-header__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-dialog-title-font-size, var(--rt-text-xl));font-weight:var(--rt-dialog-title-weight, var(--rt-font-weight-bold));text-transform:var(--rt-dialog-title-transform, none)}rt-dialog-header .rt-dialog-header__close{margin-inline-start:auto}}\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: "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: RtDialogHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-dialog-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // standalone components / directives
-                        RtIconButtonComponent,
-                        BlockDirective,
-                        ElemDirective,
-                    ], host: {
-                        class: BEM_BLOCK$2,
-                    }, template: "<header rtBlock=\"rt-dialog-header\" qa-dataid=\"dialog-header\">\n    <span rtElem=\"lead\" qa-dataid=\"dialog-header-lead\"><ng-content select=\"[rtDialogHeaderLead]\" /></span>\n    <h2 rtElem=\"title\" qa-dataid=\"dialog-title\">{{ title() }}</h2>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"dialog-close\"\n            icon=\"ico-close\"\n            size=\"sm\"\n            variant=\"ghost\"\n            [ariaLabel]=\"t().uiClose\"\n            (clicked)=\"onClose()\" />\n    }\n</header>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-header{display:contents}rt-dialog-header .rt-dialog-header{--rt-dialog-header-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;align-items:center;justify-content:space-between;padding:var(--rt-dialog-header-padding, var(--rt-space-lg));border-block-end:var(--rt-dialog-header-border, var(--rt-dialog-header-border-default));gap:var(--rt-space-sm)}rt-dialog-header .rt-dialog-header__lead{display:inline-flex;flex-shrink:0;align-items:center}rt-dialog-header .rt-dialog-header__lead:empty{display:none}rt-dialog-header .rt-dialog-header__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-dialog-title-font-size, var(--rt-text-xl));font-weight:var(--rt-dialog-title-weight, var(--rt-font-weight-bold));text-transform:var(--rt-dialog-title-transform, none)}rt-dialog-header .rt-dialog-header__close{margin-inline-start:auto}}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }] } });
-
-const BEM_BLOCK$1 = 'rt-dialog-footer';
-/**
- * Footer-слот для композиции внутри `<rt-dialog>`. Принимает любой проектированный
- * контент (action-кнопки, статусные сообщения и т.п.), оборачивает в footer с
- * top-border и flex-раскладкой; вход `align` прижимает содержимое к концу (по умолчанию),
- * к началу, к центру или разводит по краям (`between`).
- *
- * `ViewEncapsulation.None` — для единообразия с rt-dialog.
- *
- * @example
- * \`\`\`html
- * <rt-dialog-footer>
- *   <button rtButton (click)="cancel()">Отмена</button>
- *   <button rtButton theme="primary" (click)="save()">Сохранить</button>
- * </rt-dialog-footer>
- * \`\`\`
- */
-class RtDialogFooterComponent {
-    constructor() {
-        this.align = input('end', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtDialogFooterComponent, isStandalone: true, selector: "rt-dialog-footer", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-dialog-footer" }, ngImport: i0, template: "<footer rtBlock=\"rt-dialog-footer\" qa-dataid=\"dialog-footer\" [rtMod]=\"{ align: align() }\">\n    <ng-content />\n</footer>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-footer{display:contents}rt-dialog-footer .rt-dialog-footer{--rt-dialog-footer-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;justify-content:flex-end;padding:var(--rt-dialog-footer-padding, var(--rt-space-lg));border-block-start:var(--rt-dialog-footer-border, var(--rt-dialog-footer-border-default));gap:var(--rt-space-sm)}rt-dialog-footer .rt-dialog-footer--align--start{justify-content:flex-start}rt-dialog-footer .rt-dialog-footer--align--center{justify-content:center}rt-dialog-footer .rt-dialog-footer--align--between{justify-content:space-between}rt-dialog-footer .rt-dialog-footer:empty{display:none}}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-dialog-footer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BlockDirective, ModDirective], host: {
-                        class: BEM_BLOCK$1,
-                    }, template: "<footer rtBlock=\"rt-dialog-footer\" qa-dataid=\"dialog-footer\" [rtMod]=\"{ align: align() }\">\n    <ng-content />\n</footer>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-footer{display:contents}rt-dialog-footer .rt-dialog-footer{--rt-dialog-footer-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;justify-content:flex-end;padding:var(--rt-dialog-footer-padding, var(--rt-space-lg));border-block-start:var(--rt-dialog-footer-border, var(--rt-dialog-footer-border-default));gap:var(--rt-space-sm)}rt-dialog-footer .rt-dialog-footer--align--start{justify-content:flex-start}rt-dialog-footer .rt-dialog-footer--align--center{justify-content:center}rt-dialog-footer .rt-dialog-footer--align--between{justify-content:space-between}rt-dialog-footer .rt-dialog-footer:empty{display:none}}\n"] }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }] } });
-
-const BEM_BLOCK = 'rt-dialog-content';
-/**
- * Тело модалки для композиции внутри `<rt-dialog>` между шапкой и подвалом. Даёт отступ и
- * прокрутку: длинное содержимое прокручивается внутри тела, а шапка и подвал стоят на месте.
- * Отступ задаёт `--rt-dialog-content-padding`, потолок высоты — `--rt-dialog-content-max-height`.
- *
- * Часть необязательная: окно со своей обёрткой тела выглядит как прежде.
- *
- * @example
- * \`\`\`html
- * <rt-dialog size="md">
- *   <rt-dialog-header title="Создание записи" />
- *   <rt-dialog-content>...форма...</rt-dialog-content>
- *   <rt-dialog-footer>...</rt-dialog-footer>
- * </rt-dialog>
- * \`\`\`
- */
-class RtDialogContentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RtDialogContentComponent, isStandalone: true, selector: "rt-dialog-content", host: { classAttribute: "rt-dialog-content" }, ngImport: i0, template: "<div rtBlock=\"rt-dialog-content\" qa-dataid=\"dialog-content\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-content{display:contents}rt-dialog-content .rt-dialog-content{overflow:auto;min-height:0;max-height:var(--rt-dialog-content-max-height, none);flex:1 1 auto;padding:var(--rt-dialog-content-padding, var(--rt-space-lg))}}\n"], dependencies: [{ kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDialogContentComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-dialog-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [BlockDirective], host: {
-                        class: BEM_BLOCK,
-                    }, template: "<div rtBlock=\"rt-dialog-content\" qa-dataid=\"dialog-content\">\n    <ng-content />\n</div>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-content{display:contents}rt-dialog-content .rt-dialog-content{overflow:auto;min-height:0;max-height:var(--rt-dialog-content-max-height, none);flex:1 1 auto;padding:var(--rt-dialog-content-padding, var(--rt-space-lg))}}\n"] }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, Injector, ViewEncapsulation, afterNextRender, booleanAttribute, inject, input, signal } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+import { FocusTrapFactory } from "@angular/cdk/a11y";
+import { Overlay } from "@angular/cdk/overlay";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { DOCUMENT } from "@angular/common";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { EMPTY, Subject, map, merge, mergeMap, take, takeUntil } from "rxjs";
+import { RT_KIT_LABELS, carryThemeScopeOfFocus, materialPresetClassesOfFocus } from "@rt-tools/ui-kit-v2/core";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+const BEM_BLOCK$3 = "rt-dialog";
+var RtDialogComponent = class RtDialogComponent {
+	constructor() {
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.width = input(null, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDialogComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtDialogComponent,
+			isStandalone: true,
+			selector: "rt-dialog",
+			inputs: {
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					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
+				}
+			},
+			host: {
+				properties: { "style.--rt-dialog-width": "width()" },
+				classAttribute: "rt-dialog"
+			},
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog{display:contents}rt-dialog[data-rt-radius=none]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-none)}rt-dialog[data-rt-radius=xs]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xs)}rt-dialog[data-rt-radius=sm]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-sm)}rt-dialog[data-rt-radius=ms]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-ms)}rt-dialog[data-rt-radius=md]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-md)}rt-dialog[data-rt-radius=lg]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-lg)}rt-dialog[data-rt-radius=xl]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xl)}rt-dialog[data-rt-radius=\"2xl\"]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-2xl)}rt-dialog[data-rt-radius=full]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-full)}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: var(--rt-shadow-dialog);--rt-dialog-radius: var(--rt-radius-xl);--rt-dialog-backdrop-bg: var(--rt-overlay-navy-70);--rt-dialog-backdrop-blur: 5px}rt-dialog .rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:var(--rt-dialog-border, none);border-radius:var(--rt-dialog-radius);background:var(--rt-dialog-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}rt-dialog .rt-dialog:focus{outline:none}rt-dialog .rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}rt-dialog .rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}rt-dialog .rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: BlockDirective,
+				selector: "[rtBlock]",
+				inputs: ["rtMod"]
+			}, {
+				kind: "directive",
+				type: ModDirective,
+				selector: "[rtMod]"
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-dialog",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [BlockDirective, ModDirective],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK$3,
+				"[style.--rt-dialog-width]": "width()"
+			},
+			template: "<div\n    rtBlock=\"rt-dialog\"\n    qa-dataid=\"dialog\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    tabindex=\"-1\"\n    [rtMod]=\"{ size: size() }\"\n    [style.--rt-dialog-width]=\"width()\"\n    [attr.aria-label]=\"ariaLabel()\">\n    <ng-content />\n</div>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog{display:contents}rt-dialog[data-rt-radius=none]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-none)}rt-dialog[data-rt-radius=xs]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xs)}rt-dialog[data-rt-radius=sm]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-sm)}rt-dialog[data-rt-radius=ms]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-ms)}rt-dialog[data-rt-radius=md]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-md)}rt-dialog[data-rt-radius=lg]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-lg)}rt-dialog[data-rt-radius=xl]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-xl)}rt-dialog[data-rt-radius=\"2xl\"]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-2xl)}rt-dialog[data-rt-radius=full]>.rt-dialog{--rt-dialog-radius: var(--rt-radius-full)}:root{--rt-dialog-width-sm: 460px;--rt-dialog-width-md: 660px;--rt-dialog-width-lg: 860px;--rt-dialog-shadow: var(--rt-shadow-dialog);--rt-dialog-radius: var(--rt-radius-xl);--rt-dialog-backdrop-bg: var(--rt-overlay-navy-70);--rt-dialog-backdrop-blur: 5px}rt-dialog .rt-dialog{display:flex;overflow:hidden;width:var(--rt-dialog-width, var(--rt-dialog-width-md));max-width:90dvw;max-height:90dvh;flex-direction:column;padding:0;border:var(--rt-dialog-border, none);border-radius:var(--rt-dialog-radius);background:var(--rt-dialog-bg, var(--rt-color-bg-surface));box-shadow:var(--rt-dialog-shadow);color:var(--rt-color-text-primary)}rt-dialog .rt-dialog:focus{outline:none}rt-dialog .rt-dialog--size--sm{width:var(--rt-dialog-width, var(--rt-dialog-width-sm))}rt-dialog .rt-dialog--size--md{width:var(--rt-dialog-width, var(--rt-dialog-width-md))}rt-dialog .rt-dialog--size--lg{width:var(--rt-dialog-width, var(--rt-dialog-width-lg))}.rt-dialog-backdrop{-webkit-backdrop-filter:blur(var(--rt-dialog-backdrop-blur));backdrop-filter:blur(var(--rt-dialog-backdrop-blur));background:var(--rt-dialog-backdrop-bg)}.rt-dialog-overlay{display:flex;align-items:center;justify-content:center}}\n"]
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var RtDialogRef = class {
+	#overlayRef;
+	#afterClosedSource;
+	#isClosed;
+	constructor(overlayRef) {
+		this.disableClose = signal(false, ...ngDevMode ? [{ debugName: "disableClose" }] : /* istanbul ignore next */ []);
+		this.#afterClosedSource = new Subject();
+		this.#isClosed = false;
+		this.#overlayRef = overlayRef;
+		this.#overlayRef.detachments().pipe(take(1)).subscribe(() => this.#finish(void 0));
+	}
+	close(result) {
+		if (this.#isClosed) return;
+		this.#isClosed = true;
+		this.#overlayRef.dispose();
+		this.#afterClosedSource.next(result);
+		this.#afterClosedSource.complete();
+	}
+	afterClosed() {
+		return this.#afterClosedSource.asObservable();
+	}
+	#finish(result) {
+		if (this.#isClosed) return;
+		this.#isClosed = true;
+		this.#afterClosedSource.next(result);
+		this.#afterClosedSource.complete();
+	}
+};
+const RT_DIALOG_DATA = new InjectionToken("RT_DIALOG_DATA");
+var RtDialogService = class RtDialogService {
+	#overlay = inject(Overlay);
+	#injector = inject(Injector);
+	#document = inject(DOCUMENT);
+	#focusTrapFactory = inject(FocusTrapFactory);
+	#openSource = new Subject();
+	constructor() {
+		this.#openSource.pipe(mergeMap((openContext) => {
+			const backdropClose$ = openContext.closeOnBackdropClick ? openContext.overlayRef.backdropClick().pipe(map(() => () => {
+				if (openContext.dialogRef.disableClose()) return;
+				openContext.dialogRef.close();
+			})) : EMPTY;
+			const escapeClose$ = openContext.closeOnEscape ? openContext.overlayRef.keydownEvents().pipe(map((event) => () => {
+				if (event.key !== "Escape") return;
+				event.preventDefault();
+				if (openContext.dialogRef.disableClose()) return;
+				openContext.dialogRef.close();
+			})) : EMPTY;
+			const releaseFocus$ = openContext.overlayRef.detachments().pipe(take(1), map(() => () => this.#releaseFocus(openContext.focus)));
+			return merge(merge(backdropClose$, escapeClose$).pipe(takeUntil(openContext.overlayRef.detachments())), releaseFocus$);
+		}), takeUntilDestroyed()).subscribe((handleCloseIntent) => handleCloseIntent());
+	}
+	open(component, config) {
+		const overlayRef = this.#overlay.create({
+			positionStrategy: this.#overlay.position().global().centerHorizontally().centerVertically(),
+			scrollStrategy: this.#overlay.scrollStrategies.block(),
+			hasBackdrop: true,
+			backdropClass: config?.backdropClass ?? "rt-dialog-backdrop",
+			panelClass: [config?.panelClass ?? "rt-dialog-overlay", materialPresetClassesOfFocus(this.#document)].flat(),
+			disposeOnNavigation: true
+		});
+		carryThemeScopeOfFocus(overlayRef.overlayElement, this.#document);
+		const dialogRef = new RtDialogRef(overlayRef);
+		const focus = {
+			trap: null,
+			restoreTo: config?.restoreFocus === true ? this.#focusedElement() : null
+		};
+		this.#openSource.next({
+			overlayRef,
+			dialogRef,
+			focus,
+			closeOnBackdropClick: config?.closeOnBackdropClick !== false,
+			closeOnEscape: config?.closeOnEscape !== false
+		});
+		const injector = Injector.create({
+			parent: this.#injector,
+			providers: [{
+				provide: RtDialogRef,
+				useValue: dialogRef
+			}, {
+				provide: RT_DIALOG_DATA,
+				useValue: config?.data ?? null
+			}]
+		});
+		const portal = new ComponentPortal(component, null, injector);
+		overlayRef.attach(portal);
+		this.#holdFocus(overlayRef.overlayElement, focus, config?.trapFocus === true, config?.autoFocus ?? false);
+		return dialogRef;
+	}
+	#holdFocus(pane, focus, trapFocus, autoFocus) {
+		if (!trapFocus && autoFocus === false) return;
+		afterNextRender(() => {
+			if (trapFocus) focus.trap = this.#focusTrapFactory.create(pane);
+			switch (autoFocus) {
+				case "dialog":
+					pane.querySelector("[role=\"dialog\"]")?.focus();
+					break;
+				case "first-tabbable": this.#focusFirstTabbable(pane, focus.trap);
+			}
+		}, { injector: this.#injector });
+	}
+	#focusFirstTabbable(pane, trap) {
+		if (trap) {
+			trap.focusFirstTabbableElement();
+			return;
+		}
+		const lookup = this.#focusTrapFactory.create(pane);
+		lookup.focusFirstTabbableElement();
+		lookup.destroy();
+	}
+	#releaseFocus(focus) {
+		focus.trap?.destroy();
+		focus.trap = null;
+		if (focus.restoreTo?.isConnected) focus.restoreTo.focus();
+	}
+	#focusedElement() {
+		const active = this.#document.activeElement;
+		return active instanceof HTMLElement && active !== this.#document.body ? active : null;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDialogService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDialogService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDialogService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const BEM_BLOCK$2 = "rt-dialog-header";
+var RtDialogHeaderComponent = class RtDialogHeaderComponent {
+	constructor() {
+		this.#dialogRef = inject(RtDialogRef, { optional: true });
+		this.t = inject(RT_KIT_LABELS);
+		this.title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.closable = input(true, {
+			...ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+	}
+	#dialogRef;
+	onClose() {
+		this.#dialogRef?.close();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDialogHeaderComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtDialogHeaderComponent,
+			isStandalone: true,
+			selector: "rt-dialog-header",
+			inputs: {
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				closable: {
+					classPropertyName: "closable",
+					publicName: "closable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: { classAttribute: "rt-dialog-header" },
+			ngImport: i0,
+			template: "<header rtBlock=\"rt-dialog-header\" qa-dataid=\"dialog-header\">\n    <span rtElem=\"lead\" qa-dataid=\"dialog-header-lead\"><ng-content select=\"[rtDialogHeaderLead]\" /></span>\n    <h2 rtElem=\"title\" qa-dataid=\"dialog-title\">{{ title() }}</h2>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"dialog-close\"\n            icon=\"ico-close\"\n            size=\"sm\"\n            variant=\"ghost\"\n            [ariaLabel]=\"t().uiClose\"\n            (clicked)=\"onClose()\" />\n    }\n</header>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-header{display:contents}rt-dialog-header .rt-dialog-header{--rt-dialog-header-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;align-items:center;justify-content:space-between;padding:var(--rt-dialog-header-padding, var(--rt-space-lg));border-block-end:var(--rt-dialog-header-border, var(--rt-dialog-header-border-default));gap:var(--rt-space-sm)}rt-dialog-header .rt-dialog-header__lead{display:inline-flex;flex-shrink:0;align-items:center}rt-dialog-header .rt-dialog-header__lead:empty{display:none}rt-dialog-header .rt-dialog-header__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-dialog-title-font-size, var(--rt-text-xl));font-weight:var(--rt-dialog-title-weight, var(--rt-font-weight-bold));text-transform:var(--rt-dialog-title-transform, none)}rt-dialog-header .rt-dialog-header__close{margin-inline-start:auto}}\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: "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: RtDialogHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-dialog-header",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconButtonComponent,
+				BlockDirective,
+				ElemDirective
+			],
+			host: { class: BEM_BLOCK$2 },
+			template: "<header rtBlock=\"rt-dialog-header\" qa-dataid=\"dialog-header\">\n    <span rtElem=\"lead\" qa-dataid=\"dialog-header-lead\"><ng-content select=\"[rtDialogHeaderLead]\" /></span>\n    <h2 rtElem=\"title\" qa-dataid=\"dialog-title\">{{ title() }}</h2>\n    @if (closable()) {\n        <rt-icon-button\n            rtElem=\"close\"\n            qa-dataid=\"dialog-close\"\n            icon=\"ico-close\"\n            size=\"sm\"\n            variant=\"ghost\"\n            [ariaLabel]=\"t().uiClose\"\n            (clicked)=\"onClose()\" />\n    }\n</header>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-header{display:contents}rt-dialog-header .rt-dialog-header{--rt-dialog-header-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;align-items:center;justify-content:space-between;padding:var(--rt-dialog-header-padding, var(--rt-space-lg));border-block-end:var(--rt-dialog-header-border, var(--rt-dialog-header-border-default));gap:var(--rt-space-sm)}rt-dialog-header .rt-dialog-header__lead{display:inline-flex;flex-shrink:0;align-items:center}rt-dialog-header .rt-dialog-header__lead:empty{display:none}rt-dialog-header .rt-dialog-header__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-dialog-title-font-size, var(--rt-text-xl));font-weight:var(--rt-dialog-title-weight, var(--rt-font-weight-bold));text-transform:var(--rt-dialog-title-transform, none)}rt-dialog-header .rt-dialog-header__close{margin-inline-start:auto}}\n"]
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		closable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closable",
+				required: false
+			}]
+		}]
+	}
+});
+const BEM_BLOCK$1 = "rt-dialog-footer";
+var RtDialogFooterComponent = class RtDialogFooterComponent {
+	constructor() {
+		this.align = input("end", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDialogFooterComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			type: RtDialogFooterComponent,
+			isStandalone: true,
+			selector: "rt-dialog-footer",
+			inputs: { align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			host: { classAttribute: "rt-dialog-footer" },
+			ngImport: i0,
+			template: "<footer rtBlock=\"rt-dialog-footer\" qa-dataid=\"dialog-footer\" [rtMod]=\"{ align: align() }\">\n    <ng-content />\n</footer>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-footer{display:contents}rt-dialog-footer .rt-dialog-footer{--rt-dialog-footer-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;justify-content:flex-end;padding:var(--rt-dialog-footer-padding, var(--rt-space-lg));border-block-start:var(--rt-dialog-footer-border, var(--rt-dialog-footer-border-default));gap:var(--rt-space-sm)}rt-dialog-footer .rt-dialog-footer--align--start{justify-content:flex-start}rt-dialog-footer .rt-dialog-footer--align--center{justify-content:center}rt-dialog-footer .rt-dialog-footer--align--between{justify-content:space-between}rt-dialog-footer .rt-dialog-footer:empty{display:none}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: BlockDirective,
+				selector: "[rtBlock]",
+				inputs: ["rtMod"]
+			}, {
+				kind: "directive",
+				type: ModDirective,
+				selector: "[rtMod]"
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDialogFooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-dialog-footer",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [BlockDirective, ModDirective],
+			host: { class: BEM_BLOCK$1 },
+			template: "<footer rtBlock=\"rt-dialog-footer\" qa-dataid=\"dialog-footer\" [rtMod]=\"{ align: align() }\">\n    <ng-content />\n</footer>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-footer{display:contents}rt-dialog-footer .rt-dialog-footer{--rt-dialog-footer-border-default: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);display:flex;justify-content:flex-end;padding:var(--rt-dialog-footer-padding, var(--rt-space-lg));border-block-start:var(--rt-dialog-footer-border, var(--rt-dialog-footer-border-default));gap:var(--rt-space-sm)}rt-dialog-footer .rt-dialog-footer--align--start{justify-content:flex-start}rt-dialog-footer .rt-dialog-footer--align--center{justify-content:center}rt-dialog-footer .rt-dialog-footer--align--between{justify-content:space-between}rt-dialog-footer .rt-dialog-footer:empty{display:none}}\n"]
+		}]
+	}],
+	propDecorators: { align: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "align",
+			required: false
+		}]
+	}] }
+});
+const BEM_BLOCK = "rt-dialog-content";
+var RtDialogContentComponent = class RtDialogContentComponent {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDialogContentComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtDialogContentComponent,
+			isStandalone: true,
+			selector: "rt-dialog-content",
+			host: { classAttribute: "rt-dialog-content" },
+			ngImport: i0,
+			template: "<div rtBlock=\"rt-dialog-content\" qa-dataid=\"dialog-content\">\n    <ng-content />\n</div>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-content{display:contents}rt-dialog-content .rt-dialog-content{overflow:auto;min-height:0;max-height:var(--rt-dialog-content-max-height, none);flex:1 1 auto;padding:var(--rt-dialog-content-padding, var(--rt-space-lg))}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: BlockDirective,
+				selector: "[rtBlock]",
+				inputs: ["rtMod"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDialogContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-dialog-content",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [BlockDirective],
+			host: { class: BEM_BLOCK },
+			template: "<div rtBlock=\"rt-dialog-content\" qa-dataid=\"dialog-content\">\n    <ng-content />\n</div>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{rt-dialog-content{display:contents}rt-dialog-content .rt-dialog-content{overflow:auto;min-height:0;max-height:var(--rt-dialog-content-max-height, none);flex:1 1 auto;padding:var(--rt-dialog-content-padding, var(--rt-space-lg))}}\n"]
+		}]
+	}]
+});
 export { RT_DIALOG_DATA, RtDialogComponent, RtDialogContentComponent, RtDialogFooterComponent, RtDialogHeaderComponent, RtDialogRef, RtDialogService };
-//# sourceMappingURL=rt-tools-ui-kit-v2-dialog.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-dialog.mjs.map