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

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

@@ -1,301 +1,408 @@
-import { NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, TemplateRef, Directive, viewChild, signal, contentChild, input, booleanAttribute, DestroyRef, afterRenderEffect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BlockDirective, ElemDirective } from '@rt-tools/core';
-import { RT_KIT_LABELS } from '@rt-tools/ui-kit-v2/core';
-import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
-import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
-
-/**
- * Маркеры частей области прокрутки — своим файлом, как у соседних семей.
- *
- * Каждый маркер держит свой шаблон и не знает об области ничего: область читает маркеры среди
- * своего содержимого и берёт у них шаблон. Часть, которую потребитель не объявил, для области
- * просто отсутствует — рисовать нечего.
- */
-/**
- * Шапка области: стоит сверху и не прокручивается.
- *
- * @example
- * ```html
- * <rt-scroll-area>
- *     <ng-container *rtScrollAreaHeader>
- *         <h3>Заголовок</h3>
- *     </ng-container>
- * </rt-scroll-area>
- * ```
- */
-class RtScrollAreaHeaderDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtScrollAreaHeaderDirective, isStandalone: true, selector: "[rtScrollAreaHeader]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtScrollAreaHeader]',
-                }]
-        }] });
-/** Тело области: единственная часть, которая прокручивается. */
-class RtScrollAreaContentDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtScrollAreaContentDirective, isStandalone: true, selector: "[rtScrollAreaContent]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaContentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtScrollAreaContent]',
-                }]
-        }] });
-/** Подвал области: стоит снизу и не прокручивается. */
-class RtScrollAreaFooterDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtScrollAreaFooterDirective, isStandalone: true, selector: "[rtScrollAreaFooter]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaFooterDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rtScrollAreaFooter]',
-                }]
-        }] });
-
-const BEM_BLOCK = 'rt-scroll-area';
-/**
- * Целый пункт запаса при сравнении прокрутки с высотой.
- *
- * Дробная высота строки оставляет остаток, при котором прокрутка уже в самом низу, а разность
- * всё ещё больше нуля: без запаса признак непоказанного висел бы навсегда.
- */
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, TemplateRef, ViewEncapsulation, afterRenderEffect, booleanAttribute, contentChild, inject, input, signal, viewChild } from "@angular/core";
+import { BlockDirective, ElemDirective } from "@rt-tools/core";
+import { RT_KIT_LABELS } from "@rt-tools/ui-kit-v2/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+import { RtTooltipDirective } from "@rt-tools/ui-kit-v2/tooltip";
+var RtScrollAreaHeaderDirective = class RtScrollAreaHeaderDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtScrollAreaHeaderDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtScrollAreaHeaderDirective,
+			isStandalone: true,
+			selector: "[rtScrollAreaHeader]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtScrollAreaHeaderDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtScrollAreaHeader]" }]
+	}]
+});
+var RtScrollAreaContentDirective = class RtScrollAreaContentDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtScrollAreaContentDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtScrollAreaContentDirective,
+			isStandalone: true,
+			selector: "[rtScrollAreaContent]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtScrollAreaContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtScrollAreaContent]" }]
+	}]
+});
+var RtScrollAreaFooterDirective = class RtScrollAreaFooterDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtScrollAreaFooterDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtScrollAreaFooterDirective,
+			isStandalone: true,
+			selector: "[rtScrollAreaFooter]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtScrollAreaFooterDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtScrollAreaFooter]" }]
+	}]
+});
+const BEM_BLOCK = "rt-scroll-area";
 const BOTTOM_SLACK_PX = 1;
-/**
- * Область прокрутки: шапка и подвал стоят, тело прокручивается.
- *
- * Части объявляет потребитель — по директиве на каждую. Необъявленная часть не рисуется вовсе:
- * пустая шапка это полоса отступа над списком, а высоту она забирает у тела, ради которого
- * область и открыли.
- *
- * Договорённость — `docs/specs/ui-kit-v2/scroll-area/`.
- */
-class RtScrollAreaComponent {
-    #destroyRef;
-    /**
-     * Наблюдатель за размером тела, его содержимого и подвала. Событие прокрутки приходит только
-     * после движения руки, а список не влезает уже в первую минуту показа: без наблюдателя признак
-     * появлялся бы у того, кто и так догадался прокрутить, и молчал у того, кому он нужен.
-     */
-    #sizeWatch;
-    /**
-     * Наблюдатель за составом тела. Тело — окно постоянной высоты, и когда список дорастает под ним,
-     * размер тела не меняется: наблюдатель размера молчит. Пришедшие узлы ставятся под наблюдение
-     * размера здесь же — их высота меняется и после того, как они легли.
-     */
-    #contentWatch;
-    /** Узлы, за которыми наблюдают сейчас: пересозданное тело или подвал ставятся под наблюдение заново. */
-    #watchedBody;
-    #watchedFooter;
-    /** Наблюдение поставлено: тело и подвал могут быть и пустыми, флаг отличает «снято» от «нечего смотреть». */
-    #isWatching;
-    /** Перемер по концу перехода или анимации внутри тела; одна ссылка — чтобы снять тот же слушатель. */
-    #onSettled;
-    constructor() {
-        this.t = inject(RT_KIT_LABELS);
-        this.bodyRef = viewChild('body', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "bodyRef" }] : /* istanbul ignore next */ []));
-        this.footerRef = viewChild('foot', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "footerRef" }] : /* istanbul ignore next */ []));
-        /**
-         * Ниже окна области ещё есть содержимое. Считается по трём числам самого узла, а не по числу
-         * пунктов: область не знает, что ей подали, и высота строки у каждого потребителя своя.
-         */
-        this.hasMoreBelow = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hasMoreBelow" }] : /* istanbul ignore next */ []));
-        /**
-         * На сколько полоса растушёвки поднята над низом области. Она обязана кончиться там, где
-         * начинается содержимое подвала: разделитель потребитель рисует первой его строкой, и полоса,
-         * оборвавшаяся выше, оставляет до него чистый фон. Считается замером — верхний отступ подвала
-         * потребитель пишет как хочет, и вычесть его в стилях не из чего. Без подвала полоса стоит у
-         * самого низа.
-         */
-        this.hintBottom = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hintBottom" }] : /* istanbul ignore next */ []));
-        this.headerTpl = contentChild(RtScrollAreaHeaderDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []));
-        this.contentTpl = contentChild(RtScrollAreaContentDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []));
-        this.footerTpl = contentChild(RtScrollAreaFooterDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "footerTpl" }] : /* istanbul ignore next */ []));
-        /**
-         * Признак того, что снизу осталось непоказанное. Выключен по умолчанию: область рисуют
-         * десятки экранов, и признак, поставленный безусловно, сдвинул бы вид каждому из них.
-         */
-        this.isScrollHintShown = input(false, { ...(ngDevMode ? { debugName: "isScrollHintShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.#destroyRef = inject(DestroyRef);
-        /**
-         * Наблюдатель за размером тела, его содержимого и подвала. Событие прокрутки приходит только
-         * после движения руки, а список не влезает уже в первую минуту показа: без наблюдателя признак
-         * появлялся бы у того, кто и так догадался прокрутить, и молчал у того, кому он нужен.
-         */
-        this.#sizeWatch = null;
-        /**
-         * Наблюдатель за составом тела. Тело — окно постоянной высоты, и когда список дорастает под ним,
-         * размер тела не меняется: наблюдатель размера молчит. Пришедшие узлы ставятся под наблюдение
-         * размера здесь же — их высота меняется и после того, как они легли.
-         */
-        this.#contentWatch = null;
-        /** Узлы, за которыми наблюдают сейчас: пересозданное тело или подвал ставятся под наблюдение заново. */
-        this.#watchedBody = null;
-        this.#watchedFooter = null;
-        /** Наблюдение поставлено: тело и подвал могут быть и пустыми, флаг отличает «снято» от «нечего смотреть». */
-        this.#isWatching = false;
-        /** Перемер по концу перехода или анимации внутри тела; одна ссылка — чтобы снять тот же слушатель. */
-        this.#onSettled = () => this.onBodyScroll();
-        // Наблюдатели живут, только пока признак включён: выключенный признак ничего не рисует, а
-        // наблюдатель состава с поддеревом заставлял бы браузер пересчитывать раскладку на каждую
-        // правку внутри тела у каждой области экрана. Включение ставит их, выключение снимает.
-        afterRenderEffect(() => {
-            const body = this.bodyRef()?.nativeElement ?? null;
-            const footer = this.footerRef()?.nativeElement ?? null;
-            if (!this.isScrollHintShown()) {
-                this.#unwatch();
-                this.hasMoreBelow.set(false);
-                return;
-            }
-            this.onBodyScroll();
-            if (!this.#isWatching || body !== this.#watchedBody || footer !== this.#watchedFooter) {
-                this.#watch(body, footer);
-            }
-        });
-        this.#destroyRef.onDestroy(() => this.#unwatch());
-    }
-    /**
-     * Нажатие на значок уводит тело к самому низу. Нажатие останавливается здесь и в содержимое
-     * под значком не уходит: под ним живой пункт, и человек, целившийся в подсказку, уехал бы на
-     * чужой экран.
-     */
-    onScrollHintClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const body = this.bodyRef();
-        if (!body) {
-            return;
-        }
-        body.nativeElement.scrollTo({ top: body.nativeElement.scrollHeight, behavior: 'smooth' });
-    }
-    onBodyScroll() {
-        // Выключенный признак не рисуется, и замер для него — чтение раскладки на каждое движение.
-        if (!this.isScrollHintShown()) {
-            return;
-        }
-        this.#measureHintBottom();
-        const body = this.bodyRef();
-        if (!body) {
-            this.hasMoreBelow.set(false);
-            return;
-        }
-        const node = body.nativeElement;
-        this.hasMoreBelow.set(node.scrollHeight - node.scrollTop - node.clientHeight > BOTTOM_SLACK_PX);
-    }
-    /**
-     * Подъём полосы над низом области: высота подвала без его верхнего отступа. Ровно на этом
-     * месте начинается содержимое подвала, и до него полоса и должна доходить.
-     */
-    #measureHintBottom() {
-        const footer = this.footerRef();
-        if (!footer) {
-            this.hintBottom.set(0);
-            return;
-        }
-        const node = footer.nativeElement;
-        const paddingTop = parseFloat(getComputedStyle(node).paddingTop) || 0;
-        this.hintBottom.set(Math.max(node.offsetHeight - paddingTop, 0));
-    }
-    /** Ставит под наблюдение нынешние тело и подвал; прежние наблюдатели снимаются. */
-    #watch(body, footer) {
-        this.#unwatch();
-        this.#watchedBody = body;
-        this.#watchedFooter = footer;
-        this.#isWatching = true;
-        if (!body) {
-            return;
-        }
-        if (typeof ResizeObserver !== 'undefined') {
-            this.#sizeWatch = new ResizeObserver(() => this.onBodyScroll());
-            this.#observeSizes();
-        }
-        if (typeof MutationObserver !== 'undefined') {
-            this.#contentWatch = new MutationObserver(() => {
-                this.#observeSizes();
-                this.onBodyScroll();
-            });
-            this.#contentWatch.observe(body, { childList: true, subtree: true, characterData: true });
-        }
-        // Раскрытая папка дорастает переходом высоты от нуля: состав меняется в миг вставки, когда
-        // высота ещё ноль, а наблюдатель размера пропускал конец роста. Конец перехода и анимации
-        // всплывает к телу и перемеряет его по вставшей высоте.
-        body.addEventListener('transitionend', this.#onSettled);
-        body.addEventListener('animationend', this.#onSettled);
-    }
-    /**
-     * Размер наблюдается у тела, у каждого его прямого потомка и у подвала. Подвал — наравне с
-     * телом: от его высоты считается подъём полосы, и не наблюдавшаяся, она осталась бы стоять по
-     * прежней высоте подвала и наехала бы на его первую строку.
-     */
-    #observeSizes() {
-        const watch = this.#sizeWatch;
-        const body = this.#watchedBody;
-        if (!watch || !body) {
-            return;
-        }
-        // Состав тела сменился — ушедшие узлы снимаются вместе со всеми, пришедшие ставятся заново.
-        watch.disconnect();
-        watch.observe(body);
-        Array.from(body.children).forEach((child) => watch.observe(child));
-        if (this.#watchedFooter) {
-            watch.observe(this.#watchedFooter);
-        }
-    }
-    #unwatch() {
-        this.#watchedBody?.removeEventListener('transitionend', this.#onSettled);
-        this.#watchedBody?.removeEventListener('animationend', this.#onSettled);
-        this.#sizeWatch?.disconnect();
-        this.#sizeWatch = null;
-        this.#contentWatch?.disconnect();
-        this.#contentWatch = null;
-        this.#watchedBody = null;
-        this.#watchedFooter = null;
-        this.#isWatching = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtScrollAreaComponent, isStandalone: true, selector: "rt-scroll-area", inputs: { isScrollHintShown: { classPropertyName: "isScrollHintShown", publicName: "isScrollHintShown", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "rt-scroll-area" }, queries: [{ propertyName: "headerTpl", first: true, predicate: RtScrollAreaHeaderDirective, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: RtScrollAreaContentDirective, descendants: true, isSignal: true }, { propertyName: "footerTpl", first: true, predicate: RtScrollAreaFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "footerRef", first: true, predicate: ["foot"], descendants: true, isSignal: true }], ngImport: i0, template: "<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        \u041F\u0440\u0438\u0437\u043D\u0430\u043A \u0442\u043E\u0433\u043E, \u0447\u0442\u043E \u0441\u043D\u0438\u0437\u0443 \u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C \u043D\u0435\u043F\u043E\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u0435: \u043A\u0440\u0430\u0439 \u0441\u043F\u0438\u0441\u043A\u0430, \u0440\u043E\u0432\u043D\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u043D\u043D\u044B\u0439 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C,\n        \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F \u043A\u0430\u043A \u043A\u043E\u043D\u0435\u0446 \u0441\u043F\u0438\u0441\u043A\u0430, \u0438 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043E \u043F\u0443\u043D\u043A\u0442 \u043F\u0440\u043E\u043F\u0430\u043B. \u041F\u043E\u043B\u043E\u0441\u0430 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435, \u0430\n        \u043D\u0435 \u0432\u043D\u0443\u0442\u0440\u0438 \u0442\u0435\u043B\u0430: \u0442\u0435\u043B\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442 \u0432\u0441\u0451 \u043F\u043E \u0441\u0432\u043E\u0435\u043C\u0443 \u043A\u0440\u0430\u044E, \u0438 \u043F\u043E\u043B\u043E\u0441\u0430 \u043E\u0431\u0440\u044B\u0432\u0430\u043B\u0430\u0441\u044C \u0431\u044B \u043D\u0430 \u0432\u0435\u0440\u0445\u043D\u0435\u043C\n        \u043E\u0442\u0441\u0442\u0443\u043F\u0435 \u043F\u043E\u0434\u0432\u0430\u043B\u0430 \u2014 \u043C\u0435\u0436\u0434\u0443 \u043D\u0435\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u0435\u043C, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u0435\u0440\u0432\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u043E\u0439\n        \u043F\u043E\u0434\u0432\u0430\u043B\u0430, \u043E\u0441\u0442\u0430\u0432\u0430\u043B\u0430\u0441\u044C \u0431\u044B \u043F\u043E\u043B\u043E\u0441\u0430 \u0447\u0438\u0441\u0442\u043E\u0433\u043E \u0444\u043E\u043D\u0430.\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", styles: ["@charset \"UTF-8\";@layer rt-kit.components{:where(.rt-scroll-area){background:var(--rt-scroll-area-bg)}.rt-scroll-area{--rt-scroll-area-hint-height: var(--rt-space-10);--rt-scroll-area-hint-color: var(--rt-color-bg-surface);--rt-scroll-area-hint-radius: var(--rt-radius-full);--rt-scroll-area-header-padding: var(--rt-space-2) var(--rt-space-4);--rt-scroll-area-body-padding: var(--rt-space-4);--rt-scroll-area-footer-padding: var(--rt-space-4);--rt-scroll-area-bg: transparent;--rt-scroll-area-header-bg: transparent;--rt-scroll-area-body-bg: transparent;--rt-scroll-area-footer-bg: transparent;position:relative;display:flex;flex-direction:column;block-size:100%;inline-size:100%;min-block-size:0}.rt-scroll-area__header{flex:0 0 auto;padding:var(--rt-scroll-area-header-padding);background:var(--rt-scroll-area-header-bg)}.rt-scroll-area__body{display:flex;overflow:auto;flex:1 1 auto;flex-direction:column;padding:var(--rt-scroll-area-body-padding);background:var(--rt-scroll-area-body-bg);min-block-size:0}.rt-scroll-area__footer{flex:0 0 auto;padding:var(--rt-scroll-area-footer-padding);background:var(--rt-scroll-area-footer-bg)}.rt-scroll-area__scroll-hint{position:absolute;z-index:1;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgb(from var(--rt-scroll-area-hint-color) r g b/0%),var(--rt-scroll-area-hint-color));block-size:var(--rt-scroll-area-hint-height);inset-inline:0;pointer-events:none}.rt-scroll-area__scroll-hint-icon{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-scroll-area-hint-radius);background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;pointer-events:auto}}\n"], dependencies: [{ kind: "directive", type: 
-                // Angular
-                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
-                // standalone components / directives
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "directive", type: BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtScrollAreaComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rt-scroll-area', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        // Angular
-                        NgTemplateOutlet,
-                        // standalone components / directives
-                        RtIconComponent,
-                        RtTooltipDirective,
-                        BlockDirective,
-                        ElemDirective,
-                    ], host: { class: BEM_BLOCK }, template: "<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        \u041F\u0440\u0438\u0437\u043D\u0430\u043A \u0442\u043E\u0433\u043E, \u0447\u0442\u043E \u0441\u043D\u0438\u0437\u0443 \u043E\u0441\u0442\u0430\u043B\u043E\u0441\u044C \u043D\u0435\u043F\u043E\u043A\u0430\u0437\u0430\u043D\u043D\u043E\u0435: \u043A\u0440\u0430\u0439 \u0441\u043F\u0438\u0441\u043A\u0430, \u0440\u043E\u0432\u043D\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u043D\u043D\u044B\u0439 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C,\n        \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044F \u043A\u0430\u043A \u043A\u043E\u043D\u0435\u0446 \u0441\u043F\u0438\u0441\u043A\u0430, \u0438 \u0447\u0435\u043B\u043E\u0432\u0435\u043A \u0441\u0447\u0438\u0442\u0430\u0435\u0442, \u0447\u0442\u043E \u043F\u0443\u043D\u043A\u0442 \u043F\u0440\u043E\u043F\u0430\u043B. \u041F\u043E\u043B\u043E\u0441\u0430 \u0436\u0438\u0432\u0451\u0442 \u043D\u0430 \u0445\u043E\u0441\u0442\u0435, \u0430\n        \u043D\u0435 \u0432\u043D\u0443\u0442\u0440\u0438 \u0442\u0435\u043B\u0430: \u0442\u0435\u043B\u043E \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442 \u0432\u0441\u0451 \u043F\u043E \u0441\u0432\u043E\u0435\u043C\u0443 \u043A\u0440\u0430\u044E, \u0438 \u043F\u043E\u043B\u043E\u0441\u0430 \u043E\u0431\u0440\u044B\u0432\u0430\u043B\u0430\u0441\u044C \u0431\u044B \u043D\u0430 \u0432\u0435\u0440\u0445\u043D\u0435\u043C\n        \u043E\u0442\u0441\u0442\u0443\u043F\u0435 \u043F\u043E\u0434\u0432\u0430\u043B\u0430 \u2014 \u043C\u0435\u0436\u0434\u0443 \u043D\u0435\u0439 \u0438 \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u0435\u043B\u0435\u043C, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043F\u043E\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043B\u044C \u0440\u0438\u0441\u0443\u0435\u0442 \u043F\u0435\u0440\u0432\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u043E\u0439\n        \u043F\u043E\u0434\u0432\u0430\u043B\u0430, \u043E\u0441\u0442\u0430\u0432\u0430\u043B\u0430\u0441\u044C \u0431\u044B \u043F\u043E\u043B\u043E\u0441\u0430 \u0447\u0438\u0441\u0442\u043E\u0433\u043E \u0444\u043E\u043D\u0430.\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", styles: ["@charset \"UTF-8\";@layer rt-kit.components{:where(.rt-scroll-area){background:var(--rt-scroll-area-bg)}.rt-scroll-area{--rt-scroll-area-hint-height: var(--rt-space-10);--rt-scroll-area-hint-color: var(--rt-color-bg-surface);--rt-scroll-area-hint-radius: var(--rt-radius-full);--rt-scroll-area-header-padding: var(--rt-space-2) var(--rt-space-4);--rt-scroll-area-body-padding: var(--rt-space-4);--rt-scroll-area-footer-padding: var(--rt-space-4);--rt-scroll-area-bg: transparent;--rt-scroll-area-header-bg: transparent;--rt-scroll-area-body-bg: transparent;--rt-scroll-area-footer-bg: transparent;position:relative;display:flex;flex-direction:column;block-size:100%;inline-size:100%;min-block-size:0}.rt-scroll-area__header{flex:0 0 auto;padding:var(--rt-scroll-area-header-padding);background:var(--rt-scroll-area-header-bg)}.rt-scroll-area__body{display:flex;overflow:auto;flex:1 1 auto;flex-direction:column;padding:var(--rt-scroll-area-body-padding);background:var(--rt-scroll-area-body-bg);min-block-size:0}.rt-scroll-area__footer{flex:0 0 auto;padding:var(--rt-scroll-area-footer-padding);background:var(--rt-scroll-area-footer-bg)}.rt-scroll-area__scroll-hint{position:absolute;z-index:1;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgb(from var(--rt-scroll-area-hint-color) r g b/0%),var(--rt-scroll-area-hint-color));block-size:var(--rt-scroll-area-hint-height);inset-inline:0;pointer-events:none}.rt-scroll-area__scroll-hint-icon{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-scroll-area-hint-radius);background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;pointer-events:auto}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], footerRef: [{ type: i0.ViewChild, args: ['foot', { isSignal: true }] }], headerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtScrollAreaHeaderDirective), { isSignal: true }] }], contentTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtScrollAreaContentDirective), { isSignal: true }] }], footerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtScrollAreaFooterDirective), { isSignal: true }] }], isScrollHintShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isScrollHintShown", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var RtScrollAreaComponent = class RtScrollAreaComponent {
+	#destroyRef;
+	#sizeWatch;
+	#contentWatch;
+	#watchedBody;
+	#watchedFooter;
+	#isWatching;
+	#onSettled;
+	constructor() {
+		this.t = inject(RT_KIT_LABELS);
+		this.bodyRef = viewChild("body", ...ngDevMode ? [{ debugName: "bodyRef" }] : /* istanbul ignore next */ []);
+		this.footerRef = viewChild("foot", ...ngDevMode ? [{ debugName: "footerRef" }] : /* istanbul ignore next */ []);
+		this.hasMoreBelow = signal(false, ...ngDevMode ? [{ debugName: "hasMoreBelow" }] : /* istanbul ignore next */ []);
+		this.hintBottom = signal(0, ...ngDevMode ? [{ debugName: "hintBottom" }] : /* istanbul ignore next */ []);
+		this.headerTpl = contentChild(RtScrollAreaHeaderDirective, ...ngDevMode ? [{ debugName: "headerTpl" }] : /* istanbul ignore next */ []);
+		this.contentTpl = contentChild(RtScrollAreaContentDirective, ...ngDevMode ? [{ debugName: "contentTpl" }] : /* istanbul ignore next */ []);
+		this.footerTpl = contentChild(RtScrollAreaFooterDirective, ...ngDevMode ? [{ debugName: "footerTpl" }] : /* istanbul ignore next */ []);
+		this.isScrollHintShown = input(false, {
+			...ngDevMode ? { debugName: "isScrollHintShown" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.#destroyRef = inject(DestroyRef);
+		this.#sizeWatch = null;
+		this.#contentWatch = null;
+		this.#watchedBody = null;
+		this.#watchedFooter = null;
+		this.#isWatching = false;
+		this.#onSettled = () => this.onBodyScroll();
+		afterRenderEffect(() => {
+			const body = this.bodyRef()?.nativeElement ?? null;
+			const footer = this.footerRef()?.nativeElement ?? null;
+			if (!this.isScrollHintShown()) {
+				this.#unwatch();
+				this.hasMoreBelow.set(false);
+				return;
+			}
+			this.onBodyScroll();
+			if (!this.#isWatching || body !== this.#watchedBody || footer !== this.#watchedFooter) this.#watch(body, footer);
+		});
+		this.#destroyRef.onDestroy(() => this.#unwatch());
+	}
+	onScrollHintClick(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		const body = this.bodyRef();
+		if (!body) return;
+		body.nativeElement.scrollTo({
+			top: body.nativeElement.scrollHeight,
+			behavior: "smooth"
+		});
+	}
+	onBodyScroll() {
+		if (!this.isScrollHintShown()) return;
+		this.#measureHintBottom();
+		const body = this.bodyRef();
+		if (!body) {
+			this.hasMoreBelow.set(false);
+			return;
+		}
+		const node = body.nativeElement;
+		this.hasMoreBelow.set(node.scrollHeight - node.scrollTop - node.clientHeight > BOTTOM_SLACK_PX);
+	}
+	#measureHintBottom() {
+		const footer = this.footerRef();
+		if (!footer) {
+			this.hintBottom.set(0);
+			return;
+		}
+		const node = footer.nativeElement;
+		const paddingTop = parseFloat(getComputedStyle(node).paddingTop) || 0;
+		this.hintBottom.set(Math.max(node.offsetHeight - paddingTop, 0));
+	}
+	#watch(body, footer) {
+		this.#unwatch();
+		this.#watchedBody = body;
+		this.#watchedFooter = footer;
+		this.#isWatching = true;
+		if (!body) return;
+		if (typeof ResizeObserver !== "undefined") {
+			this.#sizeWatch = new ResizeObserver(() => this.onBodyScroll());
+			this.#observeSizes();
+		}
+		if (typeof MutationObserver !== "undefined") {
+			this.#contentWatch = new MutationObserver(() => {
+				this.#observeSizes();
+				this.onBodyScroll();
+			});
+			this.#contentWatch.observe(body, {
+				childList: true,
+				subtree: true,
+				characterData: true
+			});
+		}
+		body.addEventListener("transitionend", this.#onSettled);
+		body.addEventListener("animationend", this.#onSettled);
+	}
+	#observeSizes() {
+		const watch = this.#sizeWatch;
+		const body = this.#watchedBody;
+		if (!watch || !body) return;
+		watch.disconnect();
+		watch.observe(body);
+		Array.from(body.children).forEach((child) => watch.observe(child));
+		if (this.#watchedFooter) watch.observe(this.#watchedFooter);
+	}
+	#unwatch() {
+		this.#watchedBody?.removeEventListener("transitionend", this.#onSettled);
+		this.#watchedBody?.removeEventListener("animationend", this.#onSettled);
+		this.#sizeWatch?.disconnect();
+		this.#sizeWatch = null;
+		this.#contentWatch?.disconnect();
+		this.#contentWatch = null;
+		this.#watchedBody = null;
+		this.#watchedFooter = null;
+		this.#isWatching = false;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtScrollAreaComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtScrollAreaComponent,
+			isStandalone: true,
+			selector: "rt-scroll-area",
+			inputs: { isScrollHintShown: {
+				classPropertyName: "isScrollHintShown",
+				publicName: "isScrollHintShown",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			} },
+			host: { classAttribute: "rt-scroll-area" },
+			queries: [
+				{
+					propertyName: "headerTpl",
+					first: true,
+					predicate: RtScrollAreaHeaderDirective,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "contentTpl",
+					first: true,
+					predicate: RtScrollAreaContentDirective,
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "footerTpl",
+					first: true,
+					predicate: RtScrollAreaFooterDirective,
+					descendants: true,
+					isSignal: true
+				}
+			],
+			viewQueries: [{
+				propertyName: "bodyRef",
+				first: true,
+				predicate: ["body"],
+				descendants: true,
+				isSignal: true
+			}, {
+				propertyName: "footerRef",
+				first: true,
+				predicate: ["foot"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: "<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",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{:where(.rt-scroll-area){background:var(--rt-scroll-area-bg)}.rt-scroll-area{--rt-scroll-area-hint-height: var(--rt-space-10);--rt-scroll-area-hint-color: var(--rt-color-bg-surface);--rt-scroll-area-hint-radius: var(--rt-radius-full);--rt-scroll-area-header-padding: var(--rt-space-2) var(--rt-space-4);--rt-scroll-area-body-padding: var(--rt-space-4);--rt-scroll-area-footer-padding: var(--rt-space-4);--rt-scroll-area-bg: transparent;--rt-scroll-area-header-bg: transparent;--rt-scroll-area-body-bg: transparent;--rt-scroll-area-footer-bg: transparent;position:relative;display:flex;flex-direction:column;block-size:100%;inline-size:100%;min-block-size:0}.rt-scroll-area__header{flex:0 0 auto;padding:var(--rt-scroll-area-header-padding);background:var(--rt-scroll-area-header-bg)}.rt-scroll-area__body{display:flex;overflow:auto;flex:1 1 auto;flex-direction:column;padding:var(--rt-scroll-area-body-padding);background:var(--rt-scroll-area-body-bg);min-block-size:0}.rt-scroll-area__footer{flex:0 0 auto;padding:var(--rt-scroll-area-footer-padding);background:var(--rt-scroll-area-footer-bg)}.rt-scroll-area__scroll-hint{position:absolute;z-index:1;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgb(from var(--rt-scroll-area-hint-color) r g b/0%),var(--rt-scroll-area-hint-color));block-size:var(--rt-scroll-area-hint-height);inset-inline:0;pointer-events:none}.rt-scroll-area__scroll-hint-icon{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-scroll-area-hint-radius);background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;pointer-events:auto}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "directive",
+					type: RtTooltipDirective,
+					selector: "[rtTooltip]",
+					inputs: [
+						"rtTooltip",
+						"rtTooltipPlacement",
+						"rtTooltipWhenTruncated",
+						"rtTooltipHideOnClick"
+					],
+					exportAs: ["rtTooltip"]
+				},
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtScrollAreaComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-scroll-area",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				NgTemplateOutlet,
+				RtIconComponent,
+				RtTooltipDirective,
+				BlockDirective,
+				ElemDirective
+			],
+			host: { class: BEM_BLOCK },
+			template: "<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",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{:where(.rt-scroll-area){background:var(--rt-scroll-area-bg)}.rt-scroll-area{--rt-scroll-area-hint-height: var(--rt-space-10);--rt-scroll-area-hint-color: var(--rt-color-bg-surface);--rt-scroll-area-hint-radius: var(--rt-radius-full);--rt-scroll-area-header-padding: var(--rt-space-2) var(--rt-space-4);--rt-scroll-area-body-padding: var(--rt-space-4);--rt-scroll-area-footer-padding: var(--rt-space-4);--rt-scroll-area-bg: transparent;--rt-scroll-area-header-bg: transparent;--rt-scroll-area-body-bg: transparent;--rt-scroll-area-footer-bg: transparent;position:relative;display:flex;flex-direction:column;block-size:100%;inline-size:100%;min-block-size:0}.rt-scroll-area__header{flex:0 0 auto;padding:var(--rt-scroll-area-header-padding);background:var(--rt-scroll-area-header-bg)}.rt-scroll-area__body{display:flex;overflow:auto;flex:1 1 auto;flex-direction:column;padding:var(--rt-scroll-area-body-padding);background:var(--rt-scroll-area-body-bg);min-block-size:0}.rt-scroll-area__footer{flex:0 0 auto;padding:var(--rt-scroll-area-footer-padding);background:var(--rt-scroll-area-footer-bg)}.rt-scroll-area__scroll-hint{position:absolute;z-index:1;display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(to bottom,rgb(from var(--rt-scroll-area-hint-color) r g b/0%),var(--rt-scroll-area-hint-color));block-size:var(--rt-scroll-area-hint-height);inset-inline:0;pointer-events:none}.rt-scroll-area__scroll-hint-icon{display:flex;align-items:center;justify-content:center;border-radius:var(--rt-scroll-area-hint-radius);background-color:var(--rt-color-bg-surface);color:var(--rt-color-text-muted);cursor:pointer;pointer-events:auto}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		bodyRef: [{
+			type: i0.ViewChild,
+			args: ["body", { isSignal: true }]
+		}],
+		footerRef: [{
+			type: i0.ViewChild,
+			args: ["foot", { isSignal: true }]
+		}],
+		headerTpl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtScrollAreaHeaderDirective), { isSignal: true }]
+		}],
+		contentTpl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtScrollAreaContentDirective), { isSignal: true }]
+		}],
+		footerTpl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => RtScrollAreaFooterDirective), { isSignal: true }]
+		}],
+		isScrollHintShown: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isScrollHintShown",
+				required: false
+			}]
+		}]
+	}
+});
 export { RtScrollAreaComponent, RtScrollAreaContentDirective, RtScrollAreaFooterDirective, RtScrollAreaHeaderDirective };
-//# sourceMappingURL=rt-tools-ui-kit-v2-scroll-area.mjs.map
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-scroll-area.mjs.map