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

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

@@ -1,894 +1,2133 @@
-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';
-/** Набранное уходит приложению через эту задержку; очистка поля уходит сразу. */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, Injector, TemplateRef, ViewEncapsulation, afterNextRender, booleanAttribute, computed, contentChild, effect, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+import { DOCUMENT, NgTemplateOutlet, TitleCasePipe } 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 { Subject, timer } from "rxjs";
+import { debounce, exhaustMap, filter, map, switchMap, take, tap } from "rxjs/operators";
+import { BlockDirective, BreakStringPipe, ElemDirective, ModDirective } from "@rt-tools/core";
+import { RT_DATA_TABLE_PRESET_FROM_HOST, RT_PRESET_MATERIAL_CLASS, rtKitDefault, rtKitLabel } from "@rt-tools/ui-kit-v2/core";
+import { RtCheckboxComponent } from "@rt-tools/ui-kit-v2/checkbox";
+import { RtDataTableAdditionalRowActionsDirective, RtDataTableComponent, RtDataTableConfigService, RtDataTableCustomCellsDirective, RtDataTableIconDirective, RtDataTableRowActionsDirective, dataTableAllOnPage, dataTableAnyOnPage, dataTableIconName, dataTableKeysOf, dataTablePresetEntities, dataTableWithEntity, dataTableWithPageEntities, dataTableWithoutPageEntities } 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 { RT_ASIDE_DATA, RtAsideComponent, RtAsideFooterComponent, RtAsideHeaderComponent, RtAsideRef, 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";
+var RtDataListToolbarSelectorsDirective = class RtDataListToolbarSelectorsDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDataListToolbarSelectorsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtDataListToolbarSelectorsDirective,
+			isStandalone: true,
+			selector: "[rtDataListToolbarSelectors]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDataListToolbarSelectorsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtDataListToolbarSelectors]" }]
+	}]
+});
+var RtDataListToolbarActionsDirective = class RtDataListToolbarActionsDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDataListToolbarActionsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtDataListToolbarActionsDirective,
+			isStandalone: true,
+			selector: "[rtDataListToolbarActions]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDataListToolbarActionsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtDataListToolbarActions]" }]
+	}]
+});
+const BEM_BLOCK$2 = "rt-data-list-toolbar";
 const TOOLBAR_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 ? TOOLBAR_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 }); }
+	return dataTableIconName(glyph) ?? fallback;
 }
-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];
-/** Страниц всего при этом размере страницы. */
+var RtDataListToolbarComponent = 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("", ...ngDevMode ? [{ debugName: "#searchText" }] : /* istanbul ignore next */ []);
+		this.#isSearchTouched = signal(false, ...ngDevMode ? [{ debugName: "#isSearchTouched" }] : /* istanbul ignore next */ []);
+		this.isSearchShown = computed(() => !this.isPlaceholderShown() || !!this.#searchText() || this.#isSearchTouched() || !!this.searchTerm()?.trim(), ...ngDevMode ? [{ debugName: "isSearchShown" }] : /* istanbul ignore next */ []);
+		this.hasSelectors = computed(() => this.isMultiSelect() || !!this.toolbarSelectorsTpl(), ...ngDevMode ? [{ debugName: "hasSelectors" }] : /* istanbul ignore next */ []);
+		this.searchAppearance = input("outline", ...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("", ...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, ...ngDevMode ? [{ debugName: "isMultiSelect" }] : /* istanbul ignore next */ []);
+		this.isSelectAllSelectorShown = signal(true, ...ngDevMode ? [{ debugName: "isSelectAllSelectorShown" }] : /* istanbul ignore next */ []);
+		this.isSelectAllSelectorDisabled = signal(false, ...ngDevMode ? [{ debugName: "isSelectAllSelectorDisabled" }] : /* istanbul ignore next */ []);
+		this.isAllEntitiesSelected = signal(false, ...ngDevMode ? [{ debugName: "isAllEntitiesSelected" }] : /* istanbul ignore next */ []);
+		this.isAllEntitiesIndeterminate = signal(false, ...ngDevMode ? [{ debugName: "isAllEntitiesIndeterminate" }] : /* istanbul ignore next */ []);
+		this.selectedEntitiesCount = signal(0, ...ngDevMode ? [{ debugName: "selectedEntitiesCount" }] : /* istanbul ignore next */ []);
+		this.searchControl = new FormControl(null);
+		this.onToggleAllEntities = () => void 0;
+		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 ? TOOLBAR_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.2.2",
+			ngImport: i0,
+			type: RtDataListToolbarComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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: 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",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"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: 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.2.2",
+	ngImport: i0,
+	type: RtDataListToolbarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-data-list-toolbar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtCheckboxComponent,
+				RtIconButtonComponent,
+				RtInputComponent,
+				RtToolbarComponent,
+				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;
+	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);
+	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 nextTotal = dataListPageCount(page.totalCount, pageSize);
+	const previousTotal = dataListPageCount(page.totalCount, page.pageSize);
+	return {
+		pageNumber: nextTotal - Math.floor((previousTotal - page.pageNumber) * page.pageSize / pageSize),
+		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,
-        };
-    });
+	return columns.map((column) => {
+		const propName = String(column.propName);
+		return {
+			key: propName,
+			label: !!column.displayName?.length && column.displayName !== propName ? 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 }] : [];
-    });
+	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]),
-    ]);
+	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);
+	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;
+	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-default: var(--rt-text-2xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size-default: var(--rt-text-md);--rt-aside-header-gap-default: var(--rt-space-md);--rt-aside-header-min-height-default: 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", "glyphStrategy", "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 }); }
+	return items.map((item) => item.key === key && item.locked !== true ? {
+		...item,
+		hidden: !item.hidden
+	} : item);
 }
-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-default: var(--rt-text-2xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size-default: var(--rt-text-md);--rt-aside-header-gap-default: var(--rt-space-md);--rt-aside-header-min-height-default: 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: () => [] });
-
-/** Отметки и исключения после смены страницы: пришедшие строки отмечаются, кроме исключённых. */
+const BEM_BLOCK$1 = "rt-data-list-settings-aside";
+var RtDataListSettingsAsideComponent = 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), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+		this.isVerticalScrollbarShown = signal(this.#saved.isVerticalScrollbarShown, ...ngDevMode ? [{ debugName: "isVerticalScrollbarShown" }] : /* istanbul ignore next */ []);
+		this.isHorizontalScrollbarShown = signal(this.#saved.isHorizontalScrollbarShown, ...ngDevMode ? [{ debugName: "isHorizontalScrollbarShown" }] : /* istanbul ignore next */ []);
+		this.config = computed(() => ({
+			isVerticalScrollbarShown: this.isVerticalScrollbarShown(),
+			isHorizontalScrollbarShown: this.isHorizontalScrollbarShown(),
+			columns: dataListColumnsFromItems(this.#saved.columns, this.items())
+		}), ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+		this.dragPreviewClass = signal("", ...ngDevMode ? [{ debugName: "dragPreviewClass" }] : /* istanbul ignore next */ []);
+		this.isChanged = computed(() => dataListSettingsChanged(this.#saved, this.config()), ...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.2.2",
+			ngImport: i0,
+			type: RtDataListSettingsAsideComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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    <!-- Подпись стоит в шапке под заголовком, как у панели первого кита. -->\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        <!-- Колонки — плашками первого кита: ручка ✥ и черта, имя, черта и глаз. Общая панель\n             колонок кита рисует вид второго кита, и её рисует его собственная таблица. -->\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    <!-- Блок стоит над подвалом, чтобы кнопка сохранения взяла свой элемент: подпись прописными,\n         как в подвале первого кита. -->\n    <ng-container rtBlock=\"rt-data-list-settings-aside\" ngProjectAs=\"rt-aside-footer\">\n        <rt-aside-footer>\n            <!-- Подпись кнопке рисует директива кита, поэтому тело пустое. -->\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-default: var(--rt-text-2xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size-default: var(--rt-text-md);--rt-aside-header-gap-default: var(--rt-space-md);--rt-aside-header-min-height-default: 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: 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",
+						"tooltipHideOnClick",
+						"tabIndex",
+						"loading",
+						"disabled",
+						"active",
+						"expanded",
+						"indicator"
+					],
+					outputs: ["clicked"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				},
+				{
+					kind: "component",
+					type: RtToggleSwitchComponent,
+					selector: "rt-toggle-switch",
+					inputs: [
+						"inputId",
+						"ariaLabel",
+						"label",
+						"size",
+						"iconOff",
+						"iconOn",
+						"disabled"
+					]
+				},
+				{
+					kind: "directive",
+					type: 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.2.2",
+	ngImport: i0,
+	type: RtDataListSettingsAsideComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-data-list-settings-aside",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtAsideComponent,
+				RtAsideFooterComponent,
+				RtAsideHeaderComponent,
+				RtIconButtonComponent,
+				RtIconComponent,
+				RtToggleSwitchComponent,
+				BlockDirective,
+				CdkDrag,
+				CdkDragHandle,
+				CdkDropList,
+				ElemDirective,
+				FormsModule,
+				ModDirective,
+				RtButtonDirective
+			],
+			host: { class: BEM_BLOCK$1 },
+			template: "<rt-aside size=\"md\" [ariaLabel]=\"title()\">\n    <!-- Подпись стоит в шапке под заголовком, как у панели первого кита. -->\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        <!-- Колонки — плашками первого кита: ручка ✥ и черта, имя, черта и глаз. Общая панель\n             колонок кита рисует вид второго кита, и её рисует его собственная таблица. -->\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    <!-- Блок стоит над подвалом, чтобы кнопка сохранения взяла свой элемент: подпись прописными,\n         как в подвале первого кита. -->\n    <ng-container rtBlock=\"rt-data-list-settings-aside\" ngProjectAs=\"rt-aside-footer\">\n        <rt-aside-footer>\n            <!-- Подпись кнопке рисует директива кита, поэтому тело пустое. -->\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-default: var(--rt-text-2xl);--rt-aside-header-title-weight-default: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size-default: var(--rt-text-md);--rt-aside-header-gap-default: var(--rt-space-md);--rt-aside-header-min-height-default: 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]));
+	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);
+	return dataTableWithEntity(excluded, entity, !checked, keyExp);
 }
-/** Исключения после отметки всей страницы под «отметить все»: её записи уходят из исключений. */
 function dataListExcludedAfterPageMarked(excluded, page, keyExp) {
-    return dataTableWithoutPageEntities(excluded, page, keyExp);
+	return dataTableWithoutPageEntities(excluded, page, keyExp);
 }
-/** Исключения после снятия всей страницы под «отметить все»: её записи становятся исключениями. */
 function dataListExcludedAfterPageUnmarked(excluded, page, keyExp) {
-    return dataTableWithPageEntities(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]',
-                }]
-        }] });
-
+var RtDataListCustomCellsDirective = 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.2.2",
+			ngImport: i0,
+			type: RtDataListCustomCellsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			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.2.2",
+	ngImport: i0,
+	type: RtDataListCustomCellsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtDataListCustomCells]" }]
+	}],
+	propDecorators: { cellsTemplates: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "rtDataListCustomCells",
+			required: true
+		}]
+	}] }
+});
+var RtDataListRowActionsDirective = class RtDataListRowActionsDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDataListRowActionsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtDataListRowActionsDirective,
+			isStandalone: true,
+			selector: "[rtDataListRowActions]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtDataListRowActionsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[rtDataListRowActions]" }]
+	}]
+});
+var RtDataListAdditionalRowActionsDirective = class RtDataListAdditionalRowActionsDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtDataListAdditionalRowActionsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: RtDataListAdditionalRowActionsDirective,
+			isStandalone: true,
+			selector: "[rtDataListAdditionalRowActions]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	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' };
+	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 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',
+	"--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.
- */
-
+const SCROLLBAR_HOLDERS = /* @__PURE__ */ new WeakMap();
+var RtDataListComponent = class RtDataListComponent {
+	#destroyRef;
+	#asideService;
+	#look;
+	#appearance;
+	#filterAppearance;
+	#configService;
+	#pageRoot;
+	#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;
+		this.#openSettingsSource = new Subject();
+		this.placeholderLabel = rtKitLabel("dataListPlaceholder");
+		this.isPlaceholderShown = computed(() => !this.entities().length && !this.filterModel().length, ...ngDevMode ? [{ debugName: "isPlaceholderShown" }] : /* istanbul ignore next */ []);
+		this.isFiltersEmpty = computed(() => !this.filterModel().length, ...ngDevMode ? [{ debugName: "isFiltersEmpty" }] : /* istanbul ignore next */ []);
+		this.pageSizes = computed(() => dataListPageSizes(this.pageModel()), ...ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []);
+		this.look = input(this.#look, ...ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []);
+		this.appearance = input(this.#appearance, ...ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []);
+		this.filterAppearance = input(this.#filterAppearance, ...ngDevMode ? [{ debugName: "filterAppearance" }] : /* istanbul ignore next */ []);
+		this.isToolbarActionsIconsOutlined = input(true, {
+			...ngDevMode ? { debugName: "isToolbarActionsIconsOutlined" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.tableConfigStorageKey = input.required(...ngDevMode ? [{ debugName: "tableConfigStorageKey" }] : /* istanbul ignore next */ []);
+		this.entities = input.required({
+			...ngDevMode ? { debugName: "entities" } : /* istanbul ignore next */ {},
+			transform: transformArrayInput
+		});
+		this.pageModel = input.required(...ngDevMode ? [{ debugName: "pageModel" }] : /* istanbul ignore next */ []);
+		this.currentSortModel = input.required(...ngDevMode ? [{ debugName: "currentSortModel" }] : /* istanbul ignore next */ []);
+		this.searchTerm = input("", ...ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []);
+		this.filterModel = input([], {
+			...ngDevMode ? { debugName: "filterModel" } : /* istanbul ignore next */ {},
+			transform: transformArrayInput
+		});
+		this.keyExp = input("id", ...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, ...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, ...ngDevMode ? [{ debugName: "iconTpl" }] : /* istanbul ignore next */ []);
+		this.toolbarRef = viewChild(RtDataListToolbarComponent, ...ngDevMode ? [{ debugName: "toolbarRef" }] : /* istanbul ignore next */ []);
+		this.tableRef = viewChild(RtDataTableComponent, ...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.2.2",
+			ngImport: i0,
+			type: RtDataListComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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: 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: 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.2.2",
+	ngImport: i0,
+	type: RtDataListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-data-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				RtPaginationComponent,
+				RtDataListToolbarComponent,
+				RtDataTableComponent,
+				RtEmptyStateComponent,
+				RtSpinnerComponent,
+				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 }]
+		}]
+	}
+});
+var RtDataListSelectorsDirective = 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([], ...ngDevMode ? [{ debugName: "#selectedEntities" }] : /* istanbul ignore next */ []);
+		this.#excludedEntities = signal([], ...ngDevMode ? [{ debugName: "#excludedEntities" }] : /* istanbul ignore next */ []);
+		this.#isAllEntitiesSelected = signal(false, ...ngDevMode ? [{ debugName: "#isAllEntitiesSelected" }] : /* istanbul ignore next */ []);
+		this.#isPageEntitiesSelected = signal(false, ...ngDevMode ? [{ debugName: "#isPageEntitiesSelected" }] : /* istanbul ignore next */ []);
+		this.#isPageEntitiesIndeterminate = signal(false, ...ngDevMode ? [{ debugName: "#isPageEntitiesIndeterminate" }] : /* istanbul ignore next */ []);
+		this.#isAcrossPagesEnabled = signal(false, ...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()), ...ngDevMode ? [{ debugName: "selectedEntitiesIds" }] : /* istanbul ignore next */ []);
+		this.excludedEntitiesIds = computed(() => dataTableKeysOf(this.excludedEntities(), this.#keyExp()), ...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);
+		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.2.2",
+			ngImport: i0,
+			type: RtDataListSelectorsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.2",
+			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.2.2",
+	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
+			}]
+		}]
+	}
+});
 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
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-data-list.mjs.map