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

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

@@ -0,0 +1,537 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, DestroyRef, contentChild, computed, input, booleanAttribute, output, isDevMode, effect, viewChild, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RouterLink } from '@angular/router';
+import { Subject, mergeMap } from 'rxjs';
+import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
+import { RT_KIT_LABELS, rtKitLabel, carryThemeScope, materialPresetClassesOf } from '@rt-tools/ui-kit-v2/core';
+import { RT_DIALOG_DATA, RtDialogRef, RtDialogComponent, RtDialogService } from '@rt-tools/ui-kit-v2/dialog';
+import { materialPairOf, RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import * as i2 from '@rt-tools/ui-kit-v2/radius';
+import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
+import * as i1 from '@rt-tools/ui-kit-v2/tooltip';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import * as i1$1 from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+
+/**
+ * Помечает `<ng-template>` своего значка пункта меню. Кит ставит содержимое на место значка
+ * `rt-menu-item__icon` его размером и цветом тона пункта — так приложение рисует значок, которого
+ * нет ни в наборе кита, ни в перечне имён Material. Свой значок сильнее `icon` и `glyph`.
+ *
+ * ```html
+ * <rt-menu-item label="Сделать активным">
+ *     <ng-template rtMenuItemIcon><svg viewBox="0 0 24 24">…</svg></ng-template>
+ * </rt-menu-item>
+ * ```
+ */
+class RtMenuItemIconDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMenuItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtMenuItemIconDirective, isStandalone: true, selector: "ng-template[rtMenuItemIcon]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMenuItemIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rtMenuItemIcon]',
+                }]
+        }] });
+
+const BEM_BLOCK$2 = 'rt-menu-confirm-dialog';
+/**
+ * Confirm-модалка деструктивного пункта `rt-menu-item`. Открывается через
+ * `RtDialogService` (центрированный overlay поверх меню), возвращает `true`
+ * при подтверждении и `false`/`undefined` при отмене.
+ *
+ * Модалка (а не popover-под-пунктом) нужна потому, что панель `rt-menu` сама
+ * живёт в CDK Overlay: вложенный popover-overlay конфликтовал бы с её
+ * backdrop/закрытием. Внутренний компонент — не экспортируется из `components`, это
+ * деталь реализации confirm-флоу пункта меню.
+ */
+class RtMenuConfirmDialogComponent {
+    constructor() {
+        this.t = inject(RT_KIT_LABELS);
+        this.data = inject(RT_DIALOG_DATA);
+        this.#dialogRef = inject(RtDialogRef);
+    }
+    #dialogRef;
+    onConfirm() {
+        this.#dialogRef.close(true);
+    }
+    onCancel() {
+        this.#dialogRef.close(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMenuConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtMenuConfirmDialogComponent, isStandalone: true, selector: "rt-menu-confirm-dialog", host: { classAttribute: "rt-menu-confirm-dialog" }, ngImport: i0, template: "<rt-dialog width=\"360px\" [ariaLabel]=\"t().uiConfirmAction\">\n    <div rtBlock=\"rt-menu-confirm-dialog\">\n        <div rtElem=\"text\">\n            @if (data.title; as title) {\n                <h2 rtElem=\"title\" qa-dataid=\"menu-confirm-title\">{{ title }}</h2>\n            }\n            <p rtElem=\"message\" qa-dataid=\"menu-confirm-message\">{{ data.message }}</p>\n        </div>\n        <div rtElem=\"footer\">\n            <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n            <button\n                rtButton\n                qa-dataid=\"menu-confirm-cancel\"\n                type=\"button\"\n                appearance=\"text\"\n                theme=\"secondary\"\n                [label]=\"data.cancelLabel\"\n                (click)=\"onCancel()\"></button>\n            <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n            <button\n                rtButton\n                qa-dataid=\"menu-confirm-accept\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"data.confirmLabel\"\n                [theme]=\"data.tone\"\n                (click)=\"onConfirm()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-menu-confirm-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-menu-confirm-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-menu-confirm-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-menu-confirm-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-menu-confirm-dialog__footer{display:flex;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: RtMenuConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-menu-confirm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtButtonDirective,
+                        RtDialogComponent,
+                        BlockDirective,
+                        ElemDirective,
+                    ], host: {
+                        class: BEM_BLOCK$2,
+                    }, template: "<rt-dialog width=\"360px\" [ariaLabel]=\"t().uiConfirmAction\">\n    <div rtBlock=\"rt-menu-confirm-dialog\">\n        <div rtElem=\"text\">\n            @if (data.title; as title) {\n                <h2 rtElem=\"title\" qa-dataid=\"menu-confirm-title\">{{ title }}</h2>\n            }\n            <p rtElem=\"message\" qa-dataid=\"menu-confirm-message\">{{ data.message }}</p>\n        </div>\n        <div rtElem=\"footer\">\n            <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n            <button\n                rtButton\n                qa-dataid=\"menu-confirm-cancel\"\n                type=\"button\"\n                appearance=\"text\"\n                theme=\"secondary\"\n                [label]=\"data.cancelLabel\"\n                (click)=\"onCancel()\"></button>\n            <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->\n            <button\n                rtButton\n                qa-dataid=\"menu-confirm-accept\"\n                type=\"button\"\n                appearance=\"filled\"\n                [label]=\"data.confirmLabel\"\n                [theme]=\"data.tone\"\n                (click)=\"onConfirm()\"></button>\n        </div>\n    </div>\n</rt-dialog>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-menu-confirm-dialog{display:flex;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-xl);gap:var(--rt-space-lg)}.rt-menu-confirm-dialog__text{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-menu-confirm-dialog__title{margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-md);font-weight:var(--rt-font-weight-bold)}.rt-menu-confirm-dialog__message{margin:0;color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-menu-confirm-dialog__footer{display:flex;justify-content:flex-end;gap:var(--rt-space-sm)}}\n"] }]
+        }] });
+
+/** Значок пункта: свой `icon`, а без него — пара имени Material из перечня кита. */
+function menuItemIconName(icon, glyph) {
+    if (icon !== null) {
+        return icon;
+    }
+    return materialPairOf(glyph);
+}
+/**
+ * Имя Material, о котором пункт должен предупредить: у него нет пары в перечне кита, а ни `icon`,
+ * ни своего значка нет. Тогда пункт рисуется без значка, и без предупреждения пропуск не заметен.
+ * `null` — предупреждать не о чем.
+ */
+function unpairedGlyph(icon, glyph, hasOwnIcon) {
+    if (!glyph || hasOwnIcon || menuItemIconName(icon, glyph) !== null) {
+        return null;
+    }
+    return glyph;
+}
+
+/**
+ * Имя DOM-события, которое `rt-menu-item` всплывающе диспатчит при выборе пункта.
+ * `rt-menu` слушает его на панели и закрывается. DOM-событие (а не DI/output)
+ * нужно потому, что пункты проецируются в overlay-панель — всплытие через DOM
+ * переживает границы content-projection и overlay-контейнера.
+ */
+const RT_MENU_SELECT_EVENT = 'rtMenuSelect';
+
+const BEM_BLOCK$1 = 'rt-menu-item';
+/**
+ * Пункт меню `rt-menu`: иконка (опц.) + лейбл. Кликабелен и активируется с
+ * клавиатуры (Enter/Space). Выбор пункта эмитит `(selected)` для потребителя
+ * и всплывающе диспатчит DOM-событие `rtMenuSelect`, по которому `rt-menu`
+ * закрывается. `disabled` блокирует и `(selected)`, и закрытие.
+ *
+ * Tooltip — через host-директиву `RtTooltipDirective` (`tooltip` маппится в
+ * `rtTooltip`): полезно показать причину недоступности на `disabled`-пункте.
+ *
+ * Деструктивный пункт может требовать подтверждения: задайте `confirmMessage`
+ * (опц. `confirmTitle` / `confirmLabel` / `confirmTone`) — тогда по выбору
+ * сперва открывается центрированная confirm-модалка, и `(selected)` эмитится
+ * только после подтверждения. Модалка (а не popover) нужна потому, что панель
+ * `rt-menu` сама в CDK Overlay; меню остаётся открытым под backdrop'ом, пока
+ * пользователь решает.
+ *
+ * `ViewEncapsulation.None`; стили префиксованы `.rt-menu-item`. Host несёт
+ * BEM-класс блока (template-`<ng-container rtBlock>` даёт контекст для `rtElem`,
+ * но класс на comment-node не вешает — см. host-class паттерн rt-icon-button).
+ */
+class RtMenuItemComponent {
+    #elementRef;
+    #dialogService;
+    #destroyRef;
+    #confirmRequestSource;
+    #t_uiConfirm;
+    #t_uiCancel;
+    constructor() {
+        this.#elementRef = inject(ElementRef);
+        this.#dialogService = inject(RtDialogService);
+        this.#destroyRef = inject(DestroyRef);
+        this.#confirmRequestSource = new Subject();
+        this.#t_uiConfirm = rtKitLabel('uiConfirm');
+        this.#t_uiCancel = rtKitLabel('uiCancel');
+        /** Свой значок приложения — `<ng-template rtMenuItemIcon>` внутри пункта. */
+        this.ownIcon = contentChild(RtMenuItemIconDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ownIcon" }] : /* istanbul ignore next */ []));
+        /** Значок пункта: свой `icon`, а без него — пара имени Material из перечня кита. */
+        this.iconName = computed(() => menuItemIconName(this.icon(), this.glyph()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+        /** Пункт — ссылка: задан `link`. Роль пункта меню и фокус тогда несёт ссылка внутри. */
+        this.isLink = computed(() => this.link() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
+        /** Адрес для ссылки: у недоступного пункта его нет, и ссылка не переходит. */
+        this.linkTarget = computed(() => this.disabled() ? null : this.link(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkTarget" }] : /* istanbul ignore next */ []));
+        /** Иконка слева от лейбла. `null` — без иконки. */
+        this.icon = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Текст пункта. */
+        this.label = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Деструктивный пункт (например «Удалить») — красный текст/иконка. */
+        this.danger = input(false, { ...(ngDevMode ? { debugName: "danger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Пункт-согласие (например «Принять») — зелёный текст и иконка, как тон `success` пунктов первого кита. */
+        this.success = input(false, { ...(ngDevMode ? { debugName: "success" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Имя значка Material, как его пишет пункт меню первого кита (`check_circle`). Рисует его набор
+         * кита через перечень соответствий; `icon` сильнее, а имя без пары рисует пункт без значка.
+         */
+        this.glyph = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+        /**
+         * Залитый значок вместо контурного — как значки пунктов меню первого кита. Уходит в `fill`
+         * значка: действует в материальном наборе, свой набор рисует значок одним рисунком. Свой
+         * значок `rtMenuItemIcon` приложение рисует само, и заливка его не касается.
+         */
+        this.fill = input(false, { ...(ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Пункт — нынешнее значение выбора, который открыл меню: подсвечен фоном и объявлен скринридеру. */
+        this.current = input(false, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Недоступный пункт — приглушён, не эмитит `(selected)` и не закрывает меню. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Текст confirm-модалки. Непустое значение включает подтверждение: по выбору
+         * пункта открывается модалка, и `(selected)` эмитится только после согласия.
+         */
+        this.confirmMessage = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confirmMessage" }] : /* istanbul ignore next */ []));
+        /** Заголовок confirm-модалки (опц.). */
+        this.confirmTitle = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confirmTitle" }] : /* istanbul ignore next */ []));
+        /** Лейбл подтверждающей кнопки в модалке. */
+        /** Пусто — берётся переведённая подпись по умолчанию */
+        this.confirmLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+        /** Лейбл кнопки отмены в модалке. */
+        this.confirmCancelLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confirmCancelLabel" }] : /* istanbul ignore next */ []));
+        /** Тон подтверждающей кнопки в модалке. */
+        this.confirmTone = input('danger', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confirmTone" }] : /* istanbul ignore next */ []));
+        /**
+         * Команды маршрута приложения, как у `routerLink`. Задан — пункт рисует ссылку с `href`: Enter и
+         * клик переходят по ней, а Ctrl/Cmd-click, Shift-click и средняя кнопка открывают новую вкладку
+         * или окно силами браузера. Меню закрывается во всех этих случаях; подтверждение не спрашивается.
+         */
+        this.link = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []));
+        /** Пункт выбран (клик/Enter/Space и не `disabled`; после подтверждения, если задано). */
+        this.selected = output();
+        // Имя Material без пары рисует пункт без значка, и пропуск без предупреждения не заметен.
+        if (isDevMode()) {
+            effect(() => {
+                const glyph = unpairedGlyph(this.icon(), this.glyph(), this.ownIcon() !== undefined);
+                if (glyph !== null) {
+                    // eslint-disable-next-line no-console -- предупреждение разработчику приложения: другого канала у кита нет
+                    console.warn(`rt-menu-item «${this.label()}»: у значка Material «${glyph}» нет пары в перечне кита. ` +
+                        'Задайте icon или свой значок через <ng-template rtMenuItemIcon>.');
+                }
+            });
+        }
+        // Подписка на результат confirm-модалки объявлена один раз: #openConfirm
+        // эмитит данные модалки, mergeMap открывает её и ждёт afterClosed()
+        // (одноразовый стрим — комплитится при закрытии модалки).
+        this.#confirmRequestSource
+            .pipe(mergeMap((data) => this.#dialogService
+            .open(RtMenuConfirmDialogComponent, { data })
+            .afterClosed()), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((confirmed = false) => {
+            if (confirmed === true) {
+                this.#commitSelection();
+            }
+        });
+    }
+    onActivate(event) {
+        if (this.disabled()) {
+            // Гасим, чтобы клик по disabled-пункту не «протёк» наружу.
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        const message = this.confirmMessage().trim();
+        if (message !== '' && !this.isLink()) {
+            // Не закрываем меню сразу: оно остаётся открытым под backdrop'ом
+            // модалки, чтобы пункт пережил решение пользователя (отмена → меню
+            // снова видно). Подтверждение коммитит выбор.
+            this.#openConfirm(message);
+            return;
+        }
+        this.#commitSelection();
+    }
+    onKey(event) {
+        if (this.isLink()) {
+            this.#onLinkKey(event);
+            return;
+        }
+        // Space иначе проскроллит страницу — гасим дефолт перед активацией.
+        event.preventDefault();
+        this.onActivate(event);
+    }
+    /** Средняя кнопка не даёт `click`: вкладку открывает браузер, а меню закрываем сами. */
+    onAuxClick(event) {
+        if (this.isLink() && event.button === 1 && !this.disabled()) {
+            this.#commitSelection();
+        }
+    }
+    /**
+     * Enter на ссылке браузер сам превращает в `click`, и переход делает `routerLink`. Пробел ссылка
+     * не нажимает — его переводим в тот же `click`, погасив прокрутку страницы.
+     */
+    #onLinkKey(event) {
+        if (event instanceof KeyboardEvent && event.key === ' ') {
+            event.preventDefault();
+            this.#elementRef.nativeElement.querySelector('a')?.click();
+        }
+    }
+    #openConfirm(message) {
+        const data = {
+            message,
+            title: this.confirmTitle(),
+            confirmLabel: this.confirmLabel() || this.#t_uiConfirm(),
+            cancelLabel: this.confirmCancelLabel() || this.#t_uiCancel(),
+            tone: this.confirmTone(),
+        };
+        // Открытие модалки и подписка на результат — в конструкторном стриме
+        // (см. #confirmRequestSource); здесь только эмит данных модалки.
+        this.#confirmRequestSource.next(data);
+    }
+    #commitSelection() {
+        this.selected.emit();
+        // Закрыть родительское меню: событие всплывает к панели rt-menu в overlay.
+        this.#elementRef.nativeElement.dispatchEvent(new CustomEvent(RT_MENU_SELECT_EVENT, { bubbles: true }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtMenuItemComponent, isStandalone: true, selector: "rt-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, confirmMessage: { classPropertyName: "confirmMessage", publicName: "confirmMessage", isSignal: true, isRequired: false, transformFunction: null }, confirmTitle: { classPropertyName: "confirmTitle", publicName: "confirmTitle", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmCancelLabel: { classPropertyName: "confirmCancelLabel", publicName: "confirmCancelLabel", isSignal: true, isRequired: false, transformFunction: null }, confirmTone: { classPropertyName: "confirmTone", publicName: "confirmTone", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "onActivate($event)", "auxclick": "onAuxClick($event)", "keydown.enter": "onKey($event)", "keydown.space": "onKey($event)" }, properties: { "attr.role": "isLink() ? 'none' : 'menuitem'", "class.rt-menu-item--danger": "danger()", "class.rt-menu-item--success": "success()", "class.rt-menu-item--disabled": "disabled()", "class.rt-menu-item--current": "current()", "class.rt-menu-item--link": "isLink()", "attr.aria-current": "current() && !isLink() ? 'true' : null", "attr.aria-disabled": "disabled() && !isLink() ? 'true' : null", "attr.tabindex": "disabled() || isLink() ? null : 0" }, classAttribute: "rt-menu-item" }, queries: [{ propertyName: "ownIcon", first: true, predicate: RtMenuItemIconDirective, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RtTooltipDirective, inputs: ["rtTooltip", "tooltip"] }, { directive: i2.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-menu-item\">\n    @if (isLink()) {\n        <a\n            rtElem=\"link\"\n            role=\"menuitem\"\n            qa-dataid=\"menu-item-link\"\n            [routerLink]=\"linkTarget()\"\n            [attr.aria-current]=\"current() ? 'true' : null\"\n            [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n            [attr.tabindex]=\"disabled() ? null : 0\">\n            <ng-container [ngTemplateOutlet]=\"content\" />\n        </a>\n    } @else {\n        <ng-container [ngTemplateOutlet]=\"content\" />\n    }\n\n    <ng-template #content>\n        @if (ownIcon(); as own) {\n            <span rtElem=\"icon\" qa-dataid=\"menu-item-own-icon\" aria-hidden=\"true\" [rtMod]=\"{ own: true }\">\n                <ng-container [ngTemplateOutlet]=\"own.templateRef\" />\n            </span>\n        } @else if (iconName(); as name) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"name\" [fill]=\"fill()\" />\n        }\n\n        <span rtElem=\"label\" qa-dataid=\"menu-item-label\">{{ label() }}</span>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-menu-item{--rt-menu-item-radius: var(--rt-radius-sm);--rt-menu-item-transition-duration: var(--rt-duration-fast);--rt-menu-item-weight: var(--rt-overlay-menu-item-weight);--rt-menu-item-danger-color: var(--rt-overlay-menu-danger-color);--rt-menu-item-current-bg: var(--rt-overlay-menu-current-bg);--rt-menu-item-min-height: var(--rt-overlay-menu-item-min-height);--rt-menu-item-padding-y: var(--rt-overlay-menu-item-padding-y);--rt-menu-item-padding-x: var(--rt-overlay-menu-item-padding-x);--rt-menu-item-icon-size: var(--rt-overlay-menu-item-icon-size);--rt-menu-item-danger-label-color: var(--rt-overlay-menu-danger-label-color);--rt-menu-item-success-color: var(--rt-color-state-success-text);display:flex;width:100%;min-height:var(--rt-menu-item-min-height);box-sizing:border-box;align-items:center;padding:var(--rt-menu-item-padding-y) var(--rt-menu-item-padding-x);border-radius:var(--rt-menu-item-radius);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-text-sm);font-weight:var(--rt-menu-item-weight);gap:var(--rt-space-sm);text-align:start;transition:background-color var(--rt-menu-item-transition-duration) ease}.rt-menu-item:hover{background:var(--rt-color-bg-hover)}.rt-menu-item:focus-visible{background:var(--rt-color-bg-hover);outline:none}.rt-menu-item__icon{min-width:var(--rt-menu-item-icon-size);max-width:var(--rt-menu-item-icon-size);min-height:var(--rt-menu-item-icon-size);max-height:var(--rt-menu-item-icon-size);flex-shrink:0;color:var(--rt-color-text-muted)}.rt-menu-item__icon--own{display:inline-flex;width:var(--rt-menu-item-icon-size);height:var(--rt-menu-item-icon-size);align-items:center;justify-content:center;font-size:var(--rt-menu-item-icon-size);line-height:1}.rt-menu-item__icon--own>*{max-width:100%;max-height:100%}.rt-menu-item__label{flex:1 1 auto;white-space:nowrap}.rt-menu-item--link{padding:0}.rt-menu-item__link{display:flex;min-width:0;min-height:var(--rt-menu-item-min-height);box-sizing:border-box;flex:1 1 auto;align-items:center;padding:var(--rt-menu-item-padding-y) var(--rt-menu-item-padding-x);border-radius:var(--rt-menu-item-radius);color:inherit;gap:var(--rt-space-sm);text-decoration:none}.rt-menu-item__link:focus-visible{background:var(--rt-color-bg-hover);outline:none}.rt-menu-item--current{background:var(--rt-menu-item-current-bg)}.rt-menu-item--danger{color:var(--rt-menu-item-danger-label-color)}.rt-menu-item--danger .rt-menu-item__icon{color:var(--rt-menu-item-danger-color)}.rt-menu-item--success,.rt-menu-item--success .rt-menu-item__icon{color:var(--rt-menu-item-success-color)}.rt-menu-item--disabled{color:var(--rt-color-text-muted);cursor:default;opacity:.5}.rt-menu-item--disabled:hover{background:transparent}.rt-menu-item[data-rt-radius=none]{--rt-menu-item-radius: var(--rt-radius-none)}.rt-menu-item[data-rt-radius=xs]{--rt-menu-item-radius: var(--rt-radius-xs)}.rt-menu-item[data-rt-radius=sm]{--rt-menu-item-radius: var(--rt-radius-sm)}.rt-menu-item[data-rt-radius=ms]{--rt-menu-item-radius: var(--rt-radius-ms)}.rt-menu-item[data-rt-radius=md]{--rt-menu-item-radius: var(--rt-radius-md)}.rt-menu-item[data-rt-radius=lg]{--rt-menu-item-radius: var(--rt-radius-lg)}.rt-menu-item[data-rt-radius=xl]{--rt-menu-item-radius: var(--rt-radius-xl)}.rt-menu-item[data-rt-radius=\"2xl\"]{--rt-menu-item-radius: var(--rt-radius-2xl)}.rt-menu-item[data-rt-radius=full]{--rt-menu-item-radius: var(--rt-radius-full)}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-menu-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconComponent,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        NgTemplateOutlet,
+                        RouterLink,
+                    ], hostDirectives: [
+                        {
+                            directive: RtTooltipDirective,
+                            inputs: ['rtTooltip: tooltip'],
+                        },
+                        { directive: RtRadiusDirective, inputs: ['radius'] },
+                    ], host: {
+                        class: BEM_BLOCK$1,
+                        '[attr.role]': "isLink() ? 'none' : 'menuitem'",
+                        '[class.rt-menu-item--danger]': 'danger()',
+                        '[class.rt-menu-item--success]': 'success()',
+                        '[class.rt-menu-item--disabled]': 'disabled()',
+                        '[class.rt-menu-item--current]': 'current()',
+                        '[class.rt-menu-item--link]': 'isLink()',
+                        '[attr.aria-current]': "current() && !isLink() ? 'true' : null",
+                        '[attr.aria-disabled]': "disabled() && !isLink() ? 'true' : null",
+                        '[attr.tabindex]': 'disabled() || isLink() ? null : 0',
+                        '(click)': 'onActivate($event)',
+                        '(auxclick)': 'onAuxClick($event)',
+                        '(keydown.enter)': 'onKey($event)',
+                        '(keydown.space)': 'onKey($event)',
+                    }, template: "<ng-container rtBlock=\"rt-menu-item\">\n    @if (isLink()) {\n        <a\n            rtElem=\"link\"\n            role=\"menuitem\"\n            qa-dataid=\"menu-item-link\"\n            [routerLink]=\"linkTarget()\"\n            [attr.aria-current]=\"current() ? 'true' : null\"\n            [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n            [attr.tabindex]=\"disabled() ? null : 0\">\n            <ng-container [ngTemplateOutlet]=\"content\" />\n        </a>\n    } @else {\n        <ng-container [ngTemplateOutlet]=\"content\" />\n    }\n\n    <ng-template #content>\n        @if (ownIcon(); as own) {\n            <span rtElem=\"icon\" qa-dataid=\"menu-item-own-icon\" aria-hidden=\"true\" [rtMod]=\"{ own: true }\">\n                <ng-container [ngTemplateOutlet]=\"own.templateRef\" />\n            </span>\n        } @else if (iconName(); as name) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"name\" [fill]=\"fill()\" />\n        }\n\n        <span rtElem=\"label\" qa-dataid=\"menu-item-label\">{{ label() }}</span>\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-menu-item{--rt-menu-item-radius: var(--rt-radius-sm);--rt-menu-item-transition-duration: var(--rt-duration-fast);--rt-menu-item-weight: var(--rt-overlay-menu-item-weight);--rt-menu-item-danger-color: var(--rt-overlay-menu-danger-color);--rt-menu-item-current-bg: var(--rt-overlay-menu-current-bg);--rt-menu-item-min-height: var(--rt-overlay-menu-item-min-height);--rt-menu-item-padding-y: var(--rt-overlay-menu-item-padding-y);--rt-menu-item-padding-x: var(--rt-overlay-menu-item-padding-x);--rt-menu-item-icon-size: var(--rt-overlay-menu-item-icon-size);--rt-menu-item-danger-label-color: var(--rt-overlay-menu-danger-label-color);--rt-menu-item-success-color: var(--rt-color-state-success-text);display:flex;width:100%;min-height:var(--rt-menu-item-min-height);box-sizing:border-box;align-items:center;padding:var(--rt-menu-item-padding-y) var(--rt-menu-item-padding-x);border-radius:var(--rt-menu-item-radius);color:var(--rt-color-text-primary);cursor:pointer;font-size:var(--rt-text-sm);font-weight:var(--rt-menu-item-weight);gap:var(--rt-space-sm);text-align:start;transition:background-color var(--rt-menu-item-transition-duration) ease}.rt-menu-item:hover{background:var(--rt-color-bg-hover)}.rt-menu-item:focus-visible{background:var(--rt-color-bg-hover);outline:none}.rt-menu-item__icon{min-width:var(--rt-menu-item-icon-size);max-width:var(--rt-menu-item-icon-size);min-height:var(--rt-menu-item-icon-size);max-height:var(--rt-menu-item-icon-size);flex-shrink:0;color:var(--rt-color-text-muted)}.rt-menu-item__icon--own{display:inline-flex;width:var(--rt-menu-item-icon-size);height:var(--rt-menu-item-icon-size);align-items:center;justify-content:center;font-size:var(--rt-menu-item-icon-size);line-height:1}.rt-menu-item__icon--own>*{max-width:100%;max-height:100%}.rt-menu-item__label{flex:1 1 auto;white-space:nowrap}.rt-menu-item--link{padding:0}.rt-menu-item__link{display:flex;min-width:0;min-height:var(--rt-menu-item-min-height);box-sizing:border-box;flex:1 1 auto;align-items:center;padding:var(--rt-menu-item-padding-y) var(--rt-menu-item-padding-x);border-radius:var(--rt-menu-item-radius);color:inherit;gap:var(--rt-space-sm);text-decoration:none}.rt-menu-item__link:focus-visible{background:var(--rt-color-bg-hover);outline:none}.rt-menu-item--current{background:var(--rt-menu-item-current-bg)}.rt-menu-item--danger{color:var(--rt-menu-item-danger-label-color)}.rt-menu-item--danger .rt-menu-item__icon{color:var(--rt-menu-item-danger-color)}.rt-menu-item--success,.rt-menu-item--success .rt-menu-item__icon{color:var(--rt-menu-item-success-color)}.rt-menu-item--disabled{color:var(--rt-color-text-muted);cursor:default;opacity:.5}.rt-menu-item--disabled:hover{background:transparent}.rt-menu-item[data-rt-radius=none]{--rt-menu-item-radius: var(--rt-radius-none)}.rt-menu-item[data-rt-radius=xs]{--rt-menu-item-radius: var(--rt-radius-xs)}.rt-menu-item[data-rt-radius=sm]{--rt-menu-item-radius: var(--rt-radius-sm)}.rt-menu-item[data-rt-radius=ms]{--rt-menu-item-radius: var(--rt-radius-ms)}.rt-menu-item[data-rt-radius=md]{--rt-menu-item-radius: var(--rt-radius-md)}.rt-menu-item[data-rt-radius=lg]{--rt-menu-item-radius: var(--rt-radius-lg)}.rt-menu-item[data-rt-radius=xl]{--rt-menu-item-radius: var(--rt-radius-xl)}.rt-menu-item[data-rt-radius=\"2xl\"]{--rt-menu-item-radius: var(--rt-radius-2xl)}.rt-menu-item[data-rt-radius=full]{--rt-menu-item-radius: var(--rt-radius-full)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ownIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtMenuItemIconDirective), { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], success: [{ type: i0.Input, args: [{ isSignal: true, alias: "success", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], confirmMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmMessage", required: false }] }], confirmTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmTitle", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }], confirmCancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmCancelLabel", required: false }] }], confirmTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmTone", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+
+const BEM_BLOCK = 'rt-menu';
+const POSITION_BELOW_END = {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetY: 4,
+};
+const POSITION_ABOVE_END = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    offsetY: -4,
+};
+const POSITION_BELOW_START = {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetY: 4,
+};
+const POSITION_ABOVE_START = {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetY: -4,
+};
+/**
+ * Dropdown-меню действий: icon-only триггер «…» + плавающая панель с пунктами
+ * `rt-menu-item`, спроецированными через `<ng-content>`. Типовое применение —
+ * per-row действия в конце строки `rt-table` (см. `[showRowActions]`).
+ *
+ * Движок — CDK `cdkConnectedOverlay` с прозрачным backdrop: авто-flip у края
+ * viewport (4 fallback-позиции), backdrop-click и `(detach)` закрывают, Escape
+ * закрывает через `(overlayKeydown)`. Панель не режется `overflow: hidden`
+ * предками (таблицы, карточки), т.к. рендерится в overlay-контейнере.
+ *
+ * Выбор пункта закрывает меню: `rt-menu-item` всплывающе диспатчит DOM-событие
+ * `rtMenuSelect`, которое панель ловит, — это переживает content-projection.
+ *
+ * @example
+ * ```html
+ * <rt-menu ariaLabel="Действия">
+ *     <rt-menu-item icon="ico-edit" label="Редактировать" (selected)="edit()" />
+ *     <rt-menu-item icon="ico-trash" label="Удалить" danger (selected)="remove()" />
+ * </rt-menu>
+ * ```
+ */
+class RtMenuComponent {
+    constructor() {
+        this.#host = inject(ElementRef);
+        this.#t_uiActions = rtKitLabel('uiActions');
+        /** Ход стрелками по пунктам открытой панели; у закрытой его нет. */
+        this.#keyManager = null;
+        this.overlay = viewChild.required(CdkConnectedOverlay, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
+        this.trigger = viewChild.required(CdkOverlayOrigin, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.isOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        /** Класс набора, найденный над меню при открытии: панель лежит вне контейнера с признаком. */
+        this.presetClasses = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "presetClasses" }] : /* istanbul ignore next */ []));
+        /** Классы панели: заданные входом и класс набора. */
+        this.panelClasses = computed(() => {
+            const own = this.panelClass();
+            return [...(Array.isArray(own) ? own : own.split(/\s+/).filter(Boolean)), ...this.presetClasses()];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+        this.ariaText = computed(() => this.ariaLabel() || this.#t_uiActions(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaText" }] : /* istanbul ignore next */ []));
+        /** Fallback-цепочка позиций панели: первой идёт сторона по `align`. */
+        this.overlayPositions = computed(() => this.align() === 'end'
+            ? [POSITION_BELOW_END, POSITION_ABOVE_END, POSITION_BELOW_START, POSITION_ABOVE_START]
+            : [POSITION_BELOW_START, POSITION_ABOVE_START, POSITION_BELOW_END, POSITION_ABOVE_END], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "overlayPositions" }] : /* istanbul ignore next */ []));
+        /** Иконка триггера. Default `ellipsis-h` («…» — три точки в конце строки). */
+        this.icon = input('ellipsis-h', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** ARIA-метка триггера (icon-only кнопка) + текст tooltip'а. */
+        /** Пусто — берётся переведённая подпись по умолчанию */
+        this.ariaLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Сторона раскрытия панели относительно триггера. */
+        this.align = input('end', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /**
+         * Классы панели. Панель живёт поверх страницы, вне хоста меню, и признаки вида над хостом до неё
+         * не доходят: семья, нарисованная своим набором, отдаёт его панели этим входом.
+         */
+        this.panelClass = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+        /** Размер панели: компактная — у меню действий строки таблицы. */
+        this.size = input('md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Триггер отключён — меню не открыть. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Панель открылась (`true`) или закрылась (`false`); повтор того же состояния не приходит. */
+        this.openedChange = output();
+    }
+    #host;
+    #t_uiActions;
+    /** Ход стрелками по пунктам открытой панели; у закрытой его нет. */
+    #keyManager;
+    toggle(event) {
+        // Клик по триггеру не должен активировать строку таблицы под ним.
+        event.stopPropagation();
+        this.#setOpen(!this.isOpen());
+    }
+    close() {
+        this.#setOpen(false);
+    }
+    /**
+     * Панель легла на страницу — фокус уходит на первый пункт, как у меню Material. Пункты берутся
+     * из разметки панели, а не запросом компонентов: таблица кладёт их шаблоном приложения, и
+     * запрос содержимого меню их не видит.
+     */
+    onAttach() {
+        const pane = this.overlay().overlayRef.overlayElement;
+        // Тема куска `rtTheme` вокруг меню едет на коробку панели, как у поповера и подсказки:
+        // панель лежит в конце страницы, и без этого меню из тёмной карточки рисовалось темой
+        // страницы. Зовётся на каждом открытии — кусок вокруг кнопки мог смениться.
+        carryThemeScope(pane, this.trigger().elementRef.nativeElement);
+        const nodes = Array.from(pane.querySelectorAll('[role="menuitem"]'));
+        const focusables = nodes.map((node) => ({
+            disabled: node.getAttribute('aria-disabled') === 'true',
+            focus: () => node.focus(),
+        }));
+        this.#keyManager = new FocusKeyManager(focusables).withWrap().withHomeAndEnd();
+        this.#keyManager.setFirstItemActive();
+    }
+    /** Выбранный пункт закрывает панель и возвращает фокус кнопке, откуда меню открыли. */
+    onSelect() {
+        this.close();
+        this.#focusTrigger();
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.close();
+            this.#focusTrigger();
+            return;
+        }
+        if (event.key === 'Tab') {
+            // Tab уводит фокус дальше по порядку — панель за ним не остаётся. Панель лежит в конце
+            // страницы, и без возврата Tab ушёл бы с неё в никуда: фокус ставится на кнопку, а
+            // умолчание клавиши не отменяется — браузер ведёт его от кнопки к следующему, как у
+            // меню Material.
+            this.close();
+            this.#focusTrigger();
+            return;
+        }
+        this.#keyManager?.onKeydown(event);
+    }
+    #focusTrigger() {
+        this.trigger().elementRef.nativeElement.querySelector('button')?.focus();
+    }
+    #setOpen(open) {
+        if (open !== this.isOpen()) {
+            if (!open) {
+                this.#keyManager?.destroy();
+                this.#keyManager = null;
+            }
+            if (open) {
+                this.presetClasses.set(materialPresetClassesOf(this.#host.nativeElement));
+            }
+            this.isOpen.set(open);
+            this.openedChange.emit(open);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: RtMenuComponent, isStandalone: true, selector: "rt-menu", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { properties: { "class.rt-menu--open": "isOpen()" }, classAttribute: "rt-menu" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }], ngImport: i0, template: "<rt-icon-button\n    cdkOverlayOrigin\n    qa-dataid=\"menu-trigger\"\n    #trigger=\"cdkOverlayOrigin\"\n    variant=\"ghost\"\n    [icon]=\"icon()\"\n    [ariaLabel]=\"ariaText()\"\n    [tooltip]=\"ariaText()\"\n    [disabled]=\"disabled()\"\n    (clicked)=\"toggle($event)\" />\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayPanelClass]=\"panelClasses()\"\n    (backdropClick)=\"close()\"\n    (attach)=\"onAttach()\"\n    (detach)=\"close()\"\n    (overlayKeydown)=\"onKeydown($event)\">\n    <ng-container rtBlock=\"rt-menu\">\n        <div rtElem=\"panel\" qa-dataid=\"menu-panel\" role=\"menu\" [rtMod]=\"{ size: size() }\" (rtMenuSelect)=\"onSelect()\">\n            <ng-content />\n        </div>\n    </ng-container>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-menu{display:inline-flex;align-items:center;justify-content:center}.rt-menu__panel{--rt-menu-panel-radius: var(--rt-overlay-menu-radius);--rt-menu-panel-border-width: var(--rt-border-width-thin);--rt-menu-panel-shadow: var(--rt-overlay-menu-shadow);--rt-menu-panel-bg: var(--rt-overlay-menu-bg);--rt-menu-panel-padding-y: var(--rt-overlay-menu-padding-y);--rt-menu-panel-min-width: var(--rt-overlay-menu-min-width);display:flex;min-width:var(--rt-menu-panel-min-width);flex-direction:column;padding:var(--rt-menu-panel-padding-y) var(--rt-space-xs);border:var(--rt-menu-panel-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-menu-panel-radius);background:var(--rt-menu-panel-bg);box-shadow:var(--rt-menu-panel-shadow)}.rt-menu__panel--size--sm{--rt-overlay-menu-item-min-height: var(--rt-overlay-menu-sm-item-min-height);--rt-overlay-menu-item-icon-size: var(--rt-overlay-menu-sm-item-icon-size)}}\n"], dependencies: [{ kind: "ngmodule", type: 
+                // @angular/cdk
+                OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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"] }, { 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: RtMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-menu', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // @angular/cdk
+                        OverlayModule,
+                        // standalone components / directives
+                        RtIconButtonComponent,
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                        '[class.rt-menu--open]': 'isOpen()',
+                    }, template: "<rt-icon-button\n    cdkOverlayOrigin\n    qa-dataid=\"menu-trigger\"\n    #trigger=\"cdkOverlayOrigin\"\n    variant=\"ghost\"\n    [icon]=\"icon()\"\n    [ariaLabel]=\"ariaText()\"\n    [tooltip]=\"ariaText()\"\n    [disabled]=\"disabled()\"\n    (clicked)=\"toggle($event)\" />\n\n<ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n    [cdkConnectedOverlayPanelClass]=\"panelClasses()\"\n    (backdropClick)=\"close()\"\n    (attach)=\"onAttach()\"\n    (detach)=\"close()\"\n    (overlayKeydown)=\"onKeydown($event)\">\n    <ng-container rtBlock=\"rt-menu\">\n        <div rtElem=\"panel\" qa-dataid=\"menu-panel\" role=\"menu\" [rtMod]=\"{ size: size() }\" (rtMenuSelect)=\"onSelect()\">\n            <ng-content />\n        </div>\n    </ng-container>\n</ng-template>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-menu{display:inline-flex;align-items:center;justify-content:center}.rt-menu__panel{--rt-menu-panel-radius: var(--rt-overlay-menu-radius);--rt-menu-panel-border-width: var(--rt-border-width-thin);--rt-menu-panel-shadow: var(--rt-overlay-menu-shadow);--rt-menu-panel-bg: var(--rt-overlay-menu-bg);--rt-menu-panel-padding-y: var(--rt-overlay-menu-padding-y);--rt-menu-panel-min-width: var(--rt-overlay-menu-min-width);display:flex;min-width:var(--rt-menu-panel-min-width);flex-direction:column;padding:var(--rt-menu-panel-padding-y) var(--rt-space-xs);border:var(--rt-menu-panel-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-menu-panel-radius);background:var(--rt-menu-panel-bg);box-shadow:var(--rt-menu-panel-shadow)}.rt-menu__panel--size--sm{--rt-overlay-menu-item-min-height: var(--rt-overlay-menu-sm-item-min-height);--rt-overlay-menu-item-icon-size: var(--rt-overlay-menu-sm-item-icon-size)}}\n"] }]
+        }], propDecorators: { overlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RT_MENU_SELECT_EVENT, RtMenuComponent, RtMenuItemComponent, RtMenuItemIconDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-menu.mjs.map