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

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

@@ -430,7 +430,7 @@ class RtDataTableCellComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableCellComponent, isStandalone: true, selector: "rt-data-table-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "hovered.set(false)" }, properties: { "style.width": "column().width", "style.min-width": "column().minWidth" }, classAttribute: "rt-data-table-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" [style]=\"iconStyle()\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-cell-glyph\" [rtMod]=\"glyphMods()\" [style]=\"iconStyle()\">\n                {{ name }}\n            </span>\n        }\n    </ng-template>\n\n    @if (icon()?.placement === 'left') {\n        <span rtElem=\"prefix\" qa-dataid=\"data-table-cell-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    <div rtElem=\"title\" [rtMod]=\"titleMods()\">\n        <div rtElem=\"text\" qa-dataid=\"data-table-cell-text\" [rtTooltip]=\"hint()\">{{ value() | emptyToDash }}</div>\n    </div>\n\n    @if (icon()?.placement === 'right') {\n        <span rtElem=\"suffix\" qa-dataid=\"data-table-cell-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n    }\n\n    @if (copyable()) {\n        <rt-icon-button\n            rtElem=\"copy-button\"\n            rtDataTableStopRowClick\n            qa-dataid=\"data-table-cell-copy\"\n            size=\"sm\"\n            [rtMod]=\"copyMods()\"\n            [icon]=\"copyIcon()\"\n            [ariaLabel]=\"copyLabel()\"\n            [tooltip]=\"narrow() ? '' : copyLabel()\"\n            (clicked)=\"onCopy()\" />\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-cell{--rt-data-table-cell-transition-duration: var(--rt-duration-fast);--rt-data-table-cell-glyph-size: var(--rt-size-6);position:relative;display:flex;width:100%;height:100%;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-data-table-cell-glyph-size);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-data-table-cell-glyph-size);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-cell__prefix,.rt-data-table-cell__suffix{display:inline-flex;min-width:fit-content;flex:0 0 auto}.rt-data-table-cell__title{display:table;width:100%;table-layout:fixed}.rt-data-table-cell__title--align--left{text-align:left}.rt-data-table-cell__title--align--center{text-align:center}.rt-data-table-cell__title--align--right{text-align:right}.rt-data-table-cell__text{overflow:hidden;width:100%;padding:var(--rt-space-sm) var(--rt-space-sm) var(--rt-space-sm) 0;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-cell__copy-button{position:absolute;transition:visibility var(--rt-data-table-cell-transition-duration) linear;visibility:hidden}@media(hover:none){.rt-data-table-cell__copy-button{visibility:visible}}.rt-data-table-cell__copy-button{--rt-icon-button-color: var(--rt-list-copy-button-color)}.rt-data-table-cell__copy-button .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-copy-button-size);--rt-icon-button-radius: var(--rt-list-copy-button-radius);--rt-icon-button-color-hover: var(--rt-color-text-primary);--rt-icon-button-color-bg-hover: var(--rt-list-copy-button-bg-hover);background-color:var(--rt-list-copy-button-bg)}.rt-data-table-cell__copy-button--position--left{left:var(--rt-space-xs)}.rt-data-table-cell__copy-button--position--right{right:var(--rt-space-xs)}.rt-data-table-cell__copy-button--complete{cursor:not-allowed}.rt-data-table-cell__copy-button--visible{visibility:visible}}\n"], dependencies: [{ kind: "component", type: 
                 // components
-                RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: 
+                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: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RtDataTableStopRowClickDirective, selector: "[rtDataTableStopRowClick]" }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: 
                 // pipes
@@ -571,7 +571,7 @@ class RtDataTableHeaderCellComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableHeaderCellComponent, isStandalone: true, selector: "rt-data-table-header-cell", inputs: { headerModel: { classPropertyName: "headerModel", publicName: "headerModel", isSignal: true, isRequired: true, transformFunction: null }, sortModel: { classPropertyName: "sortModel", publicName: "sortModel", isSignal: true, isRequired: true, transformFunction: null }, currentSortModel: { classPropertyName: "currentSortModel", publicName: "currentSortModel", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange" }, host: { listeners: { "click": "onClick()", "keydown.enter": "onKey($event)", "keydown.space": "onKey($event)" }, properties: { "style.text-align": "headerModel().align", "attr.tabindex": "sortable() ? 0 : null", "attr.role": "sortable() ? \"button\" : null" }, classAttribute: "rt-data-table-header-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-header-cell\">\n    <ng-template #iconTpl>\n        @if (iconTemplate(); as template) {\n            <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"iconContext()\" />\n        } @else if (kitIcon(); as name) {\n            <rt-icon size=\"lg\" [name]=\"name\" [fill]=\"icon()?.outlined !== true\" />\n        } @else if (glyph(); as name) {\n            <span rtElem=\"glyph\" aria-hidden=\"true\" qa-dataid=\"data-table-header-glyph\" [rtMod]=\"glyphMods()\">{{ name }}</span>\n        }\n    </ng-template>\n\n    <div rtElem=\"label\" [rtMod]=\"labelMods()\">\n        @if (icon()?.placement === 'left') {\n            <span rtElem=\"prefix\" qa-dataid=\"data-table-header-prefix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n        }\n\n        <div\n            rtElem=\"text\"\n            qa-dataid=\"data-table-header-text\"\n            [class]=\"[headerModel().className] | concatClasses\"\n            [rtTooltip]=\"headerModel().tooltip ?? ''\">\n            {{ headerModel().label }}\n        </div>\n\n        @if (icon()?.placement === 'right') {\n            <span rtElem=\"suffix\" qa-dataid=\"data-table-header-suffix\"><ng-container [ngTemplateOutlet]=\"iconTpl\" /></span>\n        }\n    </div>\n\n    @if (sortModel()) {\n        <div rtElem=\"arrows\" qa-dataid=\"data-table-header-sort\" [rtMod]=\"arrowsMods()\">\n            <div rtElem=\"arrow\" [rtMod]=\"descMods()\"></div>\n            <div rtElem=\"arrow\" [rtMod]=\"ascMods()\"></div>\n        </div>\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-header-cell{--rt-data-table-header-cell-arrow-side: var(--rt-border-width-thick);--rt-data-table-header-cell-arrow-height: var(--rt-size-1);--rt-data-table-header-cell-focus-shadow: var(--rt-shadow-focus-ring);display:flex;align-items:center;justify-content:space-between;cursor:pointer}.rt-data-table-header-cell:hover .rt-data-table-header-cell__arrows,.rt-data-table-header-cell:focus-visible .rt-data-table-header-cell__arrows{visibility:visible}.rt-data-table-header-cell:focus-visible{box-shadow:var(--rt-data-table-header-cell-focus-shadow);outline:none}.rt-data-table-header-cell__label{display:flex;flex-grow:1;align-items:center;gap:var(--rt-space-sm)}.rt-data-table-header-cell__label--align--left{justify-content:flex-start}.rt-data-table-header-cell__label--align--center{justify-content:center}.rt-data-table-header-cell__label--align--right{justify-content:flex-end}.rt-data-table-header-cell__prefix,.rt-data-table-header-cell__suffix{display:inline-flex;min-width:fit-content}.rt-data-table-header-cell__glyph{display:inline-block;overflow:hidden;width:var(--rt-size-6);font-family:Material Symbols Outlined,sans-serif;font-feature-settings:\"liga\";font-size:var(--rt-size-6);font-style:normal;font-weight:var(--rt-font-weight-regular);letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap}.rt-data-table-header-cell__glyph--filled{font-variation-settings:\"FILL\" 1}.rt-data-table-header-cell__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rt-data-table-header-cell__arrows{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-left:var(--rt-space-md);visibility:hidden}.rt-data-table-header-cell__arrows--active{visibility:visible}.rt-data-table-header-cell__arrow{width:0;height:0;border-right:var(--rt-data-table-header-cell-arrow-side) solid transparent;border-bottom:var(--rt-data-table-header-cell-arrow-height) solid var(--rt-color-text-muted);border-left:var(--rt-data-table-header-cell-arrow-side) solid transparent}.rt-data-table-header-cell__arrow--second{margin-top:var(--rt-space-2xs);transform:scaleY(-1)}.rt-data-table-header-cell__arrow--active{border-bottom-color:var(--rt-color-text-primary)}}\n"], dependencies: [{ kind: "component", type: 
                 // components
-                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: 
+                RtIconComponent, selector: "rt-icon", inputs: ["name", "glyph", "glyphStrategy", "size", "color", "fill", "spin", "rotate"] }, { kind: "directive", type: 
                 // directives
                 BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RtTooltipDirective, selector: "[rtTooltip]", inputs: ["rtTooltip", "rtTooltipPlacement", "rtTooltipWhenTruncated"], exportAs: ["rtTooltip"] }, { kind: "pipe", type: 
                 // pipes
@@ -699,6 +699,7 @@ function sameFilter(a, b) {
 class RtDataTableFilterCellComponent {
     constructor() {
         this.#translate = inject(RT_KIT_TRANSLATOR);
+        this.#host = inject(ElementRef);
         this.#titleCase = new TitleCasePipe();
         /** Набранное, но ещё не зафиксированное значение текстового и числового поля. */
         this.#draft = null;
@@ -761,6 +762,7 @@ class RtDataTableFilterCellComponent {
         this.filterChange = output();
     }
     #translate;
+    #host;
     #titleCase;
     /** Набранное, но ещё не зафиксированное значение текстового и числового поля. */
     #draft;
@@ -802,6 +804,16 @@ class RtDataTableFilterCellComponent {
         }
         this.currentFilter.set({ ...current, value: next });
     }
+    /**
+     * Сброс крестиком переводит фокус в поле рядом.
+     *
+     * Без значения крестик выключается, и выключенная кнопка роняет фокус на `body`: человек с
+     * клавиатуры оказывается в начале страницы.
+     */
+    onClear() {
+        this.onValueChange('');
+        this.#host.nativeElement.querySelector(`.${BEM_BLOCK$1}__field button, .${BEM_BLOCK$1}__field input`)?.focus();
+    }
     onOperatorChange(operatorType) {
         const current = this.currentFilter();
         const filters = dataTableFiltersWithOperator(this.filterModel(), current, operatorType);
@@ -819,7 +831,7 @@ class RtDataTableFilterCellComponent {
         return key ? translate(key) : this.#titleCase.transform(operator);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableFilterCellComponent, isStandalone: true, selector: "rt-data-table-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: false, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "rt-data-table-filter-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-filter-cell\">\n    @if (filterOperators().length) {\n        <rt-menu qa-dataid=\"data-table-filter-operator\" align=\"start\" [icon]=\"operatorIcon()\" [ariaLabel]=\"operatorLabel()\">\n            @for (item of operatorItems(); track item.operator) {\n                <rt-menu-item\n                    qa-dataid=\"data-table-filter-operator-item\"\n                    [icon]=\"item.icon\"\n                    [label]=\"item.label\"\n                    (selected)=\"onOperatorChange(item.operator)\" />\n            }\n        </rt-menu>\n    }\n\n    @switch (filterType()) {\n        @case (filterTypes.TEXT) {\n            <rt-input\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-input\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"currentFilter().value\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.NUMBER) {\n            <rt-input-number\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-number\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"number()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onNumberDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.DATE) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-date-picker\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-date\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [ngModel]=\"day()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDayChange($event)\" />\n        }\n        @case (filterTypes.SELECT) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-select\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-select\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [options]=\"selectOptions()\"\n                [placeholder]=\"selectPlaceholder()\"\n                [ngModel]=\"currentFilter().value || null\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (selectionChange)=\"onValueChange($event)\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-filter-cell{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-data-table-filter-cell__field{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);--rt-input-line-height: var(--rt-list-filter-line-height);min-width:0;flex-grow:1}.rt-data-table-filter-cell .rt-data-table-filter-cell__field{width:calc(180px + 2 * var(--rt-space-4))}.rt-data-table-filter-cell rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-filter-cell .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-filter-cell .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}}\n"], dependencies: [{ kind: "component", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RtDataTableFilterCellComponent, isStandalone: true, selector: "rt-data-table-filter-cell", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, filterProperty: { classPropertyName: "filterProperty", publicName: "filterProperty", isSignal: true, isRequired: true, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: true, transformFunction: null }, filterModel: { classPropertyName: "filterModel", publicName: "filterModel", isSignal: true, isRequired: false, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: false, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, filterSelectOptions: { classPropertyName: "filterSelectOptions", publicName: "filterSelectOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, host: { classAttribute: "rt-data-table-filter-cell" }, ngImport: i0, template: "<ng-container rtBlock=\"rt-data-table-filter-cell\">\n    @if (filterOperators().length) {\n        <rt-menu qa-dataid=\"data-table-filter-operator\" align=\"start\" [icon]=\"operatorIcon()\" [ariaLabel]=\"operatorLabel()\">\n            @for (item of operatorItems(); track item.operator) {\n                <rt-menu-item\n                    qa-dataid=\"data-table-filter-operator-item\"\n                    [icon]=\"item.icon\"\n                    [label]=\"item.label\"\n                    (selected)=\"onOperatorChange(item.operator)\" />\n            }\n        </rt-menu>\n    }\n\n    @switch (filterType()) {\n        @case (filterTypes.TEXT) {\n            <rt-input\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-input\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"currentFilter().value\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.NUMBER) {\n            <rt-input-number\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-number\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"number()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onNumberDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.DATE) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onClear()\" />\n\n            <rt-date-picker\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-date\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [ngModel]=\"day()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDayChange($event)\" />\n        }\n        @case (filterTypes.SELECT) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onClear()\" />\n\n            <rt-select\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-select\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [options]=\"selectOptions()\"\n                [placeholder]=\"selectPlaceholder()\"\n                [ngModel]=\"currentFilter().value || null\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (selectionChange)=\"onValueChange($event)\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-filter-cell{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-data-table-filter-cell__field{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);--rt-input-line-height: var(--rt-list-filter-line-height);min-width:0;flex-grow:1}.rt-data-table-filter-cell .rt-data-table-filter-cell__field{width:calc(180px + 2 * var(--rt-space-4))}.rt-data-table-filter-cell rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-filter-cell .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-filter-cell .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}}\n"], dependencies: [{ kind: "component", type: 
                 // components
                 RtDatePickerComponent, selector: "rt-date-picker", inputs: ["appearance", "type", "min", "max", "minuteStep"] }, { kind: "component", type: RtIconButtonComponent, selector: "rt-icon-button", inputs: ["icon", "glyph", "ariaLabel", "variant", "iconColor", "iconFill", "size", "iconSize", "type", "tooltip", "tabIndex", "loading", "disabled", "active", "indicator"], outputs: ["clicked"] }, { kind: "component", type: RtInputComponent, selector: "rt-input", inputs: ["appearance", "type", "placeholder", "iconLeft", "iconRight", "passwordToggle", "autocomplete"] }, { kind: "component", type: RtInputNumberComponent, selector: "rt-input-number", inputs: ["appearance", "iconLeft", "prefix", "placeholder", "min", "max", "minFractionDigits", "maxFractionDigits", "grouped"] }, { kind: "component", type: RtMenuComponent, selector: "rt-menu", inputs: ["icon", "ariaLabel", "align", "panelClass", "size", "disabled"], outputs: ["openedChange"] }, { kind: "component", type: RtMenuItemComponent, selector: "rt-menu-item", inputs: ["icon", "label", "danger", "success", "glyph", "fill", "current", "disabled", "confirmMessage", "confirmTitle", "confirmLabel", "confirmCancelLabel", "confirmTone", "link"], outputs: ["selected"] }, { kind: "component", type: RtSelectComponent, selector: "rt-select", inputs: ["appearance", "options", "placeholder", "iconLeft", "filter", "filterPlaceholder", "panelWidth", "panelMaxHeight"], outputs: ["selectionChange"] }, { kind: "directive", type: 
                 // directives
@@ -840,7 +852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         BlockDirective,
                         ElemDirective,
                         FormsModule,
-                    ], host: { class: BEM_BLOCK$1 }, template: "<ng-container rtBlock=\"rt-data-table-filter-cell\">\n    @if (filterOperators().length) {\n        <rt-menu qa-dataid=\"data-table-filter-operator\" align=\"start\" [icon]=\"operatorIcon()\" [ariaLabel]=\"operatorLabel()\">\n            @for (item of operatorItems(); track item.operator) {\n                <rt-menu-item\n                    qa-dataid=\"data-table-filter-operator-item\"\n                    [icon]=\"item.icon\"\n                    [label]=\"item.label\"\n                    (selected)=\"onOperatorChange(item.operator)\" />\n            }\n        </rt-menu>\n    }\n\n    @switch (filterType()) {\n        @case (filterTypes.TEXT) {\n            <rt-input\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-input\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"currentFilter().value\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.NUMBER) {\n            <rt-input-number\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-number\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"number()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onNumberDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.DATE) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-date-picker\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-date\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [ngModel]=\"day()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDayChange($event)\" />\n        }\n        @case (filterTypes.SELECT) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onValueChange('')\" />\n\n            <rt-select\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-select\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [options]=\"selectOptions()\"\n                [placeholder]=\"selectPlaceholder()\"\n                [ngModel]=\"currentFilter().value || null\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (selectionChange)=\"onValueChange($event)\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-filter-cell{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-data-table-filter-cell__field{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);--rt-input-line-height: var(--rt-list-filter-line-height);min-width:0;flex-grow:1}.rt-data-table-filter-cell .rt-data-table-filter-cell__field{width:calc(180px + 2 * var(--rt-space-4))}.rt-data-table-filter-cell rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-filter-cell .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-filter-cell .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}}\n"] }]
+                    ], host: { class: BEM_BLOCK$1 }, template: "<ng-container rtBlock=\"rt-data-table-filter-cell\">\n    @if (filterOperators().length) {\n        <rt-menu qa-dataid=\"data-table-filter-operator\" align=\"start\" [icon]=\"operatorIcon()\" [ariaLabel]=\"operatorLabel()\">\n            @for (item of operatorItems(); track item.operator) {\n                <rt-menu-item\n                    qa-dataid=\"data-table-filter-operator-item\"\n                    [icon]=\"item.icon\"\n                    [label]=\"item.label\"\n                    (selected)=\"onOperatorChange(item.operator)\" />\n            }\n        </rt-menu>\n    }\n\n    @switch (filterType()) {\n        @case (filterTypes.TEXT) {\n            <rt-input\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-input\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"currentFilter().value\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.NUMBER) {\n            <rt-input-number\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-number\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [placeholder]=\"valuePlaceholder()\"\n                [ngModel]=\"number()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onNumberDraft($event)\"\n                (keydown.enter)=\"onCommit()\"\n                (focusout)=\"onCommit()\" />\n        }\n        @case (filterTypes.DATE) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onClear()\" />\n\n            <rt-date-picker\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-date\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [ngModel]=\"day()\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (ngModelChange)=\"onDayChange($event)\" />\n        }\n        @case (filterTypes.SELECT) {\n            <rt-icon-button\n                qa-dataid=\"data-table-filter-clear\"\n                icon=\"close\"\n                [ariaLabel]=\"clearLabel()\"\n                [tooltip]=\"clearLabel()\"\n                [disabled]=\"!hasValue()\"\n                (clicked)=\"onClear()\" />\n\n            <rt-select\n                rtElem=\"field\"\n                qa-dataid=\"data-table-filter-select\"\n                size=\"sm\"\n                [appearance]=\"appearance()\"\n                [clearable]=\"false\"\n                [options]=\"selectOptions()\"\n                [placeholder]=\"selectPlaceholder()\"\n                [ngModel]=\"currentFilter().value || null\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                (selectionChange)=\"onValueChange($event)\" />\n        }\n    }\n</ng-container>\n", styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-data-table-filter-cell{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:var(--rt-space-sm)}.rt-data-table-filter-cell__field{--rt-input-height-sm: var(--rt-list-search-height);--rt-input-font-size: var(--rt-list-search-font-size);--rt-input-color-border: var(--rt-list-search-color-border);--rt-input-color-bg: var(--rt-list-search-color-bg);--rt-input-color-text-placeholder: var(--rt-list-search-color-placeholder);--rt-input-line-height: var(--rt-list-filter-line-height);min-width:0;flex-grow:1}.rt-data-table-filter-cell .rt-data-table-filter-cell__field{width:calc(180px + 2 * var(--rt-space-4))}.rt-data-table-filter-cell rt-icon-button{--rt-icon-button-color: var(--rt-list-table-icon-color)}.rt-data-table-filter-cell .rt-icon-button{--rt-icon-button-size-step: var(--rt-list-table-button-size);--rt-icon-button-radius: var(--rt-list-table-button-radius)}.rt-data-table-filter-cell .rt-icon-button__icon{min-width:var(--rt-list-table-icon-size);min-height:var(--rt-list-table-icon-size)}}\n"] }]
         }], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], filterProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterProperty", required: true }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: true }] }], filterModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModel", required: false }] }], defaultFilterOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFilterOperator", required: false }] }], filterOperators: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOperators", required: false }] }], filterSelectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterSelectOptions", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
 
 /**