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

package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs

@@ -0,0 +1,1217 @@
+import { isString, isNumber, areArraysEqual, isEmpty, EListSortOrder, EFilterOperatorType, FILTER_OPERATORS, transformArrayInput } from '@rt-tools/utils';
+import { iconMaterialMap, RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, Injectable, TemplateRef, Directive, InjectionToken, ElementRef, input, booleanAttribute, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, output, linkedSignal, viewChild, contentChild, forwardRef, Injector, effect, untracked } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Subject } from 'rxjs';
+import { switchMap, take, takeUntil, map, concatMap, filter } from 'rxjs/operators';
+import { IDBStorageService, PlatformService, BlockDirective, ElemDirective, ModDirective, EmptyToDashPipe, ConcatClassesPipe } from '@rt-tools/core';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { NgTemplateOutlet, TitleCasePipe } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+import { BreakpointsService, rtKitLabel, RT_KIT_TRANSLATOR, ERtDataTableFilterType, rtKitDefault, ERtDataTableColumnType, RT_DATA_TABLE_PRESET_FROM_HOST, RT_PRESET_MATERIAL_CLASS } from '@rt-tools/ui-kit-v2/core';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtTooltipDirective } from '@rt-tools/ui-kit-v2/tooltip';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { RtDatePickerComponent } from '@rt-tools/ui-kit-v2/date-picker';
+import { RtInputNumberComponent } from '@rt-tools/ui-kit-v2/input-number';
+import { RtInputComponent } from '@rt-tools/ui-kit-v2/input';
+import { RtMenuComponent, RtMenuItemComponent } from '@rt-tools/ui-kit-v2/menu';
+import { RtSelectComponent } from '@rt-tools/ui-kit-v2/select';
+import { RtCheckboxComponent } from '@rt-tools/ui-kit-v2/checkbox';
+import { RtRadioButtonComponent } from '@rt-tools/ui-kit-v2/radio-button';
+
+/** Значение ячейки: как его отдала запись или как его переделала колонка. */
+function dataTableCellValue(row, column) {
+    const transform = column.transform;
+    const raw = row[column.propName];
+    return transform ? transform(raw) : raw;
+}
+/** Текст значения для подсказки и буфера — так же, как первый кит: строка, число, иначе JSON. */
+function dataTableCellText(value) {
+    if (isString(value)) {
+        return value;
+    }
+    if (isNumber(value)) {
+        return value.toString();
+    }
+    return JSON.stringify(value);
+}
+/**
+ * Сторона кнопки копирования: заданная колонкой, иначе противоположная выравниванию значения —
+ * справа выровненное значение копируется кнопкой слева.
+ */
+function dataTableCopyButtonSide(column) {
+    return column.copyBtnAlign ?? (column.align === 'right' ? 'left' : 'right');
+}
+/**
+ * Значок набора кита для имени первого кита, либо `null`, если пары нет.
+ *
+ * Идёт через перечень соответствий кита, а не своим списком: второй список разошёлся бы с
+ * перечнем молча, и одно имя рисовалось бы в двух местах двумя рисунками.
+ */
+function dataTableIconName(glyph) {
+    return iconMaterialMap.find((entry) => entry.from === glyph)?.to ?? null;
+}
+
+/**
+ * Порядок имён колонок для сверки двух наборов.
+ *
+ * Какой именно порядок, значения не имеет: оба набора выстраиваются одним и тем же и сравниваются
+ * на равенство. Важно лишь, чтобы порядок был один и не зависел от вида значения, — умолчание
+ * `sort()` приводит элементы к строке по-своему и на числовых ключах даёт лексикографический.
+ */
+function comparePropNames(a, b) {
+    return String(a).localeCompare(String(b));
+}
+/**
+ * Настройки таблицы в хранилище браузера: порядок и видимость столбцов, полосы прокрутки.
+ *
+ * Перенесено из первого кита как есть: ключ — тот, что дало приложение, форма записи — та же.
+ * Поэтому настройки, сохранённые таблицей первого кита, читаются здесь без переделки.
+ */
+class RtDataTableConfigService {
+    #destroyRef;
+    #iDBStorageService;
+    /** Просьбы прочитать сохранённую настройку. */
+    #readSource;
+    /** Настройку поменяли здесь: чтение, начатое раньше, отвечать уже не должно. */
+    #updatedSource;
+    /** Просьбы записать и снять настройку — один источник на оба действия. */
+    #writeSource;
+    #tableConfig;
+    /**
+     * Потоки чтения и записи объявлены один раз, а методы только толкают в них просьбы.
+     *
+     * Чтение — `switchMap`: отвечает последний вызов, потому что настройка, прочитанная под
+     * прежний состав столбцов, к нынешнему уже не относится. Чтение, ещё не вернувшееся к
+     * `updateConfig`, гасится им: иначе прочитанное позже затёрло бы то, что поменяли после.
+     * Запись и снятие — один поток и `concatMap`: разведённые по двум, они теряют порядок между
+     * собой, и снятие, обогнавшее запись, оставляет в хранилище снятое.
+     */
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#iDBStorageService = inject(IDBStorageService);
+        /** Просьбы прочитать сохранённую настройку. */
+        this.#readSource = new Subject();
+        /** Настройку поменяли здесь: чтение, начатое раньше, отвечать уже не должно. */
+        this.#updatedSource = new Subject();
+        /** Просьбы записать и снять настройку — один источник на оба действия. */
+        this.#writeSource = new Subject();
+        this.#tableConfig = signal({
+            isVerticalScrollbarShown: false,
+            isHorizontalScrollbarShown: false,
+            columns: [],
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#tableConfig" }] : /* istanbul ignore next */ []));
+        this.tableConfig = this.#tableConfig.asReadonly();
+        this.#readSource
+            .pipe(switchMap((read) => this.#iDBStorageService.get(read.storageKey).pipe(take(1), takeUntil(this.#updatedSource), map((savedConfig) => this.#configOf(read.config, savedConfig)))), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((config) => {
+            this.#tableConfig.set(config);
+        });
+        this.#writeSource
+            .pipe(concatMap((write) => this.#writeOf(write).pipe(take(1))), takeUntilDestroyed(this.#destroyRef))
+            .subscribe();
+    }
+    initConfig(storageKey, config) {
+        this.#readSource.next({ storageKey, config });
+    }
+    updateConfig(storageKey, config) {
+        this.#updatedSource.next();
+        this.#writeSource.next({ kind: 'set', storageKey, config });
+        this.#tableConfig.set(config);
+    }
+    deleteConfig(storageKey) {
+        this.#writeSource.next({ kind: 'remove', storageKey });
+    }
+    /** Обращение к хранилищу под просьбу записи или снятия. */
+    #writeOf(write) {
+        if (write.kind === 'remove') {
+            return this.#iDBStorageService.remove(write.storageKey);
+        }
+        const storedColumns = write.config.columns.map((el) => ({
+            displayName: el.header.label ?? el.propName.toString(),
+            propName: el.propName,
+            width: el?.width ?? 'auto',
+            orderIndex: el?.orderIndex ?? 0,
+            hidden: !!el?.hidden,
+            fixed: !!el?.fixed,
+        }));
+        return this.#iDBStorageService.set(write.storageKey, { ...write.config, columns: storedColumns });
+    }
+    /**
+     * Настройка, которую показывает таблица: сохранённая, если она сходится с нынешним составом
+     * столбцов, иначе — собранная из самого состава.
+     */
+    #configOf(config, savedConfig) {
+        if (!savedConfig?.columns || !this.#isSavedConfigConsistent(config, savedConfig.columns)) {
+            return {
+                isVerticalScrollbarShown: false,
+                isHorizontalScrollbarShown: true,
+                columns: config.map((el, index) => ({
+                    ...el,
+                    orderIndex: index,
+                    displayName: el?.header?.label?.length ? el.header.label : el.propName.toString(),
+                })),
+            };
+        }
+        const updatedColumns = savedConfig.columns.map((el) => {
+            const declared = config.find((item) => el.propName === item.propName);
+            return {
+                // Сверка составов выше гарантирует, что столбец с этим именем объявлен.
+                ...declared,
+                displayName: declared?.header?.label?.length ? declared.header.label : el?.propName?.toString(),
+                propName: el.propName,
+                width: el?.width ?? 'auto',
+                orderIndex: el?.orderIndex ?? 0,
+                hidden: !!el?.hidden,
+                fixed: !!el?.fixed,
+            };
+        });
+        return {
+            isVerticalScrollbarShown: !!savedConfig?.isVerticalScrollbarShown,
+            isHorizontalScrollbarShown: !!savedConfig?.isHorizontalScrollbarShown,
+            columns: updatedColumns,
+        };
+    }
+    #isSavedConfigConsistent(declared, saved) {
+        return (!!declared?.length &&
+            !!saved?.length &&
+            declared.length === saved.length &&
+            areArraysEqual(declared.map((el) => el.propName).toSorted(comparePropNames), saved.map((el) => el.propName).toSorted(comparePropNames)));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableConfigService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableConfigService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Шаблон значка, который приложение отдаёт таблице.
+ *
+ * Когда он дан, значки шапки и ячеек, названные в описании колонок, рисует он, а перечень
+ * соответствий кита не спрашивается. Это выход для имени, которому в наборе кита нет пары.
+ *
+ * ```html
+ * <rt-data-table ...>
+ *     <ng-template rtDataTableIcon let-name let-row="row">
+ *         <rt-icon [name]="iconOf(name)" />
+ *     </ng-template>
+ * </rt-data-table>
+ * ```
+ */
+class RtDataTableIconDirective {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_directive, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- второй довод стража контекста шаблона стоит только в типе-предикате; убрать его нечем, подпись задаёт каркас
+    context) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataTableIconDirective, isStandalone: true, selector: "ng-template[rtDataTableIcon]", exportAs: ["rtDataTableIcon"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rtDataTableIcon]',
+                    exportAs: 'rtDataTableIcon',
+                }]
+        }] });
+
+/** Атрибут части строки, нажатие на которую до строки не доходит. */
+const RT_DATA_TABLE_STOP_ROW_CLICK_ATTRIBUTE = 'rt-data-table-stop-row-click';
+const RT_DATA_TABLE_ROW_HOST = new InjectionToken('RtDataTableRowHost');
+/** Попало ли нажатие в часть строки, помеченную как не доходящую до строки. */
+function isInsideStopNode(event) {
+    return event.target instanceof Element && !!event.target.closest(`[${RT_DATA_TABLE_STOP_ROW_CLICK_ATTRIBUTE}]`);
+}
+/**
+ * Помечает часть строки, нажатие на которую до строки не доходит, — картинку, кнопку приложения,
+ * блок текста в своей ячейке.
+ */
+class RtDataTableStopRowClickDirective {
+    #platformService = inject(PlatformService);
+    #elementRef = inject((ElementRef));
+    ngOnInit() {
+        if (this.#platformService.isPlatformBrowser) {
+            this.#elementRef.nativeElement.setAttribute(RT_DATA_TABLE_STOP_ROW_CLICK_ATTRIBUTE, '');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableStopRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataTableStopRowClickDirective, isStandalone: true, selector: "[rtDataTableStopRowClick]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableStopRowClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataTableStopRowClick]',
+                }]
+        }] });
+/**
+ * Нажатие и двойное нажатие строки — как в первом ките.
+ *
+ * О нажатии строка сообщает, когда кнопка опускается, а не когда отпускается, и любой кнопкой:
+ * так было в первом ките, и так переносится. Двойное нажатие поэтому приходит после двух нажатий
+ * строки.
+ */
+class RtDataTableRowClickDirective {
+    constructor() {
+        this.#host = inject(RT_DATA_TABLE_ROW_HOST);
+        /** Запись строки. */
+        this.entity = input.required({ ...(ngDevMode ? { debugName: "entity" } : /* istanbul ignore next */ {}), alias: 'rtDataTableRowClick' });
+        /** Строка сообщает о нажатиях. */
+        this.isTableRowClickable = input(true, { ...(ngDevMode ? { debugName: "isTableRowClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    }
+    #host;
+    onMouseDown(event) {
+        if (!this.isTableRowClickable() || isInsideStopNode(event)) {
+            event.stopPropagation();
+            return;
+        }
+        this.#host.onRowClick(this.entity(), event);
+    }
+    onDoubleClick(event) {
+        if (!this.isTableRowClickable() || isInsideStopNode(event)) {
+            event.stopPropagation();
+            return;
+        }
+        this.#host.onRowDoubleClick(this.entity());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableRowClickDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtDataTableRowClickDirective, isStandalone: true, selector: "[rtDataTableRowClick]", inputs: { entity: { classPropertyName: "entity", publicName: "rtDataTableRowClick", isSignal: true, isRequired: true, transformFunction: null }, isTableRowClickable: { classPropertyName: "isTableRowClickable", publicName: "isTableRowClickable", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mousedown": "onMouseDown($event)", "dblclick": "onDoubleClick($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableRowClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataTableRowClick]',
+                    host: {
+                        '(mousedown)': 'onMouseDown($event)',
+                        '(dblclick)': 'onDoubleClick($event)',
+                    },
+                }]
+        }], propDecorators: { entity: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtDataTableRowClick", required: true }] }], isTableRowClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableRowClickable", required: false }] }] } });
+
+const BEM_BLOCK$3 = 'rt-data-table-cell';
+/** Сколько держать «скопировано» перед возвратом кнопки — как в первом ките. */
+const COPIED_DELAY_MS = 2000;
+/**
+ * Готовая ячейка `rt-data-table` — ячейка первого кита без Material.
+ *
+ * Значение рисуется как пришло или как его переделала колонка; пустое — прочерком. Длинное
+ * обрезается в строку, и подсказка со значением целиком бывает только у обрезанного. Значок —
+ * набором кита по имени первого кита либо шаблоном значка приложения. Кнопка копирования
+ * проявляется при наведении и стоит на стороне, противоположной выравниванию значения.
+ */
+class RtDataTableCellComponent {
+    #breakpoints;
+    #clipboard;
+    #sanitizer;
+    #host;
+    #copiedTimer;
+    #copyLabel;
+    #copiedLabel;
+    constructor() {
+        this.#breakpoints = inject(BreakpointsService);
+        this.#clipboard = inject(Clipboard);
+        this.#sanitizer = inject(DomSanitizer);
+        this.#host = inject(ElementRef);
+        this.#copiedTimer = null;
+        this.#copyLabel = rtKitLabel('dataTableCopy');
+        this.#copiedLabel = rtKitLabel('dataTableCopied');
+        /** Экран узкий: подсказки гаснут. Что кнопка копирования там видна всегда, решают стили. */
+        this.narrow = this.#breakpoints.narrow;
+        this.value = computed(() => dataTableCellValue(this.row(), this.column()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Копировать нечего: значение пусто. Считается той же утилитой, что рисует прочерк вместо
+         * значения, — второй ответ на этот вопрос разошёлся бы с прочерком молча.
+         */
+        this.empty = computed(() => isEmpty(this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+        this.copyable = computed(() => this.column().copyable && !this.empty(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copyable" }] : /* istanbul ignore next */ []));
+        /**
+         * Значок колонки. Его видимость, цвет и подсказку ячейка не читает — как первый кит: поля
+         * приняты ради переезда без правок и ничего не меняют.
+         */
+        this.icon = computed(() => this.column().icon ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Значок набора кита для имени первого кита; без пары — ничего. */
+        this.kitIcon = computed(() => {
+            const icon = this.icon();
+            return icon ? dataTableIconName(icon.glyph) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kitIcon" }] : /* istanbul ignore next */ []));
+        /**
+         * Имя без пары в перечне соответствий: его ячейка рисует глифом шрифта Material Symbols, как
+         * первый кит рисовал любой глиф. Шрифт кит не везёт — глиф виден там, где шрифт подключило
+         * приложение, а без шрифта на месте значка стоит его имя.
+         */
+        this.glyph = computed(() => {
+            const icon = this.icon();
+            return icon && !this.kitIcon() ? icon.glyph : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+        /** Залитый глиф — как залитый значок набора: контурным его делает `outlined` колонки. */
+        this.glyphMods = computed(() => ({ filled: this.icon()?.outlined !== true }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyphMods" }] : /* istanbul ignore next */ []));
+        this.iconContext = computed(() => {
+            const icon = this.icon();
+            return icon ? { $implicit: icon.glyph, column: this.column(), row: this.row() } : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContext" }] : /* istanbul ignore next */ []));
+        /**
+         * Стиль значка, посчитанный колонкой по значению строки, — строкой, как в первом ките.
+         * Это одна из странностей первого кита, перенесённых как есть: такую строку не перекрашивает
+         * ни набор, ни тёмная тема.
+         */
+        this.iconStyle = computed(() => {
+            const transform = this.column().iconTransform;
+            // eslint-disable-next-line sonarjs/no-angular-bypass-sanitization -- строка стиля собрана описанием колонок приложения, а не значением, введённым человеком
+            return transform ? this.#sanitizer.bypassSecurityTrustStyle(transform(this.row()[this.column().propName])) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconStyle" }] : /* istanbul ignore next */ []));
+        this.hovered = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+        this.copied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+        /** Подсказка: заданная колонкой, иначе значение целиком — и только у обрезанного. */
+        this.hint = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        this.copyLabel = computed(() => (this.copied() ? this.#copiedLabel() : this.#copyLabel()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []));
+        this.copyIcon = computed(() => (this.copied() ? 'check' : 'copy'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copyIcon" }] : /* istanbul ignore next */ []));
+        this.titleMods = computed(() => ({ align: this.column().align }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleMods" }] : /* istanbul ignore next */ []));
+        this.copyMods = computed(() => ({
+            position: dataTableCopyButtonSide(this.column()),
+            complete: this.copied(),
+            visible: this.hovered(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "copyMods" }] : /* istanbul ignore next */ []));
+        this.row = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+        this.column = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        /** Шаблон значка приложения; когда он дан, перечень кита не спрашивается. */
+        this.iconTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+        inject(DestroyRef).onDestroy(() => this.#clearTimer());
+    }
+    /**
+     * Наведение: проявить кнопку копирования и замерить обрезку.
+     *
+     * Ширина известна только отрисованному узлу, а меняется она и от переезда столбца, и от
+     * ширины окна: посчитанная один раз, она соврала бы при первом же изменении.
+     */
+    onMouseEnter() {
+        this.hovered.set(true);
+        const text = this.#host.nativeElement.querySelector(`.${BEM_BLOCK$3}__text`);
+        const cut = text !== null && text.scrollWidth > text.clientWidth;
+        this.hint.set(!this.narrow() && cut ? (this.column().tooltip ?? dataTableCellText(this.value())) : '');
+    }
+    onCopy() {
+        this.#clipboard.copy(dataTableCellText(this.value()));
+        this.copied.set(true);
+        this.#clearTimer();
+        this.#copiedTimer = setTimeout(() => this.copied.set(false), COPIED_DELAY_MS);
+    }
+    #clearTimer() {
+        if (this.#copiedTimer !== null) {
+            clearTimeout(this.#copiedTimer);
+            this.#copiedTimer = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableCellComponent, isStandalone: true, selector: "rt-data-table-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "hovered.set(false)" }, properties: { "style.width": "column().width", "style.min-width": "column().minWidth" }, classAttribute: "rt-data-table-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" [style]=\"iconStyle()\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-cell-glyph\" [rtMod]=\"glyphMods()\" [style]=\"iconStyle()\">\n                {{ name }}\n            </span>\n        }\n    </ng-template>\n\n    @if (icon()?.placement === 'left') {\n        <span rtElem=\"prefix\" qa-dataid=\"data-table-cell-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"titleMods()\">\n        <div rtElem=\"text\" qa-dataid=\"data-table-cell-text\" [rtTooltip]=\"hint()\">{{ value() | emptyToDash }}</div>\n    </div>\n\n    @if (icon()?.placement === 'right') {\n        <span rtElem=\"suffix\" qa-dataid=\"data-table-cell-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    @if (copyable()) {\n        <rt-icon-button\n            rtElem=\"copy-button\"\n            rtDataTableStopRowClick\n            qa-dataid=\"data-table-cell-copy\"\n            size=\"sm\"\n            [rtMod]=\"copyMods()\"\n            [icon]=\"copyIcon()\"\n            [ariaLabel]=\"copyLabel()\"\n            [tooltip]=\"narrow() ? '' : copyLabel()\"\n            (clicked)=\"onCopy()\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-cell{--rt-data-table-cell-transition-duration: var(--rt-duration-fast);--rt-data-table-cell-glyph-size: var(--rt-size-6);position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-data-table-cell-glyph-size);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-data-table-cell-glyph-size);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-cell__prefix,.rt-data-table-cell__suffix{display:inline-flex;min-width:fit-content;flex:0 0 auto}.rt-data-table-cell__title{display:table;width:100%;table-layout:fixed}.rt-data-table-cell__title--align--left{text-align:left}.rt-data-table-cell__title--align--center{text-align:center}.rt-data-table-cell__title--align--right{text-align:right}.rt-data-table-cell__text{overflow:hidden;width:100%;padding:var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-cell__copy-button{position:absolute;transition:visibility var(--rt-data-table-cell-transition-duration) linear;visibility:hidden}@media(hover:none){.rt-data-table-cell__copy-button{visibility:visible}}.rt-data-table-cell__copy-button{--rt-icon-button-color: var(--rt-list-copy-button-color)}.rt-data-table-cell__copy-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-copy-button-size);--rt-icon-button-radius: var(--rt-list-copy-button-radius);--rt-icon-button-color-hover: var(--rt-color-text-primary);--rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);background-color:var(--rt-list-copy-button-bg)}.rt-data-table-cell__copy-button--position--left{left:var(--rt-space-xs)}.rt-data-table-cell__copy-button--position--right{right:var(--rt-space-xs)}.rt-data-table-cell__copy-button--complete{cursor:not-allowed}.rt-data-table-cell__copy-button--visible{visibility:visible}}\n"], dependencies: [{ kind: "component", type: 
+                // components
+                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: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: 
+                // directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RtDataTableStopRowClickDirective, selector: "[rtDataTableStopRowClick]" }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: 
+                // pipes
+                EmptyToDashPipe, name: "emptyToDash" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-data-table-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // components
+                        RtIconButtonComponent,
+                        RtIconComponent,
+                        // directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        NgTemplateOutlet,
+                        RtDataTableStopRowClickDirective,
+                        RtTooltipDirective,
+                        // pipes
+                        EmptyToDashPipe,
+                    ], host: {
+                        class: BEM_BLOCK$3,
+                        '[style.width]': 'column().width',
+                        '[style.min-width]': 'column().minWidth',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'hovered.set(false)',
+                    }, template: "<ng-container rtBlock=\"rt-data-table-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" [style]=\"iconStyle()\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-cell-glyph\" [rtMod]=\"glyphMods()\" [style]=\"iconStyle()\">\n                {{ name }}\n            </span>\n        }\n    </ng-template>\n\n    @if (icon()?.placement === 'left') {\n        <span rtElem=\"prefix\" qa-dataid=\"data-table-cell-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"titleMods()\">\n        <div rtElem=\"text\" qa-dataid=\"data-table-cell-text\" [rtTooltip]=\"hint()\">{{ value() | emptyToDash }}</div>\n    </div>\n\n    @if (icon()?.placement === 'right') {\n        <span rtElem=\"suffix\" qa-dataid=\"data-table-cell-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    @if (copyable()) {\n        <rt-icon-button\n            rtElem=\"copy-button\"\n            rtDataTableStopRowClick\n            qa-dataid=\"data-table-cell-copy\"\n            size=\"sm\"\n            [rtMod]=\"copyMods()\"\n            [icon]=\"copyIcon()\"\n            [ariaLabel]=\"copyLabel()\"\n            [tooltip]=\"narrow() ? '' : copyLabel()\"\n            (clicked)=\"onCopy()\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-cell{--rt-data-table-cell-transition-duration: var(--rt-duration-fast);--rt-data-table-cell-glyph-size: var(--rt-size-6);position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-data-table-cell-glyph-size);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-data-table-cell-glyph-size);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-cell__prefix,.rt-data-table-cell__suffix{display:inline-flex;min-width:fit-content;flex:0 0 auto}.rt-data-table-cell__title{display:table;width:100%;table-layout:fixed}.rt-data-table-cell__title--align--left{text-align:left}.rt-data-table-cell__title--align--center{text-align:center}.rt-data-table-cell__title--align--right{text-align:right}.rt-data-table-cell__text{overflow:hidden;width:100%;padding:var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-cell__copy-button{position:absolute;transition:visibility var(--rt-data-table-cell-transition-duration) linear;visibility:hidden}@media(hover:none){.rt-data-table-cell__copy-button{visibility:visible}}.rt-data-table-cell__copy-button{--rt-icon-button-color: var(--rt-list-copy-button-color)}.rt-data-table-cell__copy-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-copy-button-size);--rt-icon-button-radius: var(--rt-list-copy-button-radius);--rt-icon-button-color-hover: var(--rt-color-text-primary);--rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);background-color:var(--rt-list-copy-button-bg)}.rt-data-table-cell__copy-button--position--left{left:var(--rt-space-xs)}.rt-data-table-cell__copy-button--position--right{right:var(--rt-space-xs)}.rt-data-table-cell__copy-button--complete{cursor:not-allowed}.rt-data-table-cell__copy-button--visible{visibility:visible}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }] } });
+
+/**
+ * Какой порядок просит нажатие на шапку — как в первом ките: по возрастанию, а после возрастания
+ * по убыванию. Снятия порядка нет: после убывания снова возрастание.
+ */
+function dataTableNextSortOrder(current) {
+    return current?.sortDirection?.toLowerCase() === EListSortOrder.ASC ? EListSortOrder.DESC : EListSortOrder.ASC;
+}
+/** Порядок таблицы сейчас стоит по этой колонке. */
+function dataTableSortActive(sort, current) {
+    return !!current?.propertyName && !!sort?.propertyName && current.propertyName === sort.propertyName;
+}
+/**
+ * `aria-sort` сортируемой колонки: порядок по ней, если он стоит по ней, иначе `none`. Колонке
+ * без сортировки атрибут не положен вовсе — `null` снимает его.
+ */
+function dataTableAriaSort(sort, current) {
+    if (!sort?.propertyName) {
+        return null;
+    }
+    if (!dataTableSortActive(sort, current)) {
+        return 'none';
+    }
+    const direction = current?.sortDirection?.toLowerCase();
+    if (direction === EListSortOrder.ASC) {
+        return 'ascending';
+    }
+    return direction === EListSortOrder.DESC ? 'descending' : 'none';
+}
+
+const BEM_BLOCK$2 = 'rt-data-table-header-cell';
+/**
+ * Ячейка шапки `rt-data-table` — шапка первого кита без Material.
+ *
+ * Нажатие на шапку сортируемой колонки просит порядок: по возрастанию, затем по убыванию, и так
+ * по кругу — снятия порядка нет. С клавиатуры то же делают Enter и пробел. Стрелки порядка видны
+ * при наведении, при фокусе и у колонки, по которой порядок стоит. Значок шапки — набором кита по имени первого кита либо шаблоном приложения.
+ */
+class RtDataTableHeaderCellComponent {
+    constructor() {
+        /** Шапка сортируемой колонки нажимается и с клавиатуры: у неё фокус и роль кнопки. */
+        this.sortable = computed(() => !!this.sortModel()?.propertyName, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
+        this.active = computed(() => dataTableSortActive(this.sortModel(), this.currentSortModel()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.labelMods = computed(() => ({ align: this.headerModel().align }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelMods" }] : /* istanbul ignore next */ []));
+        this.arrowsMods = computed(() => ({ active: this.active() }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrowsMods" }] : /* istanbul ignore next */ []));
+        this.descMods = computed(() => ({
+            active: this.active() && this.currentSortModel()?.sortDirection?.toLowerCase() === EListSortOrder.DESC,
+            first: true,
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descMods" }] : /* istanbul ignore next */ []));
+        this.ascMods = computed(() => ({
+            active: this.active() && this.currentSortModel()?.sortDirection?.toLowerCase() === EListSortOrder.ASC,
+            second: true,
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ascMods" }] : /* istanbul ignore next */ []));
+        /** Значок шапки; его цвет и видимость, как в первом ките, ничего не меняют. */
+        this.icon = computed(() => this.headerModel().icon ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.kitIcon = computed(() => {
+            const icon = this.icon();
+            return icon ? dataTableIconName(icon.glyph) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kitIcon" }] : /* istanbul ignore next */ []));
+        /** Имя без пары в перечне шапка рисует глифом Material Symbols — так же, как ячейка. */
+        this.glyph = computed(() => {
+            const icon = this.icon();
+            return icon && !this.kitIcon() ? icon.glyph : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyph" }] : /* istanbul ignore next */ []));
+        /** Залитый глиф — как залитый значок набора: контурным его делает `outlined` колонки. */
+        this.glyphMods = computed(() => ({ filled: this.icon()?.outlined !== true }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "glyphMods" }] : /* istanbul ignore next */ []));
+        this.iconContext = computed(() => {
+            const icon = this.icon();
+            const column = this.column();
+            return icon && column ? { column, $implicit: icon.glyph, row: null } : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContext" }] : /* istanbul ignore next */ []));
+        this.headerModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerModel" }] : /* istanbul ignore next */ []));
+        this.sortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortModel" }] : /* istanbul ignore next */ []));
+        this.currentSortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
+        /** Колонка шапки — её получает шаблон значка приложения. */
+        this.column = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "column" }] : /* istanbul ignore next */ []));
+        /** Шаблон значка приложения; когда он дан, перечень кита не спрашивается. */
+        this.iconTemplate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+        this.sortChange = output();
+    }
+    /** Enter и пробел просят порядок так же, как нажатие; пробел иначе прокрутил бы страницу. */
+    onKey(event) {
+        if (this.sortable()) {
+            event.preventDefault();
+            this.onClick();
+        }
+    }
+    onClick() {
+        const propertyName = this.sortModel()?.propertyName;
+        if (propertyName) {
+            this.sortChange.emit({ propertyName, sortDirection: dataTableNextSortOrder(this.currentSortModel()) });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableHeaderCellComponent, isStandalone: true, selector: "rt-data-table-header-cell", inputs: { headerModel: { classPropertyName: "headerModel", publicName: "headerModel", isSignal: true, isRequired: true, transformFunction: null }, sortModel: { classPropertyName: "sortModel", publicName: "sortModel", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onKey($event)", "keydown.space": "onKey($event)" }, properties: { "style.text-align": "headerModel().align", "attr.tabindex": "sortable() ? 0 : null", "attr.role": "sortable() ? \"button\" : null" }, classAttribute: "rt-data-table-header-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-header-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-header-glyph\" [rtMod]=\"glyphMods()\">{{ name }}</span>\n        }\n    </ng-template>\n\n    <div rtElem=\"label\" [rtMod]=\"labelMods()\">\n        @if (icon()?.placement === 'left') {\n            <span rtElem=\"prefix\" qa-dataid=\"data-table-header-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n        }\n\n        <div\n            rtElem=\"text\"\n            qa-dataid=\"data-table-header-text\"\n            [class]=\"[headerModel().className] | concatClasses\"\n            [rtTooltip]=\"headerModel().tooltip ?? ''\">\n            {{ headerModel().label }}\n        </div>\n\n        @if (icon()?.placement === 'right') {\n            <span rtElem=\"suffix\" qa-dataid=\"data-table-header-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n        }\n    </div>\n\n    @if (sortModel()) {\n        <div rtElem=\"arrows\" qa-dataid=\"data-table-header-sort\" [rtMod]=\"arrowsMods()\">\n            <div rtElem=\"arrow\" [rtMod]=\"descMods()\"></div>\n            <div rtElem=\"arrow\" [rtMod]=\"ascMods()\"></div>\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-header-cell{--rt-data-table-header-cell-arrow-side: var(--rt-border-width-thick);--rt-data-table-header-cell-arrow-height: var(--rt-size-1);--rt-data-table-header-cell-focus-shadow: var(--rt-shadow-focus-ring);display:flex;align-items:center;justify-content:space-between;cursor:pointer}.rt-data-table-header-cell:hover .rt-data-table-header-cell__arrows,.rt-data-table-header-cell:focus-visible .rt-data-table-header-cell__arrows{visibility:visible}.rt-data-table-header-cell:focus-visible{box-shadow:var(--rt-data-table-header-cell-focus-shadow);outline:none}.rt-data-table-header-cell__label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-header-cell__label--align--left{justify-content:flex-start}.rt-data-table-header-cell__label--align--center{justify-content:center}.rt-data-table-header-cell__label--align--right{justify-content:flex-end}.rt-data-table-header-cell__prefix,.rt-data-table-header-cell__suffix{display:inline-flex;min-width:fit-content}.rt-data-table-header-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-size-6);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-size-6);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-header-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-header-cell__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-header-cell__arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-left:var(--rt-space-md);visibility:hidden}.rt-data-table-header-cell__arrows--active{visibility:visible}.rt-data-table-header-cell__arrow{width:0;height:0;border-right:var(--rt-data-table-header-cell-arrow-side) solid transparent;border-bottom:var(--rt-data-table-header-cell-arrow-height) solid var(--rt-color-text-muted);border-left:var(--rt-data-table-header-cell-arrow-side) solid transparent}.rt-data-table-header-cell__arrow--second{margin-top:var(--rt-space-2xs);transform:scaleY(-1)}.rt-data-table-header-cell__arrow--active{border-bottom-color:var(--rt-color-text-primary)}}\n"], dependencies: [{ kind: "component", type: 
+                // components
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: 
+                // directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: 
+                // pipes
+                ConcatClassesPipe, name: "concatClasses" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-data-table-header-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // components
+                        RtIconComponent,
+                        // directives
+                        BlockDirective,
+                        ElemDirective,
+                        ModDirective,
+                        NgTemplateOutlet,
+                        RtTooltipDirective,
+                        // pipes
+                        ConcatClassesPipe,
+                    ], host: {
+                        class: BEM_BLOCK$2,
+                        '[style.text-align]': 'headerModel().align',
+                        '[attr.tabindex]': 'sortable() ? 0 : null',
+                        '[attr.role]': 'sortable() ? "button" : null',
+                        '(click)': 'onClick()',
+                        '(keydown.enter)': 'onKey($event)',
+                        '(keydown.space)': 'onKey($event)',
+                    }, template: "<ng-container rtBlock=\"rt-data-table-header-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-header-glyph\" [rtMod]=\"glyphMods()\">{{ name }}</span>\n        }\n    </ng-template>\n\n    <div rtElem=\"label\" [rtMod]=\"labelMods()\">\n        @if (icon()?.placement === 'left') {\n            <span rtElem=\"prefix\" qa-dataid=\"data-table-header-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n        }\n\n        <div\n            rtElem=\"text\"\n            qa-dataid=\"data-table-header-text\"\n            [class]=\"[headerModel().className] | concatClasses\"\n            [rtTooltip]=\"headerModel().tooltip ?? ''\">\n            {{ headerModel().label }}\n        </div>\n\n        @if (icon()?.placement === 'right') {\n            <span rtElem=\"suffix\" qa-dataid=\"data-table-header-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n        }\n    </div>\n\n    @if (sortModel()) {\n        <div rtElem=\"arrows\" qa-dataid=\"data-table-header-sort\" [rtMod]=\"arrowsMods()\">\n            <div rtElem=\"arrow\" [rtMod]=\"descMods()\"></div>\n            <div rtElem=\"arrow\" [rtMod]=\"ascMods()\"></div>\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-header-cell{--rt-data-table-header-cell-arrow-side: var(--rt-border-width-thick);--rt-data-table-header-cell-arrow-height: var(--rt-size-1);--rt-data-table-header-cell-focus-shadow: var(--rt-shadow-focus-ring);display:flex;align-items:center;justify-content:space-between;cursor:pointer}.rt-data-table-header-cell:hover .rt-data-table-header-cell__arrows,.rt-data-table-header-cell:focus-visible .rt-data-table-header-cell__arrows{visibility:visible}.rt-data-table-header-cell:focus-visible{box-shadow:var(--rt-data-table-header-cell-focus-shadow);outline:none}.rt-data-table-header-cell__label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-header-cell__label--align--left{justify-content:flex-start}.rt-data-table-header-cell__label--align--center{justify-content:center}.rt-data-table-header-cell__label--align--right{justify-content:flex-end}.rt-data-table-header-cell__prefix,.rt-data-table-header-cell__suffix{display:inline-flex;min-width:fit-content}.rt-data-table-header-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-size-6);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-size-6);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-header-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-header-cell__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-header-cell__arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-left:var(--rt-space-md);visibility:hidden}.rt-data-table-header-cell__arrows--active{visibility:visible}.rt-data-table-header-cell__arrow{width:0;height:0;border-right:var(--rt-data-table-header-cell-arrow-side) solid transparent;border-bottom:var(--rt-data-table-header-cell-arrow-height) solid var(--rt-color-text-muted);border-left:var(--rt-data-table-header-cell-arrow-side) solid transparent}.rt-data-table-header-cell__arrow--second{margin-top:var(--rt-space-2xs);transform:scaleY(-1)}.rt-data-table-header-cell__arrow--active{border-bottom-color:var(--rt-color-text-primary)}}\n"] }]
+        }], propDecorators: { headerModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerModel", required: true }] }], sortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortModel", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }] } });
+
+/**
+ * Значок вида сравнения — имя первого кита; набор кита рисует его по перечню соответствий.
+ * «Начинается с» и «заканчивается на» первый кит объявлял, но значка и пункта меню им не давал.
+ */
+const DATA_TABLE_FILTER_OPERATOR_GLYPHS = {
+    [EFilterOperatorType.EQUALS]: 'drag_handle',
+    [EFilterOperatorType.NOT_EQUALS]: 'block',
+    [EFilterOperatorType.STARTS_WITH]: null,
+    [EFilterOperatorType.ENDS_WITH]: null,
+    [EFilterOperatorType.CONTAINS]: 'more_horiz',
+    [EFilterOperatorType.GREATER_THAN]: 'chevron_right',
+    [EFilterOperatorType.LESS_THAN]: 'chevron_left',
+};
+/** Пункты меню видов сравнения в порядке первого кита. */
+const DATA_TABLE_FILTER_MENU_OPERATORS = [
+    EFilterOperatorType.EQUALS,
+    EFilterOperatorType.NOT_EQUALS,
+    EFilterOperatorType.CONTAINS,
+    EFilterOperatorType.GREATER_THAN,
+    EFilterOperatorType.LESS_THAN,
+];
+/** Вид сравнения колонки по умолчанию: незнакомое и пустое значение дают «равно». */
+function dataTableDefaultOperator(operator) {
+    return operator && FILTER_OPERATORS.includes(operator) ? operator : EFilterOperatorType.EQUALS;
+}
+/** Условие колонки из набора приложения, а без него — пустое условие с видом по умолчанию. */
+function dataTableColumnFilter(filters, propertyName, defaultOperator) {
+    return (filters.find((filter) => filter.propertyName === propertyName) ?? {
+        propertyName,
+        operatorType: defaultOperator,
+        value: '',
+    });
+}
+/**
+ * Набор условий после смены значения колонки; `null` — приложению сообщать нечего.
+ * Пустое значение снимает условие колонки, значение на колонке без условия добавляет его.
+ */
+function dataTableFiltersWithValue(filters, current, value) {
+    const hasCondition = filters.some((filter) => filter.propertyName === current.propertyName);
+    if (hasCondition) {
+        return value
+            ? filters.map((filter) => (filter.propertyName === current.propertyName ? { ...filter, value } : filter))
+            : filters.filter((filter) => filter.propertyName !== current.propertyName);
+    }
+    return value ? [...filters, { propertyName: current.propertyName, operatorType: current.operatorType, value }] : null;
+}
+/** Набор условий после смены вида сравнения; `null` — ни условия, ни значения, спрашивать нечего. */
+function dataTableFiltersWithOperator(filters, current, operatorType) {
+    const hasCondition = filters.some((filter) => filter.propertyName === current.propertyName);
+    if (hasCondition) {
+        return filters.map((filter) => filter.propertyName === current.propertyName ? { ...filter, operatorType } : filter);
+    }
+    return current.value ? [...filters, { operatorType, propertyName: current.propertyName, value: current.value }] : null;
+}
+/**
+ * День поля даты кита (`2025-01-01`) — в момент ISO, как отдавал первый кит: полночь дня по
+ * местному времени. Пустая строка остаётся пустой — она снимает условие.
+ */
+function dataTableDayToIso(day) {
+    const [year, month, date] = day.split('-').map(Number);
+    const complete = [year, month, date].every((part) => !!part);
+    return complete ? new Date(year, month - 1, date).toISOString() : '';
+}
+/** Обратно: момент условия — в день поля даты по местному времени; нераспознанное даёт пустое. */
+function dataTableIsoToDay(value) {
+    const moment = new Date(typeof value === 'string' ? value : '');
+    if (Number.isNaN(moment.getTime())) {
+        return '';
+    }
+    const month = String(moment.getMonth() + 1).padStart(2, '0');
+    const date = String(moment.getDate()).padStart(2, '0');
+    return `${moment.getFullYear()}-${month}-${date}`;
+}
+
+const BEM_BLOCK$1 = 'rt-data-table-filter-cell';
+/** Значок кнопки вида сравнения, которому первый кит значка не дал. */
+const FALLBACK_OPERATOR_ICON = 'ellipsis-h';
+const OPERATOR_LABELS = {
+    [EFilterOperatorType.EQUALS]: 'dataTableFilterOperatorEquals',
+    [EFilterOperatorType.NOT_EQUALS]: 'dataTableFilterOperatorNotEquals',
+    [EFilterOperatorType.CONTAINS]: 'dataTableFilterOperatorContains',
+    [EFilterOperatorType.GREATER_THAN]: 'dataTableFilterOperatorGreaterThan',
+    [EFilterOperatorType.LESS_THAN]: 'dataTableFilterOperatorLessThan',
+};
+/** Одно и то же условие: колонка, вид сравнения и значение совпадают. */
+function sameFilter(a, b) {
+    return a.propertyName === b.propertyName && a.operatorType === b.operatorType && a.value === b.value;
+}
+/**
+ * Ячейка строки отбора `rt-data-table` — ячейка отбора первого кита на полях кита.
+ *
+ * Своих условий у ячейки нет: она читает набор приложения и отдаёт ему новый при каждой смене.
+ * Текст и число фиксируются по Enter и уходу с поля, дата — выбором дня, список — выбором пункта;
+ * пустое значение снимает условие колонки. Кнопка вида сравнения предлагает остальные виды.
+ */
+class RtDataTableFilterCellComponent {
+    constructor() {
+        this.#translate = inject(RT_KIT_TRANSLATOR);
+        this.#titleCase = new TitleCasePipe();
+        /** Набранное, но ещё не зафиксированное значение текстового и числового поля. */
+        this.#draft = null;
+        this.filterTypes = ERtDataTableFilterType;
+        this.valuePlaceholder = rtKitLabel('dataTableFilterValuePlaceholder');
+        this.selectPlaceholder = rtKitLabel('dataTableFilterSelectPlaceholder');
+        this.clearLabel = rtKitLabel('dataTableFilterClear');
+        /**
+         * Условие своей колонки из набора приложения. Сверяется по содержимому: набор меняется целиком
+         * и по чужой колонке, а своё условие при этом остаётся тем же — и выбранный здесь вид
+         * сравнения пустой колонки сбрасывать нечем.
+         */
+        this.#ownFilter = computed(() => dataTableColumnFilter(this.filterModel(), this.filterProperty(), dataTableDefaultOperator(this.defaultFilterOperator())), { ...(ngDevMode ? { debugName: "#ownFilter" } : /* istanbul ignore next */ {}), equal: sameFilter });
+        /** Условие колонки: из набора приложения, а вид сравнения без условия помнит сама ячейка. */
+        this.currentFilter = linkedSignal(() => this.#ownFilter(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => !!this.currentFilter().value, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.day = computed(() => dataTableIsoToDay(this.currentFilter().value), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "day" }] : /* istanbul ignore next */ []));
+        this.number = computed(() => {
+            const value = Number(this.currentFilter().value);
+            return this.currentFilter().value === '' || Number.isNaN(value) ? null : value;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "number" }] : /* istanbul ignore next */ []));
+        this.operatorIcon = computed(() => this.#operatorIcon(this.currentFilter().operatorType), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "operatorIcon" }] : /* istanbul ignore next */ []));
+        this.operatorLabel = computed(() => this.#operatorLabel(this.#translate(), this.currentFilter().operatorType), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "operatorLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * Пункты меню — предложенные колонкой виды в порядке первого кита, кроме нынешнего: его первый кит
+         * в меню не выводит, нынешний вид показывает кнопка.
+         */
+        this.operatorItems = computed(() => {
+            const translate = this.#translate();
+            const current = this.currentFilter().operatorType;
+            return DATA_TABLE_FILTER_MENU_OPERATORS.filter((operator) => operator !== current && this.filterOperators().includes(operator)).map((operator) => ({
+                operator,
+                icon: this.#operatorIcon(operator),
+                label: this.#operatorLabel(translate, operator),
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "operatorItems" }] : /* istanbul ignore next */ []));
+        this.selectOptions = computed(() => this.filterSelectOptions().map((option) => ({ label: this.#titleCase.transform(option), value: option })), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectOptions" }] : /* istanbul ignore next */ []));
+        /** Колонка, по которой отбирает ячейка. */
+        /** Вид полей отбора: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+        this.appearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.filterProperty = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterProperty" }] : /* istanbul ignore next */ []));
+        this.filterType = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
+        /** Весь набор условий приложения. */
+        this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        this.defaultFilterOperator = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "defaultFilterOperator" }] : /* istanbul ignore next */ []));
+        this.filterOperators = input([], { ...(ngDevMode ? { debugName: "filterOperators" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        this.filterSelectOptions = input([], { ...(ngDevMode ? { debugName: "filterSelectOptions" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        this.filterChange = output();
+    }
+    #translate;
+    #titleCase;
+    /** Набранное, но ещё не зафиксированное значение текстового и числового поля. */
+    #draft;
+    /**
+     * Условие своей колонки из набора приложения. Сверяется по содержимому: набор меняется целиком
+     * и по чужой колонке, а своё условие при этом остаётся тем же — и выбранный здесь вид
+     * сравнения пустой колонки сбрасывать нечем.
+     */
+    #ownFilter;
+    /** Набор в поле: пустое поле — это очистка, она фиксируется сразу, как у первого кита. */
+    onDraft(value) {
+        this.#draft = value ?? '';
+        if (this.#draft === '') {
+            this.onCommit();
+        }
+    }
+    /** Enter и уход с поля фиксируют набранное. */
+    onCommit() {
+        if (this.#draft !== null) {
+            this.onValueChange(this.#draft);
+            this.#draft = null;
+        }
+    }
+    onNumberDraft(value) {
+        this.onDraft(value === null ? '' : String(value));
+    }
+    onDayChange(day) {
+        this.onValueChange(dataTableDayToIso(day ?? ''));
+    }
+    onValueChange(value) {
+        const next = value ?? '';
+        const current = this.currentFilter();
+        if (next === current.value) {
+            return;
+        }
+        const filters = dataTableFiltersWithValue(this.filterModel(), current, next);
+        if (filters) {
+            this.filterChange.emit(filters);
+        }
+        this.currentFilter.set({ ...current, value: next });
+    }
+    onOperatorChange(operatorType) {
+        const current = this.currentFilter();
+        const filters = dataTableFiltersWithOperator(this.filterModel(), current, operatorType);
+        if (filters) {
+            this.filterChange.emit(filters);
+        }
+        this.currentFilter.set({ ...current, operatorType });
+    }
+    #operatorIcon(operator) {
+        const glyph = DATA_TABLE_FILTER_OPERATOR_GLYPHS[operator];
+        return (glyph && dataTableIconName(glyph)) || FALLBACK_OPERATOR_ICON;
+    }
+    #operatorLabel(translate, operator) {
+        const key = OPERATOR_LABELS[operator];
+        return key ? translate(key) : this.#titleCase.transform(operator);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableFilterCellComponent, isStandalone: true, selector: "rt-data-table-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: false, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "rt-data-table-filter-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-filter-cell\">\n    @if (filterOperators().length) {\n        <rt-menu qa-dataid=\"data-table-filter-operator\" align=\"start\" [icon]=\"operatorIcon()\" [ariaLabel]=\"operatorLabel()\">\n            @for (item of operatorItems(); track item.operator) {\n                <rt-menu-item\n                    qa-dataid=\"data-table-filter-operator-item\"\n                    [icon]=\"item.icon\"\n                    [label]=\"item.label\"\n                    (selected)=\"onOperatorChange(item.operator)\" />\n            }\n        </rt-menu>\n    }\n\n    @switch (filterType()) {\n        @case (filterTypes.TEXT) {\n            <rt-input\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-input\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"currentFilter().value\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.NUMBER) {\n            <rt-input-number\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-number\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"number()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onNumberDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.DATE) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-date-picker\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-date\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [ngModel]=\"day()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDayChange($event)\" />\n        }\n        @case (filterTypes.SELECT) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-select\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-select\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [options]=\"selectOptions()\"\n                [placeholder]=\"selectPlaceholder()\"\n                [ngModel]=\"currentFilter().value || null\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (selectionChange)=\"onValueChange($event)\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-filter-cell{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-data-table-filter-cell__field{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);--rt-input-line-height: var(--rt-list-filter-line-height);min-width:0;flex-grow:1}.rt-data-table-filter-cell .rt-data-table-filter-cell__field{width:calc(180px + 2 * var(--rt-space-4))}.rt-data-table-filter-cell rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-filter-cell .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-filter-cell .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}}\n"], dependencies: [{ kind: "component", type: 
+                // components
+                RtDatePickerComponent, selector: "rt-date-picker", inputs: ["appearance", "type", "min", "max", "minuteStep"] }, { 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: RtInputNumberComponent, selector: "rt-input-number", inputs: ["appearance", "iconLeft", "prefix", "placeholder", "min", "max", "minFractionDigits", "maxFractionDigits", "grouped"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtMenuItemComponent, selector: "rt-menu-item", inputs: ["icon", "label", "danger", "success", "glyph", "fill", "current", "disabled", "confirmMessage", "confirmTitle", "confirmLabel", "confirmCancelLabel", "confirmTone", "link"], outputs: ["selected"] }, { kind: "component", type: RtSelectComponent, selector: "rt-select", inputs: ["appearance", "options", "placeholder", "iconLeft", "filter", "filterPlaceholder", "panelWidth", "panelMaxHeight"], outputs: ["selectionChange"] }, { kind: "directive", type: 
+                // directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableFilterCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-data-table-filter-cell', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // components
+                        RtDatePickerComponent,
+                        RtIconButtonComponent,
+                        RtInputComponent,
+                        RtInputNumberComponent,
+                        RtMenuComponent,
+                        RtMenuItemComponent,
+                        RtSelectComponent,
+                        // directives
+                        BlockDirective,
+                        ElemDirective,
+                        FormsModule,
+                    ], host: { class: BEM_BLOCK$1 }, template: "<ng-container rtBlock=\"rt-data-table-filter-cell\">\n    @if (filterOperators().length) {\n        <rt-menu qa-dataid=\"data-table-filter-operator\" align=\"start\" [icon]=\"operatorIcon()\" [ariaLabel]=\"operatorLabel()\">\n            @for (item of operatorItems(); track item.operator) {\n                <rt-menu-item\n                    qa-dataid=\"data-table-filter-operator-item\"\n                    [icon]=\"item.icon\"\n                    [label]=\"item.label\"\n                    (selected)=\"onOperatorChange(item.operator)\" />\n            }\n        </rt-menu>\n    }\n\n    @switch (filterType()) {\n        @case (filterTypes.TEXT) {\n            <rt-input\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-input\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"currentFilter().value\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.NUMBER) {\n            <rt-input-number\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-number\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"number()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onNumberDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.DATE) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-date-picker\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-date\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [ngModel]=\"day()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDayChange($event)\" />\n        }\n        @case (filterTypes.SELECT) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-select\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-select\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [options]=\"selectOptions()\"\n                [placeholder]=\"selectPlaceholder()\"\n                [ngModel]=\"currentFilter().value || null\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (selectionChange)=\"onValueChange($event)\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-filter-cell{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-data-table-filter-cell__field{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);--rt-input-line-height: var(--rt-list-filter-line-height);min-width:0;flex-grow:1}.rt-data-table-filter-cell .rt-data-table-filter-cell__field{width:calc(180px + 2 * var(--rt-space-4))}.rt-data-table-filter-cell rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-filter-cell .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-filter-cell .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}}\n"] }]
+        }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], filterProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterProperty", required: true }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: true }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }], defaultFilterOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFilterOperator", required: false }] }], filterOperators: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOperators", required: false }] }], filterSelectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSelectOptions", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
+
+/**
+ * Шаблоны пользовательских ячеек: имя свойства колонки — шаблон её ячейки.
+ *
+ * Колонку типа «custom» таблица рисует этим шаблоном и готовой ячейки не берёт.
+ */
+class RtDataTableCustomCellsDirective {
+    constructor() {
+        this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : /* istanbul ignore next */ {}), alias: 'rtDataTableCustomCells' });
+    }
+    getTemplateByPropName(propName) {
+        return this.cellsTemplates()[propName] ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableCustomCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtDataTableCustomCellsDirective, isStandalone: true, selector: "[rtDataTableCustomCells]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtDataTableCustomCells", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableCustomCellsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataTableCustomCells]',
+                }]
+        }], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtDataTableCustomCells", required: true }] }] } });
+/** Пункты меню строки: шаблон раскрывается в панели меню кита. */
+class RtDataTableRowActionsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataTableRowActionsDirective, isStandalone: true, selector: "[rtDataTableRowActions]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableRowActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataTableRowActions]',
+                }]
+        }] });
+/** Действия строки рядом с кнопкой меню: шаблон рисуется в полосе действий. */
+class RtDataTableAdditionalRowActionsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableAdditionalRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataTableAdditionalRowActionsDirective, isStandalone: true, selector: "[rtDataTableAdditionalRowActions]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableAdditionalRowActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataTableAdditionalRowActions]',
+                }]
+        }] });
+
+/** Ключи записей списка. */
+function dataTableKeysOf(entities, keyExp) {
+    return entities.map((entity) => entity[keyExp]);
+}
+/** Записи страницы, добавленные к отмеченным; повторов не будет. */
+function dataTableWithPageEntities(selected, page, keyExp) {
+    const keys = dataTableKeysOf(selected, keyExp);
+    return [...selected, ...page.filter((entity) => !keys.includes(entity[keyExp]))];
+}
+/** Отмеченные без записей страницы. */
+function dataTableWithoutPageEntities(selected, page, keyExp) {
+    const keys = dataTableKeysOf(page, keyExp);
+    return selected.filter((entity) => !keys.includes(entity[keyExp]));
+}
+/** Отмеченные после отметки или снятия одной записи. */
+function dataTableWithEntity(selected, entity, checked, keyExp) {
+    const without = selected.filter((el) => el[keyExp] !== entity[keyExp]);
+    return checked ? [...without, entity] : without;
+}
+/** Хоть одна запись страницы отмечена. */
+function dataTableAnyOnPage(page, selectedKeys, keyExp) {
+    return page.some((entity) => selectedKeys.includes(entity[keyExp]));
+}
+/** Отмечены все записи страницы; пустая страница у первого кита считается отмеченной целиком. */
+function dataTableAllOnPage(page, selectedKeys, keyExp) {
+    return page.every((entity) => selectedKeys.includes(entity[keyExp]));
+}
+/** Записи первой страницы, чьи ключи названы приложением как отмеченные заранее. */
+function dataTablePresetEntities(entities, keys, keyExp) {
+    return entities.filter((entity) => keys.includes(entity[keyExp]));
+}
+
+const BEM_BLOCK = 'rt-data-table';
+/**
+ * Таблица записей первого кита во втором — без Material.
+ *
+ * Колонки берутся у службы настроек, строки приходят входом. Таблица рисует шапку, строку
+ * отбора, готовые или пользовательские ячейки, колонку выбора флажком либо радиокнопкой и полосу
+ * действий в конце строки. Своего отбора и своего порядка она не ведёт: обо всём просит
+ * приложение. Отметками строк занимается директива выбора — она ставит их сюда.
+ */
+class RtDataTableComponent {
+    constructor() {
+        this.#configService = inject(RtDataTableConfigService);
+        /* Вид считается из настроек при объявлении входа: вход в разметке по-прежнему перебивает всё. */
+        this.#look = rtKitDefault('dataTable', (it) => it.look, 'material');
+        /** Полоса действий и две ячейки, которым она отдаёт свою ширину, — приём первого кита. */
+        this.rowActionsRef = viewChild('rowActions', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowActionsRef" }] : /* istanbul ignore next */ []));
+        this.headerSpacerRef = viewChild('headerSpacer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerSpacerRef" }] : /* istanbul ignore next */ []));
+        this.rowSpacerRef = viewChild('rowSpacer', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowSpacerRef" }] : /* istanbul ignore next */ []));
+        this.columnTypes = ERtDataTableColumnType;
+        /** Набор даёт узел вокруг — список; тогда класс набора на самой таблице не ставится. */
+        this.presetFromHost = inject(RT_DATA_TABLE_PRESET_FROM_HOST, { optional: true }) ?? false;
+        /** Классы меню строки: оно открывается поверх страницы и вид семьи получает от неё. */
+        this.menuPanelClass = computed(() => (this.look() === 'material' ? [RT_PRESET_MATERIAL_CLASS] : []), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuPanelClass" }] : /* istanbul ignore next */ []));
+        this.actionsLabel = rtKitLabel('dataTableActions');
+        this.selectRowLabel = rtKitLabel('dataTableSelectRow');
+        this.selectPageLabel = rtKitLabel('dataTableSelectPage');
+        /** Полоса действий рисуется, когда приложение дало меню строки или действия рядом с ним. */
+        this.hasRowActions = computed(() => !!this.rowActionsTpl() || !!this.additionalRowActionsTpl(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRowActions" }] : /* istanbul ignore next */ []));
+        this.visibleColumns = computed(() => this.columns().filter((column) => !column.hidden), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+        /** `aria-sort` каждой показанной колонки по её имени: шаблон читает готовое, а не зовёт расчёт. */
+        this.ariaSorts = computed(() => Object.fromEntries(this.visibleColumns().map((column) => [
+            column.propName,
+            dataTableAriaSort(column.sorting, this.currentSortModel()),
+        ])), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaSorts" }] : /* istanbul ignore next */ []));
+        /** Колонки — из службы настроек: их порядок и видимость помнит она. */
+        /** Вид полей отбора: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+        /**
+         * Вид семьи. Материальный набор стоит на самом узле, а не на странице: семья выглядит как первый
+         * кит, где бы её ни поставили, и соседи на странице своего вида не теряют.
+         */
+        this.look = input(this.#look, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        this.filterAppearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterAppearance" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => this.#configService.tableConfig().columns, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Свойство, которым записи отличаются друг от друга. */
+        this.keyExp = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
+        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        this.currentSortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
+        /**
+         * Условия отбора. Их ключ — имя свойства колонки, а не ключ записи: отбирают по колонке, и
+         * ключ записи здесь оказался бы уже нужного — строка отбора зовёт ячейку именем колонки.
+         */
+        this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.rowClick = output();
+        this.rowDoubleClick = output();
+        this.sortChange = output();
+        this.filterChange = output();
+        this.customCellsTpl = contentChild(RtDataTableCustomCellsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customCellsTpl" }] : /* istanbul ignore next */ []));
+        this.rowActionsTpl = contentChild(RtDataTableRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.additionalRowActionsTpl = contentChild(RtDataTableAdditionalRowActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /** Шаблон значка приложения: его получают и шапка, и готовая ячейка. */
+        this.iconTpl = contentChild(RtDataTableIconDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconTpl" }] : /* istanbul ignore next */ []));
+        /** Ключи отмеченных записей; их ставит директива выбора. */
+        this.selectedEntitiesIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
+        this.isPageEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
+        this.isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
+        this.isMultiSelect = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiSelect" }] : /* istanbul ignore next */ []));
+        this.isSelectorsColumnShown = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectorsColumnShown" }] : /* istanbul ignore next */ []));
+        this.isSelectorsColumnDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectorsColumnDisabled" }] : /* istanbul ignore next */ []));
+        /** Строка с открытым меню; у первого кита она подсвечена, пока меню открыто. */
+        this.activeRowIndex = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeRowIndex" }] : /* istanbul ignore next */ []));
+        /** Отметить запись; метод ставит директива выбора, без неё колонки выбора нет вовсе. */
+        this.onToggleEntity = () => undefined;
+        /** Отметить все строки показанной страницы; метод ставит директива выбора. */
+        this.onTogglePageEntities = () => undefined;
+    }
+    #configService;
+    /* Вид считается из настроек при объявлении входа: вход в разметке по-прежнему перебивает всё. */
+    #look;
+    ngAfterViewChecked() {
+        this.#syncSpacerWidth();
+    }
+    /**
+     * Имя колонки приходит строкой, а наружу уходит ключом домена: приведение сверяется с тем же
+     * набором колонок, который рисует таблица. Несовпавшее не отдаётся вовсе — приём первого кита.
+     */
+    onSortChange(sortModel) {
+        const names = this.columns().map((column) => String(column.propName));
+        if (names.includes(sortModel.propertyName)) {
+            this.sortChange.emit({ ...sortModel, propertyName: sortModel.propertyName });
+        }
+    }
+    onFilterChange(filterModel) {
+        this.filterChange.emit(filterModel);
+    }
+    onRowClick(row, event) {
+        this.rowClick.emit({ row, event });
+    }
+    onRowDoubleClick(row) {
+        this.rowDoubleClick.emit(row);
+    }
+    onMenuOpenedChange(index, opened) {
+        this.activeRowIndex.set(opened ? index : null);
+    }
+    defaultOperator(column) {
+        return column.defaultFilterOperator ?? EFilterOperatorType.EQUALS;
+    }
+    /**
+     * Полоса действий висит над концом строки, и место под неё держат две пустые ячейки — в
+     * шапке и в строке. Ширину им таблица ставит по ширине самой полосы, как первый кит.
+     */
+    #syncSpacerWidth() {
+        const strip = this.rowActionsRef()?.nativeElement;
+        if (!strip) {
+            return;
+        }
+        const width = `${strip.offsetWidth}px`;
+        [this.headerSpacerRef()?.nativeElement, this.rowSpacerRef()?.nativeElement].forEach((spacer) => {
+            if (spacer && spacer.style.width !== width) {
+                spacer.style.width = width;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableComponent, isStandalone: true, selector: "rt-data-table", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", rowDoubleClick: "rowDoubleClick", sortChange: "sortChange", filterChange: "filterChange" }, host: { properties: { "class.rt-preset-material": "look() === 'material' && !presetFromHost" }, classAttribute: "rt-data-table" }, providers: [{ provide: RT_DATA_TABLE_ROW_HOST, useExisting: forwardRef(() => RtDataTableComponent) }], queries: [{ propertyName: "customCellsTpl", first: true, predicate: RtDataTableCustomCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtDataTableRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtDataTableAdditionalRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "iconTpl", first: true, predicate: RtDataTableIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "rowActionsRef", first: true, predicate: ["rowActions"], descendants: true, isSignal: true }, { propertyName: "headerSpacerRef", first: true, predicate: ["headerSpacer"], descendants: true, isSignal: true }, { propertyName: "rowSpacerRef", first: true, predicate: ["rowSpacer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table\">\n    <table rtElem=\"table\">\n        <thead rtElem=\"head\">\n            <tr>\n                @if (isSelectorsColumnShown()) {\n                    <th rtElem=\"cell\" [rtMod]=\"{ head: true, selectable: true }\">\n                        @if (isMultiSelect()) {\n                            <rt-checkbox\n                                qa-dataid=\"data-table-page-checkbox\"\n                                [ariaLabel]=\"selectPageLabel()\"\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [indeterminate]=\"isPageEntitiesIndeterminate() && !isPageEntitiesSelected()\"\n                                [ngModel]=\"isPageEntitiesSelected()\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                (ngModelChange)=\"onTogglePageEntities($event)\" />\n                        }\n                    </th>\n                }\n\n                @for (column of visibleColumns(); track column.propName) {\n                    <th\n                        rtElem=\"cell\"\n                        qa-dataid=\"data-table-header-cell\"\n                        [attr.aria-sort]=\"ariaSorts()[column.propName]\"\n                        [rtMod]=\"{ head: true, sortable: !!column.sorting }\">\n                        <rt-data-table-header-cell\n                            [headerModel]=\"column.header\"\n                            [sortModel]=\"column.sorting\"\n                            [currentSortModel]=\"currentSortModel()\"\n                            [column]=\"column\"\n                            [iconTemplate]=\"iconTpl()?.template ?? null\"\n                            (sortChange)=\"onSortChange($event)\" />\n                    </th>\n                }\n\n                @if (hasRowActions()) {\n                    <th #headerSpacer rtElem=\"cell\" qa-dataid=\"data-table-actions-header\" [rtMod]=\"{ head: true }\">{{ actionsLabel() }}</th>\n                }\n            </tr>\n\n            @if (isFiltersShown()) {\n                <tr qa-dataid=\"data-table-filter-row\">\n                    @if (isSelectorsColumnShown()) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true, empty: true }\"></th>\n                    }\n\n                    @for (column of visibleColumns(); track column.propName) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true }\">\n                            @if (column.filterType; as filterType) {\n                                <rt-data-table-filter-cell\n                                    [filterProperty]=\"column.propName\"\n                                    [filterType]=\"filterType\"\n                                    [filterModel]=\"filterModel()\"\n                                    [defaultFilterOperator]=\"column.defaultFilterOperator\"\n                                    [filterOperators]=\"column.filterOperators\"\n                                    [filterSelectOptions]=\"column.filterSelectOptions\"\n                                    [appearance]=\"filterAppearance()\"\n                                    (filterChange)=\"onFilterChange($event)\" />\n                            }\n                        </th>\n                    }\n\n                    @if (hasRowActions()) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true }\"></th>\n                    }\n                </tr>\n            }\n        </thead>\n\n        <tbody>\n            @for (row of entities(); track row[keyExp()]; let index = $index) {\n                <tr\n                    rtElem=\"row\"\n                    qa-dataid=\"data-table-row\"\n                    [rtDataTableRowClick]=\"row\"\n                    [isTableRowClickable]=\"isTableRowsClickable()\"\n                    [rtMod]=\"{ clickable: isTableRowsClickable(), active: activeRowIndex() === index }\">\n                    @if (isSelectorsColumnShown()) {\n                        <td rtElem=\"cell\" [rtMod]=\"{ selectable: true }\" [attr.rt-data-table-stop-row-click]=\"''\">\n                            @if (isMultiSelect()) {\n                                <rt-checkbox\n                                    qa-dataid=\"data-table-row-checkbox\"\n                                    [ariaLabel]=\"selectRowLabel()\"\n                                    [disabled]=\"isSelectorsColumnDisabled()\"\n                                    [ngModel]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                    [ngModelOptions]=\"{ standalone: true }\"\n                                    (ngModelChange)=\"onToggleEntity(row, $event)\" />\n                            } @else {\n                                <rt-radio-button\n                                    qa-dataid=\"data-table-row-radio\"\n                                    [value]=\"row[keyExp()]\"\n                                    [ariaLabel]=\"selectRowLabel()\"\n                                    [disabled]=\"isSelectorsColumnDisabled()\"\n                                    [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                    (checkedChange)=\"onToggleEntity(row, true)\" />\n                            }\n                        </td>\n                    }\n\n                    @for (column of visibleColumns(); track column.propName) {\n                        <td rtElem=\"cell\" qa-dataid=\"data-table-cell\" [rtMod]=\"{ copyable: !!column.copyable }\">\n                            @if (column.type === columnTypes.CUSTOM) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"customCellsTpl()?.getTemplateByPropName(column.propName) ?? null\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                            } @else {\n                                <rt-data-table-cell [row]=\"row\" [column]=\"column\" [iconTemplate]=\"iconTpl()?.template ?? null\" />\n                            }\n                        </td>\n                    }\n\n                    @if (hasRowActions()) {\n                        <td #rowSpacer rtElem=\"cell\" [rtMod]=\"{ spacer: true }\"></td>\n\n                        <div rtBlock=\"rt-data-table-actions\" [rtMod]=\"{ hidden: activeRowIndex() !== index }\">\n                            <div #rowActions rtElem=\"container\" qa-dataid=\"data-table-actions\">\n                                @if (additionalRowActionsTpl(); as additional) {\n                                    <ng-container [ngTemplateOutlet]=\"additional\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                }\n\n                                @if (rowActionsTpl(); as actions) {\n                                    <rt-menu\n                                        rtElem=\"action\"\n                                        qa-dataid=\"data-table-row-menu\"\n                                        icon=\"ellipsis-v\"\n                                        size=\"sm\"\n                                        [panelClass]=\"menuPanelClass()\"\n                                        [attr.rt-data-table-stop-row-click]=\"''\"\n                                        [ariaLabel]=\"actionsLabel()\"\n                                        (openedChange)=\"onMenuOpenedChange(index, $event)\">\n                                        <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                    </rt-menu>\n                                }\n                            </div>\n                        </div>\n                    }\n                </tr>\n            }\n        </tbody>\n    </table>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table{--rt-data-table-row-height: var(--rt-control-height-lg);--rt-data-table-head-height: calc(var(--rt-control-height-lg) - var(--rt-space-1));--rt-data-table-border-width: var(--rt-border-width-thin);--rt-data-table-cell-padding: calc(var(--rt-space-2) + var(--rt-space-0-5));--rt-data-table-row-transition-duration: var(--rt-duration-base);--rt-data-table-padding-bottom: var(--rt-list-content-padding-bottom);--rt-data-table-head-color: var(--rt-color-text-primary);--rt-data-table-head-font-weight: var(--rt-font-weight-medium);--rt-data-table-filter-bg: color-mix(in srgb, var(--rt-color-table-head-bg), var(--rt-color-bg-surface) 50%);display:block;overflow:auto;width:100%;height:100%;box-sizing:border-box;padding-bottom:var(--rt-data-table-padding-bottom);scrollbar-color:var(--rt-data-table-scrollbar-color, transparent transparent);scrollbar-width:var(--rt-data-table-scrollbar-width, thin)}.rt-data-table::-webkit-scrollbar{width:var(--rt-data-table-scrollbar-vertical-width, var(--rt-size-3));height:var(--rt-data-table-scrollbar-horizontal-height, var(--rt-size-3))}.rt-data-table:hover,.rt-data-table:focus-within{scrollbar-color:var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent)}@media(hover:none){.rt-data-table{scrollbar-color:var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent)}}.rt-data-table__table{width:100%;border-collapse:collapse}.rt-data-table thead{position:sticky;z-index:var(--rt-z-sticky);top:0}.rt-data-table thead tr:first-child{height:var(--rt-data-table-head-height)}.rt-data-table thead tr:last-child{border-bottom:var(--rt-data-table-border-width) solid var(--rt-color-border-default)}.rt-data-table tbody{font-size:var(--rt-text-sm)}.rt-data-table__row{height:var(--rt-data-table-row-height);border-bottom:var(--rt-data-table-border-width) solid var(--rt-color-border-subtle);color:var(--rt-color-text-primary);transform:translate(0)}.rt-data-table__row:hover{border-bottom-color:var(--rt-color-state-info);transition:border-bottom-color var(--rt-data-table-row-transition-duration)}.rt-data-table__row:hover .rt-data-table-actions{visibility:visible}.rt-data-table__row--active{border-bottom-color:var(--rt-color-state-info)}.rt-data-table__row--clickable{cursor:pointer}.rt-data-table__cell{width:fit-content;height:100%;padding:var(--rt-data-table-cell-padding)}.rt-data-table__cell--head{position:relative;background-color:var(--rt-color-table-head-bg);color:var(--rt-data-table-head-color);font-size:var(--rt-text-md);font-weight:var(--rt-data-table-head-font-weight);line-height:var(--rt-leading-tight);pointer-events:none;text-align:start}.rt-data-table__cell--sortable,.rt-data-table__cell--selectable,.rt-data-table__cell--filterable{pointer-events:auto}.rt-data-table__cell--selectable>rt-checkbox,.rt-data-table__cell--selectable>rt-radio-button{display:flex}.rt-data-table__cell--filterable{padding:var(--rt-space-xs) var(--rt-space-sm);background-color:var(--rt-data-table-filter-bg)}:is(.rt-preset-material,[data-preset=material]) .rt-data-table__cell--filterable{--rt-input-radius: var(--rt-radius-sm)}.rt-data-table__cell--head:not(:last-child,.rt-data-table__cell--selectable,.rt-data-table__cell--empty):after{position:absolute;top:25%;right:0;height:50%;border-right:var(--rt-data-table-border-width) solid var(--rt-list-table-head-divider-color);content:\"\";pointer-events:none}.rt-data-table__cell--spacer{padding:0}.rt-data-table-actions{--rt-data-table-actions-bg: var(--rt-table-actions-bg, var(--rt-color-bg-surface));position:absolute;z-index:var(--rt-z-base);top:0;right:0;display:flex;width:100%;height:100%;align-items:center;justify-content:flex-end;pointer-events:none}.rt-data-table-actions__container{position:sticky;right:0;display:flex;overflow:hidden;width:fit-content;height:calc(100% - var(--rt-data-table-border-width) * 2);align-items:center;justify-content:flex-end;padding:0 var(--rt-space-xs) 0 var(--rt-space-5);background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--rt-data-table-actions-bg) 30%,transparent) 10%,var(--rt-data-table-actions-bg) 20%,var(--rt-data-table-actions-bg) 100%);gap:var(--rt-space-xs);pointer-events:none}.rt-data-table-actions__container>*{pointer-events:auto}.rt-data-table-actions__action{position:sticky}.rt-data-table-actions rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-actions .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-actions .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}@media(hover:hover){.rt-data-table-actions--hidden{opacity:0}.rt-data-table-actions--hidden .rt-data-table-actions__container>*{pointer-events:none}.rt-data-table__row:hover .rt-data-table-actions--hidden,.rt-data-table__row:has(:focus-visible) .rt-data-table-actions--hidden{opacity:1}.rt-data-table__row:hover .rt-data-table-actions--hidden .rt-data-table-actions__container>*,.rt-data-table__row:has(:focus-visible) .rt-data-table-actions--hidden .rt-data-table-actions__container>*{pointer-events:auto}}}\n"], dependencies: [{ kind: "component", type: 
+                // components
+                RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { kind: "component", type: RtDataTableCellComponent, selector: "rt-data-table-cell", inputs: ["row", "column", "iconTemplate"] }, { kind: "component", type: RtDataTableFilterCellComponent, selector: "rt-data-table-filter-cell", inputs: ["appearance", "filterProperty", "filterType", "filterModel", "defaultFilterOperator", "filterOperators", "filterSelectOptions"], outputs: ["filterChange"] }, { kind: "component", type: RtDataTableHeaderCellComponent, selector: "rt-data-table-header-cell", inputs: ["headerModel", "sortModel", "currentSortModel", "column", "iconTemplate"], outputs: ["sortChange"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtRadioButtonComponent, selector: "rt-radio-button", inputs: ["value", "checked", "disabled", "card", "label", "description", "ariaLabel"], outputs: ["clickAction", "checkedChange"] }, { kind: "directive", type: 
+                // directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { 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: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RtDataTableRowClickDirective, selector: "[rtDataTableRowClick]", inputs: ["rtDataTableRowClick", "isTableRowClickable"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-data-table', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // components
+                        RtCheckboxComponent,
+                        RtDataTableCellComponent,
+                        RtDataTableFilterCellComponent,
+                        RtDataTableHeaderCellComponent,
+                        RtMenuComponent,
+                        RtRadioButtonComponent,
+                        // directives
+                        BlockDirective,
+                        ElemDirective,
+                        FormsModule,
+                        ModDirective,
+                        NgTemplateOutlet,
+                        RtDataTableRowClickDirective,
+                    ], host: { class: BEM_BLOCK, '[class.rt-preset-material]': "look() === 'material' && !presetFromHost" }, providers: [{ provide: RT_DATA_TABLE_ROW_HOST, useExisting: forwardRef(() => RtDataTableComponent) }], template: "<ng-container rtBlock=\"rt-data-table\">\n    <table rtElem=\"table\">\n        <thead rtElem=\"head\">\n            <tr>\n                @if (isSelectorsColumnShown()) {\n                    <th rtElem=\"cell\" [rtMod]=\"{ head: true, selectable: true }\">\n                        @if (isMultiSelect()) {\n                            <rt-checkbox\n                                qa-dataid=\"data-table-page-checkbox\"\n                                [ariaLabel]=\"selectPageLabel()\"\n                                [disabled]=\"isSelectorsColumnDisabled()\"\n                                [indeterminate]=\"isPageEntitiesIndeterminate() && !isPageEntitiesSelected()\"\n                                [ngModel]=\"isPageEntitiesSelected()\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                (ngModelChange)=\"onTogglePageEntities($event)\" />\n                        }\n                    </th>\n                }\n\n                @for (column of visibleColumns(); track column.propName) {\n                    <th\n                        rtElem=\"cell\"\n                        qa-dataid=\"data-table-header-cell\"\n                        [attr.aria-sort]=\"ariaSorts()[column.propName]\"\n                        [rtMod]=\"{ head: true, sortable: !!column.sorting }\">\n                        <rt-data-table-header-cell\n                            [headerModel]=\"column.header\"\n                            [sortModel]=\"column.sorting\"\n                            [currentSortModel]=\"currentSortModel()\"\n                            [column]=\"column\"\n                            [iconTemplate]=\"iconTpl()?.template ?? null\"\n                            (sortChange)=\"onSortChange($event)\" />\n                    </th>\n                }\n\n                @if (hasRowActions()) {\n                    <th #headerSpacer rtElem=\"cell\" qa-dataid=\"data-table-actions-header\" [rtMod]=\"{ head: true }\">{{ actionsLabel() }}</th>\n                }\n            </tr>\n\n            @if (isFiltersShown()) {\n                <tr qa-dataid=\"data-table-filter-row\">\n                    @if (isSelectorsColumnShown()) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true, empty: true }\"></th>\n                    }\n\n                    @for (column of visibleColumns(); track column.propName) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true }\">\n                            @if (column.filterType; as filterType) {\n                                <rt-data-table-filter-cell\n                                    [filterProperty]=\"column.propName\"\n                                    [filterType]=\"filterType\"\n                                    [filterModel]=\"filterModel()\"\n                                    [defaultFilterOperator]=\"column.defaultFilterOperator\"\n                                    [filterOperators]=\"column.filterOperators\"\n                                    [filterSelectOptions]=\"column.filterSelectOptions\"\n                                    [appearance]=\"filterAppearance()\"\n                                    (filterChange)=\"onFilterChange($event)\" />\n                            }\n                        </th>\n                    }\n\n                    @if (hasRowActions()) {\n                        <th rtElem=\"cell\" [rtMod]=\"{ head: true, filterable: true }\"></th>\n                    }\n                </tr>\n            }\n        </thead>\n\n        <tbody>\n            @for (row of entities(); track row[keyExp()]; let index = $index) {\n                <tr\n                    rtElem=\"row\"\n                    qa-dataid=\"data-table-row\"\n                    [rtDataTableRowClick]=\"row\"\n                    [isTableRowClickable]=\"isTableRowsClickable()\"\n                    [rtMod]=\"{ clickable: isTableRowsClickable(), active: activeRowIndex() === index }\">\n                    @if (isSelectorsColumnShown()) {\n                        <td rtElem=\"cell\" [rtMod]=\"{ selectable: true }\" [attr.rt-data-table-stop-row-click]=\"''\">\n                            @if (isMultiSelect()) {\n                                <rt-checkbox\n                                    qa-dataid=\"data-table-row-checkbox\"\n                                    [ariaLabel]=\"selectRowLabel()\"\n                                    [disabled]=\"isSelectorsColumnDisabled()\"\n                                    [ngModel]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                    [ngModelOptions]=\"{ standalone: true }\"\n                                    (ngModelChange)=\"onToggleEntity(row, $event)\" />\n                            } @else {\n                                <rt-radio-button\n                                    qa-dataid=\"data-table-row-radio\"\n                                    [value]=\"row[keyExp()]\"\n                                    [ariaLabel]=\"selectRowLabel()\"\n                                    [disabled]=\"isSelectorsColumnDisabled()\"\n                                    [checked]=\"selectedEntitiesIds().includes(row[keyExp()])\"\n                                    (checkedChange)=\"onToggleEntity(row, true)\" />\n                            }\n                        </td>\n                    }\n\n                    @for (column of visibleColumns(); track column.propName) {\n                        <td rtElem=\"cell\" qa-dataid=\"data-table-cell\" [rtMod]=\"{ copyable: !!column.copyable }\">\n                            @if (column.type === columnTypes.CUSTOM) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"customCellsTpl()?.getTemplateByPropName(column.propName) ?? null\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                            } @else {\n                                <rt-data-table-cell [row]=\"row\" [column]=\"column\" [iconTemplate]=\"iconTpl()?.template ?? null\" />\n                            }\n                        </td>\n                    }\n\n                    @if (hasRowActions()) {\n                        <td #rowSpacer rtElem=\"cell\" [rtMod]=\"{ spacer: true }\"></td>\n\n                        <div rtBlock=\"rt-data-table-actions\" [rtMod]=\"{ hidden: activeRowIndex() !== index }\">\n                            <div #rowActions rtElem=\"container\" qa-dataid=\"data-table-actions\">\n                                @if (additionalRowActionsTpl(); as additional) {\n                                    <ng-container [ngTemplateOutlet]=\"additional\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                }\n\n                                @if (rowActionsTpl(); as actions) {\n                                    <rt-menu\n                                        rtElem=\"action\"\n                                        qa-dataid=\"data-table-row-menu\"\n                                        icon=\"ellipsis-v\"\n                                        size=\"sm\"\n                                        [panelClass]=\"menuPanelClass()\"\n                                        [attr.rt-data-table-stop-row-click]=\"''\"\n                                        [ariaLabel]=\"actionsLabel()\"\n                                        (openedChange)=\"onMenuOpenedChange(index, $event)\">\n                                        <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                                    </rt-menu>\n                                }\n                            </div>\n                        </div>\n                    }\n                </tr>\n            }\n        </tbody>\n    </table>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table{--rt-data-table-row-height: var(--rt-control-height-lg);--rt-data-table-head-height: calc(var(--rt-control-height-lg) - var(--rt-space-1));--rt-data-table-border-width: var(--rt-border-width-thin);--rt-data-table-cell-padding: calc(var(--rt-space-2) + var(--rt-space-0-5));--rt-data-table-row-transition-duration: var(--rt-duration-base);--rt-data-table-padding-bottom: var(--rt-list-content-padding-bottom);--rt-data-table-head-color: var(--rt-color-text-primary);--rt-data-table-head-font-weight: var(--rt-font-weight-medium);--rt-data-table-filter-bg: color-mix(in srgb, var(--rt-color-table-head-bg), var(--rt-color-bg-surface) 50%);display:block;overflow:auto;width:100%;height:100%;box-sizing:border-box;padding-bottom:var(--rt-data-table-padding-bottom);scrollbar-color:var(--rt-data-table-scrollbar-color, transparent transparent);scrollbar-width:var(--rt-data-table-scrollbar-width, thin)}.rt-data-table::-webkit-scrollbar{width:var(--rt-data-table-scrollbar-vertical-width, var(--rt-size-3));height:var(--rt-data-table-scrollbar-horizontal-height, var(--rt-size-3))}.rt-data-table:hover,.rt-data-table:focus-within{scrollbar-color:var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent)}@media(hover:none){.rt-data-table{scrollbar-color:var(--rt-data-table-scrollbar-color, var(--rt-color-border-default) transparent)}}.rt-data-table__table{width:100%;border-collapse:collapse}.rt-data-table thead{position:sticky;z-index:var(--rt-z-sticky);top:0}.rt-data-table thead tr:first-child{height:var(--rt-data-table-head-height)}.rt-data-table thead tr:last-child{border-bottom:var(--rt-data-table-border-width) solid var(--rt-color-border-default)}.rt-data-table tbody{font-size:var(--rt-text-sm)}.rt-data-table__row{height:var(--rt-data-table-row-height);border-bottom:var(--rt-data-table-border-width) solid var(--rt-color-border-subtle);color:var(--rt-color-text-primary);transform:translate(0)}.rt-data-table__row:hover{border-bottom-color:var(--rt-color-state-info);transition:border-bottom-color var(--rt-data-table-row-transition-duration)}.rt-data-table__row:hover .rt-data-table-actions{visibility:visible}.rt-data-table__row--active{border-bottom-color:var(--rt-color-state-info)}.rt-data-table__row--clickable{cursor:pointer}.rt-data-table__cell{width:fit-content;height:100%;padding:var(--rt-data-table-cell-padding)}.rt-data-table__cell--head{position:relative;background-color:var(--rt-color-table-head-bg);color:var(--rt-data-table-head-color);font-size:var(--rt-text-md);font-weight:var(--rt-data-table-head-font-weight);line-height:var(--rt-leading-tight);pointer-events:none;text-align:start}.rt-data-table__cell--sortable,.rt-data-table__cell--selectable,.rt-data-table__cell--filterable{pointer-events:auto}.rt-data-table__cell--selectable>rt-checkbox,.rt-data-table__cell--selectable>rt-radio-button{display:flex}.rt-data-table__cell--filterable{padding:var(--rt-space-xs) var(--rt-space-sm);background-color:var(--rt-data-table-filter-bg)}:is(.rt-preset-material,[data-preset=material]) .rt-data-table__cell--filterable{--rt-input-radius: var(--rt-radius-sm)}.rt-data-table__cell--head:not(:last-child,.rt-data-table__cell--selectable,.rt-data-table__cell--empty):after{position:absolute;top:25%;right:0;height:50%;border-right:var(--rt-data-table-border-width) solid var(--rt-list-table-head-divider-color);content:\"\";pointer-events:none}.rt-data-table__cell--spacer{padding:0}.rt-data-table-actions{--rt-data-table-actions-bg: var(--rt-table-actions-bg, var(--rt-color-bg-surface));position:absolute;z-index:var(--rt-z-base);top:0;right:0;display:flex;width:100%;height:100%;align-items:center;justify-content:flex-end;pointer-events:none}.rt-data-table-actions__container{position:sticky;right:0;display:flex;overflow:hidden;width:fit-content;height:calc(100% - var(--rt-data-table-border-width) * 2);align-items:center;justify-content:flex-end;padding:0 var(--rt-space-xs) 0 var(--rt-space-5);background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--rt-data-table-actions-bg) 30%,transparent) 10%,var(--rt-data-table-actions-bg) 20%,var(--rt-data-table-actions-bg) 100%);gap:var(--rt-space-xs);pointer-events:none}.rt-data-table-actions__container>*{pointer-events:auto}.rt-data-table-actions__action{position:sticky}.rt-data-table-actions rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-actions .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-actions .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}@media(hover:hover){.rt-data-table-actions--hidden{opacity:0}.rt-data-table-actions--hidden .rt-data-table-actions__container>*{pointer-events:none}.rt-data-table__row:hover .rt-data-table-actions--hidden,.rt-data-table__row:has(:focus-visible) .rt-data-table-actions--hidden{opacity:1}.rt-data-table__row:hover .rt-data-table-actions--hidden .rt-data-table-actions__container>*,.rt-data-table__row:has(:focus-visible) .rt-data-table-actions--hidden .rt-data-table-actions__container>*{pointer-events:auto}}}\n"] }]
+        }], propDecorators: { rowActionsRef: [{ type: i0.ViewChild, args: ['rowActions', { isSignal: true }] }], headerSpacerRef: [{ type: i0.ViewChild, args: ['headerSpacer', { isSignal: true }] }], rowSpacerRef: [{ type: i0.ViewChild, args: ['rowSpacer', { isSignal: true }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], filterAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterAppearance", required: false }] }], isTableRowsClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableRowsClickable", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: false }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], customCellsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataTableCustomCellsDirective), { isSignal: true }] }], rowActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataTableRowActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], additionalRowActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataTableAdditionalRowActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], iconTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataTableIconDirective), { isSignal: true }] }] } });
+
+/**
+ * Выбор строк таблицы `rt-data-table` — колонка выбора первого кита.
+ *
+ * Директива ведёт отметки и ставит таблице всё, что та рисует: ключи отмеченных, состояние
+ * флажка страницы и признаки колонки выбора. Приложение читает отмеченные записи целиком —
+ * запись, отмеченная на странице, которой уже нет на экране, остаётся отмеченной.
+ */
+class RtDataTableSelectorsDirective {
+    #destroyRef;
+    #injector;
+    #table;
+    #selectedEntities;
+    #isPageEntitiesSelected;
+    #isPageEntitiesIndeterminate;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#injector = inject(Injector);
+        this.#table = inject(RtDataTableComponent);
+        this.#selectedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectedEntities" }] : /* istanbul ignore next */ []));
+        this.#isPageEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isPageEntitiesSelected" }] : /* istanbul ignore next */ []));
+        this.#isPageEntitiesIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
+        this.isMultiSelect = input(true, { ...(ngDevMode ? { debugName: "isMultiSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSelectorColumnShown = input(false, { ...(ngDevMode ? { debugName: "isSelectorColumnShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSelectorsColumnDisabled = input(false, { ...(ngDevMode ? { debugName: "isSelectorsColumnDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Ключи записей, отмеченных заранее; они применяются один раз — к первым пришедшим строкам. */
+        this.selectedEntitiesKeys = input([], { ...(ngDevMode ? { debugName: "selectedEntitiesKeys" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        /** Отмеченные записи целиком. */
+        this.selectedEntities = this.#selectedEntities.asReadonly();
+        this.selectedEntitiesIds = computed(() => dataTableKeysOf(this.selectedEntities(), this.#keyExp()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
+        this.isPageEntitiesSelected = this.#isPageEntitiesSelected.asReadonly();
+        this.isPageEntitiesIndeterminate = this.#isPageEntitiesIndeterminate.asReadonly();
+        this.#table.onToggleEntity = (entity, checked) => this.toggleEntity(entity, checked);
+        this.#table.onTogglePageEntities = (checked) => this.togglePageEntities(checked);
+        /* Отметки ведёт директива, а рисует их таблица: каждое значение переливается в её поле.
+           Обратного хода нет — таблица сама их не меняет. */
+        effect(() => this.#table.selectedEntitiesIds.set(this.selectedEntitiesIds()));
+        effect(() => this.#table.isPageEntitiesSelected.set(this.isPageEntitiesSelected()));
+        effect(() => this.#table.isPageEntitiesIndeterminate.set(this.isPageEntitiesIndeterminate()));
+        effect(() => this.#table.isMultiSelect.set(this.isMultiSelect()));
+        effect(() => this.#table.isSelectorsColumnShown.set(this.isSelectorColumnShown()));
+        effect(() => this.#table.isSelectorsColumnDisabled.set(this.isSelectorsColumnDisabled()));
+        /* Новая страница — новый флажок страницы: он считается по её строкам, а не остаётся от
+           прежней. Отметки читаются без слежки — пересчёт идёт только на смену строк. */
+        effect(() => {
+            this.#table.entities();
+            untracked(() => this.setExistingEntitiesState());
+        });
+    }
+    ngOnInit() {
+        /** Отметки, названные заранее, ставятся один раз: к первым непустым строкам. */
+        toObservable(this.#table.entities, { injector: this.#injector })
+            .pipe(filter((entities) => !!entities.length), take(1), switchMap(() => toObservable(this.selectedEntitiesKeys, { injector: this.#injector }).pipe(filter((keys) => !!keys.length), take(1))), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.#selectedEntities.set(dataTablePresetEntities(this.#table.entities(), this.selectedEntitiesKeys(), this.#keyExp()));
+            this.setExistingEntitiesState();
+        });
+    }
+    /** Отметить или снять все строки показанной страницы; других отметок это не трогает. */
+    togglePageEntities(checked) {
+        const page = this.#table.entities();
+        this.#isPageEntitiesSelected.set(checked);
+        this.#selectedEntities.update((selected) => checked
+            ? dataTableWithPageEntities(selected, page, this.#keyExp())
+            : dataTableWithoutPageEntities(selected, page, this.#keyExp()));
+        this.#isPageEntitiesIndeterminate.set(dataTableAnyOnPage(page, this.selectedEntitiesIds(), this.#keyExp()));
+    }
+    /** Отметить или снять одну запись; при выборе по одной прежняя отметка уходит. */
+    toggleEntity(entity, checked) {
+        if (!this.isMultiSelect()) {
+            this.#selectedEntities.set([entity]);
+            return;
+        }
+        this.#selectedEntities.update((selected) => dataTableWithEntity(selected, entity, checked, this.#keyExp()));
+        const page = this.#table.entities();
+        const keys = this.selectedEntitiesIds();
+        if (keys.length) {
+            this.#isPageEntitiesSelected.set(dataTableAllOnPage(page, keys, this.#keyExp()));
+            this.#isPageEntitiesIndeterminate.set(true);
+        }
+        else {
+            this.#isPageEntitiesSelected.set(false);
+            this.#isPageEntitiesIndeterminate.set(dataTableAnyOnPage(page, keys, this.#keyExp()));
+        }
+    }
+    /** Снять все отметки. */
+    clearSelectedList() {
+        this.#selectedEntities.set([]);
+        this.#isPageEntitiesSelected.set(false);
+        this.#isPageEntitiesIndeterminate.set(false);
+    }
+    /**
+     * Пересчитать флажок страницы по показанным строкам: отмечен, когда отмечены все строки
+     * страницы, промежуточен, когда отмечена часть. Отметки других страниц здесь не в счёт.
+     */
+    setExistingEntitiesState() {
+        const page = this.#table.entities();
+        const keys = this.selectedEntitiesIds();
+        const all = !!page.length && dataTableAllOnPage(page, keys, this.#keyExp());
+        this.#isPageEntitiesSelected.set(all);
+        this.#isPageEntitiesIndeterminate.set(!all && dataTableAnyOnPage(page, keys, this.#keyExp()));
+    }
+    #keyExp() {
+        return this.#table.keyExp();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtDataTableSelectorsDirective, isStandalone: true, selector: "rt-data-table[rtDataTableSelectors]", inputs: { isMultiSelect: { classPropertyName: "isMultiSelect", publicName: "isMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, isSelectorColumnShown: { classPropertyName: "isSelectorColumnShown", publicName: "isSelectorColumnShown", isSignal: true, isRequired: false, transformFunction: null }, isSelectorsColumnDisabled: { classPropertyName: "isSelectorsColumnDisabled", publicName: "isSelectorsColumnDisabled", isSignal: true, isRequired: false, transformFunction: null }, selectedEntitiesKeys: { classPropertyName: "selectedEntitiesKeys", publicName: "selectedEntitiesKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableSelectorsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'rt-data-table[rtDataTableSelectors]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { isMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiSelect", required: false }] }], isSelectorColumnShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorColumnShown", required: false }] }], isSelectorsColumnDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectorsColumnDisabled", required: false }] }], selectedEntitiesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedEntitiesKeys", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DATA_TABLE_FILTER_MENU_OPERATORS, DATA_TABLE_FILTER_OPERATOR_GLYPHS, RT_DATA_TABLE_ROW_HOST, RT_DATA_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RtDataTableAdditionalRowActionsDirective, RtDataTableCellComponent, RtDataTableComponent, RtDataTableConfigService, RtDataTableCustomCellsDirective, RtDataTableFilterCellComponent, RtDataTableHeaderCellComponent, RtDataTableIconDirective, RtDataTableRowActionsDirective, RtDataTableRowClickDirective, RtDataTableSelectorsDirective, RtDataTableStopRowClickDirective, comparePropNames, dataTableAllOnPage, dataTableAnyOnPage, dataTableAriaSort, dataTableCellText, dataTableCellValue, dataTableColumnFilter, dataTableCopyButtonSide, dataTableDayToIso, dataTableDefaultOperator, dataTableFiltersWithOperator, dataTableFiltersWithValue, dataTableIconName, dataTableIsoToDay, dataTableKeysOf, dataTableNextSortOrder, dataTablePresetEntities, dataTableSortActive, dataTableWithEntity, dataTableWithPageEntities, dataTableWithoutPageEntities };
+//# sourceMappingURL=rt-tools-ui-kit-v2-data-table.mjs.map