@rt-tools/ui-kit 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1228,7 +1228,7 @@ class RtuiSideMenuComponent {
|
|
|
1228
1228
|
return width > 0 ? width : SUB_MENU_WIDTH_MIN;
|
|
1229
1229
|
}
|
|
1230
1230
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RtuiSideMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1231
|
-
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\n \u0446\u0432\u0435\u0442\u043D\u044B\u043C \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: \u0432\u0438\u0434 \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434\n `variant`. \u0417\u0430\u043B\u0438\u0432\u043A\u043E\u0439 \u0441\u0430\u043C\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u044D\u0442\u043E \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u2014 \u0435\u0451 \u0432\u0435\u0434\u0451\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0432\u043E\u043B\u0435\u043D \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\n \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440, \u0438 \u0442\u043E\u0433\u0434\u0430 \u043E\u0431\u0430 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u044F \u0440\u0438\u0441\u0443\u044E\u0442\u0441\u044F \u043E\u0434\u043D\u0438\u043C \u0433\u043B\u0438\u0444\u043E\u043C.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\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()) {\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: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441\n \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);--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))}: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{position:fixed;z-index:3;left:calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width) - .25rem);width:.25rem;cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:hover{background-color:var(--rt-border-neutral-default)}: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:var(--rt-side-menu-sub-menu-shown-width);height:100%;flex:0 0 auto}: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:
|
|
1231
|
+
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\n \u0446\u0432\u0435\u0442\u043D\u044B\u043C \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: \u0432\u0438\u0434 \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434\n `variant`. \u0417\u0430\u043B\u0438\u0432\u043A\u043E\u0439 \u0441\u0430\u043C\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u044D\u0442\u043E \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u2014 \u0435\u0451 \u0432\u0435\u0434\u0451\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0432\u043E\u043B\u0435\u043D \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\n \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440, \u0438 \u0442\u043E\u0433\u0434\u0430 \u043E\u0431\u0430 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u044F \u0440\u0438\u0441\u0443\u044E\u0442\u0441\u044F \u043E\u0434\u043D\u0438\u043C \u0433\u043B\u0438\u0444\u043E\u043C.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\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()) {\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: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441\n \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:var(--rt-side-menu-sub-menu-shown-width);height:100%;flex:0 0 auto}: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:
|
|
1232
1232
|
// directives
|
|
1233
1233
|
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:
|
|
1234
1234
|
// components
|
|
@@ -1270,7 +1270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1270
1270
|
RtuiButtonComponent,
|
|
1271
1271
|
RtuiClearButtonComponent,
|
|
1272
1272
|
RtuiSideMenuSubItemComponent,
|
|
1273
|
-
], 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\n \u0446\u0432\u0435\u0442\u043D\u044B\u043C \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: \u0432\u0438\u0434 \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434\n `variant`. \u0417\u0430\u043B\u0438\u0432\u043A\u043E\u0439 \u0441\u0430\u043C\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u044D\u0442\u043E \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u2014 \u0435\u0451 \u0432\u0435\u0434\u0451\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0432\u043E\u043B\u0435\u043D \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\n \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440, \u0438 \u0442\u043E\u0433\u0434\u0430 \u043E\u0431\u0430 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u044F \u0440\u0438\u0441\u0443\u044E\u0442\u0441\u044F \u043E\u0434\u043D\u0438\u043C \u0433\u043B\u0438\u0444\u043E\u043C.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\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()) {\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: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441\n \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);--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))}: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{position:fixed;z-index:3;left:calc(var(--rt-side-menu-base-width) + var(--rt-side-menu-sub-menu-shown-width) - .25rem);width:.25rem;cursor:col-resize;inset-block:0}:host .rtui-side-menu-resizer:hover{background-color:var(--rt-border-neutral-default)}: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:var(--rt-side-menu-sub-menu-shown-width);height:100%;flex:0 0 auto}: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"] }]
|
|
1273
|
+
], 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\n \u0446\u0432\u0435\u0442\u043D\u044B\u043C \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: \u0432\u0438\u0434 \u0432\u0435\u0434\u0451\u0442 \u0432\u0445\u043E\u0434\n `variant`. \u0417\u0430\u043B\u0438\u0432\u043A\u043E\u0439 \u0441\u0430\u043C\u043E\u0433\u043E \u0437\u043D\u0430\u0447\u043A\u0430 \u044D\u0442\u043E \u043D\u0435 \u043F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u2014 \u0435\u0451 \u0432\u0435\u0434\u0451\u0442 \u043E\u0441\u044C\n \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0433\u043E \u0448\u0440\u0438\u0444\u0442\u0430, \u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0432\u043E\u043B\u0435\u043D \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C\n \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438\u0439 \u043D\u0430\u0431\u043E\u0440, \u0438 \u0442\u043E\u0433\u0434\u0430 \u043E\u0431\u0430 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u044F \u0440\u0438\u0441\u0443\u044E\u0442\u0441\u044F \u043E\u0434\u043D\u0438\u043C \u0433\u043B\u0438\u0444\u043E\u043C.\n -->\n <rtui-button\n rtElem=\"pin\"\n type=\"icon\"\n icon=\"push_pin\"\n qa-dataid=\"side-menu-pin\"\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()) {\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: \u043D\u0435\u0437\u0430\u043A\u0440\u0435\u043F\u043B\u0451\u043D\u043D\u043E\u0435 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C \u0438 \u0443\u0445\u043E\u0434\u0438\u0442 \u0441\n \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:var(--rt-side-menu-sub-menu-shown-width);height:100%;flex:0 0 auto}: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"] }]
|
|
1274
1274
|
}], propDecorators: { headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuHeaderDirective), { ...{
|
|
1275
1275
|
read: TemplateRef,
|
|
1276
1276
|
}, isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtuiSideMenuFooterDirective), { ...{
|