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

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

@@ -48,7 +48,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 const BEM_BLOCK$2 = 'rt-data-list-toolbar';
 /** Набранное уходит приложению через эту задержку; очистка поля уходит сразу. */
-const SEARCH_DELAY_MS = 500;
+const TOOLBAR_SEARCH_DELAY_MS = 500;
 /** Значок кнопки — по имени первого кита: перечень соответствий кита даёт ему рисунок. */
 function iconOf(glyph, fallback) {
     return dataTableIconName(glyph) ?? fallback;
@@ -158,7 +158,7 @@ class RtDataListToolbarComponent {
             .pipe(tap((value) => {
             this.#searchText.set(value ?? '');
             this.#isSearchTouched.set(true);
-        }), debounce((value) => timer(value ? SEARCH_DELAY_MS : 0)), map((value) => (value ?? '').trim()), 
+        }), 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) => {
@@ -356,9 +356,9 @@ class RtDataListSettingsAsideComponent {
         this.#asideRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataListSettingsAsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataListSettingsAsideComponent, isStandalone: true, selector: "rt-data-list-settings-aside", host: { classAttribute: "rt-data-list-settings-aside" }, ngImport: i0, template: "<rt-aside size=\"md\" [ariaLabel]=\"title()\">\n    <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0441\u0442\u043E\u0438\u0442 \u0432 \u0448\u0430\u043F\u043A\u0435 \u043F\u043E\u0434 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u043E\u043C, \u043A\u0430\u043A \u0443 \u043F\u0430\u043D\u0435\u043B\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <rt-aside-header [title]=\"title()\" [subtitle]=\"hint()\" />\n\n    <ng-container rtBlock=\"rt-data-list-settings-aside\">\n        <div rtElem=\"switches\">\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-vertical\"\n                    [ariaLabel]=\"verticalLabel()\"\n                    [ngModel]=\"isVerticalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isVerticalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-vertical-label\" [rtMod]=\"{ on: isVerticalScrollbarShown() }\">\n                    {{ verticalLabel() }}\n                </span>\n            </div>\n\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-horizontal\"\n                    [ariaLabel]=\"horizontalLabel()\"\n                    [ngModel]=\"isHorizontalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isHorizontalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-horizontal-label\" [rtMod]=\"{ on: isHorizontalScrollbarShown() }\">\n                    {{ horizontalLabel() }}\n                </span>\n            </div>\n        </div>\n\n        <!-- \u041A\u043E\u043B\u043E\u043D\u043A\u0438 \u2014 \u043F\u043B\u0430\u0448\u043A\u0430\u043C\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u0440\u0443\u0447\u043A\u0430 \u2725 \u0438 \u0447\u0435\u0440\u0442\u0430, \u0438\u043C\u044F, \u0447\u0435\u0440\u0442\u0430 \u0438 \u0433\u043B\u0430\u0437. \u041E\u0431\u0449\u0430\u044F \u043F\u0430\u043D\u0435\u043B\u044C\n             \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0438\u0434 \u0432\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442\u0430, \u0438 \u0435\u0451 \u0440\u0438\u0441\u0443\u0435\u0442 \u0435\u0433\u043E \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u0430\u044F \u0442\u0430\u0431\u043B\u0438\u0446\u0430. -->\n        <ul rtElem=\"columns\" qa-dataid=\"data-list-settings-columns\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n            @for (item of items(); track item.key) {\n                <li\n                    rtElem=\"column\"\n                    qa-dataid=\"data-list-settings-column\"\n                    cdkDrag\n                    [cdkDragPreviewClass]=\"dragPreviewClass()\"\n                    [attr.data-key]=\"item.key\"\n                    [rtMod]=\"{ hidden: item.hidden, locked: item.locked === true }\"\n                    [cdkDragDisabled]=\"item.locked === true\">\n                    <button\n                        rtElem=\"handle\"\n                        qa-dataid=\"data-list-settings-drag\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [disabled]=\"item.locked === true\"\n                        [attr.aria-label]=\"dragLabel()\">\n                        <rt-icon name=\"arrows\" size=\"sm\" />\n                    </button>\n\n                    <span rtElem=\"column-label\" qa-dataid=\"data-list-settings-column-label\">{{ item.label }}</span>\n\n                    <rt-icon-button\n                        rtElem=\"toggle\"\n                        qa-dataid=\"data-list-settings-toggle\"\n                        variant=\"ghost\"\n                        [icon]=\"item.hidden ? 'eye-slash' : 'eye'\"\n                        [ariaLabel]=\"item.hidden ? showColumnLabel() : hideColumnLabel()\"\n                        [tooltip]=\"item.hidden ? showLabel() : hideLabel()\"\n                        [disabled]=\"item.locked === true\"\n                        (clicked)=\"onToggleHidden(item.key)\" />\n                </li>\n            }\n        </ul>\n    </ng-container>\n\n    <!-- \u0411\u043B\u043E\u043A \u0441\u0442\u043E\u0438\u0442 \u043D\u0430\u0434 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C, \u0447\u0442\u043E\u0431\u044B \u043A\u043D\u043E\u043F\u043A\u0430 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u044F \u0432\u0437\u044F\u043B\u0430 \u0441\u0432\u043E\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442: \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u043F\u0438\u0441\u043D\u044B\u043C\u0438,\n         \u043A\u0430\u043A \u0432 \u043F\u043E\u0434\u0432\u0430\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <ng-container rtBlock=\"rt-data-list-settings-aside\" ngProjectAs=\"rt-aside-footer\">\n        <rt-aside-footer>\n            <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u043A\u043D\u043E\u043F\u043A\u0435 \u0440\u0438\u0441\u0443\u0435\u0442 \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u043A\u0438\u0442\u0430, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u0442\u0435\u043B\u043E \u043F\u0443\u0441\u0442\u043E\u0435. -->\n            <button\n                rtButton\n                asideDismiss\n                type=\"button\"\n                appearance=\"text\"\n                qa-dataid=\"data-list-settings-cancel\"\n                [label]=\"cancelLabel()\"\n                (click)=\"onCancel()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n\n            <button\n                rtButton\n                rtElem=\"save\"\n                asidePrimary\n                type=\"button\"\n                qa-dataid=\"data-list-settings-save\"\n                [label]=\"saveLabel()\"\n                [disabled]=\"!isChanged()\"\n                (click)=\"onSave()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n        </rt-aside-footer>\n    </ng-container>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-settings-aside{display:flex;flex-direction:column;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switches{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-data-list-settings-aside__switch-row{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm)}.rt-data-list-settings-aside__save{text-transform:uppercase}.rt-data-list-settings-aside__columns{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-sm);list-style:none}.rt-data-list-settings-aside__column{--rt-data-list-settings-aside-radius: var(--rt-radius-md);--rt-data-list-settings-aside-divider-width: var(--rt-border-width-thin);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-lg);--rt-data-list-settings-aside-drag-duration: var(--rt-duration-base);--rt-data-list-settings-aside-padding-start: 0;--rt-data-list-settings-aside-padding-end: var(--rt-space-sm);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);display:flex;align-items:center;border-radius:var(--rt-data-list-settings-aside-radius);background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);gap:var(--rt-space-sm);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}.rt-data-list-settings-aside__column--hidden{--rt-data-list-settings-aside-color: var(--rt-color-text-muted)}.rt-data-list-settings-aside__column.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--rt-data-list-settings-aside-drag-shadow)}.rt-data-list-settings-aside__column.cdk-drag-placeholder{opacity:0}.rt-data-list-settings-aside__column.cdk-drag-animating{transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__columns.cdk-drop-list-dragging .rt-data-list-settings-aside__column:not(.cdk-drag-placeholder){transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__handle{display:inline-flex;align-items:center;align-self:stretch;justify-content:center;padding:0 var(--rt-space-sm);border:none;border-right:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);background:transparent;color:inherit;cursor:grab}.rt-data-list-settings-aside__handle:disabled{cursor:default}.rt-data-list-settings-aside__column-label{overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-data-list-settings-aside__toggle{border-left:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);padding-inline-start:var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside{--rt-aside-inset: var(--rt-space-xl);--rt-aside-content-gap: var(--rt-space-xl);--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-back-icon-size: 24px;--rt-data-list-settings-aside-header-height: 96px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header{--rt-aside-header-title-size: var(--rt-text-2xl);--rt-aside-header-title-weight: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size: var(--rt-text-md);--rt-aside-header-gap: var(--rt-space-md);--rt-aside-header-min-height: var(--rt-data-list-settings-aside-header-height)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color);--rt-icon-button-radius: var(--rt-radius-full)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon{min-width:var(--rt-data-list-settings-aside-back-icon-size);min-height:var(--rt-data-list-settings-aside-back-icon-size)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer{--rt-aside-footer-border-width: 0}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer__content{justify-content:flex-end;gap:var(--rt-space-md)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button{--rt-btn-height: var(--rt-data-list-settings-aside-control-size);--rt-btn-radius: var(--rt-radius-full);--rt-btn-padding: 0 var(--rt-space-6);--rt-btn-font-size: var(--rt-text-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button--text{--rt-btn-padding: 0 var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-toggle-switch{--rt-toggle-track-width: 48px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 20px;--rt-toggle-thumb-inset: 2px;--rt-toggle-thumb-travel: 24px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switches{gap:var(--rt-space-xl)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-muted)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label--on{color:var(--rt-color-text-primary)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *){--rt-data-list-settings-aside-radius: var(--rt-list-settings-item-radius);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-xl);--rt-data-list-settings-aside-column-height: 48px;--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-icon-size: 18px;--rt-data-list-settings-aside-padding-start: var(--rt-space-xs);--rt-data-list-settings-aside-padding-end: var(--rt-space-xs);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);min-height:var(--rt-data-list-settings-aside-column-height);font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle{min-width:calc(var(--rt-data-list-settings-aside-control-size) + 2 * var(--rt-space-xs));height:var(--rt-data-list-settings-aside-control-size);align-self:center;padding:0 var(--rt-space-xs);border-right-color:var(--rt-color-border-strong);color:var(--rt-list-settings-icon-color);margin-inline-end:var(--rt-space-xs)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle .rt-icon{min-width:var(--rt-data-list-settings-aside-icon-size);min-height:var(--rt-data-list-settings-aside-icon-size)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__column-label{font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle{border-left:none;padding-inline-start:0}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color)}}.rt-data-list-settings-aside__column.cdk-drag-preview{background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}\n"], dependencies: [{ kind: "component", type: 
+    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", "size", "color", "fill", "spin", "rotate"] }, { kind: "component", type: RtToggleSwitchComponent, selector: "rt-toggle-switch", inputs: ["inputId", "ariaLabel", "label", "size", "iconOff", "iconOn", "disabled"] }, { kind: "directive", 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", "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 }); }
 }
@@ -381,7 +381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         FormsModule,
                         ModDirective,
                         RtButtonDirective,
-                    ], host: { class: BEM_BLOCK$1 }, template: "<rt-aside size=\"md\" [ariaLabel]=\"title()\">\n    <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u0441\u0442\u043E\u0438\u0442 \u0432 \u0448\u0430\u043F\u043A\u0435 \u043F\u043E\u0434 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043A\u043E\u043C, \u043A\u0430\u043A \u0443 \u043F\u0430\u043D\u0435\u043B\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <rt-aside-header [title]=\"title()\" [subtitle]=\"hint()\" />\n\n    <ng-container rtBlock=\"rt-data-list-settings-aside\">\n        <div rtElem=\"switches\">\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-vertical\"\n                    [ariaLabel]=\"verticalLabel()\"\n                    [ngModel]=\"isVerticalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isVerticalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-vertical-label\" [rtMod]=\"{ on: isVerticalScrollbarShown() }\">\n                    {{ verticalLabel() }}\n                </span>\n            </div>\n\n            <div rtElem=\"switch-row\">\n                <rt-toggle-switch\n                    qa-dataid=\"data-list-settings-horizontal\"\n                    [ariaLabel]=\"horizontalLabel()\"\n                    [ngModel]=\"isHorizontalScrollbarShown()\"\n                    [ngModelOptions]=\"{ standalone: true }\"\n                    (ngModelChange)=\"isHorizontalScrollbarShown.set($event)\" />\n                <span rtElem=\"switch-label\" qa-dataid=\"data-list-settings-horizontal-label\" [rtMod]=\"{ on: isHorizontalScrollbarShown() }\">\n                    {{ horizontalLabel() }}\n                </span>\n            </div>\n        </div>\n\n        <!-- \u041A\u043E\u043B\u043E\u043D\u043A\u0438 \u2014 \u043F\u043B\u0430\u0448\u043A\u0430\u043C\u0438 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430: \u0440\u0443\u0447\u043A\u0430 \u2725 \u0438 \u0447\u0435\u0440\u0442\u0430, \u0438\u043C\u044F, \u0447\u0435\u0440\u0442\u0430 \u0438 \u0433\u043B\u0430\u0437. \u041E\u0431\u0449\u0430\u044F \u043F\u0430\u043D\u0435\u043B\u044C\n             \u043A\u043E\u043B\u043E\u043D\u043E\u043A \u043A\u0438\u0442\u0430 \u0440\u0438\u0441\u0443\u0435\u0442 \u0432\u0438\u0434 \u0432\u0442\u043E\u0440\u043E\u0433\u043E \u043A\u0438\u0442\u0430, \u0438 \u0435\u0451 \u0440\u0438\u0441\u0443\u0435\u0442 \u0435\u0433\u043E \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u0430\u044F \u0442\u0430\u0431\u043B\u0438\u0446\u0430. -->\n        <ul rtElem=\"columns\" qa-dataid=\"data-list-settings-columns\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n            @for (item of items(); track item.key) {\n                <li\n                    rtElem=\"column\"\n                    qa-dataid=\"data-list-settings-column\"\n                    cdkDrag\n                    [cdkDragPreviewClass]=\"dragPreviewClass()\"\n                    [attr.data-key]=\"item.key\"\n                    [rtMod]=\"{ hidden: item.hidden, locked: item.locked === true }\"\n                    [cdkDragDisabled]=\"item.locked === true\">\n                    <button\n                        rtElem=\"handle\"\n                        qa-dataid=\"data-list-settings-drag\"\n                        type=\"button\"\n                        cdkDragHandle\n                        [disabled]=\"item.locked === true\"\n                        [attr.aria-label]=\"dragLabel()\">\n                        <rt-icon name=\"arrows\" size=\"sm\" />\n                    </button>\n\n                    <span rtElem=\"column-label\" qa-dataid=\"data-list-settings-column-label\">{{ item.label }}</span>\n\n                    <rt-icon-button\n                        rtElem=\"toggle\"\n                        qa-dataid=\"data-list-settings-toggle\"\n                        variant=\"ghost\"\n                        [icon]=\"item.hidden ? 'eye-slash' : 'eye'\"\n                        [ariaLabel]=\"item.hidden ? showColumnLabel() : hideColumnLabel()\"\n                        [tooltip]=\"item.hidden ? showLabel() : hideLabel()\"\n                        [disabled]=\"item.locked === true\"\n                        (clicked)=\"onToggleHidden(item.key)\" />\n                </li>\n            }\n        </ul>\n    </ng-container>\n\n    <!-- \u0411\u043B\u043E\u043A \u0441\u0442\u043E\u0438\u0442 \u043D\u0430\u0434 \u043F\u043E\u0434\u0432\u0430\u043B\u043E\u043C, \u0447\u0442\u043E\u0431\u044B \u043A\u043D\u043E\u043F\u043A\u0430 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u044F \u0432\u0437\u044F\u043B\u0430 \u0441\u0432\u043E\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442: \u043F\u043E\u0434\u043F\u0438\u0441\u044C \u043F\u0440\u043E\u043F\u0438\u0441\u043D\u044B\u043C\u0438,\n         \u043A\u0430\u043A \u0432 \u043F\u043E\u0434\u0432\u0430\u043B\u0435 \u043F\u0435\u0440\u0432\u043E\u0433\u043E \u043A\u0438\u0442\u0430. -->\n    <ng-container rtBlock=\"rt-data-list-settings-aside\" ngProjectAs=\"rt-aside-footer\">\n        <rt-aside-footer>\n            <!-- \u041F\u043E\u0434\u043F\u0438\u0441\u044C \u043A\u043D\u043E\u043F\u043A\u0435 \u0440\u0438\u0441\u0443\u0435\u0442 \u0434\u0438\u0440\u0435\u043A\u0442\u0438\u0432\u0430 \u043A\u0438\u0442\u0430, \u043F\u043E\u044D\u0442\u043E\u043C\u0443 \u0442\u0435\u043B\u043E \u043F\u0443\u0441\u0442\u043E\u0435. -->\n            <button\n                rtButton\n                asideDismiss\n                type=\"button\"\n                appearance=\"text\"\n                qa-dataid=\"data-list-settings-cancel\"\n                [label]=\"cancelLabel()\"\n                (click)=\"onCancel()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n\n            <button\n                rtButton\n                rtElem=\"save\"\n                asidePrimary\n                type=\"button\"\n                qa-dataid=\"data-list-settings-save\"\n                [label]=\"saveLabel()\"\n                [disabled]=\"!isChanged()\"\n                (click)=\"onSave()\">\n                <!-- empty: label is drawn by the directive -->\n            </button>\n        </rt-aside-footer>\n    </ng-container>\n</rt-aside>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-list-settings-aside{display:flex;flex-direction:column;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switches{display:flex;flex-direction:column;gap:var(--rt-space-sm)}.rt-data-list-settings-aside__switch-row{display:flex;align-items:center;gap:var(--rt-space-md)}.rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-primary);font-size:var(--rt-text-sm)}.rt-data-list-settings-aside__save{text-transform:uppercase}.rt-data-list-settings-aside__columns{display:flex;flex-direction:column;padding:0;margin:0;gap:var(--rt-space-sm);list-style:none}.rt-data-list-settings-aside__column{--rt-data-list-settings-aside-radius: var(--rt-radius-md);--rt-data-list-settings-aside-divider-width: var(--rt-border-width-thin);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-lg);--rt-data-list-settings-aside-drag-duration: var(--rt-duration-base);--rt-data-list-settings-aside-padding-start: 0;--rt-data-list-settings-aside-padding-end: var(--rt-space-sm);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);display:flex;align-items:center;border-radius:var(--rt-data-list-settings-aside-radius);background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);gap:var(--rt-space-sm);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}.rt-data-list-settings-aside__column--hidden{--rt-data-list-settings-aside-color: var(--rt-color-text-muted)}.rt-data-list-settings-aside__column.cdk-drag-preview{box-sizing:border-box;box-shadow:var(--rt-data-list-settings-aside-drag-shadow)}.rt-data-list-settings-aside__column.cdk-drag-placeholder{opacity:0}.rt-data-list-settings-aside__column.cdk-drag-animating{transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__columns.cdk-drop-list-dragging .rt-data-list-settings-aside__column:not(.cdk-drag-placeholder){transition:transform var(--rt-data-list-settings-aside-drag-duration) ease-out}.rt-data-list-settings-aside__handle{display:inline-flex;align-items:center;align-self:stretch;justify-content:center;padding:0 var(--rt-space-sm);border:none;border-right:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);background:transparent;color:inherit;cursor:grab}.rt-data-list-settings-aside__handle:disabled{cursor:default}.rt-data-list-settings-aside__column-label{overflow:hidden;min-width:0;flex:1 1 auto;font-size:var(--rt-text-sm);text-overflow:ellipsis;white-space:nowrap}.rt-data-list-settings-aside__toggle{border-left:var(--rt-data-list-settings-aside-divider-width) solid var(--rt-color-border-subtle);padding-inline-start:var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside{--rt-aside-inset: var(--rt-space-xl);--rt-aside-content-gap: var(--rt-space-xl);--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-back-icon-size: 24px;--rt-data-list-settings-aside-header-height: 96px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header{--rt-aside-header-title-size: var(--rt-text-2xl);--rt-aside-header-title-weight: var(--rt-font-weight-semibold);--rt-aside-header-subtitle-size: var(--rt-text-md);--rt-aside-header-gap: var(--rt-space-md);--rt-aside-header-min-height: var(--rt-data-list-settings-aside-header-height)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color);--rt-icon-button-radius: var(--rt-radius-full)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-header__back .rt-icon{min-width:var(--rt-data-list-settings-aside-back-icon-size);min-height:var(--rt-data-list-settings-aside-back-icon-size)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer{--rt-aside-footer-border-width: 0}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer__content{justify-content:flex-end;gap:var(--rt-space-md)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button{--rt-btn-height: var(--rt-data-list-settings-aside-control-size);--rt-btn-radius: var(--rt-radius-full);--rt-btn-padding: 0 var(--rt-space-6);--rt-btn-font-size: var(--rt-text-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-aside-footer .rt-button--text{--rt-btn-padding: 0 var(--rt-space-sm)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-toggle-switch{--rt-toggle-track-width: 48px;--rt-toggle-track-height: 24px;--rt-toggle-thumb-size: 20px;--rt-toggle-thumb-inset: 2px;--rt-toggle-thumb-travel: 24px}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switches{gap:var(--rt-space-xl)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label{color:var(--rt-color-text-muted)}:is(.rt-preset-material,[data-preset=material]) .rt-data-list-settings-aside .rt-data-list-settings-aside__switch-label--on{color:var(--rt-color-text-primary)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *){--rt-data-list-settings-aside-radius: var(--rt-list-settings-item-radius);--rt-data-list-settings-aside-drag-shadow: var(--rt-shadow-xl);--rt-data-list-settings-aside-column-height: 48px;--rt-data-list-settings-aside-control-size: 36px;--rt-data-list-settings-aside-icon-size: 18px;--rt-data-list-settings-aside-padding-start: var(--rt-space-xs);--rt-data-list-settings-aside-padding-end: var(--rt-space-xs);--rt-data-list-settings-aside-color: var(--rt-color-text-primary);min-height:var(--rt-data-list-settings-aside-column-height);font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle{min-width:calc(var(--rt-data-list-settings-aside-control-size) + 2 * var(--rt-space-xs));height:var(--rt-data-list-settings-aside-control-size);align-self:center;padding:0 var(--rt-space-xs);border-right-color:var(--rt-color-border-strong);color:var(--rt-list-settings-icon-color);margin-inline-end:var(--rt-space-xs)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__handle .rt-icon{min-width:var(--rt-data-list-settings-aside-icon-size);min-height:var(--rt-data-list-settings-aside-icon-size)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__column-label{font-size:var(--rt-text-md)}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle{border-left:none;padding-inline-start:0}.rt-data-list-settings-aside__column:is(.rt-preset-material,.rt-preset-material *,[data-preset=material] *) .rt-data-list-settings-aside__toggle .rt-icon-button{--rt-icon-button-size-step: var(--rt-data-list-settings-aside-control-size);--rt-icon-button-color: var(--rt-list-settings-icon-color)}}.rt-data-list-settings-aside__column.cdk-drag-preview{background-color:var(--rt-list-settings-item-bg);color:var(--rt-data-list-settings-aside-color);padding-inline:var(--rt-data-list-settings-aside-padding-start) var(--rt-data-list-settings-aside-padding-end)}\n"] }]
+                    ], 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: () => [] });
 
 /** Отметки и исключения после смены страницы: пришедшие строки отмечаются, кроме исключённых. */