@rt-tools/ui-kit 0.6.0 → 0.6.1

package/README.md

@@ -33,12 +33,21 @@ bootstrapApplication(AppComponent, {
     providers: [
         provideRtUi({
             global: { theme: 'auto', design: 'custom' },
-            components: { button: { size: 'md', appearance: 'solid' } },
+            components: {
+                button: { size: 'md', appearance: 'solid' },
+                aside: { closeOnEscape: true },
+            },
         }),
     ],
 });
 ```
 
+Since 0.5.0 Esc does not close an open aside curtain: the key is pressed to lift a hint or to leave a
+field, and the whole panel closed together with what was entered. The signature did not change, so an
+existing call keeps compiling and silently loses the closing by a key. An application that needs the
+former behaviour names `components.aside.closeOnEscape` once, as above; a single call names
+`closeOnEscape` in its own argument, and that argument wins over the setting.
+
 Import the design-token stylesheet so components and your own styles share the same `--rt-*` variables:
 
 ```scss

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

@@ -1266,7 +1266,7 @@ class RtuiSideMenuComponent {
         return width > 0 ? width : SUB_MENU_WIDTH_MIN;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);position:relative;width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RtuiSideMenuComponent, isStandalone: true, selector: "rtui-side-menu", inputs: { activeMenuIds: { classPropertyName: "activeMenuIds", publicName: "activeMenuIds", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, subMenuMode: { classPropertyName: "subMenuMode", publicName: "subMenuMode", isSignal: true, isRequired: false, transformFunction: null }, subMenuWidth: { classPropertyName: "subMenuWidth", publicName: "subMenuWidth", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuXScrollEnabled: { classPropertyName: "isSubMenuXScrollEnabled", publicName: "isSubMenuXScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, isMainMenuIconsOutlined: { classPropertyName: "isMainMenuIconsOutlined", publicName: "isMainMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuIconsOutlined: { classPropertyName: "isSubMenuIconsOutlined", publicName: "isSubMenuIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuButtonIconsOutlined: { classPropertyName: "isSubMenuButtonIconsOutlined", publicName: "isSubMenuButtonIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, isSubMenuTooltipsShown: { classPropertyName: "isSubMenuTooltipsShown", publicName: "isSubMenuTooltipsShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { subMenuModeChange: "subMenuModeChange", subMenuWidthChange: "subMenuWidthChange", closeMobileMenuAction: "closeMobileMenuAction", clickSubMenuAction: "clickSubMenuAction", clickSubMenuAdditionalAction: "clickSubMenuAdditionalAction" }, host: { properties: { "class.rtui-side-menu--pinned": "isPinned()", "style.--rt-side-menu-sub-menu-dragged-width": "subMenuWidthStyle()" }, classAttribute: "rtui-side-menu" }, providers: [BreakpointService, { provide: RTUI_SIDE_MENU, useExisting: RtuiSideMenuComponent }], queries: [{ propertyName: "headerTpl", first: true, predicate: RtuiSideMenuHeaderDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtuiSideMenuFooterDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "subMenuRef", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "subMenuPanelRef", first: true, predicate: ["subMenuPanel"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$4.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i1$4.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: RtuiScrollableContainerHeaderDirective, selector: "[rtuiScrollableHeader]" }, { kind: "directive", type: RtuiScrollableContainerContentDirective, selector: "[rtuiScrollableContent]" }, { kind: "directive", type: RtuiScrollableContainerFooterDirective, selector: "[rtuiScrollableFooter]" }, { kind: "directive", type: RtScrollToElementDirective, selector: "[rtScrollToElement]", inputs: ["rtScrollToElement", "elements"] }, { kind: "directive", type: RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }, { kind: "directive", type: RtNavigationDirective, selector: "[rtNavigationDirective]", inputs: ["rtNavigationDirective"] }, { kind: "component", type: 
                 // components
@@ -1308,7 +1308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         RtuiButtonComponent,
                         RtuiClearButtonComponent,
                         RtuiSideMenuSubItemComponent,
-                    ], template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);position:relative;width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
+                    ], template: "@if (narrow()) {\n    <rtui-scrollable rtBlock=\"rtui-mobile-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list\n                    rtBlock=\"rtui-mobile-side-menu-list\"\n                    [rtMod]=\"{ scrollable: selectedSubMenu()?.length && isSubMenuXScrollEnabled() }\">\n                    @if (selectedSubMenu()?.length) {\n                        <div rtElem=\"sub\" [rtScrollToElement]=\"activeMenuId()\" [elements]=\"visibleSubMenuItems()\">\n                            <rtui-side-menu-sub-item [item]=\"backToMainMenuButton()\" (clickSubMenuAction)=\"onBackToMainMenu()\" />\n\n                            <mat-form-field rtBlock=\"rtui-side-menu-search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #mobileSubMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(mobileSubMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            @if (subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                                <div rtBlock=\"rtui-side-menu-empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                            }\n\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </div>\n                    } @else {\n                        <div rtBlock=\"rtui-mobile-side-menu-list-main\">\n                            @for (item of menuItems(); track i; let i = $index) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-mobile-side-menu-item\"\n                                    [rtNavigationDirective]=\"item?.link\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\"\n                                    (click)=\"onClickMenu(item)\">\n                                    @if (item?.icon) {\n                                        <mat-icon matListItemIcon rtElem=\"icon\" [rtIconOutlined]=\"isMainMenuIconsOutlined()\">\n                                            {{ item.icon }}\n                                        </mat-icon>\n                                    }\n\n                                    @if (item?.name) {\n                                        <div rtBlock=\"rtui-mobile-side-menu-item-title\">\n                                            <div rtElem=\"text\">{{ item.name }}</div>\n\n                                            @if (item?.iconButton?.icon) {\n                                                <div rtBlock=\"rtui-mobile-side-menu-item-title-button\">\n                                                    <mat-icon rtElem=\"icon\">{{ item.iconButton?.icon }}</mat-icon>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </mat-list-item>\n                            }\n                        </div>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n} @else {\n    <rtui-scrollable rtBlock=\"rtui-side-menu\" [isScrollHintShown]=\"true\">\n        @if (headerTpl()) {\n            <ng-container *rtuiScrollableHeader>\n                <ng-container *ngTemplateOutlet=\"headerTpl() ?? null\" />\n            </ng-container>\n        }\n\n        @if (menuItems().length) {\n            <ng-container *rtuiScrollableContent>\n                <mat-nav-list rtElem=\"list\">\n                    @for (item of menuItems(); track i; let i = $index) {\n                        <a\n                            rtBlock=\"rtui-side-menu-item\"\n                            tabindex=\"0\"\n                            [rtNavigationDirective]=\"item?.link\"\n                            (mouseenter)=\"toggleSubMenu(item)\"\n                            (click)=\"onClickMenu(item)\"\n                            (keydown.enter)=\"onClickMenu(item)\">\n                            @if (item?.icon) {\n                                <mat-list-item\n                                    rtBlock=\"rtui-side-menu-item-button\"\n                                    [activated]=\"selectedItem() === item || (!selectedItem() && activeMenuIds().includes(item.id))\">\n                                    <div rtElem=\"icon\">\n                                        <mat-icon [rtIconOutlined]=\"isMainMenuIconsOutlined()\">{{ item.icon }}</mat-icon>\n                                    </div>\n                                </mat-list-item>\n                            }\n\n                            @if (item?.name) {\n                                <div rtElem=\"title\">{{ item.name }}</div>\n                            }\n                        </a>\n                    }\n                </mat-nav-list>\n            </ng-container>\n        }\n\n        @if (footerTpl()) {\n            <ng-container *rtuiScrollableFooter>\n                <ng-container *ngTemplateOutlet=\"footerTpl() ?? null\" />\n            </ng-container>\n        }\n    </rtui-scrollable>\n\n    <mat-drawer-container\n        rtBlock=\"rtui-sub-side-menu\"\n        [rtMod]=\"{ opened: subMenuOpened(), pinned: isPinned(), held: isSearchHeld() }\"\n        [hasBackdrop]=\"!isPinned()\"\n        (backdropClick)=\"closeSubMenu()\">\n        <mat-drawer\n            #subMenuPanel\n            rtBlock=\"rtui-sub-side-menu-content\"\n            mode=\"side\"\n            position=\"start\"\n            [opened]=\"subMenuOpened()\"\n            (mouseleave)=\"toggleSubMenu()\">\n            <rtui-scrollable [isScrollHintShown]=\"true\">\n                <ng-container *rtuiScrollableHeader>\n                    @if (subMenuOpened()) {\n                        <div rtBlock=\"rtui-sub-side-menu-head\">\n                            <!--\n                                \u041F\u043E\u043B\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u044B\u043C \u043A\u0438\u0442\u0430 \u2014 \u0442\u0435\u043C \u0436\u0435, \u043A\u0430\u043A\u0438\u043C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u043E\u0438\u0441\u043A \u0442\u0443\u043B\u0431\u0430\u0440\n                                \u0442\u0430\u0431\u043B\u0438\u0446\u044B: \u0441\u0432\u043E\u044F \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0430 \u0440\u0430\u0441\u0445\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043D\u0438\u043C \u043F\u0440\u0438 \u043F\u0435\u0440\u0432\u043E\u0439 \u0436\u0435 \u043F\u0440\u0430\u0432\u043A\u0435\n                                \u043A\u0438\u0442\u0430, \u0438 \u0437\u0430\u043C\u0435\u0442\u0438\u0442\u044C \u044D\u0442\u043E \u043D\u0435\u043A\u043E\u043C\u0443. \u0424\u043E\u0440\u043C\u0430 \u043F\u0438\u043B\u044E\u043B\u0438 \u0437\u0430\u0434\u0430\u043D\u0430 \u0440\u0443\u0447\u043A\u043E\u0439\n                                \u043E\u0444\u043E\u0440\u043C\u043B\u0435\u043D\u0438\u044F \u043F\u043E\u043B\u044F, \u0430 \u043D\u0435 \u0440\u0430\u043C\u043A\u043E\u0439 \u043F\u043E\u0432\u0435\u0440\u0445 \u0433\u043E\u0442\u043E\u0432\u043E\u0433\u043E.\n                            -->\n                            <mat-form-field rtElem=\"search\" subscriptSizing=\"dynamic\" appearance=\"outline\">\n                                <input\n                                    #subMenuSearch\n                                    matInput\n                                    type=\"search\"\n                                    qa-dataid=\"side-menu-search\"\n                                    [attr.aria-label]=\"searchLabel\"\n                                    [placeholder]=\"searchLabel\"\n                                    [value]=\"subMenuQuery()\"\n                                    (focus)=\"onSearchHold()\"\n                                    (input)=\"onSubMenuSearch(subMenuSearch.value)\" />\n\n                                <mat-icon matPrefix [rtIconOutlined]=\"true\">search</mat-icon>\n\n                                <rtui-clear-button matSuffix [isButtonShown]=\"subMenuQuery() !== ''\" (clickAction)=\"onSubMenuSearch('')\" />\n                            </mat-form-field>\n\n                            <!--\n                                \u041A\u043D\u043E\u043F\u043A\u0430 \u0431\u0435\u0440\u0451\u0442\u0441\u044F \u0433\u043E\u0442\u043E\u0432\u043E\u0439 \u043A\u0438\u0442\u0430. \u0417\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u043F\u043E\u043C\u0435\u0447\u0435\u043D\u043E \u0446\u0432\u0435\u0442\u043D\u044B\u043C\n                                \u0437\u043D\u0430\u0447\u043A\u043E\u043C, \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u2014 \u0441\u043F\u043E\u043A\u043E\u0439\u043D\u044B\u043C: \u044D\u0442\u043E \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434 `variant`, \u0438\n                                \u043E\u043D \u0436\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0435\u0434\u0438\u043D\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u043C \u043F\u0440\u0438\u0437\u043D\u0430\u043A\u043E\u043C \u0442\u0430\u043C, \u0433\u0434\u0435 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C\n                                \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u043B \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440 \u0437\u043D\u0430\u0447\u043A\u043E\u0432 \u2014 \u0437\u0430\u043B\u0438\u0432\u043A\u0443 \u0440\u0438\u0441\u0443\u0435\u0442 \u043E\u0441\u044C\n                                \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0438 \u0443 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u043E\u0433\u043E \u043D\u0430\u0431\u043E\u0440\u0430 \u0435\u0451 \u043D\u0435\u0442. \u0413\u0434\u0435 \u043E\u0441\u044C \u0435\u0441\u0442\u044C,\n                                \u0437\u0430\u043B\u0438\u0432\u043A\u0430 \u0438\u0434\u0451\u0442 \u043F\u043E\u0432\u0435\u0440\u0445 \u0446\u0432\u0435\u0442\u0430, \u0430 \u043D\u0435 \u0432\u043C\u0435\u0441\u0442\u043E \u043D\u0435\u0433\u043E.\n                            -->\n                            <rtui-button\n                                rtElem=\"pin\"\n                                type=\"icon\"\n                                icon=\"push_pin\"\n                                qa-dataid=\"side-menu-pin\"\n                                [outlined]=\"!isPinned()\"\n                                [variant]=\"isPinned() ? 'primary' : 'default'\"\n                                [attr.aria-label]=\"isPinned() ? unpinLabel : pinLabel\"\n                                [attr.aria-pressed]=\"isPinned()\"\n                                (clicked)=\"onSubMenuModeToggle()\" />\n                        </div>\n                    }\n                </ng-container>\n\n                <ng-container *rtuiScrollableContent>\n                    @if (subMenuOpened() && subMenuQuery() !== '' && !visibleSubMenuItems().length) {\n                        <div rtElem=\"empty\" qa-dataid=\"side-menu-empty\">{{ nothingFoundLabel }}</div>\n                    }\n\n                    @if (subMenuOpened() && visibleSubMenuItems().length) {\n                        <mat-nav-list\n                            rtElem=\"list\"\n                            [rtMod]=\"{ scrollable: isSubMenuXScrollEnabled() }\"\n                            [rtScrollToElement]=\"activeMenuId()\"\n                            [elements]=\"visibleSubMenuItems()\">\n                            @for (item of visibleSubMenuItems(); track i; let i = $index) {\n                                <rtui-side-menu-sub-item\n                                    [item]=\"item\"\n                                    [isSubMenuXScrollEnabled]=\"isSubMenuXScrollEnabled()\"\n                                    [isSubMenuIconsOutlined]=\"isSubMenuIconsOutlined()\"\n                                    [isSubMenuButtonIconsOutlined]=\"isSubMenuButtonIconsOutlined()\"\n                                    [isSubMenuTooltipsShown]=\"isSubMenuTooltipsShown()\"\n                                    (clickSubMenuAction)=\"onClickSubMenu($event)\"\n                                    (clickSubMenuAdditionalAction)=\"clickSubMenuAdditional($event)\" />\n                            }\n                        </mat-nav-list>\n                    }\n                </ng-container>\n            </rtui-scrollable>\n        </mat-drawer>\n    </mat-drawer-container>\n\n    @if (isPinned() && subMenuOpened()) {\n        <!--\n            \u0420\u0443\u0447\u043A\u0430 \u0435\u0441\u0442\u044C \u0442\u043E\u043B\u044C\u043A\u043E \u0443 \u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0433\u043E \u043F\u043E\u0434\u043C\u0435\u043D\u044E, \u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u044C \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435: \u0442\u044F\u043D\u0443\u0442\u044C\n            \u043A\u0440\u0430\u0439 \u0443 \u043F\u0430\u043D\u0435\u043B\u0438, \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u043D\u0435\u0447\u0435\u0433\u043E \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C, \u043D\u0435 \u0437\u0430 \u0447\u0442\u043E. \u041D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u043F\u043E\u0434\u043C\u0435\u043D\u044E \u0436\u0438\u0432\u0451\u0442\n            \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441 \u044D\u043A\u0440\u0430\u043D\u0430 \u0440\u0430\u043D\u044C\u0448\u0435, \u0447\u0435\u043C \u0434\u043E \u0435\u0451 \u043A\u0440\u0430\u044F \u0434\u043E\u0435\u0434\u0435\u0442 \u0440\u0443\u043A\u0430.\n\n            \u041B\u0435\u0436\u0438\u0442 \u043E\u043D\u0430 \u0432\u043D\u0435 \u044F\u0449\u0438\u043A\u0430 \u0438 \u0432\u043D\u0435 \u0435\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430: \u043F\u0430\u043D\u0435\u043B\u044C \u0441\u043A\u0440\u0443\u0433\u043B\u0435\u043D\u0430 \u043F\u043E \u043F\u0440\u0430\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0438 \u0440\u0435\u0436\u0435\u0442 \u043F\u043E\n            \u044D\u0442\u043E\u0439 \u0434\u0443\u0433\u0435 \u0432\u0441\u0451, \u0447\u0442\u043E \u0432\u043D\u0443\u0442\u0440\u0438 \u043D\u0435\u0451, \u0430 \u0432\u0441\u0451, \u0447\u0442\u043E \u043A\u043B\u0430\u0434\u0443\u0442 \u0432 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440 \u0440\u044F\u0434\u043E\u043C \u0441 \u043F\u0430\u043D\u0435\u043B\u044C\u044E, Material\n            \u0443\u043D\u043E\u0441\u0438\u0442 \u0432 \u0441\u0432\u043E\u044E \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E \u2014 \u043F\u0440\u0430\u0432\u0435\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0438 \u043D\u0438\u0436\u0435 \u0435\u0451. \u0421\u043D\u0430\u0440\u0443\u0436\u0438 \u0440\u0443\u0447\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0442\u0430\u043C,\n            \u0433\u0434\u0435 \u0435\u0451 \u0441\u0442\u0430\u0432\u044F\u0442, \u0438 \u0438\u0434\u0451\u0442 \u043E\u0442 \u043A\u0440\u0430\u044F \u044D\u043A\u0440\u0430\u043D\u0430 \u0434\u043E \u043A\u0440\u0430\u044F.\n        -->\n        <div\n            rtBlock=\"rtui-side-menu-resizer\"\n            qa-dataid=\"side-menu-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            [attr.aria-label]=\"resizeLabel\"\n            (mousedown)=\"onResizeStart($event)\"></div>\n    }\n}\n", styles: ["@charset \"UTF-8\";:host(.rtui-side-menu--pinned){display:flex;height:100%}:host{--rt-side-menu-base-width: 5.5rem;--rt-side-menu-base-margin-top-between-items: .75rem;--rt-side-menu-item-width: 3.5rem;--rt-side-menu-item-height: 2rem;--rt-side-menu-item-font-size: .75rem;--rt-side-menu-item-text-align: center;--rt-side-menu-item-line-height: 1.1;--rt-side-menu-mobile-item-icon-size: 1.5rem;--rt-side-menu-mobile-item-title-font-size: .75rem;--rt-side-menu-mobile-item-additional-icon-size: 1rem;--rt-side-menu-sub-menu-width: 15rem;--rt-side-menu-sub-menu-radius: 1rem;--rt-side-menu-sub-menu-held-width: 30rem;--rt-side-menu-sub-menu-search-height: 2.5rem;--rt-side-menu-sub-menu-item-width: 13.75rem;--rt-side-menu-sub-menu-item-title-font-size: .85rem;--rt-side-menu-scrollbar-width: .125rem;--rt-side-menu-scrollbar-thumb-radius: var(--rt-radius-xs);--rt-side-menu-scrollbar-track-color: var(--rt-bg-base-strong);--rt-side-menu-scrollbar-thumb-color: var(--rt-bg-base-emphasis-soft);--rt-side-menu-resizer-width: .25rem;--rt-side-menu-resizer-grab-width: .75rem;--rt-side-menu-resizer-hover-color: var(--rt-border-neutral-default);--mat-sidenav-scrim-color: transparent;--rt-side-menu-sub-menu-shown-width: max(var(--rt-side-menu-sub-menu-width), var(--rt-side-menu-sub-menu-dragged-width, 0px));--rt-side-menu-panel-edge: calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width))}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar{width:var(--rt-side-menu-scrollbar-width);height:var(--rt-side-menu-scrollbar-width)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-track{background:var(--rt-side-menu-scrollbar-track-color)}:host ::ng-deep .rtui-scrollable__content::-webkit-scrollbar-thumb{border-radius:var(--rt-side-menu-scrollbar-thumb-radius);background:var(--rt-side-menu-scrollbar-thumb-color)}:host .rtui-mobile-side-menu{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list{display:flex;width:100%;flex-direction:column}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list__sub{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main{animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item__icon{width:var(--rt-side-menu-mobile-item-icon-size);height:var(--rt-side-menu-mobile-item-icon-size);font-size:var(--rt-side-menu-mobile-item-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title{display:flex;align-items:center;justify-content:space-between}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title__text{overflow:hidden;font-size:var(--rt-font-size-xs);text-overflow:ellipsis;white-space:nowrap}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-radius-full);margin-left:var(--rt-spacing-8)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item .rtui-mobile-side-menu-item-title .rtui-mobile-side-menu-item-title-button__icon{width:var(--rt-side-menu-mobile-item-additional-icon-size);height:var(--rt-side-menu-mobile-item-additional-icon-size);font-size:var(--rt-side-menu-mobile-item-additional-icon-size)}:host .rtui-mobile-side-menu .rtui-mobile-side-menu-list .rtui-mobile-side-menu-list-main .rtui-mobile-side-menu-item+.rtui-mobile-side-menu-item{margin-top:var(--rt-spacing-8)}:host .rtui-side-menu{width:var(--rt-side-menu-base-width)}:host .rtui-side-menu__list{display:flex;width:100%;flex-direction:column;align-items:center}:host .rtui-side-menu__list .rtui-side-menu-item{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;cursor:pointer}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button{display:flex;width:var(--rt-side-menu-item-width);height:var(--rt-side-menu-item-height);align-items:center;justify-content:center;padding:0}:host .rtui-side-menu__list .rtui-side-menu-item .rtui-side-menu-item-button__icon{display:flex;align-items:center;justify-content:center}:host .rtui-side-menu__list .rtui-side-menu-item__title{font-size:var(--rt-side-menu-item-font-size);line-height:var(--rt-side-menu-item-line-height);text-align:var(--rt-side-menu-item-text-align)}:host .rtui-side-menu__list .rtui-side-menu-item+.rtui-side-menu-item{margin-top:var(--rt-side-menu-base-margin-top-between-items)}:host .rtui-side-menu-resizer{--rt-side-menu-resizer-overhang: calc((var(--rt-side-menu-resizer-grab-width) - var(--rt-side-menu-resizer-width)) / 2);--rt-side-menu-resizer-inset: calc(var(--rt-side-menu-resizer-width) + var(--rt-side-menu-resizer-overhang));position:fixed;z-index:3;left:calc(var(--rt-side-menu-panel-edge) - var(--rt-side-menu-resizer-inset));width:var(--rt-side-menu-resizer-grab-width);cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:before{position:absolute;left:var(--rt-side-menu-resizer-overhang);width:var(--rt-side-menu-resizer-width);content:\"\";inset-block:0}:host .rtui-side-menu-resizer:hover:before{background-color:var(--rt-side-menu-resizer-hover-color)}:host .rtui-sub-side-menu{position:fixed;top:0;left:var(--rt-side-menu-base-width);width:0;height:100%;background-color:transparent}:host .rtui-sub-side-menu--opened{width:100%}:host .rtui-sub-side-menu .rtui-sub-side-menu-content{--rt-side-menu-sub-content-shadow: 14px 0 28px rgb(0 0 0 / 25%), 10px 0 10px rgb(0 0 0 / 22%);width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));min-width:max(var(--rt-side-menu-sub-menu-width),var(--rt-side-menu-sub-menu-dragged-width, 0px));height:100%;border-radius:0 var(--rt-side-menu-sub-menu-radius) var(--rt-side-menu-sub-menu-radius) 0;border-left:1px solid var(--rt-border-neutral-default);box-shadow:var(--rt-side-menu-sub-content-shadow)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content rtui-scrollable{box-sizing:border-box;padding-bottom:var(--rt-side-menu-sub-menu-radius)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list{width:100%;animation:fade-in-animation .15s ease-in-out .15s forwards;opacity:0}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__list--scrollable{min-width:min(var(--rt-side-menu-sub-menu-item-width),100%)}:host .rtui-sub-side-menu .rtui-sub-side-menu-content__empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}:host .rtui-sub-side-menu--held .rtui-sub-side-menu-content{min-width:var(--rt-side-menu-sub-menu-held-width)}:host .rtui-sub-side-menu--pinned{position:relative;left:0;width:0;height:100%;flex:0 0 auto}:host .rtui-sub-side-menu--pinned.rtui-sub-side-menu--opened{width:var(--rt-side-menu-sub-menu-shown-width)}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content{box-shadow:none}:host .rtui-sub-side-menu--pinned .rtui-sub-side-menu-content__list{animation:none;opacity:1}:host .rtui-sub-side-menu .rtui-sub-side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:var(--rt-spacing-8);gap:var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search{min-width:0;flex:1 1 auto;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-sub-side-menu .rtui-sub-side-menu-head__pin{flex:0 0 auto}:host .rtui-side-menu-search{width:100%;margin:var(--rt-spacing-8) 0;--mat-form-field-outlined-container-shape: var(--rt-radius-xl);--mat-form-field-container-height: var(--rt-side-menu-sub-menu-search-height);--mat-form-field-container-vertical-padding: var(--rt-spacing-8)}:host .rtui-side-menu-search::ng-deep .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 var(--rt-spacing-4) 0 var(--rt-spacing-12)}:host .rtui-side-menu-empty{padding:var(--rt-spacing-16);color:var(--rt-text-base-secondary);font-size:var(--rt-font-size-xs)}@keyframes fade-in-animation{to{opacity:1}}\n"] }]
         }], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
                             read: TemplateRef,
                         }, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
@@ -1401,6 +1401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 class RtAsideService {
     #overlay = inject(Overlay);
     #router = inject(Router);
+    #uiConfig = inject(RT_UI_CONFIG);
     #destroyRef = inject(DestroyRef);
     /** Источник открытий: метод толкает сюда поток закрытия новой панели, и больше ничего. */
     #closesSource = new Subject();
@@ -1481,7 +1482,10 @@ class RtAsideService {
      */
     #closesOf(overlayRef, config) {
         const backdrop$ = config.closeOnBackdropClick === false ? EMPTY : overlayRef.backdropClick();
-        const escape$ = config.closeOnEscape
+        // Довод вызова сильнее настройки приложения: порядок разрешения у кита один — довод
+        // вызова, затем настройка приложения, затем умолчание кита.
+        const closeOnEscape = config.closeOnEscape ?? this.#uiConfig.components?.aside?.closeOnEscape ?? false;
+        const escape$ = closeOnEscape
             ? overlayRef.keydownEvents().pipe(filter((keyEvent) => keyEvent.key === 'Escape'))
             : EMPTY;
         return merge(backdrop$, escape$);