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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs +2 -2
  2. package/fesm2022/rt-tools-ui-kit-v2-ai-run-status.mjs.map +1 -1
  3. package/fesm2022/rt-tools-ui-kit-v2-core.mjs +19 -1
  4. package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
  5. package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs +14 -2
  6. package/fesm2022/rt-tools-ui-kit-v2-data-table.mjs.map +1 -1
  7. package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs +129 -18
  8. package/fesm2022/rt-tools-ui-kit-v2-dynamic-selector.mjs.map +1 -1
  9. package/fesm2022/rt-tools-ui-kit-v2-empty-state.mjs +2 -2
  10. package/fesm2022/rt-tools-ui-kit-v2-empty-state.mjs.map +1 -1
  11. package/fesm2022/rt-tools-ui-kit-v2-icon.mjs +14 -8
  12. package/fesm2022/rt-tools-ui-kit-v2-icon.mjs.map +1 -1
  13. package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs +4 -3
  14. package/fesm2022/rt-tools-ui-kit-v2-input-number.mjs.map +1 -1
  15. package/fesm2022/rt-tools-ui-kit-v2-input.mjs +4 -3
  16. package/fesm2022/rt-tools-ui-kit-v2-input.mjs.map +1 -1
  17. package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs +9 -4
  18. package/fesm2022/rt-tools-ui-kit-v2-rich-editor.mjs.map +1 -1
  19. package/fesm2022/rt-tools-ui-kit-v2-select.mjs +15 -1
  20. package/fesm2022/rt-tools-ui-kit-v2-select.mjs.map +1 -1
  21. package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs +15 -9
  22. package/fesm2022/rt-tools-ui-kit-v2-thread-list.mjs.map +1 -1
  23. package/package.json +1 -1
  24. package/rt-tools-ui-kit-v2-0.20.0.tgz +0 -0
  25. package/src/lib/components/ai-run-status/CONTEXT.md +6 -1
  26. package/src/lib/components/ai-run-status/rt-ai-run-status.component.scss +41 -2
  27. package/src/lib/components/data-table/CONTEXT.md +5 -0
  28. package/src/lib/components/dynamic-selector/CONTEXT.md +24 -3
  29. package/src/lib/components/dynamic-selector/dynamic-input/rt-dynamic-input.component.scss +4 -5
  30. package/src/lib/components/dynamic-selector/list/rt-dynamic-selector-list.component.scss +50 -6
  31. package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup-options.scss +108 -0
  32. package/src/lib/components/dynamic-selector/popup/rt-dynamic-selector-popup.component.scss +28 -23
  33. package/src/lib/components/dynamic-selector/rt-dynamic-selector.component.scss +4 -5
  34. package/src/lib/components/empty-state/CONTEXT.md +3 -1
  35. package/src/lib/components/empty-state/rt-empty-state.component.scss +9 -5
  36. package/src/lib/components/input/rt-input.component.scss +17 -0
  37. package/src/lib/components/input-number/rt-input-number.component.scss +15 -0
  38. package/src/lib/components/select/CONTEXT.md +2 -2
  39. package/src/lib/components/thread-list/CONTEXT.md +3 -1
  40. package/src/rich-editor/lib/components/ai-chat/CONTEXT.md +2 -0
  41. package/types/rt-tools-ui-kit-v2-core.d.ts +70 -5
  42. package/types/rt-tools-ui-kit-v2-data-table.d.ts +7 -0
  43. package/types/rt-tools-ui-kit-v2-dynamic-selector.d.ts +45 -3
  44. package/types/rt-tools-ui-kit-v2-icon.d.ts +3 -1
  45. package/types/rt-tools-ui-kit-v2-rich-editor.d.ts +4 -2
  46. package/types/rt-tools-ui-kit-v2-select.d.ts +6 -0
  47. package/types/rt-tools-ui-kit-v2-thread-list.d.ts +13 -8
  48. package/rt-tools-ui-kit-v2-0.19.0.tgz +0 -0
@@ -699,6 +699,7 @@ function sameFilter(a, b) {
699
699
  class RtDataTableFilterCellComponent {
700
700
  constructor() {
701
701
  this.#translate = inject(RT_KIT_TRANSLATOR);
702
+ this.#host = inject(ElementRef);
702
703
  this.#titleCase = new TitleCasePipe();
703
704
  /** Набранное, но ещё не зафиксированное значение текстового и числового поля. */
704
705
  this.#draft = null;
@@ -761,6 +762,7 @@ class RtDataTableFilterCellComponent {
761
762
  this.filterChange = output();
762
763
  }
763
764
  #translate;
765
+ #host;
764
766
  #titleCase;
765
767
  /** Набранное, но ещё не зафиксированное значение текстового и числового поля. */
766
768
  #draft;
@@ -802,6 +804,16 @@ class RtDataTableFilterCellComponent {
802
804
  }
803
805
  this.currentFilter.set({ ...current, value: next });
804
806
  }
807
+ /**
808
+ * Сброс крестиком переводит фокус в поле рядом.
809
+ *
810
+ * Без значения крестик выключается, и выключенная кнопка роняет фокус на `body`: человек с
811
+ * клавиатуры оказывается в начале страницы.
812
+ */
813
+ onClear() {
814
+ this.onValueChange('');
815
+ this.#host.nativeElement.querySelector(`.${BEM_BLOCK$1}__field button, .${BEM_BLOCK$1}__field input`)?.focus();
816
+ }
805
817
  onOperatorChange(operatorType) {
806
818
  const current = this.currentFilter();
807
819
  const filters = dataTableFiltersWithOperator(this.filterModel(), current, operatorType);
@@ -819,7 +831,7 @@ class RtDataTableFilterCellComponent {
819
831
  return key ? translate(key) : this.#titleCase.transform(operator);
820
832
  }
821
833
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RtDataTableFilterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
822
- 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:
834
+ 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:
823
835
  // components
824
836
  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:
825
837
  // directives
@@ -840,7 +852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
840
852
  BlockDirective,
841
853
  ElemDirective,
842
854
  FormsModule,
843
- ], 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"] }]
855
+ ], 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"] }]
844
856
  }], 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"] }] } });
845
857
 
846
858
  /**