@rt-tools/ui-kit-v2 0.23.2 → 0.23.4

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-scroll-area.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/scroll-area/rt-scroll-area.directives.ts","../../../projects/ui-kit-v2/src/lib/components/scroll-area/rt-scroll-area.component.ts","../../../projects/ui-kit-v2/src/lib/components/scroll-area/rt-scroll-area.component.html","../../../projects/ui-kit-v2/src/lib/components/scroll-area/rt-tools-ui-kit-v2-scroll-area.ts"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Маркеры частей области прокрутки — своим файлом, как у соседних семей.\n *\n * Каждый маркер держит свой шаблон и не знает об области ничего: область читает маркеры среди\n * своего содержимого и берёт у них шаблон. Часть, которую потребитель не объявил, для области\n * просто отсутствует — рисовать нечего.\n */\n\n/**\n * Шапка области: стоит сверху и не прокручивается.\n *\n * @example\n * ```html\n * <rt-scroll-area>\n *     <ng-container *rtScrollAreaHeader>\n *         <h3>Заголовок</h3>\n *     </ng-container>\n * </rt-scroll-area>\n * ```\n */\n@Directive({\n    selector: '[rtScrollAreaHeader]',\n})\nexport class RtScrollAreaHeaderDirective {\n    public readonly templateRef: TemplateRef<void> = inject<TemplateRef<void>>(TemplateRef);\n}\n\n/** Тело области: единственная часть, которая прокручивается. */\n@Directive({\n    selector: '[rtScrollAreaContent]',\n})\nexport class RtScrollAreaContentDirective {\n    public readonly templateRef: TemplateRef<void> = inject<TemplateRef<void>>(TemplateRef);\n}\n\n/** Подвал области: стоит снизу и не прокручивается. */\n@Directive({\n    selector: '[rtScrollAreaFooter]',\n})\nexport class RtScrollAreaFooterDirective {\n    public readonly templateRef: TemplateRef<void> = inject<TemplateRef<void>>(TemplateRef);\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    afterRenderEffect,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    contentChild,\n    DestroyRef,\n    ElementRef,\n    inject,\n    input,\n    InputSignalWithTransform,\n    signal,\n    Signal,\n    viewChild,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\nimport { TNullable } from '@rt-tools/utils';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { RtScrollAreaContentDirective, RtScrollAreaFooterDirective, RtScrollAreaHeaderDirective } from './rt-scroll-area.directives';\n\nconst BEM_BLOCK: string = 'rt-scroll-area';\n\n/**\n * Целый пункт запаса при сравнении прокрутки с высотой.\n *\n * Дробная высота строки оставляет остаток, при котором прокрутка уже в самом низу, а разность\n * всё ещё больше нуля: без запаса признак непоказанного висел бы навсегда.\n */\nconst BOTTOM_SLACK_PX: number = 1;\n\n/**\n * Область прокрутки: шапка и подвал стоят, тело прокручивается.\n *\n * Части объявляет потребитель — по директиве на каждую. Необъявленная часть не рисуется вовсе:\n * пустая шапка это полоса отступа над списком, а высоту она забирает у тела, ради которого\n * область и открыли.\n *\n * Договорённость — `docs/specs/ui-kit-v2/scroll-area/`.\n */\n@Component({\n    selector: 'rt-scroll-area',\n    templateUrl: './rt-scroll-area.component.html',\n    styleUrls: ['./rt-scroll-area.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        RtIconComponent,\n        RtTooltipDirective,\n        BlockDirective,\n        ElemDirective,\n    ],\n    host: { class: BEM_BLOCK },\n})\nexport class RtScrollAreaComponent {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly bodyRef: Signal<TNullable<ElementRef<HTMLElement>>> = viewChild<ElementRef<HTMLElement>>('body');\n    protected readonly footerRef: Signal<TNullable<ElementRef<HTMLElement>>> = viewChild<ElementRef<HTMLElement>>('foot');\n\n    /**\n     * Ниже окна области ещё есть содержимое. Считается по трём числам самого узла, а не по числу\n     * пунктов: область не знает, что ей подали, и высота строки у каждого потребителя своя.\n     */\n    protected readonly hasMoreBelow: WritableSignal<boolean> = signal(false);\n\n    /**\n     * На сколько полоса растушёвки поднята над низом области. Она обязана кончиться там, где\n     * начинается содержимое подвала: разделитель потребитель рисует первой его строкой, и полоса,\n     * оборвавшаяся выше, оставляет до него чистый фон. Считается замером — верхний отступ подвала\n     * потребитель пишет как хочет, и вычесть его в стилях не из чего. Без подвала полоса стоит у\n     * самого низа.\n     */\n    protected readonly hintBottom: WritableSignal<number> = signal(0);\n\n    public readonly headerTpl: Signal<TNullable<RtScrollAreaHeaderDirective>> = contentChild(RtScrollAreaHeaderDirective);\n    public readonly contentTpl: Signal<TNullable<RtScrollAreaContentDirective>> = contentChild(RtScrollAreaContentDirective);\n    public readonly footerTpl: Signal<TNullable<RtScrollAreaFooterDirective>> = contentChild(RtScrollAreaFooterDirective);\n\n    /**\n     * Признак того, что снизу осталось непоказанное. Выключен по умолчанию: область рисуют\n     * десятки экранов, и признак, поставленный безусловно, сдвинул бы вид каждому из них.\n     */\n    public readonly isScrollHintShown: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /**\n     * Наблюдатель за размером тела, его содержимого и подвала. Событие прокрутки приходит только\n     * после движения руки, а список не влезает уже в первую минуту показа: без наблюдателя признак\n     * появлялся бы у того, кто и так догадался прокрутить, и молчал у того, кому он нужен.\n     */\n    #sizeWatch: TNullable<ResizeObserver> = null;\n\n    /**\n     * Наблюдатель за составом тела. Тело — окно постоянной высоты, и когда список дорастает под ним,\n     * размер тела не меняется: наблюдатель размера молчит. Пришедшие узлы ставятся под наблюдение\n     * размера здесь же — их высота меняется и после того, как они легли.\n     */\n    #contentWatch: TNullable<MutationObserver> = null;\n\n    /** Узлы, за которыми наблюдают сейчас: пересозданное тело или подвал ставятся под наблюдение заново. */\n    #watchedBody: HTMLElement | null = null;\n    #watchedFooter: HTMLElement | null = null;\n\n    /** Наблюдение поставлено: тело и подвал могут быть и пустыми, флаг отличает «снято» от «нечего смотреть». */\n    #isWatching: boolean = false;\n\n    /** Перемер по концу перехода или анимации внутри тела; одна ссылка — чтобы снять тот же слушатель. */\n    readonly #onSettled: () => void = (): void => this.onBodyScroll();\n\n    constructor() {\n        // Наблюдатели живут, только пока признак включён: выключенный признак ничего не рисует, а\n        // наблюдатель состава с поддеревом заставлял бы браузер пересчитывать раскладку на каждую\n        // правку внутри тела у каждой области экрана. Включение ставит их, выключение снимает.\n        afterRenderEffect((): void => {\n            const body: HTMLElement | null = this.bodyRef()?.nativeElement ?? null;\n            const footer: HTMLElement | null = this.footerRef()?.nativeElement ?? null;\n\n            if (!this.isScrollHintShown()) {\n                this.#unwatch();\n                this.hasMoreBelow.set(false);\n\n                return;\n            }\n\n            this.onBodyScroll();\n\n            if (!this.#isWatching || body !== this.#watchedBody || footer !== this.#watchedFooter) {\n                this.#watch(body, footer);\n            }\n        });\n\n        this.#destroyRef.onDestroy((): void => this.#unwatch());\n    }\n\n    /**\n     * Нажатие на значок уводит тело к самому низу. Нажатие останавливается здесь и в содержимое\n     * под значком не уходит: под ним живой пункт, и человек, целившийся в подсказку, уехал бы на\n     * чужой экран.\n     */\n    public onScrollHintClick(event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const body: TNullable<ElementRef<HTMLElement>> = this.bodyRef();\n\n        if (!body) {\n            return;\n        }\n\n        body.nativeElement.scrollTo({ top: body.nativeElement.scrollHeight, behavior: 'smooth' });\n    }\n\n    public onBodyScroll(): void {\n        // Выключенный признак не рисуется, и замер для него — чтение раскладки на каждое движение.\n        if (!this.isScrollHintShown()) {\n            return;\n        }\n\n        this.#measureHintBottom();\n\n        const body: TNullable<ElementRef<HTMLElement>> = this.bodyRef();\n\n        if (!body) {\n            this.hasMoreBelow.set(false);\n\n            return;\n        }\n\n        const node: HTMLElement = body.nativeElement;\n\n        this.hasMoreBelow.set(node.scrollHeight - node.scrollTop - node.clientHeight > BOTTOM_SLACK_PX);\n    }\n\n    /**\n     * Подъём полосы над низом области: высота подвала без его верхнего отступа. Ровно на этом\n     * месте начинается содержимое подвала, и до него полоса и должна доходить.\n     */\n    #measureHintBottom(): void {\n        const footer: TNullable<ElementRef<HTMLElement>> = this.footerRef();\n\n        if (!footer) {\n            this.hintBottom.set(0);\n\n            return;\n        }\n\n        const node: HTMLElement = footer.nativeElement;\n        const paddingTop: number = parseFloat(getComputedStyle(node).paddingTop) || 0;\n\n        this.hintBottom.set(Math.max(node.offsetHeight - paddingTop, 0));\n    }\n\n    /** Ставит под наблюдение нынешние тело и подвал; прежние наблюдатели снимаются. */\n    #watch(body: HTMLElement | null, footer: HTMLElement | null): void {\n        this.#unwatch();\n        this.#watchedBody = body;\n        this.#watchedFooter = footer;\n        this.#isWatching = true;\n\n        if (!body) {\n            return;\n        }\n\n        if (typeof ResizeObserver !== 'undefined') {\n            this.#sizeWatch = new ResizeObserver((): void => this.onBodyScroll());\n            this.#observeSizes();\n        }\n\n        if (typeof MutationObserver !== 'undefined') {\n            this.#contentWatch = new MutationObserver((): void => {\n                this.#observeSizes();\n                this.onBodyScroll();\n            });\n            this.#contentWatch.observe(body, { childList: true, subtree: true, characterData: true });\n        }\n\n        // Раскрытая папка дорастает переходом высоты от нуля: состав меняется в миг вставки, когда\n        // высота ещё ноль, а наблюдатель размера пропускал конец роста. Конец перехода и анимации\n        // всплывает к телу и перемеряет его по вставшей высоте.\n        body.addEventListener('transitionend', this.#onSettled);\n        body.addEventListener('animationend', this.#onSettled);\n    }\n\n    /**\n     * Размер наблюдается у тела, у каждого его прямого потомка и у подвала. Подвал — наравне с\n     * телом: от его высоты считается подъём полосы, и не наблюдавшаяся, она осталась бы стоять по\n     * прежней высоте подвала и наехала бы на его первую строку.\n     */\n    #observeSizes(): void {\n        const watch: TNullable<ResizeObserver> = this.#sizeWatch;\n        const body: HTMLElement | null = this.#watchedBody;\n\n        if (!watch || !body) {\n            return;\n        }\n\n        // Состав тела сменился — ушедшие узлы снимаются вместе со всеми, пришедшие ставятся заново.\n        watch.disconnect();\n        watch.observe(body);\n        Array.from(body.children).forEach((child: Element): void => watch.observe(child));\n\n        if (this.#watchedFooter) {\n            watch.observe(this.#watchedFooter);\n        }\n    }\n\n    #unwatch(): void {\n        this.#watchedBody?.removeEventListener('transitionend', this.#onSettled);\n        this.#watchedBody?.removeEventListener('animationend', this.#onSettled);\n        this.#sizeWatch?.disconnect();\n        this.#sizeWatch = null;\n        this.#contentWatch?.disconnect();\n        this.#contentWatch = null;\n        this.#watchedBody = null;\n        this.#watchedFooter = null;\n        this.#isWatching = false;\n    }\n}\n","<ng-container rtBlock=\"rt-scroll-area\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\" qa-dataid=\"scroll-area-header\">\n            <ng-container [ngTemplateOutlet]=\"headerTpl()?.templateRef ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div #body rtElem=\"body\" qa-dataid=\"scroll-area-body\" (scroll)=\"onBodyScroll()\">\n            <ng-container [ngTemplateOutlet]=\"contentTpl()?.templateRef ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div #foot rtElem=\"footer\" qa-dataid=\"scroll-area-footer\">\n            <ng-container [ngTemplateOutlet]=\"footerTpl()?.templateRef ?? null\" />\n        </div>\n    }\n\n    <!--\n        Признак того, что снизу осталось непоказанное: край списка, ровно обрезанный подвалом,\n        читается как конец списка, и человек считает, что пункт пропал. Полоса живёт на хосте, а\n        не внутри тела: тело обрезает всё по своему краю, и полоса обрывалась бы на верхнем\n        отступе подвала — между ней и разделителем, который потребитель рисует первой строкой\n        подвала, оставалась бы полоса чистого фона.\n    -->\n    @if (isScrollHintShown() && hasMoreBelow()) {\n        <div rtElem=\"scroll-hint\" qa-dataid=\"scroll-area-scroll-hint\" [style.bottom.px]=\"hintBottom()\">\n            <rt-icon\n                rtElem=\"scroll-hint-icon\"\n                qa-dataid=\"scroll-area-scroll-hint-icon\"\n                name=\"chevron-down\"\n                size=\"md\"\n                role=\"button\"\n                tabindex=\"0\"\n                rtTooltipPlacement=\"top\"\n                [rtTooltip]=\"t().uiScrollDown\"\n                [attr.aria-label]=\"t().uiScrollDown\"\n                (click)=\"onScrollHintClick($event)\"\n                (keydown.enter)=\"onScrollHintClick($event)\" />\n        </div>\n    }\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rt-tools-ui-kit-v2-scroll-area.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/scroll-area/rt-scroll-area.directives.ts","../../../projects/ui-kit-v2/src/lib/components/scroll-area/rt-scroll-area.component.ts","../../../projects/ui-kit-v2/src/lib/components/scroll-area/rt-scroll-area.component.html"],"sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Маркеры частей области прокрутки — своим файлом, как у соседних семей.\n *\n * Каждый маркер держит свой шаблон и не знает об области ничего: область читает маркеры среди\n * своего содержимого и берёт у них шаблон. Часть, которую потребитель не объявил, для области\n * просто отсутствует — рисовать нечего.\n */\n\n/**\n * Шапка области: стоит сверху и не прокручивается.\n *\n * @example\n * ```html\n * <rt-scroll-area>\n *     <ng-container *rtScrollAreaHeader>\n *         <h3>Заголовок</h3>\n *     </ng-container>\n * </rt-scroll-area>\n * ```\n */\n@Directive({\n    selector: '[rtScrollAreaHeader]',\n})\nexport class RtScrollAreaHeaderDirective {\n    public readonly templateRef: TemplateRef<void> = inject<TemplateRef<void>>(TemplateRef);\n}\n\n/** Тело области: единственная часть, которая прокручивается. */\n@Directive({\n    selector: '[rtScrollAreaContent]',\n})\nexport class RtScrollAreaContentDirective {\n    public readonly templateRef: TemplateRef<void> = inject<TemplateRef<void>>(TemplateRef);\n}\n\n/** Подвал области: стоит снизу и не прокручивается. */\n@Directive({\n    selector: '[rtScrollAreaFooter]',\n})\nexport class RtScrollAreaFooterDirective {\n    public readonly templateRef: TemplateRef<void> = inject<TemplateRef<void>>(TemplateRef);\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n    afterRenderEffect,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    contentChild,\n    DestroyRef,\n    ElementRef,\n    inject,\n    input,\n    InputSignalWithTransform,\n    signal,\n    Signal,\n    viewChild,\n    ViewEncapsulation,\n    WritableSignal,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\nimport { TNullable } from '@rt-tools/utils';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';\nimport { RtScrollAreaContentDirective, RtScrollAreaFooterDirective, RtScrollAreaHeaderDirective } from './rt-scroll-area.directives';\n\nconst BEM_BLOCK: string = 'rt-scroll-area';\n\n/**\n * Целый пункт запаса при сравнении прокрутки с высотой.\n *\n * Дробная высота строки оставляет остаток, при котором прокрутка уже в самом низу, а разность\n * всё ещё больше нуля: без запаса признак непоказанного висел бы навсегда.\n */\nconst BOTTOM_SLACK_PX: number = 1;\n\n/**\n * Область прокрутки: шапка и подвал стоят, тело прокручивается.\n *\n * Части объявляет потребитель — по директиве на каждую. Необъявленная часть не рисуется вовсе:\n * пустая шапка это полоса отступа над списком, а высоту она забирает у тела, ради которого\n * область и открыли.\n *\n * Договорённость — `docs/specs/ui-kit-v2/scroll-area/`.\n */\n@Component({\n    selector: 'rt-scroll-area',\n    templateUrl: './rt-scroll-area.component.html',\n    styleUrls: ['./rt-scroll-area.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // Angular\n        NgTemplateOutlet,\n\n        // standalone components / directives\n        RtIconComponent,\n        RtTooltipDirective,\n        BlockDirective,\n        ElemDirective,\n    ],\n    host: { class: BEM_BLOCK },\n})\nexport class RtScrollAreaComponent {\n    protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n    protected readonly bodyRef: Signal<TNullable<ElementRef<HTMLElement>>> = viewChild<ElementRef<HTMLElement>>('body');\n    protected readonly footerRef: Signal<TNullable<ElementRef<HTMLElement>>> = viewChild<ElementRef<HTMLElement>>('foot');\n\n    /**\n     * Ниже окна области ещё есть содержимое. Считается по трём числам самого узла, а не по числу\n     * пунктов: область не знает, что ей подали, и высота строки у каждого потребителя своя.\n     */\n    protected readonly hasMoreBelow: WritableSignal<boolean> = signal(false);\n\n    /**\n     * На сколько полоса растушёвки поднята над низом области. Она обязана кончиться там, где\n     * начинается содержимое подвала: разделитель потребитель рисует первой его строкой, и полоса,\n     * оборвавшаяся выше, оставляет до него чистый фон. Считается замером — верхний отступ подвала\n     * потребитель пишет как хочет, и вычесть его в стилях не из чего. Без подвала полоса стоит у\n     * самого низа.\n     */\n    protected readonly hintBottom: WritableSignal<number> = signal(0);\n\n    public readonly headerTpl: Signal<TNullable<RtScrollAreaHeaderDirective>> = contentChild(RtScrollAreaHeaderDirective);\n    public readonly contentTpl: Signal<TNullable<RtScrollAreaContentDirective>> = contentChild(RtScrollAreaContentDirective);\n    public readonly footerTpl: Signal<TNullable<RtScrollAreaFooterDirective>> = contentChild(RtScrollAreaFooterDirective);\n\n    /**\n     * Признак того, что снизу осталось непоказанное. Выключен по умолчанию: область рисуют\n     * десятки экранов, и признак, поставленный безусловно, сдвинул бы вид каждому из них.\n     */\n    public readonly isScrollHintShown: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /**\n     * Наблюдатель за размером тела, его содержимого и подвала. Событие прокрутки приходит только\n     * после движения руки, а список не влезает уже в первую минуту показа: без наблюдателя признак\n     * появлялся бы у того, кто и так догадался прокрутить, и молчал у того, кому он нужен.\n     */\n    #sizeWatch: TNullable<ResizeObserver> = null;\n\n    /**\n     * Наблюдатель за составом тела. Тело — окно постоянной высоты, и когда список дорастает под ним,\n     * размер тела не меняется: наблюдатель размера молчит. Пришедшие узлы ставятся под наблюдение\n     * размера здесь же — их высота меняется и после того, как они легли.\n     */\n    #contentWatch: TNullable<MutationObserver> = null;\n\n    /** Узлы, за которыми наблюдают сейчас: пересозданное тело или подвал ставятся под наблюдение заново. */\n    #watchedBody: HTMLElement | null = null;\n    #watchedFooter: HTMLElement | null = null;\n\n    /** Наблюдение поставлено: тело и подвал могут быть и пустыми, флаг отличает «снято» от «нечего смотреть». */\n    #isWatching: boolean = false;\n\n    /** Перемер по концу перехода или анимации внутри тела; одна ссылка — чтобы снять тот же слушатель. */\n    readonly #onSettled: () => void = (): void => this.onBodyScroll();\n\n    constructor() {\n        // Наблюдатели живут, только пока признак включён: выключенный признак ничего не рисует, а\n        // наблюдатель состава с поддеревом заставлял бы браузер пересчитывать раскладку на каждую\n        // правку внутри тела у каждой области экрана. Включение ставит их, выключение снимает.\n        afterRenderEffect((): void => {\n            const body: HTMLElement | null = this.bodyRef()?.nativeElement ?? null;\n            const footer: HTMLElement | null = this.footerRef()?.nativeElement ?? null;\n\n            if (!this.isScrollHintShown()) {\n                this.#unwatch();\n                this.hasMoreBelow.set(false);\n\n                return;\n            }\n\n            this.onBodyScroll();\n\n            if (!this.#isWatching || body !== this.#watchedBody || footer !== this.#watchedFooter) {\n                this.#watch(body, footer);\n            }\n        });\n\n        this.#destroyRef.onDestroy((): void => this.#unwatch());\n    }\n\n    /**\n     * Нажатие на значок уводит тело к самому низу. Нажатие останавливается здесь и в содержимое\n     * под значком не уходит: под ним живой пункт, и человек, целившийся в подсказку, уехал бы на\n     * чужой экран.\n     */\n    public onScrollHintClick(event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const body: TNullable<ElementRef<HTMLElement>> = this.bodyRef();\n\n        if (!body) {\n            return;\n        }\n\n        body.nativeElement.scrollTo({ top: body.nativeElement.scrollHeight, behavior: 'smooth' });\n    }\n\n    public onBodyScroll(): void {\n        // Выключенный признак не рисуется, и замер для него — чтение раскладки на каждое движение.\n        if (!this.isScrollHintShown()) {\n            return;\n        }\n\n        this.#measureHintBottom();\n\n        const body: TNullable<ElementRef<HTMLElement>> = this.bodyRef();\n\n        if (!body) {\n            this.hasMoreBelow.set(false);\n\n            return;\n        }\n\n        const node: HTMLElement = body.nativeElement;\n\n        this.hasMoreBelow.set(node.scrollHeight - node.scrollTop - node.clientHeight > BOTTOM_SLACK_PX);\n    }\n\n    /**\n     * Подъём полосы над низом области: высота подвала без его верхнего отступа. Ровно на этом\n     * месте начинается содержимое подвала, и до него полоса и должна доходить.\n     */\n    #measureHintBottom(): void {\n        const footer: TNullable<ElementRef<HTMLElement>> = this.footerRef();\n\n        if (!footer) {\n            this.hintBottom.set(0);\n\n            return;\n        }\n\n        const node: HTMLElement = footer.nativeElement;\n        const paddingTop: number = parseFloat(getComputedStyle(node).paddingTop) || 0;\n\n        this.hintBottom.set(Math.max(node.offsetHeight - paddingTop, 0));\n    }\n\n    /** Ставит под наблюдение нынешние тело и подвал; прежние наблюдатели снимаются. */\n    #watch(body: HTMLElement | null, footer: HTMLElement | null): void {\n        this.#unwatch();\n        this.#watchedBody = body;\n        this.#watchedFooter = footer;\n        this.#isWatching = true;\n\n        if (!body) {\n            return;\n        }\n\n        if (typeof ResizeObserver !== 'undefined') {\n            this.#sizeWatch = new ResizeObserver((): void => this.onBodyScroll());\n            this.#observeSizes();\n        }\n\n        if (typeof MutationObserver !== 'undefined') {\n            this.#contentWatch = new MutationObserver((): void => {\n                this.#observeSizes();\n                this.onBodyScroll();\n            });\n            this.#contentWatch.observe(body, { childList: true, subtree: true, characterData: true });\n        }\n\n        // Раскрытая папка дорастает переходом высоты от нуля: состав меняется в миг вставки, когда\n        // высота ещё ноль, а наблюдатель размера пропускал конец роста. Конец перехода и анимации\n        // всплывает к телу и перемеряет его по вставшей высоте.\n        body.addEventListener('transitionend', this.#onSettled);\n        body.addEventListener('animationend', this.#onSettled);\n    }\n\n    /**\n     * Размер наблюдается у тела, у каждого его прямого потомка и у подвала. Подвал — наравне с\n     * телом: от его высоты считается подъём полосы, и не наблюдавшаяся, она осталась бы стоять по\n     * прежней высоте подвала и наехала бы на его первую строку.\n     */\n    #observeSizes(): void {\n        const watch: TNullable<ResizeObserver> = this.#sizeWatch;\n        const body: HTMLElement | null = this.#watchedBody;\n\n        if (!watch || !body) {\n            return;\n        }\n\n        // Состав тела сменился — ушедшие узлы снимаются вместе со всеми, пришедшие ставятся заново.\n        watch.disconnect();\n        watch.observe(body);\n        Array.from(body.children).forEach((child: Element): void => watch.observe(child));\n\n        if (this.#watchedFooter) {\n            watch.observe(this.#watchedFooter);\n        }\n    }\n\n    #unwatch(): void {\n        this.#watchedBody?.removeEventListener('transitionend', this.#onSettled);\n        this.#watchedBody?.removeEventListener('animationend', this.#onSettled);\n        this.#sizeWatch?.disconnect();\n        this.#sizeWatch = null;\n        this.#contentWatch?.disconnect();\n        this.#contentWatch = null;\n        this.#watchedBody = null;\n        this.#watchedFooter = null;\n        this.#isWatching = false;\n    }\n}\n","<ng-container rtBlock=\"rt-scroll-area\">\n    @if (headerTpl()) {\n        <div rtElem=\"header\" qa-dataid=\"scroll-area-header\">\n            <ng-container [ngTemplateOutlet]=\"headerTpl()?.templateRef ?? null\" />\n        </div>\n    }\n\n    @if (contentTpl()) {\n        <div #body rtElem=\"body\" qa-dataid=\"scroll-area-body\" (scroll)=\"onBodyScroll()\">\n            <ng-container [ngTemplateOutlet]=\"contentTpl()?.templateRef ?? null\" />\n        </div>\n    }\n\n    @if (footerTpl()) {\n        <div #foot rtElem=\"footer\" qa-dataid=\"scroll-area-footer\">\n            <ng-container [ngTemplateOutlet]=\"footerTpl()?.templateRef ?? null\" />\n        </div>\n    }\n\n    <!--\n        Признак того, что снизу осталось непоказанное: край списка, ровно обрезанный подвалом,\n        читается как конец списка, и человек считает, что пункт пропал. Полоса живёт на хосте, а\n        не внутри тела: тело обрезает всё по своему краю, и полоса обрывалась бы на верхнем\n        отступе подвала — между ней и разделителем, который потребитель рисует первой строкой\n        подвала, оставалась бы полоса чистого фона.\n    -->\n    @if (isScrollHintShown() && hasMoreBelow()) {\n        <div rtElem=\"scroll-hint\" qa-dataid=\"scroll-area-scroll-hint\" [style.bottom.px]=\"hintBottom()\">\n            <rt-icon\n                rtElem=\"scroll-hint-icon\"\n                qa-dataid=\"scroll-area-scroll-hint-icon\"\n                name=\"chevron-down\"\n                size=\"md\"\n                role=\"button\"\n                tabindex=\"0\"\n                rtTooltipPlacement=\"top\"\n                [rtTooltip]=\"t().uiScrollDown\"\n                [attr.aria-label]=\"t().uiScrollDown\"\n                (click)=\"onScrollHintClick($event)\"\n                (keydown.enter)=\"onScrollHintClick($event)\" />\n        </div>\n    }\n</ng-container>\n"],"mappings":";;;;;;;AAyBA,IAAa,8BAAb,MAAa,4BAA2B;CAHxC,cAAA;EAIoB,KAAA,cAAiC,OAA0B,WAAW;CACzF;CAFY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAA2B,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAA3B;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAA2B,cAAA;GAAA,UAAA;GAAA,UAAA;EAAA,CAAA;CAAA;;AAA3B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA2B,YAAA,CAAA;EAHvC,MAAA;EAAU,MAAA,CAAA,EACP,UAAU,uBACb,CAAA;;;AASD,IAAa,+BAAb,MAAa,6BAA4B;CAHzC,cAAA;EAIoB,KAAA,cAAiC,OAA0B,WAAW;CACzF;CAFY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAA4B,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAA5B;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAA4B,cAAA;GAAA,UAAA;GAAA,UAAA;EAAA,CAAA;CAAA;;AAA5B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA4B,YAAA,CAAA;EAHxC,MAAA;EAAU,MAAA,CAAA,EACP,UAAU,wBACb,CAAA;;;AASD,IAAa,8BAAb,MAAa,4BAA2B;CAHxC,cAAA;EAIoB,KAAA,cAAiC,OAA0B,WAAW;CACzF;CAFY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAA2B,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAA3B;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAA2B,cAAA;GAAA,UAAA;GAAA,UAAA;EAAA,CAAA;CAAA;;AAA3B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAA2B,YAAA,CAAA;EAHvC,MAAA;EAAU,MAAA,CAAA,EACP,UAAU,uBACb,CAAA;;;ACZD,MAAM,YAAoB;AAQ1B,MAAM,kBAA0B;AA6BhC,IAAa,wBAAb,MAAa,sBAAqB;CAiCrB;CAOT;CAOA;CAGA;CACA;CAGA;CAGS;CAET,cAAA;EA1DmB,KAAA,IAA4B,OAAO,aAAa;EAEhD,KAAA,UAAsD,UAAmC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;EAChG,KAAA,YAAwD,UAAmC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAMlG,KAAA,eAAwC,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;EASrD,KAAA,aAAqC,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EAEjD,KAAA,YAA4D,aAAa,6BAA4B,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EACrG,KAAA,aAA8D,aAAa,8BAA6B,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EACxG,KAAA,YAA4D,aAAa,6BAA4B,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;EAMrG,KAAA,oBAAqE,MAA6B,OAAK;GAAA,GAAA,YAAA,EAAA,WAAA,oBAAA,+BAAA,CAAA;GACnH,WAAW;EAAgB,CAAA;EAGtB,KAAA,cAA0B,OAAO,UAAU;EAOpD,KAAA,aAAwC;EAOxC,KAAA,gBAA6C;EAG7C,KAAA,eAAmC;EACnC,KAAA,iBAAqC;EAGrC,KAAA,cAAuB;EAGd,KAAA,mBAAqC,KAAK,aAAY;EAM3D,wBAA6B;GACzB,MAAM,OAA2B,KAAK,QAAO,CAAE,EAAE,iBAAiB;GAClE,MAAM,SAA6B,KAAK,UAAS,CAAE,EAAE,iBAAiB;GAEtE,IAAI,CAAC,KAAK,kBAAiB,GAAI;IAC3B,KAAK,SAAQ;IACb,KAAK,aAAa,IAAI,KAAK;IAE3B;GACJ;GAEA,KAAK,aAAY;GAEjB,IAAI,CAAC,KAAK,eAAe,SAAS,KAAK,gBAAgB,WAAW,KAAK,gBACnE,KAAK,OAAO,MAAM,MAAM;EAEhC,CAAC;EAED,KAAK,YAAY,gBAAsB,KAAK,SAAQ,CAAE;CAC1D;CAOO,kBAAkB,OAAY;EACjC,MAAM,eAAc;EACpB,MAAM,gBAAe;EAErB,MAAM,OAA2C,KAAK,QAAO;EAE7D,IAAI,CAAC,MACD;EAGJ,KAAK,cAAc,SAAS;GAAE,KAAK,KAAK,cAAc;GAAc,UAAU;EAAQ,CAAE;CAC5F;CAEO,eAAY;EAEf,IAAI,CAAC,KAAK,kBAAiB,GACvB;EAGJ,KAAK,mBAAkB;EAEvB,MAAM,OAA2C,KAAK,QAAO;EAE7D,IAAI,CAAC,MAAM;GACP,KAAK,aAAa,IAAI,KAAK;GAE3B;EACJ;EAEA,MAAM,OAAoB,KAAK;EAE/B,KAAK,aAAa,IAAI,KAAK,eAAe,KAAK,YAAY,KAAK,eAAe,eAAe;CAClG;CAMA,qBAAkB;EACd,MAAM,SAA6C,KAAK,UAAS;EAEjE,IAAI,CAAC,QAAQ;GACT,KAAK,WAAW,IAAI,CAAC;GAErB;EACJ;EAEA,MAAM,OAAoB,OAAO;EACjC,MAAM,aAAqB,WAAW,iBAAiB,IAAI,CAAC,CAAC,UAAU,KAAK;EAE5E,KAAK,WAAW,IAAI,KAAK,IAAI,KAAK,eAAe,YAAY,CAAC,CAAC;CACnE;CAGA,OAAO,MAA0B,QAA0B;EACvD,KAAK,SAAQ;EACb,KAAK,eAAe;EACpB,KAAK,iBAAiB;EACtB,KAAK,cAAc;EAEnB,IAAI,CAAC,MACD;EAGJ,IAAI,OAAO,mBAAmB,aAAa;GACvC,KAAK,aAAa,IAAI,qBAA2B,KAAK,aAAY,CAAE;GACpE,KAAK,cAAa;EACtB;EAEA,IAAI,OAAO,qBAAqB,aAAa;GACzC,KAAK,gBAAgB,IAAI,uBAA4B;IACjD,KAAK,cAAa;IAClB,KAAK,aAAY;GACrB,CAAC;GACD,KAAK,cAAc,QAAQ,MAAM;IAAE,WAAW;IAAM,SAAS;IAAM,eAAe;GAAI,CAAE;EAC5F;EAKA,KAAK,iBAAiB,iBAAiB,KAAK,UAAU;EACtD,KAAK,iBAAiB,gBAAgB,KAAK,UAAU;CACzD;CAOA,gBAAa;EACT,MAAM,QAAmC,KAAK;EAC9C,MAAM,OAA2B,KAAK;EAEtC,IAAI,CAAC,SAAS,CAAC,MACX;EAIJ,MAAM,WAAU;EAChB,MAAM,QAAQ,IAAI;EAClB,MAAM,KAAK,KAAK,QAAQ,CAAC,CAAC,SAAS,UAAyB,MAAM,QAAQ,KAAK,CAAC;EAEhF,IAAI,KAAK,gBACL,MAAM,QAAQ,KAAK,cAAc;CAEzC;CAEA,WAAQ;EACJ,KAAK,cAAc,oBAAoB,iBAAiB,KAAK,UAAU;EACvE,KAAK,cAAc,oBAAoB,gBAAgB,KAAK,UAAU;EACtE,KAAK,YAAY,WAAU;EAC3B,KAAK,aAAa;EAClB,KAAK,eAAe,WAAU;EAC9B,KAAK,gBAAgB;EACrB,KAAK,eAAe;EACpB,KAAK,iBAAiB;EACtB,KAAK,cAAc;CACvB;CA9MS;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAqB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAArB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAqB,cAAA;GAAA,UAAA;GAAA,QAAA,EAAA,mBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA,EAAA;GAAA,MAAA,EAAA,gBAAA,iBAAA;GAAA,SAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAqB2D;KAA2B,aAAA;KAAA,UAAA;IAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WACzB;KAA4B,aAAA;KAAA,UAAA;IAAA;IAAA;KAAA,cAAA;KAAA,OAAA;KAAA,WAC9B;KAA2B,aAAA;KAAA,UAAA;IAAA;GAAA;GAAA,aAAA,CAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WAAA,CAAA,MAAA;IAAA,aAAA;IAAA,UAAA;GAAA,GAAA;IAAA,cAAA;IAAA,OAAA;IAAA,WAAA,CAAA,MAAA;IAAA,aAAA;IAAA,UAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCxFxH;GA2CA,QAAA,CAAA,6qDAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDYQ;KAAgB,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAGhB;KAAe,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACf;KAAkB,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;KAAA;KAAA,UAAA,CAAA,WAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAClB;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAIR,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAlBjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,iBAGT,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IAGA;IACA;IACA;IACA;GACH;GAAA,MACK,EAAE,OAAO,UAAS;GAAE,UAAA;GAAA,QAAA,CAAA,6qDAAA;EAAA,CAAA;CAKkF,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,QAAM,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CACJ,QAAM,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAiB3B,2BAA2B,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBACzB,4BAA4B,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAC9B,2BAA2B,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,mBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}

package/fesm2022/rt-tools-ui-kit-v2-section-nav.mjs

@@ -1,37 +1,138 @@
-import * as i0 from '@angular/core';
-import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-import * as i1 from '@rt-tools/ui-kit-v2/radius';
-import { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';
-
-const BEM_BLOCK = 'rt-section-nav';
-class RtSectionNavComponent {
-    constructor() {
-        this.items = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.itemSelect = output();
-    }
-    onSelect(item) {
-        if (item.active) {
-            return;
-        }
-        this.itemSelect.emit(item.id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSectionNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtSectionNavComponent, isStandalone: true, selector: "rt-section-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect" }, host: { attributes: { "role": "navigation" }, classAttribute: "rt-section-nav" }, hostDirectives: [{ directive: i1.RtRadiusDirective, inputs: ["radius", "radius"] }], ngImport: i0, template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-section-nav{--rt-section-nav-tile-radius: var(--rt-radius-xl);--rt-section-nav-tile-shadow: var(--rt-shadow-card-soft);--rt-section-nav-transition-duration: var(--rt-duration-fast);display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-section-nav-tile-radius);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2);transition:background var(--rt-section-nav-transition-duration) ease,box-shadow var(--rt-section-nav-transition-duration) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-section-nav-tile-shadow)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-section-nav-tile-shadow);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-section-nav[data-rt-radius=none]{--rt-section-nav-tile-radius: var(--rt-radius-none)}.rt-section-nav[data-rt-radius=xs]{--rt-section-nav-tile-radius: var(--rt-radius-xs)}.rt-section-nav[data-rt-radius=sm]{--rt-section-nav-tile-radius: var(--rt-radius-sm)}.rt-section-nav[data-rt-radius=ms]{--rt-section-nav-tile-radius: var(--rt-radius-ms)}.rt-section-nav[data-rt-radius=md]{--rt-section-nav-tile-radius: var(--rt-radius-md)}.rt-section-nav[data-rt-radius=lg]{--rt-section-nav-tile-radius: var(--rt-radius-lg)}.rt-section-nav[data-rt-radius=xl]{--rt-section-nav-tile-radius: var(--rt-radius-xl)}.rt-section-nav[data-rt-radius=\"2xl\"]{--rt-section-nav-tile-radius: var(--rt-radius-2xl)}.rt-section-nav[data-rt-radius=full]{--rt-section-nav-tile-radius: var(--rt-radius-full)}[data-theme=dark] .rt-section-nav__tile--active{background:var(--rt-color-bg-nav)}}\n"], dependencies: [{ kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtSectionNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-section-nav', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [RtIconComponent, BlockDirective, ElemDirective, ModDirective], hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }], host: {
-                        class: BEM_BLOCK,
-                        role: 'navigation',
-                    }, template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-section-nav{--rt-section-nav-tile-radius: var(--rt-radius-xl);--rt-section-nav-tile-shadow: var(--rt-shadow-card-soft);--rt-section-nav-transition-duration: var(--rt-duration-fast);display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-section-nav-tile-radius);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2);transition:background var(--rt-section-nav-transition-duration) ease,box-shadow var(--rt-section-nav-transition-duration) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-section-nav-tile-shadow)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-section-nav-tile-shadow);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-section-nav[data-rt-radius=none]{--rt-section-nav-tile-radius: var(--rt-radius-none)}.rt-section-nav[data-rt-radius=xs]{--rt-section-nav-tile-radius: var(--rt-radius-xs)}.rt-section-nav[data-rt-radius=sm]{--rt-section-nav-tile-radius: var(--rt-radius-sm)}.rt-section-nav[data-rt-radius=ms]{--rt-section-nav-tile-radius: var(--rt-radius-ms)}.rt-section-nav[data-rt-radius=md]{--rt-section-nav-tile-radius: var(--rt-radius-md)}.rt-section-nav[data-rt-radius=lg]{--rt-section-nav-tile-radius: var(--rt-radius-lg)}.rt-section-nav[data-rt-radius=xl]{--rt-section-nav-tile-radius: var(--rt-radius-xl)}.rt-section-nav[data-rt-radius=\"2xl\"]{--rt-section-nav-tile-radius: var(--rt-radius-2xl)}.rt-section-nav[data-rt-radius=full]{--rt-section-nav-tile-radius: var(--rt-radius-full)}[data-theme=dark] .rt-section-nav__tile--active{background:var(--rt-color-bg-nav)}}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemSelect: [{ type: i0.Output, args: ["itemSelect"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, input, output } from "@angular/core";
+import { BlockDirective, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import * as i1 from "@rt-tools/ui-kit-v2/radius";
+import { RtRadiusDirective } from "@rt-tools/ui-kit-v2/radius";
+const BEM_BLOCK = "rt-section-nav";
+var RtSectionNavComponent = class RtSectionNavComponent {
+	constructor() {
+		this.items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.itemSelect = output();
+	}
+	onSelect(item) {
+		if (item.active) return;
+		this.itemSelect.emit(item.id);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtSectionNavComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtSectionNavComponent,
+			isStandalone: true,
+			selector: "rt-section-nav",
+			inputs: { items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			outputs: { itemSelect: "itemSelect" },
+			host: {
+				attributes: { "role": "navigation" },
+				classAttribute: "rt-section-nav"
+			},
+			hostDirectives: [{
+				directive: i1.RtRadiusDirective,
+				inputs: ["radius", "radius"]
+			}],
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-section-nav{--rt-section-nav-tile-radius: var(--rt-radius-xl);--rt-section-nav-tile-shadow: var(--rt-shadow-card-soft);--rt-section-nav-transition-duration: var(--rt-duration-fast);display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-section-nav-tile-radius);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2);transition:background var(--rt-section-nav-transition-duration) ease,box-shadow var(--rt-section-nav-transition-duration) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-section-nav-tile-shadow)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-section-nav-tile-shadow);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-section-nav[data-rt-radius=none]{--rt-section-nav-tile-radius: var(--rt-radius-none)}.rt-section-nav[data-rt-radius=xs]{--rt-section-nav-tile-radius: var(--rt-radius-xs)}.rt-section-nav[data-rt-radius=sm]{--rt-section-nav-tile-radius: var(--rt-radius-sm)}.rt-section-nav[data-rt-radius=ms]{--rt-section-nav-tile-radius: var(--rt-radius-ms)}.rt-section-nav[data-rt-radius=md]{--rt-section-nav-tile-radius: var(--rt-radius-md)}.rt-section-nav[data-rt-radius=lg]{--rt-section-nav-tile-radius: var(--rt-radius-lg)}.rt-section-nav[data-rt-radius=xl]{--rt-section-nav-tile-radius: var(--rt-radius-xl)}.rt-section-nav[data-rt-radius=\"2xl\"]{--rt-section-nav-tile-radius: var(--rt-radius-2xl)}.rt-section-nav[data-rt-radius=full]{--rt-section-nav-tile-radius: var(--rt-radius-full)}[data-theme=dark] .rt-section-nav__tile--active{background:var(--rt-color-bg-nav)}}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ModDirective,
+					selector: "[rtMod]"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtSectionNavComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-section-nav",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtIconComponent,
+				BlockDirective,
+				ElemDirective,
+				ModDirective
+			],
+			hostDirectives: [{
+				directive: RtRadiusDirective,
+				inputs: ["radius"]
+			}],
+			host: {
+				class: BEM_BLOCK,
+				role: "navigation"
+			},
+			template: "<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-section-nav{--rt-section-nav-tile-radius: var(--rt-radius-xl);--rt-section-nav-tile-shadow: var(--rt-shadow-card-soft);--rt-section-nav-transition-duration: var(--rt-duration-fast);display:flex;gap:var(--rt-space-md)}.rt-section-nav__tile{display:flex;min-width:0;flex:1 0 0;flex-direction:column;align-items:center;justify-content:center;padding:var(--rt-space-md);border:0;border-radius:var(--rt-section-nav-tile-radius);background:transparent;box-shadow:none;color:var(--rt-color-text-primary);cursor:pointer;gap:var(--rt-space-2);transition:background var(--rt-section-nav-transition-duration) ease,box-shadow var(--rt-section-nav-transition-duration) ease}.rt-section-nav__tile:not(.rt-section-nav__tile--active):hover{background:var(--rt-color-bg-surface-subtle);box-shadow:var(--rt-section-nav-tile-shadow)}.rt-section-nav__tile--active{background:var(--rt-color-bg-surface);box-shadow:var(--rt-section-nav-tile-shadow);cursor:default}.rt-section-nav__icon{color:inherit}.rt-section-nav__label{color:inherit;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-sm);font-weight:var(--rt-font-weight-bold);letter-spacing:var(--rt-letter-spacing-wide);line-height:var(--rt-leading-snug)}.rt-section-nav[data-rt-radius=none]{--rt-section-nav-tile-radius: var(--rt-radius-none)}.rt-section-nav[data-rt-radius=xs]{--rt-section-nav-tile-radius: var(--rt-radius-xs)}.rt-section-nav[data-rt-radius=sm]{--rt-section-nav-tile-radius: var(--rt-radius-sm)}.rt-section-nav[data-rt-radius=ms]{--rt-section-nav-tile-radius: var(--rt-radius-ms)}.rt-section-nav[data-rt-radius=md]{--rt-section-nav-tile-radius: var(--rt-radius-md)}.rt-section-nav[data-rt-radius=lg]{--rt-section-nav-tile-radius: var(--rt-radius-lg)}.rt-section-nav[data-rt-radius=xl]{--rt-section-nav-tile-radius: var(--rt-radius-xl)}.rt-section-nav[data-rt-radius=\"2xl\"]{--rt-section-nav-tile-radius: var(--rt-radius-2xl)}.rt-section-nav[data-rt-radius=full]{--rt-section-nav-tile-radius: var(--rt-radius-full)}[data-theme=dark] .rt-section-nav__tile--active{background:var(--rt-color-bg-nav)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		itemSelect: [{
+			type: i0.Output,
+			args: ["itemSelect"]
+		}]
+	}
+});
 export { RtSectionNavComponent };
-//# sourceMappingURL=rt-tools-ui-kit-v2-section-nav.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-section-nav.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"rt-tools-ui-kit-v2-section-nav.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/section-nav/rt-section-nav.component.ts","../../../projects/ui-kit-v2/src/lib/components/section-nav/rt-section-nav.component.html","../../../projects/ui-kit-v2/src/lib/components/section-nav/rt-tools-ui-kit-v2-section-nav.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, InputSignal, output, OutputEmitterRef, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtSectionNav } from './rt-section-nav.model';\n\nconst BEM_BLOCK: string = 'rt-section-nav';\n\n@Component({\n    selector: 'rt-section-nav',\n    templateUrl: './rt-section-nav.component.html',\n    styleUrls: ['./rt-section-nav.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [RtIconComponent, BlockDirective, ElemDirective, ModDirective],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        role: 'navigation',\n    },\n})\nexport class RtSectionNavComponent {\n    public readonly items: InputSignal<readonly IRtSectionNav.Item[]> = input<readonly IRtSectionNav.Item[]>([]);\n\n    public readonly itemSelect: OutputEmitterRef<string> = output<string>();\n\n    protected onSelect(item: IRtSectionNav.Item): void {\n        if (item.active) {\n            return;\n        }\n        this.itemSelect.emit(item.id);\n    }\n}\n","<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAW,gBAAgB;MAe7B,qBAAqB,CAAA;AAblC,IAAA,WAAA,GAAA;QAcoB,IAAA,CAAA,KAAK,GAA+C,KAAK,CAAgC,EAAE;kFAAC;QAE5F,IAAA,CAAA,UAAU,GAA6B,MAAM,EAAU;AAQ1E,IAAA;AANa,IAAA,QAAQ,CAAC,IAAwB,EAAA;AACvC,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACb;QACJ;QACA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IACjC;8GAVS,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,YAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvBlC,snBAgBA,EAAA,MAAA,EAAA,CAAA,mkEAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDAc,eAAe,2IAAE,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,YAAY,EAAA,QAAA,EAAA,SAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAO7D,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBAbjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,EAAA,eAAA,EAGT,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,CAAC,EAAA,cAAA,EACvD,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAA,IAAA,EAChE;AACF,wBAAA,KAAK,EAAE,SAAS;AAChB,wBAAA,IAAI,EAAE,YAAY;AACrB,qBAAA,EAAA,QAAA,EAAA,snBAAA,EAAA,MAAA,EAAA,CAAA,mkEAAA,CAAA,EAAA;;;AErBL;;AAEG;;;;"}
+{"version":3,"file":"rt-tools-ui-kit-v2-section-nav.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/section-nav/rt-section-nav.component.ts","../../../projects/ui-kit-v2/src/lib/components/section-nav/rt-section-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, InputSignal, output, OutputEmitterRef, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { IRtSectionNav } from './rt-section-nav.model';\n\nconst BEM_BLOCK: string = 'rt-section-nav';\n\n@Component({\n    selector: 'rt-section-nav',\n    templateUrl: './rt-section-nav.component.html',\n    styleUrls: ['./rt-section-nav.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [RtIconComponent, BlockDirective, ElemDirective, ModDirective],\n    hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n    host: {\n        class: BEM_BLOCK,\n        role: 'navigation',\n    },\n})\nexport class RtSectionNavComponent {\n    public readonly items: InputSignal<readonly IRtSectionNav.Item[]> = input<readonly IRtSectionNav.Item[]>([]);\n\n    public readonly itemSelect: OutputEmitterRef<string> = output<string>();\n\n    protected onSelect(item: IRtSectionNav.Item): void {\n        if (item.active) {\n            return;\n        }\n        this.itemSelect.emit(item.id);\n    }\n}\n","<ng-container rtBlock=\"rt-section-nav\">\n    @for (item of items(); track item.id) {\n        <button\n            rtElem=\"tile\"\n            qa-dataid=\"section-nav-tile\"\n            type=\"button\"\n            [attr.data-key]=\"item.id\"\n            [attr.data-active]=\"item.active\"\n            [attr.aria-current]=\"item.active ? 'page' : null\"\n            [rtMod]=\"{ active: item.active }\"\n            (click)=\"onSelect(item)\">\n            <rt-icon rtElem=\"icon\" size=\"lg\" [name]=\"item.icon\" />\n            <span rtElem=\"label\">{{ item.label }}</span>\n        </button>\n    }\n</ng-container>\n"],"mappings":";;;;;;AAQA,MAAM,YAAoB;AAe1B,IAAa,wBAAb,MAAa,sBAAqB;CAblC,cAAA;EAcoB,KAAA,QAAoD,MAAqC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAE5F,KAAA,aAAuC,OAAM;CAQhE;CANa,SAAS,MAAwB;EACvC,IAAI,KAAK,QACL;EAEJ,KAAK,WAAW,KAAK,KAAK,EAAE;CAChC;CAVS;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAqB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAArB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAqB,cAAA;GAAA,UAAA;GAAA,QAAA,EAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA,EAAA;GAAA,SAAA,EAAA,YAAA,aAAA;GAAA,MAAA;IAAA,YAAA,EAAA,QAAA,aAAA;IAAA,gBAAA;GAAA;GAAA,gBAAA,CAAA;IAAA,WAAA,GAAA;IAAA,QAAA,CAAA,UAAA,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCvBlC;GAgBA,QAAA,CAAA,mkEAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MDAc;KAAe,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MAAE;KAAY,UAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AAO7D,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAqB,YAAA,CAAA;EAbjC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAgB,iBAGT,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAAC;IAAiB;IAAgB;IAAe;GAAY;GAAC,gBACvD,CAAC;IAAE,WAAW;IAAmB,QAAQ,CAAC,QAAQ;GAAC,CAAE;GAAC,MAChE;IACF,OAAO;IACP,MAAM;GACT;GAAA,UAAA;GAAA,QAAA,CAAA,mkEAAA;EAAA,CAAA"}