@rt-tools/ui-kit-v2 0.41.0 → 0.43.0

package/fesm2022/rt-tools-ui-kit-v2-page-header.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, effect, inject, input, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, linkedSignal, numberAttribute, output, signal, viewChild } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
 import { NavigationEnd, Router, RouterLink, RouterLinkActive } from "@angular/router";
 import { filter, map } from "rxjs";
@@ -8,6 +8,11 @@ import { BreakpointsService, RT_KIT_LABELS, RT_KIT_TRANSLATOR, RtKitLabelPipe, r
 import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
 import { RtPopoverDirective } from "@rt-tools/ui-kit-v2/popover";
 import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+import { RtBottomSheetComponent } from "@rt-tools/ui-kit-v2/bottom-sheet";
+import { RtButtonDirective } from "@rt-tools/ui-kit-v2/button";
+import { RtIconButtonComponent } from "@rt-tools/ui-kit-v2/icon-button";
+import { RtMenuComponent, RtMenuItemComponent } from "@rt-tools/ui-kit-v2/menu";
 var ERtPageHeaderEntry;
 (function(ERtPageHeaderEntry) {
 	ERtPageHeaderEntry["Panel"] = "panel";
@@ -119,7 +124,7 @@ function hasActiveSection(sections, url) {
 	const path = pathOf(url);
 	return sections.some((section) => isSectionActive(section, path));
 }
-const BEM_BLOCK$1 = "rt-page-header-more";
+const BEM_BLOCK$7 = "rt-page-header-more";
 var RtPageHeaderMoreComponent = class RtPageHeaderMoreComponent {
 	constructor() {
 		this.#translate = inject(RT_KIT_TRANSLATOR);
@@ -308,7 +313,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ElemDirective,
 				ModDirective
 			],
-			host: { class: BEM_BLOCK$1 },
+			host: { class: BEM_BLOCK$7 },
 			template: "<!--\n    Кнопка берёт элементы блока шапки, а не свои: «Ещё» стоит в том же ряду и выглядит как его пункт,\n    а второй набор тех же правил разошёлся бы с первым при первой правке.\n-->\n<ng-container rtBlock=\"rt-page-header\">\n    <button\n        rtElem=\"link\"\n        type=\"button\"\n        qa-dataid=\"header-nav-more\"\n        #morePopover=\"rtPopover\"\n        rtPopoverTrigger=\"hover\"\n        rtPopoverAlign=\"end\"\n        rtPopoverFitViewport\n        rtPopoverOffsetY=\"14\"\n        [rtMod]=\"{ isActive: active(), isOpen: morePopover.isOpen() }\"\n        [attr.aria-haspopup]=\"true\"\n        [attr.aria-expanded]=\"morePopover.isOpen()\"\n        [rtPopover]=\"moreTpl\"\n        (click)=\"morePopover.open()\">\n        <span rtElem=\"label\">{{ t().uiNavMore }}</span>\n        @if (unread()) {\n            <span rtElem=\"marker\" role=\"img\" qa-dataid=\"header-nav-marker\" data-id=\"more\" [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-container>\n\n<!--\n    Панель «Ещё» — та же разметка, что меню узкого экрана, без аккордеона: раздел с панелью стоит\n    заголовком, а пункты его групп идут под ним сразу.\n-->\n<ng-template #moreTpl>\n    <div rtBlock=\"rt-page-header-mobile\" role=\"menu\" qa-dataid=\"header-nav-more-list\" [rtMod]=\"{ more: true }\">\n        @for (section of sections(); track section.id) {\n            @switch (section.kind) {\n                @case (EntryKind.Panel) {\n                    <div rtElem=\"heading\" qa-dataid=\"header-nav-more-section\" [attr.data-id]=\"section.id\">\n                        <span rtElem=\"label\">{{ section.label }}</span>\n                    </div>\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-more-group\" [attr.data-id]=\"group.id\">\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-more-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)=\"morePopover.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]=\"'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\">\n                                            <button\n                                                rtElem=\"link\"\n                                                type=\"button\"\n                                                role=\"menuitem\"\n                                                qa-dataid=\"header-nav-more-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-more-item\"\n                                            [rtMod]=\"{ child: true }\"\n                                            [attr.data-id]=\"entry.id\"\n                                            (click)=\"onItemClick(entry.id); morePopover.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                                        </button>\n                                    }\n                                }\n                            </div>\n                        }\n                    </div>\n                }\n                @case (EntryKind.Link) {\n                    <a\n                        rtElem=\"link\"\n                        role=\"menuitem\"\n                        qa-dataid=\"header-nav-more-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)=\"morePopover.close()\">\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-more-item\"\n                                [rtMod]=\"{ disabled: true }\"\n                                [attr.data-id]=\"section.id\"\n                                [attr.aria-disabled]=\"true\">\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-more-item\"\n                            [attr.data-id]=\"section.id\"\n                            (click)=\"onItemClick(section.id); morePopover.close()\">\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",
 			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header-more{display:contents}}\n"]
 		}]
@@ -336,7 +341,1210 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const BEM_BLOCK = "rt-page-header";
+const BEM_BLOCK$6 = "rt-page-user";
+const RAIL_POSITIONS = [{
+	originX: "end",
+	originY: "bottom",
+	overlayX: "start",
+	overlayY: "bottom",
+	offsetX: 8,
+	offsetY: -8
+}];
+var RtPageUserComponent = class RtPageUserComponent {
+	constructor() {
+		this.letter = computed(() => {
+			const user = this.user();
+			return (user.avatar || user.name).charAt(0).toUpperCase();
+		}, ...ngDevMode ? [{ debugName: "letter" }] : /* istanbul ignore next */ []);
+		this.positions = computed(() => this.placement() === "rail" ? RAIL_POSITIONS : null, ...ngDevMode ? [{ debugName: "positions" }] : /* istanbul ignore next */ []);
+		this.user = input.required(...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+		this.userMenu = input(null, ...ngDevMode ? [{ debugName: "userMenu" }] : /* istanbul ignore next */ []);
+		this.placement = input("bar", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+		this.userClick = output();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageUserComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPageUserComponent,
+			isStandalone: true,
+			selector: "rt-page-user",
+			inputs: {
+				user: {
+					classPropertyName: "user",
+					publicName: "user",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				userMenu: {
+					classPropertyName: "userMenu",
+					publicName: "userMenu",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placement: {
+					classPropertyName: "placement",
+					publicName: "placement",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { userClick: "userClick" },
+			host: { classAttribute: "rt-page-user" },
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-page-user\">\n    @if (userMenu(); as menuTpl) {\n        <button\n            rtElem=\"button\"\n            type=\"button\"\n            qa-dataid=\"page-user\"\n            #userPopover=\"rtPopover\"\n            rtPopoverAlign=\"end\"\n            rtPopoverFitViewport\n            [rtPopoverPositions]=\"positions()\"\n            [attr.aria-label]=\"user().name\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-expanded]=\"userPopover.isOpen()\"\n            [rtPopover]=\"menuTpl\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    } @else {\n        <button rtElem=\"button\" type=\"button\" qa-dataid=\"page-user\" [attr.aria-label]=\"user().name\" (click)=\"userClick.emit()\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    }\n\n    <ng-template #body>\n        <span rtElem=\"avatar\" aria-hidden=\"true\">{{ letter() }}</span>\n        @if (placement() === 'bar') {\n            <span rtElem=\"name\">{{ user().name }}</span>\n            <span rtElem=\"caret\" aria-hidden=\"true\"><rt-icon name=\"chevron-up-down\" size=\"xs\" /></span>\n        }\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-user{--rt-page-user-avatar-radius: var(--rt-radius-full);--rt-page-user-avatar-border-width: var(--rt-border-width-thin);display:inline-flex;flex:none}.rt-page-user__button{display:inline-flex;height:32px;align-items:center;padding:0 var(--rt-space-2);border:0;background:transparent;color:var(--rt-color-text-muted);cursor:pointer;gap:var(--rt-space-2)}.rt-page-user__button:focus-visible{outline:1px dashed var(--rt-nav-color-focus);outline-offset:-1px}.rt-page-user__avatar{display:inline-flex;width:16px;height:16px;box-sizing:border-box;flex:none;align-items:center;justify-content:center;border:var(--rt-page-user-avatar-border-width) solid var(--rt-nav-item-color-caret);border-radius:var(--rt-page-user-avatar-radius);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none)}.rt-page-user__name{color:var(--rt-nav-item-color);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}.rt-page-user__caret{display:inline-flex;flex:none;color:var(--rt-nav-item-color-caret)}@media(width>768px){.rt-page-actions--rail .rt-page-user{width:50px;height:50px}.rt-page-actions--rail .rt-page-user__button{width:100%;height:100%;justify-content:center;padding:0}.rt-page-actions--rail .rt-page-user__avatar{width:18px;height:18px}}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverBackdropClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageUserComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-page-user",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconComponent,
+				RtPopoverDirective,
+				BlockDirective,
+				ElemDirective
+			],
+			host: { class: BEM_BLOCK$6 },
+			template: "<ng-container rtBlock=\"rt-page-user\">\n    @if (userMenu(); as menuTpl) {\n        <button\n            rtElem=\"button\"\n            type=\"button\"\n            qa-dataid=\"page-user\"\n            #userPopover=\"rtPopover\"\n            rtPopoverAlign=\"end\"\n            rtPopoverFitViewport\n            [rtPopoverPositions]=\"positions()\"\n            [attr.aria-label]=\"user().name\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-expanded]=\"userPopover.isOpen()\"\n            [rtPopover]=\"menuTpl\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    } @else {\n        <button rtElem=\"button\" type=\"button\" qa-dataid=\"page-user\" [attr.aria-label]=\"user().name\" (click)=\"userClick.emit()\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    }\n\n    <ng-template #body>\n        <span rtElem=\"avatar\" aria-hidden=\"true\">{{ letter() }}</span>\n        @if (placement() === 'bar') {\n            <span rtElem=\"name\">{{ user().name }}</span>\n            <span rtElem=\"caret\" aria-hidden=\"true\"><rt-icon name=\"chevron-up-down\" size=\"xs\" /></span>\n        }\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-user{--rt-page-user-avatar-radius: var(--rt-radius-full);--rt-page-user-avatar-border-width: var(--rt-border-width-thin);display:inline-flex;flex:none}.rt-page-user__button{display:inline-flex;height:32px;align-items:center;padding:0 var(--rt-space-2);border:0;background:transparent;color:var(--rt-color-text-muted);cursor:pointer;gap:var(--rt-space-2)}.rt-page-user__button:focus-visible{outline:1px dashed var(--rt-nav-color-focus);outline-offset:-1px}.rt-page-user__avatar{display:inline-flex;width:16px;height:16px;box-sizing:border-box;flex:none;align-items:center;justify-content:center;border:var(--rt-page-user-avatar-border-width) solid var(--rt-nav-item-color-caret);border-radius:var(--rt-page-user-avatar-radius);font-size:var(--rt-text-2xs);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none)}.rt-page-user__name{color:var(--rt-nav-item-color);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);line-height:var(--rt-leading-none);white-space:nowrap}.rt-page-user__caret{display:inline-flex;flex:none;color:var(--rt-nav-item-color-caret)}@media(width>768px){.rt-page-actions--rail .rt-page-user{width:50px;height:50px}.rt-page-actions--rail .rt-page-user__button{width:100%;height:100%;justify-content:center;padding:0}.rt-page-actions--rail .rt-page-user__avatar{width:18px;height:18px}}}\n"]
+		}]
+	}],
+	propDecorators: {
+		user: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "user",
+				required: true
+			}]
+		}],
+		userMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userMenu",
+				required: false
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		userClick: [{
+			type: i0.Output,
+			args: ["userClick"]
+		}]
+	}
+});
+const BEM_BLOCK$5 = "rt-page-actions";
+var RtPageActionsComponent = class RtPageActionsComponent {
+	constructor() {
+		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.user = input(null, ...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+		this.userMenu = input(null, ...ngDevMode ? [{ debugName: "userMenu" }] : /* istanbul ignore next */ []);
+		this.placement = input("bar", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+		this.itemClick = output();
+		this.userClick = output();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageActionsComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPageActionsComponent,
+			isStandalone: true,
+			selector: "rt-page-actions",
+			inputs: {
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				user: {
+					classPropertyName: "user",
+					publicName: "user",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userMenu: {
+					classPropertyName: "userMenu",
+					publicName: "userMenu",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placement: {
+					classPropertyName: "placement",
+					publicName: "placement",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				itemClick: "itemClick",
+				userClick: "userClick"
+			},
+			host: {
+				properties: { "class.rt-page-actions--rail": "placement() === 'rail'" },
+				classAttribute: "rt-page-actions"
+			},
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-page-actions\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"item\"\n            type=\"button\"\n            qa-dataid=\"page-action\"\n            rtTooltipPlacement=\"right\"\n            [attr.data-id]=\"item.id\"\n            [attr.aria-label]=\"item.label\"\n            [attr.aria-disabled]=\"item.disabled || null\"\n            [attr.aria-pressed]=\"item.active ?? null\"\n            [rtMod]=\"{ disabled: item.disabled ?? false, active: item.active ?? false }\"\n            [rtTooltip]=\"placement() === 'rail' ? item.label : ''\"\n            (click)=\"item.disabled || itemClick.emit(item.id)\">\n            <span rtElem=\"plate\">\n                @if (item.icon; as icon) {\n                    <rt-icon size=\"sm\" [name]=\"icon\" />\n                }\n                @if (item.unread) {\n                    <span rtElem=\"marker\" qa-dataid=\"page-action-marker\"></span>\n                }\n            </span>\n        </button>\n    }\n    @if (user(); as u) {\n        <rt-page-user [placement]=\"placement()\" [user]=\"u\" [userMenu]=\"userMenu()\" (userClick)=\"userClick.emit()\" />\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-actions{--rt-page-actions-plate-radius: var(--rt-radius-md);--rt-page-actions-plate-border-width: var(--rt-border-width-thin);--rt-page-actions-marker-radius: var(--rt-radius-full);display:flex;flex:none;align-items:center;gap:var(--rt-space-2);padding-inline:var(--rt-space-2)}.rt-page-actions__item{display:inline-flex;height:32px;flex:none;align-items:center;padding:0 var(--rt-space-2);border:0;background:transparent;color:var(--rt-nav-item-color);cursor:pointer}.rt-page-actions__item:hover{color:var(--rt-nav-item-color-hover)}.rt-page-actions__item:focus-visible{outline:1px dashed var(--rt-nav-color-focus);outline-offset:-1px}.rt-page-actions__item--disabled{color:var(--rt-nav-color-disabled);cursor:default}.rt-page-actions__plate{display:inline-flex;align-items:center;gap:var(--rt-space-2)}.rt-page-actions__marker{width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);flex:none;border-radius:var(--rt-page-actions-marker-radius);background-color:var(--rt-nav-marker-color)}@media(width>768px){.rt-page-actions:not(.rt-page-actions--rail){border-block-end:var(--rt-page-actions-plate-border-width) solid var(--rt-color-border-default);margin-inline-start:calc(-1 * var(--rt-space-md))}.rt-page-actions--rail{flex-direction:column;align-items:stretch;gap:0;padding-inline:0}.rt-page-actions--rail .rt-page-actions__item{width:50px;height:50px;justify-content:center;padding:0}.rt-page-actions--rail .rt-page-actions__plate{position:relative;width:36px;height:36px;box-sizing:border-box;justify-content:center;border:var(--rt-page-actions-plate-border-width) solid transparent;border-radius:var(--rt-page-actions-plate-radius)}.rt-page-actions--rail .rt-page-actions__item:hover .rt-page-actions__plate{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-actions--rail .rt-page-actions__item--active .rt-page-actions__plate{border-color:var(--rt-color-border-default);background-color:var(--rt-nav-item-color-bg-active)}.rt-page-actions:not(.rt-page-actions--rail) .rt-page-actions__item--active{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-actions--rail .rt-page-actions__marker{position:absolute;top:calc(var(--rt-space-1) - var(--rt-page-actions-plate-border-width));right:calc(var(--rt-space-1) - var(--rt-page-actions-plate-border-width))}}@media(width<=768px){.rt-page-actions{gap:var(--rt-space-1);padding-inline:0}}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtPageUserComponent,
+					selector: "rt-page-user",
+					inputs: [
+						"user",
+						"userMenu",
+						"placement"
+					],
+					outputs: ["userClick"]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipShowDelay",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick",
+						"rtTooltipShowOnTap"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageActionsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-page-actions",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconComponent,
+				RtPageUserComponent,
+				RtTooltipDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK$5,
+				"[class.rt-page-actions--rail]": "placement() === 'rail'"
+			},
+			template: "<ng-container rtBlock=\"rt-page-actions\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"item\"\n            type=\"button\"\n            qa-dataid=\"page-action\"\n            rtTooltipPlacement=\"right\"\n            [attr.data-id]=\"item.id\"\n            [attr.aria-label]=\"item.label\"\n            [attr.aria-disabled]=\"item.disabled || null\"\n            [attr.aria-pressed]=\"item.active ?? null\"\n            [rtMod]=\"{ disabled: item.disabled ?? false, active: item.active ?? false }\"\n            [rtTooltip]=\"placement() === 'rail' ? item.label : ''\"\n            (click)=\"item.disabled || itemClick.emit(item.id)\">\n            <span rtElem=\"plate\">\n                @if (item.icon; as icon) {\n                    <rt-icon size=\"sm\" [name]=\"icon\" />\n                }\n                @if (item.unread) {\n                    <span rtElem=\"marker\" qa-dataid=\"page-action-marker\"></span>\n                }\n            </span>\n        </button>\n    }\n    @if (user(); as u) {\n        <rt-page-user [placement]=\"placement()\" [user]=\"u\" [userMenu]=\"userMenu()\" (userClick)=\"userClick.emit()\" />\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-actions{--rt-page-actions-plate-radius: var(--rt-radius-md);--rt-page-actions-plate-border-width: var(--rt-border-width-thin);--rt-page-actions-marker-radius: var(--rt-radius-full);display:flex;flex:none;align-items:center;gap:var(--rt-space-2);padding-inline:var(--rt-space-2)}.rt-page-actions__item{display:inline-flex;height:32px;flex:none;align-items:center;padding:0 var(--rt-space-2);border:0;background:transparent;color:var(--rt-nav-item-color);cursor:pointer}.rt-page-actions__item:hover{color:var(--rt-nav-item-color-hover)}.rt-page-actions__item:focus-visible{outline:1px dashed var(--rt-nav-color-focus);outline-offset:-1px}.rt-page-actions__item--disabled{color:var(--rt-nav-color-disabled);cursor:default}.rt-page-actions__plate{display:inline-flex;align-items:center;gap:var(--rt-space-2)}.rt-page-actions__marker{width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);flex:none;border-radius:var(--rt-page-actions-marker-radius);background-color:var(--rt-nav-marker-color)}@media(width>768px){.rt-page-actions:not(.rt-page-actions--rail){border-block-end:var(--rt-page-actions-plate-border-width) solid var(--rt-color-border-default);margin-inline-start:calc(-1 * var(--rt-space-md))}.rt-page-actions--rail{flex-direction:column;align-items:stretch;gap:0;padding-inline:0}.rt-page-actions--rail .rt-page-actions__item{width:50px;height:50px;justify-content:center;padding:0}.rt-page-actions--rail .rt-page-actions__plate{position:relative;width:36px;height:36px;box-sizing:border-box;justify-content:center;border:var(--rt-page-actions-plate-border-width) solid transparent;border-radius:var(--rt-page-actions-plate-radius)}.rt-page-actions--rail .rt-page-actions__item:hover .rt-page-actions__plate{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-actions--rail .rt-page-actions__item--active .rt-page-actions__plate{border-color:var(--rt-color-border-default);background-color:var(--rt-nav-item-color-bg-active)}.rt-page-actions:not(.rt-page-actions--rail) .rt-page-actions__item--active{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-actions--rail .rt-page-actions__marker{position:absolute;top:calc(var(--rt-space-1) - var(--rt-page-actions-plate-border-width));right:calc(var(--rt-space-1) - var(--rt-page-actions-plate-border-width))}}@media(width<=768px){.rt-page-actions{gap:var(--rt-space-1);padding-inline:0}}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		user: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "user",
+				required: false
+			}]
+		}],
+		userMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userMenu",
+				required: false
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
+		userClick: [{
+			type: i0.Output,
+			args: ["userClick"]
+		}]
+	}
+});
+const BEM_BLOCK$4 = "rt-page-phone-menu";
+var RtPagePhoneMenuComponent = class RtPagePhoneMenuComponent {
+	constructor() {
+		this.#openId = signal(null, ...ngDevMode ? [{ debugName: "#openId" }] : /* istanbul ignore next */ []);
+		this.t = inject(RT_KIT_LABELS);
+		this.EntryKind = ERtPageHeaderEntry;
+		this.openSection = computed(() => this.sections().find((section) => section.id === this.#openId() && section.kind === ERtPageHeaderEntry.Panel) ?? null, ...ngDevMode ? [{ debugName: "openSection" }] : /* istanbul ignore next */ []);
+		this.sections = input.required(...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
+		this.activeIds = input.required(...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
+		this.navLabel = input("", ...ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []);
+		this.itemClick = output();
+		this.closed = output();
+	}
+	#openId;
+	openPanel(id) {
+		this.#openId.set(id);
+	}
+	back() {
+		this.#openId.set(null);
+	}
+	onButton(entry) {
+		if (entry.disabled) return;
+		this.itemClick.emit(entry.id);
+		this.closed.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPagePhoneMenuComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPagePhoneMenuComponent,
+			isStandalone: true,
+			selector: "rt-page-phone-menu",
+			inputs: {
+				sections: {
+					classPropertyName: "sections",
+					publicName: "sections",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				activeIds: {
+					classPropertyName: "activeIds",
+					publicName: "activeIds",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				navLabel: {
+					classPropertyName: "navLabel",
+					publicName: "navLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				itemClick: "itemClick",
+				closed: "closed"
+			},
+			host: { classAttribute: "rt-page-phone-menu" },
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-page-phone-menu\">\n    <nav rtElem=\"list\" qa-dataid=\"phone-menu-list\" [attr.aria-label]=\"navLabel() || null\" [rtMod]=\"{ panel: !!openSection() }\">\n        @if (openSection(); as section) {\n            <button rtElem=\"row\" type=\"button\" qa-dataid=\"phone-menu-back\" (click)=\"back()\">\n                <span rtElem=\"icon\"><rt-icon name=\"arrow-left\" [size]=\"20\" /></span>\n                <span rtElem=\"label\">{{ t().uiBack }}</span>\n            </button>\n            @for (group of section.panelGroups; track group.id) {\n                @if (group.label) {\n                    <div rtElem=\"group-title\" qa-dataid=\"phone-menu-group\">{{ group.label }}</div>\n                }\n                @for (entry of group.items; track entry.id) {\n                    <ng-container [ngTemplateOutlet]=\"row\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                }\n            }\n        } @else {\n            @for (section of sections(); track section.id) {\n                @if (section.kind === EntryKind.Panel) {\n                    <button\n                        rtElem=\"row\"\n                        type=\"button\"\n                        qa-dataid=\"phone-menu-row\"\n                        [rtMod]=\"{ active: activeIds().has(section.id) }\"\n                        [attr.data-id]=\"section.id\"\n                        (click)=\"openPanel(section.id)\">\n                        <ng-container [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                        <span rtElem=\"label\" [attr.title]=\"section.label\">{{ section.label }}</span>\n                        <span rtElem=\"arrow\"><rt-icon name=\"arrow-right\" [size]=\"16\" /></span>\n                    </button>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"row\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                }\n            }\n        }\n    </nav>\n\n    <ng-template #row let-entry>\n        @if (entry.kind === EntryKind.Link) {\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"phone-menu-row\"\n                routerLinkActive=\"rt-page-phone-menu__row--active\"\n                [attr.data-id]=\"entry.id\"\n                [routerLink]=\"entry.route\"\n                [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n                (click)=\"closed.emit()\">\n                <ng-container [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                <span rtElem=\"label\" [attr.title]=\"entry.label\">{{ entry.label }}</span>\n            </a>\n        } @else {\n            <button\n                rtElem=\"row\"\n                type=\"button\"\n                qa-dataid=\"phone-menu-row\"\n                [rtMod]=\"{ disabled: entry.disabled }\"\n                [attr.data-id]=\"entry.id\"\n                [attr.aria-disabled]=\"entry.disabled || null\"\n                (click)=\"onButton(entry)\">\n                <ng-container [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                <span rtElem=\"label\" [attr.title]=\"entry.label\">{{ entry.label }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #icon let-entry>\n        @if (entry.icon; as name) {\n            <span rtElem=\"icon\">\n                <rt-icon [name]=\"name\" [size]=\"20\" />\n                @if (entry.unread) {\n                    <span rtElem=\"marker\" role=\"img\" qa-dataid=\"phone-menu-marker\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n                }\n            </span>\n        }\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-phone-menu{--rt-page-phone-menu-row-radius: var(--rt-radius-md);--rt-page-phone-menu-marker-radius: var(--rt-radius-full);--rt-page-phone-menu-border-width: var(--rt-border-width-thin);display:flex;overflow:hidden auto;width:100%;height:100%;box-sizing:border-box;flex-direction:column}.rt-page-phone-menu__list{display:flex;box-sizing:border-box;flex:1 0 auto;flex-direction:column;padding:var(--rt-space-2);background-color:var(--rt-nav-header-color-bg);gap:var(--rt-space-1)}.rt-page-phone-menu__list--panel{background-color:var(--rt-nav-panel-color-bg)}.rt-page-phone-menu__group-title{display:flex;height:32px;flex:none;align-items:center;color:var(--rt-nav-panel-group-color);font-size:var(--rt-nav-panel-group-font-size);font-weight:var(--rt-nav-panel-group-font-weight);padding-inline:var(--rt-space-4)}.rt-page-phone-menu__row{display:flex;width:100%;height:48px;box-sizing:border-box;flex:none;align-items:center;padding:0 var(--rt-space-4);border:var(--rt-page-phone-menu-border-width) solid transparent;border-radius:var(--rt-page-phone-menu-row-radius);background:transparent;color:var(--rt-nav-item-color);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);gap:calc(var(--rt-space-2) + var(--rt-space-1));text-align:start;text-decoration:none}.rt-page-phone-menu__row:hover{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-phone-menu__row--active{border-color:var(--rt-color-border-default);background-color:var(--rt-nav-item-color-bg-active);font-weight:var(--rt-font-weight-semibold)}.rt-page-phone-menu__row--disabled,.rt-page-phone-menu__row--disabled:hover{background:transparent;color:var(--rt-nav-color-disabled);cursor:default}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row{color:var(--rt-nav-panel-item-color)}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row:hover{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--active,.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--active:hover{border-color:transparent;background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--disabled,.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--disabled:hover{background:transparent;color:var(--rt-nav-color-disabled)}.rt-page-phone-menu__icon{position:relative;display:flex;flex:none}.rt-page-phone-menu__marker{position:absolute;top:0;right:0;width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);border-radius:var(--rt-page-phone-menu-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-phone-menu__label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-page-phone-menu__arrow{display:flex;flex:none}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: RouterLink,
+					selector: "[routerLink]",
+					inputs: [
+						"target",
+						"queryParams",
+						"fragment",
+						"queryParamsHandling",
+						"state",
+						"info",
+						"relativeTo",
+						"preserveFragment",
+						"skipLocationChange",
+						"replaceUrl",
+						"browserUrl",
+						"routerLink"
+					]
+				},
+				{
+					kind: "directive",
+					type: RouterLinkActive,
+					selector: "[routerLinkActive]",
+					inputs: [
+						"routerLinkActiveOptions",
+						"ariaCurrentWhenActive",
+						"routerLinkActive"
+					],
+					outputs: ["isActiveChange"],
+					exportAs: ["routerLinkActive"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPagePhoneMenuComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-page-phone-menu",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RouterLink,
+				RouterLinkActive,
+				RtIconComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: { class: BEM_BLOCK$4 },
+			template: "<ng-container rtBlock=\"rt-page-phone-menu\">\n    <nav rtElem=\"list\" qa-dataid=\"phone-menu-list\" [attr.aria-label]=\"navLabel() || null\" [rtMod]=\"{ panel: !!openSection() }\">\n        @if (openSection(); as section) {\n            <button rtElem=\"row\" type=\"button\" qa-dataid=\"phone-menu-back\" (click)=\"back()\">\n                <span rtElem=\"icon\"><rt-icon name=\"arrow-left\" [size]=\"20\" /></span>\n                <span rtElem=\"label\">{{ t().uiBack }}</span>\n            </button>\n            @for (group of section.panelGroups; track group.id) {\n                @if (group.label) {\n                    <div rtElem=\"group-title\" qa-dataid=\"phone-menu-group\">{{ group.label }}</div>\n                }\n                @for (entry of group.items; track entry.id) {\n                    <ng-container [ngTemplateOutlet]=\"row\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                }\n            }\n        } @else {\n            @for (section of sections(); track section.id) {\n                @if (section.kind === EntryKind.Panel) {\n                    <button\n                        rtElem=\"row\"\n                        type=\"button\"\n                        qa-dataid=\"phone-menu-row\"\n                        [rtMod]=\"{ active: activeIds().has(section.id) }\"\n                        [attr.data-id]=\"section.id\"\n                        (click)=\"openPanel(section.id)\">\n                        <ng-container [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                        <span rtElem=\"label\" [attr.title]=\"section.label\">{{ section.label }}</span>\n                        <span rtElem=\"arrow\"><rt-icon name=\"arrow-right\" [size]=\"16\" /></span>\n                    </button>\n                } @else {\n                    <ng-container [ngTemplateOutlet]=\"row\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                }\n            }\n        }\n    </nav>\n\n    <ng-template #row let-entry>\n        @if (entry.kind === EntryKind.Link) {\n            <a\n                rtElem=\"row\"\n                qa-dataid=\"phone-menu-row\"\n                routerLinkActive=\"rt-page-phone-menu__row--active\"\n                [attr.data-id]=\"entry.id\"\n                [routerLink]=\"entry.route\"\n                [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n                (click)=\"closed.emit()\">\n                <ng-container [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                <span rtElem=\"label\" [attr.title]=\"entry.label\">{{ entry.label }}</span>\n            </a>\n        } @else {\n            <button\n                rtElem=\"row\"\n                type=\"button\"\n                qa-dataid=\"phone-menu-row\"\n                [rtMod]=\"{ disabled: entry.disabled }\"\n                [attr.data-id]=\"entry.id\"\n                [attr.aria-disabled]=\"entry.disabled || null\"\n                (click)=\"onButton(entry)\">\n                <ng-container [ngTemplateOutlet]=\"icon\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n                <span rtElem=\"label\" [attr.title]=\"entry.label\">{{ entry.label }}</span>\n            </button>\n        }\n    </ng-template>\n\n    <ng-template #icon let-entry>\n        @if (entry.icon; as name) {\n            <span rtElem=\"icon\">\n                <rt-icon [name]=\"name\" [size]=\"20\" />\n                @if (entry.unread) {\n                    <span rtElem=\"marker\" role=\"img\" qa-dataid=\"phone-menu-marker\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n                }\n            </span>\n        }\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-phone-menu{--rt-page-phone-menu-row-radius: var(--rt-radius-md);--rt-page-phone-menu-marker-radius: var(--rt-radius-full);--rt-page-phone-menu-border-width: var(--rt-border-width-thin);display:flex;overflow:hidden auto;width:100%;height:100%;box-sizing:border-box;flex-direction:column}.rt-page-phone-menu__list{display:flex;box-sizing:border-box;flex:1 0 auto;flex-direction:column;padding:var(--rt-space-2);background-color:var(--rt-nav-header-color-bg);gap:var(--rt-space-1)}.rt-page-phone-menu__list--panel{background-color:var(--rt-nav-panel-color-bg)}.rt-page-phone-menu__group-title{display:flex;height:32px;flex:none;align-items:center;color:var(--rt-nav-panel-group-color);font-size:var(--rt-nav-panel-group-font-size);font-weight:var(--rt-nav-panel-group-font-weight);padding-inline:var(--rt-space-4)}.rt-page-phone-menu__row{display:flex;width:100%;height:48px;box-sizing:border-box;flex:none;align-items:center;padding:0 var(--rt-space-4);border:var(--rt-page-phone-menu-border-width) solid transparent;border-radius:var(--rt-page-phone-menu-row-radius);background:transparent;color:var(--rt-nav-item-color);cursor:pointer;font-family:inherit;font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-medium);gap:calc(var(--rt-space-2) + var(--rt-space-1));text-align:start;text-decoration:none}.rt-page-phone-menu__row:hover{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-phone-menu__row--active{border-color:var(--rt-color-border-default);background-color:var(--rt-nav-item-color-bg-active);font-weight:var(--rt-font-weight-semibold)}.rt-page-phone-menu__row--disabled,.rt-page-phone-menu__row--disabled:hover{background:transparent;color:var(--rt-nav-color-disabled);cursor:default}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row{color:var(--rt-nav-panel-item-color)}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row:hover{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--active,.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--active:hover{border-color:transparent;background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--disabled,.rt-page-phone-menu__list--panel .rt-page-phone-menu__row--disabled:hover{background:transparent;color:var(--rt-nav-color-disabled)}.rt-page-phone-menu__icon{position:relative;display:flex;flex:none}.rt-page-phone-menu__marker{position:absolute;top:0;right:0;width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);border-radius:var(--rt-page-phone-menu-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-phone-menu__label{overflow:hidden;min-width:0;flex:1 1 auto;text-overflow:ellipsis;white-space:nowrap}.rt-page-phone-menu__arrow{display:flex;flex:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		sections: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sections",
+				required: true
+			}]
+		}],
+		activeIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIds",
+				required: true
+			}]
+		}],
+		navLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navLabel",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}]
+	}
+});
+const BEM_BLOCK$3 = "rt-page-rail";
+const PANEL_CLOSE_DELAY_MS = 150;
+var RtPageRailComponent = class RtPageRailComponent {
+	#host;
+	#win;
+	#injector;
+	#closeTimer;
+	#hoverOpenedId;
+	#openId;
+	constructor() {
+		this.#host = inject(ElementRef).nativeElement;
+		this.#win = inject(WINDOW);
+		this.#injector = inject(Injector);
+		this.#closeTimer = null;
+		this.#hoverOpenedId = null;
+		this.#openId = signal(null, ...ngDevMode ? [{ debugName: "#openId" }] : /* istanbul ignore next */ []);
+		this.t = inject(RT_KIT_LABELS);
+		this.EntryKind = ERtPageHeaderEntry;
+		this.openSection = computed(() => this.sections().find((section) => section.id === this.#openId() && section.kind === ERtPageHeaderEntry.Panel) ?? null, ...ngDevMode ? [{ debugName: "openSection" }] : /* istanbul ignore next */ []);
+		this.phoneMenuOpen = linkedSignal({
+			...ngDevMode ? { debugName: "phoneMenuOpen" } : /* istanbul ignore next */ {},
+			source: inject(BreakpointsService).narrow,
+			computation: () => false
+		});
+		this.burgerRef = viewChild("burger", ...ngDevMode ? [{ debugName: "burgerRef" }] : /* istanbul ignore next */ []);
+		this.phoneColumnRef = viewChild("phoneColumn", ...ngDevMode ? [{ debugName: "phoneColumnRef" }] : /* istanbul ignore next */ []);
+		this.sections = input.required(...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
+		this.activeIds = input.required(...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
+		this.navLabel = input("", ...ngDevMode ? [{ debugName: "navLabel" }] : /* istanbul ignore next */ []);
+		this.user = input(null, ...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
+		this.userMenu = input(null, ...ngDevMode ? [{ debugName: "userMenu" }] : /* istanbul ignore next */ []);
+		this.foot = input(true, {
+			...ngDevMode ? { debugName: "foot" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.footItems = input([], ...ngDevMode ? [{ debugName: "footItems" }] : /* istanbul ignore next */ []);
+		this.itemClick = output();
+		this.userClick = output();
+		inject(DestroyRef).onDestroy(() => this.cancelPanelClose());
+	}
+	openPanel(id) {
+		this.cancelPanelClose();
+		if (this.#openId() !== id) this.#hoverOpenedId = id;
+		this.#openId.set(id);
+	}
+	togglePanel(id, event) {
+		event.stopPropagation();
+		const keep = "pointerType" in event && event.pointerType === "mouse" || this.#hoverOpenedId === id;
+		this.#hoverOpenedId = null;
+		this.#openId.set(!keep && this.#openId() === id ? null : id);
+	}
+	closePanel() {
+		this.cancelPanelClose();
+		this.#hoverOpenedId = null;
+		this.#openId.set(null);
+	}
+	closeAll() {
+		this.closePanel();
+		if (this.phoneMenuOpen()) this.closePhoneMenu();
+	}
+	openPhoneMenu() {
+		this.phoneMenuOpen.set(true);
+		afterNextRender(() => this.phoneColumnRef()?.nativeElement.querySelector("button, a[href]")?.focus(), { injector: this.#injector });
+	}
+	closePhoneMenu() {
+		this.phoneMenuOpen.set(false);
+		this.burgerRef()?.nativeElement.focus();
+	}
+	schedulePanelClose() {
+		this.cancelPanelClose();
+		this.#closeTimer = this.#win.setTimeout(() => this.closePanel(), PANEL_CLOSE_DELAY_MS);
+	}
+	cancelPanelClose() {
+		if (this.#closeTimer !== null) {
+			this.#win.clearTimeout(this.#closeTimer);
+			this.#closeTimer = null;
+		}
+	}
+	onDocumentClick(event) {
+		if (event.target instanceof Node && !this.#host.contains(event.target)) this.closePanel();
+	}
+	onEntryClick(id) {
+		this.itemClick.emit(id);
+		this.closePanel();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageRailComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPageRailComponent,
+			isStandalone: true,
+			selector: "rt-page-rail",
+			inputs: {
+				sections: {
+					classPropertyName: "sections",
+					publicName: "sections",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				activeIds: {
+					classPropertyName: "activeIds",
+					publicName: "activeIds",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				navLabel: {
+					classPropertyName: "navLabel",
+					publicName: "navLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				user: {
+					classPropertyName: "user",
+					publicName: "user",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userMenu: {
+					classPropertyName: "userMenu",
+					publicName: "userMenu",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				foot: {
+					classPropertyName: "foot",
+					publicName: "foot",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				footItems: {
+					classPropertyName: "footItems",
+					publicName: "footItems",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				itemClick: "itemClick",
+				userClick: "userClick"
+			},
+			host: {
+				listeners: {
+					"mouseleave": "schedulePanelClose()",
+					"mouseenter": "cancelPanelClose()",
+					"document:keydown.escape": "closeAll()",
+					"document:click": "onDocumentClick($event)"
+				},
+				classAttribute: "rt-page-rail"
+			},
+			viewQueries: [{
+				propertyName: "burgerRef",
+				first: true,
+				predicate: ["burger"],
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "phoneColumnRef",
+				first: true,
+				predicate: ["phoneColumn"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-page-rail\">\n    <button\n        #burger\n        rtElem=\"burger\"\n        type=\"button\"\n        qa-dataid=\"rail-burger\"\n        [attr.aria-label]=\"t().uiNavMenu\"\n        [attr.aria-expanded]=\"phoneMenuOpen()\"\n        (click)=\"openPhoneMenu()\">\n        <rt-icon name=\"bars\" size=\"md\" />\n    </button>\n\n    <div rtElem=\"logo\"><ng-content select=\"[rtRailLogo]\" /></div>\n\n    <nav rtElem=\"sections\" qa-dataid=\"rail-sections\" [attr.aria-label]=\"navLabel()\">\n        @for (section of sections(); track section.id) {\n            @switch (section.kind) {\n                @case (EntryKind.Panel) {\n                    <button\n                        rtElem=\"item\"\n                        type=\"button\"\n                        qa-dataid=\"rail-item\"\n                        [rtMod]=\"{ active: activeIds().has(section.id), open: openSection()?.id === section.id }\"\n                        [attr.data-id]=\"section.id\"\n                        [attr.aria-label]=\"section.label\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"openSection()?.id === section.id\"\n                        (mouseenter)=\"openPanel(section.id)\"\n                        (click)=\"togglePanel(section.id, $event)\">\n                        <ng-container [ngTemplateOutlet]=\"plate\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                    </button>\n                }\n                @case (EntryKind.Link) {\n                    <a\n                        rtElem=\"item\"\n                        qa-dataid=\"rail-item\"\n                        rtTooltipPlacement=\"right\"\n                        routerLinkActive=\"rt-page-rail__item--active\"\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                        (mouseenter)=\"closePanel()\">\n                        <ng-container [ngTemplateOutlet]=\"plate\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                    </a>\n                }\n                @default {\n                    <button\n                        rtElem=\"item\"\n                        type=\"button\"\n                        qa-dataid=\"rail-item\"\n                        rtTooltipPlacement=\"right\"\n                        [rtMod]=\"{ disabled: section.disabled }\"\n                        [attr.data-id]=\"section.id\"\n                        [attr.aria-label]=\"section.label\"\n                        [attr.aria-disabled]=\"section.disabled || null\"\n                        [rtTooltip]=\"section.label\"\n                        (mouseenter)=\"closePanel()\"\n                        (click)=\"section.disabled || itemClick.emit(section.id)\">\n                        <ng-container [ngTemplateOutlet]=\"plate\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                    </button>\n                }\n            }\n        }\n    </nav>\n\n    <div rtElem=\"page\"><ng-content select=\"[rtRailPage]\" /></div>\n\n    @if (foot()) {\n        <rt-page-actions\n            placement=\"rail\"\n            qa-dataid=\"rail-foot\"\n            [items]=\"footItems()\"\n            [user]=\"user()\"\n            [userMenu]=\"userMenu()\"\n            (itemClick)=\"itemClick.emit($event)\"\n            (userClick)=\"userClick.emit()\" />\n    }\n\n    @if (openSection(); as section) {\n        <div rtElem=\"panel\" role=\"menu\" qa-dataid=\"rail-panel\" [attr.data-id]=\"section.id\">\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\">{{ group.label }}</div>\n                    }\n                    @for (entry of group.items; track entry.id) {\n                        @if (entry.kind === EntryKind.Link) {\n                            <a\n                                rtElem=\"panel-item\"\n                                role=\"menuitem\"\n                                qa-dataid=\"rail-panel-item\"\n                                routerLinkActive=\"rt-page-rail__panel-item--active\"\n                                [attr.data-id]=\"entry.id\"\n                                [routerLink]=\"entry.route\"\n                                [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n                                (click)=\"closePanel()\">\n                                {{ entry.label }}\n                            </a>\n                        } @else {\n                            <button\n                                rtElem=\"panel-item\"\n                                type=\"button\"\n                                role=\"menuitem\"\n                                qa-dataid=\"rail-panel-item\"\n                                [rtMod]=\"{ disabled: entry.disabled }\"\n                                [attr.data-id]=\"entry.id\"\n                                [attr.aria-disabled]=\"entry.disabled || null\"\n                                (click)=\"entry.disabled || onEntryClick(entry.id)\">\n                                {{ entry.label }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (phoneMenuOpen()) {\n        <div rtElem=\"phone-menu\" qa-dataid=\"rail-phone-menu\">\n            <button\n                rtElem=\"phone-backdrop\"\n                type=\"button\"\n                qa-dataid=\"rail-phone-backdrop\"\n                [attr.aria-label]=\"t().bottomSheetClose\"\n                (click)=\"closePhoneMenu()\"></button>\n            <div #phoneColumn rtElem=\"phone-column\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t().uiNavMenu\">\n                <rt-page-phone-menu\n                    [sections]=\"sections()\"\n                    [activeIds]=\"activeIds()\"\n                    [navLabel]=\"navLabel()\"\n                    (itemClick)=\"itemClick.emit($event)\"\n                    (closed)=\"closePhoneMenu()\" />\n            </div>\n        </div>\n    }\n</ng-container>\n\n<ng-template #plate let-section>\n    <span rtBlock=\"rt-page-rail-plate\">\n        @if (section.icon; as icon) {\n            <rt-icon size=\"sm\" [name]=\"icon\" />\n        } @else {\n            <span rtElem=\"letter\" aria-hidden=\"true\" qa-dataid=\"rail-letter\">{{ section.label.charAt(0) }}</span>\n        }\n        @if (section.unread) {\n            <span rtElem=\"marker\" role=\"img\" qa-dataid=\"rail-marker\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n        }\n    </span>\n</ng-template>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-rail{--rt-page-rail-border-width: var(--rt-border-width-thin);--rt-page-rail-plate-radius: var(--rt-radius-md);--rt-page-rail-marker-radius: var(--rt-radius-full);--rt-page-rail-transition-duration: var(--rt-duration-fast);position:sticky;z-index:var(--rt-z-sticky);top:0;display:flex;width:50px;height:100dvh;box-sizing:border-box;flex:none;flex-direction:column;background-color:var(--rt-nav-header-color-bg)}.rt-page-rail:after{position:absolute;width:var(--rt-page-rail-border-width);background-color:var(--rt-color-border-default);content:\"\";inset-block:0;inset-inline-end:0;pointer-events:none}.rt-page-rail__burger{display:none;width:36px;height:36px;flex:none;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-nav-item-color);cursor:pointer}.rt-page-rail__logo{display:flex;height:64px;box-sizing:border-box;flex:none;justify-content:center;padding-top:var(--rt-space-5)}.rt-page-rail__sections{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;-ms-overflow-style:none;overflow-y:auto;scrollbar-width:none}.rt-page-rail__sections::-webkit-scrollbar{display:none}.rt-page-rail__item{display:flex;width:100%;height:50px;flex:none;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-nav-item-color);cursor:pointer;text-decoration:none}.rt-page-rail__item:hover .rt-page-rail-plate,.rt-page-rail__item--open .rt-page-rail-plate{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-rail__item--active .rt-page-rail-plate{border-color:var(--rt-color-border-default);background-color:var(--rt-nav-item-color-bg-active)}.rt-page-rail__item:focus-visible{outline:none}.rt-page-rail__item:focus-visible .rt-page-rail-plate{outline:1px dashed var(--rt-nav-color-focus);outline-offset:1px}.rt-page-rail__item--disabled{color:var(--rt-nav-color-disabled);cursor:default}.rt-page-rail__item--disabled:hover .rt-page-rail-plate{background-color:transparent;color:inherit}.rt-page-rail__page{display:none}.rt-page-rail__panel{position:fixed;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:50px;display:flex;overflow:hidden auto;width:220px;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-5) calc(var(--rt-space-2) + var(--rt-space-1));background-color:var(--rt-nav-panel-color-bg);gap:var(--rt-space-8)}.rt-page-rail__panel:after{position:absolute;width:var(--rt-page-rail-border-width);background-color:var(--rt-color-border-default);content:\"\";inset-block:0;inset-inline-end:0;pointer-events:none}.rt-page-rail__group{display:flex;flex-direction:column;gap:var(--rt-space-0-5)}.rt-page-rail__group-title{display:flex;height:32px;align-items:center;color:var(--rt-nav-panel-group-color);font-size:var(--rt-nav-panel-group-font-size);font-weight:var(--rt-nav-panel-group-font-weight);padding-inline:var(--rt-space-2)}.rt-page-rail__panel-item{display:flex;width:100%;height:32px;box-sizing:border-box;align-items:center;padding:var(--rt-nav-panel-item-padding);border:0;border-radius:var(--rt-page-rail-plate-radius);background:transparent;color:var(--rt-nav-panel-item-color);cursor:pointer;font-family:inherit;font-size:var(--rt-nav-panel-item-font-size);font-weight:var(--rt-nav-panel-item-font-weight);text-align:start;text-decoration:none}.rt-page-rail__panel-item:hover{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-rail__panel-item--active,.rt-page-rail__panel-item--active:hover{background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-rail__panel-item--disabled{color:var(--rt-nav-color-disabled);cursor:default}.rt-page-rail__phone-backdrop{position:absolute;padding:0;border:0;background:var(--rt-color-bg-overlay);cursor:pointer;inset:0}.rt-page-rail__phone-column{position:relative;display:flex;width:240px;height:100%}.rt-page-rail__phone-menu{position:fixed;z-index:var(--rt-z-fixed);inset:0}@media(width<=768px){.rt-page-rail{width:100%;height:50px;flex-direction:row;align-items:center;gap:var(--rt-space-1);padding-inline:calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-2)}.rt-page-rail:after{width:auto;height:var(--rt-page-rail-border-width);inset:auto 0 0}.rt-page-rail__burger{display:flex}.rt-page-rail__logo,.rt-page-rail__sections{display:none}.rt-page-rail__page{display:flex;min-width:0;flex:1 1 auto;align-items:center}}.rt-page-rail-plate{position:relative;display:flex;width:36px;height:36px;box-sizing:border-box;align-items:center;justify-content:center;border:var(--rt-page-rail-border-width) solid transparent;border-radius:var(--rt-page-rail-plate-radius);transition:background-color var(--rt-page-rail-transition-duration) linear}.rt-page-rail-plate__letter{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);line-height:1}.rt-page-rail-plate__marker{position:absolute;top:calc(var(--rt-space-1) - var(--rt-page-rail-border-width));right:calc(var(--rt-space-1) - var(--rt-page-rail-border-width));width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);border-radius:var(--rt-page-rail-marker-radius);background-color:var(--rt-nav-marker-color)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: RouterLink,
+					selector: "[routerLink]",
+					inputs: [
+						"target",
+						"queryParams",
+						"fragment",
+						"queryParamsHandling",
+						"state",
+						"info",
+						"relativeTo",
+						"preserveFragment",
+						"skipLocationChange",
+						"replaceUrl",
+						"browserUrl",
+						"routerLink"
+					]
+				},
+				{
+					kind: "directive",
+					type: RouterLinkActive,
+					selector: "[routerLinkActive]",
+					inputs: [
+						"routerLinkActiveOptions",
+						"ariaCurrentWhenActive",
+						"routerLinkActive"
+					],
+					outputs: ["isActiveChange"],
+					exportAs: ["routerLinkActive"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtPageActionsComponent,
+					selector: "rt-page-actions",
+					inputs: [
+						"items",
+						"user",
+						"userMenu",
+						"placement"
+					],
+					outputs: ["itemClick", "userClick"]
+				},
+				{
+					kind: "component",
+					type: RtPagePhoneMenuComponent,
+					selector: "rt-page-phone-menu",
+					inputs: [
+						"sections",
+						"activeIds",
+						"navLabel"
+					],
+					outputs: ["itemClick", "closed"]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipShowDelay",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick",
+						"rtTooltipShowOnTap"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageRailComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-page-rail",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RouterLink,
+				RouterLinkActive,
+				RtIconComponent,
+				RtPageActionsComponent,
+				RtPagePhoneMenuComponent,
+				RtTooltipDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK$3,
+				"(mouseleave)": "schedulePanelClose()",
+				"(mouseenter)": "cancelPanelClose()",
+				"(document:keydown.escape)": "closeAll()",
+				"(document:click)": "onDocumentClick($event)"
+			},
+			template: "<ng-container rtBlock=\"rt-page-rail\">\n    <button\n        #burger\n        rtElem=\"burger\"\n        type=\"button\"\n        qa-dataid=\"rail-burger\"\n        [attr.aria-label]=\"t().uiNavMenu\"\n        [attr.aria-expanded]=\"phoneMenuOpen()\"\n        (click)=\"openPhoneMenu()\">\n        <rt-icon name=\"bars\" size=\"md\" />\n    </button>\n\n    <div rtElem=\"logo\"><ng-content select=\"[rtRailLogo]\" /></div>\n\n    <nav rtElem=\"sections\" qa-dataid=\"rail-sections\" [attr.aria-label]=\"navLabel()\">\n        @for (section of sections(); track section.id) {\n            @switch (section.kind) {\n                @case (EntryKind.Panel) {\n                    <button\n                        rtElem=\"item\"\n                        type=\"button\"\n                        qa-dataid=\"rail-item\"\n                        [rtMod]=\"{ active: activeIds().has(section.id), open: openSection()?.id === section.id }\"\n                        [attr.data-id]=\"section.id\"\n                        [attr.aria-label]=\"section.label\"\n                        [attr.aria-haspopup]=\"true\"\n                        [attr.aria-expanded]=\"openSection()?.id === section.id\"\n                        (mouseenter)=\"openPanel(section.id)\"\n                        (click)=\"togglePanel(section.id, $event)\">\n                        <ng-container [ngTemplateOutlet]=\"plate\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                    </button>\n                }\n                @case (EntryKind.Link) {\n                    <a\n                        rtElem=\"item\"\n                        qa-dataid=\"rail-item\"\n                        rtTooltipPlacement=\"right\"\n                        routerLinkActive=\"rt-page-rail__item--active\"\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                        (mouseenter)=\"closePanel()\">\n                        <ng-container [ngTemplateOutlet]=\"plate\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                    </a>\n                }\n                @default {\n                    <button\n                        rtElem=\"item\"\n                        type=\"button\"\n                        qa-dataid=\"rail-item\"\n                        rtTooltipPlacement=\"right\"\n                        [rtMod]=\"{ disabled: section.disabled }\"\n                        [attr.data-id]=\"section.id\"\n                        [attr.aria-label]=\"section.label\"\n                        [attr.aria-disabled]=\"section.disabled || null\"\n                        [rtTooltip]=\"section.label\"\n                        (mouseenter)=\"closePanel()\"\n                        (click)=\"section.disabled || itemClick.emit(section.id)\">\n                        <ng-container [ngTemplateOutlet]=\"plate\" [ngTemplateOutletContext]=\"{ $implicit: section }\" />\n                    </button>\n                }\n            }\n        }\n    </nav>\n\n    <div rtElem=\"page\"><ng-content select=\"[rtRailPage]\" /></div>\n\n    @if (foot()) {\n        <rt-page-actions\n            placement=\"rail\"\n            qa-dataid=\"rail-foot\"\n            [items]=\"footItems()\"\n            [user]=\"user()\"\n            [userMenu]=\"userMenu()\"\n            (itemClick)=\"itemClick.emit($event)\"\n            (userClick)=\"userClick.emit()\" />\n    }\n\n    @if (openSection(); as section) {\n        <div rtElem=\"panel\" role=\"menu\" qa-dataid=\"rail-panel\" [attr.data-id]=\"section.id\">\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\">{{ group.label }}</div>\n                    }\n                    @for (entry of group.items; track entry.id) {\n                        @if (entry.kind === EntryKind.Link) {\n                            <a\n                                rtElem=\"panel-item\"\n                                role=\"menuitem\"\n                                qa-dataid=\"rail-panel-item\"\n                                routerLinkActive=\"rt-page-rail__panel-item--active\"\n                                [attr.data-id]=\"entry.id\"\n                                [routerLink]=\"entry.route\"\n                                [routerLinkActiveOptions]=\"{ exact: entry.routerLinkActiveExact }\"\n                                (click)=\"closePanel()\">\n                                {{ entry.label }}\n                            </a>\n                        } @else {\n                            <button\n                                rtElem=\"panel-item\"\n                                type=\"button\"\n                                role=\"menuitem\"\n                                qa-dataid=\"rail-panel-item\"\n                                [rtMod]=\"{ disabled: entry.disabled }\"\n                                [attr.data-id]=\"entry.id\"\n                                [attr.aria-disabled]=\"entry.disabled || null\"\n                                (click)=\"entry.disabled || onEntryClick(entry.id)\">\n                                {{ entry.label }}\n                            </button>\n                        }\n                    }\n                </div>\n            }\n        </div>\n    }\n\n    @if (phoneMenuOpen()) {\n        <div rtElem=\"phone-menu\" qa-dataid=\"rail-phone-menu\">\n            <button\n                rtElem=\"phone-backdrop\"\n                type=\"button\"\n                qa-dataid=\"rail-phone-backdrop\"\n                [attr.aria-label]=\"t().bottomSheetClose\"\n                (click)=\"closePhoneMenu()\"></button>\n            <div #phoneColumn rtElem=\"phone-column\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t().uiNavMenu\">\n                <rt-page-phone-menu\n                    [sections]=\"sections()\"\n                    [activeIds]=\"activeIds()\"\n                    [navLabel]=\"navLabel()\"\n                    (itemClick)=\"itemClick.emit($event)\"\n                    (closed)=\"closePhoneMenu()\" />\n            </div>\n        </div>\n    }\n</ng-container>\n\n<ng-template #plate let-section>\n    <span rtBlock=\"rt-page-rail-plate\">\n        @if (section.icon; as icon) {\n            <rt-icon size=\"sm\" [name]=\"icon\" />\n        } @else {\n            <span rtElem=\"letter\" aria-hidden=\"true\" qa-dataid=\"rail-letter\">{{ section.label.charAt(0) }}</span>\n        }\n        @if (section.unread) {\n            <span rtElem=\"marker\" role=\"img\" qa-dataid=\"rail-marker\" [attr.aria-label]=\"t().uiNavUnread\"></span>\n        }\n    </span>\n</ng-template>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-rail{--rt-page-rail-border-width: var(--rt-border-width-thin);--rt-page-rail-plate-radius: var(--rt-radius-md);--rt-page-rail-marker-radius: var(--rt-radius-full);--rt-page-rail-transition-duration: var(--rt-duration-fast);position:sticky;z-index:var(--rt-z-sticky);top:0;display:flex;width:50px;height:100dvh;box-sizing:border-box;flex:none;flex-direction:column;background-color:var(--rt-nav-header-color-bg)}.rt-page-rail:after{position:absolute;width:var(--rt-page-rail-border-width);background-color:var(--rt-color-border-default);content:\"\";inset-block:0;inset-inline-end:0;pointer-events:none}.rt-page-rail__burger{display:none;width:36px;height:36px;flex:none;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-nav-item-color);cursor:pointer}.rt-page-rail__logo{display:flex;height:64px;box-sizing:border-box;flex:none;justify-content:center;padding-top:var(--rt-space-5)}.rt-page-rail__sections{display:flex;min-height:0;flex:1 1 auto;flex-direction:column;-ms-overflow-style:none;overflow-y:auto;scrollbar-width:none}.rt-page-rail__sections::-webkit-scrollbar{display:none}.rt-page-rail__item{display:flex;width:100%;height:50px;flex:none;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--rt-nav-item-color);cursor:pointer;text-decoration:none}.rt-page-rail__item:hover .rt-page-rail-plate,.rt-page-rail__item--open .rt-page-rail-plate{background-color:var(--rt-nav-item-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-rail__item--active .rt-page-rail-plate{border-color:var(--rt-color-border-default);background-color:var(--rt-nav-item-color-bg-active)}.rt-page-rail__item:focus-visible{outline:none}.rt-page-rail__item:focus-visible .rt-page-rail-plate{outline:1px dashed var(--rt-nav-color-focus);outline-offset:1px}.rt-page-rail__item--disabled{color:var(--rt-nav-color-disabled);cursor:default}.rt-page-rail__item--disabled:hover .rt-page-rail-plate{background-color:transparent;color:inherit}.rt-page-rail__page{display:none}.rt-page-rail__panel{position:fixed;z-index:var(--rt-z-dropdown);top:0;bottom:0;left:50px;display:flex;overflow:hidden auto;width:220px;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-5) calc(var(--rt-space-2) + var(--rt-space-1));background-color:var(--rt-nav-panel-color-bg);gap:var(--rt-space-8)}.rt-page-rail__panel:after{position:absolute;width:var(--rt-page-rail-border-width);background-color:var(--rt-color-border-default);content:\"\";inset-block:0;inset-inline-end:0;pointer-events:none}.rt-page-rail__group{display:flex;flex-direction:column;gap:var(--rt-space-0-5)}.rt-page-rail__group-title{display:flex;height:32px;align-items:center;color:var(--rt-nav-panel-group-color);font-size:var(--rt-nav-panel-group-font-size);font-weight:var(--rt-nav-panel-group-font-weight);padding-inline:var(--rt-space-2)}.rt-page-rail__panel-item{display:flex;width:100%;height:32px;box-sizing:border-box;align-items:center;padding:var(--rt-nav-panel-item-padding);border:0;border-radius:var(--rt-page-rail-plate-radius);background:transparent;color:var(--rt-nav-panel-item-color);cursor:pointer;font-family:inherit;font-size:var(--rt-nav-panel-item-font-size);font-weight:var(--rt-nav-panel-item-font-weight);text-align:start;text-decoration:none}.rt-page-rail__panel-item:hover{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-rail__panel-item--active,.rt-page-rail__panel-item--active:hover{background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-rail__panel-item--disabled{color:var(--rt-nav-color-disabled);cursor:default}.rt-page-rail__phone-backdrop{position:absolute;padding:0;border:0;background:var(--rt-color-bg-overlay);cursor:pointer;inset:0}.rt-page-rail__phone-column{position:relative;display:flex;width:240px;height:100%}.rt-page-rail__phone-menu{position:fixed;z-index:var(--rt-z-fixed);inset:0}@media(width<=768px){.rt-page-rail{width:100%;height:50px;flex-direction:row;align-items:center;gap:var(--rt-space-1);padding-inline:calc(var(--rt-space-2) + var(--rt-space-1)) var(--rt-space-2)}.rt-page-rail:after{width:auto;height:var(--rt-page-rail-border-width);inset:auto 0 0}.rt-page-rail__burger{display:flex}.rt-page-rail__logo,.rt-page-rail__sections{display:none}.rt-page-rail__page{display:flex;min-width:0;flex:1 1 auto;align-items:center}}.rt-page-rail-plate{position:relative;display:flex;width:36px;height:36px;box-sizing:border-box;align-items:center;justify-content:center;border:var(--rt-page-rail-border-width) solid transparent;border-radius:var(--rt-page-rail-plate-radius);transition:background-color var(--rt-page-rail-transition-duration) linear}.rt-page-rail-plate__letter{font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-semibold);line-height:1}.rt-page-rail-plate__marker{position:absolute;top:calc(var(--rt-space-1) - var(--rt-page-rail-border-width));right:calc(var(--rt-space-1) - var(--rt-page-rail-border-width));width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);border-radius:var(--rt-page-rail-marker-radius);background-color:var(--rt-nav-marker-color)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		burgerRef: [{
+			type: i0.ViewChild,
+			args: ["burger", { isSignal: true }]
+		}],
+		phoneColumnRef: [{
+			type: i0.ViewChild,
+			args: ["phoneColumn", { isSignal: true }]
+		}],
+		sections: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sections",
+				required: true
+			}]
+		}],
+		activeIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIds",
+				required: true
+			}]
+		}],
+		navLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navLabel",
+				required: false
+			}]
+		}],
+		user: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "user",
+				required: false
+			}]
+		}],
+		userMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userMenu",
+				required: false
+			}]
+		}],
+		foot: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "foot",
+				required: false
+			}]
+		}],
+		footItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "footItems",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
+		userClick: [{
+			type: i0.Output,
+			args: ["userClick"]
+		}]
+	}
+});
+const BEM_BLOCK$2 = "rt-page-header-user";
+var RtPageHeaderUserComponent = class RtPageHeaderUserComponent {
+	constructor() {
+		this.name = input.required(...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this.avatar = input.required(...ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []);
+		this.menu = input(null, ...ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []);
+		this.backdropClass = input("", ...ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []);
+		this.userClick = output();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageHeaderUserComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPageHeaderUserComponent,
+			isStandalone: true,
+			selector: "rt-page-header-user",
+			inputs: {
+				name: {
+					classPropertyName: "name",
+					publicName: "name",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				avatar: {
+					classPropertyName: "avatar",
+					publicName: "avatar",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				menu: {
+					classPropertyName: "menu",
+					publicName: "menu",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				backdropClass: {
+					classPropertyName: "backdropClass",
+					publicName: "backdropClass",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { userClick: "userClick" },
+			host: { classAttribute: "rt-page-header-user" },
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-page-header\">\n    @if (menu(); as menuTpl) {\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]=\"backdropClass()\"\n            [rtMod]=\"{ isOpen: userPopover.isOpen() }\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-expanded]=\"userPopover.isOpen()\"\n            [rtPopover]=\"menuTpl\"\n            (click)=\"userPopover.open()\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    } @else {\n        <button rtElem=\"user\" type=\"button\" qa-dataid=\"header-user\" (click)=\"userClick.emit()\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    }\n\n    <ng-template #body>\n        <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ avatar() }}</span>\n        <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ name() }}</span>\n        <span rtElem=\"user-caret\" aria-hidden=\"true\">\n            <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n        </span>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header-user{display:contents}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverBackdropClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageHeaderUserComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-page-header-user",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconComponent,
+				RtPopoverDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: { class: BEM_BLOCK$2 },
+			template: "<ng-container rtBlock=\"rt-page-header\">\n    @if (menu(); as menuTpl) {\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]=\"backdropClass()\"\n            [rtMod]=\"{ isOpen: userPopover.isOpen() }\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-expanded]=\"userPopover.isOpen()\"\n            [rtPopover]=\"menuTpl\"\n            (click)=\"userPopover.open()\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    } @else {\n        <button rtElem=\"user\" type=\"button\" qa-dataid=\"header-user\" (click)=\"userClick.emit()\">\n            <ng-container [ngTemplateOutlet]=\"body\" />\n        </button>\n    }\n\n    <ng-template #body>\n        <span rtElem=\"user-avatar\" aria-hidden=\"true\">{{ avatar() }}</span>\n        <span rtElem=\"user-name\" qa-dataid=\"header-user-name\">{{ name() }}</span>\n        <span rtElem=\"user-caret\" aria-hidden=\"true\">\n            <rt-icon name=\"chevron-up-down\" size=\"xs\" />\n        </span>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header-user{display:contents}}\n"]
+		}]
+	}],
+	propDecorators: {
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: true
+			}]
+		}],
+		avatar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "avatar",
+				required: true
+			}]
+		}],
+		menu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menu",
+				required: false
+			}]
+		}],
+		backdropClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "backdropClass",
+				required: false
+			}]
+		}],
+		userClick: [{
+			type: i0.Output,
+			args: ["userClick"]
+		}]
+	}
+});
+const BEM_BLOCK$1 = "rt-page-header";
 const PAGE_HEADER_MOBILE_BACKDROP = "rt-page-header-mobile-backdrop";
 var RtPageHeaderComponent = class RtPageHeaderComponent {
 	#router;
@@ -378,7 +1586,7 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
 			...ngDevMode ? { debugName: "compactNavPopoverRef" } : /* istanbul ignore next */ {},
 			read: RtPopoverDirective
 		});
-		this.compact = computed(() => this.stickyCompact() && this.#stuck(), ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+		this.compact = computed(() => this.stickyCompact() && this.#stuck() && !this.isVertical(), ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
 		this.compactSections = computed(() => compactSectionsOf(this.sections(), this.compactVisibleCount()), ...ngDevMode ? [{ debugName: "compactSections" }] : /* istanbul ignore next */ []);
 		this.overflowIds = this.#overflowIds.asReadonly();
 		this.moreSections = computed(() => this.sections().filter((section) => this.overflowIds().has(section.id)), ...ngDevMode ? [{ debugName: "moreSections" }] : /* istanbul ignore next */ []);
@@ -396,6 +1604,7 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
 		this.userMenuBackdropClass = computed(() => this.isNarrow() ? PAGE_HEADER_MOBILE_BACKDROP : "", ...ngDevMode ? [{ debugName: "userMenuBackdropClass" }] : /* istanbul ignore next */ []);
 		this.expandedSectionIds = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedSectionIds" }] : /* istanbul ignore next */ []);
 		this.EntryKind = ERtPageHeaderEntry;
+		this.isVertical = computed(() => this.layout() === "vertical", ...ngDevMode ? [{ debugName: "isVertical" }] : /* istanbul ignore next */ []);
 		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
 		this.user = input(null, ...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
 		this.userTitle = input("", ...ngDevMode ? [{ debugName: "userTitle" }] : /* istanbul ignore next */ []);
@@ -409,6 +1618,12 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
 			...ngDevMode ? { debugName: "compactVisibleCount" } : /* istanbul ignore next */ {},
 			transform: numberAttribute
 		});
+		this.layout = input("horizontal", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+		this.railActions = input([], ...ngDevMode ? [{ debugName: "railActions" }] : /* istanbul ignore next */ []);
+		this.railFoot = input(true, {
+			...ngDevMode ? { debugName: "railFoot" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
 		this.navAriaLabel = computed(() => this.ariaLabel() || this.#t_uiMainNav(), ...ngDevMode ? [{ debugName: "navAriaLabel" }] : /* istanbul ignore next */ []);
 		this.itemClick = output();
 		this.userClick = output();
@@ -559,6 +1774,27 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				layout: {
+					classPropertyName: "layout",
+					publicName: "layout",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				railActions: {
+					classPropertyName: "railActions",
+					publicName: "railActions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				railFoot: {
+					classPropertyName: "railFoot",
+					publicName: "railFoot",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -568,7 +1804,8 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
 			host: {
 				properties: {
 					"class.rt-page-header--sticky": "stickyCompact()",
-					"class.rt-page-header--is-compact": "compact()"
+					"class.rt-page-header--is-compact": "compact()",
+					"class.rt-page-header--vertical": "isVertical()"
 				},
 				classAttribute: "rt-page-header"
 			},
@@ -612,9 +1849,9 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
 				}
 			],
 			ngImport: i0,
-			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",
+			template: "@if (isVertical()) {\n    <rt-page-rail\n        [sections]=\"sections()\"\n        [activeIds]=\"activeSectionIds()\"\n        [navLabel]=\"navAriaLabel()\"\n        [user]=\"user()\"\n        [userMenu]=\"userMenu()\"\n        [foot]=\"railFoot()\"\n        [footItems]=\"railActions()\"\n        (itemClick)=\"onItemClick($event)\"\n        (userClick)=\"onUserClick()\">\n        <ng-content select=\"[rtRailLogo]\" ngProjectAs=\"[rtRailLogo]\" />\n        <ng-content select=\"[rtRailPage]\" ngProjectAs=\"[rtRailPage]\" />\n    </rt-page-rail>\n} @else {\n    <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\n                                                                rtElem=\"group-title\"\n                                                                qa-dataid=\"header-nav-group\"\n                                                                [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'\n                                                                            | 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]=\"\n                                                            'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\n                                                        \">\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            <rt-page-header-user\n                [name]=\"u.name\"\n                [avatar]=\"userAvatar()\"\n                [menu]=\"userMenu()\"\n                [backdropClass]=\"userMenuBackdropClass()\"\n                (userClick)=\"onUserClick()\" />\n        }\n    </ng-container>\n}\n",
 			styles: [
-				"@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",
+				"@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)}.rt-page-header--vertical{display:contents}}\n",
 				"@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",
 				"@charset \"UTF-8\";@layer rt-kit.components{.cdk-overlay-backdrop.rt-page-header-mobile-backdrop{background:var(--rt-color-bg-overlay)}.rt-page-header-mobile{--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;min-width:240px;max-width:320px;min-height:0;max-height:100%;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2);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);gap:var(--rt-space-2xs);overflow-y:auto}.rt-page-header-mobile__link,.rt-page-header-mobile__section{position:relative;display:flex;width:100%;align-items:center;padding:var(--rt-nav-item-padding);border:0;border-radius:var(--rt-nav-panel-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);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-mobile__link:hover,.rt-page-header-mobile__section:hover{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-header-mobile__link:focus,.rt-page-header-mobile__section:focus{outline:none}.rt-page-header-mobile__link:focus-visible,.rt-page-header-mobile__section:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header-mobile__link--child{color:var(--rt-nav-panel-item-color);font-weight:var(--rt-nav-panel-item-font-weight)}.rt-page-header-mobile__link--is-active{background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-header-mobile__link--disabled,.rt-page-header-mobile__link:disabled,.rt-page-header-mobile__link[aria-disabled=true]{background-color:transparent;color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header-mobile__link--disabled:hover,.rt-page-header-mobile__link:disabled:hover,.rt-page-header-mobile__link[aria-disabled=true]:hover{background-color:transparent}.rt-page-header-mobile__disabled-slot{display:flex;flex-direction:column;align-items:stretch}.rt-page-header-mobile__section--is-active{background-color:var(--rt-color-bg-surface-subtle)}.rt-page-header-mobile__caret{display:inline-flex;flex-shrink:0;margin-left:auto;color:var(--rt-nav-item-color-caret);transition:transform var(--rt-nav-panel-item-transition-duration) linear}.rt-page-header-mobile__section--is-expanded .rt-page-header-mobile__caret{transform:rotate(180deg)}.rt-page-header-mobile__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-mobile__children{display:flex;flex-direction:column;padding-left:var(--rt-space-4);gap:var(--rt-nav-panel-group-gap)}.rt-page-header-mobile__group{display:flex;flex-direction:column;gap:var(--rt-space-2xs)}.rt-page-header-mobile__group-title{display:flex;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-mobile__group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-page-header-mobile__group-icon,.rt-page-header-mobile__icon{flex-shrink:0}.rt-page-header-mobile__heading{display:flex;min-height:var(--rt-nav-panel-item-height);align-items:center;padding:var(--rt-nav-panel-item-padding);color:var(--rt-nav-item-color);cursor:default;font-size:var(--rt-nav-item-font-size);font-weight:var(--rt-nav-item-font-weight);line-height:var(--rt-leading-tight);white-space:nowrap}.rt-page-header-mobile--more .rt-page-header-mobile__children{padding-left:0}.rt-page-header-mobile--more .rt-page-header-mobile__group-title{letter-spacing:var(--rt-letter-spacing-wide);text-transform:uppercase}}\n",
 				"@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header{--rt-nav-compact-height: 46px;--rt-nav-compact-circle-size: var(--rt-size-6);--rt-nav-compact-circle-overlap: calc(var(--rt-nav-compact-circle-size) / 2);--rt-nav-compact-circle-ring-width: var(--rt-border-width-thick);--rt-nav-compact-circle-radius: var(--rt-radius-full);--rt-nav-compact-circle-color-bg: var(--rt-neutral-100);--rt-nav-compact-circle-color-bg-active: var(--rt-nav-item-color-bg-active);--rt-nav-compact-color-bg: var(--rt-color-bg-surface);--rt-nav-compact-stack-depth: 16}.rt-page-header--sticky{position:sticky;z-index:var(--rt-z-sticky);top:-1px}.rt-page-header__compact{display:none;min-width:0;min-height:var(--rt-nav-compact-height);flex:1 1 auto;align-items:center;gap:var(--rt-space-4)}.rt-page-header--is-compact{min-height:var(--rt-nav-compact-height);padding:0 var(--rt-space-5);border-radius:0;background-color:var(--rt-nav-compact-color-bg)}.rt-page-header--is-compact>:not(.rt-page-header__compact){display:none}.rt-page-header--is-compact .rt-page-header__compact{display:flex}.rt-page-header__compact-stack{display:flex;flex-shrink:0;align-items:center;isolation:isolate}.rt-page-header__compact-circle{--rt-nav-compact-index: 0;position:relative;z-index:calc(var(--rt-nav-compact-stack-depth) - var(--rt-nav-compact-index));display:inline-flex;width:var(--rt-nav-compact-circle-size);height:var(--rt-nav-compact-circle-size);box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-nav-compact-circle-radius);background-color:var(--rt-nav-compact-circle-color-bg);box-shadow:0 0 0 var(--rt-nav-compact-circle-ring-width) var(--rt-nav-compact-color-bg);color:var(--rt-nav-item-color);cursor:pointer;text-decoration:none;transition:color var(--rt-nav-header-transition-duration) linear}.rt-page-header__compact-circle+.rt-page-header__compact-circle{margin-left:calc(-1 * var(--rt-nav-compact-circle-overlap))}.rt-page-header__compact-circle:hover{color:var(--rt-nav-item-color-hover)}.rt-page-header__compact-circle:active{color:var(--rt-nav-item-color-pressed)}.rt-page-header__compact-circle:focus{outline:none}.rt-page-header__compact-circle:focus-visible{z-index:calc(var(--rt-nav-compact-stack-depth) + 1);outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__compact-circle--is-active,.rt-page-header__compact-circle--is-open{background-color:var(--rt-nav-compact-circle-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-header__compact-circle--disabled,.rt-page-header__compact-circle:disabled{color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header__compact-marker{position:absolute;top:0;right:0;width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);border-radius:var(--rt-nav-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-header__compact-slot{display:flex;min-width:0;align-items:center}.rt-page-header__compact-slot--left{flex:0 1 auto}.rt-page-header__compact-slot--center{flex:1 1 auto;justify-content:center}.rt-page-header__compact-slot--right{flex:0 0 auto;margin-left:auto}}\n"
@@ -699,14 +1936,41 @@ var RtPageHeaderComponent = class RtPageHeaderComponent {
 						"rtTooltipHideOnClick",
 						"rtTooltipShowOnTap"
 					],
-					exportAs: ["rtTooltip"]
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "component",
+					type: RtPageHeaderMoreComponent,
+					selector: "rt-page-header-more",
+					inputs: ["sections", "active"],
+					outputs: ["itemClick"]
+				},
+				{
+					kind: "component",
+					type: RtPageRailComponent,
+					selector: "rt-page-rail",
+					inputs: [
+						"sections",
+						"activeIds",
+						"navLabel",
+						"user",
+						"userMenu",
+						"foot",
+						"footItems"
+					],
+					outputs: ["itemClick", "userClick"]
 				},
 				{
 					kind: "component",
-					type: RtPageHeaderMoreComponent,
-					selector: "rt-page-header-more",
-					inputs: ["sections", "active"],
-					outputs: ["itemClick"]
+					type: RtPageHeaderUserComponent,
+					selector: "rt-page-header-user",
+					inputs: [
+						"name",
+						"avatar",
+						"menu",
+						"backdropClass"
+					],
+					outputs: ["userClick"]
 				},
 				{
 					kind: "directive",
@@ -755,18 +2019,21 @@ i0.ɵɵngDeclareClassMetadata({
 				RtPopoverDirective,
 				RtTooltipDirective,
 				RtPageHeaderMoreComponent,
+				RtPageRailComponent,
+				RtPageHeaderUserComponent,
 				BlockDirective,
 				ElemDirective,
 				ModDirective
 			],
 			host: {
-				class: BEM_BLOCK,
+				class: BEM_BLOCK$1,
 				"[class.rt-page-header--sticky]": "stickyCompact()",
-				"[class.rt-page-header--is-compact]": "compact()"
+				"[class.rt-page-header--is-compact]": "compact()",
+				"[class.rt-page-header--vertical]": "isVertical()"
 			},
-			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",
+			template: "@if (isVertical()) {\n    <rt-page-rail\n        [sections]=\"sections()\"\n        [activeIds]=\"activeSectionIds()\"\n        [navLabel]=\"navAriaLabel()\"\n        [user]=\"user()\"\n        [userMenu]=\"userMenu()\"\n        [foot]=\"railFoot()\"\n        [footItems]=\"railActions()\"\n        (itemClick)=\"onItemClick($event)\"\n        (userClick)=\"onUserClick()\">\n        <ng-content select=\"[rtRailLogo]\" ngProjectAs=\"[rtRailLogo]\" />\n        <ng-content select=\"[rtRailPage]\" ngProjectAs=\"[rtRailPage]\" />\n    </rt-page-rail>\n} @else {\n    <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\n                                                                rtElem=\"group-title\"\n                                                                qa-dataid=\"header-nav-group\"\n                                                                [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'\n                                                                            | 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]=\"\n                                                            'uiSectionInProgress' | rtKitLabel: translate() : { label: entry.label }\n                                                        \">\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            <rt-page-header-user\n                [name]=\"u.name\"\n                [avatar]=\"userAvatar()\"\n                [menu]=\"userMenu()\"\n                [backdropClass]=\"userMenuBackdropClass()\"\n                (userClick)=\"onUserClick()\" />\n        }\n    </ng-container>\n}\n",
 			styles: [
-				"@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",
+				"@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)}.rt-page-header--vertical{display:contents}}\n",
 				"@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",
 				"@charset \"UTF-8\";@layer rt-kit.components{.cdk-overlay-backdrop.rt-page-header-mobile-backdrop{background:var(--rt-color-bg-overlay)}.rt-page-header-mobile{--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;min-width:240px;max-width:320px;min-height:0;max-height:100%;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2);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);gap:var(--rt-space-2xs);overflow-y:auto}.rt-page-header-mobile__link,.rt-page-header-mobile__section{position:relative;display:flex;width:100%;align-items:center;padding:var(--rt-nav-item-padding);border:0;border-radius:var(--rt-nav-panel-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);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-mobile__link:hover,.rt-page-header-mobile__section:hover{background-color:var(--rt-nav-panel-item-color-bg-hover)}.rt-page-header-mobile__link:focus,.rt-page-header-mobile__section:focus{outline:none}.rt-page-header-mobile__link:focus-visible,.rt-page-header-mobile__section:focus-visible{outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header-mobile__link--child{color:var(--rt-nav-panel-item-color);font-weight:var(--rt-nav-panel-item-font-weight)}.rt-page-header-mobile__link--is-active{background-color:var(--rt-nav-panel-item-color-bg-active);color:var(--rt-nav-panel-item-color-active)}.rt-page-header-mobile__link--disabled,.rt-page-header-mobile__link:disabled,.rt-page-header-mobile__link[aria-disabled=true]{background-color:transparent;color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header-mobile__link--disabled:hover,.rt-page-header-mobile__link:disabled:hover,.rt-page-header-mobile__link[aria-disabled=true]:hover{background-color:transparent}.rt-page-header-mobile__disabled-slot{display:flex;flex-direction:column;align-items:stretch}.rt-page-header-mobile__section--is-active{background-color:var(--rt-color-bg-surface-subtle)}.rt-page-header-mobile__caret{display:inline-flex;flex-shrink:0;margin-left:auto;color:var(--rt-nav-item-color-caret);transition:transform var(--rt-nav-panel-item-transition-duration) linear}.rt-page-header-mobile__section--is-expanded .rt-page-header-mobile__caret{transform:rotate(180deg)}.rt-page-header-mobile__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-mobile__children{display:flex;flex-direction:column;padding-left:var(--rt-space-4);gap:var(--rt-nav-panel-group-gap)}.rt-page-header-mobile__group{display:flex;flex-direction:column;gap:var(--rt-space-2xs)}.rt-page-header-mobile__group-title{display:flex;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-mobile__group-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-page-header-mobile__group-icon,.rt-page-header-mobile__icon{flex-shrink:0}.rt-page-header-mobile__heading{display:flex;min-height:var(--rt-nav-panel-item-height);align-items:center;padding:var(--rt-nav-panel-item-padding);color:var(--rt-nav-item-color);cursor:default;font-size:var(--rt-nav-item-font-size);font-weight:var(--rt-nav-item-font-weight);line-height:var(--rt-leading-tight);white-space:nowrap}.rt-page-header-mobile--more .rt-page-header-mobile__children{padding-left:0}.rt-page-header-mobile--more .rt-page-header-mobile__group-title{letter-spacing:var(--rt-letter-spacing-wide);text-transform:uppercase}}\n",
 				"@charset \"UTF-8\";@layer rt-kit.components{.rt-page-header{--rt-nav-compact-height: 46px;--rt-nav-compact-circle-size: var(--rt-size-6);--rt-nav-compact-circle-overlap: calc(var(--rt-nav-compact-circle-size) / 2);--rt-nav-compact-circle-ring-width: var(--rt-border-width-thick);--rt-nav-compact-circle-radius: var(--rt-radius-full);--rt-nav-compact-circle-color-bg: var(--rt-neutral-100);--rt-nav-compact-circle-color-bg-active: var(--rt-nav-item-color-bg-active);--rt-nav-compact-color-bg: var(--rt-color-bg-surface);--rt-nav-compact-stack-depth: 16}.rt-page-header--sticky{position:sticky;z-index:var(--rt-z-sticky);top:-1px}.rt-page-header__compact{display:none;min-width:0;min-height:var(--rt-nav-compact-height);flex:1 1 auto;align-items:center;gap:var(--rt-space-4)}.rt-page-header--is-compact{min-height:var(--rt-nav-compact-height);padding:0 var(--rt-space-5);border-radius:0;background-color:var(--rt-nav-compact-color-bg)}.rt-page-header--is-compact>:not(.rt-page-header__compact){display:none}.rt-page-header--is-compact .rt-page-header__compact{display:flex}.rt-page-header__compact-stack{display:flex;flex-shrink:0;align-items:center;isolation:isolate}.rt-page-header__compact-circle{--rt-nav-compact-index: 0;position:relative;z-index:calc(var(--rt-nav-compact-stack-depth) - var(--rt-nav-compact-index));display:inline-flex;width:var(--rt-nav-compact-circle-size);height:var(--rt-nav-compact-circle-size);box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--rt-nav-compact-circle-radius);background-color:var(--rt-nav-compact-circle-color-bg);box-shadow:0 0 0 var(--rt-nav-compact-circle-ring-width) var(--rt-nav-compact-color-bg);color:var(--rt-nav-item-color);cursor:pointer;text-decoration:none;transition:color var(--rt-nav-header-transition-duration) linear}.rt-page-header__compact-circle+.rt-page-header__compact-circle{margin-left:calc(-1 * var(--rt-nav-compact-circle-overlap))}.rt-page-header__compact-circle:hover{color:var(--rt-nav-item-color-hover)}.rt-page-header__compact-circle:active{color:var(--rt-nav-item-color-pressed)}.rt-page-header__compact-circle:focus{outline:none}.rt-page-header__compact-circle:focus-visible{z-index:calc(var(--rt-nav-compact-stack-depth) + 1);outline:2px dashed var(--rt-nav-color-focus);outline-offset:2px}.rt-page-header__compact-circle--is-active,.rt-page-header__compact-circle--is-open{background-color:var(--rt-nav-compact-circle-color-bg-active);color:var(--rt-nav-item-color-hover)}.rt-page-header__compact-circle--disabled,.rt-page-header__compact-circle:disabled{color:var(--rt-nav-color-disabled);cursor:not-allowed}.rt-page-header__compact-marker{position:absolute;top:0;right:0;width:var(--rt-nav-marker-size);height:var(--rt-nav-marker-size);border-radius:var(--rt-nav-marker-radius);background-color:var(--rt-nav-marker-color)}.rt-page-header__compact-slot{display:flex;min-width:0;align-items:center}.rt-page-header__compact-slot--left{flex:0 1 auto}.rt-page-header__compact-slot--center{flex:1 1 auto;justify-content:center}.rt-page-header__compact-slot--right{flex:0 0 auto;margin-left:auto}}\n"
@@ -857,6 +2124,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		railActions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "railActions",
+				required: false
+			}]
+		}],
+		railFoot: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "railFoot",
+				required: false
+			}]
+		}],
 		itemClick: [{
 			type: i0.Output,
 			args: ["itemClick"]
@@ -867,6 +2158,475 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { RtPageHeaderComponent };
+var RtPageBarFilterDirective = class RtPageBarFilterDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageBarFilterDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtPageBarFilterDirective,
+			isStandalone: true,
+			selector: "[rtPageBarFilter]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageBarFilterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtPageBarFilter]" }]
+	}]
+});
+var RtPageBarSearchDirective = class RtPageBarSearchDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageBarSearchDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtPageBarSearchDirective,
+			isStandalone: true,
+			selector: "[rtPageBarSearch]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageBarSearchDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtPageBarSearch]" }]
+	}]
+});
+const NARROW_WIDTH = 768;
+const INLINE_PADDING = 40;
+const RT_PAGE_BAR_SIZES = {
+	gap: 12,
+	filterOneRow: 170,
+	filterTwoRows: 150,
+	searchMin: 390,
+	more: 185
+};
+const GAP = RT_PAGE_BAR_SIZES.gap;
+const FILTER_ONE_ROW = RT_PAGE_BAR_SIZES.filterOneRow;
+const FILTER_TWO_ROWS = RT_PAGE_BAR_SIZES.filterTwoRows;
+const SEARCH_MIN = RT_PAGE_BAR_SIZES.searchMin;
+const MORE_WIDTH = RT_PAGE_BAR_SIZES.more;
+function actionsWidthOf(count) {
+	return count > 0 ? count * 40 - 8 : 0;
+}
+function filtersInSecondRow(content, count, hasSearch) {
+	const room = content - (hasSearch ? SEARCH_MIN + GAP : 0);
+	if (Math.floor((room + GAP) / (FILTER_TWO_ROWS + GAP)) >= count) return count;
+	return Math.max(0, Math.floor((room - MORE_WIDTH) / (FILTER_TWO_ROWS + GAP)));
+}
+function pageBarFit(input) {
+	if (input.width <= 0) return {
+		mode: "one",
+		rowFilters: input.filterCount
+	};
+	if (input.width <= NARROW_WIDTH) return {
+		mode: "narrow",
+		rowFilters: 0
+	};
+	const content = input.width - INLINE_PADDING;
+	if (input.titleWidth + (input.hasSearch ? GAP + SEARCH_MIN : 0) + input.filterCount * (GAP + FILTER_ONE_ROW) + (input.actionsWidth > 0 ? GAP + input.actionsWidth : 0) <= content || !input.hasSearch && input.filterCount === 0) return {
+		mode: "one",
+		rowFilters: input.filterCount
+	};
+	return {
+		mode: "two",
+		rowFilters: filtersInSecondRow(content, input.filterCount, input.hasSearch)
+	};
+}
+const BEM_BLOCK = "rt-page-bar";
+var RtPageBarComponent = class RtPageBarComponent {
+	#host;
+	#window;
+	#width;
+	#titleWidth;
+	#fontLoads;
+	#fit;
+	constructor() {
+		this.#host = inject(ElementRef).nativeElement;
+		this.#window = inject(WINDOW);
+		this.#width = signal(0, ...ngDevMode ? [{ debugName: "#width" }] : /* istanbul ignore next */ []);
+		this.#titleWidth = signal(0, ...ngDevMode ? [{ debugName: "#titleWidth" }] : /* istanbul ignore next */ []);
+		this.#fontLoads = signal(0, ...ngDevMode ? [{ debugName: "#fontLoads" }] : /* istanbul ignore next */ []);
+		this.#fit = computed(() => pageBarFit({
+			width: this.#width(),
+			titleWidth: this.#titleWidth(),
+			actionsWidth: actionsWidthOf(this.actions().length),
+			filterCount: this.filters().length,
+			hasSearch: this.search() !== void 0
+		}), ...ngDevMode ? [{ debugName: "#fit" }] : /* istanbul ignore next */ []);
+		this.t = inject(RT_KIT_LABELS);
+		this.titleRef = viewChild("title", ...ngDevMode ? [{ debugName: "titleRef" }] : /* istanbul ignore next */ []);
+		this.filters = contentChildren(RtPageBarFilterDirective, ...ngDevMode ? [{ debugName: "filters" }] : /* istanbul ignore next */ []);
+		this.search = contentChild(RtPageBarSearchDirective, ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
+		this.mode = computed(() => this.#fit().mode, ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+		this.isNarrow = computed(() => this.mode() === "narrow", ...ngDevMode ? [{ debugName: "isNarrow" }] : /* istanbul ignore next */ []);
+		this.rowFilters = computed(() => this.filters().slice(0, this.#fit().rowFilters), ...ngDevMode ? [{ debugName: "rowFilters" }] : /* istanbul ignore next */ []);
+		this.moreFilters = computed(() => this.filters().slice(this.#fit().rowFilters), ...ngDevMode ? [{ debugName: "moreFilters" }] : /* istanbul ignore next */ []);
+		this.sheetOpen = linkedSignal({
+			...ngDevMode ? { debugName: "sheetOpen" } : /* istanbul ignore next */ {},
+			source: this.isNarrow,
+			computation: () => false
+		});
+		this.pageTitle = input.required(...ngDevMode ? [{ debugName: "pageTitle" }] : /* istanbul ignore next */ []);
+		this.actions = input([], ...ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []);
+		this.filtersActive = input(false, {
+			...ngDevMode ? { debugName: "filtersActive" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.actionClick = output();
+		this.filtersApply = output();
+		const destroyRef = inject(DestroyRef);
+		let watch = null;
+		afterRenderEffect(() => {
+			if (watch === null && "ResizeObserver" in this.#window) {
+				watch = new this.#window.ResizeObserver(() => this.#width.set(this.#host.getBoundingClientRect().width));
+				watch.observe(this.#host);
+			}
+			this.pageTitle();
+			this.#fontLoads();
+			const title = this.titleRef()?.nativeElement;
+			if (title !== void 0 && !this.isNarrow()) this.#titleWidth.set(title.scrollWidth);
+		});
+		const doc = inject(DOCUMENT);
+		const fonts = "fonts" in doc ? doc.fonts : null;
+		const onFontsLoaded = () => this.#fontLoads.update((count) => count + 1);
+		fonts?.addEventListener("loadingdone", onFontsLoaded);
+		destroyRef.onDestroy(() => {
+			watch?.disconnect();
+			fonts?.removeEventListener("loadingdone", onFontsLoaded);
+		});
+	}
+	onApply() {
+		this.filtersApply.emit();
+		this.sheetOpen.set(false);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageBarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPageBarComponent,
+			isStandalone: true,
+			selector: "rt-page-bar",
+			inputs: {
+				pageTitle: {
+					classPropertyName: "pageTitle",
+					publicName: "pageTitle",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				actions: {
+					classPropertyName: "actions",
+					publicName: "actions",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				filtersActive: {
+					classPropertyName: "filtersActive",
+					publicName: "filtersActive",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				actionClick: "actionClick",
+				filtersApply: "filtersApply"
+			},
+			host: {
+				properties: { "class.rt-page-bar--narrow": "isNarrow()" },
+				classAttribute: "rt-page-bar"
+			},
+			queries: [{
+				propertyName: "filters",
+				predicate: RtPageBarFilterDirective,
+				isSignal: true
+			}, {
+				propertyName: "search",
+				first: true,
+				predicate: RtPageBarSearchDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			viewQueries: [{
+				propertyName: "titleRef",
+				first: true,
+				predicate: ["title"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-page-bar\">\n    <div rtElem=\"row\">\n        <h1 rtElem=\"title\" qa-dataid=\"page-bar-title\" #title [attr.title]=\"pageTitle()\">{{ pageTitle() }}</h1>\n\n        @switch (mode()) {\n            @case ('narrow') {\n                <span rtElem=\"spacer\"></span>\n                @if (filters().length > 0 || search()) {\n                    <span rtElem=\"filters-trigger\">\n                        <rt-icon-button\n                            icon=\"filter\"\n                            size=\"sm\"\n                            qa-dataid=\"page-bar-filters\"\n                            [ariaLabel]=\"filtersActive() ? t().uiFiltersActive : t().uiFilters\"\n                            (click)=\"sheetOpen.set(true)\" />\n                        @if (filtersActive()) {\n                            <span rtElem=\"dot\" qa-dataid=\"page-bar-filters-dot\"></span>\n                        }\n                    </span>\n                }\n                @if (actions().length > 0) {\n                    <rt-menu qa-dataid=\"page-bar-actions-menu\" triggerSize=\"sm\" panelClass=\"rt-page-bar-menu\" [ariaLabel]=\"t().uiActions\">\n                        @for (action of actions(); track action.id) {\n                            <rt-menu-item\n                                [icon]=\"action.icon\"\n                                [label]=\"action.label\"\n                                [disabled]=\"action.disabled ?? false\"\n                                (selected)=\"actionClick.emit(action.id)\" />\n                        }\n                    </rt-menu>\n                }\n            }\n            @case ('one') {\n                <ng-container [ngTemplateOutlet]=\"filterRow\" [ngTemplateOutletContext]=\"{ wide: true }\" />\n                <ng-container [ngTemplateOutlet]=\"actionRow\" />\n            }\n            @default {\n                <span rtElem=\"spacer\"></span>\n                <ng-container [ngTemplateOutlet]=\"actionRow\" />\n            }\n        }\n    </div>\n\n    @if (mode() === 'two') {\n        <div rtElem=\"row\" qa-dataid=\"page-bar-second-row\">\n            <ng-container [ngTemplateOutlet]=\"filterRow\" [ngTemplateOutletContext]=\"{ wide: false }\" />\n            @if (moreFilters().length > 0) {\n                <button\n                    rtButton\n                    rtElem=\"more\"\n                    type=\"button\"\n                    theme=\"secondary\"\n                    appearance=\"outlined\"\n                    size=\"sm\"\n                    icon=\"ico-plus\"\n                    qa-dataid=\"page-bar-more-filters\"\n                    rtPopoverAlign=\"end\"\n                    [label]=\"t().uiMoreFilters + ' · ' + moreFilters().length\"\n                    [attr.aria-label]=\"t().uiMoreFilters + ' · ' + moreFilters().length\"\n                    [rtPopover]=\"morePanel\"></button>\n            }\n        </div>\n    }\n\n    @if (isNarrow() && sheetOpen()) {\n        <rt-bottom-sheet [open]=\"true\" (openChange)=\"sheetOpen.set($event)\">\n            <span sheetHeader>{{ t().uiPageFilters }}</span>\n            <div rtElem=\"sheet\" qa-dataid=\"page-bar-sheet\">\n                @if (search(); as searchSlot) {\n                    <ng-container [ngTemplateOutlet]=\"searchSlot.templateRef\" />\n                }\n                @for (filter of filters(); track filter) {\n                    <ng-container [ngTemplateOutlet]=\"filter.templateRef\" />\n                }\n            </div>\n            <button sheetFooter rtButton rtElem=\"apply\" type=\"button\" qa-dataid=\"page-bar-apply\" (click)=\"onApply()\">\n                {{ t().uiApply }}\n            </button>\n        </rt-bottom-sheet>\n    }\n\n    <ng-template #filterRow let-wide=\"wide\">\n        @if (search(); as searchSlot) {\n            <div rtElem=\"search\"><ng-container [ngTemplateOutlet]=\"searchSlot.templateRef\" /></div>\n        }\n        @for (filter of rowFilters(); track filter) {\n            <div rtElem=\"filter\" [rtMod]=\"{ wide: wide }\"><ng-container [ngTemplateOutlet]=\"filter.templateRef\" /></div>\n        }\n    </ng-template>\n\n    <ng-template #actionRow>\n        @if (actions().length > 0) {\n            <div rtElem=\"actions\">\n                @for (action of actions(); track action.id) {\n                    <rt-icon-button\n                        qa-dataid=\"page-bar-action\"\n                        size=\"sm\"\n                        variant=\"primary\"\n                        [attr.data-id]=\"action.id\"\n                        [icon]=\"action.icon\"\n                        [ariaLabel]=\"action.label\"\n                        [tooltip]=\"action.label\"\n                        [disabled]=\"action.disabled ?? false\"\n                        (click)=\"actionClick.emit(action.id)\" />\n                }\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #morePanel>\n        <div rtBlock=\"rt-page-bar-more\" qa-dataid=\"page-bar-more-panel\">\n            @for (filter of moreFilters(); track filter) {\n                <ng-container [ngTemplateOutlet]=\"filter.templateRef\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-bar{--rt-page-bar-control-border-width: var(--rt-border-width-thin);--rt-page-bar-dot-radius: var(--rt-radius-full);position:relative;display:flex;min-width:0;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2) var(--rt-space-5);gap:var(--rt-space-2)}.rt-page-bar:not(.rt-page-bar--narrow):after{position:absolute;height:var(--rt-page-bar-control-border-width);background-color:var(--rt-color-border-default);content:\"\";inset:auto 0 0;pointer-events:none}.rt-page-bar__row{display:flex;min-width:0;height:40px;align-items:center;gap:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-page-bar__title{overflow:hidden;min-width:0;flex:0 1 auto;margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xl);font-weight:var(--rt-font-weight-semibold);line-height:24px;text-overflow:ellipsis;white-space:nowrap}.rt-page-bar__spacer{flex:1 1 0}.rt-page-bar__search{min-width:0;max-width:540px;flex:1 1 0}.rt-page-bar__filter{width:150px;flex:none}.rt-page-bar__filter--wide{width:170px}.rt-page-bar__actions{display:flex;flex:none;gap:var(--rt-space-2);margin-inline-start:auto}.rt-page-bar__more{width:185px;flex:none}.rt-page-bar__filters-trigger{position:relative;display:inline-flex;flex:none}.rt-page-bar .rt-menu--open .rt-icon-button{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-bar__dot{position:absolute;top:calc(var(--rt-space-1) + var(--rt-space-0-5));right:var(--rt-space-1);width:4px;height:4px;border-radius:var(--rt-page-bar-dot-radius);background-color:var(--rt-nav-marker-color);pointer-events:none}.rt-page-bar__sheet{display:flex;flex-direction:column;gap:calc(var(--rt-space-2) + var(--rt-space-1));padding-block-end:var(--rt-space-4);padding-inline:var(--rt-space-5)}.rt-page-bar__apply{flex:1 1 auto}.rt-page-bar--narrow .rt-page-bar__row{height:32px;gap:var(--rt-space-1)}.rt-page-bar--narrow .rt-page-bar__title{flex:1 1 0;font-size:var(--rt-text-md);line-height:20px}.rt-page-bar--narrow .rt-page-bar__spacer{display:none}@media(width<=768px){.rt-page-bar{min-width:0;flex:1 1 0;padding:0}}.rt-page-bar-menu{margin-block-start:9px}.rt-page-bar-menu .rt-menu__panel{min-width:220px;box-sizing:border-box}.rt-page-bar-more{--rt-page-bar-more-radius: var(--rt-overlay-menu-radius);--rt-page-bar-more-border-width: var(--rt-border-width-thin);--rt-page-bar-more-shadow: var(--rt-overlay-menu-shadow);display:flex;width:240px;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2);border:var(--rt-page-bar-more-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-page-bar-more-radius);background-color:var(--rt-overlay-menu-bg);box-shadow:var(--rt-page-bar-more-shadow);gap:var(--rt-space-2)}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtBottomSheetComponent,
+					selector: "rt-bottom-sheet",
+					inputs: ["open"],
+					outputs: ["openChange"]
+				},
+				{
+					kind: "directive",
+					type: RtButtonDirective,
+					selector: "button[rtButton], a[rtButton]",
+					inputs: [
+						"label",
+						"icon",
+						"iconPos",
+						"theme",
+						"appearance",
+						"size",
+						"loading",
+						"loadingIcon",
+						"loadingLabel",
+						"pressed"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconButtonComponent,
+					selector: "rt-icon-button",
+					inputs: [
+						"icon",
+						"glyph",
+						"ariaLabel",
+						"variant",
+						"iconColor",
+						"iconFill",
+						"size",
+						"iconSize",
+						"type",
+						"tooltip",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"ariaHaspopup",
+						"link",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtMenuComponent,
+					selector: "rt-menu",
+					inputs: [
+						"icon",
+						"ariaLabel",
+						"align",
+						"panelClass",
+						"triggerSize",
+						"size",
+						"disabled"
+					],
+					outputs: ["openedChange"]
+				},
+				{
+					kind: "component",
+					type: RtMenuItemComponent,
+					selector: "rt-menu-item",
+					inputs: [
+						"icon",
+						"label",
+						"danger",
+						"success",
+						"glyph",
+						"fill",
+						"current",
+						"disabled",
+						"confirmMessage",
+						"confirmTitle",
+						"confirmLabel",
+						"confirmCancelLabel",
+						"confirmTone",
+						"link"
+					],
+					outputs: ["selected"]
+				},
+				{
+					kind: "directive",
+					type: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverBackdropClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-page-bar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtBottomSheetComponent,
+				RtButtonDirective,
+				RtIconButtonComponent,
+				RtMenuComponent,
+				RtMenuItemComponent,
+				RtPopoverDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-page-bar--narrow]": "isNarrow()"
+			},
+			template: "<ng-container rtBlock=\"rt-page-bar\">\n    <div rtElem=\"row\">\n        <h1 rtElem=\"title\" qa-dataid=\"page-bar-title\" #title [attr.title]=\"pageTitle()\">{{ pageTitle() }}</h1>\n\n        @switch (mode()) {\n            @case ('narrow') {\n                <span rtElem=\"spacer\"></span>\n                @if (filters().length > 0 || search()) {\n                    <span rtElem=\"filters-trigger\">\n                        <rt-icon-button\n                            icon=\"filter\"\n                            size=\"sm\"\n                            qa-dataid=\"page-bar-filters\"\n                            [ariaLabel]=\"filtersActive() ? t().uiFiltersActive : t().uiFilters\"\n                            (click)=\"sheetOpen.set(true)\" />\n                        @if (filtersActive()) {\n                            <span rtElem=\"dot\" qa-dataid=\"page-bar-filters-dot\"></span>\n                        }\n                    </span>\n                }\n                @if (actions().length > 0) {\n                    <rt-menu qa-dataid=\"page-bar-actions-menu\" triggerSize=\"sm\" panelClass=\"rt-page-bar-menu\" [ariaLabel]=\"t().uiActions\">\n                        @for (action of actions(); track action.id) {\n                            <rt-menu-item\n                                [icon]=\"action.icon\"\n                                [label]=\"action.label\"\n                                [disabled]=\"action.disabled ?? false\"\n                                (selected)=\"actionClick.emit(action.id)\" />\n                        }\n                    </rt-menu>\n                }\n            }\n            @case ('one') {\n                <ng-container [ngTemplateOutlet]=\"filterRow\" [ngTemplateOutletContext]=\"{ wide: true }\" />\n                <ng-container [ngTemplateOutlet]=\"actionRow\" />\n            }\n            @default {\n                <span rtElem=\"spacer\"></span>\n                <ng-container [ngTemplateOutlet]=\"actionRow\" />\n            }\n        }\n    </div>\n\n    @if (mode() === 'two') {\n        <div rtElem=\"row\" qa-dataid=\"page-bar-second-row\">\n            <ng-container [ngTemplateOutlet]=\"filterRow\" [ngTemplateOutletContext]=\"{ wide: false }\" />\n            @if (moreFilters().length > 0) {\n                <button\n                    rtButton\n                    rtElem=\"more\"\n                    type=\"button\"\n                    theme=\"secondary\"\n                    appearance=\"outlined\"\n                    size=\"sm\"\n                    icon=\"ico-plus\"\n                    qa-dataid=\"page-bar-more-filters\"\n                    rtPopoverAlign=\"end\"\n                    [label]=\"t().uiMoreFilters + ' · ' + moreFilters().length\"\n                    [attr.aria-label]=\"t().uiMoreFilters + ' · ' + moreFilters().length\"\n                    [rtPopover]=\"morePanel\"></button>\n            }\n        </div>\n    }\n\n    @if (isNarrow() && sheetOpen()) {\n        <rt-bottom-sheet [open]=\"true\" (openChange)=\"sheetOpen.set($event)\">\n            <span sheetHeader>{{ t().uiPageFilters }}</span>\n            <div rtElem=\"sheet\" qa-dataid=\"page-bar-sheet\">\n                @if (search(); as searchSlot) {\n                    <ng-container [ngTemplateOutlet]=\"searchSlot.templateRef\" />\n                }\n                @for (filter of filters(); track filter) {\n                    <ng-container [ngTemplateOutlet]=\"filter.templateRef\" />\n                }\n            </div>\n            <button sheetFooter rtButton rtElem=\"apply\" type=\"button\" qa-dataid=\"page-bar-apply\" (click)=\"onApply()\">\n                {{ t().uiApply }}\n            </button>\n        </rt-bottom-sheet>\n    }\n\n    <ng-template #filterRow let-wide=\"wide\">\n        @if (search(); as searchSlot) {\n            <div rtElem=\"search\"><ng-container [ngTemplateOutlet]=\"searchSlot.templateRef\" /></div>\n        }\n        @for (filter of rowFilters(); track filter) {\n            <div rtElem=\"filter\" [rtMod]=\"{ wide: wide }\"><ng-container [ngTemplateOutlet]=\"filter.templateRef\" /></div>\n        }\n    </ng-template>\n\n    <ng-template #actionRow>\n        @if (actions().length > 0) {\n            <div rtElem=\"actions\">\n                @for (action of actions(); track action.id) {\n                    <rt-icon-button\n                        qa-dataid=\"page-bar-action\"\n                        size=\"sm\"\n                        variant=\"primary\"\n                        [attr.data-id]=\"action.id\"\n                        [icon]=\"action.icon\"\n                        [ariaLabel]=\"action.label\"\n                        [tooltip]=\"action.label\"\n                        [disabled]=\"action.disabled ?? false\"\n                        (click)=\"actionClick.emit(action.id)\" />\n                }\n            </div>\n        }\n    </ng-template>\n\n    <ng-template #morePanel>\n        <div rtBlock=\"rt-page-bar-more\" qa-dataid=\"page-bar-more-panel\">\n            @for (filter of moreFilters(); track filter) {\n                <ng-container [ngTemplateOutlet]=\"filter.templateRef\" />\n            }\n        </div>\n    </ng-template>\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-page-bar{--rt-page-bar-control-border-width: var(--rt-border-width-thin);--rt-page-bar-dot-radius: var(--rt-radius-full);position:relative;display:flex;min-width:0;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2) var(--rt-space-5);gap:var(--rt-space-2)}.rt-page-bar:not(.rt-page-bar--narrow):after{position:absolute;height:var(--rt-page-bar-control-border-width);background-color:var(--rt-color-border-default);content:\"\";inset:auto 0 0;pointer-events:none}.rt-page-bar__row{display:flex;min-width:0;height:40px;align-items:center;gap:calc(var(--rt-space-2) + var(--rt-space-1))}.rt-page-bar__title{overflow:hidden;min-width:0;flex:0 1 auto;margin:0;color:var(--rt-color-text-primary);font-size:var(--rt-text-xl);font-weight:var(--rt-font-weight-semibold);line-height:24px;text-overflow:ellipsis;white-space:nowrap}.rt-page-bar__spacer{flex:1 1 0}.rt-page-bar__search{min-width:0;max-width:540px;flex:1 1 0}.rt-page-bar__filter{width:150px;flex:none}.rt-page-bar__filter--wide{width:170px}.rt-page-bar__actions{display:flex;flex:none;gap:var(--rt-space-2);margin-inline-start:auto}.rt-page-bar__more{width:185px;flex:none}.rt-page-bar__filters-trigger{position:relative;display:inline-flex;flex:none}.rt-page-bar .rt-menu--open .rt-icon-button{background-color:var(--rt-nav-item-color-bg-active)}.rt-page-bar__dot{position:absolute;top:calc(var(--rt-space-1) + var(--rt-space-0-5));right:var(--rt-space-1);width:4px;height:4px;border-radius:var(--rt-page-bar-dot-radius);background-color:var(--rt-nav-marker-color);pointer-events:none}.rt-page-bar__sheet{display:flex;flex-direction:column;gap:calc(var(--rt-space-2) + var(--rt-space-1));padding-block-end:var(--rt-space-4);padding-inline:var(--rt-space-5)}.rt-page-bar__apply{flex:1 1 auto}.rt-page-bar--narrow .rt-page-bar__row{height:32px;gap:var(--rt-space-1)}.rt-page-bar--narrow .rt-page-bar__title{flex:1 1 0;font-size:var(--rt-text-md);line-height:20px}.rt-page-bar--narrow .rt-page-bar__spacer{display:none}@media(width<=768px){.rt-page-bar{min-width:0;flex:1 1 0;padding:0}}.rt-page-bar-menu{margin-block-start:9px}.rt-page-bar-menu .rt-menu__panel{min-width:220px;box-sizing:border-box}.rt-page-bar-more{--rt-page-bar-more-radius: var(--rt-overlay-menu-radius);--rt-page-bar-more-border-width: var(--rt-border-width-thin);--rt-page-bar-more-shadow: var(--rt-overlay-menu-shadow);display:flex;width:240px;box-sizing:border-box;flex-direction:column;padding:var(--rt-space-2);border:var(--rt-page-bar-more-border-width) solid var(--rt-color-border-subtle);border-radius:var(--rt-page-bar-more-radius);background-color:var(--rt-overlay-menu-bg);box-shadow:var(--rt-page-bar-more-shadow);gap:var(--rt-space-2)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		titleRef: [{
+			type: i0.ViewChild,
+			args: ["title", { isSignal: true }]
+		}],
+		filters: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => RtPageBarFilterDirective), { isSignal: true }]
+		}],
+		search: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtPageBarSearchDirective), { isSignal: true }]
+		}],
+		pageTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pageTitle",
+				required: true
+			}]
+		}],
+		actions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actions",
+				required: false
+			}]
+		}],
+		filtersActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filtersActive",
+				required: false
+			}]
+		}],
+		actionClick: [{
+			type: i0.Output,
+			args: ["actionClick"]
+		}],
+		filtersApply: [{
+			type: i0.Output,
+			args: ["filtersApply"]
+		}]
+	}
+});
+export { RtPageActionsComponent, RtPageBarComponent, RtPageBarFilterDirective, RtPageBarSearchDirective, RtPageHeaderComponent, RtPageUserComponent };
 
 //# sourceMappingURL=rt-tools-ui-kit-v2-page-header.mjs.map