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

package/fesm2022/rt-tools-ui-kit-v2-ripple.mjs

@@ -0,0 +1,118 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, DestroyRef, input, booleanAttribute, Directive } from '@angular/core';
+
+const BEM_BLOCK = 'rt-ripple';
+/** Сколько живёт один слой волны. Совпадает с длительностью в стилях блока. */
+const RIPPLE_LIFETIME_MS = 550;
+/**
+ * Волна нажатия. Ставится на элемент, который нажимают, и рисует расходящийся
+ * от точки касания круг.
+ *
+ * Волна живёт в своём обрезающем слое внутри элемента, а не прямо в нём:
+ * `overflow: hidden` на самой кнопке срезал бы всё, что торчит за её край, —
+ * у кнопки-значка так стоит метка, вынесенная на два пикселя наружу.
+ *
+ * @example
+ * ```html
+ * <button rtRipple>Сохранить</button>
+ * <button rtRipple [rippleDisabled]="loading()">Сохранить</button>
+ * ```
+ */
+class RtRippleDirective {
+    #el;
+    #renderer;
+    #destroyRef;
+    /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */
+    #live;
+    /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */
+    #area;
+    /** Гасит незакончившиеся волны: иначе таймер трогает снятый из дерева узел. */
+    constructor() {
+        this.#el = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.#destroyRef = inject(DestroyRef);
+        /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */
+        this.#live = new Set();
+        /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */
+        this.#area = null;
+        /**
+         * Отключает волну, не трогая остальное поведение элемента.
+         * Отключённая и загружающаяся кнопка волны не даёт.
+         */
+        this.rippleDisabled = input(false, { ...(ngDevMode ? { debugName: "rippleDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.#destroyRef.onDestroy(() => {
+            for (const timer of this.#live) {
+                clearTimeout(timer);
+            }
+            this.#live.clear();
+        });
+    }
+    /**
+     * Ставит один слой волны от точки нажатия и снимает его, когда тот отгорит.
+     *
+     * Радиус считается по дальнему углу элемента: волна из угла должна накрыть
+     * противоположный, иначе на широкой кнопке она обрывается на полпути.
+     */
+    launch(event) {
+        const host = this.#el.nativeElement;
+        if (this.rippleDisabled() || host.disabled) {
+            return;
+        }
+        const box = host.getBoundingClientRect();
+        const x = event.clientX - box.left;
+        const y = event.clientY - box.top;
+        const radius = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));
+        const area = this.#ensureArea(host);
+        const layer = this.#renderer.createElement('span');
+        this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);
+        this.#renderer.setStyle(layer, 'left', `${x - radius}px`);
+        this.#renderer.setStyle(layer, 'top', `${y - radius}px`);
+        this.#renderer.setStyle(layer, 'width', `${radius * 2}px`);
+        this.#renderer.setStyle(layer, 'height', `${radius * 2}px`);
+        this.#renderer.appendChild(area, layer);
+        const timer = setTimeout(() => {
+            this.#live.delete(timer);
+            if (layer.parentNode) {
+                this.#renderer.removeChild(area, layer);
+            }
+        }, RIPPLE_LIFETIME_MS);
+        this.#live.add(timer);
+    }
+    /** Обрезающий слой один на элемент: он повторяет его скругление и не ловит указатель. */
+    #ensureArea(host) {
+        if (this.#area?.parentNode) {
+            return this.#area;
+        }
+        /* Обрезающий слой стоит absolute, и ему нужен позиционированный предок. Позиция
+           ставится здесь, а не правилом блока: правило висело бы на каждой кнопке кита и
+           меняло растеризацию кадров витрины, ничего не двигая в раскладке. */
+        if (getComputedStyle(host).position === 'static') {
+            this.#renderer.setStyle(host, 'position', 'relative');
+        }
+        const area = this.#renderer.createElement('span');
+        this.#renderer.addClass(area, `${BEM_BLOCK}__area`);
+        this.#renderer.setAttribute(area, 'aria-hidden', 'true');
+        this.#renderer.appendChild(host, area);
+        this.#area = area;
+        return area;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtRippleDirective, isStandalone: true, selector: "[rtRipple]", inputs: { rippleDisabled: { classPropertyName: "rippleDisabled", publicName: "rippleDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "launch($event)" }, classAttribute: "rt-ripple" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtRippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtRipple]',
+                    host: {
+                        class: BEM_BLOCK,
+                        '(pointerdown)': 'launch($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { rippleDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "rippleDisabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtRippleDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-ripple.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-ripple.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/ripple/rt-ripple.directive.ts","../../../projects/ui-kit-v2/src/lib/components/ripple/rt-tools-ui-kit-v2-ripple.ts"],"sourcesContent":["import { BooleanInput } from '@angular/cdk/coercion';\nimport { booleanAttribute, DestroyRef, Directive, ElementRef, inject, input, InputSignalWithTransform, Renderer2 } from '@angular/core';\n\nconst BEM_BLOCK: string = 'rt-ripple';\n\n/** Сколько живёт один слой волны. Совпадает с длительностью в стилях блока. */\nconst RIPPLE_LIFETIME_MS: number = 550;\n\n/**\n * Волна нажатия. Ставится на элемент, который нажимают, и рисует расходящийся\n * от точки касания круг.\n *\n * Волна живёт в своём обрезающем слое внутри элемента, а не прямо в нём:\n * `overflow: hidden` на самой кнопке срезал бы всё, что торчит за её край, —\n * у кнопки-значка так стоит метка, вынесенная на два пикселя наружу.\n *\n * @example\n * ```html\n * <button rtRipple>Сохранить</button>\n * <button rtRipple [rippleDisabled]=\"loading()\">Сохранить</button>\n * ```\n */\n@Directive({\n    selector: '[rtRipple]',\n    host: {\n        class: BEM_BLOCK,\n        '(pointerdown)': 'launch($event)',\n    },\n})\nexport class RtRippleDirective {\n    readonly #el: ElementRef<HTMLElement> = inject<ElementRef<HTMLElement>>(ElementRef);\n    readonly #renderer: Renderer2 = inject(Renderer2);\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /** Слои, которые ещё гаснут: снимаются, если элемент умрёт раньше их. */\n    readonly #live: Set<ReturnType<typeof setTimeout>> = new Set<ReturnType<typeof setTimeout>>();\n\n    /** Обрезающий слой заводится при первом нажатии: у кнопки, которую не нажали, его нет. */\n    #area: HTMLElement | null = null;\n\n    /**\n     * Отключает волну, не трогая остальное поведение элемента.\n     * Отключённая и загружающаяся кнопка волны не даёт.\n     */\n    public readonly rippleDisabled: InputSignalWithTransform<boolean, BooleanInput> = input<boolean, BooleanInput>(false, {\n        transform: booleanAttribute,\n    });\n\n    /** Гасит незакончившиеся волны: иначе таймер трогает снятый из дерева узел. */\n    constructor() {\n        this.#destroyRef.onDestroy((): void => {\n            for (const timer of this.#live) {\n                clearTimeout(timer);\n            }\n            this.#live.clear();\n        });\n    }\n\n    /**\n     * Ставит один слой волны от точки нажатия и снимает его, когда тот отгорит.\n     *\n     * Радиус считается по дальнему углу элемента: волна из угла должна накрыть\n     * противоположный, иначе на широкой кнопке она обрывается на полпути.\n     */\n    public launch(event: PointerEvent): void {\n        const host: HTMLElement = this.#el.nativeElement;\n        if (this.rippleDisabled() || (host as HTMLButtonElement).disabled) {\n            return;\n        }\n\n        const box: DOMRect = host.getBoundingClientRect();\n        const x: number = event.clientX - box.left;\n        const y: number = event.clientY - box.top;\n        const radius: number = Math.hypot(Math.max(x, box.width - x), Math.max(y, box.height - y));\n\n        const area: HTMLElement = this.#ensureArea(host);\n        const layer: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(layer, `${BEM_BLOCK}__wave`);\n        this.#renderer.setStyle(layer, 'left', `${x - radius}px`);\n        this.#renderer.setStyle(layer, 'top', `${y - radius}px`);\n        this.#renderer.setStyle(layer, 'width', `${radius * 2}px`);\n        this.#renderer.setStyle(layer, 'height', `${radius * 2}px`);\n        this.#renderer.appendChild(area, layer);\n\n        const timer: ReturnType<typeof setTimeout> = setTimeout((): void => {\n            this.#live.delete(timer);\n            if (layer.parentNode) {\n                this.#renderer.removeChild(area, layer);\n            }\n        }, RIPPLE_LIFETIME_MS);\n        this.#live.add(timer);\n    }\n\n    /** Обрезающий слой один на элемент: он повторяет его скругление и не ловит указатель. */\n    #ensureArea(host: HTMLElement): HTMLElement {\n        if (this.#area?.parentNode) {\n            return this.#area;\n        }\n\n        /* Обрезающий слой стоит absolute, и ему нужен позиционированный предок. Позиция\n           ставится здесь, а не правилом блока: правило висело бы на каждой кнопке кита и\n           меняло растеризацию кадров витрины, ничего не двигая в раскладке. */\n        if (getComputedStyle(host).position === 'static') {\n            this.#renderer.setStyle(host, 'position', 'relative');\n        }\n\n        const area: HTMLElement = this.#renderer.createElement('span');\n        this.#renderer.addClass(area, `${BEM_BLOCK}__area`);\n        this.#renderer.setAttribute(area, 'aria-hidden', 'true');\n        this.#renderer.appendChild(host, area);\n        this.#area = area;\n\n        return area;\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,290 @@
+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';
+/**
+ * Целый пункт запаса при сравнении прокрутки с высотой.
+ *
+ * Дробная высота строки оставляет остаток, при котором прокрутка уже в самом низу, а разность
+ * всё ещё больше нуля: без запаса признак непоказанного висел бы навсегда.
+ */
+const BOTTOM_SLACK_PX = 1;
+/**
+ * Область прокрутки: шапка и подвал стоят, тело прокручивается.
+ *
+ * Части объявляет потребитель — по директиве на каждую. Необъявленная часть не рисуется вовсе:
+ * пустая шапка это полоса отступа над списком, а высоту она забирает у тела, ради которого
+ * область и открыли.
+ *
+ * Договорённость — `docs/specs/ui-kit-v2/scroll-area/`.
+ */
+class RtScrollAreaComponent {
+    #destroyRef;
+    /**
+     * Наблюдатель за размером тела, его содержимого и подвала. Событие прокрутки приходит только
+     * после движения руки, а список не влезает уже в первую минуту показа: без наблюдателя признак
+     * появлялся бы у того, кто и так догадался прокрутить, и молчал у того, кому он нужен.
+     */
+    #sizeWatch;
+    /**
+     * Наблюдатель за составом тела. Тело — окно постоянной высоты, и когда список дорастает под ним,
+     * размер тела не меняется: наблюдатель размера молчит. Пришедшие узлы ставятся под наблюдение
+     * размера здесь же — их высота меняется и после того, как они легли.
+     */
+    #contentWatch;
+    /** Узлы, за которыми наблюдают сейчас: пересозданное тело или подвал ставятся под наблюдение заново. */
+    #watchedBody;
+    #watchedFooter;
+    /** Наблюдение поставлено: тело и подвал могут быть и пустыми, флаг отличает «снято» от «нечего смотреть». */
+    #isWatching;
+    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;
+        // Наблюдатели живут, только пока признак включён: выключенный признак ничего не рисует, а
+        // наблюдатель состава с поддеревом заставлял бы браузер пересчитывать раскладку на каждую
+        // правку внутри тела у каждой области экрана. Включение ставит их, выключение снимает.
+        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 });
+        }
+    }
+    /**
+     * Размер наблюдается у тела, у каждого его прямого потомка и у подвала. Подвал — наравне с
+     * телом: от его высоты считается подъём полосы, и не наблюдавшаяся, она осталась бы стоять по
+     * прежней высоте подвала и наехала бы на его первую строку.
+     */
+    #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.#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", "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.
+ */
+
+export { RtScrollAreaComponent, RtScrollAreaContentDirective, RtScrollAreaFooterDirective, RtScrollAreaHeaderDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-scroll-area.mjs.map

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

@@ -0,0 +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    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     * телом: от его высоты считается подъём полосы, и не наблюдавшаяся, она осталась бы стоять по\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.#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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"}

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

@@ -0,0 +1,37 @@
+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", "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.
+ */
+
+export { RtSectionNavComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-section-nav.mjs.map

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

@@ -0,0 +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,0HAAE,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;;;;"}