@rt-tools/ui-kit 0.7.0 → 0.7.1

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

@@ -324,10 +324,14 @@ const RTUI_SIDE_MENU = new InjectionToken('RTUI_SIDE_MENU');
  * человек и ищет по имени, и по одному верхнему уровню такой пункт совпасть не мог по построению —
  * поиск находил только саму папку.
  *
- * Папка остаётся в списке по двум разным поводам, и содержимое у неё при этом разное. Совпала сама
- * подпись папки — папка отдаётся целиком: человек искал папку и ждёт увидеть то, что в ней лежит, а
- * не её же имя над пустотой. Совпал только кто-то внутри — папка отдаётся с отобранными пунктами:
- * иначе одно совпадение вытаскивает на экран весь остальной её состав.
+ * В выдаче стоят только строки, содержащие запрос. Папка — не исключение из этого, а путь к
+ * совпавшим детям: она остаётся, чтобы человек видел, где найденное лежит, а её состав отбирается
+ * тем же правилом. Иначе одно совпадение по имени папки вытаскивает на экран весь её состав, и
+ * человек читает как найденное то, в чём запроса нет.
+ *
+ * Совпавшая по имени папка, внутри которой не совпал никто, остаётся одной строкой без детей: её
+ * искали по имени, и она должна найтись. Пункт без детей в исходном наборе так и остаётся пунктом
+ * — пустого списка ему не приписывается.
  *
  * Отобранная папка — новый объект: правка `submenu` на месте переписала бы набор, который дал
  * потребитель, и стёртый запрос вернул бы урезанное меню.
@@ -338,13 +342,14 @@ function filterSubMenuItems(items, query) {
         return [...items];
     }
     return items.reduce((kept, item) => {
-        if (item.name?.toLowerCase().includes(needle)) {
-            kept.push(item);
-            return kept;
-        }
-        const inside = item.submenu?.length ? filterSubMenuItems(item.submenu, query) : [];
+        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;
     }, []);
@@ -965,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(), 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?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\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) {\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: 
+        ], 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
@@ -998,7 +1003,7 @@ 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(), 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?.length) {\n        <mat-expansion-panel\n            #panel\n            rtBlock=\"rtui-side-menu-expand-sub-item\"\n            [rtMod]=\"{ fixed: isSubMenuXScrollEnabled() }\"\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) {\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"] }]
+                    ], 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"] }] } });
 
 /**
@@ -1491,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                                    (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-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-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
@@ -1533,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                                    (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-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-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), { ...{