@rt-tools/ui-kit-v2 0.38.0 → 0.39.1

package/fesm2022/rt-tools-ui-kit-v2-multiselect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-multiselect.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect-label.pipe.ts","../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect.component.ts","../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect.component.html"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\nimport { rtTreeFind } from '@rt-tools/ui-kit-v2/core';\nimport { IRtSelect } from '@rt-tools/ui-kit-v2/select';\n\n/** Лейбл опции по её value для отображения чипа выбранного значения — на любой глубине дерева. */\n@Pipe({ name: 'rtMultiselectLabel' })\nexport class RtMultiselectLabelPipe implements PipeTransform {\n    public transform<TValue>(value: TValue, options: ReadonlyArray<IRtSelect.Option<TValue>>): string {\n        return rtTreeFind(options, value)?.label ?? String(value);\n    }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    computed,\n    contentChild,\n    forwardRef,\n    inject,\n    input,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    InputSignal,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { IRtPopover } from '@rt-tools/ui-kit-v2/popover';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtOptionList, TRtOptionListAction } from '@rt-tools/ui-kit-v2/core';\nimport {\n    rtTreeBranchState,\n    rtTreeFind,\n    rtTreeIsTree,\n    rtTreeLeaves,\n    rtTreeOpenFor,\n    rtTreeRows,\n    rtTreeSideKey,\n    rtTreeToggle,\n} from '@rt-tools/ui-kit-v2/core';\nimport { RtSelectTriggerDirective } from '@rt-tools/ui-kit-v2/select';\nimport { IRtSelect } from '@rt-tools/ui-kit-v2/select';\nimport { RtTagComponent } from '@rt-tools/ui-kit-v2/tag';\nimport { RtMultiselectLabelPipe } from './rt-multiselect-label.pipe';\n\nconst BEM_BLOCK: string = 'rt-multiselect';\n\n/** Клавиши, открывающие закрытый dropdown с фокуса на trigger'е. */\n\nlet panelIdSeed: number = 0;\n\nfunction nextPanelId(): number {\n    panelIdSeed += 1;\n    return panelIdSeed;\n}\n\n/**\n * Multi-select с chip-rendering выбранных значений в trigger.\n *\n * Panel рендерится через CDK Overlay (`[rtPopover]`) — не обрезается overflow,\n * авто-flip. Панель НЕ закрывается после выбора (multi vs single). CVA через\n * общий `RtFormControlBase`. Reuses `IRtSelect.Option<TValue>` (type-import).\n * Чипы закрываются поштучно; крестик (`clearable`) слева от шеврона очищает весь\n * выбор.\n *\n * Keyboard-nav (activedescendant): фокус на trigger'е, ArrowUp/Down — highlight,\n * Enter — toggle опции (panel остаётся открытой), Escape — закрыть. Home/End —\n * deferred.\n */\n@Component({\n    selector: 'rt-multiselect',\n    templateUrl: './rt-multiselect.component.html',\n    styleUrl: './rt-multiselect.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtIconComponent,\n        RtPopoverDirective,\n        RtTagComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n\n        // pipes\n        RtMultiselectLabelPipe,\n    ],\n    providers: [\n        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.\n        { provide: RtFormControlBase, useExisting: forwardRef(() => RtMultiselectComponent) },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-multiselect--open]': 'isOpen()',\n        '[class.rt-multiselect--disabled]': 'isDisabled()',\n        '[class.rt-multiselect--readonly]': 'isReadonly()',\n        '[class.rt-multiselect--invalid]': 'isInvalid()',\n        '[class.rt-multiselect--borderless]': '!bordered()',\n        '[class.rt-multiselect--size--sm]': \"size() === 'sm'\",\n        '[class.rt-multiselect--size--lg]': \"size() === 'lg'\",\n    },\n})\nexport class RtMultiselectComponent<TValue> extends RtFormControlBase<ReadonlyArray<TValue>> {\n    readonly #t_uiSelectValues: Signal<string> = rtKitLabel('uiSelectValues');\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly panelId: string = `rt-multiselect-panel-${nextPanelId()}`;\n\n    protected readonly placeholderText: Signal<string> = computed((): string => this.placeholder() || this.#t_uiSelectValues());\n\n    protected readonly popover: Signal<RtPopoverDirective> = viewChild.required(RtPopoverDirective);\n\n    protected readonly triggerEl: Signal<ElementRef<HTMLButtonElement> | undefined> = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');\n\n    /** Раскрытые ветки дерева. Живут, пока открыта панель: при открытии раскрыты ветки над выбранным. */\n    protected readonly openBranches: WritableSignal<ReadonlySet<TValue>> = signal<ReadonlySet<TValue>>(new Set<TValue>());\n\n    /** Дерево ли список: тогда у строк есть место под стрелку и отступ по уровню. */\n    protected readonly isTree: Signal<boolean> = computed((): boolean => rtTreeIsTree(this.options()));\n\n    /** Видимые строки: плоский список — как прежде, дерево — по раскрытым веткам. */\n    protected readonly rows: Signal<ReadonlyArray<IRtSelect.Row<TValue>>> = computed((): ReadonlyArray<IRtSelect.Row<TValue>> =>\n        rtTreeRows(this.options(), this.openBranches())\n    );\n\n    /** Флажок каждой строки: у листа — выбран ли он, у ветки — выведен из её включённых листьев. */\n    protected readonly rowChecks: Signal<ReadonlyArray<IRtSelect.TBranchState>> = computed((): ReadonlyArray<IRtSelect.TBranchState> =>\n        this.rows().map((row: IRtSelect.Row<TValue>): IRtSelect.TBranchState => this.#checkOf(row))\n    );\n\n    protected readonly isOpen: Signal<boolean> = computed((): boolean => this.popover().isOpen());\n\n    /** Клавиатура списка: подсветка, клавиши открытия, id для `aria-activedescendant`, прокрутка к опции. */\n    protected readonly optionList: RtOptionList = new RtOptionList({\n        panelId: (): string => this.panelId,\n        isOpen: (): boolean => this.isOpen(),\n        count: (): number => this.rows().length,\n        isDisabled: (index: number): boolean => Boolean(this.rows()[index]?.option.disabled),\n        chooseKeys: new Set<string>(['Enter', ' ']),\n        sideKeys: true,\n        edgeKeys: true,\n    });\n\n    protected readonly activeIndex: WritableSignal<number> = this.optionList.activeIndex;\n\n    /** Идентификатор подсвеченной опции — тот же, что уходит в `aria-activedescendant`. */\n    protected readonly activeOptionId: Signal<string | null> = this.optionList.activeOptionId;\n\n    /**\n     * Своя разметка указателя, если потребитель её объявил. Маркер тот же, что у выбора одного\n     * значения: семьи отличаются только разметкой внутри кнопки.\n     */\n    protected readonly triggerTpl: Signal<RtSelectTriggerDirective<ReadonlyArray<TValue>> | undefined> =\n        contentChild(RtSelectTriggerDirective);\n\n    protected readonly hasValue: Signal<boolean> = computed((): boolean => this.value().length > 0);\n\n    protected readonly visibleChips: Signal<ReadonlyArray<TValue>> = computed((): ReadonlyArray<TValue> =>\n        this.value().slice(0, this.maxChips())\n    );\n\n    protected readonly extraChipsCount: Signal<number> = computed((): number => Math.max(0, this.value().length - this.maxChips()));\n\n    /** Три значения, которые кит отдаёт своей разметке указателя, и не больше. */\n    protected readonly triggerState: Signal<IRtSelect.TriggerState<ReadonlyArray<TValue>>> = computed(\n        (): IRtSelect.TriggerState<ReadonlyArray<TValue>> => ({\n            isOpen: this.isOpen(),\n            value: this.value(),\n            label: this.displayText(),\n            isDisabled: this.isDisabled(),\n        })\n    );\n\n    public readonly displayText: Signal<string> = computed((): string =>\n        this.value()\n            .map((v: TValue): string => this.labelOf(v))\n            .join(', ')\n    );\n\n    public readonly options: InputSignal<ReadonlyArray<IRtSelect.Option<TValue>>> = input<ReadonlyArray<IRtSelect.Option<TValue>>>([]);\n\n    /** Пусто — берётся переведённая подпись по умолчанию */\n    public readonly placeholder: InputSignal<string> = input<string>('');\n    public readonly maxChips: InputSignal<number> = input<number>(3);\n\n    /** Иконка слева в указателе — та же, что у `rt-select`: перед подсказкой или чипами. */\n    public readonly iconLeft: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /**\n     * Чем мерится панель. По умолчанию она не уже кнопки и дальше растёт по содержимому:\n     * со своим указателем кнопка бывает узкой, и панель по её ширине давила бы содержимое.\n     * `trigger` возвращает прежнее — ровно по кнопке, `auto` пускает панель по содержимому\n     * целиком. Предел высоты назначается входом `panelMaxHeight`.\n     */\n    public readonly panelWidth: InputSignal<IRtPopover.Width> = input<IRtPopover.Width>('trigger-min');\n\n    /**\n     * Предел высоты панели — длина как в стилях, например `20rem`. Пусто — предел кита\n     * `--rt-input-panel-max-height`, и длинный список прокручивается внутри панели: без предела\n     * он уходил за нижний край экрана, и пункты за краем были недостижимы. `none` снимает предел —\n     * для короткого списка, который должен открываться целиком, без прокрутки. Значение ставится\n     * на саму панель: она рисуется в наложении, вне поддерева блока.\n     */\n    public readonly panelMaxHeight: InputSignal<string | null> = input<string | null>(null);\n\n    public override setDisabledState(disabled: boolean): void {\n        super.setDisabledState(disabled);\n        if (disabled) {\n            this.popover().close();\n        }\n    }\n\n    protected getEmptyValue(): ReadonlyArray<TValue> {\n        return [];\n    }\n\n    protected focusAfterClear(): void {\n        this.triggerEl()?.nativeElement.focus();\n    }\n\n    protected labelOf(value: TValue): string {\n        return rtTreeFind(this.options(), value)?.label ?? String(value);\n    }\n\n    protected isSelected(value: TValue): boolean {\n        return this.value().includes(value);\n    }\n\n    protected onOpened(): void {\n        this.openBranches.set(rtTreeOpenFor(this.options(), this.value()));\n    }\n\n    protected toggleBranch(event: Event, value: TValue): void {\n        event.stopPropagation();\n        this.openBranches.update((open: ReadonlySet<TValue>): ReadonlySet<TValue> => rtTreeToggle(open, value));\n    }\n\n    protected onClosed(): void {\n        this.activeIndex.set(-1);\n        this.markTouched();\n    }\n\n    /**\n     * Лист переключается сам. Ветка выбирает все свои включённые листья или снимает их, когда\n     * выбраны все; своё значение ветки в выбор не пишется.\n     */\n    protected toggleOption(opt: IRtSelect.Option<TValue>): void {\n        if (opt.disabled || this.isDisabled()) {\n            return;\n        }\n        const leaves: ReadonlyArray<TValue> = rtTreeLeaves(opt);\n        const current: ReadonlyArray<TValue> = this.value();\n        const clearing: boolean = rtTreeBranchState(opt, current) === 'all';\n        const next: ReadonlyArray<TValue> = clearing\n            ? current.filter((v: TValue): boolean => !leaves.includes(v))\n            : [...current, ...leaves.filter((leaf: TValue): boolean => !current.includes(leaf))];\n        this.value.set(next);\n        this.emitChange([...next]);\n    }\n\n    protected removeChip(value: TValue, event: MouseEvent): void {\n        event.stopPropagation();\n        if (this.isDisabled()) {\n            return;\n        }\n        const next: ReadonlyArray<TValue> = this.value().filter((v: TValue): boolean => v !== value);\n        this.value.set(next);\n        this.emitChange([...next]);\n    }\n\n    protected onTriggerKeydown(event: KeyboardEvent): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        if (!this.isOpen()) {\n            if (this.optionList.opensBy(event.key)) {\n                event.preventDefault();\n                this.popover().open();\n                this.optionList.move(1);\n            }\n            return;\n        }\n        this.#handleOpenKeydown(event);\n    }\n\n    #handleOpenKeydown(event: KeyboardEvent): void {\n        const action: TRtOptionListAction = this.optionList.actionOf(event.key);\n        if (action === 'none') {\n            return;\n        }\n        event.preventDefault();\n        switch (action) {\n            case 'next':\n                this.optionList.move(1);\n                break;\n            case 'previous':\n                this.optionList.move(-1);\n                break;\n            case 'first':\n                this.optionList.first();\n                break;\n            case 'last':\n                this.optionList.last();\n                break;\n            case 'choose':\n                this.#toggleActive();\n                break;\n            case 'close':\n                // Escape закрывает один слой: панель. Без остановки событие всплывает до document,\n                // и оверлей под панелью — боковая панель, окно — закрывается вместе с ней.\n                event.stopPropagation();\n                this.popover().close();\n                break;\n            case 'side':\n                this.#sideKey(event.key);\n                break;\n        }\n    }\n\n    #checkOf(row: IRtSelect.Row<TValue>): IRtSelect.TBranchState {\n        if (row.branch) {\n            return rtTreeBranchState(row.option, this.value());\n        }\n        return this.value().includes(row.option.value) ? 'all' : 'none';\n    }\n\n    #sideKey(key: string): void {\n        const answer: IRtSelect.SideKeyAnswer<TValue> = rtTreeSideKey(this.rows(), this.activeIndex(), key);\n        const toggle: TValue | null = answer.toggle;\n        if (toggle !== null) {\n            this.openBranches.update((open: ReadonlySet<TValue>): ReadonlySet<TValue> => rtTreeToggle(open, toggle));\n        }\n        this.activeIndex.set(answer.index);\n    }\n\n    #toggleActive(): void {\n        const opts: ReadonlyArray<IRtSelect.Option<TValue>> = this.rows().map(\n            (row: IRtSelect.Row<TValue>): IRtSelect.Option<TValue> => row.option\n        );\n        const index: number = this.activeIndex();\n        if (index >= 0 && index < opts.length) {\n            this.toggleOption(opts[index]);\n        }\n    }\n}\n","<ng-container rtBlock=\"rt-multiselect\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"multiselect-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    }\n    <button\n        #triggerEl\n        rtElem=\"trigger\"\n        qa-dataid=\"multiselect-trigger\"\n        type=\"button\"\n        [rtPopoverWidth]=\"panelWidth()\"\n        [rtMod]=\"{ own: !!triggerTpl() }\"\n        [rtPopover]=\"panelTpl\"\n        [rtPopoverDisabled]=\"isDisabled()\"\n        [attr.id]=\"effectiveControlId()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.aria-activedescendant]=\"activeOptionId()\"\n        [disabled]=\"isDisabled()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (rtPopoverOpened)=\"onOpened()\"\n        (rtPopoverClosed)=\"onClosed()\">\n        <!--\n            Разметка указателя: своя, если потребитель её объявил, иначе зашитая китом. Она встаёт\n            внутрь кнопки, а не вместо неё: поведение — открытие панели, приметы доступности,\n            отключённость, клавиши и закрытие — остаётся на кнопке кита.\n        -->\n        @if (triggerTpl(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: triggerState() }\" />\n        } @else {\n            @if (iconLeft(); as left) {\n                <rt-icon rtElem=\"icon-left\" qa-dataid=\"multiselect-icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n            @if (value().length === 0) {\n                <span rtElem=\"placeholder\" qa-dataid=\"multiselect-placeholder\">{{ placeholderText() }}</span>\n            } @else {\n                <span rtElem=\"chips\">\n                    @for (val of visibleChips(); track val) {\n                        <span rtElem=\"chip\" qa-dataid=\"multiselect-chip\" [attr.data-value]=\"val\">\n                            <rt-tag\n                                severity=\"info\"\n                                [value]=\"val | rtMultiselectLabel: options()\"\n                                [closable]=\"true\"\n                                (closed)=\"removeChip(val, $event)\" />\n                        </span>\n                    }\n                    @if (extraChipsCount() > 0) {\n                        <span rtElem=\"chip-more\" qa-dataid=\"multiselect-chip-more\">+{{ extraChipsCount() }}</span>\n                    }\n                </span>\n            }\n            @if (showClearButton()) {\n                <rt-icon-button\n                    rtElem=\"clear\"\n                    qa-dataid=\"multiselect-clear\"\n                    icon=\"ico-close\"\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    iconColor=\"muted\"\n                    [ariaLabel]=\"t().uiClear\"\n                    [tabIndex]=\"-1\"\n                    (clicked)=\"clear($event)\" />\n            }\n            <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" color=\"muted\" />\n        }\n    </button>\n\n    <ng-template #panelTpl>\n        <div\n            rtElem=\"panel\"\n            qa-dataid=\"multiselect-panel\"\n            role=\"listbox\"\n            [style.--rt-multiselect-panel-max-height]=\"panelMaxHeight()\"\n            [attr.aria-label]=\"ariaLabel()\">\n            <!--\n                Опции выбираются мышью через (click); keyboard-nav — на trigger'е\n                (activedescendant), опции не focusable индивидуально.\n            -->\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <ul rtElem=\"list\">\n                @for (row of rows(); track row.option.value; let i = $index) {\n                    <li\n                        rtElem=\"option\"\n                        qa-dataid=\"multiselect-option\"\n                        role=\"option\"\n                        [id]=\"panelId + '-opt-' + i\"\n                        [attr.data-value]=\"row.option.value\"\n                        [attr.aria-level]=\"isTree() ? row.level + 1 : null\"\n                        [style.--rt-multiselect-tree-level]=\"row.level\"\n                        [rtMod]=\"{\n                            selected: rowChecks()[i] === 'all',\n                            active: i === activeIndex(),\n                            disabled: !!row.option.disabled,\n                        }\"\n                        [attr.aria-selected]=\"rowChecks()[i] === 'all'\"\n                        [attr.aria-disabled]=\"!!row.option.disabled\"\n                        (click)=\"toggleOption(row.option)\">\n                        @if (isTree()) {\n                            @if (row.branch) {\n                                <button\n                                    rtElem=\"toggle\"\n                                    qa-dataid=\"multiselect-option-toggle\"\n                                    type=\"button\"\n                                    tabindex=\"-1\"\n                                    [attr.aria-label]=\"row.open ? t().uiCollapse : t().uiExpand\"\n                                    [attr.aria-expanded]=\"row.open\"\n                                    (click)=\"toggleBranch($event, row.option.value)\">\n                                    <rt-icon size=\"sm\" color=\"muted\" [name]=\"row.open ? 'chevron-down' : 'chevron-right'\" />\n                                </button>\n                            } @else {\n                                <span rtElem=\"toggle-space\"></span>\n                            }\n                        }\n                        <input\n                            rtElem=\"checkbox\"\n                            qa-dataid=\"multiselect-option-checkbox\"\n                            type=\"checkbox\"\n                            tabindex=\"-1\"\n                            [checked]=\"rowChecks()[i] === 'all'\"\n                            [indeterminate]=\"rowChecks()[i] === 'some'\" />\n                        <span rtElem=\"option-label\" qa-dataid=\"multiselect-option-label\">{{ row.option.label }}</span>\n                    </li>\n                } @empty {\n                    <li rtElem=\"empty\" qa-dataid=\"multiselect-empty\">{{ t().uiNoOptions }}</li>\n                }\n            </ul>\n        </div>\n    </ng-template>\n</ng-container>\n"],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-multiselect.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect-label.pipe.ts","../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect.component.ts","../../../projects/ui-kit-v2/src/lib/components/multiselect/rt-multiselect.component.html"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\n\nimport { rtTreeFind } from '@rt-tools/ui-kit-v2/core';\nimport { IRtSelect } from '@rt-tools/ui-kit-v2/select';\n\n/** Лейбл опции по её value для отображения чипа выбранного значения — на любой глубине дерева. */\n@Pipe({ name: 'rtMultiselectLabel' })\nexport class RtMultiselectLabelPipe implements PipeTransform {\n    public transform<TValue>(value: TValue, options: ReadonlyArray<IRtSelect.Option<TValue>>): string {\n        return rtTreeFind(options, value)?.label ?? String(value);\n    }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n    computed,\n    contentChild,\n    forwardRef,\n    inject,\n    input,\n    signal,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    InputSignal,\n    Signal,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtFormControlBase } from '@rt-tools/ui-kit-v2/form-control';\nimport { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtPopoverDirective } from '@rt-tools/ui-kit-v2/popover';\nimport { IRtPopover } from '@rt-tools/ui-kit-v2/popover';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { RtOptionList, TRtOptionListAction } from '@rt-tools/ui-kit-v2/core';\nimport {\n    rtTreeBranchState,\n    rtTreeFind,\n    rtTreeIsTree,\n    rtTreeLeaves,\n    rtTreeOpenFor,\n    rtTreeRows,\n    rtTreeSideKey,\n    rtTreeToggle,\n} from '@rt-tools/ui-kit-v2/core';\nimport { RtSelectTriggerDirective } from '@rt-tools/ui-kit-v2/select';\nimport { IRtSelect } from '@rt-tools/ui-kit-v2/select';\nimport { RtTagComponent } from '@rt-tools/ui-kit-v2/tag';\nimport { RtMultiselectLabelPipe } from './rt-multiselect-label.pipe';\n\nconst BEM_BLOCK: string = 'rt-multiselect';\n\n/** Клавиши, открывающие закрытый dropdown с фокуса на trigger'е. */\n\nlet panelIdSeed: number = 0;\n\nfunction nextPanelId(): number {\n    panelIdSeed += 1;\n    return panelIdSeed;\n}\n\n/**\n * Multi-select с chip-rendering выбранных значений в trigger.\n *\n * Panel рендерится через CDK Overlay (`[rtPopover]`) — не обрезается overflow,\n * авто-flip. Панель НЕ закрывается после выбора (multi vs single). CVA через\n * общий `RtFormControlBase`. Reuses `IRtSelect.Option<TValue>` (type-import).\n * Чипы закрываются поштучно; крестик (`clearable`) слева от шеврона очищает весь\n * выбор.\n *\n * Keyboard-nav (activedescendant): фокус на trigger'е, ArrowUp/Down — highlight,\n * Enter — toggle опции (panel остаётся открытой), Escape — закрыть. Home/End —\n * deferred.\n */\n@Component({\n    selector: 'rt-multiselect',\n    templateUrl: './rt-multiselect.component.html',\n    styleUrl: './rt-multiselect.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        RtIconButtonComponent,\n        RtIconComponent,\n        RtPopoverDirective,\n        RtTagComponent,\n        BlockDirective,\n        ElemDirective,\n        ModDirective,\n\n        // pipes\n        RtMultiselectLabelPipe,\n    ],\n    providers: [\n        // Алиас базового токена — для contentChild(RtFormControlBase) в rt-field.\n        { provide: RtFormControlBase, useExisting: forwardRef(() => RtMultiselectComponent) },\n    ],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        '[class.rt-multiselect--open]': 'isOpen()',\n        '[class.rt-multiselect--disabled]': 'isDisabled()',\n        '[class.rt-multiselect--readonly]': 'isReadonly()',\n        '[class.rt-multiselect--invalid]': 'isInvalid()',\n        '[class.rt-multiselect--borderless]': '!bordered()',\n        '[class.rt-multiselect--size--sm]': \"size() === 'sm'\",\n        '[class.rt-multiselect--size--lg]': \"size() === 'lg'\",\n    },\n})\nexport class RtMultiselectComponent<TValue> extends RtFormControlBase<ReadonlyArray<TValue>> {\n    readonly #t_uiSelectValues: Signal<string> = rtKitLabel('uiSelectValues');\n\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly panelId: string = `rt-multiselect-panel-${nextPanelId()}`;\n\n    protected readonly placeholderText: Signal<string> = computed((): string => this.placeholder() || this.#t_uiSelectValues());\n\n    protected readonly popover: Signal<RtPopoverDirective> = viewChild.required(RtPopoverDirective);\n\n    protected readonly triggerEl: Signal<ElementRef<HTMLButtonElement> | undefined> = viewChild<ElementRef<HTMLButtonElement>>('triggerEl');\n\n    /** Раскрытые ветки дерева. Живут, пока открыта панель: при открытии раскрыты ветки над выбранным. */\n    protected readonly openBranches: WritableSignal<ReadonlySet<TValue>> = signal<ReadonlySet<TValue>>(new Set<TValue>());\n\n    /** Дерево ли список: тогда у строк есть место под стрелку и отступ по уровню. */\n    protected readonly isTree: Signal<boolean> = computed((): boolean => rtTreeIsTree(this.options()));\n\n    /** Видимые строки: плоский список — как прежде, дерево — по раскрытым веткам. */\n    protected readonly rows: Signal<ReadonlyArray<IRtSelect.Row<TValue>>> = computed((): ReadonlyArray<IRtSelect.Row<TValue>> =>\n        rtTreeRows(this.options(), this.openBranches())\n    );\n\n    /** Флажок каждой строки: у листа — выбран ли он, у ветки — выведен из её включённых листьев. */\n    protected readonly rowChecks: Signal<ReadonlyArray<IRtSelect.TBranchState>> = computed((): ReadonlyArray<IRtSelect.TBranchState> =>\n        this.rows().map((row: IRtSelect.Row<TValue>): IRtSelect.TBranchState => this.#checkOf(row))\n    );\n\n    protected readonly isOpen: Signal<boolean> = computed((): boolean => this.popover().isOpen());\n\n    /** Клавиатура списка: подсветка, клавиши открытия, id для `aria-activedescendant`, прокрутка к опции. */\n    protected readonly optionList: RtOptionList = new RtOptionList({\n        panelId: (): string => this.panelId,\n        isOpen: (): boolean => this.isOpen(),\n        count: (): number => this.rows().length,\n        isDisabled: (index: number): boolean => Boolean(this.rows()[index]?.option.disabled),\n        chooseKeys: new Set<string>(['Enter', ' ']),\n        sideKeys: true,\n        edgeKeys: true,\n    });\n\n    protected readonly activeIndex: WritableSignal<number> = this.optionList.activeIndex;\n\n    /** Идентификатор подсвеченной опции — тот же, что уходит в `aria-activedescendant`. */\n    protected readonly activeOptionId: Signal<string | null> = this.optionList.activeOptionId;\n\n    /**\n     * Своя разметка указателя, если потребитель её объявил. Маркер тот же, что у выбора одного\n     * значения: семьи отличаются только разметкой внутри кнопки.\n     */\n    protected readonly triggerTpl: Signal<RtSelectTriggerDirective<ReadonlyArray<TValue>> | undefined> =\n        contentChild(RtSelectTriggerDirective);\n\n    protected readonly hasValue: Signal<boolean> = computed((): boolean => this.value().length > 0);\n\n    protected readonly visibleChips: Signal<ReadonlyArray<TValue>> = computed((): ReadonlyArray<TValue> =>\n        this.value().slice(0, this.maxChips())\n    );\n\n    protected readonly extraChipsCount: Signal<number> = computed((): number => Math.max(0, this.value().length - this.maxChips()));\n\n    /** Три значения, которые кит отдаёт своей разметке указателя, и не больше. */\n    protected readonly triggerState: Signal<IRtSelect.TriggerState<ReadonlyArray<TValue>>> = computed(\n        (): IRtSelect.TriggerState<ReadonlyArray<TValue>> => ({\n            isOpen: this.isOpen(),\n            value: this.value(),\n            label: this.displayText(),\n            isDisabled: this.isDisabled(),\n        })\n    );\n\n    public readonly displayText: Signal<string> = computed((): string =>\n        this.value()\n            .map((v: TValue): string => this.labelOf(v))\n            .join(', ')\n    );\n\n    public readonly options: InputSignal<ReadonlyArray<IRtSelect.Option<TValue>>> = input<ReadonlyArray<IRtSelect.Option<TValue>>>([]);\n\n    /** Пусто — берётся переведённая подпись по умолчанию */\n    public readonly placeholder: InputSignal<string> = input<string>('');\n    public readonly maxChips: InputSignal<number> = input<number>(3);\n\n    /** Иконка слева в указателе — та же, что у `rt-select`: перед подсказкой или чипами. */\n    public readonly iconLeft: InputSignal<IRtIcon.Name | null> = input<IRtIcon.Name | null>(null);\n\n    /**\n     * Чем мерится панель. По умолчанию она не уже кнопки и дальше растёт по содержимому:\n     * со своим указателем кнопка бывает узкой, и панель по её ширине давила бы содержимое.\n     * `trigger` возвращает прежнее — ровно по кнопке, `auto` пускает панель по содержимому\n     * целиком. Предел высоты назначается входом `panelMaxHeight`.\n     */\n    public readonly panelWidth: InputSignal<IRtPopover.Width> = input<IRtPopover.Width>('trigger-min');\n\n    /**\n     * Предел высоты панели — длина как в стилях, например `20rem`. Пусто — предел кита\n     * `--rt-input-panel-max-height`, и длинный список прокручивается внутри панели: без предела\n     * он уходил за нижний край экрана, и пункты за краем были недостижимы. `none` снимает предел —\n     * для короткого списка, который должен открываться целиком, без прокрутки. Значение ставится\n     * на саму панель: она рисуется в наложении, вне поддерева блока.\n     */\n    public readonly panelMaxHeight: InputSignal<string | null> = input<string | null>(null);\n\n    public override setDisabledState(disabled: boolean): void {\n        super.setDisabledState(disabled);\n        if (disabled) {\n            this.popover().close();\n        }\n    }\n\n    protected getEmptyValue(): ReadonlyArray<TValue> {\n        return [];\n    }\n\n    protected focusAfterClear(): void {\n        this.triggerEl()?.nativeElement.focus();\n    }\n\n    protected labelOf(value: TValue): string {\n        return rtTreeFind(this.options(), value)?.label ?? String(value);\n    }\n\n    protected isSelected(value: TValue): boolean {\n        return this.value().includes(value);\n    }\n\n    protected onOpened(): void {\n        this.openBranches.set(rtTreeOpenFor(this.options(), this.value()));\n    }\n\n    protected toggleBranch(event: Event, value: TValue): void {\n        event.stopPropagation();\n        this.openBranches.update((open: ReadonlySet<TValue>): ReadonlySet<TValue> => rtTreeToggle(open, value));\n    }\n\n    protected onClosed(): void {\n        this.activeIndex.set(-1);\n        this.markTouched();\n    }\n\n    /**\n     * Лист переключается сам. Ветка выбирает все свои включённые листья или снимает их, когда\n     * выбраны все; своё значение ветки в выбор не пишется.\n     */\n    protected toggleOption(opt: IRtSelect.Option<TValue>): void {\n        if (opt.disabled || this.isDisabled()) {\n            return;\n        }\n        const leaves: ReadonlyArray<TValue> = rtTreeLeaves(opt);\n        const current: ReadonlyArray<TValue> = this.value();\n        const clearing: boolean = rtTreeBranchState(opt, current) === 'all';\n        const next: ReadonlyArray<TValue> = clearing\n            ? current.filter((v: TValue): boolean => !leaves.includes(v))\n            : [...current, ...leaves.filter((leaf: TValue): boolean => !current.includes(leaf))];\n        this.value.set(next);\n        this.emitChange([...next]);\n    }\n\n    protected removeChip(value: TValue, event: MouseEvent): void {\n        event.stopPropagation();\n        if (this.isDisabled()) {\n            return;\n        }\n        const next: ReadonlyArray<TValue> = this.value().filter((v: TValue): boolean => v !== value);\n        this.value.set(next);\n        this.emitChange([...next]);\n    }\n\n    protected onTriggerKeydown(event: KeyboardEvent): void {\n        if (this.isDisabled()) {\n            return;\n        }\n        if (!this.isOpen()) {\n            if (this.optionList.opensBy(event.key)) {\n                event.preventDefault();\n                this.popover().open();\n                this.optionList.move(1);\n            }\n            return;\n        }\n        this.#handleOpenKeydown(event);\n    }\n\n    #handleOpenKeydown(event: KeyboardEvent): void {\n        const action: TRtOptionListAction = this.optionList.actionOf(event.key);\n        if (action === 'none') {\n            return;\n        }\n        event.preventDefault();\n        switch (action) {\n            case 'next':\n                this.optionList.move(1);\n                break;\n            case 'previous':\n                this.optionList.move(-1);\n                break;\n            case 'first':\n                this.optionList.first();\n                break;\n            case 'last':\n                this.optionList.last();\n                break;\n            case 'choose':\n                this.#toggleActive();\n                break;\n            case 'close':\n                // Escape закрывает один слой: панель. Без остановки событие всплывает до document,\n                // и оверлей под панелью — боковая панель, окно — закрывается вместе с ней.\n                event.stopPropagation();\n                this.popover().close();\n                break;\n            case 'side':\n                this.#sideKey(event.key);\n                break;\n        }\n    }\n\n    #checkOf(row: IRtSelect.Row<TValue>): IRtSelect.TBranchState {\n        if (row.branch) {\n            return rtTreeBranchState(row.option, this.value());\n        }\n        return this.value().includes(row.option.value) ? 'all' : 'none';\n    }\n\n    #sideKey(key: string): void {\n        const answer: IRtSelect.SideKeyAnswer<TValue> = rtTreeSideKey(this.rows(), this.activeIndex(), key);\n        const toggle: TValue | null = answer.toggle;\n        if (toggle !== null) {\n            this.openBranches.update((open: ReadonlySet<TValue>): ReadonlySet<TValue> => rtTreeToggle(open, toggle));\n        }\n        this.activeIndex.set(answer.index);\n    }\n\n    #toggleActive(): void {\n        const opts: ReadonlyArray<IRtSelect.Option<TValue>> = this.rows().map(\n            (row: IRtSelect.Row<TValue>): IRtSelect.Option<TValue> => row.option\n        );\n        const index: number = this.activeIndex();\n        if (index >= 0 && index < opts.length) {\n            this.toggleOption(opts[index]);\n        }\n    }\n}\n","<ng-container rtBlock=\"rt-multiselect\">\n    @if (isReadonly()) {\n        <span rtElem=\"readonly\" qa-dataid=\"multiselect-readonly\" [rtMod]=\"{ empty: !displayText() }\">{{ displayText() || '—' }}</span>\n    }\n    <button\n        #triggerEl\n        rtElem=\"trigger\"\n        qa-dataid=\"multiselect-trigger\"\n        type=\"button\"\n        [rtPopoverWidth]=\"panelWidth()\"\n        [rtMod]=\"{ own: !!triggerTpl() }\"\n        [rtPopover]=\"panelTpl\"\n        [rtPopoverDisabled]=\"isDisabled()\"\n        [attr.id]=\"effectiveControlId()\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [attr.aria-haspopup]=\"'listbox'\"\n        [attr.aria-expanded]=\"isOpen()\"\n        [attr.aria-invalid]=\"isInvalid() || null\"\n        [attr.aria-controls]=\"panelId\"\n        [attr.aria-activedescendant]=\"activeOptionId()\"\n        [disabled]=\"isDisabled()\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (rtPopoverOpened)=\"onOpened()\"\n        (rtPopoverClosed)=\"onClosed()\">\n        <!--\n            Разметка указателя: своя, если потребитель её объявил, иначе зашитая китом. Она встаёт\n            внутрь кнопки, а не вместо неё: поведение — открытие панели, приметы доступности,\n            отключённость, клавиши и закрытие — остаётся на кнопке кита.\n        -->\n        @if (triggerTpl(); as tpl) {\n            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: triggerState() }\" />\n        } @else {\n            @if (iconLeft(); as left) {\n                <rt-icon rtElem=\"icon-left\" qa-dataid=\"multiselect-icon-left\" size=\"sm\" color=\"muted\" [name]=\"left\" />\n            }\n            @if (value().length === 0) {\n                <span rtElem=\"placeholder\" qa-dataid=\"multiselect-placeholder\">{{ placeholderText() }}</span>\n            } @else {\n                <span rtElem=\"chips\">\n                    @for (val of visibleChips(); track val) {\n                        <span rtElem=\"chip\" qa-dataid=\"multiselect-chip\" [attr.data-value]=\"val\">\n                            <rt-tag\n                                severity=\"info\"\n                                [value]=\"val | rtMultiselectLabel: options()\"\n                                [closable]=\"true\"\n                                (closed)=\"removeChip(val, $event)\" />\n                        </span>\n                    }\n                    @if (extraChipsCount() > 0) {\n                        <span rtElem=\"chip-more\" qa-dataid=\"multiselect-chip-more\">+{{ extraChipsCount() }}</span>\n                    }\n                </span>\n            }\n            @if (showClearButton()) {\n                @if (clearTabbable()) {\n                    <!-- Место крестика в строке: сам крестик в порядке Tab стоит рядом с кнопкой, ниже. -->\n                    <span rtElem=\"clear-slot\" aria-hidden=\"true\"></span>\n                } @else {\n                    <rt-icon-button\n                        rtElem=\"clear\"\n                        qa-dataid=\"multiselect-clear\"\n                        icon=\"ico-close\"\n                        size=\"sm\"\n                        variant=\"ghost\"\n                        iconColor=\"muted\"\n                        [ariaLabel]=\"t().uiClear\"\n                        [tabIndex]=\"-1\"\n                        (clicked)=\"clear($event)\" />\n                }\n            }\n            <rt-icon rtElem=\"chevron\" name=\"chevron-down\" size=\"sm\" color=\"muted\" />\n        }\n    </button>\n\n    @if (showClearButton() && clearTabbable() && !triggerTpl()) {\n        <!--\n            Крестик в порядке обхода — соседняя кнопка поверх своего места в строке, а не кнопка в\n            кнопке: вложенную кнопку скринридер не объявляет, а её Enter открывал бы список.\n        -->\n        <rt-icon-button\n            rtElem=\"clear\"\n            qa-dataid=\"multiselect-clear\"\n            icon=\"ico-close\"\n            size=\"sm\"\n            variant=\"ghost\"\n            iconColor=\"muted\"\n            [rtMod]=\"{ outside: true }\"\n            [ariaLabel]=\"t().uiClear\"\n            [tabIndex]=\"0\"\n            (clicked)=\"clear($event)\" />\n    }\n\n    <ng-template #panelTpl>\n        <div\n            rtElem=\"panel\"\n            qa-dataid=\"multiselect-panel\"\n            role=\"listbox\"\n            [style.--rt-multiselect-panel-max-height]=\"panelMaxHeight()\"\n            [attr.aria-label]=\"ariaLabel()\">\n            <!--\n                Опции выбираются мышью через (click); keyboard-nav — на trigger'е\n                (activedescendant), опции не focusable индивидуально.\n            -->\n            <!-- eslint-disable @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->\n            <ul rtElem=\"list\">\n                @for (row of rows(); track row.option.value; let i = $index) {\n                    <li\n                        rtElem=\"option\"\n                        qa-dataid=\"multiselect-option\"\n                        role=\"option\"\n                        [id]=\"panelId + '-opt-' + i\"\n                        [attr.data-value]=\"row.option.value\"\n                        [attr.aria-level]=\"isTree() ? row.level + 1 : null\"\n                        [style.--rt-multiselect-tree-level]=\"row.level\"\n                        [rtMod]=\"{\n                            selected: rowChecks()[i] === 'all',\n                            active: i === activeIndex(),\n                            disabled: !!row.option.disabled,\n                        }\"\n                        [attr.aria-selected]=\"rowChecks()[i] === 'all'\"\n                        [attr.aria-disabled]=\"!!row.option.disabled\"\n                        (click)=\"toggleOption(row.option)\">\n                        @if (isTree()) {\n                            @if (row.branch) {\n                                <button\n                                    rtElem=\"toggle\"\n                                    qa-dataid=\"multiselect-option-toggle\"\n                                    type=\"button\"\n                                    tabindex=\"-1\"\n                                    [attr.aria-label]=\"row.open ? t().uiCollapse : t().uiExpand\"\n                                    [attr.aria-expanded]=\"row.open\"\n                                    (click)=\"toggleBranch($event, row.option.value)\">\n                                    <rt-icon size=\"sm\" color=\"muted\" [name]=\"row.open ? 'chevron-down' : 'chevron-right'\" />\n                                </button>\n                            } @else {\n                                <span rtElem=\"toggle-space\"></span>\n                            }\n                        }\n                        <input\n                            rtElem=\"checkbox\"\n                            qa-dataid=\"multiselect-option-checkbox\"\n                            type=\"checkbox\"\n                            tabindex=\"-1\"\n                            [checked]=\"rowChecks()[i] === 'all'\"\n                            [indeterminate]=\"rowChecks()[i] === 'some'\" />\n                        <span rtElem=\"option-label\" qa-dataid=\"multiselect-option-label\">{{ row.option.label }}</span>\n                    </li>\n                } @empty {\n                    <li rtElem=\"empty\" qa-dataid=\"multiselect-empty\">{{ t().uiNoOptions }}</li>\n                }\n            </ul>\n        </div>\n    </ng-template>\n</ng-container>\n"],"mappings":"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"}

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

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