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

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

@@ -0,0 +1,894 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, DestroyRef, computed, signal, input, booleanAttribute, output, contentChild, TemplateRef, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, afterNextRender, viewChild, Injector } from '@angular/core';
+import { NgTemplateOutlet, TitleCasePipe, DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { timer, Subject } from 'rxjs';
+import { tap, debounce, map, filter, exhaustMap, take, switchMap } from 'rxjs/operators';
+import { BlockDirective, ElemDirective, ModDirective, BreakStringPipe } from '@rt-tools/core';
+import { rtKitLabel, RT_PRESET_MATERIAL_CLASS, rtKitDefault, RT_DATA_TABLE_PRESET_FROM_HOST } from '@rt-tools/ui-kit-v2/core';
+import { RtCheckboxComponent } from '@rt-tools/ui-kit-v2/checkbox';
+import { dataTableIconName, dataTableWithPageEntities, dataTableWithEntity, dataTableWithoutPageEntities, RtDataTableConfigService, RtDataTableIconDirective, RtDataTableComponent, RtDataTableAdditionalRowActionsDirective, RtDataTableCustomCellsDirective, RtDataTableRowActionsDirective, dataTableKeysOf, dataTablePresetEntities, dataTableAnyOnPage, dataTableAllOnPage } from '@rt-tools/ui-kit-v2/data-table';
+import { RtIconButtonComponent } from '@rt-tools/ui-kit-v2/icon-button';
+import { RtInputComponent } from '@rt-tools/ui-kit-v2/input';
+import { RtToolbarComponent, RtToolbarLeftDirective, RtToolbarRightDirective } from '@rt-tools/ui-kit-v2/toolbar';
+import { CdkDrag, CdkDragHandle, CdkDropList } from '@angular/cdk/drag-drop';
+import { RtAsideRef, RT_ASIDE_DATA, RtAsideComponent, RtAsideFooterComponent, RtAsideHeaderComponent, RtAsideService } from '@rt-tools/ui-kit-v2/aside';
+import { RtButtonDirective } from '@rt-tools/ui-kit-v2/button';
+import { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';
+import { RtToggleSwitchComponent } from '@rt-tools/ui-kit-v2/toggle-switch';
+import { transformArrayInput } from '@rt-tools/utils';
+import { RtEmptyStateComponent } from '@rt-tools/ui-kit-v2/empty-state';
+import { RtSpinnerComponent } from '@rt-tools/ui-kit-v2/spinner';
+import { RtPaginationComponent } from '@rt-tools/ui-kit-v2/pagination';
+
+/** Селекторы приложения в панели действий: они стоят рядом с «отметить все». */
+class RtDataListToolbarSelectorsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListToolbarSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataListToolbarSelectorsDirective, isStandalone: true, selector: "[rtDataListToolbarSelectors]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListToolbarSelectorsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataListToolbarSelectors]',
+                }]
+        }] });
+/** Действия приложения в панели: они стоят перед кнопками кита и отделены от них чертой. */
+class RtDataListToolbarActionsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListToolbarActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataListToolbarActionsDirective, isStandalone: true, selector: "[rtDataListToolbarActions]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListToolbarActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataListToolbarActions]',
+                }]
+        }] });
+
+const BEM_BLOCK$2 = 'rt-data-list-toolbar';
+/** Набранное уходит приложению через эту задержку; очистка поля уходит сразу. */
+const SEARCH_DELAY_MS = 500;
+/** Значок кнопки — по имени первого кита: перечень соответствий кита даёт ему рисунок. */
+function iconOf(glyph, fallback) {
+    return dataTableIconName(glyph) ?? fallback;
+}
+/**
+ * Панель действий списка `rt-data-list` — панель первого кита без Material.
+ *
+ * Слева — «отметить все» либо счётчик отмеченных и селекторы приложения, справа — действия
+ * приложения, снятие отбора, обновление, настройка колонок и поиск. Своего состояния панель не
+ * ведёт: обо всём, кроме набранного в поиске, она просит приложение.
+ */
+class RtDataListToolbarComponent {
+    #destroyRef;
+    /**
+     * Последнее, что знают и приложение, и поле: отправленное приложению или поставленное им самим.
+     * Одно и то же дважды не спрашивается, а поставленное приложением не возвращается ему эхом.
+     */
+    #lastSearch;
+    /** Набранное в поиске: поле — не сигнал, и без этой записи пересчёта по нему не будет. */
+    #searchText;
+    /** В поле уже набирали — тогда на заглушке оно остаётся видимым и пустым. */
+    #isSearchTouched;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        /**
+         * Последнее, что знают и приложение, и поле: отправленное приложению или поставленное им самим.
+         * Одно и то же дважды не спрашивается, а поставленное приложением не возвращается ему эхом.
+         */
+        this.#lastSearch = '';
+        this.clearFiltersLabel = rtKitLabel('dataListClearFilters');
+        this.refreshLabel = rtKitLabel('dataListRefresh');
+        this.tableConfigLabel = rtKitLabel('dataListTableConfig');
+        this.searchPlaceholder = rtKitLabel('dataListSearchPlaceholder');
+        this.selectAllLabel = rtKitLabel('dataListSelectAll');
+        this.selectedLabel = rtKitLabel('dataListSelected', computed(() => ({ count: this.selectedEntitiesCount() })));
+        this.clearFiltersIcon = iconOf('block', 'ban');
+        this.refreshIcon = iconOf('sync', 'sync');
+        this.tableConfigIcon = iconOf('view_column', 'table');
+        this.searchIcon = iconOf('search', 'search');
+        /** Набранное в поиске: поле — не сигнал, и без этой записи пересчёта по нему не будет. */
+        this.#searchText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#searchText" }] : /* istanbul ignore next */ []));
+        /** В поле уже набирали — тогда на заглушке оно остаётся видимым и пустым. */
+        this.#isSearchTouched = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isSearchTouched" }] : /* istanbul ignore next */ []));
+        /**
+         * Поле поиска видно, пока есть строки, а на заглушке — только когда поиск был: в поле что-то
+         * набирали или приложение само поставило непустой поиск, не нашедший строк.
+         */
+        this.isSearchShown = computed(() => !this.isPlaceholderShown() || !!this.#searchText() || this.#isSearchTouched() || !!this.searchTerm()?.trim(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSearchShown" }] : /* istanbul ignore next */ []));
+        this.hasSelectors = computed(() => this.isMultiSelect() || !!this.toolbarSelectorsTpl(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSelectors" }] : /* istanbul ignore next */ []));
+        /** Вид поля поиска: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. */
+        this.searchAppearance = input('outline', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchAppearance" }] : /* istanbul ignore next */ []));
+        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Условий отбора нет — снимать нечего, и кнопка недоступна. */
+        this.isFiltersEmpty = input(true, { ...(ngDevMode ? { debugName: "isFiltersEmpty" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isPlaceholderShown = input(false, { ...(ngDevMode ? { debugName: "isPlaceholderShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Контурные значки кнопок полосы — очистки отбора, обновления и настройки колонок, как у первого кита. */
+        this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Поиск приложения: поле следует за ним при каждой смене, а не только при первом рисовании. */
+        this.searchTerm = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        this.searchChange = output();
+        this.refreshAction = output();
+        this.clearFiltersAction = output();
+        this.openConfigAction = output();
+        this.toolbarSelectorsTpl = contentChild(RtDataListToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.toolbarActionsTpl = contentChild(RtDataListToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /** Состояние выбора; его ставит директива выбора списка. */
+        this.isMultiSelect = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMultiSelect" }] : /* istanbul ignore next */ []));
+        this.isSelectAllSelectorShown = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectAllSelectorShown" }] : /* istanbul ignore next */ []));
+        this.isSelectAllSelectorDisabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectAllSelectorDisabled" }] : /* istanbul ignore next */ []));
+        this.isAllEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAllEntitiesSelected" }] : /* istanbul ignore next */ []));
+        this.isAllEntitiesIndeterminate = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isAllEntitiesIndeterminate" }] : /* istanbul ignore next */ []));
+        this.selectedEntitiesCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesCount" }] : /* istanbul ignore next */ []));
+        this.searchControl = new FormControl(null);
+        /** Отметить все записи; метод ставит директива выбора списка. */
+        this.onToggleAllEntities = () => undefined;
+        /* Поиск приложения ставится в поле, только когда он отличается от последнего, что панель
+           отправила или поставила сама. Эхо отправленного — даже запоздалое, когда человек уже
+           дописал дальше, — поле не трогает: иначе оно стирало бы набранное и сбивало каретку. */
+        effect(() => {
+            const term = this.searchTerm() ?? '';
+            untracked(() => {
+                if (term.trim() === this.#lastSearch) {
+                    return;
+                }
+                this.#lastSearch = term.trim();
+                this.searchControl.setValue(term, { emitEvent: false });
+                this.#searchText.set(term);
+            });
+        });
+        /* Набранное уходит приложению, когда человек перестал печатать; пустое — сразу, иначе
+           очистка поля ждала бы полсекунды. Одно и то же дважды не спрашивается. */
+        this.searchControl.valueChanges
+            .pipe(tap((value) => {
+            this.#searchText.set(value ?? '');
+            this.#isSearchTouched.set(true);
+        }), debounce((value) => timer(value ? SEARCH_DELAY_MS : 0)), map((value) => (value ?? '').trim()), 
+        // Набранное, которое приложение успело заменить своим поиском, уже не в поле.
+        filter((value) => value === (this.searchControl.value ?? '').trim()), filter((value) => value !== this.#lastSearch), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((value) => {
+            this.#lastSearch = value;
+            this.searchChange.emit(value);
+        });
+    }
+    onRefresh() {
+        this.refreshAction.emit();
+    }
+    onClearFilters() {
+        this.clearFiltersAction.emit();
+    }
+    onOpenConfig() {
+        this.openConfigAction.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataListToolbarComponent, isStandalone: true, selector: "rt-data-list-toolbar", inputs: { searchAppearance: { classPropertyName: "searchAppearance", publicName: "searchAppearance", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null }, isFiltersEmpty: { classPropertyName: "isFiltersEmpty", publicName: "isFiltersEmpty", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isPlaceholderShown: { classPropertyName: "isPlaceholderShown", publicName: "isPlaceholderShown", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange", refreshAction: "refreshAction", clearFiltersAction: "clearFiltersAction", openConfigAction: "openConfigAction" }, host: { classAttribute: "rt-data-list-toolbar" }, queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtDataListToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtDataListToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ng-container rtBlock=\"rt-data-list-toolbar\">\n    <rt-toolbar>\n        @if (hasSelectors() && !isPlaceholderShown()) {\n            <ng-container *rtToolbarLeft>\n                <div rtElem=\"selectors\">\n                    @if (isMultiSelect()) {\n                        @if (isSelectAllSelectorShown()) {\n                            <rt-checkbox\n                                qa-dataid=\"data-list-select-all\"\n                                [ariaLabel]=\"selectAllLabel()\"\n                                [disabled]=\"isSelectAllSelectorDisabled()\"\n                                [indeterminate]=\"isAllEntitiesIndeterminate() && !isAllEntitiesSelected()\"\n                                [ngModel]=\"isAllEntitiesSelected()\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                (ngModelChange)=\"onToggleAllEntities($event)\">\n                                {{ selectAllLabel() }}\n                            </rt-checkbox>\n                        } @else {\n                            <span rtElem=\"counter\" qa-dataid=\"data-list-selected-count\">{{ selectedLabel() }}</span>\n                        }\n                    }\n\n                    @if (toolbarSelectorsTpl(); as selectors) {\n                        <ng-container [ngTemplateOutlet]=\"selectors\" />\n                    }\n                </div>\n            </ng-container>\n        }\n\n        <ng-container *rtToolbarRight>\n            <div rtElem=\"right\">\n                <div rtElem=\"actions\">\n                    @if (toolbarActionsTpl(); as actions) {\n                        <ng-container [ngTemplateOutlet]=\"actions\" />\n\n                        <span rtElem=\"divider\"></span>\n                    }\n\n                    @if (isFiltersShown()) {\n                        <rt-icon-button\n                            qa-dataid=\"data-list-clear-filters\"\n                            variant=\"ghost\"\n                            [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n                            [icon]=\"clearFiltersIcon\"\n                            [ariaLabel]=\"clearFiltersLabel()\"\n                            [tooltip]=\"clearFiltersLabel()\"\n                            [disabled]=\"isFiltersEmpty()\"\n                            (clicked)=\"onClearFilters()\" />\n                    }\n\n                    @if (isRefreshButtonShown()) {\n                        <rt-icon-button\n                            qa-dataid=\"data-list-refresh\"\n                            variant=\"ghost\"\n                            [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n                            [icon]=\"refreshIcon\"\n                            [ariaLabel]=\"refreshLabel()\"\n                            [tooltip]=\"refreshLabel()\"\n                            (clicked)=\"onRefresh()\" />\n                    }\n\n                    @if (isTableConfigButtonShown()) {\n                        <rt-icon-button\n                            qa-dataid=\"data-list-table-config\"\n                            variant=\"ghost\"\n                            [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n                            [icon]=\"tableConfigIcon\"\n                            [ariaLabel]=\"tableConfigLabel()\"\n                            [tooltip]=\"tableConfigLabel()\"\n                            (clicked)=\"onOpenConfig()\" />\n                    }\n                </div>\n\n                @if (isSearchShown()) {\n                    <div rtElem=\"search\">\n                        <rt-input\n                            qa-dataid=\"data-list-search\"\n                            size=\"sm\"\n                            [appearance]=\"searchAppearance()\"\n                            [iconLeft]=\"searchIcon\"\n                            [placeholder]=\"searchPlaceholder()\"\n                            [ariaLabel]=\"searchPlaceholder()\"\n                            [formControl]=\"searchControl\" />\n                    </div>\n                }\n            </div>\n        </ng-container>\n    </rt-toolbar>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-toolbar{--rt-data-list-toolbar-divider-width: var(--rt-border-width-thin);display:block;width:100%;margin-bottom:var(--rt-list-toolbar-gap)}.rt-data-list-toolbar .rt-toolbar{--rt-toolbar-padding-top: var(--rt-list-toolbar-padding-top);--rt-toolbar-padding-bottom: var(--rt-list-toolbar-padding-bottom)}.rt-data-list-toolbar__selectors{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-toolbar__selectors .rt-checkbox{--rt-checkbox-color-label: var(--rt-list-selector-label-color)}.rt-data-list-toolbar__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-data-list-toolbar__right{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:var(--rt-space-md)}.rt-data-list-toolbar__actions{display:flex;align-items:center;gap:var(--rt-list-action-gap)}.rt-data-list-toolbar__actions rt-icon-button{--rt-icon-button-color: var(--rt-list-action-color)}.rt-data-list-toolbar__actions .rt-icon-button{--rt-icon-button-radius: var(--rt-list-action-radius);--rt-icon-button-shadow: var(--rt-list-action-shadow);--rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);--rt-icon-button-color-hover: var(--rt-list-action-color-hover);--rt-icon-button-color-bg-hover: var(--rt-list-action-color-bg-hover)}.rt-data-list-toolbar__actions .rt-icon-button__icon{min-width:var(--rt-list-action-icon-size);min-height:var(--rt-list-action-icon-size)}.rt-data-list-toolbar__divider{height:var(--rt-list-action-divider-height);border-left:var(--rt-data-list-toolbar-divider-width) solid var(--rt-color-border-subtle)}.rt-data-list-toolbar .rt-toolbar__bar--right{flex-grow:1}.rt-data-list-toolbar__search{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-radius: var(--rt-list-search-radius);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-padding-x: var(--rt-list-search-padding-x);--rt-input-gap: var(--rt-list-search-gap);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-icon-size: var(--rt-list-search-icon-size);--rt-input-icon-color: var(--rt-list-search-icon-color);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);min-width:0;flex:0 1 var(--rt-list-search-width);contain:inline-size}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-toolbar__search .rt-input{--rt-input-fill-radius: var(--rt-list-search-radius)}@media(width<=1080px){.rt-data-list-toolbar__right{flex-wrap:wrap}.rt-data-list-toolbar__search{flex-basis:100%}}}\n"], dependencies: [{ kind: "component", type: 
+                // components
+                RtCheckboxComponent, selector: "rt-checkbox", inputs: ["inputId", "ariaLabel", "disabled", "indeterminate"] }, { 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: RtToolbarComponent, selector: "rt-toolbar", inputs: ["dense"] }, { 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RtToolbarLeftDirective, selector: "[rtToolbarLeft]" }, { kind: "directive", type: RtToolbarRightDirective, selector: "[rtToolbarRight]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-data-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // components
+                        RtCheckboxComponent,
+                        RtIconButtonComponent,
+                        RtInputComponent,
+                        RtToolbarComponent,
+                        // directives
+                        BlockDirective,
+                        ElemDirective,
+                        FormsModule,
+                        ModDirective,
+                        NgTemplateOutlet,
+                        ReactiveFormsModule,
+                        RtToolbarLeftDirective,
+                        RtToolbarRightDirective,
+                    ], host: { class: BEM_BLOCK$2 }, template: "<ng-container rtBlock=\"rt-data-list-toolbar\">\n    <rt-toolbar>\n        @if (hasSelectors() && !isPlaceholderShown()) {\n            <ng-container *rtToolbarLeft>\n                <div rtElem=\"selectors\">\n                    @if (isMultiSelect()) {\n                        @if (isSelectAllSelectorShown()) {\n                            <rt-checkbox\n                                qa-dataid=\"data-list-select-all\"\n                                [ariaLabel]=\"selectAllLabel()\"\n                                [disabled]=\"isSelectAllSelectorDisabled()\"\n                                [indeterminate]=\"isAllEntitiesIndeterminate() && !isAllEntitiesSelected()\"\n                                [ngModel]=\"isAllEntitiesSelected()\"\n                                [ngModelOptions]=\"{ standalone: true }\"\n                                (ngModelChange)=\"onToggleAllEntities($event)\">\n                                {{ selectAllLabel() }}\n                            </rt-checkbox>\n                        } @else {\n                            <span rtElem=\"counter\" qa-dataid=\"data-list-selected-count\">{{ selectedLabel() }}</span>\n                        }\n                    }\n\n                    @if (toolbarSelectorsTpl(); as selectors) {\n                        <ng-container [ngTemplateOutlet]=\"selectors\" />\n                    }\n                </div>\n            </ng-container>\n        }\n\n        <ng-container *rtToolbarRight>\n            <div rtElem=\"right\">\n                <div rtElem=\"actions\">\n                    @if (toolbarActionsTpl(); as actions) {\n                        <ng-container [ngTemplateOutlet]=\"actions\" />\n\n                        <span rtElem=\"divider\"></span>\n                    }\n\n                    @if (isFiltersShown()) {\n                        <rt-icon-button\n                            qa-dataid=\"data-list-clear-filters\"\n                            variant=\"ghost\"\n                            [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n                            [icon]=\"clearFiltersIcon\"\n                            [ariaLabel]=\"clearFiltersLabel()\"\n                            [tooltip]=\"clearFiltersLabel()\"\n                            [disabled]=\"isFiltersEmpty()\"\n                            (clicked)=\"onClearFilters()\" />\n                    }\n\n                    @if (isRefreshButtonShown()) {\n                        <rt-icon-button\n                            qa-dataid=\"data-list-refresh\"\n                            variant=\"ghost\"\n                            [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n                            [icon]=\"refreshIcon\"\n                            [ariaLabel]=\"refreshLabel()\"\n                            [tooltip]=\"refreshLabel()\"\n                            (clicked)=\"onRefresh()\" />\n                    }\n\n                    @if (isTableConfigButtonShown()) {\n                        <rt-icon-button\n                            qa-dataid=\"data-list-table-config\"\n                            variant=\"ghost\"\n                            [iconFill]=\"!isToolbarActionsIconsOutlined()\"\n                            [icon]=\"tableConfigIcon\"\n                            [ariaLabel]=\"tableConfigLabel()\"\n                            [tooltip]=\"tableConfigLabel()\"\n                            (clicked)=\"onOpenConfig()\" />\n                    }\n                </div>\n\n                @if (isSearchShown()) {\n                    <div rtElem=\"search\">\n                        <rt-input\n                            qa-dataid=\"data-list-search\"\n                            size=\"sm\"\n                            [appearance]=\"searchAppearance()\"\n                            [iconLeft]=\"searchIcon\"\n                            [placeholder]=\"searchPlaceholder()\"\n                            [ariaLabel]=\"searchPlaceholder()\"\n                            [formControl]=\"searchControl\" />\n                    </div>\n                }\n            </div>\n        </ng-container>\n    </rt-toolbar>\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-toolbar{--rt-data-list-toolbar-divider-width: var(--rt-border-width-thin);display:block;width:100%;margin-bottom:var(--rt-list-toolbar-gap)}.rt-data-list-toolbar .rt-toolbar{--rt-toolbar-padding-top: var(--rt-list-toolbar-padding-top);--rt-toolbar-padding-bottom: var(--rt-list-toolbar-padding-bottom)}.rt-data-list-toolbar__selectors{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-toolbar__selectors .rt-checkbox{--rt-checkbox-color-label: var(--rt-list-selector-label-color)}.rt-data-list-toolbar__counter{color:var(--rt-color-text-muted);font-size:var(--rt-text-sm)}.rt-data-list-toolbar__right{display:flex;width:100%;align-items:center;justify-content:flex-end;gap:var(--rt-space-md)}.rt-data-list-toolbar__actions{display:flex;align-items:center;gap:var(--rt-list-action-gap)}.rt-data-list-toolbar__actions rt-icon-button{--rt-icon-button-color: var(--rt-list-action-color)}.rt-data-list-toolbar__actions .rt-icon-button{--rt-icon-button-radius: var(--rt-list-action-radius);--rt-icon-button-shadow: var(--rt-list-action-shadow);--rt-icon-button-shadow-hover: var(--rt-list-action-shadow-hover);--rt-icon-button-color-hover: var(--rt-list-action-color-hover);--rt-icon-button-color-bg-hover: var(--rt-list-action-color-bg-hover)}.rt-data-list-toolbar__actions .rt-icon-button__icon{min-width:var(--rt-list-action-icon-size);min-height:var(--rt-list-action-icon-size)}.rt-data-list-toolbar__divider{height:var(--rt-list-action-divider-height);border-left:var(--rt-data-list-toolbar-divider-width) solid var(--rt-color-border-subtle)}.rt-data-list-toolbar .rt-toolbar__bar--right{flex-grow:1}.rt-data-list-toolbar__search{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-radius: var(--rt-list-search-radius);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-padding-x: var(--rt-list-search-padding-x);--rt-input-gap: var(--rt-list-search-gap);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-icon-size: var(--rt-list-search-icon-size);--rt-input-icon-color: var(--rt-list-search-icon-color);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);min-width:0;flex:0 1 var(--rt-list-search-width);contain:inline-size}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-toolbar__search .rt-input{--rt-input-fill-radius: var(--rt-list-search-radius)}@media(width<=1080px){.rt-data-list-toolbar__right{flex-wrap:wrap}.rt-data-list-toolbar__search{flex-basis:100%}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAppearance", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], isFiltersEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersEmpty", required: false }] }], isRefreshButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRefreshButtonShown", required: false }] }], isTableConfigButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableConfigButtonShown", required: false }] }], isPlaceholderShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPlaceholderShown", required: false }] }], isToolbarActionsIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToolbarActionsIconsOutlined", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refreshAction: [{ type: i0.Output, args: ["refreshAction"] }], clearFiltersAction: [{ type: i0.Output, args: ["clearFiltersAction"] }], openConfigAction: [{ type: i0.Output, args: ["openConfigAction"] }], toolbarSelectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataListToolbarSelectorsDirective), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }], toolbarActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataListToolbarActionsDirective), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }] } });
+
+/** Размеры страницы, которые предлагает первый кит. */
+const DATA_LIST_PAGE_SIZES = [10, 20, 40, 50];
+/** Страниц всего при этом размере страницы. */
+function dataListPageCount(totalCount, pageSize) {
+    return pageSize > 0 ? Math.ceil(totalCount / pageSize) : 0;
+}
+/**
+ * Предлагаемые размеры страницы: размер годится, пока его половина не больше числа записей.
+ * Нынешний размер предлагается всегда — иначе список показывал бы размер, которого нет в списке.
+ */
+function dataListPageSizes(page) {
+    return DATA_LIST_PAGE_SIZES.filter((size) => size / 2 <= page.totalCount || size === page.pageSize);
+}
+/**
+ * Новая страница при смене размера: человек остаётся на том же расстоянии от конца списка —
+ * приём первого кита.
+ */
+function dataListPageAfterSizeChange(page, pageSize) {
+    const nextTotal = dataListPageCount(page.totalCount, pageSize);
+    const previousTotal = dataListPageCount(page.totalCount, page.pageSize);
+    const correction = Math.floor(((previousTotal - page.pageNumber) * page.pageSize) / pageSize);
+    return { pageNumber: nextTotal - correction, pageSize };
+}
+
+const breakString = new BreakStringPipe();
+const titleCase = new TitleCasePipe();
+/**
+ * Колонки — в пункты готового редактора списка колонок кита. Подпись берётся так же, как её
+ * берёт первый кит: имя для настроек, а без него — имя свойства, разбитое по словам и с
+ * заглавных: `userIcon` → «User Icon».
+ */
+function dataListSettingItems(columns) {
+    return columns.map((column) => {
+        const propName = String(column.propName);
+        const isNamed = !!column.displayName?.length && column.displayName !== propName;
+        return {
+            key: propName,
+            label: isNamed ? String(column.displayName) : titleCase.transform(breakString.transform(propName)),
+            hidden: !!column.hidden,
+        };
+    });
+}
+/** Обратно: порядок и видимость из пунктов редактора — в описания колонок. */
+function dataListColumnsFromItems(columns, items) {
+    const byKey = new Map(columns.map((column) => [String(column.propName), column]));
+    return items.flatMap((item, index) => {
+        const column = byKey.get(item.key);
+        return column ? [{ ...column, hidden: item.hidden, orderIndex: index }] : [];
+    });
+}
+/** Слепок настройки: порядок колонок, их видимость и два признака полос прокрутки. */
+function dataListSettingsShape(config) {
+    return JSON.stringify([
+        config.isVerticalScrollbarShown,
+        config.isHorizontalScrollbarShown,
+        config.columns.map((column) => [String(column.propName), !!column.hidden]),
+    ]);
+}
+/** В панели что-то изменилось: порядок колонок, их видимость или признаки полос прокрутки. */
+function dataListSettingsChanged(saved, current) {
+    return dataListSettingsShape(saved) !== dataListSettingsShape(current);
+}
+/**
+ * Колонка перетащена на новое место — новый порядок пунктов. Индексы — по всему списку, как их
+ * отдаёт перетаскивание; место, совпавшее со старым, возвращает тот же список.
+ */
+function dataListMoveItem(items, from, to) {
+    if (from === to || !items[from]) {
+        return items;
+    }
+    const next = [...items];
+    const moved = next.splice(from, 1)[0];
+    next.splice(Math.min(Math.max(to, 0), next.length), 0, moved);
+    return next;
+}
+/** Видимость колонки переключена кнопкой-глазом. Закреплённую колонку кнопка не трогает. */
+function dataListToggleHidden(items, key) {
+    return items.map((item) => item.key === key && item.locked !== true ? { ...item, hidden: !item.hidden } : item);
+}
+
+const BEM_BLOCK$1 = 'rt-data-list-settings-aside';
+/**
+ * Панель настройки колонок списка `rt-data-list` — панель первого кита без Material.
+ *
+ * Панель поднимает служба боковых панелей кита; настройку она получает её же данными и отдаёт
+ * обратно закрытием. Сам список колонок рисует готовый редактор кита — перетаскивание и глаз у
+ * него уже есть. Сохранение недоступно, пока в панели ничего не изменилось; отмена не меняет
+ * ничего.
+ */
+class RtDataListSettingsAsideComponent {
+    #host;
+    #asideRef;
+    /** Настройка, с которой панель открыли: с ней же сверяется, изменилось ли что-нибудь. */
+    #saved;
+    constructor() {
+        this.#host = inject(ElementRef);
+        this.#asideRef = inject(RtAsideRef);
+        /** Настройка, с которой панель открыли: с ней же сверяется, изменилось ли что-нибудь. */
+        this.#saved = inject(RT_ASIDE_DATA);
+        this.title = rtKitLabel('dataListSettingsTitle');
+        this.hint = rtKitLabel('dataListSettingsHint');
+        this.verticalLabel = rtKitLabel('dataListVerticalScrollbar');
+        this.horizontalLabel = rtKitLabel('dataListHorizontalScrollbar');
+        this.saveLabel = rtKitLabel('uiSave');
+        this.cancelLabel = rtKitLabel('uiDiscardChanges');
+        this.dragLabel = rtKitLabel('uiDragColumn');
+        this.showColumnLabel = rtKitLabel('uiShowColumn');
+        this.hideColumnLabel = rtKitLabel('uiHideColumn');
+        this.showLabel = rtKitLabel('uiShow');
+        this.hideLabel = rtKitLabel('uiHide');
+        this.items = signal(dataListSettingItems(this.#saved.columns), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.isVerticalScrollbarShown = signal(this.#saved.isVerticalScrollbarShown, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVerticalScrollbarShown" }] : /* istanbul ignore next */ []));
+        this.isHorizontalScrollbarShown = signal(this.#saved.isHorizontalScrollbarShown, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isHorizontalScrollbarShown" }] : /* istanbul ignore next */ []));
+        this.config = computed(() => ({
+            isVerticalScrollbarShown: this.isVerticalScrollbarShown(),
+            isHorizontalScrollbarShown: this.isHorizontalScrollbarShown(),
+            columns: dataListColumnsFromItems(this.#saved.columns, this.items()),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+        /**
+         * Класс тянутой плашки. Её наложение переносит в конец страницы, вне панели, и вид первого
+         * кита, который панель получила классом набора на наложении, туда не доходит: плашка несёт
+         * класс на себе. Предок с классом известен только после первой отрисовки.
+         */
+        this.dragPreviewClass = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragPreviewClass" }] : /* istanbul ignore next */ []));
+        this.isChanged = computed(() => dataListSettingsChanged(this.#saved, this.config()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChanged" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            if (this.#host.nativeElement.closest(`.${RT_PRESET_MATERIAL_CLASS}`) !== null) {
+                this.dragPreviewClass.set(RT_PRESET_MATERIAL_CLASS);
+            }
+        });
+    }
+    onDrop(event) {
+        this.items.set(dataListMoveItem(this.items(), event.previousIndex, event.currentIndex));
+    }
+    onToggleHidden(key) {
+        this.items.set(dataListToggleHidden(this.items(), key));
+    }
+    onSave() {
+        this.#asideRef.close(this.config());
+    }
+    onCancel() {
+        this.#asideRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListSettingsAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataListSettingsAsideComponent, isStandalone: true, selector: "rt-data-list-settings-aside", host: { classAttribute: "rt-data-list-settings-aside" }, ngImport: i0, template: "<rt-aside size=\"md\" [ariaLabel]=\"title()\">\n    <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0441\u0442\u043E\u0438\u0442 \u0432 \u0448\u0430\u043F\u043A\u0435 \u043F\u043E\u0434 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u043E\u043C, \u043A\u0430\u043A \u0443 \u043F\u0430\u043D\u0435\u043B\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <rt-aside-header [title]=\"title()\" [subtitle]=\"hint()\" />\n\n    <ng-container rtBlock=\"rt-data-list-settings-aside\">\n        <div rtElem=\"switches\">\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-vertical\"\n                    [ariaLabel]=\"verticalLabel()\"\n                    [ngModel]=\"isVerticalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isVerticalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-vertical-label\" [rtMod]=\"{ on: isVerticalScrollbarShown() }\">\n                    {{ verticalLabel() }}\n                </span>\n            </div>\n\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-horizontal\"\n                    [ariaLabel]=\"horizontalLabel()\"\n                    [ngModel]=\"isHorizontalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isHorizontalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-horizontal-label\" [rtMod]=\"{ on: isHorizontalScrollbarShown() }\">\n                    {{ horizontalLabel() }}\n                </span>\n            </div>\n        </div>\n\n        <!-- \u041A\u043E\u043B\u043E\u043D\u043A\u0438 \u2014 \u043F\u043B\u0430\u0448\u043A\u0430\u043C\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u0440\u0443\u0447\u043A\u0430 \u2725 \u0438 \u0447\u0435\u0440\u0442\u0430, \u0438\u043C\u044F, \u0447\u0435\u0440\u0442\u0430 \u0438 \u0433\u043B\u0430\u0437. \u041E\u0431\u0449\u0430\u044F \u043F\u0430\u043D\u0435\u043B\u044C\n             \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0438\u0434 \u0432\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442\u0430, \u0438 \u0435\u0451 \u0440\u0438\u0441\u0443\u0435\u0442 \u0435\u0433\u043E \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u0430\u044F \u0442\u0430\u0431\u043B\u0438\u0446\u0430. -->\n        <ul rtElem=\"columns\" qa-dataid=\"data-list-settings-columns\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n            @for (item of items(); track item.key) {\n                <li\n                    rtElem=\"column\"\n                    qa-dataid=\"data-list-settings-column\"\n                    cdkDrag\n                    [cdkDragPreviewClass]=\"dragPreviewClass()\"\n                    [attr.data-key]=\"item.key\"\n                    [rtMod]=\"{ hidden: item.hidden, locked: item.locked === true }\"\n                    [cdkDragDisabled]=\"item.locked === true\">\n                    <button\n                        rtElem=\"handle\"\n                        qa-dataid=\"data-list-settings-drag\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [disabled]=\"item.locked === true\"\n                        [attr.aria-label]=\"dragLabel()\">\n                        <rt-icon name=\"arrows\" size=\"sm\" />\n                    </button>\n\n                    <span rtElem=\"column-label\" qa-dataid=\"data-list-settings-column-label\">{{ item.label }}</span>\n\n                    <rt-icon-button\n                        rtElem=\"toggle\"\n                        qa-dataid=\"data-list-settings-toggle\"\n                        variant=\"ghost\"\n                        [icon]=\"item.hidden ? 'eye-slash' : 'eye'\"\n                        [ariaLabel]=\"item.hidden ? showColumnLabel() : hideColumnLabel()\"\n                        [tooltip]=\"item.hidden ? showLabel() : hideLabel()\"\n                        [disabled]=\"item.locked === true\"\n                        (clicked)=\"onToggleHidden(item.key)\" />\n                </li>\n            }\n        </ul>\n    </ng-container>\n\n    <!-- \u0411\u043B\u043E\u043A \u0441\u0442\u043E\u0438\u0442 \u043D\u0430\u0434 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C, \u0447\u0442\u043E\u0431\u044B \u043A\u043D\u043E\u043F\u043A\u0430 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u044F \u0432\u0437\u044F\u043B\u0430 \u0441\u0432\u043E\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442: \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u043F\u0438\u0441\u043D\u044B\u043C\u0438,\n         \u043A\u0430\u043A \u0432 \u043F\u043E\u0434\u0432\u0430\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <ng-container rtBlock=\"rt-data-list-settings-aside\" ngProjectAs=\"rt-aside-footer\">\n        <rt-aside-footer>\n            <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u043A\u043D\u043E\u043F\u043A\u0435 \u0440\u0438\u0441\u0443\u0435\u0442 \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u043A\u0438\u0442\u0430, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u0442\u0435\u043B\u043E \u043F\u0443\u0441\u0442\u043E\u0435. -->\n            <button\n                rtButton\n                asideDismiss\n                type=\"button\"\n                appearance=\"text\"\n                qa-dataid=\"data-list-settings-cancel\"\n                [label]=\"cancelLabel()\"\n                (click)=\"onCancel()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n\n            <button\n                rtButton\n                rtElem=\"save\"\n                asidePrimary\n                type=\"button\"\n                qa-dataid=\"data-list-settings-save\"\n                [label]=\"saveLabel()\"\n                [disabled]=\"!isChanged()\"\n                (click)=\"onSave()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n        </rt-aside-footer>\n    </ng-container>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-settings-aside{display:flex;flex-direction:column;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switches{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-data-list-settings-aside__switch-row{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm)}.rt-data-list-settings-aside__save{text-transform:uppercase}.rt-data-list-settings-aside__columns{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-sm);list-style:none}.rt-data-list-settings-aside__column{--rt-data-list-settings-aside-radius: var(--rt-radius-md);--rt-data-list-settings-aside-divider-width: var(--rt-border-width-thin);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-lg);--rt-data-list-settings-aside-drag-duration: var(--rt-duration-base);--rt-data-list-settings-aside-padding-start: 0;--rt-data-list-settings-aside-padding-end: var(--rt-space-sm);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);display:flex;align-items:center;border-radius:var(--rt-data-list-settings-aside-radius);background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);gap:var(--rt-space-sm);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}.rt-data-list-settings-aside__column--hidden{--rt-data-list-settings-aside-color: var(--rt-color-text-muted)}.rt-data-list-settings-aside__column.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--rt-data-list-settings-aside-drag-shadow)}.rt-data-list-settings-aside__column.cdk-drag-placeholder{opacity:0}.rt-data-list-settings-aside__column.cdk-drag-animating{transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__columns.cdk-drop-list-dragging .rt-data-list-settings-aside__column:not(.cdk-drag-placeholder){transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__handle{display:inline-flex;align-items:center;align-self:stretch;justify-content:center;padding:0 var(--rt-space-sm);border:none;border-right:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);background:transparent;color:inherit;cursor:grab}.rt-data-list-settings-aside__handle:disabled{cursor:default}.rt-data-list-settings-aside__column-label{overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-data-list-settings-aside__toggle{border-left:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);padding-inline-start:var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside{--rt-aside-inset: var(--rt-space-xl);--rt-aside-content-gap: var(--rt-space-xl);--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-back-icon-size: 24px;--rt-data-list-settings-aside-header-height: 96px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header{--rt-aside-header-title-size: var(--rt-text-2xl);--rt-aside-header-title-weight: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size: var(--rt-text-md);--rt-aside-header-gap: var(--rt-space-md);--rt-aside-header-min-height: var(--rt-data-list-settings-aside-header-height)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color);--rt-icon-button-radius: var(--rt-radius-full)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon{min-width:var(--rt-data-list-settings-aside-back-icon-size);min-height:var(--rt-data-list-settings-aside-back-icon-size)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer{--rt-aside-footer-border-width: 0}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer__content{justify-content:flex-end;gap:var(--rt-space-md)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button{--rt-btn-height: var(--rt-data-list-settings-aside-control-size);--rt-btn-radius: var(--rt-radius-full);--rt-btn-padding: 0 var(--rt-space-6);--rt-btn-font-size: var(--rt-text-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button--text{--rt-btn-padding: 0 var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-toggle-switch{--rt-toggle-track-width: 48px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 20px;--rt-toggle-thumb-inset: 2px;--rt-toggle-thumb-travel: 24px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switches{gap:var(--rt-space-xl)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-muted)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label--on{color:var(--rt-color-text-primary)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *){--rt-data-list-settings-aside-radius: var(--rt-list-settings-item-radius);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-xl);--rt-data-list-settings-aside-column-height: 48px;--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-icon-size: 18px;--rt-data-list-settings-aside-padding-start: var(--rt-space-xs);--rt-data-list-settings-aside-padding-end: var(--rt-space-xs);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);min-height:var(--rt-data-list-settings-aside-column-height);font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle{min-width:calc(var(--rt-data-list-settings-aside-control-size) + 2 * var(--rt-space-xs));height:var(--rt-data-list-settings-aside-control-size);align-self:center;padding:0 var(--rt-space-xs);border-right-color:var(--rt-color-border-strong);color:var(--rt-list-settings-icon-color);margin-inline-end:var(--rt-space-xs)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle .rt-icon{min-width:var(--rt-data-list-settings-aside-icon-size);min-height:var(--rt-data-list-settings-aside-icon-size)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__column-label{font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle{border-left:none;padding-inline-start:0}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color)}}.rt-data-list-settings-aside__column.cdk-drag-preview{background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}\n"], dependencies: [{ kind: "component", type: 
+                // components
+                RtAsideComponent, selector: "rt-aside", inputs: ["size", "contentLayout", "width", "ariaLabel", "requestError", "trapFocus", "pending"] }, { kind: "component", type: RtAsideFooterComponent, selector: "rt-aside-footer" }, { kind: "component", type: RtAsideHeaderComponent, selector: "rt-aside-header", inputs: ["title", "overline", "subtitle", "badges", "closable", "loading"], outputs: ["dismiss"] }, { 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: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "label", "size", "iconOff", "iconOn", "disabled"] }, { kind: "directive", type: 
+                // directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { 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: RtButtonDirective, selector: "button[rtButton], a[rtButton]", inputs: ["label", "icon", "iconPos", "theme", "appearance", "size", "loading", "loadingIcon", "loadingLabel", "pressed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListSettingsAsideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-data-list-settings-aside', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // components
+                        RtAsideComponent,
+                        RtAsideFooterComponent,
+                        RtAsideHeaderComponent,
+                        RtIconButtonComponent,
+                        RtIconComponent,
+                        RtToggleSwitchComponent,
+                        // directives
+                        BlockDirective,
+                        CdkDrag,
+                        CdkDragHandle,
+                        CdkDropList,
+                        ElemDirective,
+                        FormsModule,
+                        ModDirective,
+                        RtButtonDirective,
+                    ], host: { class: BEM_BLOCK$1 }, template: "<rt-aside size=\"md\" [ariaLabel]=\"title()\">\n    <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0441\u0442\u043E\u0438\u0442 \u0432 \u0448\u0430\u043F\u043A\u0435 \u043F\u043E\u0434 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u043E\u043C, \u043A\u0430\u043A \u0443 \u043F\u0430\u043D\u0435\u043B\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <rt-aside-header [title]=\"title()\" [subtitle]=\"hint()\" />\n\n    <ng-container rtBlock=\"rt-data-list-settings-aside\">\n        <div rtElem=\"switches\">\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-vertical\"\n                    [ariaLabel]=\"verticalLabel()\"\n                    [ngModel]=\"isVerticalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isVerticalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-vertical-label\" [rtMod]=\"{ on: isVerticalScrollbarShown() }\">\n                    {{ verticalLabel() }}\n                </span>\n            </div>\n\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-horizontal\"\n                    [ariaLabel]=\"horizontalLabel()\"\n                    [ngModel]=\"isHorizontalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isHorizontalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-horizontal-label\" [rtMod]=\"{ on: isHorizontalScrollbarShown() }\">\n                    {{ horizontalLabel() }}\n                </span>\n            </div>\n        </div>\n\n        <!-- \u041A\u043E\u043B\u043E\u043D\u043A\u0438 \u2014 \u043F\u043B\u0430\u0448\u043A\u0430\u043C\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u0440\u0443\u0447\u043A\u0430 \u2725 \u0438 \u0447\u0435\u0440\u0442\u0430, \u0438\u043C\u044F, \u0447\u0435\u0440\u0442\u0430 \u0438 \u0433\u043B\u0430\u0437. \u041E\u0431\u0449\u0430\u044F \u043F\u0430\u043D\u0435\u043B\u044C\n             \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0438\u0434 \u0432\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442\u0430, \u0438 \u0435\u0451 \u0440\u0438\u0441\u0443\u0435\u0442 \u0435\u0433\u043E \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u0430\u044F \u0442\u0430\u0431\u043B\u0438\u0446\u0430. -->\n        <ul rtElem=\"columns\" qa-dataid=\"data-list-settings-columns\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n            @for (item of items(); track item.key) {\n                <li\n                    rtElem=\"column\"\n                    qa-dataid=\"data-list-settings-column\"\n                    cdkDrag\n                    [cdkDragPreviewClass]=\"dragPreviewClass()\"\n                    [attr.data-key]=\"item.key\"\n                    [rtMod]=\"{ hidden: item.hidden, locked: item.locked === true }\"\n                    [cdkDragDisabled]=\"item.locked === true\">\n                    <button\n                        rtElem=\"handle\"\n                        qa-dataid=\"data-list-settings-drag\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [disabled]=\"item.locked === true\"\n                        [attr.aria-label]=\"dragLabel()\">\n                        <rt-icon name=\"arrows\" size=\"sm\" />\n                    </button>\n\n                    <span rtElem=\"column-label\" qa-dataid=\"data-list-settings-column-label\">{{ item.label }}</span>\n\n                    <rt-icon-button\n                        rtElem=\"toggle\"\n                        qa-dataid=\"data-list-settings-toggle\"\n                        variant=\"ghost\"\n                        [icon]=\"item.hidden ? 'eye-slash' : 'eye'\"\n                        [ariaLabel]=\"item.hidden ? showColumnLabel() : hideColumnLabel()\"\n                        [tooltip]=\"item.hidden ? showLabel() : hideLabel()\"\n                        [disabled]=\"item.locked === true\"\n                        (clicked)=\"onToggleHidden(item.key)\" />\n                </li>\n            }\n        </ul>\n    </ng-container>\n\n    <!-- \u0411\u043B\u043E\u043A \u0441\u0442\u043E\u0438\u0442 \u043D\u0430\u0434 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C, \u0447\u0442\u043E\u0431\u044B \u043A\u043D\u043E\u043F\u043A\u0430 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u044F \u0432\u0437\u044F\u043B\u0430 \u0441\u0432\u043E\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442: \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u043F\u0438\u0441\u043D\u044B\u043C\u0438,\n         \u043A\u0430\u043A \u0432 \u043F\u043E\u0434\u0432\u0430\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <ng-container rtBlock=\"rt-data-list-settings-aside\" ngProjectAs=\"rt-aside-footer\">\n        <rt-aside-footer>\n            <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u043A\u043D\u043E\u043F\u043A\u0435 \u0440\u0438\u0441\u0443\u0435\u0442 \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u043A\u0438\u0442\u0430, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u0442\u0435\u043B\u043E \u043F\u0443\u0441\u0442\u043E\u0435. -->\n            <button\n                rtButton\n                asideDismiss\n                type=\"button\"\n                appearance=\"text\"\n                qa-dataid=\"data-list-settings-cancel\"\n                [label]=\"cancelLabel()\"\n                (click)=\"onCancel()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n\n            <button\n                rtButton\n                rtElem=\"save\"\n                asidePrimary\n                type=\"button\"\n                qa-dataid=\"data-list-settings-save\"\n                [label]=\"saveLabel()\"\n                [disabled]=\"!isChanged()\"\n                (click)=\"onSave()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n        </rt-aside-footer>\n    </ng-container>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-settings-aside{display:flex;flex-direction:column;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switches{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-data-list-settings-aside__switch-row{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm)}.rt-data-list-settings-aside__save{text-transform:uppercase}.rt-data-list-settings-aside__columns{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-sm);list-style:none}.rt-data-list-settings-aside__column{--rt-data-list-settings-aside-radius: var(--rt-radius-md);--rt-data-list-settings-aside-divider-width: var(--rt-border-width-thin);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-lg);--rt-data-list-settings-aside-drag-duration: var(--rt-duration-base);--rt-data-list-settings-aside-padding-start: 0;--rt-data-list-settings-aside-padding-end: var(--rt-space-sm);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);display:flex;align-items:center;border-radius:var(--rt-data-list-settings-aside-radius);background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);gap:var(--rt-space-sm);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}.rt-data-list-settings-aside__column--hidden{--rt-data-list-settings-aside-color: var(--rt-color-text-muted)}.rt-data-list-settings-aside__column.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--rt-data-list-settings-aside-drag-shadow)}.rt-data-list-settings-aside__column.cdk-drag-placeholder{opacity:0}.rt-data-list-settings-aside__column.cdk-drag-animating{transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__columns.cdk-drop-list-dragging .rt-data-list-settings-aside__column:not(.cdk-drag-placeholder){transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__handle{display:inline-flex;align-items:center;align-self:stretch;justify-content:center;padding:0 var(--rt-space-sm);border:none;border-right:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);background:transparent;color:inherit;cursor:grab}.rt-data-list-settings-aside__handle:disabled{cursor:default}.rt-data-list-settings-aside__column-label{overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-data-list-settings-aside__toggle{border-left:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);padding-inline-start:var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside{--rt-aside-inset: var(--rt-space-xl);--rt-aside-content-gap: var(--rt-space-xl);--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-back-icon-size: 24px;--rt-data-list-settings-aside-header-height: 96px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header{--rt-aside-header-title-size: var(--rt-text-2xl);--rt-aside-header-title-weight: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size: var(--rt-text-md);--rt-aside-header-gap: var(--rt-space-md);--rt-aside-header-min-height: var(--rt-data-list-settings-aside-header-height)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color);--rt-icon-button-radius: var(--rt-radius-full)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon{min-width:var(--rt-data-list-settings-aside-back-icon-size);min-height:var(--rt-data-list-settings-aside-back-icon-size)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer{--rt-aside-footer-border-width: 0}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer__content{justify-content:flex-end;gap:var(--rt-space-md)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button{--rt-btn-height: var(--rt-data-list-settings-aside-control-size);--rt-btn-radius: var(--rt-radius-full);--rt-btn-padding: 0 var(--rt-space-6);--rt-btn-font-size: var(--rt-text-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button--text{--rt-btn-padding: 0 var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-toggle-switch{--rt-toggle-track-width: 48px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 20px;--rt-toggle-thumb-inset: 2px;--rt-toggle-thumb-travel: 24px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switches{gap:var(--rt-space-xl)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-muted)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label--on{color:var(--rt-color-text-primary)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *){--rt-data-list-settings-aside-radius: var(--rt-list-settings-item-radius);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-xl);--rt-data-list-settings-aside-column-height: 48px;--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-icon-size: 18px;--rt-data-list-settings-aside-padding-start: var(--rt-space-xs);--rt-data-list-settings-aside-padding-end: var(--rt-space-xs);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);min-height:var(--rt-data-list-settings-aside-column-height);font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle{min-width:calc(var(--rt-data-list-settings-aside-control-size) + 2 * var(--rt-space-xs));height:var(--rt-data-list-settings-aside-control-size);align-self:center;padding:0 var(--rt-space-xs);border-right-color:var(--rt-color-border-strong);color:var(--rt-list-settings-icon-color);margin-inline-end:var(--rt-space-xs)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle .rt-icon{min-width:var(--rt-data-list-settings-aside-icon-size);min-height:var(--rt-data-list-settings-aside-icon-size)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__column-label{font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle{border-left:none;padding-inline-start:0}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color)}}.rt-data-list-settings-aside__column.cdk-drag-preview{background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}\n"] }]
+        }], ctorParameters: () => [] });
+
+/** Отметки и исключения после смены страницы: пришедшие строки отмечаются, кроме исключённых. */
+function dataListSelectedAfterPage(selected, page, excluded, keyExp) {
+    const excludedKeys = excluded.map((entity) => entity[keyExp]);
+    return dataTableWithPageEntities(selected, page, keyExp).filter((entity) => !excludedKeys.includes(entity[keyExp]));
+}
+/** Исключения после отметки или снятия одной записи под «отметить все». */
+function dataListExcludedAfterEntity(excluded, entity, checked, keyExp) {
+    return dataTableWithEntity(excluded, entity, !checked, keyExp);
+}
+/** Исключения после отметки всей страницы под «отметить все»: её записи уходят из исключений. */
+function dataListExcludedAfterPageMarked(excluded, page, keyExp) {
+    return dataTableWithoutPageEntities(excluded, page, keyExp);
+}
+/** Исключения после снятия всей страницы под «отметить все»: её записи становятся исключениями. */
+function dataListExcludedAfterPageUnmarked(excluded, page, keyExp) {
+    return dataTableWithPageEntities(excluded, page, keyExp);
+}
+
+/** Шаблоны пользовательских ячеек списка: они уезжают в его таблицу. */
+class RtDataListCustomCellsDirective {
+    constructor() {
+        this.cellsTemplates = input.required({ ...(ngDevMode ? { debugName: "cellsTemplates" } : /* istanbul ignore next */ {}), alias: 'rtDataListCustomCells' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListCustomCellsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtDataListCustomCellsDirective, isStandalone: true, selector: "[rtDataListCustomCells]", inputs: { cellsTemplates: { classPropertyName: "cellsTemplates", publicName: "rtDataListCustomCells", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListCustomCellsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataListCustomCells]',
+                }]
+        }], propDecorators: { cellsTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "rtDataListCustomCells", required: true }] }] } });
+/** Пункты меню строки списка. */
+class RtDataListRowActionsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataListRowActionsDirective, isStandalone: true, selector: "[rtDataListRowActions]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListRowActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataListRowActions]',
+                }]
+        }] });
+/** Действия строки рядом с кнопкой меню. */
+class RtDataListAdditionalRowActionsDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListAdditionalRowActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: RtDataListAdditionalRowActionsDirective, isStandalone: true, selector: "[rtDataListAdditionalRowActions]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListAdditionalRowActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rtDataListAdditionalRowActions]',
+                }]
+        }] });
+
+function dataListScrollbarStandard(isVerticalShown, isHorizontalShown) {
+    if (isVerticalShown && isHorizontalShown) {
+        return { width: null, color: null };
+    }
+    if (!isVerticalShown && !isHorizontalShown) {
+        return { width: 'none', color: null };
+    }
+    return { width: 'auto', color: 'auto' };
+}
+
+const BEM_BLOCK = 'rt-data-list';
+/** Показанная полоса прокрутки — ступень размеров кита, та же, что в основе его полос. */
+const SCROLLBAR_SIZE = 'var(--rt-size-3)';
+/** Скрытая полоса — нулевой размер: прокрутка остаётся, видно её не будет. */
+const SCROLLBAR_HIDDEN = '0';
+/** Свойства полос прокрутки, которые список ставит на корень страницы и снимает, уходя. */
+const SCROLLBAR_PROPERTIES = [
+    '--rt-data-table-scrollbar-vertical-width',
+    '--rt-data-table-scrollbar-horizontal-height',
+    '--rt-data-table-scrollbar-width',
+    '--rt-data-table-scrollbar-color',
+];
+/** Сколько живых списков держат полосы на корне каждой страницы: снимает их только последний. */
+const SCROLLBAR_HOLDERS = new WeakMap();
+/**
+ * Список записей первого кита во втором: панель действий, таблица, полоса страниц, заглушка
+ * пустого списка и вид загрузки.
+ *
+ * Своего состояния список не ведёт вовсе: страницу, порядок, условия отбора и поиск он просит у
+ * приложения. Службу настроек колонок объявляет и наполняет само приложение — список её только
+ * читает и пишет в неё сохранённое панелью, которую поднимает службой боковых панелей кита.
+ */
+class RtDataListComponent {
+    #destroyRef;
+    #asideService;
+    /* Вид считается из настроек при объявлении входа: вход в разметке по-прежнему перебивает всё. */
+    #look;
+    #appearance;
+    #filterAppearance;
+    #configService;
+    #pageRoot;
+    /**
+     * Нажатия на «настроить колонки». Панель открывается объявленным потоком, а `exhaustMap`
+     * держит одну открытую: второе нажатие при открытой панели открывать нечего — приём первого
+     * кита, там иначе настройку сохраняла та панель, что закрылась последней.
+     */
+    #openSettingsSource;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#asideService = inject(RtAsideService);
+        /* Вид считается из настроек при объявлении входа: вход в разметке по-прежнему перебивает всё. */
+        this.#look = rtKitDefault('dataTable', (it) => it.look, 'material');
+        this.#appearance = rtKitDefault('dataList', (it) => it.appearance, 'fill');
+        this.#filterAppearance = rtKitDefault('dataList', (it) => it.filterAppearance, 'outline');
+        this.#configService = inject(RtDataTableConfigService);
+        this.#pageRoot = inject(DOCUMENT).documentElement;
+        /**
+         * Нажатия на «настроить колонки». Панель открывается объявленным потоком, а `exhaustMap`
+         * держит одну открытую: второе нажатие при открытой панели открывать нечего — приём первого
+         * кита, там иначе настройку сохраняла та панель, что закрылась последней.
+         */
+        this.#openSettingsSource = new Subject();
+        this.placeholderLabel = rtKitLabel('dataListPlaceholder');
+        /** Заглушку показывают, когда нет ни строк, ни условий отбора. */
+        this.isPlaceholderShown = computed(() => !this.entities().length && !this.filterModel().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPlaceholderShown" }] : /* istanbul ignore next */ []));
+        this.isFiltersEmpty = computed(() => !this.filterModel().length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFiltersEmpty" }] : /* istanbul ignore next */ []));
+        /** Размеры страницы, которые предлагает полоса: те же, что у первого кита. */
+        this.pageSizes = computed(() => dataListPageSizes(this.pageModel()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []));
+        /**
+         * Вид семьи. Материальный набор стоит на самом узле, а не на странице: семья выглядит как первый
+         * кит, где бы её ни поставили, и соседи на странице своего вида не теряют.
+         */
+        this.look = input(this.#look, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /** Вид поля поиска, как `appearance` списка первого кита; умолчание берётся из настроек кита. */
+        this.appearance = input(this.#appearance, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        /**
+         * Вид полей отбора: `outline` — рамка со всех сторон, `fill` — залитое поле с чертой снизу. От
+         * `appearance` он не зависит: у первого кита поля отбора обведены, какой бы ни был поиск.
+         */
+        this.filterAppearance = input(this.#filterAppearance, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterAppearance" }] : /* istanbul ignore next */ []));
+        /** Контурные значки кнопок полосы: очистки отбора, обновления и настройки колонок, как у первого кита. */
+        this.isToolbarActionsIconsOutlined = input(true, { ...(ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tableConfigStorageKey = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableConfigStorageKey" }] : /* istanbul ignore next */ []));
+        this.entities = input.required({ ...(ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        this.pageModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []));
+        this.currentSortModel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []));
+        this.searchTerm = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        /** Условия отбора: их ключ — имя свойства колонки, а не ключ записи, как и у таблицы. */
+        this.filterModel = input([], { ...(ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {}), transform: transformArrayInput });
+        this.keyExp = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "keyExp" }] : /* istanbul ignore next */ []));
+        /** Первая загрузка: вместо списка крутилка. */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Дозагрузка: строки остаются, а поверх них крутилка с подложкой. */
+        this.fetching = input(false, { ...(ngDevMode ? { debugName: "fetching" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isTableRowsClickable = input(false, { ...(ngDevMode ? { debugName: "isTableRowsClickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isFiltersShown = input(false, { ...(ngDevMode ? { debugName: "isFiltersShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isRefreshButtonShown = input(true, { ...(ngDevMode ? { debugName: "isRefreshButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isTableConfigButtonShown = input(true, { ...(ngDevMode ? { debugName: "isTableConfigButtonShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Признак полосы страниц: выключенный убирает полосу из разметки, включённый оставляет её
+         * правилам самой полосы. Первый кит признак принимал и никуда не передавал.
+         */
+        this.isPaginationShown = input(true, { ...(ngDevMode ? { debugName: "isPaginationShown" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.sortChange = output();
+        this.filterChange = output();
+        this.pageModelChange = output();
+        this.searchChange = output();
+        this.refresh = output();
+        this.clearFiltersAction = output();
+        this.rowClick = output();
+        this.rowDoubleClick = output();
+        this.toolbarSelectorsTpl = contentChild(RtDataListToolbarSelectorsDirective, { ...(ngDevMode ? { debugName: "toolbarSelectorsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.toolbarActionsTpl = contentChild(RtDataListToolbarActionsDirective, { ...(ngDevMode ? { debugName: "toolbarActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.customCellsTpl = contentChild(RtDataListCustomCellsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customCellsTpl" }] : /* istanbul ignore next */ []));
+        this.rowActionsTpl = contentChild(RtDataListRowActionsDirective, { ...(ngDevMode ? { debugName: "rowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.additionalRowActionsTpl = contentChild(RtDataListAdditionalRowActionsDirective, { ...(ngDevMode ? { debugName: "additionalRowActionsTpl" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * Шаблон значка приложения — он уезжает в таблицу списка.
+         *
+         * Родовой тип здесь по умолчанию, а не тип записи списка, и это не упрощение: шаблон-посредник
+         * внутри разметки объявлен той же директивой, а родового довода разметка ей не даёт — она
+         * ставит его по умолчанию. Объявленное здесь по типу записи расходится с ним, и сборка
+         * библиотеки отказывает на выводе шаблона. Приложение своего значка не теряет: его собственный
+         * шаблон объявлен той же директивой и тем же умолчанием.
+         */
+        this.iconTpl = contentChild(RtDataTableIconDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconTpl" }] : /* istanbul ignore next */ []));
+        /** Панель действий и таблица: их состояние ставит директива выбора списка. */
+        this.toolbarRef = viewChild(RtDataListToolbarComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "toolbarRef" }] : /* istanbul ignore next */ []));
+        this.tableRef = viewChild(RtDataTableComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableRef" }] : /* istanbul ignore next */ []));
+        /* Размер полос прокрутки ставится на корень страницы, а не на список: приём первого
+           кита — выбор, сохранённый одним списком, достаётся каждому списку страницы. Скрытая
+           полоса — это нулевой размер, а не запрет прокрутки: содержимое по-прежнему ездит. */
+        effect(() => {
+            const config = this.#configService.tableConfig();
+            this.#pageRoot.style.setProperty('--rt-data-table-scrollbar-vertical-width', config.isVerticalScrollbarShown ? SCROLLBAR_SIZE : SCROLLBAR_HIDDEN);
+            this.#pageRoot.style.setProperty('--rt-data-table-scrollbar-horizontal-height', config.isHorizontalScrollbarShown ? SCROLLBAR_SIZE : SCROLLBAR_HIDDEN);
+            const standard = dataListScrollbarStandard(config.isVerticalScrollbarShown, config.isHorizontalScrollbarShown);
+            this.#setOrRemove('--rt-data-table-scrollbar-width', standard.width);
+            this.#setOrRemove('--rt-data-table-scrollbar-color', standard.color);
+        });
+        /* Последний ушедший список уносит выбор с корня: иначе полосы, скрытые настройкой списка,
+           оставались бы скрытыми у каждой таблицы страницы и после него. Пока на странице живёт
+           другой список, свойства остаются — они общие для всех списков страницы. */
+        SCROLLBAR_HOLDERS.set(this.#pageRoot, (SCROLLBAR_HOLDERS.get(this.#pageRoot) ?? 0) + 1);
+        this.#destroyRef.onDestroy(() => {
+            const left = (SCROLLBAR_HOLDERS.get(this.#pageRoot) ?? 1) - 1;
+            SCROLLBAR_HOLDERS.set(this.#pageRoot, left);
+            if (left > 0) {
+                return;
+            }
+            SCROLLBAR_PROPERTIES.forEach((property) => {
+                this.#pageRoot.style.removeProperty(property);
+            });
+        });
+        this.#openSettingsSource
+            .pipe(exhaustMap(() => this.#asideService
+            .open(RtDataListSettingsAsideComponent, {
+            data: this.#configService.tableConfig(),
+            position: 'right',
+            // Панель и подложка под ней живут поверх страницы, вне списка, и вид списка
+            // до них сам не доходит: класс набора они получают от того, кто их открыл.
+            panelClass: this.look() === 'material' ? RT_PRESET_MATERIAL_CLASS : [],
+            backdropClass: this.look() === 'material' ? ['rt-aside-backdrop', RT_PRESET_MATERIAL_CLASS] : 'rt-aside-backdrop',
+        })
+            .afterClosed()), filter(Boolean), takeUntilDestroyed(this.#destroyRef))
+            .subscribe((config) => {
+            this.#configService.updateConfig(this.tableConfigStorageKey(), config);
+        });
+    }
+    onOpenSettings() {
+        this.#openSettingsSource.next();
+    }
+    onSortChange(sortModel) {
+        this.sortChange.emit(sortModel);
+    }
+    onFilterChange(filterModel) {
+        this.filterChange.emit(filterModel);
+    }
+    onPageNumber(pageNumber) {
+        this.pageModelChange.emit({ pageNumber });
+    }
+    /** Новый размер страницы: человек остаётся на том же расстоянии от конца списка, как в первом ките. */
+    onPageSize(pageSize) {
+        this.pageModelChange.emit(dataListPageAfterSizeChange(this.pageModel(), pageSize));
+    }
+    onSearchChange(search) {
+        this.searchChange.emit(search);
+    }
+    onRefresh() {
+        this.refresh.emit();
+    }
+    onClearFilters() {
+        this.clearFiltersAction.emit();
+    }
+    onRowClick(event) {
+        this.rowClick.emit(event);
+    }
+    onRowDoubleClick(row) {
+        this.rowDoubleClick.emit(row);
+    }
+    #setOrRemove(property, value) {
+        if (value === null) {
+            this.#pageRoot.style.removeProperty(property);
+            return;
+        }
+        this.#pageRoot.style.setProperty(property, value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataListComponent, isStandalone: true, selector: "rt-data-list", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, filterAppearance: { classPropertyName: "filterAppearance", publicName: "filterAppearance", isSignal: true, isRequired: false, transformFunction: null }, isToolbarActionsIconsOutlined: { classPropertyName: "isToolbarActionsIconsOutlined", publicName: "isToolbarActionsIconsOutlined", isSignal: true, isRequired: false, transformFunction: null }, tableConfigStorageKey: { classPropertyName: "tableConfigStorageKey", publicName: "tableConfigStorageKey", isSignal: true, isRequired: true, transformFunction: null }, entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null }, pageModel: { classPropertyName: "pageModel", publicName: "pageModel", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, keyExp: { classPropertyName: "keyExp", publicName: "keyExp", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fetching: { classPropertyName: "fetching", publicName: "fetching", isSignal: true, isRequired: false, transformFunction: null }, isTableRowsClickable: { classPropertyName: "isTableRowsClickable", publicName: "isTableRowsClickable", isSignal: true, isRequired: false, transformFunction: null }, isFiltersShown: { classPropertyName: "isFiltersShown", publicName: "isFiltersShown", isSignal: true, isRequired: false, transformFunction: null }, isRefreshButtonShown: { classPropertyName: "isRefreshButtonShown", publicName: "isRefreshButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isTableConfigButtonShown: { classPropertyName: "isTableConfigButtonShown", publicName: "isTableConfigButtonShown", isSignal: true, isRequired: false, transformFunction: null }, isPaginationShown: { classPropertyName: "isPaginationShown", publicName: "isPaginationShown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", filterChange: "filterChange", pageModelChange: "pageModelChange", searchChange: "searchChange", refresh: "refresh", clearFiltersAction: "clearFiltersAction", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick" }, host: { properties: { "class.rt-preset-material": "look() === 'material'" }, classAttribute: "rt-data-list" }, providers: [{ provide: RT_DATA_TABLE_PRESET_FROM_HOST, useValue: true }], queries: [{ propertyName: "toolbarSelectorsTpl", first: true, predicate: RtDataListToolbarSelectorsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "toolbarActionsTpl", first: true, predicate: RtDataListToolbarActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "customCellsTpl", first: true, predicate: RtDataListCustomCellsDirective, descendants: true, isSignal: true }, { propertyName: "rowActionsTpl", first: true, predicate: RtDataListRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "additionalRowActionsTpl", first: true, predicate: RtDataListAdditionalRowActionsDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "iconTpl", first: true, predicate: RtDataTableIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: RtDataListToolbarComponent, descendants: true, isSignal: true }, { propertyName: "tableRef", first: true, predicate: RtDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (loading()) {\n    <div rtBlock=\"rt-data-list\" rtElem=\"loading\" qa-dataid=\"data-list-loading\">\n        <rt-spinner />\n    </div>\n} @else {\n    <ng-container rtBlock=\"rt-data-list\">\n        @if (fetching()) {\n            <div rtElem=\"fetching\" qa-dataid=\"data-list-fetching\">\n                <rt-spinner />\n            </div>\n        }\n\n        <rt-data-list-toolbar\n            [isFiltersShown]=\"isFiltersShown()\"\n            [isFiltersEmpty]=\"isFiltersEmpty()\"\n            [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n            [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n            [isPlaceholderShown]=\"isPlaceholderShown()\"\n            [searchTerm]=\"searchTerm()\"\n            [searchAppearance]=\"appearance()\"\n            [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n            (searchChange)=\"onSearchChange($event)\"\n            (refreshAction)=\"onRefresh()\"\n            (clearFiltersAction)=\"onClearFilters()\"\n            (openConfigAction)=\"onOpenSettings()\">\n            @if (toolbarSelectorsTpl(); as selectors) {\n                <ng-container *rtDataListToolbarSelectors>\n                    <ng-container [ngTemplateOutlet]=\"selectors\" />\n                </ng-container>\n            }\n\n            @if (toolbarActionsTpl(); as actions) {\n                <ng-container *rtDataListToolbarActions>\n                    <ng-container [ngTemplateOutlet]=\"actions\" />\n                </ng-container>\n            }\n        </rt-data-list-toolbar>\n\n        @if (isPlaceholderShown()) {\n            <div rtElem=\"placeholder\" qa-dataid=\"data-list-placeholder\">\n                <rt-empty-state icon=\"search\" [title]=\"placeholderLabel()\" />\n            </div>\n        } @else {\n            <div rtElem=\"content\">\n                <rt-data-table\n                    [look]=\"look()\"\n                    [keyExp]=\"keyExp()\"\n                    [entities]=\"entities()\"\n                    [currentSortModel]=\"currentSortModel()\"\n                    [filterModel]=\"filterModel()\"\n                    [isFiltersShown]=\"isFiltersShown()\"\n                    [isTableRowsClickable]=\"isTableRowsClickable()\"\n                    [filterAppearance]=\"filterAppearance()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (rowDoubleClick)=\"onRowDoubleClick($event)\">\n                    @if (customCellsTpl(); as cells) {\n                        <ng-container [rtDataTableCustomCells]=\"cells.cellsTemplates()\" />\n                    }\n\n                    @if (rowActionsTpl(); as actions) {\n                        <ng-template rtDataTableRowActions let-row>\n                            <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </ng-template>\n                    }\n\n                    @if (additionalRowActionsTpl(); as additional) {\n                        <ng-template rtDataTableAdditionalRowActions let-row>\n                            <ng-container [ngTemplateOutlet]=\"additional\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </ng-template>\n                    }\n\n                    @if (iconTpl(); as icon) {\n                        <ng-template rtDataTableIcon let-name let-column=\"column\" let-row=\"row\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"icon.template\"\n                                [ngTemplateOutletContext]=\"{ $implicit: name, column: column, row: row }\" />\n                        </ng-template>\n                    }\n                </rt-data-table>\n            </div>\n\n            @if (isPaginationShown()) {\n                <rt-pagination\n                    [pageModel]=\"pageModel()\"\n                    [perPageOptions]=\"pageSizes()\"\n                    [numbering]=\"look() === 'material' ? 'seven' : 'neighbours'\"\n                    [prevIcon]=\"look() === 'material' ? 'arrow-left' : 'chevron-left'\"\n                    [nextIcon]=\"look() === 'material' ? 'arrow-right' : 'chevron-right'\"\n                    (pageChange)=\"onPageNumber($event)\"\n                    (perPageChange)=\"onPageSize($event)\" />\n            }\n        }\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list{position:relative;display:flex;width:100%;height:100%;min-height:0;flex-direction:column}.rt-data-list__loading,.rt-data-list__placeholder{display:flex;min-height:var(--rt-list-placeholder-min-height);flex-grow:var(--rt-list-placeholder-grow);align-items:center;justify-content:center}.rt-data-list__placeholder .rt-empty-state{--rt-empty-state-icon-wrap-size: var(--rt-list-empty-icon-wrap-size);--rt-empty-state-icon-wrap-bg: var(--rt-list-empty-icon-wrap-bg);--rt-empty-state-icon-size: var(--rt-list-empty-icon-size);--rt-empty-state-title-size: var(--rt-list-empty-title-size);--rt-empty-state-title-weight: var(--rt-list-empty-title-weight)}.rt-data-list__fetching{position:absolute;z-index:var(--rt-z-sticky);display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--rt-color-bg-page) 60%,transparent);inset:0}.rt-data-list__content{display:flex;overflow:hidden;min-height:0;flex-direction:column;flex-grow:1;isolation:isolate}}\n"], dependencies: [{ kind: "component", type: 
+                // components
+                RtPaginationComponent, selector: "rt-pagination", inputs: ["pageModel", "perPageOptions", "prevIcon", "nextIcon", "numbering", "loading"], outputs: ["pageChange", "perPageChange"] }, { kind: "component", type: RtDataListToolbarComponent, selector: "rt-data-list-toolbar", inputs: ["searchAppearance", "isFiltersShown", "isFiltersEmpty", "isRefreshButtonShown", "isTableConfigButtonShown", "isPlaceholderShown", "isToolbarActionsIconsOutlined", "searchTerm"], outputs: ["searchChange", "refreshAction", "clearFiltersAction", "openConfigAction"] }, { kind: "component", type: RtDataTableComponent, selector: "rt-data-table", inputs: ["look", "filterAppearance", "isTableRowsClickable", "keyExp", "entities", "currentSortModel", "filterModel", "isFiltersShown"], outputs: ["rowClick", "rowDoubleClick", "sortChange", "filterChange"] }, { kind: "component", type: RtEmptyStateComponent, selector: "rt-empty-state", inputs: ["icon", "glyph", "title", "description", "framed"] }, { kind: "component", type: RtSpinnerComponent, selector: "rt-spinner", inputs: ["diameter", "color", "appearance", "overlay", "backdrop", "plate"] }, { kind: "directive", type: 
+                // directives
+                BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RtDataListToolbarActionsDirective, selector: "[rtDataListToolbarActions]" }, { kind: "directive", type: RtDataListToolbarSelectorsDirective, selector: "[rtDataListToolbarSelectors]" }, { kind: "directive", type: RtDataTableAdditionalRowActionsDirective, selector: "[rtDataTableAdditionalRowActions]" }, { kind: "directive", type: RtDataTableCustomCellsDirective, selector: "[rtDataTableCustomCells]", inputs: ["rtDataTableCustomCells"] }, { kind: "directive", type: RtDataTableIconDirective, selector: "ng-template[rtDataTableIcon]", exportAs: ["rtDataTableIcon"] }, { kind: "directive", type: RtDataTableRowActionsDirective, selector: "[rtDataTableRowActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rt-data-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        // components
+                        RtPaginationComponent,
+                        RtDataListToolbarComponent,
+                        RtDataTableComponent,
+                        RtEmptyStateComponent,
+                        RtSpinnerComponent,
+                        // directives
+                        BlockDirective,
+                        ElemDirective,
+                        NgTemplateOutlet,
+                        RtDataListToolbarActionsDirective,
+                        RtDataListToolbarSelectorsDirective,
+                        RtDataTableAdditionalRowActionsDirective,
+                        RtDataTableCustomCellsDirective,
+                        RtDataTableIconDirective,
+                        RtDataTableRowActionsDirective,
+                    ], host: { class: BEM_BLOCK, '[class.rt-preset-material]': "look() === 'material'" }, providers: [{ provide: RT_DATA_TABLE_PRESET_FROM_HOST, useValue: true }], template: "@if (loading()) {\n    <div rtBlock=\"rt-data-list\" rtElem=\"loading\" qa-dataid=\"data-list-loading\">\n        <rt-spinner />\n    </div>\n} @else {\n    <ng-container rtBlock=\"rt-data-list\">\n        @if (fetching()) {\n            <div rtElem=\"fetching\" qa-dataid=\"data-list-fetching\">\n                <rt-spinner />\n            </div>\n        }\n\n        <rt-data-list-toolbar\n            [isFiltersShown]=\"isFiltersShown()\"\n            [isFiltersEmpty]=\"isFiltersEmpty()\"\n            [isRefreshButtonShown]=\"isRefreshButtonShown()\"\n            [isTableConfigButtonShown]=\"isTableConfigButtonShown()\"\n            [isPlaceholderShown]=\"isPlaceholderShown()\"\n            [searchTerm]=\"searchTerm()\"\n            [searchAppearance]=\"appearance()\"\n            [isToolbarActionsIconsOutlined]=\"isToolbarActionsIconsOutlined()\"\n            (searchChange)=\"onSearchChange($event)\"\n            (refreshAction)=\"onRefresh()\"\n            (clearFiltersAction)=\"onClearFilters()\"\n            (openConfigAction)=\"onOpenSettings()\">\n            @if (toolbarSelectorsTpl(); as selectors) {\n                <ng-container *rtDataListToolbarSelectors>\n                    <ng-container [ngTemplateOutlet]=\"selectors\" />\n                </ng-container>\n            }\n\n            @if (toolbarActionsTpl(); as actions) {\n                <ng-container *rtDataListToolbarActions>\n                    <ng-container [ngTemplateOutlet]=\"actions\" />\n                </ng-container>\n            }\n        </rt-data-list-toolbar>\n\n        @if (isPlaceholderShown()) {\n            <div rtElem=\"placeholder\" qa-dataid=\"data-list-placeholder\">\n                <rt-empty-state icon=\"search\" [title]=\"placeholderLabel()\" />\n            </div>\n        } @else {\n            <div rtElem=\"content\">\n                <rt-data-table\n                    [look]=\"look()\"\n                    [keyExp]=\"keyExp()\"\n                    [entities]=\"entities()\"\n                    [currentSortModel]=\"currentSortModel()\"\n                    [filterModel]=\"filterModel()\"\n                    [isFiltersShown]=\"isFiltersShown()\"\n                    [isTableRowsClickable]=\"isTableRowsClickable()\"\n                    [filterAppearance]=\"filterAppearance()\"\n                    (sortChange)=\"onSortChange($event)\"\n                    (filterChange)=\"onFilterChange($event)\"\n                    (rowClick)=\"onRowClick($event)\"\n                    (rowDoubleClick)=\"onRowDoubleClick($event)\">\n                    @if (customCellsTpl(); as cells) {\n                        <ng-container [rtDataTableCustomCells]=\"cells.cellsTemplates()\" />\n                    }\n\n                    @if (rowActionsTpl(); as actions) {\n                        <ng-template rtDataTableRowActions let-row>\n                            <ng-container [ngTemplateOutlet]=\"actions\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </ng-template>\n                    }\n\n                    @if (additionalRowActionsTpl(); as additional) {\n                        <ng-template rtDataTableAdditionalRowActions let-row>\n                            <ng-container [ngTemplateOutlet]=\"additional\" [ngTemplateOutletContext]=\"{ $implicit: row }\" />\n                        </ng-template>\n                    }\n\n                    @if (iconTpl(); as icon) {\n                        <ng-template rtDataTableIcon let-name let-column=\"column\" let-row=\"row\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"icon.template\"\n                                [ngTemplateOutletContext]=\"{ $implicit: name, column: column, row: row }\" />\n                        </ng-template>\n                    }\n                </rt-data-table>\n            </div>\n\n            @if (isPaginationShown()) {\n                <rt-pagination\n                    [pageModel]=\"pageModel()\"\n                    [perPageOptions]=\"pageSizes()\"\n                    [numbering]=\"look() === 'material' ? 'seven' : 'neighbours'\"\n                    [prevIcon]=\"look() === 'material' ? 'arrow-left' : 'chevron-left'\"\n                    [nextIcon]=\"look() === 'material' ? 'arrow-right' : 'chevron-right'\"\n                    (pageChange)=\"onPageNumber($event)\"\n                    (perPageChange)=\"onPageSize($event)\" />\n            }\n        }\n    </ng-container>\n}\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list{position:relative;display:flex;width:100%;height:100%;min-height:0;flex-direction:column}.rt-data-list__loading,.rt-data-list__placeholder{display:flex;min-height:var(--rt-list-placeholder-min-height);flex-grow:var(--rt-list-placeholder-grow);align-items:center;justify-content:center}.rt-data-list__placeholder .rt-empty-state{--rt-empty-state-icon-wrap-size: var(--rt-list-empty-icon-wrap-size);--rt-empty-state-icon-wrap-bg: var(--rt-list-empty-icon-wrap-bg);--rt-empty-state-icon-size: var(--rt-list-empty-icon-size);--rt-empty-state-title-size: var(--rt-list-empty-title-size);--rt-empty-state-title-weight: var(--rt-list-empty-title-weight)}.rt-data-list__fetching{position:absolute;z-index:var(--rt-z-sticky);display:flex;align-items:center;justify-content:center;background-color:color-mix(in srgb,var(--rt-color-bg-page) 60%,transparent);inset:0}.rt-data-list__content{display:flex;overflow:hidden;min-height:0;flex-direction:column;flex-grow:1;isolation:isolate}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], filterAppearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterAppearance", required: false }] }], isToolbarActionsIconsOutlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "isToolbarActionsIconsOutlined", required: false }] }], tableConfigStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableConfigStorageKey", required: true }] }], entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], pageModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageModel", required: true }] }], currentSortModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentSortModel", required: true }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }], keyExp: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExp", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fetching: [{ type: i0.Input, args: [{ isSignal: true, alias: "fetching", required: false }] }], isTableRowsClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableRowsClickable", required: false }] }], isFiltersShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFiltersShown", required: false }] }], isRefreshButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRefreshButtonShown", required: false }] }], isTableConfigButtonShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTableConfigButtonShown", required: false }] }], isPaginationShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isPaginationShown", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], pageModelChange: [{ type: i0.Output, args: ["pageModelChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], refresh: [{ type: i0.Output, args: ["refresh"] }], clearFiltersAction: [{ type: i0.Output, args: ["clearFiltersAction"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }], toolbarSelectorsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataListToolbarSelectorsDirective), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }], toolbarActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataListToolbarActionsDirective), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }], customCellsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataListCustomCellsDirective), { isSignal: true }] }], rowActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataListRowActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], additionalRowActionsTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataListAdditionalRowActionsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], iconTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RtDataTableIconDirective), { isSignal: true }] }], toolbarRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtDataListToolbarComponent), { isSignal: true }] }], tableRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => RtDataTableComponent), { isSignal: true }] }] } });
+
+/**
+ * Выбор записей списка `rt-data-list` — выбор первого кита вместе с «отметить все».
+ *
+ * «Отметить все» в разведённом виде отмечает и те страницы, которые ещё не приходили: пришедшая
+ * страница отмечается сама, а снятая запись уходит в исключения и приходит неотмеченной каждый
+ * раз. Приложение читает и отмеченные записи, и исключения — действие над всеми записями оно
+ * отправляет как «все, кроме этих».
+ */
+class RtDataListSelectorsDirective {
+    #destroyRef;
+    #injector;
+    #list;
+    #selectedEntities;
+    #excludedEntities;
+    #isAllEntitiesSelected;
+    #isPageEntitiesSelected;
+    #isPageEntitiesIndeterminate;
+    #isAcrossPagesEnabled;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#injector = inject(Injector);
+        this.#list = inject(RtDataListComponent);
+        this.#selectedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#selectedEntities" }] : /* istanbul ignore next */ []));
+        this.#excludedEntities = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#excludedEntities" }] : /* istanbul ignore next */ []));
+        this.#isAllEntitiesSelected = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isAllEntitiesSelected" }] : /* 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.#isAcrossPagesEnabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#isAcrossPagesEnabled" }] : /* istanbul ignore next */ []));
+        this.isMultiSelect = input(true, { ...(ngDevMode ? { debugName: "isMultiSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** «Отметить все» отмечает и не пришедшие страницы; приложение может это выключить. */
+        this.isMultiSelectExtendedMod = input(true, { ...(ngDevMode ? { debugName: "isMultiSelectExtendedMod" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.isSelectAllSelectorShown = input(true, { ...(ngDevMode ? { debugName: "isSelectAllSelectorShown" } : /* 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.excludedEntities = this.#excludedEntities.asReadonly();
+        this.selectedEntitiesIds = computed(() => dataTableKeysOf(this.selectedEntities(), this.#keyExp()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []));
+        this.excludedEntitiesIds = computed(() => dataTableKeysOf(this.excludedEntities(), this.#keyExp()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "excludedEntitiesIds" }] : /* istanbul ignore next */ []));
+        this.isAllEntitiesSelected = this.#isAllEntitiesSelected.asReadonly();
+        this.isPageEntitiesSelected = this.#isPageEntitiesSelected.asReadonly();
+        this.isPageEntitiesIndeterminate = this.#isPageEntitiesIndeterminate.asReadonly();
+        /** Отмечены все записи, включая не пришедшие страницы. */
+        this.isAcrossPagesEnabled = this.#isAcrossPagesEnabled.asReadonly();
+        /** Тот же признак под именем первого кита: приложение, читавшее его там, переезжает без правок. */
+        this.isMultiSelectExtendedModEnabled = this.isAcrossPagesEnabled;
+        /* Отметки ведёт директива, а рисуют их панель действий и таблица списка. */
+        effect(() => {
+            const table = this.#list.tableRef();
+            if (table) {
+                table.isSelectorsColumnShown.set(true);
+                table.isMultiSelect.set(this.isMultiSelect());
+                table.isSelectorsColumnDisabled.set(this.isSelectorsColumnDisabled());
+                table.selectedEntitiesIds.set(this.selectedEntitiesIds());
+                table.isPageEntitiesSelected.set(this.isPageEntitiesSelected());
+                table.isPageEntitiesIndeterminate.set(this.isPageEntitiesIndeterminate());
+                table.onToggleEntity = (entity, checked) => this.toggleEntity(entity, checked);
+                table.onTogglePageEntities = (checked) => this.togglePageEntities(checked);
+            }
+        });
+        effect(() => {
+            const toolbar = this.#list.toolbarRef();
+            if (toolbar) {
+                toolbar.isMultiSelect.set(this.isMultiSelect());
+                toolbar.isSelectAllSelectorShown.set(this.isSelectAllSelectorShown());
+                toolbar.isSelectAllSelectorDisabled.set(this.isSelectorsColumnDisabled());
+                toolbar.isAllEntitiesSelected.set(this.isAllEntitiesSelected());
+                toolbar.isAllEntitiesIndeterminate.set(!!this.selectedEntities().length);
+                toolbar.selectedEntitiesCount.set(this.selectedEntities().length);
+                toolbar.onToggleAllEntities = (checked) => this.toggleAllEntities(checked);
+            }
+        });
+    }
+    ngOnInit() {
+        /* Пришла страница: под «отметить все» её строки отмечаются сами, кроме исключённых. */
+        toObservable(this.#list.entities, { injector: this.#injector })
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((page) => {
+            if (this.isAcrossPagesEnabled()) {
+                this.#selectedEntities.update((selected) => dataListSelectedAfterPage(selected, page, this.excludedEntities(), this.#keyExp()));
+                this.#isAllEntitiesSelected.set(!this.excludedEntities().length);
+            }
+            this.setExistingEntitiesState();
+        });
+        /* Отметки, названные заранее, ставятся один раз: к первым непустым строкам. */
+        toObservable(this.#list.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.#list.entities(), this.selectedEntitiesKeys(), this.#keyExp()));
+            this.setExistingEntitiesState();
+        });
+    }
+    /** «Отметить все»: отмечает все пришедшие строки, а в разведённом виде — и будущие страницы. */
+    toggleAllEntities(checked) {
+        /* «Отметить все», поставленное заново, начинает с чистого листа: исключения прошлого
+           раза иначе приходили бы неотмеченными и под новым «все». */
+        if (checked) {
+            this.#excludedEntities.set([]);
+        }
+        this.#isAllEntitiesSelected.set(checked);
+        if (this.isMultiSelectExtendedMod()) {
+            this.#isAcrossPagesEnabled.set(checked);
+        }
+        this.#selectedEntities.set(checked ? [...this.#list.entities()] : []);
+        this.#isPageEntitiesSelected.set(checked);
+        this.#isPageEntitiesIndeterminate.set(checked);
+    }
+    /** Отметить или снять все строки показанной страницы. */
+    togglePageEntities(checked) {
+        const page = this.#list.entities();
+        this.#isPageEntitiesSelected.set(checked);
+        this.#selectedEntities.update((selected) => checked
+            ? dataTableWithPageEntities(selected, page, this.#keyExp())
+            : dataTableWithoutPageEntities(selected, page, this.#keyExp()));
+        if (this.isAcrossPagesEnabled()) {
+            this.#excludedEntities.update((excluded) => checked
+                ? dataListExcludedAfterPageMarked(excluded, page, this.#keyExp())
+                : dataListExcludedAfterPageUnmarked(excluded, page, this.#keyExp()));
+        }
+        this.#isAllEntitiesSelected.set(this.isAcrossPagesEnabled() && checked && !this.excludedEntities().length);
+        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()));
+        if (this.isAcrossPagesEnabled()) {
+            this.#excludedEntities.update((excluded) => dataListExcludedAfterEntity(excluded, entity, checked, this.#keyExp()));
+            this.#isAllEntitiesSelected.set(!this.excludedEntities().length);
+        }
+        else if (!checked) {
+            this.#isAllEntitiesSelected.set(false);
+        }
+        else {
+            // Отметка записи без «отметить все» этого признака не касается.
+        }
+        this.#updatePageState();
+    }
+    /** Снять все отметки; исключения остаются до отдельной просьбы приложения. */
+    clearSelectedList() {
+        this.#selectedEntities.set([]);
+        this.#isPageEntitiesSelected.set(false);
+        this.#isPageEntitiesIndeterminate.set(false);
+        this.#isAllEntitiesSelected.set(false);
+        this.#isAcrossPagesEnabled.set(false);
+    }
+    /** Очистить исключения. */
+    clearExcludedList() {
+        this.#excludedEntities.set([]);
+    }
+    /** Пересчитать флажок страницы по показанным строкам. */
+    setExistingEntitiesState() {
+        const page = this.#list.entities();
+        const keys = this.selectedEntitiesIds();
+        this.#isPageEntitiesSelected.set(dataTableAllOnPage(page, keys, this.#keyExp()));
+        this.#isPageEntitiesIndeterminate.set(dataTableAnyOnPage(page, keys, this.#keyExp()));
+    }
+    #updatePageState() {
+        const page = this.#list.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()));
+        }
+    }
+    #keyExp() {
+        return this.#list.keyExp();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListSelectorsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: RtDataListSelectorsDirective, isStandalone: true, selector: "rt-data-list[rtDataListSelectors]", inputs: { isMultiSelect: { classPropertyName: "isMultiSelect", publicName: "isMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, isMultiSelectExtendedMod: { classPropertyName: "isMultiSelectExtendedMod", publicName: "isMultiSelectExtendedMod", isSignal: true, isRequired: false, transformFunction: null }, isSelectAllSelectorShown: { classPropertyName: "isSelectAllSelectorShown", publicName: "isSelectAllSelectorShown", 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: RtDataListSelectorsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'rt-data-list[rtDataListSelectors]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { isMultiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiSelect", required: false }] }], isMultiSelectExtendedMod: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiSelectExtendedMod", required: false }] }], isSelectAllSelectorShown: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAllSelectorShown", 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_LIST_PAGE_SIZES, RtDataListAdditionalRowActionsDirective, RtDataListComponent, RtDataListCustomCellsDirective, RtDataListRowActionsDirective, RtDataListSelectorsDirective, RtDataListSettingsAsideComponent, RtDataListToolbarActionsDirective, RtDataListToolbarComponent, RtDataListToolbarSelectorsDirective, dataListColumnsFromItems, dataListExcludedAfterEntity, dataListExcludedAfterPageMarked, dataListExcludedAfterPageUnmarked, dataListMoveItem, dataListPageAfterSizeChange, dataListPageCount, dataListPageSizes, dataListSelectedAfterPage, dataListSettingItems, dataListSettingsChanged, dataListToggleHidden };
+//# sourceMappingURL=rt-tools-ui-kit-v2-data-list.mjs.map