@rt-tools/ui-kit-v2 0.23.3 → 0.24.0

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

@@ -1,339 +1,520 @@
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, signal, viewChild, computed, input, booleanAttribute, numberAttribute, output, effect, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
-import { filter, map } from 'rxjs';
-import { WINDOW, BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { rtKitLabel, BreakpointsService, RT_KIT_TRANSLATOR, RT_KIT_LABELS, RtKitLabelPipe } from '@rt-tools/ui-kit-v2/core';
-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 * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, effect, inject, input, 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";
+import { BlockDirective, ElemDirective, ModDirective, WINDOW } from "@rt-tools/core";
+import { BreakpointsService, RT_KIT_LABELS, RT_KIT_TRANSLATOR, RtKitLabelPipe, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+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";
 var ERtPageHeaderEntry;
-(function (ERtPageHeaderEntry) {
-    ERtPageHeaderEntry["Panel"] = "panel";
-    ERtPageHeaderEntry["Link"] = "link";
-    ERtPageHeaderEntry["Button"] = "button";
+(function(ERtPageHeaderEntry) {
+	ERtPageHeaderEntry["Panel"] = "panel";
+	ERtPageHeaderEntry["Link"] = "link";
+	ERtPageHeaderEntry["Button"] = "button";
 })(ERtPageHeaderEntry || (ERtPageHeaderEntry = {}));
-/** Пункты панели одним списком — колонки и группы для этого раскрываются. */
 function panelItemsOf(item) {
-    return (item.columns ?? []).flatMap((column) => column.groups.flatMap((group) => group.items));
+	return (item.columns ?? []).flatMap((column) => column.groups.flatMap((group) => group.items));
 }
-/**
- * Маркер раздела. Пункты панели свёрнуты, и непросмотренное внутри видно только
- * по точке у самого раздела.
- */
 function unreadOf(item) {
-    return item.unread === true || panelItemsOf(item).some((entry) => entry.unread === true);
+	return item.unread === true || panelItemsOf(item).some((entry) => entry.unread === true);
 }
 function entryKindOf(item) {
-    if (panelItemsOf(item).length > 0) {
-        return ERtPageHeaderEntry.Panel;
-    }
-    if ((item.route ?? '') !== '' && !item.disabled) {
-        return ERtPageHeaderEntry.Link;
-    }
-    return ERtPageHeaderEntry.Button;
+	if (panelItemsOf(item).length > 0) return ERtPageHeaderEntry.Panel;
+	if ((item.route ?? "") !== "" && !item.disabled) return ERtPageHeaderEntry.Link;
+	return ERtPageHeaderEntry.Button;
 }
 function toEntry(item) {
-    return {
-        id: item.id,
-        label: item.label,
-        icon: item.icon ?? null,
-        route: item.route ?? '',
-        routerLinkActiveExact: item.routerLinkActiveExact === true,
-        disabled: item.disabled === true,
-        unread: item.unread === true,
-        kind: entryKindOf(item),
-    };
+	return {
+		id: item.id,
+		label: item.label,
+		icon: item.icon ?? null,
+		route: item.route ?? "",
+		routerLinkActiveExact: item.routerLinkActiveExact === true,
+		disabled: item.disabled === true,
+		unread: item.unread === true,
+		kind: entryKindOf(item)
+	};
 }
 function toGroup(group) {
-    return {
-        id: group.id,
-        label: group.label ?? '',
-        icon: group.icon ?? null,
-        items: group.items.map(toEntry),
-    };
+	return {
+		id: group.id,
+		label: group.label ?? "",
+		icon: group.icon ?? null,
+		items: group.items.map(toEntry)
+	};
 }
 function toColumn(column) {
-    return {
-        id: column.id,
-        groups: column.groups.map(toGroup),
-    };
+	return {
+		id: column.id,
+		groups: column.groups.map(toGroup)
+	};
 }
-/** Группы всех колонок одним списком — узкий экран раскладывает панель без колонок. */
 function panelGroupsOf(columns) {
-    return columns.flatMap((column) => column.groups);
+	return columns.flatMap((column) => column.groups);
 }
-/** Разделы верхнего ряда вместе с раскладкой их панелей. */
 function toSections(items) {
-    return items.map((item) => {
-        const columns = (item.columns ?? []).map(toColumn);
-        return {
-            ...toEntry(item),
-            unread: unreadOf(item),
-            columns,
-            columnCount: columns.length,
-            panelItems: panelItemsOf(item).map(toEntry),
-            panelGroups: panelGroupsOf(columns),
-        };
-    });
+	return items.map((item) => {
+		const columns = (item.columns ?? []).map(toColumn);
+		return {
+			...toEntry(item),
+			unread: unreadOf(item),
+			columns,
+			columnCount: columns.length,
+			panelItems: panelItemsOf(item).map(toEntry),
+			panelGroups: panelGroupsOf(columns)
+		};
+	});
 }
-/** Адрес без строки запроса и якоря — подсветка считается по пути. */
 function pathOf(url) {
-    return url.split(/[?#]/)[0] ?? '';
+	return url.split(/[?#]/)[0] ?? "";
 }
 function isEntryActive(entry, path) {
-    if (entry.kind !== ERtPageHeaderEntry.Link) {
-        return false;
-    }
-    return entry.routerLinkActiveExact ? path === entry.route : path.startsWith(entry.route);
+	if (entry.kind !== ERtPageHeaderEntry.Link) return false;
+	return entry.routerLinkActiveExact ? path === entry.route : path.startsWith(entry.route);
 }
-/**
- * Разделы, у которых активен хоть один пункт панели. Обход идёт по раскрытому
- * списку пунктов: своего адреса у раздела с панелью нет, и подсветить его больше
- * нечем.
- */
-/**
- * Разделы для кругов сжатой полосы: первые `count` из тех, у кого есть иконка. Раздел без
- * иконки в круг не попадает — показать в нём нечего, и он остаётся под кнопкой «ещё».
- */
 function compactSectionsOf(sections, count) {
-    return sections.filter((section) => section.icon !== null).slice(0, Math.max(0, count));
+	return sections.filter((section) => section.icon !== null).slice(0, Math.max(0, count));
 }
-/**
- * Прилипла ли шапка: липкий узел стоит на пиксель выше края прокрутки и, прилипнув, теряет этот
- * пиксель из видимой области — наблюдатель пересечения отдаёт долю меньше единицы. Узел, ушедший
- * из области целиком, прилипшим не считается: его не видно вовсе.
- */
 function isStuck(intersectionRatio, isIntersecting) {
-    return isIntersecting && intersectionRatio < 1;
+	return isIntersecting && intersectionRatio < 1;
 }
 function activeSectionIds(sections, url) {
-    const path = pathOf(url);
-    const ids = new Set();
-    for (const section of sections) {
-        if (section.panelItems.some((entry) => isEntryActive(entry, path))) {
-            ids.add(section.id);
-        }
-    }
-    return ids;
-}
-
-const BEM_BLOCK = 'rt-page-header';
-/**
- * Верхняя горизонтальная плашка-навигация для первого уровня доменных страниц.
- *
- * Контракт:
- * - `items` — `Item[]`. Анкор для пунктов с `route`; `<button>` для недоступных
- *   и для тех, кто обрабатывается снаружи (`itemClick`). Пункт с `columns` —
- *   кнопка-триггер: панель второго уровня открывается наведением ([rtPopover]).
- * - `user` — необязательный блок справа. Если задан `userMenu` (TemplateRef) —
- *   блок становится hover-триггером попапа с этим контентом (клик — touch-fallback,
- *   панель прижата к правому краю); иначе по клику emit'ит `userClick`.
- *
- * Active state — через `RouterLinkActive` с классом `rt-page-header__link--is-active`;
- * для раздела с панелью — вычисляется по текущему URL (своего route у него нет).
- */
-class RtPageHeaderComponent {
-    #router;
-    #destroyRef;
-    #host;
-    // Конструктор наблюдателя пересечения объявлен на globalThis, а не на интерфейсе Window —
-    // токен отдаёт тот же объект, тип лишь уточняется.
-    #window;
-    /**
-     * Прилипла ли шапка к краю прокрутки. Считается наблюдателем пересечения, а не смещением
-     * окна: страница у потребителя прокручивается и внутри контейнера, и окно об этом не знает.
-     */
-    #stuck;
-    #t_uiMainNav;
-    /* Реактивный URL для подсветки раздела: у раздела с панелью нет своего
-       route, поэтому RouterLinkActive не применим — сравниваем по факту навигации. */
-    #currentUrl;
-    #breakpoints;
-    #translate;
-    constructor() {
-        this.#router = inject(Router);
-        this.#destroyRef = inject(DestroyRef);
-        this.#host = inject(ElementRef);
-        // Конструктор наблюдателя пересечения объявлен на globalThis, а не на интерфейсе Window —
-        // токен отдаёт тот же объект, тип лишь уточняется.
-        this.#window = inject(WINDOW);
-        /**
-         * Прилипла ли шапка к краю прокрутки. Считается наблюдателем пересечения, а не смещением
-         * окна: страница у потребителя прокручивается и внутри контейнера, и окно об этом не знает.
-         */
-        this.#stuck = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#stuck" }] : /* istanbul ignore next */ []));
-        this.#t_uiMainNav = rtKitLabel('uiMainNav');
-        /* Реактивный URL для подсветки раздела: у раздела с панелью нет своего
-           route, поэтому RouterLinkActive не применим — сравниваем по факту навигации. */
-        this.#currentUrl = toSignal(this.#router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.#router.url)), { initialValue: this.#router.url });
-        this.#breakpoints = inject(BreakpointsService);
-        this.#translate = inject(RT_KIT_TRANSLATOR);
-        /** Переводчик для чистого пайпа подписи: шаблон отдаёт его вторым доводом. */
-        this.translate = this.#translate;
-        this.t = inject(RT_KIT_LABELS);
-        this.mobileNavPopoverRef = viewChild('mobileNavPopover', { ...(ngDevMode ? { debugName: "mobileNavPopoverRef" } : /* istanbul ignore next */ {}), read: RtPopoverDirective });
-        /** Кнопка «ещё» сжатой полосы открывает ту же панель, что и бургер, своим поповером. */
-        this.compactNavPopoverRef = viewChild('compactNavPopover', { ...(ngDevMode ? { debugName: "compactNavPopoverRef" } : /* istanbul ignore next */ {}), read: RtPopoverDirective });
-        /** Сжатое состояние: шапка липкая и прилипла к верху. */
-        this.compact = computed(() => this.stickyCompact() && this.#stuck(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
-        /** Разделы в кругах сжатой полосы: первые с иконкой, число — по входу. */
-        this.compactSections = computed(() => compactSectionsOf(this.sections(), this.compactVisibleCount()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "compactSections" }] : /* istanbul ignore next */ []));
-        /** Форма пункта решается один раз здесь, а не ветвлениями в шаблоне. */
-        this.sections = computed(() => toSections(this.items()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
-        /**
-         * id разделов с активным вложенным адресом — для O(1) lookup в шаблоне.
-         * Зависит от #currentUrl + items (сигналы) → подсветка реактивна на навигацию.
-         */
-        this.activeSectionIds = computed(() => activeSectionIds(this.sections(), this.#currentUrl()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "activeSectionIds" }] : /* istanbul ignore next */ []));
-        this.userAvatar = computed(() => {
-            const u = this.user();
-            if (!u) {
-                return '';
-            }
-            if (u.avatar && u.avatar.length > 0) {
-                return u.avatar.charAt(0).toUpperCase();
-            }
-            return u.name.charAt(0).toUpperCase();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "userAvatar" }] : /* istanbul ignore next */ []));
-        /** Узкий вьюпорт (≤1080px): инлайн-навигация прячется, показывается гамбургер. */
-        this.isNarrow = this.#breakpoints.narrow;
-        /**
-         * id раскрытых разделов-аккордеонов в мобильной панели. Ключ — только раздел:
-         * группы внутри раскрытого раздела показаны сразу, и совпасть идентификаторам
-         * раздела и группы в этом множестве негде.
-         */
-        this.expandedSectionIds = signal(new Set(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "expandedSectionIds" }] : /* istanbul ignore next */ []));
-        this.EntryKind = ERtPageHeaderEntry;
-        this.items = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.user = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
-        this.userTitle = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "userTitle" }] : /* istanbul ignore next */ []));
-        this.userMenu = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "userMenu" }] : /* istanbul ignore next */ []));
-        /** Пусто — берётся переведённая подпись по умолчанию */
-        this.ariaLabel = input('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        /**
-         * Шапка липнет к верху окна и, прилипнув, сжимается в полосу: круги первых разделов,
-         * кнопка «ещё» и три слота потребителя. Выключено — поведение прежнее.
-         */
-        this.stickyCompact = input(false, { ...(ngDevMode ? { debugName: "stickyCompact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Сколько разделов с иконкой показывать кругами в сжатой полосе; остальные — под «ещё». */
-        this.compactVisibleCount = input(2, { ...(ngDevMode ? { debugName: "compactVisibleCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
-        /** Своё имя навигации важнее умолчания */
-        this.navAriaLabel = computed(() => this.ariaLabel() || this.#t_uiMainNav(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "navAriaLabel" }] : /* istanbul ignore next */ []));
-        this.itemClick = output();
-        this.userClick = output();
-        // Ресайз обратно в десктоп — гамбургер скрывается CSS'ом; открытую
-        // мобильную панель закрываем, иначе overlay зависнет без якоря.
-        effect(() => {
-            if (!this.isNarrow()) {
-                this.mobileNavPopoverRef()?.close();
-            }
-        });
-        afterNextRender(() => this.#observeStuck());
-    }
-    /**
-     * Липкая шапка стоит на пиксель выше края прокрутки и, прилипнув, теряет его из видимой
-     * области: наблюдатель пересечения с порогом в единицу ловит ровно этот момент — и в окне,
-     * и внутри прокручиваемого контейнера, о котором окно не знает.
-     */
-    #observeStuck() {
-        const observer = new this.#window.IntersectionObserver((entries) => {
-            const entry = entries.at(-1);
-            if (entry !== undefined) {
-                this.#stuck.set(isStuck(entry.intersectionRatio, entry.isIntersecting));
-            }
-        }, { threshold: [0, 1] });
-        observer.observe(this.#host.nativeElement);
-        this.#destroyRef.onDestroy(() => observer.disconnect());
-    }
-    /** Панель разделов открывают и бургер, и кнопка «ещё»: закрываются обе. */
-    closeNavPanels() {
-        this.mobileNavPopoverRef()?.close();
-        this.compactNavPopoverRef()?.close();
-    }
-    /** Круг раздела без адреса: раздел с панелью открывает общую панель, прочий — сообщает наружу. */
-    onCompactSectionClick(section) {
-        if (section.kind === ERtPageHeaderEntry.Panel) {
-            this.compactNavPopoverRef()?.open();
-            return;
-        }
-        this.itemClick.emit(section.id);
-    }
-    onItemClick(id) {
-        this.itemClick.emit(id);
-    }
-    onUserClick() {
-        this.userClick.emit();
-    }
-    /** Аккордеон мобильной панели: тумблер раскрытия раздела по его id. */
-    toggleSection(id) {
-        this.expandedSectionIds.update((prev) => {
-            const next = new Set(prev);
-            if (next.has(id)) {
-                next.delete(id);
-            }
-            else {
-                next.add(id);
-            }
-            return next;
-        });
-    }
-    /** Клик по плоскому пункту мобильной панели: emit + закрыть панель. */
-    onMobileItemClick(id) {
-        this.itemClick.emit(id);
-        this.closeNavPanels();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtPageHeaderComponent, isStandalone: true, selector: "rt-page-header", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, userTitle: { classPropertyName: "userTitle", publicName: "userTitle", isSignal: true, isRequired: false, transformFunction: null }, userMenu: { classPropertyName: "userMenu", publicName: "userMenu", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, stickyCompact: { classPropertyName: "stickyCompact", publicName: "stickyCompact", isSignal: true, isRequired: false, transformFunction: null }, compactVisibleCount: { classPropertyName: "compactVisibleCount", publicName: "compactVisibleCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", userClick: "userClick" }, host: { properties: { "class.rt-page-header--sticky": "stickyCompact()", "class.rt-page-header--is-compact": "compact()" }, classAttribute: "rt-page-header" }, viewQueries: [{ propertyName: "mobileNavPopoverRef", first: true, predicate: ["mobileNavPopover"], descendants: true, read: RtPopoverDirective, isSignal: true }, { propertyName: "compactNavPopoverRef", first: true, predicate: ["compactNavPopover"], descendants: true, read: RtPopoverDirective, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-page-header\">\n    <nav rtElem=\"nav\" [attr.aria-label]=\"navAriaLabel()\">\n        <ul rtElem=\"list\" role=\"list\">\n            @for (section of sections(); track section.id) {\n                <li rtElem=\"item\" qa-dataid=\"header-nav-item\" [attr.data-id]=\"section.id\">\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        </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        [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        \u0421\u0436\u0430\u0442\u0430\u044F \u043F\u043E\u043B\u043E\u0441\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0432\u0441\u0435\u0433\u0434\u0430, \u043A\u0430\u043A \u0438 \u0443\u0437\u043A\u0430\u044F: \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0435\u0451 \u043C\u043E\u0434\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0445\u043E\u0441\u0442\u0430.\n        \u0421\u043B\u0435\u0432\u0430 \u0441\u0442\u043E\u043F\u043A\u0430 \u043A\u0440\u0443\u0433\u043E\u0432 \u2014 \u00AB\u0435\u0449\u0451\u00BB \u043F\u043E\u0432\u0435\u0440\u0445 \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u044B\u0445, \u2014 \u0434\u0430\u043B\u044C\u0448\u0435 \u0442\u0440\u0438 \u0441\u043B\u043E\u0442\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F.\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                \u041C\u0435\u043D\u044E \u043F\u0440\u043E\u0444\u0438\u043B\u044F \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442\u0441\u044F \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C, \u043A\u0430\u043A \u0438 \u0440\u0430\u0437\u0434\u0435\u043B\u044B: \u0432\u0435\u0441\u044C \u0432\u0435\u0440\u0445\u043D\u0438\u0439\n                \u0440\u044F\u0434 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044F \u043E\u0434\u0438\u043D\u0430\u043A\u043E\u0432\u043E. \u041D\u0430\u0436\u0430\u0442\u0438\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0437\u0430\u043F\u0430\u0441\u043D\u044B\u043C \u043F\u0443\u0442\u0451\u043C \u0434\u043B\u044F\n                \u043A\u0430\u0441\u0430\u043D\u0438\u044F, \u0430 \u043F\u0435\u0440\u0435\u0445\u043E\u0434 \u043A\u0443\u0440\u0441\u043E\u0440\u0430 \u043D\u0430 \u0441\u043F\u0438\u0441\u043E\u043A \u044F\u0437\u044B\u043A\u043E\u0432 \u043F\u0430\u043D\u0435\u043B\u044C \u043F\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u2014\n                \u0432\u043B\u043E\u0436\u0435\u043D\u043D\u044B\u0439 \u043E\u0432\u0435\u0440\u043B\u0435\u0439 \u0437\u0430 \u0443\u0445\u043E\u0434 \u043D\u0430\u0440\u0443\u0436\u0443 \u043D\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F.\n            -->\n            <button\n                rtElem=\"user\"\n                type=\"button\"\n                qa-dataid=\"header-user-menu\"\n                #userPopover=\"rtPopover\"\n                rtPopoverTrigger=\"hover\"\n                rtPopoverAlign=\"end\"\n                rtPopoverOffsetY=\"14\"\n                [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", 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 auto}.rt-page-header__list{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;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__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}@media(width<=1380px){.rt-page-header__link .rt-page-header__icon{display:none}}@media(width<=1080px){.rt-page-header__nav{display:none}.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-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{.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}}\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"], dependencies: [{ kind: "directive", type: 
-                // Angular
-                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: 
-                // standalone components / directives
-                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", "rtPopoverDisabled", "rtPopoverOffsetY", "rtPopoverOffsetX"], outputs: ["rtPopoverOpened", "rtPopoverClosed"], exportAs: ["rtPopover"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "pipe", type: RtKitLabelPipe, name: "rtKitLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+	const path = pathOf(url);
+	const ids = /* @__PURE__ */ new Set();
+	for (const section of sections) if (section.panelItems.some((entry) => isEntryActive(entry, path))) ids.add(section.id);
+	return ids;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtPageHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-page-header', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        RtKitLabelPipe,
-                        // Angular
-                        RouterLink,
-                        RouterLinkActive,
-                        // standalone components / directives
-                        RtIconComponent,
-                        RtPopoverDirective,
-                        RtTooltipDirective,
-                        BlockDirective,
-                        ElemDirective,
-                        ModDirective,
-                    ], host: {
-                        class: BEM_BLOCK,
-                        '[class.rt-page-header--sticky]': 'stickyCompact()',
-                        '[class.rt-page-header--is-compact]': 'compact()',
-                    }, template: "<ng-container rtBlock=\"rt-page-header\">\n    <nav rtElem=\"nav\" [attr.aria-label]=\"navAriaLabel()\">\n        <ul rtElem=\"list\" role=\"list\">\n            @for (section of sections(); track section.id) {\n                <li rtElem=\"item\" qa-dataid=\"header-nav-item\" [attr.data-id]=\"section.id\">\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        </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        [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        \u0421\u0436\u0430\u0442\u0430\u044F \u043F\u043E\u043B\u043E\u0441\u0430 \u0441\u0442\u043E\u0438\u0442 \u0432 \u0440\u0430\u0437\u043C\u0435\u0442\u043A\u0435 \u0432\u0441\u0435\u0433\u0434\u0430, \u043A\u0430\u043A \u0438 \u0443\u0437\u043A\u0430\u044F: \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u0435\u0451 \u043C\u043E\u0434\u0438\u0444\u0438\u043A\u0430\u0442\u043E\u0440 \u0445\u043E\u0441\u0442\u0430.\n        \u0421\u043B\u0435\u0432\u0430 \u0441\u0442\u043E\u043F\u043A\u0430 \u043A\u0440\u0443\u0433\u043E\u0432 \u2014 \u00AB\u0435\u0449\u0451\u00BB \u043F\u043E\u0432\u0435\u0440\u0445 \u043E\u0441\u0442\u0430\u043B\u044C\u043D\u044B\u0445, \u2014 \u0434\u0430\u043B\u044C\u0448\u0435 \u0442\u0440\u0438 \u0441\u043B\u043E\u0442\u0430 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044F.\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                \u041C\u0435\u043D\u044E \u043F\u0440\u043E\u0444\u0438\u043B\u044F \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u0442\u0441\u044F \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0435\u043C, \u043A\u0430\u043A \u0438 \u0440\u0430\u0437\u0434\u0435\u043B\u044B: \u0432\u0435\u0441\u044C \u0432\u0435\u0440\u0445\u043D\u0438\u0439\n                \u0440\u044F\u0434 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044F \u043E\u0434\u0438\u043D\u0430\u043A\u043E\u0432\u043E. \u041D\u0430\u0436\u0430\u0442\u0438\u0435 \u043E\u0441\u0442\u0430\u0451\u0442\u0441\u044F \u0437\u0430\u043F\u0430\u0441\u043D\u044B\u043C \u043F\u0443\u0442\u0451\u043C \u0434\u043B\u044F\n                \u043A\u0430\u0441\u0430\u043D\u0438\u044F, \u0430 \u043F\u0435\u0440\u0435\u0445\u043E\u0434 \u043A\u0443\u0440\u0441\u043E\u0440\u0430 \u043D\u0430 \u0441\u043F\u0438\u0441\u043E\u043A \u044F\u0437\u044B\u043A\u043E\u0432 \u043F\u0430\u043D\u0435\u043B\u044C \u043F\u0435\u0440\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u2014\n                \u0432\u043B\u043E\u0436\u0435\u043D\u043D\u044B\u0439 \u043E\u0432\u0435\u0440\u043B\u0435\u0439 \u0437\u0430 \u0443\u0445\u043E\u0434 \u043D\u0430\u0440\u0443\u0436\u0443 \u043D\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F.\n            -->\n            <button\n                rtElem=\"user\"\n                type=\"button\"\n                qa-dataid=\"header-user-menu\"\n                #userPopover=\"rtPopover\"\n                rtPopoverTrigger=\"hover\"\n                rtPopoverAlign=\"end\"\n                rtPopoverOffsetY=\"14\"\n                [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", 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 auto}.rt-page-header__list{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;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__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}@media(width<=1380px){.rt-page-header__link .rt-page-header__icon{display:none}}@media(width<=1080px){.rt-page-header__nav{display:none}.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-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{.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}}\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"] }]
-        }], ctorParameters: () => [], propDecorators: { mobileNavPopoverRef: [{ type: i0.ViewChild, args: ['mobileNavPopover', { ...{
-                            read: RtPopoverDirective,
-                        }, isSignal: true }] }], compactNavPopoverRef: [{ type: i0.ViewChild, args: ['compactNavPopover', { ...{
-                            read: RtPopoverDirective,
-                        }, isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], userTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "userTitle", required: false }] }], userMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "userMenu", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], stickyCompact: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyCompact", required: false }] }], compactVisibleCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactVisibleCount", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], userClick: [{ type: i0.Output, args: ["userClick"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const BEM_BLOCK = "rt-page-header";
+var RtPageHeaderComponent = class RtPageHeaderComponent {
+	#router;
+	#destroyRef;
+	#host;
+	#window;
+	#stuck;
+	#t_uiMainNav;
+	#currentUrl;
+	#breakpoints;
+	#translate;
+	constructor() {
+		this.#router = inject(Router);
+		this.#destroyRef = inject(DestroyRef);
+		this.#host = inject(ElementRef);
+		this.#window = inject(WINDOW);
+		this.#stuck = signal(false, ...ngDevMode ? [{ debugName: "#stuck" }] : /* istanbul ignore next */ []);
+		this.#t_uiMainNav = rtKitLabel("uiMainNav");
+		this.#currentUrl = toSignal(this.#router.events.pipe(filter((e) => e instanceof NavigationEnd), map(() => this.#router.url)), { initialValue: this.#router.url });
+		this.#breakpoints = inject(BreakpointsService);
+		this.#translate = inject(RT_KIT_TRANSLATOR);
+		this.translate = this.#translate;
+		this.t = inject(RT_KIT_LABELS);
+		this.mobileNavPopoverRef = viewChild("mobileNavPopover", {
+			...ngDevMode ? { debugName: "mobileNavPopoverRef" } : /* istanbul ignore next */ {},
+			read: RtPopoverDirective
+		});
+		this.compactNavPopoverRef = viewChild("compactNavPopover", {
+			...ngDevMode ? { debugName: "compactNavPopoverRef" } : /* istanbul ignore next */ {},
+			read: RtPopoverDirective
+		});
+		this.compact = computed(() => this.stickyCompact() && this.#stuck(), ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+		this.compactSections = computed(() => compactSectionsOf(this.sections(), this.compactVisibleCount()), ...ngDevMode ? [{ debugName: "compactSections" }] : /* istanbul ignore next */ []);
+		this.sections = computed(() => toSections(this.items()), ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
+		this.activeSectionIds = computed(() => activeSectionIds(this.sections(), this.#currentUrl()), ...ngDevMode ? [{ debugName: "activeSectionIds" }] : /* istanbul ignore next */ []);
+		this.userAvatar = computed(() => {
+			const u = this.user();
+			if (!u) return "";
+			if (u.avatar && u.avatar.length > 0) return u.avatar.charAt(0).toUpperCase();
+			return u.name.charAt(0).toUpperCase();
+		}, ...ngDevMode ? [{ debugName: "userAvatar" }] : /* istanbul ignore next */ []);
+		this.isNarrow = this.#breakpoints.narrow;
+		this.expandedSectionIds = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedSectionIds" }] : /* istanbul ignore next */ []);
+		this.EntryKind = ERtPageHeaderEntry;
+		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 */ []);
+		this.userMenu = input(null, ...ngDevMode ? [{ debugName: "userMenu" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.stickyCompact = input(false, {
+			...ngDevMode ? { debugName: "stickyCompact" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.compactVisibleCount = input(2, {
+			...ngDevMode ? { debugName: "compactVisibleCount" } : /* istanbul ignore next */ {},
+			transform: numberAttribute
+		});
+		this.navAriaLabel = computed(() => this.ariaLabel() || this.#t_uiMainNav(), ...ngDevMode ? [{ debugName: "navAriaLabel" }] : /* istanbul ignore next */ []);
+		this.itemClick = output();
+		this.userClick = output();
+		effect(() => {
+			if (!this.isNarrow()) this.mobileNavPopoverRef()?.close();
+		});
+		afterNextRender(() => this.#observeStuck());
+	}
+	#observeStuck() {
+		const observer = new this.#window.IntersectionObserver((entries) => {
+			const entry = entries.at(-1);
+			if (entry !== void 0) this.#stuck.set(isStuck(entry.intersectionRatio, entry.isIntersecting));
+		}, { threshold: [0, 1] });
+		observer.observe(this.#host.nativeElement);
+		this.#destroyRef.onDestroy(() => observer.disconnect());
+	}
+	closeNavPanels() {
+		this.mobileNavPopoverRef()?.close();
+		this.compactNavPopoverRef()?.close();
+	}
+	onCompactSectionClick(section) {
+		if (section.kind === ERtPageHeaderEntry.Panel) {
+			this.compactNavPopoverRef()?.open();
+			return;
+		}
+		this.itemClick.emit(section.id);
+	}
+	onItemClick(id) {
+		this.itemClick.emit(id);
+	}
+	onUserClick() {
+		this.userClick.emit();
+	}
+	toggleSection(id) {
+		this.expandedSectionIds.update((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}
+	onMobileItemClick(id) {
+		this.itemClick.emit(id);
+		this.closeNavPanels();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtPageHeaderComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtPageHeaderComponent,
+			isStandalone: true,
+			selector: "rt-page-header",
+			inputs: {
+				items: {
+					classPropertyName: "items",
+					publicName: "items",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				user: {
+					classPropertyName: "user",
+					publicName: "user",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userTitle: {
+					classPropertyName: "userTitle",
+					publicName: "userTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userMenu: {
+					classPropertyName: "userMenu",
+					publicName: "userMenu",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				stickyCompact: {
+					classPropertyName: "stickyCompact",
+					publicName: "stickyCompact",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				compactVisibleCount: {
+					classPropertyName: "compactVisibleCount",
+					publicName: "compactVisibleCount",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				itemClick: "itemClick",
+				userClick: "userClick"
+			},
+			host: {
+				properties: {
+					"class.rt-page-header--sticky": "stickyCompact()",
+					"class.rt-page-header--is-compact": "compact()"
+				},
+				classAttribute: "rt-page-header"
+			},
+			viewQueries: [{
+				propertyName: "mobileNavPopoverRef",
+				first: true,
+				predicate: ["mobileNavPopover"],
+				descendants: true,
+				read: RtPopoverDirective,
+				isSignal: true
+			}, {
+				propertyName: "compactNavPopoverRef",
+				first: true,
+				predicate: ["compactNavPopover"],
+				descendants: true,
+				read: RtPopoverDirective,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-page-header\">\n    <nav rtElem=\"nav\" [attr.aria-label]=\"navAriaLabel()\">\n        <ul rtElem=\"list\" role=\"list\">\n            @for (section of sections(); track section.id) {\n                <li rtElem=\"item\" qa-dataid=\"header-nav-item\" [attr.data-id]=\"section.id\">\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        </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        [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            <button\n                rtElem=\"user\"\n                type=\"button\"\n                qa-dataid=\"header-user-menu\"\n                #userPopover=\"rtPopover\"\n                rtPopoverTrigger=\"hover\"\n                rtPopoverAlign=\"end\"\n                rtPopoverOffsetY=\"14\"\n                [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",
+			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 auto}.rt-page-header__list{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;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__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}@media(width<=1380px){.rt-page-header__link .rt-page-header__icon{display:none}}@media(width<=1080px){.rt-page-header__nav{display:none}.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-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{.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}}\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"
+			],
+			dependencies: [
+				{
+					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: RtPopoverDirective,
+					selector: "[rtPopover]",
+					inputs: [
+						"rtPopover",
+						"rtPopoverTrigger",
+						"rtPopoverWidth",
+						"rtPopoverAlign",
+						"rtPopoverFitViewport",
+						"rtPopoverContext",
+						"rtPopoverPanelClass",
+						"rtPopoverDisabled",
+						"rtPopoverOffsetY",
+						"rtPopoverOffsetX",
+						"rtPopoverPositions"
+					],
+					outputs: ["rtPopoverOpened", "rtPopoverClosed"],
+					exportAs: ["rtPopover"]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				},
+				{
+					kind: "pipe",
+					type: RtKitLabelPipe,
+					name: "rtKitLabel"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtPageHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-page-header",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtKitLabelPipe,
+				RouterLink,
+				RouterLinkActive,
+				RtIconComponent,
+				RtPopoverDirective,
+				RtTooltipDirective,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			host: {
+				class: BEM_BLOCK,
+				"[class.rt-page-header--sticky]": "stickyCompact()",
+				"[class.rt-page-header--is-compact]": "compact()"
+			},
+			template: "<ng-container rtBlock=\"rt-page-header\">\n    <nav rtElem=\"nav\" [attr.aria-label]=\"navAriaLabel()\">\n        <ul rtElem=\"list\" role=\"list\">\n            @for (section of sections(); track section.id) {\n                <li rtElem=\"item\" qa-dataid=\"header-nav-item\" [attr.data-id]=\"section.id\">\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        </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        [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            <button\n                rtElem=\"user\"\n                type=\"button\"\n                qa-dataid=\"header-user-menu\"\n                #userPopover=\"rtPopover\"\n                rtPopoverTrigger=\"hover\"\n                rtPopoverAlign=\"end\"\n                rtPopoverOffsetY=\"14\"\n                [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",
+			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 auto}.rt-page-header__list{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;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__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}@media(width<=1380px){.rt-page-header__link .rt-page-header__icon{display:none}}@media(width<=1080px){.rt-page-header__nav{display:none}.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-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{.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}}\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"
+			]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		mobileNavPopoverRef: [{
+			type: i0.ViewChild,
+			args: ["mobileNavPopover", {
+				read: RtPopoverDirective,
+				isSignal: true
+			}]
+		}],
+		compactNavPopoverRef: [{
+			type: i0.ViewChild,
+			args: ["compactNavPopover", {
+				read: RtPopoverDirective,
+				isSignal: true
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		user: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "user",
+				required: false
+			}]
+		}],
+		userTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userTitle",
+				required: false
+			}]
+		}],
+		userMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userMenu",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		stickyCompact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyCompact",
+				required: false
+			}]
+		}],
+		compactVisibleCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compactVisibleCount",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
+		userClick: [{
+			type: i0.Output,
+			args: ["userClick"]
+		}]
+	}
+});
 export { RtPageHeaderComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-page-header.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-page-header.mjs.map