@rt-tools/ui-kit-v2 0.38.0 → 0.39.0
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.
- package/fesm2022/rt-tools-ui-kit-v2-aside.mjs +43 -5
- package/fesm2022/rt-tools-ui-kit-v2-aside.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs +1 -0
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-data-list.mjs +5 -2
- package/fesm2022/rt-tools-ui-kit-v2-data-list.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-page-header.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-page-header.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-popover.mjs +22 -6
- package/fesm2022/rt-tools-ui-kit-v2-popover.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-profile-menu.mjs +9 -5
- package/fesm2022/rt-tools-ui-kit-v2-profile-menu.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +2 -1
- package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-table.mjs +3 -1
- package/fesm2022/rt-tools-ui-kit-v2-table.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs +342 -17
- package/fesm2022/rt-tools-ui-kit-v2-toolbar.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/aside/CONTEXT.md +4 -1
- package/src/lib/components/aside/header/rt-aside-header.component.scss +4 -1
- package/src/lib/components/popover/CONTEXT.md +3 -0
- package/src/lib/components/profile-menu/CONTEXT.md +4 -0
- package/src/lib/components/profile-menu/rt-profile-menu.component.scss +11 -0
- package/src/lib/components/tabs/CONTEXT.md +1 -0
- package/src/lib/components/toolbar/CONTEXT.md +21 -4
- package/src/lib/components/toolbar/filters-aside/rt-toolbar-filters-aside.component.scss +22 -0
- package/src/lib/components/toolbar/rt-toolbar.component.scss +12 -0
- package/types/rt-tools-ui-kit-v2-aside.d.ts +21 -2
- package/types/rt-tools-ui-kit-v2-core.d.ts +1 -0
- package/types/rt-tools-ui-kit-v2-popover.d.ts +3 -1
- package/types/rt-tools-ui-kit-v2-profile-menu.d.ts +6 -1
- package/types/rt-tools-ui-kit-v2-toolbar.d.ts +79 -2
|
@@ -612,7 +612,7 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
|
|
|
612
612
|
}
|
|
613
613
|
],
|
|
614
614
|
ngImport: i0,
|
|
615
|
-
template: "<ng-container rtBlock=\"rt-page-header\">\n <nav rtElem=\"nav\" #nav [attr.aria-label]=\"navAriaLabel()\">\n <ul rtElem=\"list\" role=\"list\" #list>\n @for (section of sections(); track section.id) {\n <li\n rtElem=\"item\"\n qa-dataid=\"header-nav-item\"\n [rtMod]=\"{ isOverflow: overflowIds().has(section.id) }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-hidden]=\"overflowIds().has(section.id) || null\"\n [attr.inert]=\"overflowIds().has(section.id) || null\">\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"link\"\n type=\"button\"\n qa-dataid=\"header-nav-trigger\"\n #groupPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n [rtMod]=\"{\n isActive: activeSectionIds().has(section.id),\n isOpen: groupPopover.isOpen(),\n }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"groupPopover.isOpen()\"\n [rtPopover]=\"submenuTpl\"\n (click)=\"groupPopover.open()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n <ng-template #submenuTpl>\n <div rtBlock=\"rt-page-header-submenu\" role=\"menu\" [style.--rt-nav-panel-columns]=\"section.columnCount\">\n @for (column of section.columns; track column.id) {\n <div rtElem=\"column\" qa-dataid=\"header-nav-column\" [attr.data-id]=\"column.id\">\n @for (group of column.groups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-subitem\"\n routerLinkActive=\"rt-page-header-submenu__link--is-active\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"groupPopover.close()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"\n 'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\n \">\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n routerLinkActive=\"rt-page-header__link--is-active\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button rtElem=\"link\" type=\"button\" [rtMod]=\"{ disabled: true }\" [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button rtElem=\"link\" type=\"button\" (click)=\"onItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n </li>\n }\n <li\n rtElem=\"item\"\n #moreItem\n [rtMod]=\"{ isOverflow: !moreShown() }\"\n [attr.aria-hidden]=\"!moreShown() || null\"\n [attr.inert]=\"!moreShown() || null\">\n <rt-page-header-more [sections]=\"moreSections()\" [active]=\"moreActive()\" (itemClick)=\"onItemClick($event)\" />\n </li>\n </ul>\n </nav>\n\n <button\n rtElem=\"burger\"\n type=\"button\"\n qa-dataid=\"header-nav-burger\"\n #mobileNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n rtPopoverBackdropClass=\"rt-page-header-mobile-backdrop\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [rtMod]=\"{ isOpen: mobileNavPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"mobileNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon rtElem=\"burger-icon\" name=\"bars\" size=\"md\" />\n </button>\n\n <!--\n Сжатая полоса стоит в разметке всегда, как и узкая: показывает её модификатор хоста.\n Слева стопка кругов — «ещё» поверх остальных, — дальше три слота потребителя.\n -->\n <div rtElem=\"compact\" qa-dataid=\"header-compact\">\n <div rtElem=\"compact-stack\">\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-more\"\n #compactNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"10\"\n [rtMod]=\"{ more: true, isOpen: compactNavPopover.isOpen() }\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"compactNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon name=\"ellipsis-h\" size=\"sm\" />\n </button>\n @for (section of compactSections(); track section.id; let index = $index) {\n @if (section.kind === EntryKind.Link) {\n <a\n rtElem=\"compact-circle\"\n qa-dataid=\"header-compact-section\"\n routerLinkActive=\"rt-page-header__compact-circle--is-active\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n [rtTooltip]=\"section.label\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else {\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-section\"\n [rtMod]=\"{ isActive: activeSectionIds().has(section.id), disabled: section.disabled }\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [disabled]=\"section.disabled\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [rtTooltip]=\"section.label\"\n (click)=\"onCompactSectionClick(section)\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ left: true }\"><ng-content select=\"[rtCompactLeft]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ center: true }\"><ng-content select=\"[rtCompactCenter]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ right: true }\"><ng-content select=\"[rtCompactRight]\" /></div>\n </div>\n\n <ng-template #mobileNavTpl>\n <div rtBlock=\"rt-page-header-mobile\" role=\"menu\">\n @for (section of sections(); track section.id) {\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"section\"\n type=\"button\"\n qa-dataid=\"header-nav-mobile-trigger\"\n [rtMod]=\"{\n isExpanded: expandedSectionIds().has(section.id),\n isActive: activeSectionIds().has(section.id),\n }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-expanded]=\"expandedSectionIds().has(section.id)\"\n (click)=\"toggleSection(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n @if (expandedSectionIds().has(section.id)) {\n <div rtElem=\"children\">\n @for (group of section.panelGroups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-mobile-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true, disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onMobileItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [attr.data-id]=\"section.id\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [attr.data-id]=\"section.id\"\n (click)=\"onMobileItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n }\n </div>\n </ng-template>\n\n <ng-content select=\"[rtHeaderBell]\" />\n\n @if (user(); as u) {\n @if (userMenu(); as menuTpl) {\n <!--\n Меню профиля открывается наведением, как и разделы: весь верхний\n ряд ведёт себя одинаково. Нажатие остаётся запасным путём для\n касания, а переход курсора на список языков панель переживает —\n вложенный оверлей за уход наружу не считается. На узком экране меню\n стоит на той же подложке, что меню разделов из бургера.\n -->\n <button\n rtElem=\"user\"\n type=\"button\"\n qa-dataid=\"header-user-menu\"\n #userPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverAlign=\"end\"\n rtPopoverOffsetY=\"14\"\n [rtPopoverBackdropClass]=\"userMenuBackdropClass()\"\n [rtMod]=\"{ isOpen: userPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"userPopover.isOpen()\"\n [rtPopover]=\"menuTpl\"\n (click)=\"userPopover.open()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n } @else {\n <button rtElem=\"user\" type=\"button\" (click)=\"onUserClick()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n }\n }\n</ng-container>\n",
|
|
615
|
+
template: "<ng-container rtBlock=\"rt-page-header\">\n <nav rtElem=\"nav\" #nav [attr.aria-label]=\"navAriaLabel()\">\n <ul rtElem=\"list\" role=\"list\" #list>\n @for (section of sections(); track section.id) {\n <li\n rtElem=\"item\"\n qa-dataid=\"header-nav-item\"\n [rtMod]=\"{ isOverflow: overflowIds().has(section.id) }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-hidden]=\"overflowIds().has(section.id) || null\"\n [attr.inert]=\"overflowIds().has(section.id) || null\">\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"link\"\n type=\"button\"\n qa-dataid=\"header-nav-trigger\"\n #groupPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n [rtMod]=\"{\n isActive: activeSectionIds().has(section.id),\n isOpen: groupPopover.isOpen(),\n }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"groupPopover.isOpen()\"\n [rtPopover]=\"submenuTpl\"\n (click)=\"groupPopover.open()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n <ng-template #submenuTpl>\n <div rtBlock=\"rt-page-header-submenu\" role=\"menu\" [style.--rt-nav-panel-columns]=\"section.columnCount\">\n @for (column of section.columns; track column.id) {\n <div rtElem=\"column\" qa-dataid=\"header-nav-column\" [attr.data-id]=\"column.id\">\n @for (group of column.groups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-subitem\"\n routerLinkActive=\"rt-page-header-submenu__link--is-active\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"groupPopover.close()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"\n 'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\n \">\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n routerLinkActive=\"rt-page-header__link--is-active\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button rtElem=\"link\" type=\"button\" [rtMod]=\"{ disabled: true }\" [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button rtElem=\"link\" type=\"button\" (click)=\"onItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n </li>\n }\n <li\n rtElem=\"item\"\n #moreItem\n [rtMod]=\"{ isOverflow: !moreShown() }\"\n [attr.aria-hidden]=\"!moreShown() || null\"\n [attr.inert]=\"!moreShown() || null\">\n <rt-page-header-more [sections]=\"moreSections()\" [active]=\"moreActive()\" (itemClick)=\"onItemClick($event)\" />\n </li>\n </ul>\n </nav>\n\n <button\n rtElem=\"burger\"\n type=\"button\"\n qa-dataid=\"header-nav-burger\"\n #mobileNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n rtPopoverBackdropClass=\"rt-page-header-mobile-backdrop\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [rtMod]=\"{ isOpen: mobileNavPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"mobileNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon rtElem=\"burger-icon\" name=\"bars\" size=\"md\" />\n </button>\n\n <!--\n Сжатая полоса стоит в разметке всегда, как и узкая: показывает её модификатор хоста.\n Слева стопка кругов — «ещё» поверх остальных, — дальше три слота потребителя.\n -->\n <div rtElem=\"compact\" qa-dataid=\"header-compact\">\n <div rtElem=\"compact-stack\">\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-more\"\n #compactNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"10\"\n [rtMod]=\"{ more: true, isOpen: compactNavPopover.isOpen() }\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"compactNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon name=\"ellipsis-h\" size=\"sm\" />\n </button>\n @for (section of compactSections(); track section.id; let index = $index) {\n @if (section.kind === EntryKind.Link) {\n <a\n rtElem=\"compact-circle\"\n qa-dataid=\"header-compact-section\"\n routerLinkActive=\"rt-page-header__compact-circle--is-active\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n [rtTooltip]=\"section.label\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else {\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-section\"\n [rtMod]=\"{ isActive: activeSectionIds().has(section.id), disabled: section.disabled }\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [disabled]=\"section.disabled\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [rtTooltip]=\"section.label\"\n (click)=\"onCompactSectionClick(section)\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ left: true }\"><ng-content select=\"[rtCompactLeft]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ center: true }\"><ng-content select=\"[rtCompactCenter]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ right: true }\"><ng-content select=\"[rtCompactRight]\" /></div>\n </div>\n\n <ng-template #mobileNavTpl>\n <div rtBlock=\"rt-page-header-mobile\" role=\"menu\">\n @for (section of sections(); track section.id) {\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"section\"\n type=\"button\"\n qa-dataid=\"header-nav-mobile-trigger\"\n [rtMod]=\"{\n isExpanded: expandedSectionIds().has(section.id),\n isActive: activeSectionIds().has(section.id),\n }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-expanded]=\"expandedSectionIds().has(section.id)\"\n (click)=\"toggleSection(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n @if (expandedSectionIds().has(section.id)) {\n <div rtElem=\"children\">\n @for (group of section.panelGroups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-mobile-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true, disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onMobileItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [attr.data-id]=\"section.id\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [attr.data-id]=\"section.id\"\n (click)=\"onMobileItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n }\n </div>\n </ng-template>\n\n <ng-content select=\"[rtHeaderBell]\" />\n\n @if (user(); as u) {\n @if (userMenu(); as menuTpl) {\n <!--\n Меню профиля открывается наведением, как и разделы: весь верхний\n ряд ведёт себя одинаково. Нажатие остаётся запасным путём для\n касания, а переход курсора на список языков панель переживает —\n вложенный оверлей за уход наружу не считается. На узком экране меню\n стоит на той же подложке, что меню разделов из бургера.\n -->\n <button\n rtElem=\"user\"\n type=\"button\"\n qa-dataid=\"header-user-menu\"\n #userPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverAlign=\"end\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n [rtPopoverBackdropClass]=\"userMenuBackdropClass()\"\n [rtMod]=\"{ isOpen: userPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"userPopover.isOpen()\"\n [rtPopover]=\"menuTpl\"\n (click)=\"userPopover.open()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n } @else {\n <button rtElem=\"user\" type=\"button\" (click)=\"onUserClick()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n }\n }\n</ng-container>\n",
|
|
616
616
|
styles: [
|
|
617
617
|
"@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header{--rt-nav-header-radius: var(--rt-radius-md);--rt-nav-header-transition-duration: var(--rt-duration-fast);--rt-nav-item-radius: var(--rt-radius-md);--rt-nav-item-border-width: var(--rt-border-width-thin);--rt-nav-burger-radius: var(--rt-radius-ms);--rt-nav-marker-radius: var(--rt-radius-full);--rt-nav-user-avatar-radius: var(--rt-radius-full);--rt-nav-user-avatar-border-width: var(--rt-border-width-thin);display:flex;width:auto;min-height:48px;box-sizing:border-box;align-items:center;justify-content:space-between;padding:var(--rt-nav-header-padding);border-radius:var(--rt-nav-header-radius);background-color:var(--rt-page-header-bg, var(--rt-nav-header-color-bg));color:var(--rt-nav-item-color);gap:var(--rt-space-2)}.rt-page-header__nav{min-width:0;flex:1 1 0}.rt-page-header__list{position:relative;display:flex;flex-flow:row wrap;align-items:center;padding:0;margin:0;gap:var(--rt-nav-item-gap);list-style:none}.rt-page-header__item{display:inline-flex;flex-shrink:0;align-items:center;border:var(--rt-nav-item-border-width) solid var(--rt-nav-item-color-border);border-radius:var(--rt-nav-item-radius);background-color:var(--rt-nav-item-color-bg)}.rt-page-header__item--is-overflow{position:absolute;top:0;left:0;pointer-events:none;visibility:hidden}.rt-page-header__disabled-slot{display:inline-flex;flex-direction:column;align-items:stretch}.rt-page-header__link{position:relative;display:inline-flex;min-height:var(--rt-nav-item-height);align-items:center;padding:var(--rt-nav-item-padding);border:0;border-radius:var(--rt-nav-item-radius);background-color:transparent;color:var(--rt-nav-item-color);cursor:pointer;font-size:var(--rt-nav-item-font-size);font-weight:var(--rt-nav-item-font-weight);gap:var(--rt-nav-item-content-gap);line-height:var(--rt-nav-item-line-height);text-decoration:none;transition:color var(--rt-nav-header-transition-duration) linear;white-space:nowrap}.rt-page-header__link:hover{color:var(--rt-nav-item-color-hover)}.rt-page-header__link:focus{outline:none}.rt-page-header__link:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__link--is-active{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color)}.rt-page-header__link--is-open{color:var(--rt-nav-item-color-hover)}.rt-page-header__link--disabled,.rt-page-header__link:disabled,.rt-page-header__link[aria-disabled=true]{background-color:transparent;color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header__link--disabled:hover,.rt-page-header__link:disabled:hover,.rt-page-header__link[aria-disabled=true]:hover{background-color:transparent}.rt-page-header__icon{flex-shrink:0}.rt-page-header__marker{width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);flex-shrink:0;border-radius:var(--rt-nav-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-header__caret{display:inline-flex;flex-shrink:0;color:var(--rt-nav-item-color-caret)}.rt-page-header__burger{display:none;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-2);border:0;border-radius:var(--rt-nav-burger-radius);background-color:transparent;color:var(--rt-nav-item-color);cursor:pointer;transition:color var(--rt-nav-header-transition-duration) linear}.rt-page-header__burger:hover{color:var(--rt-nav-item-color-hover)}.rt-page-header__burger:active{color:var(--rt-nav-item-color-pressed)}.rt-page-header__burger:focus{outline:none}.rt-page-header__burger:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__burger--is-open{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-header__burger-icon{flex-shrink:0}@container rt-place (width <= 1380px){.rt-page-header__link .rt-page-header__icon{display:none}}@media(width<=1380px){:where(html:not(:has(.rt-container))) .rt-page-header__link .rt-page-header__icon{display:none}}@container rt-place (width <= 1080px){.rt-page-header__nav{display:none}.rt-page-header__burger{display:inline-flex}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-page-header__nav{display:none}:where(html:not(:has(.rt-container))) .rt-page-header__burger{display:inline-flex}}.rt-page-header__user{display:inline-flex;min-height:var(--rt-nav-item-height);align-items:center;padding:var(--rt-nav-item-padding);border:0;border-radius:var(--rt-nav-item-radius);background-color:transparent;color:var(--rt-nav-item-color);cursor:pointer;font-size:var(--rt-nav-item-font-size);font-weight:var(--rt-nav-item-font-weight);gap:var(--rt-nav-item-content-gap);line-height:var(--rt-leading-tight);transition:background-color var(--rt-nav-header-transition-duration) linear}.rt-page-header__user:hover,.rt-page-header__user:active{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-header__user:focus{outline:none}.rt-page-header__user:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__user-avatar{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;border:var(--rt-nav-user-avatar-border-width) solid var(--rt-nav-item-color-caret);border-radius:var(--rt-nav-user-avatar-radius);color:var(--rt-color-text-muted);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none)}.rt-page-header__user-name{white-space:nowrap}.rt-page-header__user-caret{display:inline-flex;flex-shrink:0;color:var(--rt-nav-item-color-caret)}.rt-page-header__user--is-open{background-color:var(--rt-nav-item-color-bg-active)}}\n",
|
|
618
618
|
"@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header-submenu{--rt-nav-panel-columns-width: calc(var(--rt-nav-panel-columns) * var(--rt-nav-panel-column-width));--rt-nav-panel-gaps-width: calc((var(--rt-nav-panel-columns) - 1) * var(--rt-nav-panel-column-gap));--rt-nav-panel-padding-width: calc(var(--rt-nav-panel-padding) + var(--rt-nav-panel-padding));--rt-nav-panel-radius: var(--rt-radius-md);--rt-nav-panel-border-width: var(--rt-border-width-thin);--rt-nav-panel-item-radius: var(--rt-radius-md);--rt-nav-panel-item-transition-duration: var(--rt-duration-fast);--rt-nav-marker-radius: var(--rt-radius-full);display:flex;width:calc(var(--rt-nav-panel-columns-width) + var(--rt-nav-panel-gaps-width) + var(--rt-nav-panel-padding-width));box-sizing:border-box;align-items:flex-start;padding:var(--rt-nav-panel-padding-y) var(--rt-nav-panel-padding);border:var(--rt-nav-panel-border-width) solid var(--rt-nav-panel-color-border);border-radius:var(--rt-nav-panel-radius);background-color:var(--rt-nav-panel-color-bg);box-shadow:var(--rt-nav-panel-shadow);color:var(--rt-nav-panel-item-color);font-size:var(--rt-nav-panel-item-font-size);font-weight:var(--rt-nav-panel-item-font-weight);gap:var(--rt-nav-panel-column-gap)}.rt-page-header-submenu__column{display:flex;min-width:0;flex:0 0 var(--rt-nav-panel-column-width);flex-direction:column;gap:var(--rt-nav-panel-group-gap)}.rt-page-header-submenu__group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rt-nav-panel-item-gap)}.rt-page-header-submenu__group-title{display:inline-flex;max-width:100%;min-height:var(--rt-nav-panel-item-height);align-items:center;padding:var(--rt-nav-panel-item-padding);color:var(--rt-nav-panel-group-color);cursor:default;font-size:var(--rt-nav-panel-group-font-size);font-weight:var(--rt-nav-panel-group-font-weight);gap:var(--rt-nav-panel-group-content-gap);line-height:var(--rt-leading-none)}.rt-page-header-submenu__group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-page-header-submenu__group-icon{flex-shrink:0}.rt-page-header-submenu__disabled-slot{display:inline-flex;max-width:100%;flex-direction:column;align-items:flex-start}.rt-page-header-submenu__link{display:inline-flex;max-width:100%;min-height:var(--rt-nav-panel-item-height);align-items:center;padding:var(--rt-nav-panel-item-padding);border:0;border-radius:var(--rt-nav-panel-item-radius);background-color:transparent;color:var(--rt-nav-panel-item-color);cursor:pointer;font-size:var(--rt-nav-panel-item-font-size);font-weight:var(--rt-nav-panel-item-font-weight);gap:var(--rt-nav-panel-item-content-gap);line-height:var(--rt-leading-none);text-align:left;text-decoration:none;transition:background-color var(--rt-nav-panel-item-transition-duration) linear,color var(--rt-nav-panel-item-transition-duration) linear;white-space:nowrap}.rt-page-header-submenu__link--is-active{background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-header-submenu__link:not(.rt-page-header-submenu__link--is-active):hover,.rt-page-header-submenu__link:not(.rt-page-header-submenu__link--is-active):active{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-header-submenu__link:focus{outline:none}.rt-page-header-submenu__link:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header-submenu__link--disabled,.rt-page-header-submenu__link:disabled,.rt-page-header-submenu__link[aria-disabled=true]{background-color:transparent;color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header-submenu__link--disabled:hover,.rt-page-header-submenu__link:disabled:hover,.rt-page-header-submenu__link[aria-disabled=true]:hover{background-color:transparent}.rt-page-header-submenu__label{overflow:hidden;text-overflow:ellipsis}.rt-page-header-submenu__marker{width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);flex-shrink:0;border-radius:var(--rt-nav-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-header-submenu__icon{flex-shrink:0}}\n",
|
|
@@ -764,7 +764,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
764
764
|
"[class.rt-page-header--sticky]": "stickyCompact()",
|
|
765
765
|
"[class.rt-page-header--is-compact]": "compact()"
|
|
766
766
|
},
|
|
767
|
-
template: "<ng-container rtBlock=\"rt-page-header\">\n <nav rtElem=\"nav\" #nav [attr.aria-label]=\"navAriaLabel()\">\n <ul rtElem=\"list\" role=\"list\" #list>\n @for (section of sections(); track section.id) {\n <li\n rtElem=\"item\"\n qa-dataid=\"header-nav-item\"\n [rtMod]=\"{ isOverflow: overflowIds().has(section.id) }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-hidden]=\"overflowIds().has(section.id) || null\"\n [attr.inert]=\"overflowIds().has(section.id) || null\">\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"link\"\n type=\"button\"\n qa-dataid=\"header-nav-trigger\"\n #groupPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n [rtMod]=\"{\n isActive: activeSectionIds().has(section.id),\n isOpen: groupPopover.isOpen(),\n }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"groupPopover.isOpen()\"\n [rtPopover]=\"submenuTpl\"\n (click)=\"groupPopover.open()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n <ng-template #submenuTpl>\n <div rtBlock=\"rt-page-header-submenu\" role=\"menu\" [style.--rt-nav-panel-columns]=\"section.columnCount\">\n @for (column of section.columns; track column.id) {\n <div rtElem=\"column\" qa-dataid=\"header-nav-column\" [attr.data-id]=\"column.id\">\n @for (group of column.groups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-subitem\"\n routerLinkActive=\"rt-page-header-submenu__link--is-active\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"groupPopover.close()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"\n 'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\n \">\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n routerLinkActive=\"rt-page-header__link--is-active\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button rtElem=\"link\" type=\"button\" [rtMod]=\"{ disabled: true }\" [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button rtElem=\"link\" type=\"button\" (click)=\"onItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n </li>\n }\n <li\n rtElem=\"item\"\n #moreItem\n [rtMod]=\"{ isOverflow: !moreShown() }\"\n [attr.aria-hidden]=\"!moreShown() || null\"\n [attr.inert]=\"!moreShown() || null\">\n <rt-page-header-more [sections]=\"moreSections()\" [active]=\"moreActive()\" (itemClick)=\"onItemClick($event)\" />\n </li>\n </ul>\n </nav>\n\n <button\n rtElem=\"burger\"\n type=\"button\"\n qa-dataid=\"header-nav-burger\"\n #mobileNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n rtPopoverBackdropClass=\"rt-page-header-mobile-backdrop\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [rtMod]=\"{ isOpen: mobileNavPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"mobileNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon rtElem=\"burger-icon\" name=\"bars\" size=\"md\" />\n </button>\n\n <!--\n Сжатая полоса стоит в разметке всегда, как и узкая: показывает её модификатор хоста.\n Слева стопка кругов — «ещё» поверх остальных, — дальше три слота потребителя.\n -->\n <div rtElem=\"compact\" qa-dataid=\"header-compact\">\n <div rtElem=\"compact-stack\">\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-more\"\n #compactNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"10\"\n [rtMod]=\"{ more: true, isOpen: compactNavPopover.isOpen() }\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"compactNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon name=\"ellipsis-h\" size=\"sm\" />\n </button>\n @for (section of compactSections(); track section.id; let index = $index) {\n @if (section.kind === EntryKind.Link) {\n <a\n rtElem=\"compact-circle\"\n qa-dataid=\"header-compact-section\"\n routerLinkActive=\"rt-page-header__compact-circle--is-active\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n [rtTooltip]=\"section.label\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else {\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-section\"\n [rtMod]=\"{ isActive: activeSectionIds().has(section.id), disabled: section.disabled }\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [disabled]=\"section.disabled\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [rtTooltip]=\"section.label\"\n (click)=\"onCompactSectionClick(section)\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ left: true }\"><ng-content select=\"[rtCompactLeft]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ center: true }\"><ng-content select=\"[rtCompactCenter]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ right: true }\"><ng-content select=\"[rtCompactRight]\" /></div>\n </div>\n\n <ng-template #mobileNavTpl>\n <div rtBlock=\"rt-page-header-mobile\" role=\"menu\">\n @for (section of sections(); track section.id) {\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"section\"\n type=\"button\"\n qa-dataid=\"header-nav-mobile-trigger\"\n [rtMod]=\"{\n isExpanded: expandedSectionIds().has(section.id),\n isActive: activeSectionIds().has(section.id),\n }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-expanded]=\"expandedSectionIds().has(section.id)\"\n (click)=\"toggleSection(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n @if (expandedSectionIds().has(section.id)) {\n <div rtElem=\"children\">\n @for (group of section.panelGroups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-mobile-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true, disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onMobileItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [attr.data-id]=\"section.id\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [attr.data-id]=\"section.id\"\n (click)=\"onMobileItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n }\n </div>\n </ng-template>\n\n <ng-content select=\"[rtHeaderBell]\" />\n\n @if (user(); as u) {\n @if (userMenu(); as menuTpl) {\n <!--\n Меню профиля открывается наведением, как и разделы: весь верхний\n ряд ведёт себя одинаково. Нажатие остаётся запасным путём для\n касания, а переход курсора на список языков панель переживает —\n вложенный оверлей за уход наружу не считается. На узком экране меню\n стоит на той же подложке, что меню разделов из бургера.\n -->\n <button\n rtElem=\"user\"\n type=\"button\"\n qa-dataid=\"header-user-menu\"\n #userPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverAlign=\"end\"\n rtPopoverOffsetY=\"14\"\n [rtPopoverBackdropClass]=\"userMenuBackdropClass()\"\n [rtMod]=\"{ isOpen: userPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"userPopover.isOpen()\"\n [rtPopover]=\"menuTpl\"\n (click)=\"userPopover.open()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n } @else {\n <button rtElem=\"user\" type=\"button\" (click)=\"onUserClick()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n }\n }\n</ng-container>\n",
|
|
767
|
+
template: "<ng-container rtBlock=\"rt-page-header\">\n <nav rtElem=\"nav\" #nav [attr.aria-label]=\"navAriaLabel()\">\n <ul rtElem=\"list\" role=\"list\" #list>\n @for (section of sections(); track section.id) {\n <li\n rtElem=\"item\"\n qa-dataid=\"header-nav-item\"\n [rtMod]=\"{ isOverflow: overflowIds().has(section.id) }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-hidden]=\"overflowIds().has(section.id) || null\"\n [attr.inert]=\"overflowIds().has(section.id) || null\">\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"link\"\n type=\"button\"\n qa-dataid=\"header-nav-trigger\"\n #groupPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n [rtMod]=\"{\n isActive: activeSectionIds().has(section.id),\n isOpen: groupPopover.isOpen(),\n }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"groupPopover.isOpen()\"\n [rtPopover]=\"submenuTpl\"\n (click)=\"groupPopover.open()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n <ng-template #submenuTpl>\n <div rtBlock=\"rt-page-header-submenu\" role=\"menu\" [style.--rt-nav-panel-columns]=\"section.columnCount\">\n @for (column of section.columns; track column.id) {\n <div rtElem=\"column\" qa-dataid=\"header-nav-column\" [attr.data-id]=\"column.id\">\n @for (group of column.groups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-subitem\"\n routerLinkActive=\"rt-page-header-submenu__link--is-active\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"groupPopover.close()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"\n 'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\n \">\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n role=\"menuitem\"\n type=\"button\"\n qa-dataid=\"header-nav-subitem\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n </ng-template>\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n routerLinkActive=\"rt-page-header__link--is-active\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button rtElem=\"link\" type=\"button\" [rtMod]=\"{ disabled: true }\" [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button rtElem=\"link\" type=\"button\" (click)=\"onItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n </li>\n }\n <li\n rtElem=\"item\"\n #moreItem\n [rtMod]=\"{ isOverflow: !moreShown() }\"\n [attr.aria-hidden]=\"!moreShown() || null\"\n [attr.inert]=\"!moreShown() || null\">\n <rt-page-header-more [sections]=\"moreSections()\" [active]=\"moreActive()\" (itemClick)=\"onItemClick($event)\" />\n </li>\n </ul>\n </nav>\n\n <button\n rtElem=\"burger\"\n type=\"button\"\n qa-dataid=\"header-nav-burger\"\n #mobileNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n rtPopoverBackdropClass=\"rt-page-header-mobile-backdrop\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [rtMod]=\"{ isOpen: mobileNavPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"mobileNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon rtElem=\"burger-icon\" name=\"bars\" size=\"md\" />\n </button>\n\n <!--\n Сжатая полоса стоит в разметке всегда, как и узкая: показывает её модификатор хоста.\n Слева стопка кругов — «ещё» поверх остальных, — дальше три слота потребителя.\n -->\n <div rtElem=\"compact\" qa-dataid=\"header-compact\">\n <div rtElem=\"compact-stack\">\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-more\"\n #compactNavPopover=\"rtPopover\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"10\"\n [rtMod]=\"{ more: true, isOpen: compactNavPopover.isOpen() }\"\n [attr.aria-label]=\"t().uiNavMenu\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"compactNavPopover.isOpen()\"\n [rtPopover]=\"mobileNavTpl\">\n <rt-icon name=\"ellipsis-h\" size=\"sm\" />\n </button>\n @for (section of compactSections(); track section.id; let index = $index) {\n @if (section.kind === EntryKind.Link) {\n <a\n rtElem=\"compact-circle\"\n qa-dataid=\"header-compact-section\"\n routerLinkActive=\"rt-page-header__compact-circle--is-active\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n [rtTooltip]=\"section.label\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else {\n <button\n rtElem=\"compact-circle\"\n type=\"button\"\n qa-dataid=\"header-compact-section\"\n [rtMod]=\"{ isActive: activeSectionIds().has(section.id), disabled: section.disabled }\"\n [style.--rt-nav-compact-index]=\"index + 1\"\n [disabled]=\"section.disabled\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"section.label\"\n [rtTooltip]=\"section.label\"\n (click)=\"onCompactSectionClick(section)\">\n @if (section.icon; as icon) {\n <rt-icon size=\"sm\" [name]=\"icon\" />\n }\n @if (section.unread) {\n <span rtElem=\"compact-marker\" role=\"img\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ left: true }\"><ng-content select=\"[rtCompactLeft]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ center: true }\"><ng-content select=\"[rtCompactCenter]\" /></div>\n <div rtElem=\"compact-slot\" [rtMod]=\"{ right: true }\"><ng-content select=\"[rtCompactRight]\" /></div>\n </div>\n\n <ng-template #mobileNavTpl>\n <div rtBlock=\"rt-page-header-mobile\" role=\"menu\">\n @for (section of sections(); track section.id) {\n @switch (section.kind) {\n @case (EntryKind.Panel) {\n <button\n rtElem=\"section\"\n type=\"button\"\n qa-dataid=\"header-nav-mobile-trigger\"\n [rtMod]=\"{\n isExpanded: expandedSectionIds().has(section.id),\n isActive: activeSectionIds().has(section.id),\n }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-expanded]=\"expandedSectionIds().has(section.id)\"\n (click)=\"toggleSection(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n <span rtElem=\"caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n @if (expandedSectionIds().has(section.id)) {\n <div rtElem=\"children\">\n @for (group of section.panelGroups; track group.id) {\n <div rtElem=\"group\" role=\"group\" [attr.aria-label]=\"group.label || null\">\n @if (group.label) {\n <div rtElem=\"group-title\" qa-dataid=\"header-nav-mobile-group\" [attr.data-id]=\"group.id\">\n @if (group.icon) {\n <rt-icon rtElem=\"group-icon\" size=\"xs\" [name]=\"group.icon\" />\n }\n <span rtElem=\"group-label\">{{ group.label }}</span>\n </div>\n }\n @for (entry of group.items; track entry.id) {\n @if (entry.kind === EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n [routerLink]=\"entry.route\"\n [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n } @else if (entry.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true, disabled: true }\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-disabled]=\"true\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ child: true }\"\n [attr.data-id]=\"entry.id\"\n (click)=\"onMobileItemClick(entry.id)\">\n <span rtElem=\"label\">{{ entry.label }}</span>\n @if (entry.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"entry.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n </div>\n }\n </div>\n }\n }\n @case (EntryKind.Link) {\n <a\n rtElem=\"link\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n routerLinkActive=\"rt-page-header-mobile__link--is-active\"\n [attr.data-id]=\"section.id\"\n [routerLink]=\"section.route\"\n [routerLinkActiveOptions]=\"{ exact: section.routerLinkActiveExact }\"\n (click)=\"closeNavPanels()\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </a>\n }\n @default {\n @if (section.disabled) {\n <span\n rtElem=\"disabled-slot\"\n role=\"none\"\n [rtTooltip]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: section.label }\">\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [rtMod]=\"{ disabled: true }\"\n [attr.data-id]=\"section.id\"\n [attr.aria-disabled]=\"true\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n </button>\n </span>\n } @else {\n <button\n rtElem=\"link\"\n type=\"button\"\n role=\"menuitem\"\n qa-dataid=\"header-nav-mobile-item\"\n [attr.data-id]=\"section.id\"\n (click)=\"onMobileItemClick(section.id)\">\n @if (section.icon) {\n <rt-icon rtElem=\"icon\" size=\"sm\" [name]=\"section.icon\" />\n }\n <span rtElem=\"label\">{{ section.label }}</span>\n @if (section.unread) {\n <span\n rtElem=\"marker\"\n role=\"img\"\n qa-dataid=\"header-nav-marker\"\n [attr.data-id]=\"section.id\"\n [attr.aria-label]=\"t().uiNavUnread\"></span>\n }\n </button>\n }\n }\n }\n }\n </div>\n </ng-template>\n\n <ng-content select=\"[rtHeaderBell]\" />\n\n @if (user(); as u) {\n @if (userMenu(); as menuTpl) {\n <!--\n Меню профиля открывается наведением, как и разделы: весь верхний\n ряд ведёт себя одинаково. Нажатие остаётся запасным путём для\n касания, а переход курсора на список языков панель переживает —\n вложенный оверлей за уход наружу не считается. На узком экране меню\n стоит на той же подложке, что меню разделов из бургера.\n -->\n <button\n rtElem=\"user\"\n type=\"button\"\n qa-dataid=\"header-user-menu\"\n #userPopover=\"rtPopover\"\n rtPopoverTrigger=\"hover\"\n rtPopoverAlign=\"end\"\n rtPopoverFitViewport\n rtPopoverOffsetY=\"14\"\n [rtPopoverBackdropClass]=\"userMenuBackdropClass()\"\n [rtMod]=\"{ isOpen: userPopover.isOpen() }\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-expanded]=\"userPopover.isOpen()\"\n [rtPopover]=\"menuTpl\"\n (click)=\"userPopover.open()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n } @else {\n <button rtElem=\"user\" type=\"button\" (click)=\"onUserClick()\">\n <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ userAvatar() }}</span>\n <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ u.name }}</span>\n <span rtElem=\"user-caret\" aria-hidden=\"true\">\n <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n </span>\n </button>\n }\n }\n</ng-container>\n",
|
|
768
768
|
styles: [
|
|
769
769
|
"@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header{--rt-nav-header-radius: var(--rt-radius-md);--rt-nav-header-transition-duration: var(--rt-duration-fast);--rt-nav-item-radius: var(--rt-radius-md);--rt-nav-item-border-width: var(--rt-border-width-thin);--rt-nav-burger-radius: var(--rt-radius-ms);--rt-nav-marker-radius: var(--rt-radius-full);--rt-nav-user-avatar-radius: var(--rt-radius-full);--rt-nav-user-avatar-border-width: var(--rt-border-width-thin);display:flex;width:auto;min-height:48px;box-sizing:border-box;align-items:center;justify-content:space-between;padding:var(--rt-nav-header-padding);border-radius:var(--rt-nav-header-radius);background-color:var(--rt-page-header-bg, var(--rt-nav-header-color-bg));color:var(--rt-nav-item-color);gap:var(--rt-space-2)}.rt-page-header__nav{min-width:0;flex:1 1 0}.rt-page-header__list{position:relative;display:flex;flex-flow:row wrap;align-items:center;padding:0;margin:0;gap:var(--rt-nav-item-gap);list-style:none}.rt-page-header__item{display:inline-flex;flex-shrink:0;align-items:center;border:var(--rt-nav-item-border-width) solid var(--rt-nav-item-color-border);border-radius:var(--rt-nav-item-radius);background-color:var(--rt-nav-item-color-bg)}.rt-page-header__item--is-overflow{position:absolute;top:0;left:0;pointer-events:none;visibility:hidden}.rt-page-header__disabled-slot{display:inline-flex;flex-direction:column;align-items:stretch}.rt-page-header__link{position:relative;display:inline-flex;min-height:var(--rt-nav-item-height);align-items:center;padding:var(--rt-nav-item-padding);border:0;border-radius:var(--rt-nav-item-radius);background-color:transparent;color:var(--rt-nav-item-color);cursor:pointer;font-size:var(--rt-nav-item-font-size);font-weight:var(--rt-nav-item-font-weight);gap:var(--rt-nav-item-content-gap);line-height:var(--rt-nav-item-line-height);text-decoration:none;transition:color var(--rt-nav-header-transition-duration) linear;white-space:nowrap}.rt-page-header__link:hover{color:var(--rt-nav-item-color-hover)}.rt-page-header__link:focus{outline:none}.rt-page-header__link:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__link--is-active{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color)}.rt-page-header__link--is-open{color:var(--rt-nav-item-color-hover)}.rt-page-header__link--disabled,.rt-page-header__link:disabled,.rt-page-header__link[aria-disabled=true]{background-color:transparent;color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header__link--disabled:hover,.rt-page-header__link:disabled:hover,.rt-page-header__link[aria-disabled=true]:hover{background-color:transparent}.rt-page-header__icon{flex-shrink:0}.rt-page-header__marker{width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);flex-shrink:0;border-radius:var(--rt-nav-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-header__caret{display:inline-flex;flex-shrink:0;color:var(--rt-nav-item-color-caret)}.rt-page-header__burger{display:none;flex-shrink:0;align-items:center;justify-content:center;padding:var(--rt-space-2);border:0;border-radius:var(--rt-nav-burger-radius);background-color:transparent;color:var(--rt-nav-item-color);cursor:pointer;transition:color var(--rt-nav-header-transition-duration) linear}.rt-page-header__burger:hover{color:var(--rt-nav-item-color-hover)}.rt-page-header__burger:active{color:var(--rt-nav-item-color-pressed)}.rt-page-header__burger:focus{outline:none}.rt-page-header__burger:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__burger--is-open{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-header__burger-icon{flex-shrink:0}@container rt-place (width <= 1380px){.rt-page-header__link .rt-page-header__icon{display:none}}@media(width<=1380px){:where(html:not(:has(.rt-container))) .rt-page-header__link .rt-page-header__icon{display:none}}@container rt-place (width <= 1080px){.rt-page-header__nav{display:none}.rt-page-header__burger{display:inline-flex}}@media(width<=1080px){:where(html:not(:has(.rt-container))) .rt-page-header__nav{display:none}:where(html:not(:has(.rt-container))) .rt-page-header__burger{display:inline-flex}}.rt-page-header__user{display:inline-flex;min-height:var(--rt-nav-item-height);align-items:center;padding:var(--rt-nav-item-padding);border:0;border-radius:var(--rt-nav-item-radius);background-color:transparent;color:var(--rt-nav-item-color);cursor:pointer;font-size:var(--rt-nav-item-font-size);font-weight:var(--rt-nav-item-font-weight);gap:var(--rt-nav-item-content-gap);line-height:var(--rt-leading-tight);transition:background-color var(--rt-nav-header-transition-duration) linear}.rt-page-header__user:hover,.rt-page-header__user:active{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-header__user:focus{outline:none}.rt-page-header__user:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__user-avatar{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;border:var(--rt-nav-user-avatar-border-width) solid var(--rt-nav-item-color-caret);border-radius:var(--rt-nav-user-avatar-radius);color:var(--rt-color-text-muted);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none)}.rt-page-header__user-name{white-space:nowrap}.rt-page-header__user-caret{display:inline-flex;flex-shrink:0;color:var(--rt-nav-item-color-caret)}.rt-page-header__user--is-open{background-color:var(--rt-nav-item-color-bg-active)}}\n",
|
|
770
770
|
"@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header-submenu{--rt-nav-panel-columns-width: calc(var(--rt-nav-panel-columns) * var(--rt-nav-panel-column-width));--rt-nav-panel-gaps-width: calc((var(--rt-nav-panel-columns) - 1) * var(--rt-nav-panel-column-gap));--rt-nav-panel-padding-width: calc(var(--rt-nav-panel-padding) + var(--rt-nav-panel-padding));--rt-nav-panel-radius: var(--rt-radius-md);--rt-nav-panel-border-width: var(--rt-border-width-thin);--rt-nav-panel-item-radius: var(--rt-radius-md);--rt-nav-panel-item-transition-duration: var(--rt-duration-fast);--rt-nav-marker-radius: var(--rt-radius-full);display:flex;width:calc(var(--rt-nav-panel-columns-width) + var(--rt-nav-panel-gaps-width) + var(--rt-nav-panel-padding-width));box-sizing:border-box;align-items:flex-start;padding:var(--rt-nav-panel-padding-y) var(--rt-nav-panel-padding);border:var(--rt-nav-panel-border-width) solid var(--rt-nav-panel-color-border);border-radius:var(--rt-nav-panel-radius);background-color:var(--rt-nav-panel-color-bg);box-shadow:var(--rt-nav-panel-shadow);color:var(--rt-nav-panel-item-color);font-size:var(--rt-nav-panel-item-font-size);font-weight:var(--rt-nav-panel-item-font-weight);gap:var(--rt-nav-panel-column-gap)}.rt-page-header-submenu__column{display:flex;min-width:0;flex:0 0 var(--rt-nav-panel-column-width);flex-direction:column;gap:var(--rt-nav-panel-group-gap)}.rt-page-header-submenu__group{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rt-nav-panel-item-gap)}.rt-page-header-submenu__group-title{display:inline-flex;max-width:100%;min-height:var(--rt-nav-panel-item-height);align-items:center;padding:var(--rt-nav-panel-item-padding);color:var(--rt-nav-panel-group-color);cursor:default;font-size:var(--rt-nav-panel-group-font-size);font-weight:var(--rt-nav-panel-group-font-weight);gap:var(--rt-nav-panel-group-content-gap);line-height:var(--rt-leading-none)}.rt-page-header-submenu__group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-page-header-submenu__group-icon{flex-shrink:0}.rt-page-header-submenu__disabled-slot{display:inline-flex;max-width:100%;flex-direction:column;align-items:flex-start}.rt-page-header-submenu__link{display:inline-flex;max-width:100%;min-height:var(--rt-nav-panel-item-height);align-items:center;padding:var(--rt-nav-panel-item-padding);border:0;border-radius:var(--rt-nav-panel-item-radius);background-color:transparent;color:var(--rt-nav-panel-item-color);cursor:pointer;font-size:var(--rt-nav-panel-item-font-size);font-weight:var(--rt-nav-panel-item-font-weight);gap:var(--rt-nav-panel-item-content-gap);line-height:var(--rt-leading-none);text-align:left;text-decoration:none;transition:background-color var(--rt-nav-panel-item-transition-duration) linear,color var(--rt-nav-panel-item-transition-duration) linear;white-space:nowrap}.rt-page-header-submenu__link--is-active{background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-header-submenu__link:not(.rt-page-header-submenu__link--is-active):hover,.rt-page-header-submenu__link:not(.rt-page-header-submenu__link--is-active):active{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-header-submenu__link:focus{outline:none}.rt-page-header-submenu__link:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header-submenu__link--disabled,.rt-page-header-submenu__link:disabled,.rt-page-header-submenu__link[aria-disabled=true]{background-color:transparent;color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header-submenu__link--disabled:hover,.rt-page-header-submenu__link:disabled:hover,.rt-page-header-submenu__link[aria-disabled=true]:hover{background-color:transparent}.rt-page-header-submenu__label{overflow:hidden;text-overflow:ellipsis}.rt-page-header-submenu__marker{width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);flex-shrink:0;border-radius:var(--rt-nav-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-header-submenu__icon{flex-shrink:0}}\n",
|