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

package/fesm2022/rt-tools-ui-kit-v2-dot-field.mjs

@@ -0,0 +1,183 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, viewChild, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { WINDOW, BlockDirective, ElemDirective } from '@rt-tools/core';
+
+/** Сторона клетки сетки в пикселях. */
+const DOT_FIELD_CELL = 10;
+/** Сторона точки в центре клетки. */
+const DOT_FIELD_DOT = 3;
+/** Кадр рисуется раз в столько миллисекунд: ступенчатое движение — часть облика. */
+const DOT_FIELD_FRAME_MS = 90;
+/** На столько сдвигается время шума за кадр. */
+const DOT_FIELD_TIME_STEP = 0.035;
+const NOISE_SCALE = 0.075;
+const THRESHOLD = 0.64;
+const DITHER_SPREAD = 0.3;
+const BAYER_4X4 = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5].map((value) => value / 16);
+function hash(x, y) {
+    const value = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;
+    return value - Math.floor(value);
+}
+function fade(value) {
+    return value * value * (3 - 2 * value);
+}
+function lerp(from, to, amount) {
+    return from + (to - from) * amount;
+}
+function smoothstep(edge0, edge1, value) {
+    const amount = Math.min(1, Math.max(0, (value - edge0) / (edge1 - edge0)));
+    return amount * amount * (3 - 2 * amount);
+}
+/** Шум значений: гладкая случайная поверхность от 0 до 1. */
+function noise(x, y) {
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const fx = fade(x - x0);
+    const fy = fade(y - y0);
+    const top = lerp(hash(x0, y0), hash(x0 + 1, y0), fx);
+    const bottom = lerp(hash(x0, y0 + 1), hash(x0 + 1, y0 + 1), fx);
+    return lerp(top, bottom, fy);
+}
+/**
+ * Плотность поля в клетке: два слоя шума, сдвинутые временем, и поляна в центре, где точки редеют.
+ *
+ * @returns Число от 0 до 1.
+ */
+function dotDensity(column, row, columns, rows, time) {
+    const x = column * NOISE_SCALE;
+    const y = row * NOISE_SCALE;
+    const broad = noise(x + time * 0.6, y + time * 0.25);
+    const detail = noise(x * 2.3 - time * 0.4, y * 2.3 + time * 0.35);
+    const field = broad * 0.72 + detail * 0.28;
+    const dx = column / columns - 0.5;
+    const dy = row / rows - 0.5;
+    const clearing = smoothstep(0.12, 0.42, Math.sqrt(dx * dx + dy * dy));
+    return field * (0.6 + 0.4 * clearing);
+}
+/**
+ * Горит ли клетка: плотность сравнивается с порогом, который матрица Байера 4x4 сдвигает по
+ * клеткам. Так края облаков выходят рваными, а не гладкими.
+ */
+function isDotLit(density, column, row) {
+    const dither = BAYER_4X4[(row % 4) * 4 + (column % 4)];
+    return density > THRESHOLD + (dither - 0.5) * DITHER_SPREAD;
+}
+
+/**
+ * Рисует поле точек на canvas и ведёт его кадры. Окно приходит параметром: класс создаёт
+ * компонент, а у этого файла нет внедрения зависимостей.
+ */
+class RtDotFieldPainter {
+    #canvas;
+    #window;
+    #context;
+    #frameId = null;
+    #lastFrameAt = 0;
+    #time = 0;
+    #width = 0;
+    #height = 0;
+    constructor(canvas, windowRef) {
+        this.#canvas = canvas;
+        this.#window = windowRef;
+        this.#context = canvas.getContext('2d');
+    }
+    /** Без 2D-контекста ничего не рисуется; при просьбе о меньшем движении — один кадр. */
+    start() {
+        if (!this.#context) {
+            return;
+        }
+        if (this.#window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            this.#draw(this.#context);
+            return;
+        }
+        this.#frameId = this.#window.requestAnimationFrame((now) => this.#tick(now));
+    }
+    stop() {
+        if (this.#frameId === null) {
+            return;
+        }
+        this.#window.cancelAnimationFrame(this.#frameId);
+        this.#frameId = null;
+    }
+    #tick(now) {
+        if (this.#context && now - this.#lastFrameAt >= DOT_FIELD_FRAME_MS) {
+            this.#lastFrameAt = now;
+            this.#time += DOT_FIELD_TIME_STEP;
+            this.#draw(this.#context);
+        }
+        this.#frameId = this.#window.requestAnimationFrame((next) => this.#tick(next));
+    }
+    #draw(context) {
+        this.#resize(context);
+        context.clearRect(0, 0, this.#width, this.#height);
+        // Цвет — вычисленный `color` поля: тема меняет назначение, а canvas принимает только готовый цвет.
+        context.fillStyle = this.#window.getComputedStyle(this.#canvas).color;
+        const columns = Math.ceil(this.#width / DOT_FIELD_CELL);
+        const rows = Math.ceil(this.#height / DOT_FIELD_CELL);
+        const offset = (DOT_FIELD_CELL - DOT_FIELD_DOT) / 2;
+        for (let row = 0; row < rows; row++) {
+            for (let column = 0; column < columns; column++) {
+                if (isDotLit(dotDensity(column, row, columns, rows, this.#time), column, row)) {
+                    context.fillRect(column * DOT_FIELD_CELL + offset, row * DOT_FIELD_CELL + offset, DOT_FIELD_DOT, DOT_FIELD_DOT);
+                }
+            }
+        }
+    }
+    /** Холст следует размеру родителя и плотности точек экрана. */
+    #resize(context) {
+        const width = this.#canvas.clientWidth;
+        const height = this.#canvas.clientHeight;
+        if (width === this.#width && height === this.#height) {
+            return;
+        }
+        const ratio = this.#window.devicePixelRatio || 1;
+        this.#width = width;
+        this.#height = height;
+        this.#canvas.width = Math.round(width * ratio);
+        this.#canvas.height = Math.round(height * ratio);
+        context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    }
+}
+
+const BEM_BLOCK = 'rt-dot-field';
+/**
+ * Фон из квадратных точек, которые медленно плывут облаками. Заполняет позиционированного
+ * родителя и стоит под его содержимым; в центре точки редеют. Цвет — CSS-свойство `color` хоста.
+ */
+class RtDotFieldComponent {
+    #window;
+    #destroyRef;
+    constructor() {
+        this.#window = inject(WINDOW);
+        this.#destroyRef = inject(DestroyRef);
+        /** `viewChild` не принимает поле с решёткой. */
+        this.canvas = viewChild.required('canvas', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            const painter = new RtDotFieldPainter(this.canvas().nativeElement, this.#window);
+            painter.start();
+            this.#destroyRef.onDestroy(() => painter.stop());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDotFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: RtDotFieldComponent, isStandalone: true, selector: "rt-dot-field", host: { classAttribute: "rt-dot-field" }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-dot-field\">\n    <canvas #canvas rtElem=\"canvas\" aria-hidden=\"true\" qa-dataid=\"rt-dot-field-canvas\"></canvas>\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-dot-field{--rt-dot-field-color: var(--rt-color-action-primary);--rt-dot-field-opacity: .85;position:absolute;z-index:var(--rt-z-base);display:block;color:var(--rt-dot-field-color);inset:0;opacity:var(--rt-dot-field-opacity);pointer-events:none}.rt-dot-field__canvas{display:block;width:100%;height:100%}}\n"], dependencies: [{ kind: "directive", type: 
+                // standalone components / directives
+                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: RtDotFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-dot-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        BlockDirective,
+                        ElemDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ng-container rtBlock=\"rt-dot-field\">\n    <canvas #canvas rtElem=\"canvas\" aria-hidden=\"true\" qa-dataid=\"rt-dot-field-canvas\"></canvas>\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-dot-field{--rt-dot-field-color: var(--rt-color-action-primary);--rt-dot-field-opacity: .85;position:absolute;z-index:var(--rt-z-base);display:block;color:var(--rt-dot-field-color);inset:0;opacity:var(--rt-dot-field-opacity);pointer-events:none}.rt-dot-field__canvas{display:block;width:100%;height:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvas: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtDotFieldComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-dot-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-dot-field.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/dot-field/rt-dot-field.logic.ts","../../../projects/ui-kit-v2/src/lib/components/dot-field/rt-dot-field.painter.ts","../../../projects/ui-kit-v2/src/lib/components/dot-field/rt-dot-field.component.ts","../../../projects/ui-kit-v2/src/lib/components/dot-field/rt-dot-field.component.html","../../../projects/ui-kit-v2/src/lib/components/dot-field/rt-tools-ui-kit-v2-dot-field.ts"],"sourcesContent":["/** Сторона клетки сетки в пикселях. */\nexport const DOT_FIELD_CELL: number = 10;\n\n/** Сторона точки в центре клетки. */\nexport const DOT_FIELD_DOT: number = 3;\n\n/** Кадр рисуется раз в столько миллисекунд: ступенчатое движение — часть облика. */\nexport const DOT_FIELD_FRAME_MS: number = 90;\n\n/** На столько сдвигается время шума за кадр. */\nexport const DOT_FIELD_TIME_STEP: number = 0.035;\n\nconst NOISE_SCALE: number = 0.075;\nconst THRESHOLD: number = 0.64;\nconst DITHER_SPREAD: number = 0.3;\nconst BAYER_4X4: readonly number[] = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5].map((value: number): number => value / 16);\n\nfunction hash(x: number, y: number): number {\n    const value: number = Math.sin(x * 127.1 + y * 311.7) * 43758.5453;\n    return value - Math.floor(value);\n}\n\nfunction fade(value: number): number {\n    return value * value * (3 - 2 * value);\n}\n\nfunction lerp(from: number, to: number, amount: number): number {\n    return from + (to - from) * amount;\n}\n\nfunction smoothstep(edge0: number, edge1: number, value: number): number {\n    const amount: number = Math.min(1, Math.max(0, (value - edge0) / (edge1 - edge0)));\n    return amount * amount * (3 - 2 * amount);\n}\n\n/** Шум значений: гладкая случайная поверхность от 0 до 1. */\nfunction noise(x: number, y: number): number {\n    const x0: number = Math.floor(x);\n    const y0: number = Math.floor(y);\n    const fx: number = fade(x - x0);\n    const fy: number = fade(y - y0);\n\n    const top: number = lerp(hash(x0, y0), hash(x0 + 1, y0), fx);\n    const bottom: number = lerp(hash(x0, y0 + 1), hash(x0 + 1, y0 + 1), fx);\n\n    return lerp(top, bottom, fy);\n}\n\n/**\n * Плотность поля в клетке: два слоя шума, сдвинутые временем, и поляна в центре, где точки редеют.\n *\n * @returns Число от 0 до 1.\n */\nexport function dotDensity(column: number, row: number, columns: number, rows: number, time: number): number {\n    const x: number = column * NOISE_SCALE;\n    const y: number = row * NOISE_SCALE;\n\n    const broad: number = noise(x + time * 0.6, y + time * 0.25);\n    const detail: number = noise(x * 2.3 - time * 0.4, y * 2.3 + time * 0.35);\n    const field: number = broad * 0.72 + detail * 0.28;\n\n    const dx: number = column / columns - 0.5;\n    const dy: number = row / rows - 0.5;\n    const clearing: number = smoothstep(0.12, 0.42, Math.sqrt(dx * dx + dy * dy));\n\n    return field * (0.6 + 0.4 * clearing);\n}\n\n/**\n * Горит ли клетка: плотность сравнивается с порогом, который матрица Байера 4x4 сдвигает по\n * клеткам. Так края облаков выходят рваными, а не гладкими.\n */\nexport function isDotLit(density: number, column: number, row: number): boolean {\n    const dither: number = BAYER_4X4[(row % 4) * 4 + (column % 4)];\n\n    return density > THRESHOLD + (dither - 0.5) * DITHER_SPREAD;\n}\n","import { DOT_FIELD_CELL, DOT_FIELD_DOT, DOT_FIELD_FRAME_MS, DOT_FIELD_TIME_STEP, dotDensity, isDotLit } from './rt-dot-field.logic';\n\n/**\n * Рисует поле точек на canvas и ведёт его кадры. Окно приходит параметром: класс создаёт\n * компонент, а у этого файла нет внедрения зависимостей.\n */\nexport class RtDotFieldPainter {\n    readonly #canvas: HTMLCanvasElement;\n    readonly #window: Window;\n    readonly #context: CanvasRenderingContext2D | null;\n\n    #frameId: number | null = null;\n    #lastFrameAt: number = 0;\n    #time: number = 0;\n    #width: number = 0;\n    #height: number = 0;\n\n    constructor(canvas: HTMLCanvasElement, windowRef: Window) {\n        this.#canvas = canvas;\n        this.#window = windowRef;\n        this.#context = canvas.getContext('2d');\n    }\n\n    /** Без 2D-контекста ничего не рисуется; при просьбе о меньшем движении — один кадр. */\n    public start(): void {\n        if (!this.#context) {\n            return;\n        }\n\n        if (this.#window.matchMedia('(prefers-reduced-motion: reduce)').matches) {\n            this.#draw(this.#context);\n            return;\n        }\n\n        this.#frameId = this.#window.requestAnimationFrame((now: number): void => this.#tick(now));\n    }\n\n    public stop(): void {\n        if (this.#frameId === null) {\n            return;\n        }\n\n        this.#window.cancelAnimationFrame(this.#frameId);\n        this.#frameId = null;\n    }\n\n    #tick(now: number): void {\n        if (this.#context && now - this.#lastFrameAt >= DOT_FIELD_FRAME_MS) {\n            this.#lastFrameAt = now;\n            this.#time += DOT_FIELD_TIME_STEP;\n            this.#draw(this.#context);\n        }\n\n        this.#frameId = this.#window.requestAnimationFrame((next: number): void => this.#tick(next));\n    }\n\n    #draw(context: CanvasRenderingContext2D): void {\n        this.#resize(context);\n\n        context.clearRect(0, 0, this.#width, this.#height);\n        // Цвет — вычисленный `color` поля: тема меняет назначение, а canvas принимает только готовый цвет.\n        context.fillStyle = this.#window.getComputedStyle(this.#canvas).color;\n\n        const columns: number = Math.ceil(this.#width / DOT_FIELD_CELL);\n        const rows: number = Math.ceil(this.#height / DOT_FIELD_CELL);\n        const offset: number = (DOT_FIELD_CELL - DOT_FIELD_DOT) / 2;\n\n        for (let row: number = 0; row < rows; row++) {\n            for (let column: number = 0; column < columns; column++) {\n                if (isDotLit(dotDensity(column, row, columns, rows, this.#time), column, row)) {\n                    context.fillRect(column * DOT_FIELD_CELL + offset, row * DOT_FIELD_CELL + offset, DOT_FIELD_DOT, DOT_FIELD_DOT);\n                }\n            }\n        }\n    }\n\n    /** Холст следует размеру родителя и плотности точек экрана. */\n    #resize(context: CanvasRenderingContext2D): void {\n        const width: number = this.#canvas.clientWidth;\n        const height: number = this.#canvas.clientHeight;\n        if (width === this.#width && height === this.#height) {\n            return;\n        }\n\n        const ratio: number = this.#window.devicePixelRatio || 1;\n        this.#width = width;\n        this.#height = height;\n        this.#canvas.width = Math.round(width * ratio);\n        this.#canvas.height = Math.round(height * ratio);\n        context.setTransform(ratio, 0, 0, ratio, 0, 0);\n    }\n}\n","import {\n    afterNextRender,\n    inject,\n    viewChild,\n    ChangeDetectionStrategy,\n    Component,\n    DestroyRef,\n    ElementRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective, WINDOW } from '@rt-tools/core';\n\nimport { RtDotFieldPainter } from './rt-dot-field.painter';\n\nconst BEM_BLOCK: string = 'rt-dot-field';\n\n/**\n * Фон из квадратных точек, которые медленно плывут облаками. Заполняет позиционированного\n * родителя и стоит под его содержимым; в центре точки редеют. Цвет — CSS-свойство `color` хоста.\n */\n@Component({\n    selector: 'rt-dot-field',\n    templateUrl: './rt-dot-field.component.html',\n    styleUrl: './rt-dot-field.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtDotFieldComponent {\n    readonly #window: Window = inject(WINDOW);\n    readonly #destroyRef: DestroyRef = inject(DestroyRef);\n\n    /** `viewChild` не принимает поле с решёткой. */\n    protected readonly canvas: Signal<ElementRef<HTMLCanvasElement>> = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n    constructor() {\n        afterNextRender((): void => {\n            const painter: RtDotFieldPainter = new RtDotFieldPainter(this.canvas().nativeElement, this.#window);\n            painter.start();\n            this.#destroyRef.onDestroy((): void => painter.stop());\n        });\n    }\n}\n","<ng-container rtBlock=\"rt-dot-field\">\n    <canvas #canvas rtElem=\"canvas\" aria-hidden=\"true\" qa-dataid=\"rt-dot-field-canvas\"></canvas>\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-download-link.mjs

@@ -0,0 +1,44 @@
+import * as i0 from '@angular/core';
+import { computed, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { BlockDirective, ElemDirective } from '@rt-tools/core';
+import { rtKitLabel } from '@rt-tools/ui-kit-v2/core';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+
+const BEM_BLOCK = 'rt-download-link';
+class RtDownloadLinkComponent {
+    constructor() {
+        /**
+         * Подпись для скринридера: имя файла подставляется в неё, поэтому карты
+         * подписей ей мало — параметр приходит из входа.
+         */
+        this.downloadAriaLabel = rtKitLabel('uiDownloadFile', computed(() => ({ name: this.label() })));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.downloadClick = output();
+    }
+    onClick() {
+        this.downloadClick.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDownloadLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: RtDownloadLinkComponent, isStandalone: true, selector: "rt-download-link", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { downloadClick: "downloadClick" }, host: { classAttribute: "rt-download-link" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-download-link\">\n    <button rtElem=\"button\" qa-dataid=\"download-link-button\" type=\"button\" [attr.aria-label]=\"downloadAriaLabel()\" (click)=\"onClick()\">\n        <rt-icon rtElem=\"icon\" name=\"ico-download\" size=\"md\" />\n        <span rtElem=\"label\" qa-dataid=\"download-link-label\">{{ label() }}</span>\n    </button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-download-link{--rt-download-link-focus-radius: var(--rt-radius-sm);--rt-download-link-focus-shadow: var(--rt-shadow-focus-ring);display:inline-flex}.rt-download-link__button{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:var(--rt-color-text-link);cursor:pointer;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);gap:var(--rt-space-sm);line-height:var(--rt-leading-snug)}.rt-download-link__button:hover{text-decoration:underline}.rt-download-link__button:focus-visible{border-radius:var(--rt-download-link-focus-radius);box-shadow:var(--rt-download-link-focus-shadow);outline:none}.rt-download-link__icon{color:var(--rt-color-text-link)}}\n"], dependencies: [{ kind: "component", type: 
+                // standalone components / directives
+                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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDownloadLinkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-download-link', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // standalone components / directives
+                        RtIconComponent,
+                        BlockDirective,
+                        ElemDirective,
+                    ], host: {
+                        class: BEM_BLOCK,
+                    }, template: "<ng-container rtBlock=\"rt-download-link\">\n    <button rtElem=\"button\" qa-dataid=\"download-link-button\" type=\"button\" [attr.aria-label]=\"downloadAriaLabel()\" (click)=\"onClick()\">\n        <rt-icon rtElem=\"icon\" name=\"ico-download\" size=\"md\" />\n        <span rtElem=\"label\" qa-dataid=\"download-link-label\">{{ label() }}</span>\n    </button>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-download-link{--rt-download-link-focus-radius: var(--rt-radius-sm);--rt-download-link-focus-shadow: var(--rt-shadow-focus-ring);display:inline-flex}.rt-download-link__button{display:inline-flex;align-items:center;padding:0;border:0;background:transparent;color:var(--rt-color-text-link);cursor:pointer;font-family:var(--rt-font-family-sans);font-size:var(--rt-text-xs);font-weight:var(--rt-font-weight-medium);gap:var(--rt-space-sm);line-height:var(--rt-leading-snug)}.rt-download-link__button:hover{text-decoration:underline}.rt-download-link__button:focus-visible{border-radius:var(--rt-download-link-focus-radius);box-shadow:var(--rt-download-link-focus-shadow);outline:none}.rt-download-link__icon{color:var(--rt-color-text-link)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], downloadClick: [{ type: i0.Output, args: ["downloadClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtDownloadLinkComponent };
+//# sourceMappingURL=rt-tools-ui-kit-v2-download-link.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-download-link.mjs","sources":["../../../projects/ui-kit-v2/src/lib/components/download-link/rt-download-link.component.ts","../../../projects/ui-kit-v2/src/lib/components/download-link/rt-download-link.component.html","../../../projects/ui-kit-v2/src/lib/components/download-link/rt-tools-ui-kit-v2-download-link.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    input,\n    InputSignal,\n    output,\n    OutputEmitterRef,\n    Signal,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { TRtKitLabelParams, rtKitLabel } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\n\nconst BEM_BLOCK: string = 'rt-download-link';\n\n@Component({\n    selector: 'rt-download-link',\n    templateUrl: './rt-download-link.component.html',\n    styleUrl: './rt-download-link.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        RtIconComponent,\n        BlockDirective,\n        ElemDirective,\n    ],\n    host: {\n        class: BEM_BLOCK,\n    },\n})\nexport class RtDownloadLinkComponent {\n    /**\n     * Подпись для скринридера: имя файла подставляется в неё, поэтому карты\n     * подписей ей мало — параметр приходит из входа.\n     */\n    protected readonly downloadAriaLabel: Signal<string> = rtKitLabel(\n        'uiDownloadFile',\n        computed((): TRtKitLabelParams => ({ name: this.label() }))\n    );\n\n    public readonly label: InputSignal<string> = input.required<string>();\n\n    public readonly downloadClick: OutputEmitterRef<void> = output<void>();\n\n    protected onClick(): void {\n        this.downloadClick.emit();\n    }\n}\n","<ng-container rtBlock=\"rt-download-link\">\n    <button rtElem=\"button\" qa-dataid=\"download-link-button\" type=\"button\" [attr.aria-label]=\"downloadAriaLabel()\" (click)=\"onClick()\">\n        <rt-icon rtElem=\"icon\" name=\"ico-download\" size=\"md\" />\n        <span rtElem=\"label\" qa-dataid=\"download-link-label\">{{ label() }}</span>\n    </button>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAiBA,MAAM,SAAS,GAAW,kBAAkB;MAkB/B,uBAAuB,CAAA;AAhBpC,IAAA,WAAA,GAAA;AAiBI;;;AAGG;QACgB,IAAA,CAAA,iBAAiB,GAAmB,UAAU,CAC7D,gBAAgB,EAChB,QAAQ,CAAC,OAA0B,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAC9D;QAEe,IAAA,CAAA,KAAK,GAAwB,KAAK,CAAC,QAAQ;kFAAU;QAErD,IAAA,CAAA,aAAa,GAA2B,MAAM,EAAQ;AAKzE,IAAA;IAHa,OAAO,GAAA;AACb,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;IAC7B;8GAhBS,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,0SCnCpC,gYAMA,EAAA,MAAA,EAAA,CAAA,mxBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA;;gBDqBQ,eAAe,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,cAAc,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,aAAa,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAMR,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAhBnC,SAAS;+BACI,kBAAkB,EAAA,eAAA,EAGX,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;;wBAEL,eAAe;wBACf,cAAc;wBACd,aAAa;qBAChB,EAAA,IAAA,EACK;AACF,wBAAA,KAAK,EAAE,SAAS;AACnB,qBAAA,EAAA,QAAA,EAAA,gYAAA,EAAA,MAAA,EAAA,CAAA,mxBAAA,CAAA,EAAA;;;AEjCL;;AAEG;;;;"}

package/fesm2022/rt-tools-ui-kit-v2-dynamic-list.mjs

@@ -0,0 +1,260 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, DestroyRef, contentChild, computed, input, booleanAttribute, numberAttribute, output, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { map, filter } from 'rxjs';
+import { BlockDirective, ElemDirective } from '@rt-tools/core';
+import { RT_KIT_LABELS, rtKitLabel, searchDebounce } from '@rt-tools/ui-kit-v2/core';
+import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
+import { RtCheckboxComponent } from '@rt-tools/ui-kit-v2/checkbox';
+import { RtEmptyStateComponent } from '@rt-tools/ui-kit-v2/empty-state';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtInputComponent } from '@rt-tools/ui-kit-v2/input';
+import { RtPaginationComponent } from '@rt-tools/ui-kit-v2/pagination';
+import { RtSpinnerComponent } from '@rt-tools/ui-kit-v2/spinner';
+
+/**
+ * Маркеры частей панели инструментов — своим файлом, как у соседних семей.
+ *
+ * В имени класса стоит слово «Toolbar», хотя в разметке его нет: имя `RtDynamicListSelectorsDirective`
+ * в дереве уже занято первым китом, и там оно означает другое — проводку состояния списка, а не
+ * маркер стороны полосы. Два одинаковых имени в двух китах проверка дерева не пропускает.
+ *
+ * Каждый маркер держит свой шаблон и о списке не знает ничего: список читает маркеры среди своего
+ * содержимого и берёт у них шаблон. Часть, которую потребитель не объявил, для списка просто
+ * отсутствует.
+ */
+/**
+ * Левая сторона панели: то, чем человек отбирает записи.
+ *
+ * @example
+ * ```html
+ * <rt-dynamic-list>
+ *     <ng-container *rtDynamicListSelectors>
+ *         <rt-select [options]="stages()" />
+ *     </ng-container>
+ * </rt-dynamic-list>
+ * ```
+ */
+class RtDynamicListToolbarSelectorsDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicListToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDynamicListToolbarSelectorsDirective, isStandalone: true, selector: "[rtDynamicListSelectors]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicListToolbarSelectorsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDynamicListSelectors]',
+                }]
+        }] });
+/** Правая сторона панели: действия над разделом. Поле поиска стоит после них и остаётся за семьёй. */
+class RtDynamicListToolbarActionsDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicListToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDynamicListToolbarActionsDirective, isStandalone: true, selector: "[rtDynamicListActions]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicListToolbarActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDynamicListActions]',
+                }]
+        }] });
+
+const BEM_BLOCK = 'rt-dynamic-list';
+/**
+ * Размеры страницы, которые предлагает полоса страниц. Семья передаёт их полосе сама: по наименьшему
+ * из них она решает, рисовать ли полосу, и то же решение принимает полоса у себя.
+ */
+const PER_PAGE_OPTIONS = [20, 50, 100];
+/**
+ * Список записей со своей панелью инструментов.
+ *
+ * Полосу панели семья раскладывает сама, а не зовёт `rt-toolbar`: у того стороны объявлены
+ * нешринкующимися, и на хозяине уже́ содержимого полоса раздаётся шире него и уезжает за край.
+ * Семья кладёт в полосу готовые части кита — поле, кнопки, флажок, — а строит её сама.
+ *
+ * Семья ничего не рисует сама: поиск — поле кита, действия — его кнопки со значком, пустое место —
+ * его пустое состояние, страницы — его нумерация. Сами записи проецируются: таблица между панелью
+ * и страницами — потребителя, с его колонками, ячейками и действиями строки.
+ *
+ * Договорённость — `docs/specs/ui-kit-v2/dynamic-list/`.
+ */
+class RtDynamicListComponent {
+    #destroyRef;
+    /**
+     * Последнее, что знают и потребитель, и поле: отправленное потребителю или поставленное им самим.
+     * Одно и то же дважды не спрашивается, а поставленное потребителем не возвращается ему эхом.
+     */
+    #lastSearch;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        /**
+         * Последнее, что знают и потребитель, и поле: отправленное потребителю или поставленное им самим.
+         * Одно и то же дважды не спрашивается, а поставленное потребителем не возвращается ему эхом.
+         */
+        this.#lastSearch = '';
+        this.t = inject(RT_KIT_LABELS);
+        this.searchControl = new FormControl('', { nonNullable: true });
+        this.perPageOptions = PER_PAGE_OPTIONS;
+        this.selectorsTpl = contentChild(RtDynamicListToolbarSelectorsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectorsTpl" }] : /* istanbul ignore next */ []));
+        this.actionsTpl = contentChild(RtDynamicListToolbarActionsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsTpl" }] : /* istanbul ignore next */ []));
+        /** «Выбрано: N» — подпись с подстановкой, потому её берут не из карты, а вызовом. */
+        this.selectedLabel = rtKitLabel('uiSelectedCount', computed(() => ({ count: this.selectedCount() })));
+        /** Отчего пусто. Отбор стоит — значит, записи убрал он, и человеку показывают дорогу назад. */
+        this.emptyReason = computed(() => this.filtered() ? 'filter' : 'section', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyReason" }] : /* istanbul ignore next */ []));
+        /** Значок пустого места: под отбором — лупа, у пустого раздела — лоток. */
+        this.emptyIcon = computed(() => this.emptyReason() === 'filter' ? 'search' : 'inbox', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyIcon" }] : /* istanbul ignore next */ []));
+        /** Подпись пустого места. Своя подпись потребителя сильнее обеих подписей кита. */
+        this.emptyTitleText = computed(() => {
+            if (this.emptyTitle()) {
+                return this.emptyTitle();
+            }
+            return this.emptyReason() === 'filter' ? this.t().uiNothingFound : this.t().uiNoRows;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyTitleText" }] : /* istanbul ignore next */ []));
+        /**
+         * Полоса страниц рисуется, пока записей больше наименьшего размера страницы — то же правило, что у
+         * самой полосы. Число страниц при нынешнем размере тут не решает: выбравший крупный размер, при
+         * котором всё легло на одну страницу, иначе терял вместе с полосой и дорогу к размеру поменьше.
+         */
+        this.isPaginationShown = computed(() => {
+            const page = this.pageModel();
+            if (!page || this.empty()) {
+                return false;
+            }
+            return page.totalCount > Math.min(...PER_PAGE_OPTIONS);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPaginationShown" }] : /* istanbul ignore next */ []));
+        /**
+         * Есть ли в панели хоть что-нибудь. Полоса без единой части — это отступ над записями, и
+         * место она забирает у них.
+         */
+        this.isToolbarShown = computed(() => [
+            this.showSearch(),
+            this.showRefresh(),
+            this.showClearFilters(),
+            this.showColumnSettings(),
+            this.selectable(),
+            !!this.selectorsTpl(),
+            !!this.actionsTpl(),
+        ].some((part) => part), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isToolbarShown" }] : /* istanbul ignore next */ []));
+        /** Записи проецируются, и о числе страниц семья узнаёт только из модели страницы. */
+        this.pageModel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
+        /** Первая загрузка: вместо всего содержимого стоит вертушка. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Подгрузка поверх нарисованного: записи остаются на месте, вертушка стоит над ними. */
+        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Записей нет вовсе. От пустого ответа под отбором отличается входом `filtered`. */
+        this.empty = input(false, { ...(ngDevMode ? { debugName: "empty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Отбор стоит. Вместе с `empty` даёт вторую причину пустоты — ту, у которой есть дорога назад. */
+        this.filtered = input(false, { ...(ngDevMode ? { debugName: "filtered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Кнопка сброса отбора: показана у раздела с отбором, выключена, пока сбрасывать нечего. */
+        this.showClearFilters = input(false, { ...(ngDevMode ? { debugName: "showClearFilters" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showRefresh = input(false, { ...(ngDevMode ? { debugName: "showRefresh" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showColumnSettings = input(false, { ...(ngDevMode ? { debugName: "showColumnSettings" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.showSearch = input(true, { ...(ngDevMode ? { debugName: "showSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Выбор записей: флажок «выбрать все» и счётчик выбранного на левой стороне панели. */
+        this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.allSelected = input(false, { ...(ngDevMode ? { debugName: "allSelected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.someSelected = input(false, { ...(ngDevMode ? { debugName: "someSelected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.selectAllDisabled = input(false, { ...(ngDevMode ? { debugName: "selectAllDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.selectedCount = input(0, { ...(ngDevMode ? { debugName: "selectedCount" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.emptyTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
+        this.emptyDescription = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
+        /** Поиск потребителя: поле следует за ним при каждой смене и потребителю его не возвращает. */
+        this.searchTerm = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        this.searchChange = output();
+        this.refreshed = output();
+        this.filtersCleared = output();
+        this.columnSettingsOpened = output();
+        this.pageChange = output();
+        this.perPageChange = output();
+        this.allSelectedChange = output();
+        // Поиск потребителя ставится в поле, только когда он отличается от последнего, что список
+        // отправил или поставил сам. Эхо отправленного — даже запоздалое, когда человек уже дописал
+        // дальше, — поле не трогает: иначе оно стирало бы набранное и сбивало каретку.
+        effect(() => {
+            const term = this.searchTerm() ?? '';
+            untracked(() => {
+                if (term.trim() === this.#lastSearch) {
+                    return;
+                }
+                this.#lastSearch = term.trim();
+                this.searchControl.setValue(term, { emitEvent: false });
+            });
+        });
+    }
+    ngOnInit() {
+        // Дебаунс непустого ввода; очистка крестиком применяется сразу — так же, как в списке
+        // переписок: оператор один на кит, и два разных ожидания разошлись бы молча.
+        this.searchControl.valueChanges
+            .pipe(map((value) => value.trim()), searchDebounce(), 
+        // Набранное, которое потребитель или сброс отбора успели заменить, уже не в поле.
+        filter((value) => value === this.searchControl.value.trim()), filter((value) => value !== this.#lastSearch), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((value) => {
+            this.#lastSearch = value;
+            this.searchChange.emit(value);
+        });
+    }
+    onSelectAll(checked) {
+        this.allSelectedChange.emit(checked);
+    }
+    /**
+     * Сброс отбора снимает и поиск: пустой ответ под поиском — тоже ответ под отбором, и дорога назад
+     * без очистки поля вела бы к тому же пустому ответу. Поле очищается молча: `filtersCleared`
+     * уже значит «и поиск снят», и отдельный пустой `searchChange` заставил бы потребителя
+     * запрашивать список дважды.
+     */
+    onClearFilters() {
+        this.#lastSearch = '';
+        this.searchControl.setValue('', { emitEvent: false });
+        this.filtersCleared.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDynamicListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDynamicListComponent, isStandalone: true, selector: "rt-dynamic-list", inputs: { pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, filtered: { classPropertyName: "filtered", publicName: "filtered", isSignal: true, isRequired: false, transformFunction: null }, showClearFilters: { classPropertyName: "showClearFilters", publicName: "showClearFilters", isSignal: true, isRequired: false, transformFunction: null }, showRefresh: { classPropertyName: "showRefresh", publicName: "showRefresh", isSignal: true, isRequired: false, transformFunction: null }, showColumnSettings: { classPropertyName: "showColumnSettings", publicName: "showColumnSettings", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null }, someSelected: { classPropertyName: "someSelected", publicName: "someSelected", isSignal: true, isRequired: false, transformFunction: null }, selectAllDisabled: { classPropertyName: "selectAllDisabled", publicName: "selectAllDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectedCount: { classPropertyName: "selectedCount", publicName: "selectedCount", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", refreshed: "refreshed", filtersCleared: "filtersCleared", columnSettingsOpened: "columnSettingsOpened", pageChange: "pageChange", perPageChange: "perPageChange", allSelectedChange: "allSelectedChange" }, host: { classAttribute: "rt-dynamic-list" }, queries: [{ propertyName: "selectorsTpl", first: true, predicate: RtDynamicListToolbarSelectorsDirective, descendants: true, isSignal: true }, { propertyName: "actionsTpl", first: true, predicate: RtDynamicListToolbarActionsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-dynamic-list\">\n    @if (loading()) {\n        <div rtElem=\"loader\" qa-dataid=\"dynamic-list-loader\">\n            <rt-spinner />\n        </div>\n    } @else {\n        @if (fetching()) {\n            <div rtElem=\"veil\" qa-dataid=\"dynamic-list-veil\">\n                <rt-spinner />\n            </div>\n        }\n\n        @if (isToolbarShown()) {\n            <div rtElem=\"toolbar\" qa-dataid=\"dynamic-list-toolbar\">\n                @if (selectable() || selectorsTpl()) {\n                    <div rtElem=\"selectors\" qa-dataid=\"dynamic-list-selectors\">\n                        @if (selectable()) {\n                            <rt-checkbox\n                                qa-dataid=\"dynamic-list-select-all\"\n                                [ariaLabel]=\"t().uiSelectAll\"\n                                [ngModel]=\"allSelected()\"\n                                [indeterminate]=\"!allSelected() && someSelected()\"\n                                [disabled]=\"selectAllDisabled()\"\n                                (ngModelChange)=\"onSelectAll($event)\" />\n\n                            @if (selectedCount()) {\n                                <span rtElem=\"counter\" qa-dataid=\"dynamic-list-selected-count\">\n                                    {{ selectedLabel() }}\n                                </span>\n                            }\n                        }\n\n                        @if (selectorsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" />\n                        }\n                    </div>\n                }\n\n                <div rtElem=\"right\" qa-dataid=\"dynamic-list-right\">\n                    <div rtElem=\"actions\">\n                        @if (actionsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" />\n                        }\n\n                        @if (showClearFilters()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-list-clear-filters\"\n                                icon=\"filter-slash\"\n                                size=\"sm\"\n                                [ariaLabel]=\"t().uiClearFilters\"\n                                [tooltip]=\"t().uiClearFilters\"\n                                [disabled]=\"!filtered()\"\n                                (clicked)=\"onClearFilters()\" />\n                        }\n\n                        @if (showRefresh()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-list-refresh\"\n                                icon=\"refresh\"\n                                size=\"sm\"\n                                [ariaLabel]=\"t().uiRefresh\"\n                                [tooltip]=\"t().uiRefresh\"\n                                (clicked)=\"refreshed.emit()\" />\n                        }\n\n                        @if (showColumnSettings()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-list-column-settings\"\n                                icon=\"sliders-v\"\n                                size=\"sm\"\n                                [ariaLabel]=\"t().uiColumnSettings\"\n                                [tooltip]=\"t().uiColumnSettings\"\n                                (clicked)=\"columnSettingsOpened.emit()\" />\n                        }\n                    </div>\n\n                    @if (showSearch()) {\n                        <div rtElem=\"search\">\n                            <rt-input\n                                qa-dataid=\"dynamic-list-search\"\n                                iconLeft=\"search\"\n                                [placeholder]=\"t().uiSearch\"\n                                [formControl]=\"searchControl\" />\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (empty()) {\n            <rt-empty-state\n                rtElem=\"empty\"\n                qa-dataid=\"dynamic-list-empty\"\n                [icon]=\"emptyIcon()\"\n                [title]=\"emptyTitleText()\"\n                [description]=\"emptyDescription()\">\n                @if (emptyReason() === 'filter') {\n                    <button\n                        rtButton\n                        qa-dataid=\"dynamic-list-empty-clear\"\n                        type=\"button\"\n                        icon=\"filter-slash\"\n                        appearance=\"outlined\"\n                        size=\"sm\"\n                        [label]=\"t().uiClearFilters\"\n                        [attr.aria-label]=\"t().uiClearFilters\"\n                        (click)=\"onClearFilters()\"></button>\n                }\n            </rt-empty-state>\n        } @else {\n            <div rtElem=\"content\" qa-dataid=\"dynamic-list-content\">\n                <ng-content />\n            </div>\n\n            @if (isPaginationShown()) {\n                <rt-pagination\n                    rtElem=\"pagination\"\n                    qa-dataid=\"dynamic-list-pagination\"\n                    [pageModel]=\"pageModel()!\"\n                    [perPageOptions]=\"perPageOptions\"\n                    [loading]=\"fetching()\"\n                    (pageChange)=\"pageChange.emit($event)\"\n                    (perPageChange)=\"perPageChange.emit($event)\" />\n            }\n        }\n    }\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-dynamic-list{--rt-dynamic-list-gap: var(--rt-space-4);--rt-dynamic-list-search-width: var(--rt-size-64);--rt-dynamic-list-veil-bg: var(--rt-color-bg-surface);position:relative;display:flex;flex-direction:column;block-size:100%;gap:var(--rt-dynamic-list-gap);inline-size:100%;min-block-size:0}.rt-dynamic-list__loader{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--rt-space-8)}.rt-dynamic-list__veil{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--rt-dynamic-list-veil-bg) 60%,transparent);inset:0}.rt-dynamic-list__toolbar{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2);min-inline-size:0}.rt-dynamic-list__selectors{display:flex;flex:0 1 auto;align-items:center;gap:var(--rt-space-2);min-inline-size:0}.rt-dynamic-list__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-dynamic-list__right{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--rt-space-2);min-inline-size:0}.rt-dynamic-list__actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-1)}.rt-dynamic-list__search{flex:1 1 auto;max-inline-size:var(--rt-dynamic-list-search-width);min-inline-size:0}.rt-dynamic-list__content{display:flex;overflow:auto;flex:1 1 auto;flex-direction:column;isolation:isolate;min-block-size:0}.rt-dynamic-list__empty{flex:1 1 auto}.rt-dynamic-list__pagination{flex:0 0 auto}@media(width<=1080px){.rt-dynamic-list__right{flex-wrap:wrap}.rt-dynamic-list__search{max-inline-size:none}}}\n"], dependencies: [{ kind: "directive", type: 
+                // Angular
+                NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: 
+                // standalone components / directives
+                RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }, { kind: "component", type: RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtPaginationComponent, selector: "rt-pagination", inputs: ["pageModel", "perPageOptions", "prevIcon", "nextIcon", "numbering", "loading"], outputs: ["pageChange", "perPageChange"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }, { 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: RtDynamicListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-dynamic-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // Angular
+                        NgTemplateOutlet,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        // standalone components / directives
+                        RtButtonDirective,
+                        RtCheckboxComponent,
+                        RtEmptyStateComponent,
+                        RtIconButtonComponent,
+                        RtInputComponent,
+                        RtPaginationComponent,
+                        RtSpinnerComponent,
+                        BlockDirective,
+                        ElemDirective,
+                    ], host: { class: BEM_BLOCK }, template: "<ng-container rtBlock=\"rt-dynamic-list\">\n    @if (loading()) {\n        <div rtElem=\"loader\" qa-dataid=\"dynamic-list-loader\">\n            <rt-spinner />\n        </div>\n    } @else {\n        @if (fetching()) {\n            <div rtElem=\"veil\" qa-dataid=\"dynamic-list-veil\">\n                <rt-spinner />\n            </div>\n        }\n\n        @if (isToolbarShown()) {\n            <div rtElem=\"toolbar\" qa-dataid=\"dynamic-list-toolbar\">\n                @if (selectable() || selectorsTpl()) {\n                    <div rtElem=\"selectors\" qa-dataid=\"dynamic-list-selectors\">\n                        @if (selectable()) {\n                            <rt-checkbox\n                                qa-dataid=\"dynamic-list-select-all\"\n                                [ariaLabel]=\"t().uiSelectAll\"\n                                [ngModel]=\"allSelected()\"\n                                [indeterminate]=\"!allSelected() && someSelected()\"\n                                [disabled]=\"selectAllDisabled()\"\n                                (ngModelChange)=\"onSelectAll($event)\" />\n\n                            @if (selectedCount()) {\n                                <span rtElem=\"counter\" qa-dataid=\"dynamic-list-selected-count\">\n                                    {{ selectedLabel() }}\n                                </span>\n                            }\n                        }\n\n                        @if (selectorsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" />\n                        }\n                    </div>\n                }\n\n                <div rtElem=\"right\" qa-dataid=\"dynamic-list-right\">\n                    <div rtElem=\"actions\">\n                        @if (actionsTpl(); as tpl) {\n                            <ng-container [ngTemplateOutlet]=\"tpl.templateRef\" />\n                        }\n\n                        @if (showClearFilters()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-list-clear-filters\"\n                                icon=\"filter-slash\"\n                                size=\"sm\"\n                                [ariaLabel]=\"t().uiClearFilters\"\n                                [tooltip]=\"t().uiClearFilters\"\n                                [disabled]=\"!filtered()\"\n                                (clicked)=\"onClearFilters()\" />\n                        }\n\n                        @if (showRefresh()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-list-refresh\"\n                                icon=\"refresh\"\n                                size=\"sm\"\n                                [ariaLabel]=\"t().uiRefresh\"\n                                [tooltip]=\"t().uiRefresh\"\n                                (clicked)=\"refreshed.emit()\" />\n                        }\n\n                        @if (showColumnSettings()) {\n                            <rt-icon-button\n                                qa-dataid=\"dynamic-list-column-settings\"\n                                icon=\"sliders-v\"\n                                size=\"sm\"\n                                [ariaLabel]=\"t().uiColumnSettings\"\n                                [tooltip]=\"t().uiColumnSettings\"\n                                (clicked)=\"columnSettingsOpened.emit()\" />\n                        }\n                    </div>\n\n                    @if (showSearch()) {\n                        <div rtElem=\"search\">\n                            <rt-input\n                                qa-dataid=\"dynamic-list-search\"\n                                iconLeft=\"search\"\n                                [placeholder]=\"t().uiSearch\"\n                                [formControl]=\"searchControl\" />\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n\n        @if (empty()) {\n            <rt-empty-state\n                rtElem=\"empty\"\n                qa-dataid=\"dynamic-list-empty\"\n                [icon]=\"emptyIcon()\"\n                [title]=\"emptyTitleText()\"\n                [description]=\"emptyDescription()\">\n                @if (emptyReason() === 'filter') {\n                    <button\n                        rtButton\n                        qa-dataid=\"dynamic-list-empty-clear\"\n                        type=\"button\"\n                        icon=\"filter-slash\"\n                        appearance=\"outlined\"\n                        size=\"sm\"\n                        [label]=\"t().uiClearFilters\"\n                        [attr.aria-label]=\"t().uiClearFilters\"\n                        (click)=\"onClearFilters()\"></button>\n                }\n            </rt-empty-state>\n        } @else {\n            <div rtElem=\"content\" qa-dataid=\"dynamic-list-content\">\n                <ng-content />\n            </div>\n\n            @if (isPaginationShown()) {\n                <rt-pagination\n                    rtElem=\"pagination\"\n                    qa-dataid=\"dynamic-list-pagination\"\n                    [pageModel]=\"pageModel()!\"\n                    [perPageOptions]=\"perPageOptions\"\n                    [loading]=\"fetching()\"\n                    (pageChange)=\"pageChange.emit($event)\"\n                    (perPageChange)=\"perPageChange.emit($event)\" />\n            }\n        }\n    }\n</ng-container>\n", styles: ["@layer rt-kit.components{.rt-dynamic-list{--rt-dynamic-list-gap: var(--rt-space-4);--rt-dynamic-list-search-width: var(--rt-size-64);--rt-dynamic-list-veil-bg: var(--rt-color-bg-surface);position:relative;display:flex;flex-direction:column;block-size:100%;gap:var(--rt-dynamic-list-gap);inline-size:100%;min-block-size:0}.rt-dynamic-list__loader{display:flex;flex:1 1 auto;align-items:center;justify-content:center;padding:var(--rt-space-8)}.rt-dynamic-list__veil{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--rt-dynamic-list-veil-bg) 60%,transparent);inset:0}.rt-dynamic-list__toolbar{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;gap:var(--rt-space-2);min-inline-size:0}.rt-dynamic-list__selectors{display:flex;flex:0 1 auto;align-items:center;gap:var(--rt-space-2);min-inline-size:0}.rt-dynamic-list__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-dynamic-list__right{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--rt-space-2);min-inline-size:0}.rt-dynamic-list__actions{display:flex;flex:0 0 auto;align-items:center;gap:var(--rt-space-1)}.rt-dynamic-list__search{flex:1 1 auto;max-inline-size:var(--rt-dynamic-list-search-width);min-inline-size:0}.rt-dynamic-list__content{display:flex;overflow:auto;flex:1 1 auto;flex-direction:column;isolation:isolate;min-block-size:0}.rt-dynamic-list__empty{flex:1 1 auto}.rt-dynamic-list__pagination{flex:0 0 auto}@media(width<=1080px){.rt-dynamic-list__right{flex-wrap:wrap}.rt-dynamic-list__search{max-inline-size:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicListToolbarSelectorsDirective), { isSignal: true }] }], actionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDynamicListToolbarActionsDirective), { isSignal: true }] }], pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], filtered: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtered", required: false }] }], showClearFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearFilters", required: false }] }], showRefresh: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefresh", required: false }] }], showColumnSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnSettings", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }], someSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "someSelected", required: false }] }], selectAllDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllDisabled", required: false }] }], selectedCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedCount", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refreshed: [{ type: i0.Output, args: ["refreshed"] }], filtersCleared: [{ type: i0.Output, args: ["filtersCleared"] }], columnSettingsOpened: [{ type: i0.Output, args: ["columnSettingsOpened"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], perPageChange: [{ type: i0.Output, args: ["perPageChange"] }], allSelectedChange: [{ type: i0.Output, args: ["allSelectedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RtDynamicListComponent, RtDynamicListToolbarActionsDirective, RtDynamicListToolbarSelectorsDirective };
+//# sourceMappingURL=rt-tools-ui-kit-v2-dynamic-list.mjs.map