@rt-tools/ui-kit 0.6.1 → 0.7.1

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

@@ -319,13 +319,58 @@ const RTUI_SIDE_MENU = new InjectionToken('RTUI_SIDE_MENU');
  *
  * Считается здесь, а не в шаблоне: разметка меню держит две раскладки разом, и ветвление отбора
  * в ней читается хуже вызова.
+ *
+ * Отбор спускается внутрь папок на любую глубину: потребитель кладёт в `submenu` папки то, что
+ * человек и ищет по имени, и по одному верхнему уровню такой пункт совпасть не мог по построению —
+ * поиск находил только саму папку.
+ *
+ * В выдаче стоят только строки, содержащие запрос. Папка — не исключение из этого, а путь к
+ * совпавшим детям: она остаётся, чтобы человек видел, где найденное лежит, а её состав отбирается
+ * тем же правилом. Иначе одно совпадение по имени папки вытаскивает на экран весь её состав, и
+ * человек читает как найденное то, в чём запроса нет.
+ *
+ * Совпавшая по имени папка, внутри которой не совпал никто, остаётся одной строкой без детей: её
+ * искали по имени, и она должна найтись. Пункт без детей в исходном наборе так и остаётся пунктом
+ * — пустого списка ему не приписывается.
+ *
+ * Отобранная папка — новый объект: правка `submenu` на месте переписала бы набор, который дал
+ * потребитель, и стёртый запрос вернул бы урезанное меню.
  */
 function filterSubMenuItems(items, query) {
     const needle = query.trim().toLowerCase();
     if (needle === '') {
         return [...items];
     }
-    return items.filter((item) => !!item.name?.toLowerCase().includes(needle));
+    return items.reduce((kept, item) => {
+        const isFolder = Boolean(item.submenu?.length);
+        const inside = isFolder ? filterSubMenuItems(item.submenu ?? [], query) : [];
+        if (inside.length) {
+            kept.push({ ...item, submenu: inside });
+            return kept;
+        }
+        if (item.name?.toLowerCase().includes(needle)) {
+            kept.push(isFolder ? { ...item, submenu: [] } : item);
+        }
+        return kept;
+    }, []);
+}
+/**
+ * Папки отобранного списка — те, что должны стоять раскрытыми.
+ *
+ * Считается по уже отобранному списку, а не по исходному: в отобранном остались ровно те папки, в
+ * которых что-то нашлось, и раскрывать больше нечего. Пустой запрос сюда не попадает вовсе — тогда
+ * раскрытость берётся прежняя, та, что была до набора.
+ *
+ * Возвращаются номера, а не сами пункты: отобранный список пересобирается на каждую букву запроса,
+ * и ссылка на пункт такой пересборки не переживает.
+ */
+function subMenuIdsToExpand(items) {
+    return items.reduce((ids, item) => {
+        if (item.submenu?.length) {
+            ids.push(item.id, ...subMenuIdsToExpand(item.submenu));
+        }
+        return ids;
+    }, []);
 }
 /**
  * Ключ, под которым хранится выбор человека.
@@ -453,6 +498,44 @@ function splitSubMenuTitle(name, query) {
     }
     return parts;
 }
+/**
+ * Пункты подменю в том порядке, в каком они стоят на экране.
+ *
+ * Внутрь папки список спускается, только если та раскрыта: закрытая папка — одна строка, и ходьба
+ * стрелками обязана идти по видимому, а не по всему набору. Иначе подсветка пропадает внутри
+ * свёрнутого раздела, и человек нажимает стрелку в пустоту.
+ */
+function walkSubMenuItems(items, expandedIds) {
+    return items.reduce((walk, item) => {
+        walk.push(item);
+        if (item.submenu?.length && expandedIds.includes(item.id)) {
+            walk.push(...walkSubMenuItems(item.submenu, expandedIds));
+        }
+        return walk;
+    }, []);
+}
+/**
+ * Куда уходит подсветка на шаг стрелкой.
+ *
+ * Считается по номеру пункта, а не по его месту в массиве: видимый список пересобирается на каждую
+ * букву запроса, и место переживает такую пересборку иначе, чем номер.
+ *
+ * Подсветки ещё нет — стрелка вниз берёт первый пункт, стрелка вверх последний: человек нажал
+ * стрелку, чтобы попасть в список, и обе стороны у него равноправны. У краёв ходьба
+ * останавливается и не заворачивается на другой конец: заворот уводит взгляд через всю панель
+ * тогда, когда человек всего лишь дошёл до низа.
+ */
+function stepSubMenuHighlight(walk, highlightedId, step) {
+    if (walk.length === 0) {
+        return null;
+    }
+    const at = walk.findIndex((item) => item.id === highlightedId);
+    if (at === -1) {
+        return step > 0 ? walk[0].id : walk[walk.length - 1].id;
+    }
+    const next = Math.min(walk.length - 1, Math.max(0, at + step));
+    return walk[next].id;
+}
 
 /**
  * Application-wide UI configuration for rt-tools components.
@@ -887,7 +970,7 @@ class RtuiSideMenuSubItemComponent {
                     disableTooltipInteractivity: true,
                 },
             },
-        ], ngImport: i0, template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        <!--\n                            \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n                            \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n                            \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n                        -->\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <!--\n                                    \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n                                    \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n                                    \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n                                -->\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
+        ], ngImport: i0, template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled(), highlighted: menuRef.highlightedMenuId() === item.id }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        <!--\n                            \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n                            \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n                            \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n                        -->\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <!--\n                                    \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n                                    \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n                                    \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n                                -->\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu) {\n        <!--\n            \u041F\u0430\u043F\u043A\u0430 \u0440\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 \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430\n            \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C \u043D\u0438\u043A\u043E\u0433\u043E \u2014 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0438\u0441\u043A\u0430\u043B \u0435\u0451 \u043F\u043E \u0438\u043C\u0435\u043D\u0438 \u0438 \u0434\u043E\u043B\u0436\u0435\u043D \u0435\u0451 \u043D\u0430\u0439\u0442\u0438. \u0428\u0435\u0432\u0440\u043E\u043D \u0443 \u0442\u0430\u043A\u043E\u0439\n            \u043F\u0430\u043F\u043A\u0438 \u0443\u0431\u0440\u0430\u043D: \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E, \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0430 \u043E\u0431\u0435\u0449\u0430\u043B\u0430 \u0431\u044B \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435.\n        -->\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [hideToggle]=\"!item.submenu.length\"\n            [expanded]=\"menuRef.expandedMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{\n                    activated: menuRef.activeMenuIds().includes(item.id),\n                    highlighted: menuRef.highlightedMenuId() === item.id,\n                }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded && item?.submenu?.length) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtHideTooltipDirective, selector: "[rtHideTooltipDirective]", inputs: ["rtHideTooltipDirective", "isTooltipShown"] }, { kind: "pipe", type: 
                 // pipes
@@ -920,9 +1003,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                                 disableTooltipInteractivity: true,
                             },
                         },
-                    ], template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        <!--\n                            \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n                            \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n                            \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n                        -->\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <!--\n                                    \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n                                    \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n                                    \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n                                -->\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [expanded]=\"menuRef.activeMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{ activated: menuRef.activeMenuIds().includes(item.id) }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"] }]
+                    ], template: "@if (item()) {\n    <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item() }\" />\n}\n\n<ng-template #listElemTpl let-item>\n    @if (item?.link) {\n        <mat-list-item\n            rtBlock=\"rtui-side-menu-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled(), highlighted: menuRef.highlightedMenuId() === item.id }\"\n            [id]=\"item.id\"\n            [activated]=\"menuRef.activeMenuIds().includes(item.id)\"\n            (click)=\"onClickSubMenu(item, $event)\">\n            @if (item?.icon) {\n                <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n            }\n\n            @if (item?.name) {\n                <div rtBlock=\"rtui-side-menu-sub-item-title\">\n                    <div\n                        #titleTpl\n                        rtElem=\"text\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"titleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        <!--\n                            \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044F \u043A\u0443\u0441\u043A\u0430\u043C\u0438: \u043E\u0442\u043C\u0435\u0447\u0435\u043D\u043E \u0440\u043E\u0432\u043D\u043E \u0442\u043E, \u0447\u0435\u043C \u043E\u043D\u0430 \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u0441\n                            \u0437\u0430\u043F\u0440\u043E\u0441\u043E\u043C. \u041E\u0442\u043C\u0435\u0447\u0435\u043D\u043D\u043E\u0435 \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0441\u0432\u043E\u0438\u043C \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u043C, \u0430 \u043D\u0435 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u043E\u0439\n                            \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 \u0442\u0430 \u043A\u0440\u0430\u0441\u0438\u0442 \u043C\u0438\u043C\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0442\u043E\u043A\u0435\u043D\u043E\u0432.\n                        -->\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <!--\n                                    \u041A\u0443\u0441\u043E\u043A \u0431\u0435\u0437 \u043E\u0442\u043C\u0435\u0442\u043A\u0438 \u0442\u043E\u0436\u0435 \u0443\u0437\u0435\u043B: \u0438\u043D\u0442\u0435\u0440\u043F\u043E\u043B\u044F\u0446\u0438\u044F, \u0441\u0442\u043E\u044F\u0449\u0430\u044F \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435\n                                    \u0441\u0430\u043C\u0430 \u043F\u043E \u0441\u0435\u0431\u0435, \u043F\u0440\u0438\u0435\u0437\u0436\u0430\u0435\u0442 \u0432\u043C\u0435\u0441\u0442\u0435 \u0441 \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0430\u043C\u0438 \u0441\u0442\u0440\u043E\u043A \u0432\u043E\u043A\u0440\u0443\u0433 \u043D\u0435\u0451\n                                    \u0438 \u0440\u0430\u0437\u0440\u044B\u0432\u0430\u0435\u0442 \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u0431\u0435\u043B\u0430\u043C\u0438.\n                                -->\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n\n                    @if (item?.iconButton?.icon) {\n                        <div rtBlock=\"rtui-side-menu-sub-item-title-button\">\n                            <mat-icon\n                                rtElem=\"icon\"\n                                [rtIconOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                (click)=\"onClickSubMenuAdditional(item.iconButton?.data, $event); $event.stopPropagation()\">\n                                {{ item.iconButton.icon }}\n                            </mat-icon>\n                        </div>\n                    }\n                </div>\n            }\n        </mat-list-item>\n    } @else if (item?.submenu) {\n        <!--\n            \u041F\u0430\u043F\u043A\u0430 \u0440\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 \u0442\u0443, \u0447\u0442\u043E \u0441\u043E\u0432\u043F\u0430\u043B\u0430 \u043F\u043E\u0434\u043F\u0438\u0441\u044C\u044E, \u0430\n            \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435 \u043D\u0430\u0448\u043B\u043E\u0441\u044C \u043D\u0438\u043A\u043E\u0433\u043E \u2014 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0438\u0441\u043A\u0430\u043B \u0435\u0451 \u043F\u043E \u0438\u043C\u0435\u043D\u0438 \u0438 \u0434\u043E\u043B\u0436\u0435\u043D \u0435\u0451 \u043D\u0430\u0439\u0442\u0438. \u0428\u0435\u0432\u0440\u043E\u043D \u0443 \u0442\u0430\u043A\u043E\u0439\n            \u043F\u0430\u043F\u043A\u0438 \u0443\u0431\u0440\u0430\u043D: \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0435\u0447\u0435\u0433\u043E, \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0430 \u043E\u0431\u0435\u0449\u0430\u043B\u0430 \u0431\u044B \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435.\n        -->\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\n            [hideToggle]=\"!item.submenu.length\"\n            [expanded]=\"menuRef.expandedMenuIds().includes(item.id)\">\n            <mat-expansion-panel-header\n                rtBlock=\"rtui-side-menu-expand-sub-item-header\"\n                [rtMod]=\"{\n                    activated: menuRef.activeMenuIds().includes(item.id),\n                    highlighted: menuRef.highlightedMenuId() === item.id,\n                }\">\n                @if (item?.icon) {\n                    <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isSubMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                }\n\n                @if (item?.name) {\n                    <div\n                        #headerTitleTpl\n                        matListItemTitle\n                        rtElem=\"title\"\n                        matTooltipPosition=\"above\"\n                        [matTooltip]=\"item.name\"\n                        [matTooltipDisabled]=\"!isSubMenuTooltipsShown() || narrow()\"\n                        [rtHideTooltipDirective]=\"headerTitleTpl\"\n                        [isTooltipShown]=\"isSubMenuTooltipsShown() && !narrow()\">\n                        @for (part of item.name | rtuiSubMenuTitleParts: menuRef.subMenuQuery(); track $index) {\n                            @if (part.matched) {\n                                <span rtElem=\"match\">{{ part.text }}</span>\n                            } @else {\n                                <span>{{ part.text }}</span>\n                            }\n                        }\n                    </div>\n                }\n            </mat-expansion-panel-header>\n\n            @if (panel?.expanded && item?.submenu?.length) {\n                <mat-nav-list>\n                    @for (item of item?.submenu; track i; let i = $index) {\n                        <ng-container *ngTemplateOutlet=\"listElemTpl; context: { $implicit: item }\" />\n                    }\n                </mat-nav-list>\n            }\n        </mat-expansion-panel>\n    }\n</ng-template>\n", styles: [":host{display:block;max-width:100%}:host::ng-deep .mat-expansion-indicator{padding:0 var(--rt-spacing-24)}:host::ng-deep .mat-expansion-panel-body{padding:0 0 0 var(--rt-spacing-16)}:host::ng-deep{--mat-expansion-container-background-color: transparent;--mat-expansion-header-expanded-state-height: var(--mat-expansion-header-collapsed-state-height)}:host .rtui-side-menu-sub-item{max-width:100%}:host .rtui-side-menu-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-sub-item--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__text{overflow:hidden;font-size:var(--rt-side-menu-sub-menu-item-title-font-size);text-overflow:ellipsis;white-space:nowrap}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button{display:flex;align-items:center;justify-content:center;padding:var(--rt-spacing-2);border:1.5px solid transparent;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8);cursor:pointer}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button__icon{width:1.25rem;height:1.25rem;font-size:var(--rt-font-size-lg)}:host .rtui-side-menu-sub-item .rtui-side-menu-sub-item-title .rtui-side-menu-sub-item-title-button:hover{border-color:var(--rt-border-neutral-emphasis)}:host .rtui-side-menu-expand-sub-item{padding:0;border-radius:var(--rt-radius-xl);box-shadow:none}:host .rtui-side-menu-expand-sub-item--fixed{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header{max-width:100%;padding:0}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--activated{background-color:var(--mat-list-active-indicator-color)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header--highlighted{border-radius:var(--rt-radius-xl);outline:2px solid var(--rt-border-focus);outline-offset:-2px}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-leading-icon-color);margin-inline:var(--mat-list-list-item-leading-icon-start-space) var(--mat-list-list-item-leading-icon-end-space)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__title{font-size:var(--rt-side-menu-sub-menu-item-title-font-size)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header__match{border-radius:var(--rt-radius-xs);background-color:var(--rt-bg-accent-highlight);color:var(--rt-text-accent-highlight);font-weight:var(--rt-font-weight-semibold)}:host .rtui-side-menu-expand-sub-item .rtui-side-menu-expand-sub-item-header:hover .rtui-side-menu-expand-sub-item-header__icon{color:var(--mdc-list-list-item-hover-leading-icon-color)}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], isSubMenuXScrollEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuXScrollEnabled", required: false }] }], isSubMenuIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuIconsOutlined", required: false }] }], isSubMenuButtonIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuButtonIconsOutlined", required: false }] }], isSubMenuTooltipsShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSubMenuTooltipsShown", required: false }] }], clickSubMenuAction: [{ type: i0.Output, args: ["clickSubMenuAction"] }], clickSubMenuAdditionalAction: [{ type: i0.Output, args: ["clickSubMenuAdditionalAction"] }] } });
 
+/**
+ * Ходьба по подменю с клавиатуры.
+ *
+ * Лежит отдельно от меню по двум причинам. Проверяется вызовом, без подъёма компонента: решение о
+ * том, куда уходит подсветка и что делает клавиша, — чистый расчёт. И файл меню уже почти упёрся в
+ * предел длины, а состояния здесь три.
+ *
+ * Клавиши слушает поле поиска, а не список: фокус из поля не уходит, поэтому между нажатиями
+ * стрелок продолжает работать набор текста. Съедаются только те клавиши, по которым идёт ходьба, —
+ * на остальные ответ отрицательный и без отмены умолчания, иначе поле перестанет принимать буквы.
+ *
+ * Подсветка держится по номеру пункта, а не по ссылке на него и не по месту в списке: видимый
+ * список пересобирается на каждую букву запроса, и всё, что лежит вне модели пункта, такой
+ * пересборки не переживает.
+ */
+class SubMenuKeyboard {
+    #highlightedId;
+    /**
+     * Папки, раскрытые и свёрнутые стрелками. Два списка, а не один: раскрытость приходит ещё и от
+     * поиска, и от активного адреса — свернуть такую папку можно, только помня об этом отдельно.
+     */
+    #openedIds;
+    #closedIds;
+    #hooks;
+    constructor(hooks) {
+        this.#highlightedId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#highlightedId" }] : /* istanbul ignore next */ []));
+        /**
+         * Папки, раскрытые и свёрнутые стрелками. Два списка, а не один: раскрытость приходит ещё и от
+         * поиска, и от активного адреса — свернуть такую папку можно, только помня об этом отдельно.
+         */
+        this.#openedIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#openedIds" }] : /* istanbul ignore next */ []));
+        this.#closedIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#closedIds" }] : /* istanbul ignore next */ []));
+        this.highlightedId = this.#highlightedId.asReadonly();
+        this.openedIds = this.#openedIds.asReadonly();
+        this.closedIds = this.#closedIds.asReadonly();
+        this.#hooks = hooks;
+    }
+    /** Всё, что клавиатура успела наделать, снимается: набран новый запрос или подменю закрылось. */
+    reset() {
+        this.#highlightedId.set(null);
+        this.#openedIds.set([]);
+        this.#closedIds.set([]);
+    }
+    /** Нажата клавиша в поле поиска. Отвечает, съедена ли она: только съеденная отменяет умолчание. */
+    press(key, items, expandedIds) {
+        const walk = walkSubMenuItems(items, expandedIds);
+        const current = walk.find((item) => item.id === this.#highlightedId()) ?? null;
+        switch (key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                this.#highlightedId.set(stepSubMenuHighlight(walk, this.#highlightedId(), key === 'ArrowDown' ? 1 : -1));
+                return true;
+            case 'ArrowRight':
+                return this.#setFolderOpen(current, true);
+            case 'ArrowLeft':
+                return this.#setFolderOpen(current, false);
+            case 'Enter':
+                return this.#enter(current);
+            case 'Escape':
+                this.reset();
+                this.#hooks.clearQuery();
+                return true;
+            default:
+                return false;
+        }
+    }
+    /** Enter открывает подсвеченное: у пункта со ссылкой это переход, у папки — раскрытие. */
+    #enter(item) {
+        if (item === null) {
+            return false;
+        }
+        if (item.link) {
+            this.#hooks.open(item);
+            return true;
+        }
+        return this.#setFolderOpen(item, true);
+    }
+    #setFolderOpen(item, open) {
+        if (item === null || !item.submenu?.length) {
+            return false;
+        }
+        const without = (ids) => ids.filter((id) => id !== item.id);
+        this.#openedIds.update((ids) => (open ? [...without(ids), item.id] : without(ids)));
+        this.#closedIds.update((ids) => (open ? without(ids) : [...without(ids), item.id]));
+        return true;
+    }
+}
+/**
+ * Нажатие строки пункта подменю — того самого узла, который нажимает мышь.
+ *
+ * Собранное в коде нажатие прошло бы мимо всего, что висит на настоящем: закрытия подменю, ухода
+ * просьбы наружу, перехода по адресу. Строка ищется по номеру среди строк панели.
+ */
+function pressSubMenuRow(panel, item) {
+    const rows = Array.from(panel?.querySelectorAll('.rtui-side-menu-sub-item') ?? []);
+    rows.find((row) => row.id === String(item.id))?.click();
+}
+
 class RtuiSideMenuHeaderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: RtuiSideMenuHeaderDirective, isStandalone: true, selector: "[rtuiSideMenuHeader]", ngImport: i0 }); }
@@ -959,6 +1143,15 @@ class RtuiSideMenuComponent {
         /** Подменю открыл указатель. У закреплённой моды открытость считается не так. */
         this.#hoverOpened = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#hoverOpened" }] : /* istanbul ignore next */ []));
+        /**
+         * Ходьба по подменю с клавиатуры. Открывает подсвеченный пункт настоящим нажатием его строки:
+         * так переход идёт ровно той же дорогой, что и у мыши, — вместе с закрытием подменю и уходом
+         * просьбы наружу.
+         */
+        this.#keyboard = new SubMenuKeyboard({
+            open: (item) => pressSubMenuRow(this.subMenuPanelRef()?.nativeElement ?? null, item),
+            clearQuery: () => this.onSubMenuSearch(''),
+        });
         /**
          * Человек работает с полем поиска, и подменю держится открытым, пока он не уйдёт нажатием
          * наружу.
@@ -993,11 +1186,9 @@ class RtuiSideMenuComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#pinnedSubMenu" }] : /* istanbul ignore next */ []));
         /**
-         * Ширина подменю в оформлении. Своего выбора нет — переменная не ставится вовсе, и ширину
-         * берёт набор токенов: своё число здесь подменило бы его молча.
-         */
-        /**
-         * Натянутая ширина панели. Кладётся своим свойством, а не тем, каким ширину задаёт
+         * Натянутая ширина панели. Своего выбора нет — переменная не ставится вовсе, и ширину берёт
+         * набор токенов: своё число здесь подменило бы его молча.
+         * Кладётся своим свойством, а не тем, каким ширину задаёт
          * потребитель: панель берёт наибольшее из двух, и заданная оформлением ширина остаётся нижним
          * пределом сама по себе. Числом в ките этот предел назвать нечем — ширину знает потребитель.
          */
@@ -1033,6 +1224,24 @@ class RtuiSideMenuComponent {
         /** Что видно в подменю: отобранные пункты того набора, который его сейчас наполняет. */
         this.visibleSubMenuItems = computed(() => filterSubMenuItems(this.isPinned() ? this.#pinnedSubMenu() : (this.selectedSubMenu() ?? []), this.subMenuQuery()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visibleSubMenuItems" }] : /* istanbul ignore next */ []));
+        /**
+         * Какие папки подменю стоят раскрытыми. Публично: подпункт берёт раскрытость отсюда — своей у
+         * него нет, а его собственная разметка вложена в него же на любую глубину.
+         *
+         * Пустой запрос отдаёт прежнюю раскрытость, ту, что была до набора: раскрытым остаётся только
+         * раздел текущего адреса. Непустой добавляет к ней все папки, в которых нашлось совпадение, —
+         * иначе результат поиска лежит за закрытым заголовком и человеку нужно нажать ещё раз, чтобы
+         * увидеть то, что он уже нашёл.
+         */
+        this.expandedMenuIds = computed(() => {
+            const active = this.activeMenuIds();
+            const found = this.subMenuQuery().trim() === '' ? [] : subMenuIdsToExpand(this.visibleSubMenuItems());
+            const closed = this.#keyboard.closedIds();
+            return [...active, ...found, ...this.#keyboard.openedIds()].filter((id) => !closed.includes(id));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedMenuIds" }] : /* istanbul ignore next */ []));
+        /** Пункт под подсветкой клавиатуры. Публично: отмечает его подпункт, своего состояния у него нет. */
+        this.highlightedMenuId = this.#keyboard.highlightedId;
         this.headerTpl = contentChild(RtuiSideMenuHeaderDirective, { ...(ngDevMode ? { debugName: "headerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.footerTpl = contentChild(RtuiSideMenuFooterDirective, { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
         /** Что набрано в поиске. Публично: подпункт берёт запрос отсюда, чтобы отметить совпавшее. */
@@ -1088,6 +1297,12 @@ class RtuiSideMenuComponent {
     #stopDrag;
     /** Подменю открыл указатель. У закреплённой моды открытость считается не так. */
     #hoverOpened;
+    /**
+     * Ходьба по подменю с клавиатуры. Открывает подсвеченный пункт настоящим нажатием его строки:
+     * так переход идёт ровно той же дорогой, что и у мыши, — вместе с закрытием подменю и уходом
+     * просьбы наружу.
+     */
+    #keyboard;
     /**
      * Человек работает с полем поиска, и подменю держится открытым, пока он не уйдёт нажатием
      * наружу.
@@ -1169,6 +1384,7 @@ class RtuiSideMenuComponent {
         this.subMenuQuery.set('');
         this.#hoverOpened.set(false);
         this.#searchHeld.set(false);
+        this.#keyboard.reset();
     }
     /**
      * Человек взялся за поле поиска. Дальше подменю держится открытым, и увести его уходом
@@ -1208,6 +1424,20 @@ class RtuiSideMenuComponent {
     onSubMenuSearch(query) {
         this.subMenuQuery.set(query);
         this.onSearchHold();
+        // Видимый список пересобрался: подсветка и раскрытое стрелками к нему больше не относятся.
+        this.#keyboard.reset();
+    }
+    /**
+     * Нажата клавиша в поле поиска. Поле фокуса не теряет и раздаёт клавиши списку: иначе набор
+     * запроса прерывался бы на первой же стрелке. Умолчание отменяется только у съеденной клавиши —
+     * буквы уходят полю нетронутыми.
+     */
+    onSearchKeydown(event) {
+        if (!this.#keyboard.press(event.key, this.visibleSubMenuItems(), this.expandedMenuIds())) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
     }
     closeMobileMenu() {
         if (this.narrow()) {
@@ -1266,7 +1496,7 @@ class RtuiSideMenuComponent {
         return width > 0 ? width : SUB_MENU_WIDTH_MIN;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-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 }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\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, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-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 }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\"\n                                    (keydown)=\"onSearchKeydown($event)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\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, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerFooterDirective, selector: "[rtuiScrollableFooter]" }, { kind: "directive", type: RtScrollToElementDirective, selector: "[rtScrollToElement]", inputs: ["rtScrollToElement", "elements"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtNavigationDirective, selector: "[rtNavigationDirective]", inputs: ["rtNavigationDirective"] }, { kind: "component", type: 
                 // components
@@ -1308,7 +1538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiButtonComponent,
                         RtuiClearButtonComponent,
                         RtuiSideMenuSubItemComponent,
-                    ], template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\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, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
+                    ], template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\"\n                                    (keydown)=\"onSearchKeydown($event)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\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, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-text-field-wrapper,:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix{padding-left:0}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-10)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{