@rt-tools/ui-kit-v2 0.22.0 → 0.22.1

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

@@ -1,10 +1,10 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, computed, inject, signal, DestroyRef, Injectable, makeEnvironmentProviders, Pipe, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, ElementRef, linkedSignal, viewChildren, afterNextRender, Directive, TemplateRef, Renderer2, viewChild, contentChild, isDevMode, effect } from '@angular/core';
+import { InjectionToken, computed, inject, signal, DestroyRef, Injectable, makeEnvironmentProviders, Pipe, ErrorHandler, input, booleanAttribute, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Injector, ElementRef, linkedSignal, viewChildren, afterNextRender, Directive, TemplateRef, Renderer2, viewChild, contentChild, numberAttribute, isDevMode, effect } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { RouterLink } from '@angular/router';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { LOCAL_STORAGE, PlatformService, WINDOW, BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
 import { ERtStorageKeys, BreakpointsService, rtKitLabel } from '@rt-tools/ui-kit-v2/core';
 import { isKitIconName, materialPairOf, RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
@@ -320,6 +320,14 @@ function pinnedSideMenuItems(picked, activeIds, items) {
     }
     return items.find((item) => activeIds.includes(item.id) && !!item.submenu?.length)?.submenu ?? [];
 }
+/**
+ * Нажатие, которое браузер открывает сам по адресу ссылки: не левой кнопкой или с клавишей —
+ * новая вкладка, окно, загрузка. Строка подменю такое нажатие не перехватывает.
+ */
+function sideMenuPressOpensInBrowser(event) {
+    const withKey = [event.ctrlKey, event.metaKey, event.shiftKey, event.altKey].some(Boolean);
+    return event.button !== 0 || withKey;
+}
 
 /** Номер меню, которому приложение своего не задало. */
 const RT_SIDE_MENU_DEFAULT_ID = 'main';
@@ -592,6 +600,30 @@ function provideRtSideMenuSettings(config = {}) {
 
 const RT_SIDE_MENU = new InjectionToken('RT_SIDE_MENU');
 
+/**
+ * Адрес пункта так, как его строит ссылка роутера: относительно маршрута, на котором стоит меню.
+ * Им строка подменю и переходит, и подписывает `href` — для средней кнопки и копирования ссылки.
+ */
+function sideMenuLinkTree(router, route, link) {
+    return router.createUrlTree([link], { relativeTo: route ?? undefined });
+}
+/** `href` строки подменю. Переход строка делает сама: ссылка роутера не дала бы потребителю его взять. */
+class RtSideMenuHrefPipe {
+    #router = inject(Router);
+    #route = inject(ActivatedRoute, { optional: true });
+    transform(link) {
+        return link ? this.#router.serializeUrl(sideMenuLinkTree(this.#router, this.#route, link)) : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuHrefPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuHrefPipe, isStandalone: true, name: "rtSideMenuHref" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuHrefPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rtSideMenuHref',
+                }]
+        }] });
+
 /**
  * Значок пункта по его `icon`: имя кита как есть, имя Material первого кита — его парой из перечня
  * кита, как у `rt-menu-item`. `null` — кит такой значок не рисует: пункт берёт свой шаблон меню или
@@ -628,6 +660,19 @@ function unpairedSideMenuIcons(items, hasOwnIcon) {
     walk(items);
     return [...found];
 }
+/**
+ * Предупреждение разработчику приложения об именах из `unpairedSideMenuIcons`: имя без значка кита и
+ * без пары рисует пункт без значка, и пропуск без предупреждения не заметен.
+ */
+function warnUnpairedSideMenuIcons(menuId, items, hasOwnIcon) {
+    const unpaired = unpairedSideMenuIcons(items, hasOwnIcon);
+    if (unpaired.length) {
+        const names = unpaired.map((name) => `«${name}»`).join(', ');
+        // eslint-disable-next-line no-console -- предупреждение разработчику приложения: другого канала у кита нет
+        console.warn(`rt-side-menu «${menuId}»: значков ${names} нет ни в наборе кита, ни в перечне имён Material. ` +
+            'Задайте имя кита или свой значок через <ng-template rtSideMenuIcon>.');
+    }
+}
 
 /** Значок пункта, который рисует кит: имя кита или пара имени Material; `null` — такого нет. */
 class RtSideMenuIconPipe {
@@ -673,6 +718,9 @@ const FAVORITE_BUTTON = '.rt-side-menu-sub-item__favorite button';
 class RtSideMenuSubItemComponent {
     constructor() {
         this.#settings = inject(RtSideMenuSettingsService, { optional: true });
+        this.#router = inject(Router);
+        this.#route = inject(ActivatedRoute, { optional: true });
+        this.#errors = inject(ErrorHandler);
         this.menuRef = inject(RT_SIDE_MENU);
         this.narrow = inject(BreakpointsService).narrow;
         /** Значки кнопок избранного: из настроек провайдера, иначе из набора кита. */
@@ -692,8 +740,24 @@ class RtSideMenuSubItemComponent {
         this.clickSubMenuAdditionalAction = output();
     }
     #settings;
+    #router;
+    #route;
+    #errors;
+    /**
+     * Нажатие строки уходит потребителю раньше перехода. Потребитель, взявший переход на себя,
+     * отменяет умолчание события — тогда строка не переходит. Нажатие с клавишей или не левой
+     * кнопкой остаётся браузеру: он открывает адрес строки сам.
+     */
     onClickSubMenu(item, event) {
         this.clickSubMenuAction.emit({ item, event });
+        if (event.defaultPrevented || !item.link || sideMenuPressOpensInBrowser(event)) {
+            return;
+        }
+        event.preventDefault();
+        // Отказ перехода уходит обработчику ошибок приложения, как у ссылки роутера.
+        this.#router
+            .navigateByUrl(sideMenuLinkTree(this.#router, this.#route, item.link))
+            .catch((error) => this.#errors.handleError(error));
     }
     /** Кнопка потребителя в строке: ни перехода по ссылке строки, ни закрытия подменю. */
     onClickSubMenuAdditional(item, event) {
@@ -723,13 +787,12 @@ class RtSideMenuSubItemComponent {
         this.menuRef.toggleFolder(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuSubItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuSubItemComponent, isStandalone: true, selector: "rt-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, inFavorites: { classPropertyName: "inFavorites", publicName: "inFavorites", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rt-side-menu-sub-item" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu-sub-item\">\n    <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: item(), depth: 0 }\" />\n    <ng-template #rowTpl let-row let-depth=\"depth\">\n        @let isActive = menuRef.activeMenuIds().includes(row.id);\n        @let isHighlighted = !inFavorites() && menuRef.highlightedMenuId() === row.id;\n        @if (row.link) {\n            <!--\n                \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0431\u0435\u0437 \u043D\u043E\u043C\u0435\u0440\u0430: \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443 \u0441\u043F\u0438\u0441\u043A\u0430. \u0418 \u0431\u0435\u0437\n                \u0440\u043E\u0434\u043D\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F \u0441\u0441\u044B\u043B\u043A\u0438: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0440\u0443\u0447\u043A\u0443 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0431\u0438\u0440\u0430\u043B \u0441\u0435\u0431\u0435,\n                \u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043D\u0435 \u043D\u0430\u0447\u0438\u043D\u0430\u043B\u043E\u0441\u044C.\n            -->\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"side-menu-sub-item\"\n                [id]=\"inFavorites() ? null : row.id\"\n                [attr.draggable]=\"inFavorites() ? 'false' : null\"\n                [routerLink]=\"row.link\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ active: isActive, highlighted: isHighlighted }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickSubMenu(row, $event)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    <!-- \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0433\u043E\u043B\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u043B\u0430 \u0431\u044B \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438. -->\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <!--\n                    \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u043D\u0435\u0441\u0451\u0442 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C. \u0417\u0432\u0435\u0437\u0434\u0430 \u2014\n                    \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435 \u0441 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u044B\u043C: \u043F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C,\n                    \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C. \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435.\n                -->\n                @if (inFavorites() && favoritesIcons) {\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-remove\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ remove: true }\"\n                        [icon]=\"favoritesIcons.remove\"\n                        [ariaLabel]=\"removeLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : removeLabel()\"\n                        (clicked)=\"onRemoveFavorite(row, $event)\" />\n                } @else if (favoritesOn() && !row.favoriteDisabled) {\n                    @let isFavorite = favoriteIds().includes(row.id);\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-star\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ on: isFavorite }\"\n                        [icon]=\"isFavorite ? 'star-fill' : 'star'\"\n                        [iconFill]=\"isFavorite\"\n                        [ariaLabel]=\"isFavorite ? removeLabel() : addLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : isFavorite ? removeLabel() : addLabel()\"\n                        (clicked)=\"onToggleFavorite(row, $event)\" />\n                }\n\n                <!-- \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443. -->\n                <ng-content select=\"[rtSideMenuSubItemAction]\" />\n\n                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439: \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439. -->\n                @if (row.iconButton?.icon; as buttonIcon) {\n                    <!-- \u0418\u043C\u044F \u0431\u0435\u0437 \u0437\u043D\u0430\u0447\u043A\u0430 \u043A\u0438\u0442\u0430 \u0431\u0435\u0440\u0451\u0442 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E, \u043A\u0430\u043A \u0437\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438. \u0411\u0435\u0437 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0430 \u043F\u0443\u0441\u0442\u0430 \u0438\n                         \u043D\u0435\u0437\u043D\u0430\u043A\u043E\u043C\u043E\u0433\u043E \u0438\u043C\u0435\u043D\u0438 \u0437\u043D\u0430\u0447\u043A\u0443 \u043D\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442: \u0437\u043D\u0430\u0447\u043A\u0430 \u0441 \u0442\u0430\u043A\u0438\u043C \u0438\u043C\u0435\u043D\u0435\u043C \u043D\u0435\u0442, \u0438 \u0436\u0434\u0430\u0442\u044C \u0435\u0433\u043E \u043D\u0435\u043A\u043E\u043C\u0443. -->\n                    @let buttonKitIcon = buttonIcon | rtSideMenuIcon;\n                    @let buttonOwnTpl = buttonKitIcon ? null : menuRef.ownIconTpl();\n                    <rt-icon-button\n                        rtElem=\"action\"\n                        qa-dataid=\"side-menu-sub-item-action\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [icon]=\"buttonKitIcon\"\n                        [ariaLabel]=\"row.name ?? ''\"\n                        (clicked)=\"onClickSubMenuAdditional(row, $event)\">\n                        @if (buttonOwnTpl) {\n                            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-button-icon\" aria-hidden=\"true\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"buttonOwnTpl\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row, icon: buttonIcon, slot: 'iconButton' }\" />\n                            </span>\n                        }\n                    </rt-icon-button>\n                }\n            </a>\n        } @else if (row.submenu) {\n            <!--\n                \u041F\u0430\u043F\u043A\u0430 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A\n                \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E. \u0428\u0435\u0432\u0440\u043E\u043D\u0430 \u0443 \u0442\u0430\u043A\u043E\u0439 \u043F\u0430\u043F\u043A\u0438 \u043D\u0435\u0442 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E. \u0420\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435\n                \u0434\u0435\u0440\u0436\u0438\u0442 \u043C\u0435\u043D\u044E: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043E\u043E\u0431\u0449\u0430\u0435\u0442 \u043E \u043D\u0430\u0436\u0430\u0442\u0438\u0438, \u043C\u0435\u043D\u044E \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0435\u0442 \u043F\u0430\u043F\u043A\u0443. \u041A\u043D\u043E\u043F\u043A\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430\n                \u043E\u0442\u0434\u0430\u043D \u043D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u043F\u043E \u043D\u0435\u043C\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043C\u0435\u043D\u044E \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443.\n            -->\n            @let isOpen = menuRef.expandedMenuIds().includes(row.id);\n            <rt-expansion-panel\n                rtElem=\"folder\"\n                appearance=\"plain\"\n                [headerId]=\"'' + row.id\"\n                [hideToggle]=\"!row.submenu.length\"\n                [expanded]=\"isOpen\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ highlighted: isHighlighted }\"\n                (expandedChange)=\"onToggleFolder(row)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" qa-dataid=\"side-menu-folder\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <ng-template rtExpansionPanelContent>\n                    <div rtElem=\"children\" role=\"group\">\n                        @for (child of row.submenu; track child.id) {\n                            <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </div>\n                </ng-template>\n            </rt-expansion-panel>\n        }\n    </ng-template>\n\n    <!-- \u0417\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438: \u0438\u043C\u044F \u043A\u0438\u0442\u0430 \u0438\u043B\u0438 \u043F\u0430\u0440\u0430 \u0438\u043C\u0435\u043D\u0438 Material, \u0430 \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E. -->\n    <ng-template #iconTpl let-row>\n        @let kitIcon = row.icon | rtSideMenuIcon;\n        @if (kitIcon) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"kitIcon\" />\n        } @else if (menuRef.ownIconTpl(); as own) {\n            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: row, icon: row.icon, slot: 'icon' }\" />\n            </span>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-sub-item{--rt-side-menu-sub-item-radius: var(--rt-radius-full);--rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);--rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);--rt-side-menu-sub-item-match-color: var(--rt-neutral-950);--rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);display:block}.rt-side-menu-sub-item__row{--rt-side-menu-sub-item-depth: 0;display:flex;width:100%;min-height:var(--rt-control-height-md);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-sub-item-radius);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-sm);padding-block:var(--rt-space-2);padding-inline:calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-space-sm);text-align:start;text-decoration:none;transition:background-color var(--rt-side-menu-sub-item-transition-duration) ease}.rt-side-menu-sub-item__row:hover,.rt-side-menu-sub-item__row:active,.rt-side-menu-sub-item__row--highlighted{background:var(--rt-color-bg-hover)}.rt-side-menu-sub-item__row:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu-sub-item__row--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu-sub-item__icon{flex-shrink:0;color:inherit}.rt-side-menu-sub-item__own-icon{--rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);display:inline-flex;width:var(--rt-side-menu-sub-item-own-icon-size);height:var(--rt-side-menu-sub-item-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu-sub-item__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu-sub-item__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-sub-item__part{color:inherit}.rt-side-menu-sub-item__match{border-radius:var(--rt-side-menu-sub-item-match-radius);background:var(--rt-side-menu-sub-item-match-bg);color:var(--rt-side-menu-sub-item-match-color)}.rt-side-menu-sub-item__action{--rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);--rt-side-menu-sub-item-action-radius: var(--rt-radius-full);flex-shrink:0;border-radius:var(--rt-side-menu-sub-item-action-radius);outline:var(--rt-side-menu-sub-item-action-ring-width) solid transparent;outline-offset:calc(var(--rt-side-menu-sub-item-action-ring-width) * -1)}.rt-side-menu-sub-item__action:hover{outline-color:var(--rt-color-border-strong)}.rt-side-menu-sub-item__favorite{flex-shrink:0;opacity:0}.rt-side-menu-sub-item__favorite--on{--rt-icon-button-color: var(--rt-color-action-primary);opacity:1}@media(hover:hover){.rt-side-menu-sub-item__favorite--remove:hover{--rt-icon-button-color: var(--rt-color-state-danger)}}.rt-side-menu-sub-item__favorite--remove:has(:focus-visible){--rt-icon-button-color: var(--rt-color-state-danger)}@media(hover:none){.rt-side-menu-sub-item__favorite{opacity:1}}.rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{opacity:1}.rt-side-menu-sub-item__folder.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);--rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth)));--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-bg: transparent}.rt-side-menu-sub-item__folder--highlighted.rt-expansion-panel{--rt-expansion-panel-header-bg: var(--rt-color-bg-hover)}.rt-side-menu-sub-item__children{display:flex;flex-direction:column}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on){overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{overflow:visible;width:auto;margin-inline-start:0}}}\n"], dependencies: [{ 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"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtExpansionPanelComponent, selector: "rt-expansion-panel", inputs: ["expanded", "disabled", "hideToggle", "appearance", "headerId", "ariaLabel"], outputs: ["expandedChange"] }, { kind: "directive", type: RtExpansionPanelContentDirective, selector: "ng-template[rtExpansionPanelContent]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: RtSideMenuTitlePartsPipe, name: "rtSideMenuTitleParts" }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuSubItemComponent, isStandalone: true, selector: "rt-side-menu-sub-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, inFavorites: { classPropertyName: "inFavorites", publicName: "inFavorites", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rt-side-menu-sub-item" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu-sub-item\">\n    <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: item(), depth: 0 }\" />\n    <ng-template #rowTpl let-row let-depth=\"depth\">\n        @let isActive = menuRef.activeMenuIds().includes(row.id);\n        @let isHighlighted = !inFavorites() && menuRef.highlightedMenuId() === row.id;\n        @if (row.link) {\n            <!--\n                \u041D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u043D\u0430 \u0441\u0430\u043C\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0435 \u2014 \u043F\u0440\u0438\u0437\u043D\u0430\u043A \u0434\u043B\u044F \u043F\u0440\u0430\u0432\u0438\u043B \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F: \u043F\u043E \u043D\u0435\u043C\u0443 \u043E\u043D\u043E \u043D\u0430\u0445\u043E\u0434\u0438\u0442 \u0441\u0442\u0440\u043E\u043A\u0443,\n                \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440 \u0442\u0443, \u0447\u0442\u043E \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 \u0440\u0430\u0437\u0434\u0435\u043B\u0430. \u0421\u0442\u043E\u0438\u0442 \u0438 \u0443 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E.\n                \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0431\u0435\u0437 \u043D\u043E\u043C\u0435\u0440\u0430: \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443 \u0441\u043F\u0438\u0441\u043A\u0430. \u0418 \u0431\u0435\u0437\n                \u0440\u043E\u0434\u043D\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F \u0441\u0441\u044B\u043B\u043A\u0438: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0440\u0443\u0447\u043A\u0443 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0431\u0438\u0440\u0430\u043B \u0441\u0435\u0431\u0435,\n                \u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043D\u0435 \u043D\u0430\u0447\u0438\u043D\u0430\u043B\u043E\u0441\u044C.\n            -->\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"side-menu-sub-item\"\n                [id]=\"inFavorites() ? null : row.id\"\n                [attr.data-item-id]=\"row.id\"\n                [attr.draggable]=\"inFavorites() ? 'false' : null\"\n                [attr.href]=\"row.link | rtSideMenuHref\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ active: isActive, highlighted: isHighlighted }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickSubMenu(row, $event)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    <!-- \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0433\u043E\u043B\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u043B\u0430 \u0431\u044B \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438. -->\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <!--\n                    \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u043D\u0435\u0441\u0451\u0442 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C. \u0417\u0432\u0435\u0437\u0434\u0430 \u2014\n                    \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435 \u0441 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u044B\u043C: \u043F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C,\n                    \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C. \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435.\n                -->\n                @if (inFavorites() && favoritesIcons) {\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-remove\"\n                        size=\"sm\"\n                        [rtMod]=\"{ remove: true }\"\n                        [icon]=\"favoritesIcons.remove\"\n                        [ariaLabel]=\"removeLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : removeLabel()\"\n                        (clicked)=\"onRemoveFavorite(row, $event)\" />\n                } @else if (favoritesOn() && !row.favoriteDisabled) {\n                    @let isFavorite = favoriteIds().includes(row.id);\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-star\"\n                        size=\"sm\"\n                        [rtMod]=\"{ on: isFavorite }\"\n                        [icon]=\"isFavorite ? 'star-fill' : 'star'\"\n                        [iconFill]=\"isFavorite\"\n                        [ariaLabel]=\"isFavorite ? removeLabel() : addLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : isFavorite ? removeLabel() : addLabel()\"\n                        (clicked)=\"onToggleFavorite(row, $event)\" />\n                }\n\n                <!-- \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443. -->\n                <ng-content select=\"[rtSideMenuSubItemAction]\" />\n\n                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439: \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439. -->\n                @if (row.iconButton?.icon; as buttonIcon) {\n                    <!-- \u0418\u043C\u044F \u0431\u0435\u0437 \u0437\u043D\u0430\u0447\u043A\u0430 \u043A\u0438\u0442\u0430 \u0431\u0435\u0440\u0451\u0442 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E, \u043A\u0430\u043A \u0437\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438. \u0411\u0435\u0437 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0430 \u043F\u0443\u0441\u0442\u0430 \u0438\n                         \u043D\u0435\u0437\u043D\u0430\u043A\u043E\u043C\u043E\u0433\u043E \u0438\u043C\u0435\u043D\u0438 \u0437\u043D\u0430\u0447\u043A\u0443 \u043D\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442: \u0437\u043D\u0430\u0447\u043A\u0430 \u0441 \u0442\u0430\u043A\u0438\u043C \u0438\u043C\u0435\u043D\u0435\u043C \u043D\u0435\u0442, \u0438 \u0436\u0434\u0430\u0442\u044C \u0435\u0433\u043E \u043D\u0435\u043A\u043E\u043C\u0443. -->\n                    @let buttonKitIcon = buttonIcon | rtSideMenuIcon;\n                    @let buttonOwnTpl = buttonKitIcon ? null : menuRef.ownIconTpl();\n                    <rt-icon-button\n                        rtElem=\"action\"\n                        qa-dataid=\"side-menu-sub-item-action\"\n                        size=\"sm\"\n                        [icon]=\"buttonKitIcon\"\n                        [iconFill]=\"menuRef.subItemIconFill()\"\n                        [ariaLabel]=\"row.name ?? ''\"\n                        (clicked)=\"onClickSubMenuAdditional(row, $event)\">\n                        @if (buttonOwnTpl) {\n                            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-button-icon\" aria-hidden=\"true\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"buttonOwnTpl\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row, icon: buttonIcon, slot: 'iconButton' }\" />\n                            </span>\n                        }\n                    </rt-icon-button>\n                }\n            </a>\n        } @else if (row.submenu) {\n            <!--\n                \u041F\u0430\u043F\u043A\u0430 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A\n                \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E. \u0428\u0435\u0432\u0440\u043E\u043D\u0430 \u0443 \u0442\u0430\u043A\u043E\u0439 \u043F\u0430\u043F\u043A\u0438 \u043D\u0435\u0442 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E. \u0420\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435\n                \u0434\u0435\u0440\u0436\u0438\u0442 \u043C\u0435\u043D\u044E: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043E\u043E\u0431\u0449\u0430\u0435\u0442 \u043E \u043D\u0430\u0436\u0430\u0442\u0438\u0438, \u043C\u0435\u043D\u044E \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0435\u0442 \u043F\u0430\u043F\u043A\u0443. \u041A\u043D\u043E\u043F\u043A\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430\n                \u043E\u0442\u0434\u0430\u043D \u043D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u043F\u043E \u043D\u0435\u043C\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043C\u0435\u043D\u044E \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443.\n            -->\n            @let isOpen = menuRef.expandedMenuIds().includes(row.id);\n            <rt-expansion-panel\n                rtElem=\"folder\"\n                appearance=\"plain\"\n                [headerId]=\"'' + row.id\"\n                [attr.data-item-id]=\"row.id\"\n                [hideToggle]=\"!row.submenu.length\"\n                [expanded]=\"isOpen\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ highlighted: isHighlighted }\"\n                (expandedChange)=\"onToggleFolder(row)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" qa-dataid=\"side-menu-folder\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <ng-template rtExpansionPanelContent>\n                    <div rtElem=\"children\" role=\"group\">\n                        @for (child of row.submenu; track child.id) {\n                            <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </div>\n                </ng-template>\n            </rt-expansion-panel>\n        }\n    </ng-template>\n\n    <!-- \u0417\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438: \u0438\u043C\u044F \u043A\u0438\u0442\u0430 \u0438\u043B\u0438 \u043F\u0430\u0440\u0430 \u0438\u043C\u0435\u043D\u0438 Material, \u0430 \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E. -->\n    <ng-template #iconTpl let-row>\n        @let kitIcon = row.icon | rtSideMenuIcon;\n        @if (kitIcon) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"kitIcon\" [fill]=\"menuRef.subItemIconFill()\" />\n        } @else if (menuRef.ownIconTpl(); as own) {\n            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: row, icon: row.icon, slot: 'icon' }\" />\n            </span>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-sub-item{--rt-side-menu-sub-item-radius: var(--rt-radius-full);--rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);--rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);--rt-side-menu-sub-item-match-color: var(--rt-neutral-950);--rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);--rt-side-menu-sub-item-min-height: var(--rt-control-height-md);--rt-side-menu-sub-item-font-size: var(--rt-text-sm);--rt-side-menu-sub-item-padding-start: var(--rt-space-md);--rt-side-menu-sub-item-padding-end: var(--rt-space-sm);--rt-side-menu-sub-item-color: var(--rt-color-text-primary);--rt-side-menu-sub-item-gap: var(--rt-space-sm);--rt-side-menu-sub-item-folder-padding-start: var(--rt-side-menu-sub-item-padding-start);--rt-side-menu-sub-item-chevron-color: var(--rt-color-text-muted);--rt-side-menu-sub-item-icon-size: var(--rt-icon-step-sm);--rt-side-menu-sub-item-button-radius: var(--rt-radius-md);--rt-side-menu-sub-item-button-icon-size: var(--rt-icon-step-sm);--rt-side-menu-sub-item-action-size: var(--rt-control-height-sm);--rt-side-menu-sub-item-favorite-size: var(--rt-control-height-sm);--rt-side-menu-sub-item-favorite-color: var(--rt-color-text-primary);display:block;letter-spacing:var(--rt-side-menu-sub-item-letter-spacing, inherit)}.rt-side-menu-sub-item__row{--rt-side-menu-sub-item-depth: 0;display:flex;width:100%;min-height:var(--rt-side-menu-sub-item-min-height);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-sub-item-radius);background:transparent;color:var(--rt-side-menu-sub-item-color);cursor:pointer;font:inherit;font-size:var(--rt-side-menu-sub-item-font-size);gap:var(--rt-side-menu-sub-item-gap);padding-block:var(--rt-space-2);padding-inline:calc(var(--rt-side-menu-sub-item-padding-start) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-side-menu-sub-item-padding-end);text-align:start;text-decoration:none;transition:background-color var(--rt-side-menu-sub-item-transition-duration) ease}.rt-side-menu-sub-item__row:hover,.rt-side-menu-sub-item__row:active,.rt-side-menu-sub-item__row--highlighted{background:var(--rt-side-menu-item-bg-hover)}.rt-side-menu-sub-item__row:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu-sub-item__row--active{background:var(--rt-side-menu-item-bg-active);color:var(--rt-side-menu-item-color-active)}.rt-side-menu-sub-item__icon{--rt-icon-step-sm: var(--rt-side-menu-sub-item-icon-size);flex-shrink:0;color:inherit}.rt-side-menu-sub-item__own-icon{--rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);display:inline-flex;width:var(--rt-side-menu-sub-item-own-icon-size);height:var(--rt-side-menu-sub-item-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu-sub-item__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu-sub-item__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-sub-item__part{color:inherit}.rt-side-menu-sub-item__match{border-radius:var(--rt-side-menu-sub-item-match-radius);background:var(--rt-side-menu-sub-item-match-bg);color:var(--rt-side-menu-sub-item-match-color)}.rt-side-menu-sub-item__action{--rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);--rt-side-menu-sub-item-action-radius: var(--rt-radius-full);flex-shrink:0;border-radius:var(--rt-side-menu-sub-item-action-radius);outline:var(--rt-side-menu-sub-item-action-ring-width) solid transparent;outline-offset:calc(var(--rt-side-menu-sub-item-action-ring-width) * -1)}.rt-side-menu-sub-item__action:hover{outline-color:var(--rt-color-border-strong)}.rt-side-menu-sub-item__action>.rt-icon-button{--rt-icon-button-size-step: var(--rt-side-menu-sub-item-action-size)}.rt-side-menu-sub-item__action,.rt-side-menu-sub-item__favorite{--rt-icon-step-sm: var(--rt-side-menu-sub-item-button-icon-size)}.rt-side-menu-sub-item__action>.rt-icon-button,.rt-side-menu-sub-item__favorite>.rt-icon-button{--rt-icon-button-radius: var(--rt-side-menu-sub-item-button-radius)}.rt-side-menu-sub-item__favorite{--rt-icon-button-color: var(--rt-side-menu-sub-item-favorite-color);flex-shrink:0;opacity:0}.rt-side-menu-sub-item__favorite>.rt-icon-button{--rt-icon-button-size-step: var(--rt-side-menu-sub-item-favorite-size)}.rt-side-menu-sub-item__favorite--on{--rt-icon-button-color: var(--rt-color-action-primary);opacity:1}@media(hover:hover){.rt-side-menu-sub-item__favorite--remove:hover{--rt-icon-button-color: var(--rt-color-state-danger)}}.rt-side-menu-sub-item__favorite--remove:has(:focus-visible){--rt-icon-button-color: var(--rt-color-state-danger)}@media(hover:none){.rt-side-menu-sub-item__favorite{opacity:1}}.rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{opacity:1}.rt-side-menu-sub-item__folder.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);--rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-radius);--rt-expansion-panel-header-min-height: var(--rt-side-menu-sub-item-min-height);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: calc( var(--rt-side-menu-sub-item-folder-padding-start) * (1 + var(--rt-side-menu-sub-item-depth)) );--rt-expansion-panel-header-padding-end: var(--rt-side-menu-sub-item-padding-end);--rt-expansion-panel-header-gap: var(--rt-side-menu-sub-item-gap);--rt-expansion-panel-chevron-color: var(--rt-side-menu-sub-item-chevron-color);--rt-expansion-panel-header-font-size: var(--rt-side-menu-sub-item-font-size);--rt-expansion-panel-header-color: var(--rt-side-menu-sub-item-color);--rt-expansion-panel-header-bg: transparent;--rt-expansion-panel-header-hover-bg: var(--rt-side-menu-item-bg-hover)}.rt-side-menu-sub-item__folder--highlighted.rt-expansion-panel{--rt-expansion-panel-header-bg: var(--rt-side-menu-item-bg-hover)}.rt-side-menu-sub-item__children{display:flex;flex-direction:column}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on){overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{overflow:visible;width:auto;margin-inline-start:0}}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtExpansionPanelComponent, selector: "rt-expansion-panel", inputs: ["expanded", "disabled", "hideToggle", "appearance", "headerId", "ariaLabel"], outputs: ["expandedChange"] }, { kind: "directive", type: RtExpansionPanelContentDirective, selector: "ng-template[rtExpansionPanelContent]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: RtSideMenuTitlePartsPipe, name: "rtSideMenuTitleParts" }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }, { kind: "pipe", type: RtSideMenuHrefPipe, name: "rtSideMenuHref" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuSubItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rt-side-menu-sub-item', host: { class: BEM_BLOCK$2 }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         NgTemplateOutlet,
-                        RouterLink,
                         BlockDirective,
                         ElemDirective,
                         ModDirective,
@@ -740,7 +803,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         RtTooltipDirective,
                         RtSideMenuTitlePartsPipe,
                         RtSideMenuIconPipe,
-                    ], template: "<ng-container rtBlock=\"rt-side-menu-sub-item\">\n    <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: item(), depth: 0 }\" />\n    <ng-template #rowTpl let-row let-depth=\"depth\">\n        @let isActive = menuRef.activeMenuIds().includes(row.id);\n        @let isHighlighted = !inFavorites() && menuRef.highlightedMenuId() === row.id;\n        @if (row.link) {\n            <!--\n                \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0431\u0435\u0437 \u043D\u043E\u043C\u0435\u0440\u0430: \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443 \u0441\u043F\u0438\u0441\u043A\u0430. \u0418 \u0431\u0435\u0437\n                \u0440\u043E\u0434\u043D\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F \u0441\u0441\u044B\u043B\u043A\u0438: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0440\u0443\u0447\u043A\u0443 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0431\u0438\u0440\u0430\u043B \u0441\u0435\u0431\u0435,\n                \u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043D\u0435 \u043D\u0430\u0447\u0438\u043D\u0430\u043B\u043E\u0441\u044C.\n            -->\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"side-menu-sub-item\"\n                [id]=\"inFavorites() ? null : row.id\"\n                [attr.draggable]=\"inFavorites() ? 'false' : null\"\n                [routerLink]=\"row.link\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ active: isActive, highlighted: isHighlighted }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickSubMenu(row, $event)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    <!-- \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0433\u043E\u043B\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u043B\u0430 \u0431\u044B \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438. -->\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <!--\n                    \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u043D\u0435\u0441\u0451\u0442 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C. \u0417\u0432\u0435\u0437\u0434\u0430 \u2014\n                    \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435 \u0441 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u044B\u043C: \u043F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C,\n                    \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C. \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435.\n                -->\n                @if (inFavorites() && favoritesIcons) {\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-remove\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ remove: true }\"\n                        [icon]=\"favoritesIcons.remove\"\n                        [ariaLabel]=\"removeLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : removeLabel()\"\n                        (clicked)=\"onRemoveFavorite(row, $event)\" />\n                } @else if (favoritesOn() && !row.favoriteDisabled) {\n                    @let isFavorite = favoriteIds().includes(row.id);\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-star\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [rtMod]=\"{ on: isFavorite }\"\n                        [icon]=\"isFavorite ? 'star-fill' : 'star'\"\n                        [iconFill]=\"isFavorite\"\n                        [ariaLabel]=\"isFavorite ? removeLabel() : addLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : isFavorite ? removeLabel() : addLabel()\"\n                        (clicked)=\"onToggleFavorite(row, $event)\" />\n                }\n\n                <!-- \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443. -->\n                <ng-content select=\"[rtSideMenuSubItemAction]\" />\n\n                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439: \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439. -->\n                @if (row.iconButton?.icon; as buttonIcon) {\n                    <!-- \u0418\u043C\u044F \u0431\u0435\u0437 \u0437\u043D\u0430\u0447\u043A\u0430 \u043A\u0438\u0442\u0430 \u0431\u0435\u0440\u0451\u0442 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E, \u043A\u0430\u043A \u0437\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438. \u0411\u0435\u0437 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0430 \u043F\u0443\u0441\u0442\u0430 \u0438\n                         \u043D\u0435\u0437\u043D\u0430\u043A\u043E\u043C\u043E\u0433\u043E \u0438\u043C\u0435\u043D\u0438 \u0437\u043D\u0430\u0447\u043A\u0443 \u043D\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442: \u0437\u043D\u0430\u0447\u043A\u0430 \u0441 \u0442\u0430\u043A\u0438\u043C \u0438\u043C\u0435\u043D\u0435\u043C \u043D\u0435\u0442, \u0438 \u0436\u0434\u0430\u0442\u044C \u0435\u0433\u043E \u043D\u0435\u043A\u043E\u043C\u0443. -->\n                    @let buttonKitIcon = buttonIcon | rtSideMenuIcon;\n                    @let buttonOwnTpl = buttonKitIcon ? null : menuRef.ownIconTpl();\n                    <rt-icon-button\n                        rtElem=\"action\"\n                        qa-dataid=\"side-menu-sub-item-action\"\n                        size=\"sm\"\n                        shape=\"circle\"\n                        [icon]=\"buttonKitIcon\"\n                        [ariaLabel]=\"row.name ?? ''\"\n                        (clicked)=\"onClickSubMenuAdditional(row, $event)\">\n                        @if (buttonOwnTpl) {\n                            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-button-icon\" aria-hidden=\"true\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"buttonOwnTpl\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row, icon: buttonIcon, slot: 'iconButton' }\" />\n                            </span>\n                        }\n                    </rt-icon-button>\n                }\n            </a>\n        } @else if (row.submenu) {\n            <!--\n                \u041F\u0430\u043F\u043A\u0430 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A\n                \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E. \u0428\u0435\u0432\u0440\u043E\u043D\u0430 \u0443 \u0442\u0430\u043A\u043E\u0439 \u043F\u0430\u043F\u043A\u0438 \u043D\u0435\u0442 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E. \u0420\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435\n                \u0434\u0435\u0440\u0436\u0438\u0442 \u043C\u0435\u043D\u044E: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043E\u043E\u0431\u0449\u0430\u0435\u0442 \u043E \u043D\u0430\u0436\u0430\u0442\u0438\u0438, \u043C\u0435\u043D\u044E \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0435\u0442 \u043F\u0430\u043F\u043A\u0443. \u041A\u043D\u043E\u043F\u043A\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430\n                \u043E\u0442\u0434\u0430\u043D \u043D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u043F\u043E \u043D\u0435\u043C\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043C\u0435\u043D\u044E \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443.\n            -->\n            @let isOpen = menuRef.expandedMenuIds().includes(row.id);\n            <rt-expansion-panel\n                rtElem=\"folder\"\n                appearance=\"plain\"\n                [headerId]=\"'' + row.id\"\n                [hideToggle]=\"!row.submenu.length\"\n                [expanded]=\"isOpen\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ highlighted: isHighlighted }\"\n                (expandedChange)=\"onToggleFolder(row)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" qa-dataid=\"side-menu-folder\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <ng-template rtExpansionPanelContent>\n                    <div rtElem=\"children\" role=\"group\">\n                        @for (child of row.submenu; track child.id) {\n                            <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </div>\n                </ng-template>\n            </rt-expansion-panel>\n        }\n    </ng-template>\n\n    <!-- \u0417\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438: \u0438\u043C\u044F \u043A\u0438\u0442\u0430 \u0438\u043B\u0438 \u043F\u0430\u0440\u0430 \u0438\u043C\u0435\u043D\u0438 Material, \u0430 \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E. -->\n    <ng-template #iconTpl let-row>\n        @let kitIcon = row.icon | rtSideMenuIcon;\n        @if (kitIcon) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"kitIcon\" />\n        } @else if (menuRef.ownIconTpl(); as own) {\n            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: row, icon: row.icon, slot: 'icon' }\" />\n            </span>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-sub-item{--rt-side-menu-sub-item-radius: var(--rt-radius-full);--rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);--rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);--rt-side-menu-sub-item-match-color: var(--rt-neutral-950);--rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);display:block}.rt-side-menu-sub-item__row{--rt-side-menu-sub-item-depth: 0;display:flex;width:100%;min-height:var(--rt-control-height-md);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-sub-item-radius);background:transparent;color:var(--rt-color-text-primary);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:var(--rt-space-sm);padding-block:var(--rt-space-2);padding-inline:calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-space-sm);text-align:start;text-decoration:none;transition:background-color var(--rt-side-menu-sub-item-transition-duration) ease}.rt-side-menu-sub-item__row:hover,.rt-side-menu-sub-item__row:active,.rt-side-menu-sub-item__row--highlighted{background:var(--rt-color-bg-hover)}.rt-side-menu-sub-item__row:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu-sub-item__row--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu-sub-item__icon{flex-shrink:0;color:inherit}.rt-side-menu-sub-item__own-icon{--rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);display:inline-flex;width:var(--rt-side-menu-sub-item-own-icon-size);height:var(--rt-side-menu-sub-item-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu-sub-item__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu-sub-item__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-sub-item__part{color:inherit}.rt-side-menu-sub-item__match{border-radius:var(--rt-side-menu-sub-item-match-radius);background:var(--rt-side-menu-sub-item-match-bg);color:var(--rt-side-menu-sub-item-match-color)}.rt-side-menu-sub-item__action{--rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);--rt-side-menu-sub-item-action-radius: var(--rt-radius-full);flex-shrink:0;border-radius:var(--rt-side-menu-sub-item-action-radius);outline:var(--rt-side-menu-sub-item-action-ring-width) solid transparent;outline-offset:calc(var(--rt-side-menu-sub-item-action-ring-width) * -1)}.rt-side-menu-sub-item__action:hover{outline-color:var(--rt-color-border-strong)}.rt-side-menu-sub-item__favorite{flex-shrink:0;opacity:0}.rt-side-menu-sub-item__favorite--on{--rt-icon-button-color: var(--rt-color-action-primary);opacity:1}@media(hover:hover){.rt-side-menu-sub-item__favorite--remove:hover{--rt-icon-button-color: var(--rt-color-state-danger)}}.rt-side-menu-sub-item__favorite--remove:has(:focus-visible){--rt-icon-button-color: var(--rt-color-state-danger)}@media(hover:none){.rt-side-menu-sub-item__favorite{opacity:1}}.rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{opacity:1}.rt-side-menu-sub-item__folder.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);--rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: calc(var(--rt-space-md) * (1 + var(--rt-side-menu-sub-item-depth)));--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm);--rt-expansion-panel-header-bg: transparent}.rt-side-menu-sub-item__folder--highlighted.rt-expansion-panel{--rt-expansion-panel-header-bg: var(--rt-color-bg-hover)}.rt-side-menu-sub-item__children{display:flex;flex-direction:column}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on){overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{overflow:visible;width:auto;margin-inline-start:0}}}\n"] }]
+                        RtSideMenuHrefPipe,
+                    ], template: "<ng-container rtBlock=\"rt-side-menu-sub-item\">\n    <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: item(), depth: 0 }\" />\n    <ng-template #rowTpl let-row let-depth=\"depth\">\n        @let isActive = menuRef.activeMenuIds().includes(row.id);\n        @let isHighlighted = !inFavorites() && menuRef.highlightedMenuId() === row.id;\n        @if (row.link) {\n            <!--\n                \u041D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u043D\u0430 \u0441\u0430\u043C\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0435 \u2014 \u043F\u0440\u0438\u0437\u043D\u0430\u043A \u0434\u043B\u044F \u043F\u0440\u0430\u0432\u0438\u043B \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F: \u043F\u043E \u043D\u0435\u043C\u0443 \u043E\u043D\u043E \u043D\u0430\u0445\u043E\u0434\u0438\u0442 \u0441\u0442\u0440\u043E\u043A\u0443,\n                \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440 \u0442\u0443, \u0447\u0442\u043E \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 \u0440\u0430\u0437\u0434\u0435\u043B\u0430. \u0421\u0442\u043E\u0438\u0442 \u0438 \u0443 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E.\n                \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0431\u0435\u0437 \u043D\u043E\u043C\u0435\u0440\u0430: \u043F\u043E \u043D\u043E\u043C\u0435\u0440\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443 \u0441\u043F\u0438\u0441\u043A\u0430. \u0418 \u0431\u0435\u0437\n                \u0440\u043E\u0434\u043D\u043E\u0433\u043E \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u044F \u0441\u0441\u044B\u043B\u043A\u0438: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0440\u0443\u0447\u043A\u0443 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0431\u0438\u0440\u0430\u043B \u0441\u0435\u0431\u0435,\n                \u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043D\u0435 \u043D\u0430\u0447\u0438\u043D\u0430\u043B\u043E\u0441\u044C.\n            -->\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"side-menu-sub-item\"\n                [id]=\"inFavorites() ? null : row.id\"\n                [attr.data-item-id]=\"row.id\"\n                [attr.draggable]=\"inFavorites() ? 'false' : null\"\n                [attr.href]=\"row.link | rtSideMenuHref\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ active: isActive, highlighted: isHighlighted }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickSubMenu(row, $event)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    <!-- \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0433\u043E\u043B\u0430\u044F \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u043B\u0430 \u0431\u044B \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438. -->\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <!--\n                    \u0421\u0442\u0440\u043E\u043A\u0430 \u0431\u043B\u043E\u043A\u0430 \u043D\u0435\u0441\u0451\u0442 \u00AB\u0443\u0431\u0440\u0430\u0442\u044C\u00BB, \u0430 \u043D\u0435 \u0437\u0432\u0435\u0437\u0434\u0443: \u0432\u0441\u0451 \u0432 \u0431\u043B\u043E\u043A\u0435 \u0443\u0436\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C. \u0417\u0432\u0435\u0437\u0434\u0430 \u2014\n                    \u0443 \u043F\u0443\u043D\u043A\u0442\u0430 \u0441\u043E \u0441\u0432\u043E\u0438\u043C \u0430\u0434\u0440\u0435\u0441\u043E\u043C \u0432 \u0440\u0430\u0437\u0434\u0435\u043B\u0435 \u0441 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u044B\u043C: \u043F\u043E\u043B\u0430\u044F \u2014 \u043D\u0435 \u0432 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u043C,\n                    \u0437\u0430\u043A\u0440\u0430\u0448\u0435\u043D\u043D\u0430\u044F \u0446\u0432\u0435\u0442\u043E\u043C \u0442\u0435\u043C\u044B \u2014 \u0432 \u043D\u0451\u043C. \u0418\u043C\u044F \u043A\u043D\u043E\u043F\u043A\u0438 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435.\n                -->\n                @if (inFavorites() && favoritesIcons) {\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-remove\"\n                        size=\"sm\"\n                        [rtMod]=\"{ remove: true }\"\n                        [icon]=\"favoritesIcons.remove\"\n                        [ariaLabel]=\"removeLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : removeLabel()\"\n                        (clicked)=\"onRemoveFavorite(row, $event)\" />\n                } @else if (favoritesOn() && !row.favoriteDisabled) {\n                    @let isFavorite = favoriteIds().includes(row.id);\n                    <rt-icon-button\n                        rtElem=\"favorite\"\n                        qa-dataid=\"side-menu-favorite-star\"\n                        size=\"sm\"\n                        [rtMod]=\"{ on: isFavorite }\"\n                        [icon]=\"isFavorite ? 'star-fill' : 'star'\"\n                        [iconFill]=\"isFavorite\"\n                        [ariaLabel]=\"isFavorite ? removeLabel() : addLabel()\"\n                        [tooltip]=\"narrow() || !menuRef.subMenuTooltipsShown() ? '' : isFavorite ? removeLabel() : addLabel()\"\n                        (clicked)=\"onToggleFavorite(row, $event)\" />\n                }\n\n                <!-- \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432\u043B\u0430\u0434\u0435\u043B\u0435\u0446: \u0431\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u043A\u043B\u0430\u0434\u0451\u0442 \u0441\u044E\u0434\u0430 \u0440\u0443\u0447\u043A\u0443. -->\n                <ng-content select=\"[rtSideMenuSubItemAction]\" />\n\n                <!-- \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F \u0432\u0438\u0434\u043D\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u0438 \u0441\u0442\u043E\u0438\u0442 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439: \u043A\u043D\u043E\u043F\u043A\u0438 \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0432\u0441\u0442\u0430\u044E\u0442 \u043F\u0435\u0440\u0435\u0434 \u043D\u0435\u0439. -->\n                @if (row.iconButton?.icon; as buttonIcon) {\n                    <!-- \u0418\u043C\u044F \u0431\u0435\u0437 \u0437\u043D\u0430\u0447\u043A\u0430 \u043A\u0438\u0442\u0430 \u0431\u0435\u0440\u0451\u0442 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E, \u043A\u0430\u043A \u0437\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438. \u0411\u0435\u0437 \u0448\u0430\u0431\u043B\u043E\u043D\u0430 \u043A\u043D\u043E\u043F\u043A\u0430 \u043F\u0443\u0441\u0442\u0430 \u0438\n                         \u043D\u0435\u0437\u043D\u0430\u043A\u043E\u043C\u043E\u0433\u043E \u0438\u043C\u0435\u043D\u0438 \u0437\u043D\u0430\u0447\u043A\u0443 \u043D\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442: \u0437\u043D\u0430\u0447\u043A\u0430 \u0441 \u0442\u0430\u043A\u0438\u043C \u0438\u043C\u0435\u043D\u0435\u043C \u043D\u0435\u0442, \u0438 \u0436\u0434\u0430\u0442\u044C \u0435\u0433\u043E \u043D\u0435\u043A\u043E\u043C\u0443. -->\n                    @let buttonKitIcon = buttonIcon | rtSideMenuIcon;\n                    @let buttonOwnTpl = buttonKitIcon ? null : menuRef.ownIconTpl();\n                    <rt-icon-button\n                        rtElem=\"action\"\n                        qa-dataid=\"side-menu-sub-item-action\"\n                        size=\"sm\"\n                        [icon]=\"buttonKitIcon\"\n                        [iconFill]=\"menuRef.subItemIconFill()\"\n                        [ariaLabel]=\"row.name ?? ''\"\n                        (clicked)=\"onClickSubMenuAdditional(row, $event)\">\n                        @if (buttonOwnTpl) {\n                            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-button-icon\" aria-hidden=\"true\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"buttonOwnTpl\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row, icon: buttonIcon, slot: 'iconButton' }\" />\n                            </span>\n                        }\n                    </rt-icon-button>\n                }\n            </a>\n        } @else if (row.submenu) {\n            <!--\n                \u041F\u0430\u043F\u043A\u0430 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430. \u0420\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0438 \u0441 \u043F\u0443\u0441\u0442\u044B\u043C \u0441\u043E\u0441\u0442\u0430\u0432\u043E\u043C: \u043E\u0442\u0431\u043E\u0440 \u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0442\u0430\u043A\n                \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E. \u0428\u0435\u0432\u0440\u043E\u043D\u0430 \u0443 \u0442\u0430\u043A\u043E\u0439 \u043F\u0430\u043F\u043A\u0438 \u043D\u0435\u0442 \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E. \u0420\u0430\u0441\u043A\u0440\u044B\u0442\u0438\u0435\n                \u0434\u0435\u0440\u0436\u0438\u0442 \u043C\u0435\u043D\u044E: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043E\u043E\u0431\u0449\u0430\u0435\u0442 \u043E \u043D\u0430\u0436\u0430\u0442\u0438\u0438, \u043C\u0435\u043D\u044E \u043F\u0435\u0440\u0435\u043A\u043B\u044E\u0447\u0430\u0435\u0442 \u043F\u0430\u043F\u043A\u0443. \u041A\u043D\u043E\u043F\u043A\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430\n                \u043E\u0442\u0434\u0430\u043D \u043D\u043E\u043C\u0435\u0440 \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u043F\u043E \u043D\u0435\u043C\u0443 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0430 \u043C\u0435\u043D\u044E \u043D\u0430\u0436\u0438\u043C\u0430\u0435\u0442 \u0441\u0442\u0440\u043E\u043A\u0443.\n            -->\n            @let isOpen = menuRef.expandedMenuIds().includes(row.id);\n            <rt-expansion-panel\n                rtElem=\"folder\"\n                appearance=\"plain\"\n                [headerId]=\"'' + row.id\"\n                [attr.data-item-id]=\"row.id\"\n                [hideToggle]=\"!row.submenu.length\"\n                [expanded]=\"isOpen\"\n                [style.--rt-side-menu-sub-item-depth]=\"depth\"\n                [rtMod]=\"{ highlighted: isHighlighted }\"\n                (expandedChange)=\"onToggleFolder(row)\">\n                @if (row.icon) {\n                    <ng-container [ngTemplateOutlet]=\"iconTpl\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                }\n\n                <span rtElem=\"title\" qa-dataid=\"side-menu-folder\" [rtTooltip]=\"menuRef.subMenuTooltipsShown() ? row.name : ''\">\n                    @for (part of row.name | rtSideMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                        @if (part.matched) {\n                            <span rtElem=\"match\">{{ part.text }}</span>\n                        } @else {\n                            <span rtElem=\"part\">{{ part.text }}</span>\n                        }\n                    }\n                </span>\n\n                <ng-template rtExpansionPanelContent>\n                    <div rtElem=\"children\" role=\"group\">\n                        @for (child of row.submenu; track child.id) {\n                            <ng-container [ngTemplateOutlet]=\"rowTpl\" [ngTemplateOutletContext]=\"{ $implicit: child, depth: depth + 1 }\" />\n                        }\n                    </div>\n                </ng-template>\n            </rt-expansion-panel>\n        }\n    </ng-template>\n\n    <!-- \u0417\u043D\u0430\u0447\u043E\u043A \u0441\u0442\u0440\u043E\u043A\u0438: \u0438\u043C\u044F \u043A\u0438\u0442\u0430 \u0438\u043B\u0438 \u043F\u0430\u0440\u0430 \u0438\u043C\u0435\u043D\u0438 Material, \u0430 \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0439 \u0448\u0430\u0431\u043B\u043E\u043D \u043C\u0435\u043D\u044E. -->\n    <ng-template #iconTpl let-row>\n        @let kitIcon = row.icon | rtSideMenuIcon;\n        @if (kitIcon) {\n            <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"kitIcon\" [fill]=\"menuRef.subItemIconFill()\" />\n        } @else if (menuRef.ownIconTpl(); as own) {\n            <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: row, icon: row.icon, slot: 'icon' }\" />\n            </span>\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-sub-item{--rt-side-menu-sub-item-radius: var(--rt-radius-full);--rt-side-menu-sub-item-transition-duration: var(--rt-duration-fast);--rt-side-menu-sub-item-match-bg: var(--rt-yellow-400);--rt-side-menu-sub-item-match-color: var(--rt-neutral-950);--rt-side-menu-sub-item-match-radius: var(--rt-radius-xs);--rt-side-menu-sub-item-min-height: var(--rt-control-height-md);--rt-side-menu-sub-item-font-size: var(--rt-text-sm);--rt-side-menu-sub-item-padding-start: var(--rt-space-md);--rt-side-menu-sub-item-padding-end: var(--rt-space-sm);--rt-side-menu-sub-item-color: var(--rt-color-text-primary);--rt-side-menu-sub-item-gap: var(--rt-space-sm);--rt-side-menu-sub-item-folder-padding-start: var(--rt-side-menu-sub-item-padding-start);--rt-side-menu-sub-item-chevron-color: var(--rt-color-text-muted);--rt-side-menu-sub-item-icon-size: var(--rt-icon-step-sm);--rt-side-menu-sub-item-button-radius: var(--rt-radius-md);--rt-side-menu-sub-item-button-icon-size: var(--rt-icon-step-sm);--rt-side-menu-sub-item-action-size: var(--rt-control-height-sm);--rt-side-menu-sub-item-favorite-size: var(--rt-control-height-sm);--rt-side-menu-sub-item-favorite-color: var(--rt-color-text-primary);display:block;letter-spacing:var(--rt-side-menu-sub-item-letter-spacing, inherit)}.rt-side-menu-sub-item__row{--rt-side-menu-sub-item-depth: 0;display:flex;width:100%;min-height:var(--rt-side-menu-sub-item-min-height);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-sub-item-radius);background:transparent;color:var(--rt-side-menu-sub-item-color);cursor:pointer;font:inherit;font-size:var(--rt-side-menu-sub-item-font-size);gap:var(--rt-side-menu-sub-item-gap);padding-block:var(--rt-space-2);padding-inline:calc(var(--rt-side-menu-sub-item-padding-start) * (1 + var(--rt-side-menu-sub-item-depth))) var(--rt-side-menu-sub-item-padding-end);text-align:start;text-decoration:none;transition:background-color var(--rt-side-menu-sub-item-transition-duration) ease}.rt-side-menu-sub-item__row:hover,.rt-side-menu-sub-item__row:active,.rt-side-menu-sub-item__row--highlighted{background:var(--rt-side-menu-item-bg-hover)}.rt-side-menu-sub-item__row:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu-sub-item__row--active{background:var(--rt-side-menu-item-bg-active);color:var(--rt-side-menu-item-color-active)}.rt-side-menu-sub-item__icon{--rt-icon-step-sm: var(--rt-side-menu-sub-item-icon-size);flex-shrink:0;color:inherit}.rt-side-menu-sub-item__own-icon{--rt-side-menu-sub-item-own-icon-size: var(--rt-size-4);display:inline-flex;width:var(--rt-side-menu-sub-item-own-icon-size);height:var(--rt-side-menu-sub-item-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu-sub-item__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu-sub-item__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-sub-item__part{color:inherit}.rt-side-menu-sub-item__match{border-radius:var(--rt-side-menu-sub-item-match-radius);background:var(--rt-side-menu-sub-item-match-bg);color:var(--rt-side-menu-sub-item-match-color)}.rt-side-menu-sub-item__action{--rt-side-menu-sub-item-action-ring-width: var(--rt-border-width-thin);--rt-side-menu-sub-item-action-radius: var(--rt-radius-full);flex-shrink:0;border-radius:var(--rt-side-menu-sub-item-action-radius);outline:var(--rt-side-menu-sub-item-action-ring-width) solid transparent;outline-offset:calc(var(--rt-side-menu-sub-item-action-ring-width) * -1)}.rt-side-menu-sub-item__action:hover{outline-color:var(--rt-color-border-strong)}.rt-side-menu-sub-item__action>.rt-icon-button{--rt-icon-button-size-step: var(--rt-side-menu-sub-item-action-size)}.rt-side-menu-sub-item__action,.rt-side-menu-sub-item__favorite{--rt-icon-step-sm: var(--rt-side-menu-sub-item-button-icon-size)}.rt-side-menu-sub-item__action>.rt-icon-button,.rt-side-menu-sub-item__favorite>.rt-icon-button{--rt-icon-button-radius: var(--rt-side-menu-sub-item-button-radius)}.rt-side-menu-sub-item__favorite{--rt-icon-button-color: var(--rt-side-menu-sub-item-favorite-color);flex-shrink:0;opacity:0}.rt-side-menu-sub-item__favorite>.rt-icon-button{--rt-icon-button-size-step: var(--rt-side-menu-sub-item-favorite-size)}.rt-side-menu-sub-item__favorite--on{--rt-icon-button-color: var(--rt-color-action-primary);opacity:1}@media(hover:hover){.rt-side-menu-sub-item__favorite--remove:hover{--rt-icon-button-color: var(--rt-color-state-danger)}}.rt-side-menu-sub-item__favorite--remove:has(:focus-visible){--rt-icon-button-color: var(--rt-color-state-danger)}@media(hover:none){.rt-side-menu-sub-item__favorite{opacity:1}}.rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{opacity:1}.rt-side-menu-sub-item__folder.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-side-menu-sub-item-transition-duration);--rt-expansion-panel-header-radius: var(--rt-side-menu-sub-item-radius);--rt-expansion-panel-header-min-height: var(--rt-side-menu-sub-item-min-height);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: calc( var(--rt-side-menu-sub-item-folder-padding-start) * (1 + var(--rt-side-menu-sub-item-depth)) );--rt-expansion-panel-header-padding-end: var(--rt-side-menu-sub-item-padding-end);--rt-expansion-panel-header-gap: var(--rt-side-menu-sub-item-gap);--rt-expansion-panel-chevron-color: var(--rt-side-menu-sub-item-chevron-color);--rt-expansion-panel-header-font-size: var(--rt-side-menu-sub-item-font-size);--rt-expansion-panel-header-color: var(--rt-side-menu-sub-item-color);--rt-expansion-panel-header-bg: transparent;--rt-expansion-panel-header-hover-bg: var(--rt-side-menu-item-bg-hover)}.rt-side-menu-sub-item__folder--highlighted.rt-expansion-panel{--rt-expansion-panel-header-bg: var(--rt-side-menu-item-bg-hover)}.rt-side-menu-sub-item__children{display:flex;flex-direction:column}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__favorite:not(.rt-side-menu-sub-item__favorite--on){overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:hover .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:focus-visible .rt-side-menu-sub-item__favorite,.rt-side-menu--favorite-actions-none .rt-side-menu-sub-item__row:has(:focus-visible) .rt-side-menu-sub-item__favorite{overflow:visible;width:auto;margin-inline-start:0}}}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], inFavorites: [{ type: i0.Input, args: [{ isSignal: true, alias: "inFavorites", required: false }] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
 
 const BEM_BLOCK$1 = 'rt-side-menu-favorites';
@@ -887,7 +951,7 @@ class RtSideMenuFavoritesComponent {
         this.#settings.moveVisibleSideMenuFavorite(this.#menu.menuId(), visible, from, to);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuFavoritesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuFavoritesComponent, isStandalone: true, selector: "rt-side-menu-favorites", outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rt-side-menu-favorites" }, viewQueries: [{ propertyName: "handles", predicate: ["handle"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu-favorites\">\n    @if (rows().length) {\n        <!--\n            \u0411\u043B\u043E\u043A \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430, \u043A\u0430\u043A \u043F\u0430\u043F\u043A\u0430 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0441\u043E \u0437\u0432\u0435\u0437\u0434\u043E\u0439 \u0432\u043C\u0435\u0441\u0442\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u043F\u0430\u043F\u043A\u0438. \u0418\u043C\u044F\n            \u043A\u043D\u043E\u043F\u043A\u0438 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435; \u0447\u0438\u0441\u043B\u043E \u0441\u0442\u0440\u043E\u043A \u2014 \u043F\u043E \u0432\u0445\u043E\u0434\u0443 \u043C\u0435\u043D\u044E.\n        -->\n        <rt-expansion-panel\n            rtElem=\"panel\"\n            appearance=\"plain\"\n            [ariaLabel]=\"open() ? collapseLabel() : expandLabel()\"\n            [(expanded)]=\"open\"\n            (expandedChange)=\"onToggle($event)\">\n            <rt-icon rtElem=\"star\" size=\"sm\" name=\"star-fill\" [fill]=\"true\" />\n            <span rtElem=\"title\" qa-dataid=\"side-menu-favorites-title\">\n                {{ titleLabel() }}\n                @if (countShown()) {\n                    ({{ rows().length }})\n                }\n            </span>\n\n            <ng-template rtExpansionPanelContent>\n                <div\n                    rtElem=\"list\"\n                    role=\"group\"\n                    qa-dataid=\"side-menu-favorites\"\n                    cdkDropList\n                    cdkDropListLockAxis=\"y\"\n                    [cdkDropListData]=\"rows()\"\n                    [attr.aria-label]=\"titleLabel()\"\n                    (cdkDropListDropped)=\"onDrop($event)\">\n                    @for (item of rows(); track item.id) {\n                        <div\n                            rtElem=\"row\"\n                            qa-dataid=\"side-menu-favorite-row\"\n                            cdkDrag\n                            [attr.data-id]=\"item.id\"\n                            (cdkDragStarted)=\"onDragStart()\"\n                            (cdkDragEnded)=\"onDragEnd($event)\">\n                            <!--\n                                    \u0420\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438, \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439 \u043F\u0435\u0440\u0435\u0434 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F. \u0421\u0442\u0440\u043E\u043A\u0443 \u0442\u044F\u043D\u0443\u0442\n                                    \u0442\u043E\u043B\u044C\u043A\u043E \u0437\u0430 \u0440\u0443\u0447\u043A\u0443: \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0430. \u0421 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044B \u0441\u0442\u0440\u043E\u043A\u0443 \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0442\n                                    \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043D\u0430 \u0440\u0443\u0447\u043A\u0435: \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043A\u043B\u0430\u0432\u0438\u0448 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442.\n                                -->\n                            <rt-side-menu-sub-item\n                                rtElem=\"item\"\n                                [item]=\"item\"\n                                [inFavorites]=\"true\"\n                                (clickSubMenuAction)=\"clickSubMenuAction.emit($event)\"\n                                (clickSubMenuAdditionalAction)=\"clickSubMenuAdditionalAction.emit($event)\">\n                                <rt-icon-button\n                                    #handle\n                                    rtSideMenuSubItemAction\n                                    cdkDragHandle\n                                    rtElem=\"handle\"\n                                    qa-dataid=\"side-menu-favorite-handle\"\n                                    size=\"sm\"\n                                    shape=\"circle\"\n                                    aria-keyshortcuts=\"ArrowUp ArrowDown\"\n                                    [icon]=\"dragIcon\"\n                                    [ariaLabel]=\"dragLabel()\"\n                                    [tooltip]=\"narrow() ? '' : dragLabel()\"\n                                    (clicked)=\"onHandleClick($event)\"\n                                    (keydown.arrowup)=\"onHandleKey($event, $index, -1)\"\n                                    (keydown.arrowdown)=\"onHandleKey($event, $index, 1)\" />\n                            </rt-side-menu-sub-item>\n                        </div>\n                    }\n                </div>\n            </ng-template>\n        </rt-expansion-panel>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-favorites{--rt-side-menu-favorites-radius: var(--rt-radius-full);--rt-side-menu-favorites-divider-width: var(--rt-border-width-thin);display:block}.rt-side-menu-favorites:has(.rt-side-menu-favorites__panel){border-bottom:var(--rt-side-menu-favorites-divider-width) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-side-menu-favorites__panel.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-duration-fast);--rt-expansion-panel-header-radius: var(--rt-side-menu-favorites-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: var(--rt-space-1);--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm)}.rt-side-menu-favorites__star{flex-shrink:0;color:var(--rt-color-action-primary)}.rt-side-menu-favorites__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-favorites__list{display:flex;flex-direction:column}.rt-side-menu-favorites__item{min-width:0;flex:1 1 auto}.rt-side-menu-favorites__row{display:flex;align-items:center}.rt-side-menu-favorites__row.cdk-drag-preview{--rt-side-menu-favorites-preview-radius: var(--rt-radius-full);--rt-side-menu-favorites-preview-shadow: var(--rt-shadow-md);border-radius:var(--rt-side-menu-favorites-preview-radius);box-shadow:var(--rt-side-menu-favorites-preview-shadow)}.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__item{min-width:0;flex:1 1 auto;border-radius:var(--rt-side-menu-favorites-preview-radius);background:var(--rt-color-bg-surface)}.rt-side-menu-favorites__row.cdk-drag-placeholder{opacity:0}.rt-side-menu-favorites__handle{flex-shrink:0;cursor:grab;opacity:0}.rt-side-menu-favorites__handle:active{cursor:grabbing}@media(hover:none){.rt-side-menu-favorites__handle{opacity:1}}.rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__handle{opacity:1}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__handle{overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle{overflow:visible;width:auto;margin-inline-start:0}}}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuFavoritesComponent, isStandalone: true, selector: "rt-side-menu-favorites", outputs: { clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { classAttribute: "rt-side-menu-favorites" }, viewQueries: [{ propertyName: "handles", predicate: ["handle"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu-favorites\">\n    @if (rows().length) {\n        <!--\n            \u0411\u043B\u043E\u043A \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430, \u043A\u0430\u043A \u043F\u0430\u043F\u043A\u0430 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0441\u043E \u0437\u0432\u0435\u0437\u0434\u043E\u0439 \u0432\u043C\u0435\u0441\u0442\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u043F\u0430\u043F\u043A\u0438. \u0418\u043C\u044F\n            \u043A\u043D\u043E\u043F\u043A\u0438 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435; \u0447\u0438\u0441\u043B\u043E \u0441\u0442\u0440\u043E\u043A \u2014 \u043F\u043E \u0432\u0445\u043E\u0434\u0443 \u043C\u0435\u043D\u044E.\n        -->\n        <rt-expansion-panel\n            rtElem=\"panel\"\n            appearance=\"plain\"\n            [ariaLabel]=\"open() ? collapseLabel() : expandLabel()\"\n            [(expanded)]=\"open\"\n            (expandedChange)=\"onToggle($event)\">\n            <rt-icon rtElem=\"star\" size=\"sm\" name=\"star-fill\" [fill]=\"true\" />\n            <span rtElem=\"title\" qa-dataid=\"side-menu-favorites-title\">\n                {{ titleLabel() }}\n                @if (countShown()) {\n                    ({{ rows().length }})\n                }\n            </span>\n\n            <ng-template rtExpansionPanelContent>\n                <div\n                    rtElem=\"list\"\n                    role=\"group\"\n                    qa-dataid=\"side-menu-favorites\"\n                    cdkDropList\n                    cdkDropListLockAxis=\"y\"\n                    [cdkDropListData]=\"rows()\"\n                    [attr.aria-label]=\"titleLabel()\"\n                    (cdkDropListDropped)=\"onDrop($event)\">\n                    @for (item of rows(); track item.id) {\n                        <div\n                            rtElem=\"row\"\n                            qa-dataid=\"side-menu-favorite-row\"\n                            cdkDrag\n                            [attr.data-id]=\"item.id\"\n                            (cdkDragStarted)=\"onDragStart()\"\n                            (cdkDragEnded)=\"onDragEnd($event)\">\n                            <!--\n                                    \u0420\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438, \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439 \u043F\u0435\u0440\u0435\u0434 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F. \u0421\u0442\u0440\u043E\u043A\u0443 \u0442\u044F\u043D\u0443\u0442\n                                    \u0442\u043E\u043B\u044C\u043A\u043E \u0437\u0430 \u0440\u0443\u0447\u043A\u0443: \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0430. \u0421 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044B \u0441\u0442\u0440\u043E\u043A\u0443 \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0442\n                                    \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043D\u0430 \u0440\u0443\u0447\u043A\u0435: \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043A\u043B\u0430\u0432\u0438\u0448 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442.\n                                -->\n                            <rt-side-menu-sub-item\n                                rtElem=\"item\"\n                                [item]=\"item\"\n                                [inFavorites]=\"true\"\n                                (clickSubMenuAction)=\"clickSubMenuAction.emit($event)\"\n                                (clickSubMenuAdditionalAction)=\"clickSubMenuAdditionalAction.emit($event)\">\n                                <rt-icon-button\n                                    #handle\n                                    rtSideMenuSubItemAction\n                                    cdkDragHandle\n                                    rtElem=\"handle\"\n                                    qa-dataid=\"side-menu-favorite-handle\"\n                                    size=\"sm\"\n                                    aria-keyshortcuts=\"ArrowUp ArrowDown\"\n                                    [icon]=\"dragIcon\"\n                                    [ariaLabel]=\"dragLabel()\"\n                                    [tooltip]=\"narrow() ? '' : dragLabel()\"\n                                    (clicked)=\"onHandleClick($event)\"\n                                    (keydown.arrowup)=\"onHandleKey($event, $index, -1)\"\n                                    (keydown.arrowdown)=\"onHandleKey($event, $index, 1)\" />\n                            </rt-side-menu-sub-item>\n                        </div>\n                    }\n                </div>\n            </ng-template>\n        </rt-expansion-panel>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-favorites{--rt-side-menu-favorites-radius: var(--rt-radius-full);--rt-side-menu-favorites-divider-width: var(--rt-border-width-thin);display:block}.rt-side-menu-favorites:has(.rt-side-menu-favorites__panel){border-bottom:var(--rt-side-menu-favorites-divider-width) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-side-menu-favorites__panel.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-duration-fast);--rt-expansion-panel-header-radius: var(--rt-side-menu-favorites-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: var(--rt-space-1);--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm)}.rt-side-menu-favorites__star{flex-shrink:0;color:var(--rt-color-action-primary)}.rt-side-menu-favorites__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-favorites__list{display:flex;flex-direction:column}.rt-side-menu-favorites__item{min-width:0;flex:1 1 auto}.rt-side-menu-favorites__row{display:flex;align-items:center}.rt-side-menu-favorites__row.cdk-drag-preview{--rt-side-menu-favorites-preview-radius: var(--rt-radius-full);--rt-side-menu-favorites-preview-shadow: var(--rt-shadow-md);border-radius:var(--rt-side-menu-favorites-preview-radius);box-shadow:var(--rt-side-menu-favorites-preview-shadow)}.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__item{min-width:0;flex:1 1 auto;border-radius:var(--rt-side-menu-favorites-preview-radius);background:var(--rt-color-bg-surface)}.rt-side-menu-favorites__row.cdk-drag-placeholder{opacity:0}.rt-side-menu-favorites__handle{--rt-icon-button-color: var(--rt-side-menu-sub-item-favorite-color);--rt-icon-step-sm: var(--rt-side-menu-sub-item-button-icon-size);flex-shrink:0;cursor:grab;opacity:0}.rt-side-menu-favorites__handle>.rt-icon-button{--rt-icon-button-size-step: var(--rt-side-menu-sub-item-favorite-size);--rt-icon-button-radius: var(--rt-side-menu-sub-item-button-radius)}.rt-side-menu-favorites__handle:active{cursor:grabbing}@media(hover:none){.rt-side-menu-favorites__handle{opacity:1}}.rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__handle{opacity:1}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__handle{overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle{overflow:visible;width:auto;margin-inline-start:0}}}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: RtExpansionPanelContentDirective, selector: "ng-template[rtExpansionPanelContent]" }, { kind: "component", type: 
                 // components
@@ -909,11 +973,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         RtIconButtonComponent,
                         RtIconComponent,
                         RtSideMenuSubItemComponent,
-                    ], template: "<ng-container rtBlock=\"rt-side-menu-favorites\">\n    @if (rows().length) {\n        <!--\n            \u0411\u043B\u043E\u043A \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430, \u043A\u0430\u043A \u043F\u0430\u043F\u043A\u0430 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0441\u043E \u0437\u0432\u0435\u0437\u0434\u043E\u0439 \u0432\u043C\u0435\u0441\u0442\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u043F\u0430\u043F\u043A\u0438. \u0418\u043C\u044F\n            \u043A\u043D\u043E\u043F\u043A\u0438 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435; \u0447\u0438\u0441\u043B\u043E \u0441\u0442\u0440\u043E\u043A \u2014 \u043F\u043E \u0432\u0445\u043E\u0434\u0443 \u043C\u0435\u043D\u044E.\n        -->\n        <rt-expansion-panel\n            rtElem=\"panel\"\n            appearance=\"plain\"\n            [ariaLabel]=\"open() ? collapseLabel() : expandLabel()\"\n            [(expanded)]=\"open\"\n            (expandedChange)=\"onToggle($event)\">\n            <rt-icon rtElem=\"star\" size=\"sm\" name=\"star-fill\" [fill]=\"true\" />\n            <span rtElem=\"title\" qa-dataid=\"side-menu-favorites-title\">\n                {{ titleLabel() }}\n                @if (countShown()) {\n                    ({{ rows().length }})\n                }\n            </span>\n\n            <ng-template rtExpansionPanelContent>\n                <div\n                    rtElem=\"list\"\n                    role=\"group\"\n                    qa-dataid=\"side-menu-favorites\"\n                    cdkDropList\n                    cdkDropListLockAxis=\"y\"\n                    [cdkDropListData]=\"rows()\"\n                    [attr.aria-label]=\"titleLabel()\"\n                    (cdkDropListDropped)=\"onDrop($event)\">\n                    @for (item of rows(); track item.id) {\n                        <div\n                            rtElem=\"row\"\n                            qa-dataid=\"side-menu-favorite-row\"\n                            cdkDrag\n                            [attr.data-id]=\"item.id\"\n                            (cdkDragStarted)=\"onDragStart()\"\n                            (cdkDragEnded)=\"onDragEnd($event)\">\n                            <!--\n                                    \u0420\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438, \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439 \u043F\u0435\u0440\u0435\u0434 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F. \u0421\u0442\u0440\u043E\u043A\u0443 \u0442\u044F\u043D\u0443\u0442\n                                    \u0442\u043E\u043B\u044C\u043A\u043E \u0437\u0430 \u0440\u0443\u0447\u043A\u0443: \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0430. \u0421 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044B \u0441\u0442\u0440\u043E\u043A\u0443 \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0442\n                                    \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043D\u0430 \u0440\u0443\u0447\u043A\u0435: \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043A\u043B\u0430\u0432\u0438\u0448 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442.\n                                -->\n                            <rt-side-menu-sub-item\n                                rtElem=\"item\"\n                                [item]=\"item\"\n                                [inFavorites]=\"true\"\n                                (clickSubMenuAction)=\"clickSubMenuAction.emit($event)\"\n                                (clickSubMenuAdditionalAction)=\"clickSubMenuAdditionalAction.emit($event)\">\n                                <rt-icon-button\n                                    #handle\n                                    rtSideMenuSubItemAction\n                                    cdkDragHandle\n                                    rtElem=\"handle\"\n                                    qa-dataid=\"side-menu-favorite-handle\"\n                                    size=\"sm\"\n                                    shape=\"circle\"\n                                    aria-keyshortcuts=\"ArrowUp ArrowDown\"\n                                    [icon]=\"dragIcon\"\n                                    [ariaLabel]=\"dragLabel()\"\n                                    [tooltip]=\"narrow() ? '' : dragLabel()\"\n                                    (clicked)=\"onHandleClick($event)\"\n                                    (keydown.arrowup)=\"onHandleKey($event, $index, -1)\"\n                                    (keydown.arrowdown)=\"onHandleKey($event, $index, 1)\" />\n                            </rt-side-menu-sub-item>\n                        </div>\n                    }\n                </div>\n            </ng-template>\n        </rt-expansion-panel>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-favorites{--rt-side-menu-favorites-radius: var(--rt-radius-full);--rt-side-menu-favorites-divider-width: var(--rt-border-width-thin);display:block}.rt-side-menu-favorites:has(.rt-side-menu-favorites__panel){border-bottom:var(--rt-side-menu-favorites-divider-width) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-side-menu-favorites__panel.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-duration-fast);--rt-expansion-panel-header-radius: var(--rt-side-menu-favorites-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: var(--rt-space-1);--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm)}.rt-side-menu-favorites__star{flex-shrink:0;color:var(--rt-color-action-primary)}.rt-side-menu-favorites__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-favorites__list{display:flex;flex-direction:column}.rt-side-menu-favorites__item{min-width:0;flex:1 1 auto}.rt-side-menu-favorites__row{display:flex;align-items:center}.rt-side-menu-favorites__row.cdk-drag-preview{--rt-side-menu-favorites-preview-radius: var(--rt-radius-full);--rt-side-menu-favorites-preview-shadow: var(--rt-shadow-md);border-radius:var(--rt-side-menu-favorites-preview-radius);box-shadow:var(--rt-side-menu-favorites-preview-shadow)}.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__item{min-width:0;flex:1 1 auto;border-radius:var(--rt-side-menu-favorites-preview-radius);background:var(--rt-color-bg-surface)}.rt-side-menu-favorites__row.cdk-drag-placeholder{opacity:0}.rt-side-menu-favorites__handle{flex-shrink:0;cursor:grab;opacity:0}.rt-side-menu-favorites__handle:active{cursor:grabbing}@media(hover:none){.rt-side-menu-favorites__handle{opacity:1}}.rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__handle{opacity:1}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__handle{overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle{overflow:visible;width:auto;margin-inline-start:0}}}\n"] }]
+                    ], template: "<ng-container rtBlock=\"rt-side-menu-favorites\">\n    @if (rows().length) {\n        <!--\n            \u0411\u043B\u043E\u043A \u2014 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0430\u044F\u0441\u044F \u043F\u0430\u043D\u0435\u043B\u044C \u043A\u0438\u0442\u0430, \u043A\u0430\u043A \u043F\u0430\u043F\u043A\u0430 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0441\u043E \u0437\u0432\u0435\u0437\u0434\u043E\u0439 \u0432\u043C\u0435\u0441\u0442\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u043F\u0430\u043F\u043A\u0438. \u0418\u043C\u044F\n            \u043A\u043D\u043E\u043F\u043A\u0438 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u0430 \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u0435 \u043D\u0430\u0436\u0430\u0442\u0438\u0435; \u0447\u0438\u0441\u043B\u043E \u0441\u0442\u0440\u043E\u043A \u2014 \u043F\u043E \u0432\u0445\u043E\u0434\u0443 \u043C\u0435\u043D\u044E.\n        -->\n        <rt-expansion-panel\n            rtElem=\"panel\"\n            appearance=\"plain\"\n            [ariaLabel]=\"open() ? collapseLabel() : expandLabel()\"\n            [(expanded)]=\"open\"\n            (expandedChange)=\"onToggle($event)\">\n            <rt-icon rtElem=\"star\" size=\"sm\" name=\"star-fill\" [fill]=\"true\" />\n            <span rtElem=\"title\" qa-dataid=\"side-menu-favorites-title\">\n                {{ titleLabel() }}\n                @if (countShown()) {\n                    ({{ rows().length }})\n                }\n            </span>\n\n            <ng-template rtExpansionPanelContent>\n                <div\n                    rtElem=\"list\"\n                    role=\"group\"\n                    qa-dataid=\"side-menu-favorites\"\n                    cdkDropList\n                    cdkDropListLockAxis=\"y\"\n                    [cdkDropListData]=\"rows()\"\n                    [attr.aria-label]=\"titleLabel()\"\n                    (cdkDropListDropped)=\"onDrop($event)\">\n                    @for (item of rows(); track item.id) {\n                        <div\n                            rtElem=\"row\"\n                            qa-dataid=\"side-menu-favorite-row\"\n                            cdkDrag\n                            [attr.data-id]=\"item.id\"\n                            (cdkDragStarted)=\"onDragStart()\"\n                            (cdkDragEnded)=\"onDragEnd($event)\">\n                            <!--\n                                    \u0420\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432\u043D\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u043E\u043A\u0438, \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0439 \u043F\u0435\u0440\u0435\u0434 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F. \u0421\u0442\u0440\u043E\u043A\u0443 \u0442\u044F\u043D\u0443\u0442\n                                    \u0442\u043E\u043B\u044C\u043A\u043E \u0437\u0430 \u0440\u0443\u0447\u043A\u0443: \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0430. \u0421 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044B \u0441\u0442\u0440\u043E\u043A\u0443 \u043F\u0435\u0440\u0435\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0442\n                                    \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043D\u0430 \u0440\u0443\u0447\u043A\u0435: \u043F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u043D\u0438\u0435 CDK \u043A\u043B\u0430\u0432\u0438\u0448 \u043D\u0435 \u0437\u043D\u0430\u0435\u0442.\n                                -->\n                            <rt-side-menu-sub-item\n                                rtElem=\"item\"\n                                [item]=\"item\"\n                                [inFavorites]=\"true\"\n                                (clickSubMenuAction)=\"clickSubMenuAction.emit($event)\"\n                                (clickSubMenuAdditionalAction)=\"clickSubMenuAdditionalAction.emit($event)\">\n                                <rt-icon-button\n                                    #handle\n                                    rtSideMenuSubItemAction\n                                    cdkDragHandle\n                                    rtElem=\"handle\"\n                                    qa-dataid=\"side-menu-favorite-handle\"\n                                    size=\"sm\"\n                                    aria-keyshortcuts=\"ArrowUp ArrowDown\"\n                                    [icon]=\"dragIcon\"\n                                    [ariaLabel]=\"dragLabel()\"\n                                    [tooltip]=\"narrow() ? '' : dragLabel()\"\n                                    (clicked)=\"onHandleClick($event)\"\n                                    (keydown.arrowup)=\"onHandleKey($event, $index, -1)\"\n                                    (keydown.arrowdown)=\"onHandleKey($event, $index, 1)\" />\n                            </rt-side-menu-sub-item>\n                        </div>\n                    }\n                </div>\n            </ng-template>\n        </rt-expansion-panel>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu-favorites{--rt-side-menu-favorites-radius: var(--rt-radius-full);--rt-side-menu-favorites-divider-width: var(--rt-border-width-thin);display:block}.rt-side-menu-favorites:has(.rt-side-menu-favorites__panel){border-bottom:var(--rt-side-menu-favorites-divider-width) solid var(--rt-color-border-subtle);margin-block-end:var(--rt-space-sm);padding-block-end:var(--rt-space-sm)}.rt-side-menu-favorites__panel.rt-expansion-panel{--rt-expansion-panel-duration: var(--rt-duration-fast);--rt-expansion-panel-header-radius: var(--rt-side-menu-favorites-radius);--rt-expansion-panel-header-min-height: var(--rt-control-height-md);--rt-expansion-panel-header-padding-block: var(--rt-space-2);--rt-expansion-panel-header-padding-start: var(--rt-space-1);--rt-expansion-panel-header-padding-end: var(--rt-space-sm);--rt-expansion-panel-header-gap: var(--rt-space-sm);--rt-expansion-panel-header-font-size: var(--rt-text-sm)}.rt-side-menu-favorites__star{flex-shrink:0;color:var(--rt-color-action-primary)}.rt-side-menu-favorites__title{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-side-menu-favorites__list{display:flex;flex-direction:column}.rt-side-menu-favorites__item{min-width:0;flex:1 1 auto}.rt-side-menu-favorites__row{display:flex;align-items:center}.rt-side-menu-favorites__row.cdk-drag-preview{--rt-side-menu-favorites-preview-radius: var(--rt-radius-full);--rt-side-menu-favorites-preview-shadow: var(--rt-shadow-md);border-radius:var(--rt-side-menu-favorites-preview-radius);box-shadow:var(--rt-side-menu-favorites-preview-shadow)}.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__item{min-width:0;flex:1 1 auto;border-radius:var(--rt-side-menu-favorites-preview-radius);background:var(--rt-color-bg-surface)}.rt-side-menu-favorites__row.cdk-drag-placeholder{opacity:0}.rt-side-menu-favorites__handle{--rt-icon-button-color: var(--rt-side-menu-sub-item-favorite-color);--rt-icon-step-sm: var(--rt-side-menu-sub-item-button-icon-size);flex-shrink:0;cursor:grab;opacity:0}.rt-side-menu-favorites__handle>.rt-icon-button{--rt-icon-button-size-step: var(--rt-side-menu-sub-item-favorite-size);--rt-icon-button-radius: var(--rt-side-menu-sub-item-button-radius)}.rt-side-menu-favorites__handle:active{cursor:grabbing}@media(hover:none){.rt-side-menu-favorites__handle{opacity:1}}.rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle,.rt-side-menu-favorites__row.cdk-drag-preview .rt-side-menu-favorites__handle{opacity:1}@media(hover:hover){.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__handle{overflow:hidden;width:0;margin-inline-start:calc(var(--rt-space-sm) * -1)}.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:hover .rt-side-menu-favorites__handle,.rt-side-menu--favorite-actions-none .rt-side-menu-favorites__row:has(:focus-visible) .rt-side-menu-favorites__handle{overflow:visible;width:auto;margin-inline-start:0}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { handles: [{ type: i0.ViewChildren, args: ['handle', { ...{
                             read: ElementRef,
                         }, isSignal: true }] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
 
+/**
+ * Отложенное закрытие подменю, открытого наведением. Уход указателя ставит закрытие, возврат на
+ * панель или наведение на пункт с подменю его снимают. Нулевая задержка закрывает сразу, как
+ * раньше: без входа задержки меню ведёт себя прежним образом.
+ */
+class RtSideMenuCloseTimer {
+    #handle = null;
+    constructor(destroyRef) {
+        destroyRef.onDestroy(() => this.cancel());
+    }
+    /** Закрыть через `delay` миллисекунд; поставленное раньше закрытие заменяется новым. */
+    run(delay, close) {
+        this.cancel();
+        if (delay <= 0) {
+            close();
+            return;
+        }
+        this.#handle = setTimeout(() => {
+            this.#handle = null;
+            close();
+        }, delay);
+    }
+    cancel() {
+        if (this.#handle !== null) {
+            clearTimeout(this.#handle);
+            this.#handle = null;
+        }
+    }
+}
+
 /**
  * Ходьба по подменю с клавиатуры. Проверяется вызовом, без подъёма компонента.
  *
@@ -1079,6 +1173,40 @@ class RtSideMenuResize {
     }
 }
 
+/**
+ * Входы вида бокового меню: подписи и заливка значков, поле поиска, подсказка прокрутки панели. Ни
+ * один не меняет поведения — по ним приложение даёт меню вид первого кита, а без них меню рисуется
+ * как раньше. Вынесены из класса меню, чтобы тот оставался в пределе длины файла.
+ */
+class RtSideMenuLookBase {
+    constructor() {
+        /** Подсказки строк подменю — у подписей и у кнопок строк. Доступные имена остаются. */
+        this.subMenuTooltipsShown = input(true, { ...(ngDevMode ? { debugName: "subMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Подписи под значками полосы. Выключено — имя пункта уходит в подсказку справа от значка, а
+         * подсказка подчиняется `subMenuTooltipsShown`; доступное имя пункт держит всегда.
+         */
+        this.railTitlesShown = input(true, { ...(ngDevMode ? { debugName: "railTitlesShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Залитые значки полосы — залитый рисунок материального набора и заливка шрифта лигатуры. */
+        this.railIconFill = input(false, { ...(ngDevMode ? { debugName: "railIconFill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Залитые значки строк и папок подменю — так же, как `railIconFill` у полосы. */
+        this.subItemIconFill = input(false, { ...(ngDevMode ? { debugName: "subItemIconFill" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Подсказка прокрутки внизу панели подменю, как у полосы: длинный список не обрывается молча. */
+        this.panelScrollHintShown = input(false, { ...(ngDevMode ? { debugName: "panelScrollHintShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Размер поля поиска подменю — ступень `rt-input`. */
+        this.searchSize = input('sm', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchSize" }] : /* istanbul ignore next */ []));
+        /** Вид поля поиска подменю — вид `rt-input`. */
+        this.searchAppearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchAppearance" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuLookBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtSideMenuLookBase, isStandalone: true, inputs: { subMenuTooltipsShown: { classPropertyName: "subMenuTooltipsShown", publicName: "subMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null }, railTitlesShown: { classPropertyName: "railTitlesShown", publicName: "railTitlesShown", isSignal: true, isRequired: false, transformFunction: null }, railIconFill: { classPropertyName: "railIconFill", publicName: "railIconFill", isSignal: true, isRequired: false, transformFunction: null }, subItemIconFill: { classPropertyName: "subItemIconFill", publicName: "subItemIconFill", isSignal: true, isRequired: false, transformFunction: null }, panelScrollHintShown: { classPropertyName: "panelScrollHintShown", publicName: "panelScrollHintShown", isSignal: true, isRequired: false, transformFunction: null }, searchSize: { classPropertyName: "searchSize", publicName: "searchSize", isSignal: true, isRequired: false, transformFunction: null }, searchAppearance: { classPropertyName: "searchAppearance", publicName: "searchAppearance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuLookBase, decorators: [{
+            type: Directive
+        }], propDecorators: { subMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuTooltipsShown", required: false }] }], railTitlesShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "railTitlesShown", required: false }] }], railIconFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "railIconFill", required: false }] }], subItemIconFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemIconFill", required: false }] }], panelScrollHintShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelScrollHintShown", required: false }] }], searchSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSize", required: false }] }], searchAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAppearance", required: false }] }] } });
+
 /** Шапка бокового меню: над полосой пунктов. */
 class RtSideMenuHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -1136,13 +1264,15 @@ const BEM_BLOCK = 'rt-side-menu';
  * Боковая навигация: полоса пунктов и подменю раздела рядом. Перенос бокового меню первого кита на
  * части второго; `rt-menu` — другое семейство, выпадающее меню действий.
  */
-class RtSideMenuComponent {
+class RtSideMenuComponent extends RtSideMenuLookBase {
     #breakpoints;
     #renderer;
     /** Настройки меню, если приложение их включило: режим и ширина хранятся там под `menuId`. */
     #settings;
     /** Тяга ширины: просьба уходит одна, на отпускании — в настройки меню и наружу. */
     #resize;
+    /** Закрытие подменю, отложенное входом `subMenuCloseDelay`. */
+    #closeTimer;
     /** Ходьба с клавиатуры открывает пункт настоящим нажатием его строки — той же дорогой, что и мышь. */
     #keyboard;
     /** Подменю открыл указатель. У закреплённого режима открытость считается иначе. */
@@ -1159,6 +1289,7 @@ class RtSideMenuComponent {
     #width;
     #pinnedSubMenu;
     constructor() {
+        super();
         this.#breakpoints = inject(BreakpointsService);
         this.#renderer = inject(Renderer2);
         /** Настройки меню, если приложение их включило: режим и ширина хранятся там под `menuId`. */
@@ -1174,6 +1305,8 @@ class RtSideMenuComponent {
             panel: () => this.panelRef()?.nativeElement ?? null,
             namedWidth: () => this.#width(),
         }, inject(DestroyRef));
+        /** Закрытие подменю, отложенное входом `subMenuCloseDelay`. */
+        this.#closeTimer = new RtSideMenuCloseTimer(inject(DestroyRef));
         /** Ходьба с клавиатуры открывает пункт настоящим нажатием его строки — той же дорогой, что и мышь. */
         this.#keyboard = new RtSubMenuKeyboard({
             open: (item) => this.#pressRow(item),
@@ -1282,8 +1415,11 @@ class RtSideMenuComponent {
         this.isFavoritesSearchShown = input(true, { ...(ngDevMode ? { debugName: "isFavoritesSearchShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Кнопка закрепления в шапке подменю; выключено — подменю только всплывает, если режим не задан входом. */
         this.pinShown = input(true, { ...(ngDevMode ? { debugName: "pinShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Подсказки строк подменю — у подписей и у кнопок строк. Доступные имена остаются. */
-        this.subMenuTooltipsShown = input(true, { ...(ngDevMode ? { debugName: "subMenuTooltipsShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Задержка закрытия подменю, открытого наведением, в миллисекундах: уход указателя закрывает его
+         * не сразу, а возврат на панель держит открытым. Ноль — закрытие сразу, как раньше.
+         */
+        this.subMenuCloseDelay = input(0, { ...(ngDevMode ? { debugName: "subMenuCloseDelay" } : /* istanbul ignore next */ {}), transform: (value) => numberAttribute(value, 0) });
         this.subMenuModeChange = output();
         this.subMenuWidthChange = output();
         /** Начало и конец тяги: по ним потребитель накрывает чужие кадры и снимает накрытие. */
@@ -1302,15 +1438,7 @@ class RtSideMenuComponent {
         });
         // Имя без значка кита и без пары рисует пункт без значка, и пропуск без предупреждения не заметен.
         if (isDevMode()) {
-            effect(() => {
-                const unpaired = unpairedSideMenuIcons(this.menuItems(), this.ownIconTpl() !== undefined);
-                if (unpaired.length) {
-                    const names = unpaired.map((name) => `«${name}»`).join(', ');
-                    // eslint-disable-next-line no-console -- предупреждение разработчику приложения: другого канала у кита нет
-                    console.warn(`rt-side-menu «${this.menuId()}»: значков ${names} нет ни в наборе кита, ни в перечне имён Material. ` +
-                        'Задайте имя кита или свой значок через <ng-template rtSideMenuIcon>.');
-                }
-            });
+            effect(() => warnUnpairedSideMenuIcons(this.menuId(), this.menuItems(), this.ownIconTpl() !== undefined));
         }
     }
     onClickMenu(item) {
@@ -1353,23 +1481,38 @@ class RtSideMenuComponent {
         this.searchControl.setValue('', { emitEvent: false });
         this.subMenuQuery.set('');
     }
-    /** Наведение на пункт полосы открывает его подменю; уход указателя с панели — без пункта. */
+    /**
+     * Наведение на пункт полосы открывает его подменю сразу; уход указателя с панели — без пункта —
+     * и пункт без подменю закрывают его через задержку.
+     */
     toggleSubMenu(item) {
-        if (this.isPinned() || (item === undefined && (this.#searchHeld() || this.#dragHeld()))) {
+        if (this.isPinned() || (item === undefined && this.#isHeld())) {
             return;
         }
         if (item?.submenu) {
+            this.#closeTimer.cancel();
             this.selectedSubMenu.set(item.submenu);
             this.#hoverOpened.set(true);
         }
         else if (this.selectedItem()?.submenu) {
+            this.#closeTimer.cancel();
             this.selectedSubMenu.set(this.selectedItem()?.submenu ?? null);
         }
         else {
-            this.closeSubMenu();
+            // Ушедший с панели указатель мог за задержку взяться за поиск или строку избранного.
+            this.#closeTimer.run(this.subMenuCloseDelay(), () => {
+                if (item !== undefined || !this.#isHeld()) {
+                    this.closeSubMenu();
+                }
+            });
         }
     }
+    /** Указатель вернулся на панель: отложенное закрытие снимается. */
+    cancelSubMenuClose() {
+        this.#closeTimer.cancel();
+    }
     closeSubMenu() {
+        this.#closeTimer.cancel();
         this.selectedItem.set(null);
         this.selectedSubMenu.set(null);
         this.searchControl.setValue('', { emitEvent: false });
@@ -1422,6 +1565,9 @@ class RtSideMenuComponent {
             this.closeMobileMenuAction.emit();
         }
     }
+    #isHeld() {
+        return this.#searchHeld() || this.#dragHeld();
+    }
     /**
      * Нажат пункт полосы, пока подменю закреплено: нажатие — выбор раздела. Пункт со своим адресом и
      * без разделов выбор снимает: у страницы нет разделов, и панель прежнего раздела врала бы.
@@ -1450,7 +1596,7 @@ class RtSideMenuComponent {
         rows.find((row) => row.id === String(item.id))?.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuComponent, isStandalone: true, selector: "rt-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, favoritesCount: { classPropertyName: "favoritesCount", publicName: "favoritesCount", isSignal: true, isRequired: false, transformFunction: null }, favoriteActionsReserve: { classPropertyName: "favoriteActionsReserve", publicName: "favoriteActionsReserve", isSignal: true, isRequired: false, transformFunction: null }, isFavoritesSearchShown: { classPropertyName: "isFavoritesSearchShown", publicName: "isFavoritesSearchShown", isSignal: true, isRequired: false, transformFunction: null }, pinShown: { classPropertyName: "pinShown", publicName: "pinShown", isSignal: true, isRequired: false, transformFunction: null }, subMenuTooltipsShown: { classPropertyName: "subMenuTooltipsShown", publicName: "subMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", subMenuResizeStart: "subMenuResizeStart", subMenuResizeEnd: "subMenuResizeEnd", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rt-side-menu--pinned": "isPinned()", "style.--rt-side-menu-panel-dragged-width": "panelWidthStyle()", "class.rt-side-menu--favorite-actions-none": "favoriteActionsReserve() === 'none'" }, classAttribute: "rt-side-menu" }, providers: [{ provide: RT_SIDE_MENU, useExisting: RtSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ownIconTpl", first: true, predicate: RtSideMenuIconDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu\">\n    @if (narrow()) {\n        <!-- \u0423\u0437\u043A\u0438\u0439 \u044D\u043A\u0440\u0430\u043D: \u043E\u0434\u0438\u043D \u0441\u0442\u043E\u043B\u0431\u0435\u0446 \u2014 \u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u043F\u0443\u043D\u043A\u0442\u044B \u0438\u043B\u0438 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043D\u0430\u0437\u0430\u0434. -->\n        <rt-scroll-area rtElem=\"mobile\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                @if (selectedSubMenu()?.length) {\n                    <div rtElem=\"mobile-sub\">\n                        <button type=\"button\" rtElem=\"back\" qa-dataid=\"side-menu-back\" (click)=\"onBackToMainMenu()\">\n                            <rt-icon rtElem=\"back-icon\" size=\"sm\" name=\"arrow-left\" />\n                            <span rtElem=\"back-label\">{{ backLabel() }}</span>\n                        </button>\n\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </div>\n                } @else {\n                    <nav rtElem=\"mobile-list\">\n                        @for (item of menuItems(); track item.id) {\n                            <ng-container [ngTemplateOutlet]=\"mobileItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                        }\n                    </nav>\n                }\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n    } @else {\n        <rt-scroll-area rtElem=\"rail\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                <nav rtElem=\"rail-list\">\n                    @for (item of menuItems(); track item.id) {\n                        <ng-container [ngTemplateOutlet]=\"railItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                    }\n                </nav>\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n\n        @if (subMenuOpened()) {\n            @if (isSearchHeld()) {\n                <!-- \u041F\u043E\u0434\u043B\u043E\u0436\u043A\u0430 \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0439 \u043F\u0430\u043D\u0435\u043B\u0438: \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0432\u0437\u044F\u0442\u043E\u0435 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430, \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0441\u043D\u0430\u0440\u0443\u0436\u0438. -->\n                <div\n                    rtElem=\"backdrop\"\n                    qa-dataid=\"side-menu-backdrop\"\n                    tabindex=\"-1\"\n                    (click)=\"closeSubMenu()\"\n                    (keydown.escape)=\"closeSubMenu()\"></div>\n            }\n\n            <div\n                #panel\n                rtElem=\"panel\"\n                qa-dataid=\"side-menu-panel\"\n                [rtMod]=\"{ pinned: isPinned(), held: isSearchHeld() }\"\n                (mouseleave)=\"toggleSubMenu()\">\n                <div rtElem=\"panel-head\">\n                    <rt-input\n                        rtElem=\"search\"\n                        qa-dataid=\"side-menu-search\"\n                        size=\"sm\"\n                        iconLeft=\"search\"\n                        [placeholder]=\"searchLabel()\"\n                        [ariaLabel]=\"searchLabel()\"\n                        [formControl]=\"searchControl\"\n                        (focusin)=\"onSearchHold()\"\n                        (keydown)=\"onSearchKeydown($event)\" />\n\n                    @if (pinShown()) {\n                        <rt-icon-button\n                            rtElem=\"pin\"\n                            qa-dataid=\"side-menu-pin\"\n                            size=\"sm\"\n                            icon=\"pin\"\n                            [iconFill]=\"isPinned()\"\n                            [active]=\"isPinned()\"\n                            [ariaLabel]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            [tooltip]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            (clicked)=\"onSubMenuModeToggle()\" />\n                    }\n                </div>\n\n                <rt-scroll-area rtElem=\"panel-body\">\n                    <ng-container *rtScrollAreaContent>\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </ng-container>\n                </rt-scroll-area>\n            </div>\n\n            @if (isPinned()) {\n                <!-- \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0443\u0445\u043E\u0434\u0438\u0442 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430. -->\n                <div\n                    rtElem=\"resizer\"\n                    qa-dataid=\"side-menu-resize\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"resizeLabel()\"\n                    [attr.aria-valuenow]=\"resizeValueNow()\"\n                    [attr.aria-valuemin]=\"resizeValueNow() === null ? null : resizeValueMin\"\n                    [attr.aria-valuemax]=\"resizeValueNow() === null ? null : resizeValueMax\"\n                    (pointerdown)=\"onResizeStart($event)\"\n                    (keydown)=\"onResizeKeydown($event)\"></div>\n            }\n        }\n    }\n    <ng-template #subMenuTpl>\n        @if (narrow()) {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"side-menu-search\"\n                size=\"sm\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchLabel()\"\n                [ariaLabel]=\"searchLabel()\"\n                [formControl]=\"searchControl\"\n                (keydown)=\"onSearchKeydown($event)\" />\n        }\n\n        @if (isNothingFound()) {\n            <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel() }}</div>\n        }\n\n        <div rtElem=\"sub-list\">\n            <!-- \u0411\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430: \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u0438 \u0431\u0435\u0437 \u0441\u0442\u0440\u043E\u043A \u043C\u0435\u0441\u0442\u0430 \u043D\u0435 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442. -->\n            <rt-side-menu-favorites\n                (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n\n            @for (item of visibleSubMenuItems(); track item.id) {\n                <rt-side-menu-sub-item\n                    [item]=\"item\"\n                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                    (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #railItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link) {\n            <a\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-expanded]=\"item.submenu?.length ? subMenuOpened() && selectedItem() === item : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #railItemBodyTpl let-item>\n        @if (item.icon) {\n            <!-- \u0418\u043C\u044F Material \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0441\u0432\u043E\u0435\u0439 \u043F\u0430\u0440\u043E\u0439; \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0438\u043C \u0448\u0430\u0431\u043B\u043E\u043D\u043E\u043C \u043C\u0435\u043D\u044E. -->\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            <span rtElem=\"rail-icon\">\n                @if (kitIcon) {\n                    <rt-icon [name]=\"kitIcon\" />\n                } @else if (ownIconTpl(); as own) {\n                    <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"own\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                    </span>\n                }\n            </span>\n        }\n\n        @if (item.name) {\n            <span rtElem=\"rail-title\">{{ item.name }}</span>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link && !item.submenu?.length) {\n            <a\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemBodyTpl let-item>\n        @if (item.icon) {\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            @if (kitIcon) {\n                <rt-icon rtElem=\"mobile-icon\" [name]=\"kitIcon\" />\n            } @else if (ownIconTpl(); as own) {\n                <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                    <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                </span>\n            }\n        }\n\n        <span rtElem=\"mobile-title\" [rtTooltip]=\"item.name\">{{ item.name }}</span>\n\n        @if (item.submenu?.length) {\n            <!-- \u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0443 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u0432\u043E\u0434\u0438\u0442 \u0432 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0430 \u043D\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430 \u043C\u0435\u0441\u0442\u0435. -->\n            <rt-icon rtElem=\"mobile-chevron\" size=\"sm\" name=\"arrow-right\" />\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu{--rt-side-menu-rail-width: 5.5rem;--rt-side-menu-panel-width: 15rem;--rt-side-menu-panel-held-width: 30rem;--rt-side-menu-mobile-width: 15rem;--rt-side-menu-panel-radius: var(--rt-radius-lg);--rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);--rt-side-menu-item-radius: var(--rt-radius-full);--rt-side-menu-resizer-border-width: var(--rt-border-width-thick);--rt-side-menu-panel-border-width: var(--rt-border-width-thin);--rt-side-menu-transition-duration: var(--rt-duration-fast);--rt-side-menu-panel-dragged-width: 0px;--rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));position:relative;display:flex;height:100%;color:var(--rt-color-text-primary)}.rt-side-menu__rail{max-width:var(--rt-side-menu-rail-width);height:100%;box-sizing:border-box;flex:0 0 var(--rt-side-menu-rail-width);border-right:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface)}.rt-side-menu__rail .rt-scroll-area__body{padding-inline:var(--rt-space-1)}.rt-side-menu__rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--rt-space-md);padding-block:var(--rt-space-sm)}.rt-side-menu__rail-item{display:flex;width:100%;flex-direction:column;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-1);text-decoration:none}.rt-side-menu__rail-item:focus-visible{outline:none}.rt-side-menu__rail-item:focus-visible .rt-side-menu__rail-icon{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-side-menu__rail-item:hover .rt-side-menu__rail-icon,.rt-side-menu__rail-item:active .rt-side-menu__rail-icon{background:var(--rt-color-bg-hover)}.rt-side-menu__rail-item--active .rt-side-menu__rail-icon,.rt-side-menu__rail-item--active:hover .rt-side-menu__rail-icon{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__rail-icon{display:flex;width:3.5rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--rt-side-menu-item-radius);transition:background-color var(--rt-side-menu-transition-duration) ease}.rt-side-menu__rail-title{max-width:100%;font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);overflow-wrap:anywhere;text-align:center}.rt-side-menu__backdrop{position:fixed;z-index:var(--rt-z-dropdown);inset:0}.rt-side-menu__panel{position:absolute;z-index:var(--rt-z-dropdown);top:0;left:var(--rt-side-menu-rail-width);display:flex;width:var(--rt-side-menu-panel-shown-width);height:100%;box-sizing:border-box;flex-direction:column;border-radius:0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;border-left:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface);box-shadow:var(--rt-side-menu-panel-shadow)}.rt-side-menu__panel--held{width:max(var(--rt-side-menu-panel-held-width),var(--rt-side-menu-panel-shown-width))}.rt-side-menu__panel--pinned{--rt-side-menu-panel-radius: 0;--rt-side-menu-panel-shadow: var(--rt-shadow-none);position:relative;left:0;flex-shrink:0}.rt-side-menu__panel-head{display:flex;align-items:center;padding:var(--rt-space-sm);gap:var(--rt-space-2)}.rt-side-menu__search{min-width:0;flex:1 1 auto}.rt-side-menu__pin{flex-shrink:0}.rt-side-menu__panel-body{min-height:0;flex:1 1 auto}.rt-side-menu__sub-list{display:flex;flex-direction:column;padding-block-end:var(--rt-space-sm);padding-inline:var(--rt-space-2)}.rt-side-menu__empty{padding:var(--rt-space-md);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}.rt-side-menu__resizer{position:absolute;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));width:var(--rt-space-sm);cursor:col-resize}.rt-side-menu__resizer:before{position:absolute;top:0;bottom:0;left:50%;border-left:var(--rt-side-menu-resizer-border-width) solid transparent;content:\"\"}.rt-side-menu__resizer:hover:before,.rt-side-menu__resizer:focus-visible:before{border-left-color:var(--rt-color-border-strong)}.rt-side-menu__resizer:focus-visible{outline:none}.rt-side-menu__mobile{min-width:0;max-width:100%;height:100%;flex:0 0 var(--rt-side-menu-mobile-width);background:var(--rt-color-bg-surface)}.rt-side-menu__mobile .rt-scroll-area__body{padding-inline:0}.rt-side-menu__mobile-list,.rt-side-menu__mobile-sub{display:flex;flex-direction:column;padding:var(--rt-space-sm);gap:var(--rt-space-1)}.rt-side-menu__mobile-item,.rt-side-menu__back{display:flex;width:100%;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-item-radius);background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:calc(var(--rt-space-sm) + var(--rt-space-xs));padding-inline:var(--rt-space-md);text-align:start;text-decoration:none}.rt-side-menu__mobile-item:hover,.rt-side-menu__back:hover{background:var(--rt-color-bg-hover)}.rt-side-menu__mobile-item:focus-visible,.rt-side-menu__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu__mobile-item--active,.rt-side-menu__back--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__own-icon{--rt-side-menu-own-icon-size: var(--rt-size-5);display:inline-flex;width:var(--rt-side-menu-own-icon-size);height:var(--rt-side-menu-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu__mobile-icon,.rt-side-menu__back-icon,.rt-side-menu__mobile-chevron{flex-shrink:0}.rt-side-menu__mobile-title,.rt-side-menu__back-label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtScrollAreaComponent, selector: "rt-scroll-area", inputs: ["isScrollHintShown"] }, { kind: "directive", type: RtScrollAreaContentDirective, selector: "[rtScrollAreaContent]" }, { kind: "directive", type: RtScrollAreaFooterDirective, selector: "[rtScrollAreaFooter]" }, { kind: "directive", type: RtScrollAreaHeaderDirective, selector: "[rtScrollAreaHeader]" }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "component", type: RtSideMenuFavoritesComponent, selector: "rt-side-menu-favorites", outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "component", type: RtSideMenuSubItemComponent, selector: "rt-side-menu-sub-item", inputs: ["item", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSideMenuComponent, isStandalone: true, selector: "rt-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: true, isRequired: false, transformFunction: null }, favoritesCount: { classPropertyName: "favoritesCount", publicName: "favoritesCount", isSignal: true, isRequired: false, transformFunction: null }, favoriteActionsReserve: { classPropertyName: "favoriteActionsReserve", publicName: "favoriteActionsReserve", isSignal: true, isRequired: false, transformFunction: null }, isFavoritesSearchShown: { classPropertyName: "isFavoritesSearchShown", publicName: "isFavoritesSearchShown", isSignal: true, isRequired: false, transformFunction: null }, pinShown: { classPropertyName: "pinShown", publicName: "pinShown", isSignal: true, isRequired: false, transformFunction: null }, subMenuCloseDelay: { classPropertyName: "subMenuCloseDelay", publicName: "subMenuCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", subMenuResizeStart: "subMenuResizeStart", subMenuResizeEnd: "subMenuResizeEnd", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rt-side-menu--pinned": "isPinned()", "style.--rt-side-menu-panel-dragged-width": "panelWidthStyle()", "class.rt-side-menu--favorite-actions-none": "favoriteActionsReserve() === 'none'" }, classAttribute: "rt-side-menu" }, providers: [{ provide: RT_SIDE_MENU, useExisting: RtSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "ownIconTpl", first: true, predicate: RtSideMenuIconDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-container rtBlock=\"rt-side-menu\">\n    @if (narrow()) {\n        <!-- \u0423\u0437\u043A\u0438\u0439 \u044D\u043A\u0440\u0430\u043D: \u043E\u0434\u0438\u043D \u0441\u0442\u043E\u043B\u0431\u0435\u0446 \u2014 \u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u043F\u0443\u043D\u043A\u0442\u044B \u0438\u043B\u0438 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043D\u0430\u0437\u0430\u0434. -->\n        <rt-scroll-area rtElem=\"mobile\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                @if (selectedSubMenu()?.length) {\n                    <div rtElem=\"mobile-sub\">\n                        <button type=\"button\" rtElem=\"back\" qa-dataid=\"side-menu-back\" (click)=\"onBackToMainMenu()\">\n                            <rt-icon rtElem=\"back-icon\" size=\"sm\" name=\"arrow-left\" />\n                            <span rtElem=\"back-label\">{{ backLabel() }}</span>\n                        </button>\n\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </div>\n                } @else {\n                    <nav rtElem=\"mobile-list\">\n                        @for (item of menuItems(); track item.id) {\n                            <ng-container [ngTemplateOutlet]=\"mobileItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                        }\n                    </nav>\n                }\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n    } @else {\n        <rt-scroll-area rtElem=\"rail\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                <nav rtElem=\"rail-list\">\n                    @for (item of menuItems(); track item.id) {\n                        <ng-container [ngTemplateOutlet]=\"railItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                    }\n                </nav>\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n\n        @if (subMenuOpened()) {\n            @if (isSearchHeld()) {\n                <!-- \u041F\u043E\u0434\u043B\u043E\u0436\u043A\u0430 \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0439 \u043F\u0430\u043D\u0435\u043B\u0438: \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0432\u0437\u044F\u0442\u043E\u0435 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430, \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0441\u043D\u0430\u0440\u0443\u0436\u0438. -->\n                <div\n                    rtElem=\"backdrop\"\n                    qa-dataid=\"side-menu-backdrop\"\n                    tabindex=\"-1\"\n                    (click)=\"closeSubMenu()\"\n                    (keydown.escape)=\"closeSubMenu()\"></div>\n            }\n\n            <div\n                #panel\n                rtElem=\"panel\"\n                qa-dataid=\"side-menu-panel\"\n                [rtMod]=\"{ pinned: isPinned(), held: isSearchHeld() }\"\n                (mouseenter)=\"cancelSubMenuClose()\"\n                (mouseleave)=\"toggleSubMenu()\">\n                <div rtElem=\"panel-head\">\n                    <rt-input\n                        rtElem=\"search\"\n                        qa-dataid=\"side-menu-search\"\n                        iconLeft=\"search\"\n                        [size]=\"searchSize()\"\n                        [appearance]=\"searchAppearance()\"\n                        [placeholder]=\"searchLabel()\"\n                        [ariaLabel]=\"searchLabel()\"\n                        [formControl]=\"searchControl\"\n                        (focusin)=\"onSearchHold()\"\n                        (keydown)=\"onSearchKeydown($event)\" />\n\n                    @if (pinShown()) {\n                        <rt-icon-button\n                            rtElem=\"pin\"\n                            qa-dataid=\"side-menu-pin\"\n                            size=\"sm\"\n                            icon=\"pin\"\n                            [iconFill]=\"isPinned()\"\n                            [active]=\"isPinned()\"\n                            [ariaLabel]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            [tooltip]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            (clicked)=\"onSubMenuModeToggle()\" />\n                    }\n                </div>\n\n                <rt-scroll-area rtElem=\"panel-body\" [isScrollHintShown]=\"panelScrollHintShown()\">\n                    <ng-container *rtScrollAreaContent>\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </ng-container>\n                </rt-scroll-area>\n            </div>\n\n            @if (isPinned()) {\n                <!-- \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0443\u0445\u043E\u0434\u0438\u0442 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430. -->\n                <div\n                    rtElem=\"resizer\"\n                    qa-dataid=\"side-menu-resize\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"resizeLabel()\"\n                    [attr.aria-valuenow]=\"resizeValueNow()\"\n                    [attr.aria-valuemin]=\"resizeValueNow() === null ? null : resizeValueMin\"\n                    [attr.aria-valuemax]=\"resizeValueNow() === null ? null : resizeValueMax\"\n                    (pointerdown)=\"onResizeStart($event)\"\n                    (keydown)=\"onResizeKeydown($event)\"></div>\n            }\n        }\n    }\n    <ng-template #subMenuTpl>\n        @if (narrow()) {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"side-menu-search\"\n                iconLeft=\"search\"\n                [size]=\"searchSize()\"\n                [appearance]=\"searchAppearance()\"\n                [placeholder]=\"searchLabel()\"\n                [ariaLabel]=\"searchLabel()\"\n                [formControl]=\"searchControl\"\n                (keydown)=\"onSearchKeydown($event)\" />\n        }\n\n        @if (isNothingFound()) {\n            <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel() }}</div>\n        }\n\n        <div rtElem=\"sub-list\">\n            <!-- \u0411\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430: \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u0438 \u0431\u0435\u0437 \u0441\u0442\u0440\u043E\u043A \u043C\u0435\u0441\u0442\u0430 \u043D\u0435 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442. -->\n            <rt-side-menu-favorites\n                (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n\n            @for (item of visibleSubMenuItems(); track item.id) {\n                <rt-side-menu-sub-item\n                    [item]=\"item\"\n                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                    (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #railItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        <!-- \u0411\u0435\u0437 \u043F\u043E\u0434\u043F\u0438\u0441\u0435\u0439 \u043F\u043E\u0434 \u0437\u043D\u0430\u0447\u043A\u0430\u043C\u0438 \u0438\u043C\u044F \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u0432 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0435 \u0441\u043F\u0440\u0430\u0432\u0430; \u0432\u044B\u043A\u043B\u044E\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438 \u0433\u0430\u0441\u044F\u0442 \u0438 \u0435\u0451. -->\n        @let railTip = railTitlesShown() || !subMenuTooltipsShown() ? '' : item.name;\n        @if (item.link) {\n            <a\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                rtTooltipPlacement=\"right\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                [attr.aria-label]=\"railTitlesShown() ? null : item.name\"\n                [rtTooltip]=\"railTip\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                rtTooltipPlacement=\"right\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-label]=\"railTitlesShown() ? null : item.name\"\n                [rtTooltip]=\"railTip\"\n                [attr.aria-expanded]=\"item.submenu?.length ? subMenuOpened() && selectedItem() === item : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #railItemBodyTpl let-item>\n        @if (item.icon) {\n            <!-- \u0418\u043C\u044F Material \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0441\u0432\u043E\u0435\u0439 \u043F\u0430\u0440\u043E\u0439; \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0438\u043C \u0448\u0430\u0431\u043B\u043E\u043D\u043E\u043C \u043C\u0435\u043D\u044E. -->\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            <span rtElem=\"rail-icon\">\n                @if (kitIcon) {\n                    <rt-icon [name]=\"kitIcon\" [fill]=\"railIconFill()\" />\n                } @else if (ownIconTpl(); as own) {\n                    <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"own\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                    </span>\n                }\n            </span>\n        }\n\n        @if (item.name && railTitlesShown()) {\n            <span rtElem=\"rail-title\">{{ item.name }}</span>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link && !item.submenu?.length) {\n            <a\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemBodyTpl let-item>\n        @if (item.icon) {\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            @if (kitIcon) {\n                <rt-icon rtElem=\"mobile-icon\" [name]=\"kitIcon\" />\n            } @else if (ownIconTpl(); as own) {\n                <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                    <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                </span>\n            }\n        }\n\n        <span rtElem=\"mobile-title\" [rtTooltip]=\"item.name\">{{ item.name }}</span>\n\n        @if (item.submenu?.length) {\n            <!-- \u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0443 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u0432\u043E\u0434\u0438\u0442 \u0432 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0430 \u043D\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430 \u043C\u0435\u0441\u0442\u0435. -->\n            <rt-icon rtElem=\"mobile-chevron\" size=\"sm\" name=\"arrow-right\" />\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu,.rt-side-menu-favorites__row.cdk-drag-preview{--rt-side-menu-item-color: currentcolor;--rt-side-menu-item-bg-hover: var(--rt-color-bg-hover);--rt-side-menu-item-bg-active: var(--rt-color-action-primary-subtle);--rt-side-menu-item-color-active: var(--rt-color-action-primary-on-surface)}.rt-side-menu{--rt-side-menu-rail-width: 5.5rem;--rt-side-menu-panel-width: 15rem;--rt-side-menu-panel-held-width: 30rem;--rt-side-menu-mobile-width: 15rem;--rt-side-menu-panel-radius: var(--rt-radius-lg);--rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);--rt-side-menu-item-radius: var(--rt-radius-full);--rt-side-menu-resizer-border-width: var(--rt-border-width-thick);--rt-side-menu-panel-border-width: var(--rt-border-width-thin);--rt-side-menu-transition-duration: var(--rt-duration-fast);--rt-side-menu-rail-icon-size: var(--rt-icon-step-md);--rt-side-menu-rail-gap: var(--rt-space-md);--rt-side-menu-rail-bg: var(--rt-color-bg-surface);--rt-side-menu-rail-border-width: var(--rt-side-menu-panel-border-width);--rt-side-menu-panel-bg: var(--rt-color-bg-surface);--rt-side-menu-panel-head-padding: var(--rt-space-sm);--rt-side-menu-sub-list-padding-inline: var(--rt-space-2);--rt-side-menu-empty-padding: var(--rt-space-md);--rt-side-menu-panel-dragged-width: 0px;--rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));position:relative;display:flex;height:100%;color:var(--rt-color-text-primary)}.rt-side-menu__rail{max-width:var(--rt-side-menu-rail-width);height:100%;box-sizing:border-box;flex:0 0 var(--rt-side-menu-rail-width);border-right:var(--rt-side-menu-rail-border-width) solid var(--rt-color-border-default);background:var(--rt-side-menu-rail-bg)}.rt-side-menu__rail .rt-scroll-area__body{padding-inline:var(--rt-space-1)}.rt-side-menu__rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--rt-side-menu-rail-gap);padding-block:var(--rt-space-sm)}.rt-side-menu__rail-item{display:flex;width:100%;flex-direction:column;align-items:center;padding:0;border:0;background:transparent;color:var(--rt-side-menu-item-color);cursor:pointer;font:inherit;gap:var(--rt-space-1);text-decoration:none}.rt-side-menu__rail-item:focus-visible{outline:none}.rt-side-menu__rail-item:focus-visible .rt-side-menu__rail-icon{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-side-menu__rail-item:hover .rt-side-menu__rail-icon,.rt-side-menu__rail-item:active .rt-side-menu__rail-icon{background:var(--rt-side-menu-item-bg-hover)}.rt-side-menu__rail-item--active .rt-side-menu__rail-icon,.rt-side-menu__rail-item--active:hover .rt-side-menu__rail-icon{background:var(--rt-side-menu-item-bg-active);color:var(--rt-side-menu-item-color-active)}.rt-side-menu__rail-icon{--rt-icon-step-md: var(--rt-side-menu-rail-icon-size);display:flex;width:3.5rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--rt-side-menu-item-radius);transition:background-color var(--rt-side-menu-transition-duration) ease}.rt-side-menu__rail-title{max-width:100%;font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);overflow-wrap:anywhere;text-align:center}.rt-side-menu__backdrop{position:fixed;z-index:var(--rt-z-dropdown);inset:0;inset-inline-start:var(--rt-side-menu-rail-width)}.rt-side-menu__panel{position:absolute;z-index:var(--rt-z-dropdown);top:0;left:var(--rt-side-menu-rail-width);display:flex;width:var(--rt-side-menu-panel-shown-width);height:100%;box-sizing:border-box;flex-direction:column;border-radius:0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;border-left:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-side-menu-panel-bg);box-shadow:var(--rt-side-menu-panel-shadow)}.rt-side-menu__panel--held{width:max(var(--rt-side-menu-panel-held-width),var(--rt-side-menu-panel-shown-width))}.rt-side-menu__panel--pinned{--rt-side-menu-panel-radius: 0;--rt-side-menu-panel-shadow: var(--rt-shadow-none);position:relative;left:0;flex-shrink:0}.rt-side-menu__panel-head{display:flex;align-items:center;padding:var(--rt-side-menu-panel-head-padding);gap:var(--rt-space-2)}.rt-side-menu__search{min-width:0;flex:1 1 auto}.rt-side-menu__pin{flex-shrink:0}.rt-side-menu__panel-body{min-height:0;flex:1 1 auto}.rt-side-menu__sub-list{display:flex;flex-direction:column;padding-block-end:var(--rt-space-sm);padding-inline:var(--rt-side-menu-sub-list-padding-inline)}.rt-side-menu__empty{padding:var(--rt-side-menu-empty-padding);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}.rt-side-menu__resizer{position:absolute;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));width:var(--rt-space-sm);cursor:col-resize}.rt-side-menu__resizer:before{position:absolute;top:0;bottom:0;left:50%;border-left:var(--rt-side-menu-resizer-border-width) solid transparent;content:\"\"}.rt-side-menu__resizer:hover:before,.rt-side-menu__resizer:focus-visible:before{border-left-color:var(--rt-color-border-strong)}.rt-side-menu__resizer:focus-visible{outline:none}.rt-side-menu__mobile{min-width:0;max-width:100%;height:100%;flex:0 0 var(--rt-side-menu-mobile-width);background:var(--rt-color-bg-surface)}.rt-side-menu__mobile .rt-scroll-area__body{padding-inline:0}.rt-side-menu__mobile-list,.rt-side-menu__mobile-sub{display:flex;flex-direction:column;padding:var(--rt-space-sm);gap:var(--rt-space-1)}.rt-side-menu__mobile-item,.rt-side-menu__back{display:flex;width:100%;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-item-radius);background:transparent;color:var(--rt-side-menu-item-color);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:calc(var(--rt-space-sm) + var(--rt-space-xs));padding-inline:var(--rt-space-md);text-align:start;text-decoration:none}.rt-side-menu__mobile-item:hover,.rt-side-menu__back:hover{background:var(--rt-side-menu-item-bg-hover)}.rt-side-menu__mobile-item:focus-visible,.rt-side-menu__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu__mobile-item--active,.rt-side-menu__back--active{background:var(--rt-side-menu-item-bg-active);color:var(--rt-side-menu-item-color-active)}.rt-side-menu__own-icon{--rt-side-menu-own-icon-size: var(--rt-size-5);display:inline-flex;width:var(--rt-side-menu-own-icon-size);height:var(--rt-side-menu-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu__mobile-icon,.rt-side-menu__back-icon,.rt-side-menu__mobile-chevron{flex-shrink:0}.rt-side-menu__mobile-title,.rt-side-menu__back-label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtScrollAreaComponent, selector: "rt-scroll-area", inputs: ["isScrollHintShown"] }, { kind: "directive", type: RtScrollAreaContentDirective, selector: "[rtScrollAreaContent]" }, { kind: "directive", type: RtScrollAreaFooterDirective, selector: "[rtScrollAreaFooter]" }, { kind: "directive", type: RtScrollAreaHeaderDirective, selector: "[rtScrollAreaHeader]" }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "component", type: RtSideMenuFavoritesComponent, selector: "rt-side-menu-favorites", outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "component", type: RtSideMenuSubItemComponent, selector: "rt-side-menu-sub-item", inputs: ["item", "inFavorites"], outputs: ["clickSubMenuAction", "clickSubMenuAdditionalAction"] }, { kind: "pipe", type: RtSideMenuIconPipe, name: "rtSideMenuIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSideMenuComponent, decorators: [{
             type: Component,
@@ -1480,8 +1626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         RtSideMenuFavoritesComponent,
                         RtSideMenuIconPipe,
                         RtSideMenuSubItemComponent,
-                    ], template: "<ng-container rtBlock=\"rt-side-menu\">\n    @if (narrow()) {\n        <!-- \u0423\u0437\u043A\u0438\u0439 \u044D\u043A\u0440\u0430\u043D: \u043E\u0434\u0438\u043D \u0441\u0442\u043E\u043B\u0431\u0435\u0446 \u2014 \u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u043F\u0443\u043D\u043A\u0442\u044B \u0438\u043B\u0438 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043D\u0430\u0437\u0430\u0434. -->\n        <rt-scroll-area rtElem=\"mobile\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                @if (selectedSubMenu()?.length) {\n                    <div rtElem=\"mobile-sub\">\n                        <button type=\"button\" rtElem=\"back\" qa-dataid=\"side-menu-back\" (click)=\"onBackToMainMenu()\">\n                            <rt-icon rtElem=\"back-icon\" size=\"sm\" name=\"arrow-left\" />\n                            <span rtElem=\"back-label\">{{ backLabel() }}</span>\n                        </button>\n\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </div>\n                } @else {\n                    <nav rtElem=\"mobile-list\">\n                        @for (item of menuItems(); track item.id) {\n                            <ng-container [ngTemplateOutlet]=\"mobileItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                        }\n                    </nav>\n                }\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n    } @else {\n        <rt-scroll-area rtElem=\"rail\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                <nav rtElem=\"rail-list\">\n                    @for (item of menuItems(); track item.id) {\n                        <ng-container [ngTemplateOutlet]=\"railItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                    }\n                </nav>\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n\n        @if (subMenuOpened()) {\n            @if (isSearchHeld()) {\n                <!-- \u041F\u043E\u0434\u043B\u043E\u0436\u043A\u0430 \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0439 \u043F\u0430\u043D\u0435\u043B\u0438: \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0432\u0437\u044F\u0442\u043E\u0435 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430, \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0441\u043D\u0430\u0440\u0443\u0436\u0438. -->\n                <div\n                    rtElem=\"backdrop\"\n                    qa-dataid=\"side-menu-backdrop\"\n                    tabindex=\"-1\"\n                    (click)=\"closeSubMenu()\"\n                    (keydown.escape)=\"closeSubMenu()\"></div>\n            }\n\n            <div\n                #panel\n                rtElem=\"panel\"\n                qa-dataid=\"side-menu-panel\"\n                [rtMod]=\"{ pinned: isPinned(), held: isSearchHeld() }\"\n                (mouseleave)=\"toggleSubMenu()\">\n                <div rtElem=\"panel-head\">\n                    <rt-input\n                        rtElem=\"search\"\n                        qa-dataid=\"side-menu-search\"\n                        size=\"sm\"\n                        iconLeft=\"search\"\n                        [placeholder]=\"searchLabel()\"\n                        [ariaLabel]=\"searchLabel()\"\n                        [formControl]=\"searchControl\"\n                        (focusin)=\"onSearchHold()\"\n                        (keydown)=\"onSearchKeydown($event)\" />\n\n                    @if (pinShown()) {\n                        <rt-icon-button\n                            rtElem=\"pin\"\n                            qa-dataid=\"side-menu-pin\"\n                            size=\"sm\"\n                            icon=\"pin\"\n                            [iconFill]=\"isPinned()\"\n                            [active]=\"isPinned()\"\n                            [ariaLabel]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            [tooltip]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            (clicked)=\"onSubMenuModeToggle()\" />\n                    }\n                </div>\n\n                <rt-scroll-area rtElem=\"panel-body\">\n                    <ng-container *rtScrollAreaContent>\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </ng-container>\n                </rt-scroll-area>\n            </div>\n\n            @if (isPinned()) {\n                <!-- \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0443\u0445\u043E\u0434\u0438\u0442 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430. -->\n                <div\n                    rtElem=\"resizer\"\n                    qa-dataid=\"side-menu-resize\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"resizeLabel()\"\n                    [attr.aria-valuenow]=\"resizeValueNow()\"\n                    [attr.aria-valuemin]=\"resizeValueNow() === null ? null : resizeValueMin\"\n                    [attr.aria-valuemax]=\"resizeValueNow() === null ? null : resizeValueMax\"\n                    (pointerdown)=\"onResizeStart($event)\"\n                    (keydown)=\"onResizeKeydown($event)\"></div>\n            }\n        }\n    }\n    <ng-template #subMenuTpl>\n        @if (narrow()) {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"side-menu-search\"\n                size=\"sm\"\n                iconLeft=\"search\"\n                [placeholder]=\"searchLabel()\"\n                [ariaLabel]=\"searchLabel()\"\n                [formControl]=\"searchControl\"\n                (keydown)=\"onSearchKeydown($event)\" />\n        }\n\n        @if (isNothingFound()) {\n            <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel() }}</div>\n        }\n\n        <div rtElem=\"sub-list\">\n            <!-- \u0411\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430: \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u0438 \u0431\u0435\u0437 \u0441\u0442\u0440\u043E\u043A \u043C\u0435\u0441\u0442\u0430 \u043D\u0435 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442. -->\n            <rt-side-menu-favorites\n                (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n\n            @for (item of visibleSubMenuItems(); track item.id) {\n                <rt-side-menu-sub-item\n                    [item]=\"item\"\n                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                    (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #railItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link) {\n            <a\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-expanded]=\"item.submenu?.length ? subMenuOpened() && selectedItem() === item : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #railItemBodyTpl let-item>\n        @if (item.icon) {\n            <!-- \u0418\u043C\u044F Material \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0441\u0432\u043E\u0435\u0439 \u043F\u0430\u0440\u043E\u0439; \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0438\u043C \u0448\u0430\u0431\u043B\u043E\u043D\u043E\u043C \u043C\u0435\u043D\u044E. -->\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            <span rtElem=\"rail-icon\">\n                @if (kitIcon) {\n                    <rt-icon [name]=\"kitIcon\" />\n                } @else if (ownIconTpl(); as own) {\n                    <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"own\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                    </span>\n                }\n            </span>\n        }\n\n        @if (item.name) {\n            <span rtElem=\"rail-title\">{{ item.name }}</span>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link && !item.submenu?.length) {\n            <a\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemBodyTpl let-item>\n        @if (item.icon) {\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            @if (kitIcon) {\n                <rt-icon rtElem=\"mobile-icon\" [name]=\"kitIcon\" />\n            } @else if (ownIconTpl(); as own) {\n                <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                    <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                </span>\n            }\n        }\n\n        <span rtElem=\"mobile-title\" [rtTooltip]=\"item.name\">{{ item.name }}</span>\n\n        @if (item.submenu?.length) {\n            <!-- \u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0443 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u0432\u043E\u0434\u0438\u0442 \u0432 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0430 \u043D\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430 \u043C\u0435\u0441\u0442\u0435. -->\n            <rt-icon rtElem=\"mobile-chevron\" size=\"sm\" name=\"arrow-right\" />\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu{--rt-side-menu-rail-width: 5.5rem;--rt-side-menu-panel-width: 15rem;--rt-side-menu-panel-held-width: 30rem;--rt-side-menu-mobile-width: 15rem;--rt-side-menu-panel-radius: var(--rt-radius-lg);--rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);--rt-side-menu-item-radius: var(--rt-radius-full);--rt-side-menu-resizer-border-width: var(--rt-border-width-thick);--rt-side-menu-panel-border-width: var(--rt-border-width-thin);--rt-side-menu-transition-duration: var(--rt-duration-fast);--rt-side-menu-panel-dragged-width: 0px;--rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));position:relative;display:flex;height:100%;color:var(--rt-color-text-primary)}.rt-side-menu__rail{max-width:var(--rt-side-menu-rail-width);height:100%;box-sizing:border-box;flex:0 0 var(--rt-side-menu-rail-width);border-right:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface)}.rt-side-menu__rail .rt-scroll-area__body{padding-inline:var(--rt-space-1)}.rt-side-menu__rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--rt-space-md);padding-block:var(--rt-space-sm)}.rt-side-menu__rail-item{display:flex;width:100%;flex-direction:column;align-items:center;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;gap:var(--rt-space-1);text-decoration:none}.rt-side-menu__rail-item:focus-visible{outline:none}.rt-side-menu__rail-item:focus-visible .rt-side-menu__rail-icon{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-side-menu__rail-item:hover .rt-side-menu__rail-icon,.rt-side-menu__rail-item:active .rt-side-menu__rail-icon{background:var(--rt-color-bg-hover)}.rt-side-menu__rail-item--active .rt-side-menu__rail-icon,.rt-side-menu__rail-item--active:hover .rt-side-menu__rail-icon{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__rail-icon{display:flex;width:3.5rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--rt-side-menu-item-radius);transition:background-color var(--rt-side-menu-transition-duration) ease}.rt-side-menu__rail-title{max-width:100%;font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);overflow-wrap:anywhere;text-align:center}.rt-side-menu__backdrop{position:fixed;z-index:var(--rt-z-dropdown);inset:0}.rt-side-menu__panel{position:absolute;z-index:var(--rt-z-dropdown);top:0;left:var(--rt-side-menu-rail-width);display:flex;width:var(--rt-side-menu-panel-shown-width);height:100%;box-sizing:border-box;flex-direction:column;border-radius:0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;border-left:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-color-bg-surface);box-shadow:var(--rt-side-menu-panel-shadow)}.rt-side-menu__panel--held{width:max(var(--rt-side-menu-panel-held-width),var(--rt-side-menu-panel-shown-width))}.rt-side-menu__panel--pinned{--rt-side-menu-panel-radius: 0;--rt-side-menu-panel-shadow: var(--rt-shadow-none);position:relative;left:0;flex-shrink:0}.rt-side-menu__panel-head{display:flex;align-items:center;padding:var(--rt-space-sm);gap:var(--rt-space-2)}.rt-side-menu__search{min-width:0;flex:1 1 auto}.rt-side-menu__pin{flex-shrink:0}.rt-side-menu__panel-body{min-height:0;flex:1 1 auto}.rt-side-menu__sub-list{display:flex;flex-direction:column;padding-block-end:var(--rt-space-sm);padding-inline:var(--rt-space-2)}.rt-side-menu__empty{padding:var(--rt-space-md);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}.rt-side-menu__resizer{position:absolute;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));width:var(--rt-space-sm);cursor:col-resize}.rt-side-menu__resizer:before{position:absolute;top:0;bottom:0;left:50%;border-left:var(--rt-side-menu-resizer-border-width) solid transparent;content:\"\"}.rt-side-menu__resizer:hover:before,.rt-side-menu__resizer:focus-visible:before{border-left-color:var(--rt-color-border-strong)}.rt-side-menu__resizer:focus-visible{outline:none}.rt-side-menu__mobile{min-width:0;max-width:100%;height:100%;flex:0 0 var(--rt-side-menu-mobile-width);background:var(--rt-color-bg-surface)}.rt-side-menu__mobile .rt-scroll-area__body{padding-inline:0}.rt-side-menu__mobile-list,.rt-side-menu__mobile-sub{display:flex;flex-direction:column;padding:var(--rt-space-sm);gap:var(--rt-space-1)}.rt-side-menu__mobile-item,.rt-side-menu__back{display:flex;width:100%;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-item-radius);background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:calc(var(--rt-space-sm) + var(--rt-space-xs));padding-inline:var(--rt-space-md);text-align:start;text-decoration:none}.rt-side-menu__mobile-item:hover,.rt-side-menu__back:hover{background:var(--rt-color-bg-hover)}.rt-side-menu__mobile-item:focus-visible,.rt-side-menu__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu__mobile-item--active,.rt-side-menu__back--active{background:var(--rt-color-action-primary-subtle);color:var(--rt-color-action-primary-on-surface)}.rt-side-menu__own-icon{--rt-side-menu-own-icon-size: var(--rt-size-5);display:inline-flex;width:var(--rt-side-menu-own-icon-size);height:var(--rt-side-menu-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu__mobile-icon,.rt-side-menu__back-icon,.rt-side-menu__mobile-chevron{flex-shrink:0}.rt-side-menu__mobile-title,.rt-side-menu__back-label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtSideMenuHeaderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtSideMenuFooterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], activeMenuIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuIds", required: true }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], subMenuMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuMode", required: false }] }], subMenuWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuWidth", required: false }] }], menuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuId", required: false }] }], favoritesCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoritesCount", required: false }] }], favoriteActionsReserve: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoriteActionsReserve", required: false }] }], isFavoritesSearchShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavoritesSearchShown", required: false }] }], pinShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinShown", required: false }] }], subMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuTooltipsShown", required: false }] }], subMenuModeChange: [{ type: i0.Output, args: ["subMenuModeChange"] }], subMenuWidthChange: [{ type: i0.Output, args: ["subMenuWidthChange"] }], subMenuResizeStart: [{ type: i0.Output, args: ["subMenuResizeStart"] }], subMenuResizeEnd: [{ type: i0.Output, args: ["subMenuResizeEnd"] }], closeMobileMenuAction: [{ type: i0.Output, args: ["closeMobileMenuAction"] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }], ownIconTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtSideMenuIconDirective), { ...{
+                    ], template: "<ng-container rtBlock=\"rt-side-menu\">\n    @if (narrow()) {\n        <!-- \u0423\u0437\u043A\u0438\u0439 \u044D\u043A\u0440\u0430\u043D: \u043E\u0434\u0438\u043D \u0441\u0442\u043E\u043B\u0431\u0435\u0446 \u2014 \u0433\u043B\u0430\u0432\u043D\u044B\u0435 \u043F\u0443\u043D\u043A\u0442\u044B \u0438\u043B\u0438 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \u0441 \u043A\u043D\u043E\u043F\u043A\u043E\u0439 \u043D\u0430\u0437\u0430\u0434. -->\n        <rt-scroll-area rtElem=\"mobile\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                @if (selectedSubMenu()?.length) {\n                    <div rtElem=\"mobile-sub\">\n                        <button type=\"button\" rtElem=\"back\" qa-dataid=\"side-menu-back\" (click)=\"onBackToMainMenu()\">\n                            <rt-icon rtElem=\"back-icon\" size=\"sm\" name=\"arrow-left\" />\n                            <span rtElem=\"back-label\">{{ backLabel() }}</span>\n                        </button>\n\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </div>\n                } @else {\n                    <nav rtElem=\"mobile-list\">\n                        @for (item of menuItems(); track item.id) {\n                            <ng-container [ngTemplateOutlet]=\"mobileItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                        }\n                    </nav>\n                }\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n    } @else {\n        <rt-scroll-area rtElem=\"rail\" [isScrollHintShown]=\"true\">\n            @if (headerTpl(); as header) {\n                <ng-container *rtScrollAreaHeader>\n                    <ng-container [ngTemplateOutlet]=\"header\" />\n                </ng-container>\n            }\n\n            <ng-container *rtScrollAreaContent>\n                <nav rtElem=\"rail-list\">\n                    @for (item of menuItems(); track item.id) {\n                        <ng-container [ngTemplateOutlet]=\"railItemTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n                    }\n                </nav>\n            </ng-container>\n\n            @if (footerTpl(); as footer) {\n                <ng-container *rtScrollAreaFooter>\n                    <ng-container [ngTemplateOutlet]=\"footer\" />\n                </ng-container>\n            }\n        </rt-scroll-area>\n\n        @if (subMenuOpened()) {\n            @if (isSearchHeld()) {\n                <!-- \u041F\u043E\u0434\u043B\u043E\u0436\u043A\u0430 \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0439 \u043F\u0430\u043D\u0435\u043B\u0438: \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0432\u0437\u044F\u0442\u043E\u0435 \u043F\u043E\u043B\u0435\u043C \u043F\u043E\u0438\u0441\u043A\u0430, \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0441\u043D\u0430\u0440\u0443\u0436\u0438. -->\n                <div\n                    rtElem=\"backdrop\"\n                    qa-dataid=\"side-menu-backdrop\"\n                    tabindex=\"-1\"\n                    (click)=\"closeSubMenu()\"\n                    (keydown.escape)=\"closeSubMenu()\"></div>\n            }\n\n            <div\n                #panel\n                rtElem=\"panel\"\n                qa-dataid=\"side-menu-panel\"\n                [rtMod]=\"{ pinned: isPinned(), held: isSearchHeld() }\"\n                (mouseenter)=\"cancelSubMenuClose()\"\n                (mouseleave)=\"toggleSubMenu()\">\n                <div rtElem=\"panel-head\">\n                    <rt-input\n                        rtElem=\"search\"\n                        qa-dataid=\"side-menu-search\"\n                        iconLeft=\"search\"\n                        [size]=\"searchSize()\"\n                        [appearance]=\"searchAppearance()\"\n                        [placeholder]=\"searchLabel()\"\n                        [ariaLabel]=\"searchLabel()\"\n                        [formControl]=\"searchControl\"\n                        (focusin)=\"onSearchHold()\"\n                        (keydown)=\"onSearchKeydown($event)\" />\n\n                    @if (pinShown()) {\n                        <rt-icon-button\n                            rtElem=\"pin\"\n                            qa-dataid=\"side-menu-pin\"\n                            size=\"sm\"\n                            icon=\"pin\"\n                            [iconFill]=\"isPinned()\"\n                            [active]=\"isPinned()\"\n                            [ariaLabel]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            [tooltip]=\"isPinned() ? unpinLabel() : pinLabel()\"\n                            (clicked)=\"onSubMenuModeToggle()\" />\n                    }\n                </div>\n\n                <rt-scroll-area rtElem=\"panel-body\" [isScrollHintShown]=\"panelScrollHintShown()\">\n                    <ng-container *rtScrollAreaContent>\n                        <ng-container [ngTemplateOutlet]=\"subMenuTpl\" />\n                    </ng-container>\n                </rt-scroll-area>\n            </div>\n\n            @if (isPinned()) {\n                <!-- \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0443\u0445\u043E\u0434\u0438\u0442 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430. -->\n                <div\n                    rtElem=\"resizer\"\n                    qa-dataid=\"side-menu-resize\"\n                    role=\"separator\"\n                    aria-orientation=\"vertical\"\n                    tabindex=\"0\"\n                    [attr.aria-label]=\"resizeLabel()\"\n                    [attr.aria-valuenow]=\"resizeValueNow()\"\n                    [attr.aria-valuemin]=\"resizeValueNow() === null ? null : resizeValueMin\"\n                    [attr.aria-valuemax]=\"resizeValueNow() === null ? null : resizeValueMax\"\n                    (pointerdown)=\"onResizeStart($event)\"\n                    (keydown)=\"onResizeKeydown($event)\"></div>\n            }\n        }\n    }\n    <ng-template #subMenuTpl>\n        @if (narrow()) {\n            <rt-input\n                rtElem=\"search\"\n                qa-dataid=\"side-menu-search\"\n                iconLeft=\"search\"\n                [size]=\"searchSize()\"\n                [appearance]=\"searchAppearance()\"\n                [placeholder]=\"searchLabel()\"\n                [ariaLabel]=\"searchLabel()\"\n                [formControl]=\"searchControl\"\n                (keydown)=\"onSearchKeydown($event)\" />\n        }\n\n        @if (isNothingFound()) {\n            <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel() }}</div>\n        }\n\n        <div rtElem=\"sub-list\">\n            <!-- \u0411\u043B\u043E\u043A \u0438\u0437\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430: \u0441\u0430\u043C \u0440\u0435\u0448\u0430\u0435\u0442, \u0435\u0441\u0442\u044C \u043B\u0438 \u0435\u043C\u0443 \u0447\u0442\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u0438 \u0431\u0435\u0437 \u0441\u0442\u0440\u043E\u043A \u043C\u0435\u0441\u0442\u0430 \u043D\u0435 \u0437\u0430\u043D\u0438\u043C\u0430\u0435\u0442. -->\n            <rt-side-menu-favorites\n                (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n\n            @for (item of visibleSubMenuItems(); track item.id) {\n                <rt-side-menu-sub-item\n                    [item]=\"item\"\n                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                    (clickSubMenuAdditionalAction)=\"onClickSubMenuAdditional($event)\" />\n            }\n        </div>\n    </ng-template>\n\n    <ng-template #railItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        <!-- \u0411\u0435\u0437 \u043F\u043E\u0434\u043F\u0438\u0441\u0435\u0439 \u043F\u043E\u0434 \u0437\u043D\u0430\u0447\u043A\u0430\u043C\u0438 \u0438\u043C\u044F \u043F\u0443\u043D\u043A\u0442\u0430 \u2014 \u0432 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0435 \u0441\u043F\u0440\u0430\u0432\u0430; \u0432\u044B\u043A\u043B\u044E\u0447\u0435\u043D\u043D\u044B\u0435 \u043F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438 \u0433\u0430\u0441\u044F\u0442 \u0438 \u0435\u0451. -->\n        @let railTip = railTitlesShown() || !subMenuTooltipsShown() ? '' : item.name;\n        @if (item.link) {\n            <a\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                rtTooltipPlacement=\"right\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                [attr.aria-label]=\"railTitlesShown() ? null : item.name\"\n                [rtTooltip]=\"railTip\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"rail-item\"\n                qa-dataid=\"side-menu-item\"\n                rtTooltipPlacement=\"right\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-label]=\"railTitlesShown() ? null : item.name\"\n                [rtTooltip]=\"railTip\"\n                [attr.aria-expanded]=\"item.submenu?.length ? subMenuOpened() && selectedItem() === item : null\"\n                (mouseenter)=\"toggleSubMenu(item)\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"railItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #railItemBodyTpl let-item>\n        @if (item.icon) {\n            <!-- \u0418\u043C\u044F Material \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u0441\u0432\u043E\u0435\u0439 \u043F\u0430\u0440\u043E\u0439; \u0438\u043C\u044F, \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442 \u043D\u0435 \u0440\u0438\u0441\u0443\u0435\u0442, \u2014 \u0441\u0432\u043E\u0438\u043C \u0448\u0430\u0431\u043B\u043E\u043D\u043E\u043C \u043C\u0435\u043D\u044E. -->\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            <span rtElem=\"rail-icon\">\n                @if (kitIcon) {\n                    <rt-icon [name]=\"kitIcon\" [fill]=\"railIconFill()\" />\n                } @else if (ownIconTpl(); as own) {\n                    <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                        <ng-container\n                            [ngTemplateOutlet]=\"own\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                    </span>\n                }\n            </span>\n        }\n\n        @if (item.name && railTitlesShown()) {\n            <span rtElem=\"rail-title\">{{ item.name }}</span>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemTpl let-item>\n        @let isActive = activeRailIds().includes(item.id);\n        @if (item.link && !item.submenu?.length) {\n            <a\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [routerLink]=\"item.link\"\n                [rtMod]=\"{ active: isActive }\"\n                [attr.aria-current]=\"isActive ? 'page' : null\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </a>\n        } @else {\n            <button\n                type=\"button\"\n                rtElem=\"mobile-item\"\n                qa-dataid=\"side-menu-item\"\n                [rtMod]=\"{ active: isActive }\"\n                (click)=\"onClickMenu(item)\">\n                <ng-container [ngTemplateOutlet]=\"mobileItemBodyTpl\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #mobileItemBodyTpl let-item>\n        @if (item.icon) {\n            @let kitIcon = item.icon | rtSideMenuIcon;\n            @if (kitIcon) {\n                <rt-icon rtElem=\"mobile-icon\" [name]=\"kitIcon\" />\n            } @else if (ownIconTpl(); as own) {\n                <span rtElem=\"own-icon\" qa-dataid=\"side-menu-own-icon\" aria-hidden=\"true\">\n                    <ng-container [ngTemplateOutlet]=\"own\" [ngTemplateOutletContext]=\"{ $implicit: item, icon: item.icon, slot: 'icon' }\" />\n                </span>\n            }\n        }\n\n        <span rtElem=\"mobile-title\" [rtTooltip]=\"item.name\">{{ item.name }}</span>\n\n        @if (item.submenu?.length) {\n            <!-- \u0421\u0442\u0440\u0435\u043B\u043A\u0430 \u0440\u0430\u0437\u0434\u0435\u043B\u0430, \u043A\u0430\u043A \u0443 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u043D\u0430\u0436\u0430\u0442\u0438\u0435 \u0443\u0432\u043E\u0434\u0438\u0442 \u0432 \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0430 \u043D\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442 \u043D\u0430 \u043C\u0435\u0441\u0442\u0435. -->\n            <rt-icon rtElem=\"mobile-chevron\" size=\"sm\" name=\"arrow-right\" />\n        }\n    </ng-template>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-side-menu,.rt-side-menu-favorites__row.cdk-drag-preview{--rt-side-menu-item-color: currentcolor;--rt-side-menu-item-bg-hover: var(--rt-color-bg-hover);--rt-side-menu-item-bg-active: var(--rt-color-action-primary-subtle);--rt-side-menu-item-color-active: var(--rt-color-action-primary-on-surface)}.rt-side-menu{--rt-side-menu-rail-width: 5.5rem;--rt-side-menu-panel-width: 15rem;--rt-side-menu-panel-held-width: 30rem;--rt-side-menu-mobile-width: 15rem;--rt-side-menu-panel-radius: var(--rt-radius-lg);--rt-side-menu-panel-shadow: var(--rt-shadow-nav-panel);--rt-side-menu-item-radius: var(--rt-radius-full);--rt-side-menu-resizer-border-width: var(--rt-border-width-thick);--rt-side-menu-panel-border-width: var(--rt-border-width-thin);--rt-side-menu-transition-duration: var(--rt-duration-fast);--rt-side-menu-rail-icon-size: var(--rt-icon-step-md);--rt-side-menu-rail-gap: var(--rt-space-md);--rt-side-menu-rail-bg: var(--rt-color-bg-surface);--rt-side-menu-rail-border-width: var(--rt-side-menu-panel-border-width);--rt-side-menu-panel-bg: var(--rt-color-bg-surface);--rt-side-menu-panel-head-padding: var(--rt-space-sm);--rt-side-menu-sub-list-padding-inline: var(--rt-space-2);--rt-side-menu-empty-padding: var(--rt-space-md);--rt-side-menu-panel-dragged-width: 0px;--rt-side-menu-panel-shown-width: max(var(--rt-side-menu-panel-width), var(--rt-side-menu-panel-dragged-width));position:relative;display:flex;height:100%;color:var(--rt-color-text-primary)}.rt-side-menu__rail{max-width:var(--rt-side-menu-rail-width);height:100%;box-sizing:border-box;flex:0 0 var(--rt-side-menu-rail-width);border-right:var(--rt-side-menu-rail-border-width) solid var(--rt-color-border-default);background:var(--rt-side-menu-rail-bg)}.rt-side-menu__rail .rt-scroll-area__body{padding-inline:var(--rt-space-1)}.rt-side-menu__rail-list{display:flex;flex-direction:column;align-items:center;gap:var(--rt-side-menu-rail-gap);padding-block:var(--rt-space-sm)}.rt-side-menu__rail-item{display:flex;width:100%;flex-direction:column;align-items:center;padding:0;border:0;background:transparent;color:var(--rt-side-menu-item-color);cursor:pointer;font:inherit;gap:var(--rt-space-1);text-decoration:none}.rt-side-menu__rail-item:focus-visible{outline:none}.rt-side-menu__rail-item:focus-visible .rt-side-menu__rail-icon{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color)}.rt-side-menu__rail-item:hover .rt-side-menu__rail-icon,.rt-side-menu__rail-item:active .rt-side-menu__rail-icon{background:var(--rt-side-menu-item-bg-hover)}.rt-side-menu__rail-item--active .rt-side-menu__rail-icon,.rt-side-menu__rail-item--active:hover .rt-side-menu__rail-icon{background:var(--rt-side-menu-item-bg-active);color:var(--rt-side-menu-item-color-active)}.rt-side-menu__rail-icon{--rt-icon-step-md: var(--rt-side-menu-rail-icon-size);display:flex;width:3.5rem;height:2rem;align-items:center;justify-content:center;border-radius:var(--rt-side-menu-item-radius);transition:background-color var(--rt-side-menu-transition-duration) ease}.rt-side-menu__rail-title{max-width:100%;font-size:var(--rt-text-xs);line-height:var(--rt-leading-snug);overflow-wrap:anywhere;text-align:center}.rt-side-menu__backdrop{position:fixed;z-index:var(--rt-z-dropdown);inset:0;inset-inline-start:var(--rt-side-menu-rail-width)}.rt-side-menu__panel{position:absolute;z-index:var(--rt-z-dropdown);top:0;left:var(--rt-side-menu-rail-width);display:flex;width:var(--rt-side-menu-panel-shown-width);height:100%;box-sizing:border-box;flex-direction:column;border-radius:0 var(--rt-side-menu-panel-radius) var(--rt-side-menu-panel-radius) 0;border-left:var(--rt-side-menu-panel-border-width) solid var(--rt-color-border-default);background:var(--rt-side-menu-panel-bg);box-shadow:var(--rt-side-menu-panel-shadow)}.rt-side-menu__panel--held{width:max(var(--rt-side-menu-panel-held-width),var(--rt-side-menu-panel-shown-width))}.rt-side-menu__panel--pinned{--rt-side-menu-panel-radius: 0;--rt-side-menu-panel-shadow: var(--rt-shadow-none);position:relative;left:0;flex-shrink:0}.rt-side-menu__panel-head{display:flex;align-items:center;padding:var(--rt-side-menu-panel-head-padding);gap:var(--rt-space-2)}.rt-side-menu__search{min-width:0;flex:1 1 auto}.rt-side-menu__pin{flex-shrink:0}.rt-side-menu__panel-body{min-height:0;flex:1 1 auto}.rt-side-menu__sub-list{display:flex;flex-direction:column;padding-block-end:var(--rt-space-sm);padding-inline:var(--rt-side-menu-sub-list-padding-inline)}.rt-side-menu__empty{padding:var(--rt-side-menu-empty-padding);color:var(--rt-color-text-muted);font-size:var(--rt-text-xs)}.rt-side-menu__resizer{position:absolute;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:calc(var(--rt-side-menu-rail-width) + var(--rt-side-menu-panel-shown-width) - var(--rt-space-2));width:var(--rt-space-sm);cursor:col-resize}.rt-side-menu__resizer:before{position:absolute;top:0;bottom:0;left:50%;border-left:var(--rt-side-menu-resizer-border-width) solid transparent;content:\"\"}.rt-side-menu__resizer:hover:before,.rt-side-menu__resizer:focus-visible:before{border-left-color:var(--rt-color-border-strong)}.rt-side-menu__resizer:focus-visible{outline:none}.rt-side-menu__mobile{min-width:0;max-width:100%;height:100%;flex:0 0 var(--rt-side-menu-mobile-width);background:var(--rt-color-bg-surface)}.rt-side-menu__mobile .rt-scroll-area__body{padding-inline:0}.rt-side-menu__mobile-list,.rt-side-menu__mobile-sub{display:flex;flex-direction:column;padding:var(--rt-space-sm);gap:var(--rt-space-1)}.rt-side-menu__mobile-item,.rt-side-menu__back{display:flex;width:100%;min-height:var(--rt-control-height-lg);box-sizing:border-box;align-items:center;border:0;border-radius:var(--rt-side-menu-item-radius);background:transparent;color:var(--rt-side-menu-item-color);cursor:pointer;font:inherit;font-size:var(--rt-text-sm);gap:calc(var(--rt-space-sm) + var(--rt-space-xs));padding-inline:var(--rt-space-md);text-align:start;text-decoration:none}.rt-side-menu__mobile-item:hover,.rt-side-menu__back:hover{background:var(--rt-side-menu-item-bg-hover)}.rt-side-menu__mobile-item:focus-visible,.rt-side-menu__back:focus-visible{outline:var(--rt-focus-ring-width) solid var(--rt-focus-ring-color);outline-offset:calc(var(--rt-focus-ring-width) * -1)}.rt-side-menu__mobile-item--active,.rt-side-menu__back--active{background:var(--rt-side-menu-item-bg-active);color:var(--rt-side-menu-item-color-active)}.rt-side-menu__own-icon{--rt-side-menu-own-icon-size: var(--rt-size-5);display:inline-flex;width:var(--rt-side-menu-own-icon-size);height:var(--rt-side-menu-own-icon-size);flex-shrink:0;align-items:center;justify-content:center;color:inherit;line-height:1}.rt-side-menu__own-icon>*{max-width:100%;max-height:100%}.rt-side-menu__mobile-icon,.rt-side-menu__back-icon,.rt-side-menu__mobile-chevron{flex-shrink:0}.rt-side-menu__mobile-title,.rt-side-menu__back-label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtSideMenuHeaderDirective), { ...{ read: TemplateRef }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtSideMenuFooterDirective), { ...{ read: TemplateRef }, isSignal: true }] }], activeMenuIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuIds", required: true }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], subMenuMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuMode", required: false }] }], subMenuWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuWidth", required: false }] }], menuId: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuId", required: false }] }], favoritesCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoritesCount", required: false }] }], favoriteActionsReserve: [{ type: i0.Input, args: [{ isSignal: true, alias: "favoriteActionsReserve", required: false }] }], isFavoritesSearchShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFavoritesSearchShown", required: false }] }], pinShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinShown", required: false }] }], subMenuCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "subMenuCloseDelay", required: false }] }], subMenuModeChange: [{ type: i0.Output, args: ["subMenuModeChange"] }], subMenuWidthChange: [{ type: i0.Output, args: ["subMenuWidthChange"] }], subMenuResizeStart: [{ type: i0.Output, args: ["subMenuResizeStart"] }], subMenuResizeEnd: [{ type: i0.Output, args: ["subMenuResizeEnd"] }], closeMobileMenuAction: [{ type: i0.Output, args: ["closeMobileMenuAction"] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }], ownIconTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtSideMenuIconDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }] } });
 
@@ -1489,5 +1635,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RT_SIDE_MENU_DEFAULT_ID, RT_SIDE_MENU_SETTINGS_CONFIG, RT_SIDE_MENU_WIDTH_MAX, RT_SIDE_MENU_WIDTH_MIN, RT_SIDE_MENU_WIDTH_STEP, RtSideMenuComponent, RtSideMenuFooterDirective, RtSideMenuHeaderDirective, RtSideMenuIconDirective, RtSideMenuSettingsService, RtSideMenuSubItemComponent, clampSideMenuWidth, drawnSideMenuWidth, filterSideMenuItems, normalizeSideMenuId, normalizeSideMenuSettings, omitSideMenuSettings, parseSideMenuSettingsRecord, patchSideMenuSettings, pinnedSideMenuItems, provideRtSideMenuSettings, readSideMenuSettings, reportedSideMenuWidth, sideMenuIconName, sideMenuIdsToExpand, sideMenuWidthByKey, splitSideMenuTitle, startSideMenuWidthDrag, stepSideMenuHighlight, unpairedSideMenuIcons, walkSideMenuItems };
+export { RT_SIDE_MENU_DEFAULT_ID, RT_SIDE_MENU_SETTINGS_CONFIG, RT_SIDE_MENU_WIDTH_MAX, RT_SIDE_MENU_WIDTH_MIN, RT_SIDE_MENU_WIDTH_STEP, RtSideMenuComponent, RtSideMenuFooterDirective, RtSideMenuHeaderDirective, RtSideMenuIconDirective, RtSideMenuSettingsService, RtSideMenuSubItemComponent, clampSideMenuWidth, drawnSideMenuWidth, filterSideMenuItems, normalizeSideMenuId, normalizeSideMenuSettings, omitSideMenuSettings, parseSideMenuSettingsRecord, patchSideMenuSettings, pinnedSideMenuItems, provideRtSideMenuSettings, readSideMenuSettings, reportedSideMenuWidth, sideMenuIconName, sideMenuIdsToExpand, sideMenuPressOpensInBrowser, sideMenuWidthByKey, splitSideMenuTitle, startSideMenuWidthDrag, stepSideMenuHighlight, unpairedSideMenuIcons, walkSideMenuItems, warnUnpairedSideMenuIcons };
 //# sourceMappingURL=rt-tools-ui-kit-v2-side-menu.mjs.map