@rt-tools/ui-kit-v2 0.16.0 → 0.18.0

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

@@ -0,0 +1,339 @@
+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';
+
+/** Чем пункт отрисуется: панелью, ссылкой или кнопкой. */
+var ERtPageHeaderEntry;
+(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));
+}
+/**
+ * Маркер раздела. Пункты панели свёрнуты, и непросмотренное внутри видно только
+ * по точке у самого раздела.
+ */
+function unreadOf(item) {
+    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;
+}
+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),
+    };
+}
+function toGroup(group) {
+    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),
+    };
+}
+/** Группы всех колонок одним списком — узкий экран раскладывает панель без колонок. */
+function panelGroupsOf(columns) {
+    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),
+        };
+    });
+}
+/** Адрес без строки запроса и якоря — подсветка считается по пути. */
+function pathOf(url) {
+    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);
+}
+/**
+ * Разделы, у которых активен хоть один пункт панели. Обход идёт по раскрытому
+ * списку пунктов: своего адреса у раздела с панелью нет, и подсветить его больше
+ * нечем.
+ */
+/**
+ * Разделы для кругов сжатой полосы: первые `count` из тех, у кого есть иконка. Раздел без
+ * иконки в круг не попадает — показать в нём нечего, и он остаётся под кнопкой «ещё».
+ */
+function compactSectionsOf(sections, count) {
+    return sections.filter((section) => section.icon !== null).slice(0, Math.max(0, count));
+}
+/**
+ * Прилипла ли шапка: липкий узел стоит на пиксель выше края прокрутки и, прилипнув, теряет этот
+ * пиксель из видимой области — наблюдатель пересечения отдаёт долю меньше единицы. Узел, ушедший
+ * из области целиком, прилипшим не считается: его не видно вовсе.
+ */
+function isStuck(intersectionRatio, isIntersecting) {
+    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", "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 }); }
+}
+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.
+ */
+
+export { RtPageHeaderComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-page-header.mjs.map