@progress/kendo-angular-grid 19.0.0-develop.2 → 19.0.0-develop.21

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 (131) hide show
  1. package/adaptiveness/adaptive-mode.d.ts +12 -0
  2. package/adaptiveness/adaptive-renderer.component.d.ts +84 -0
  3. package/column-menu/column-chooser.component.d.ts +4 -0
  4. package/column-menu/column-list.component.d.ts +9 -3
  5. package/column-menu/column-menu-item.component.d.ts +38 -2
  6. package/column-menu/column-menu-item.directive.d.ts +5 -2
  7. package/column-menu/column-menu.component.d.ts +4 -2
  8. package/columns/column-base.d.ts +5 -0
  9. package/columns/span-column.component.d.ts +2 -2
  10. package/common/adaptiveness.service.d.ts +50 -0
  11. package/common/single-popup.service.d.ts +3 -1
  12. package/common/toolbar-tool-base.directive.d.ts +26 -0
  13. package/directives.d.ts +12 -5
  14. package/dragdrop/drag-hint.service.d.ts +3 -2
  15. package/editing/add-command-tool.directive.d.ts +7 -6
  16. package/editing/cancel-command-tool.directive.d.ts +38 -0
  17. package/editing/edit-command-tool.directive.d.ts +38 -0
  18. package/editing/edit.service.d.ts +1 -1
  19. package/editing/remove-command-tool.directive.d.ts +39 -0
  20. package/editing/save-command-tool.directive.d.ts +38 -0
  21. package/editing/toolbar-editing-tool-base.directive.d.ts +29 -0
  22. package/editing-directives/editing-directive-base.d.ts +4 -1
  23. package/editing-directives/external-editing.directive.d.ts +3 -1
  24. package/esm2022/adaptiveness/adaptive-mode.mjs +5 -0
  25. package/esm2022/adaptiveness/adaptive-renderer.component.mjs +1106 -0
  26. package/esm2022/column-menu/column-chooser.component.mjs +13 -11
  27. package/esm2022/column-menu/column-list.component.mjs +43 -8
  28. package/esm2022/column-menu/column-menu-autosize-all.component.mjs +1 -1
  29. package/esm2022/column-menu/column-menu-autosize.component.mjs +1 -1
  30. package/esm2022/column-menu/column-menu-chooser.component.mjs +1 -1
  31. package/esm2022/column-menu/column-menu-container.component.mjs +1 -1
  32. package/esm2022/column-menu/column-menu-filter.component.mjs +1 -1
  33. package/esm2022/column-menu/column-menu-item.component.mjs +106 -11
  34. package/esm2022/column-menu/column-menu-item.directive.mjs +14 -5
  35. package/esm2022/column-menu/column-menu-lock.component.mjs +1 -1
  36. package/esm2022/column-menu/column-menu-position.component.mjs +1 -1
  37. package/esm2022/column-menu/column-menu-sort.component.mjs +1 -1
  38. package/esm2022/column-menu/column-menu-stick.component.mjs +1 -1
  39. package/esm2022/column-menu/column-menu.component.mjs +68 -44
  40. package/esm2022/column-resizing/column-handle.directive.mjs +2 -2
  41. package/esm2022/columns/column-base.mjs +9 -0
  42. package/esm2022/columns/columns-container.mjs +1 -1
  43. package/esm2022/columns/span-column.component.mjs +9 -9
  44. package/esm2022/common/adaptiveness.service.mjs +72 -0
  45. package/esm2022/common/single-popup.service.mjs +9 -3
  46. package/esm2022/common/toolbar-tool-base.directive.mjs +81 -0
  47. package/esm2022/directives.mjs +18 -3
  48. package/esm2022/dragdrop/drag-hint.service.mjs +7 -4
  49. package/esm2022/editing/add-command-tool.directive.mjs +12 -15
  50. package/esm2022/editing/cancel-command-tool.directive.mjs +64 -0
  51. package/esm2022/editing/edit-command-tool.directive.mjs +59 -0
  52. package/esm2022/editing/form/form-formfield.component.mjs +1 -1
  53. package/esm2022/editing/remove-command-tool.directive.mjs +60 -0
  54. package/esm2022/editing/remove-command.directive.mjs +1 -0
  55. package/esm2022/editing/save-command-tool.directive.mjs +64 -0
  56. package/esm2022/editing/toolbar-editing-tool-base.directive.mjs +89 -0
  57. package/esm2022/editing-directives/editing-directive-base.mjs +5 -2
  58. package/esm2022/editing-directives/external-editing.directive.mjs +28 -14
  59. package/esm2022/excel/excel-command-tool.directive.mjs +12 -17
  60. package/esm2022/filtering/cell/autocomplete-filter-cell.component.mjs +1 -1
  61. package/esm2022/filtering/cell/boolean-filter-cell.component.mjs +1 -1
  62. package/esm2022/filtering/cell/date-filter-cell.component.mjs +1 -1
  63. package/esm2022/filtering/cell/filter-cell-operators.component.mjs +1 -1
  64. package/esm2022/filtering/filter-input.directive.mjs +14 -2
  65. package/esm2022/filtering/menu/boolean-filter-menu.component.mjs +2 -2
  66. package/esm2022/filtering/menu/date-filter-menu-input.component.mjs +3 -1
  67. package/esm2022/filtering/menu/date-filter-menu.component.mjs +5 -1
  68. package/esm2022/filtering/menu/filter-menu-container.component.mjs +21 -10
  69. package/esm2022/filtering/menu/filter-menu-input-wrapper.component.mjs +25 -5
  70. package/esm2022/filtering/menu/filter-menu.component.mjs +44 -29
  71. package/esm2022/filtering/menu/numeric-filter-menu.component.mjs +5 -1
  72. package/esm2022/filtering/menu/string-filter-menu.component.mjs +5 -1
  73. package/esm2022/grid.component.mjs +294 -74
  74. package/esm2022/grid.module.mjs +114 -101
  75. package/esm2022/index.mjs +10 -1
  76. package/esm2022/localization/messages.mjs +104 -2
  77. package/esm2022/navigation/navigation.service.mjs +1 -1
  78. package/esm2022/navigation/toolbar-tool-name.mjs +17 -0
  79. package/esm2022/package-metadata.mjs +2 -2
  80. package/esm2022/pdf/pdf-command-tool.directive.mjs +12 -15
  81. package/esm2022/rendering/cell.component.mjs +4 -4
  82. package/esm2022/rendering/header/header.component.mjs +1 -1
  83. package/esm2022/rendering/list.component.mjs +1 -1
  84. package/esm2022/rendering/table-body.component.mjs +11 -3
  85. package/esm2022/rendering/toolbar/tools/column-chooser-tool.directive.mjs +201 -0
  86. package/esm2022/rendering/toolbar/tools/filter-command-tool.directive.mjs +49 -33
  87. package/esm2022/rendering/toolbar/tools/filter-tool-wrapper.component.mjs +28 -8
  88. package/esm2022/rendering/toolbar/tools/filter-toolbar-tool.component.mjs +26 -4
  89. package/esm2022/rendering/toolbar/tools/sort-command-tool.directive.mjs +33 -17
  90. package/esm2022/rendering/toolbar/tools/sort-toolbar-tool.component.mjs +24 -8
  91. package/esm2022/row-reordering/row-reorder.service.mjs +15 -0
  92. package/esm2022/selection/selection.service.mjs +11 -0
  93. package/esm2022/state-management/grid-state.models.mjs +26 -0
  94. package/esm2022/state-management/redo-command-tool.mjs +66 -0
  95. package/esm2022/state-management/undo-command-tool.mjs +66 -0
  96. package/esm2022/state-management/undo-redo.directive.mjs +178 -0
  97. package/esm2022/state-management/undo-redo.service.mjs +22 -0
  98. package/esm2022/state-management/undo-redo.stack.mjs +232 -0
  99. package/esm2022/utils.mjs +13 -13
  100. package/excel/excel-command-tool.directive.d.ts +5 -5
  101. package/fesm2022/progress-kendo-angular-grid.mjs +4074 -1372
  102. package/filtering/filter-input.directive.d.ts +1 -0
  103. package/filtering/menu/date-filter-menu-input.component.d.ts +1 -1
  104. package/filtering/menu/filter-menu-container.component.d.ts +14 -4
  105. package/filtering/menu/filter-menu-input-wrapper.component.d.ts +8 -3
  106. package/filtering/menu/filter-menu.component.d.ts +6 -3
  107. package/grid.component.d.ts +73 -33
  108. package/grid.module.d.ts +107 -100
  109. package/index.d.ts +9 -1
  110. package/localization/messages.d.ts +70 -2
  111. package/navigation/toolbar-tool-name.d.ts +17 -0
  112. package/package.json +21 -20
  113. package/pdf/pdf-command-tool.directive.d.ts +6 -5
  114. package/rendering/cell.component.d.ts +1 -1
  115. package/{column-menu → rendering/toolbar/tools}/column-chooser-tool.directive.d.ts +17 -6
  116. package/rendering/toolbar/tools/filter-command-tool.directive.d.ts +4 -1
  117. package/rendering/toolbar/tools/filter-tool-wrapper.component.d.ts +6 -5
  118. package/rendering/toolbar/tools/filter-toolbar-tool.component.d.ts +4 -1
  119. package/rendering/toolbar/tools/sort-command-tool.directive.d.ts +4 -1
  120. package/rendering/toolbar/tools/sort-toolbar-tool.component.d.ts +5 -1
  121. package/row-reordering/row-reorder.service.d.ts +2 -0
  122. package/schematics/ngAdd/index.js +4 -4
  123. package/selection/selection.service.d.ts +1 -0
  124. package/state-management/grid-state.models.d.ts +58 -0
  125. package/state-management/redo-command-tool.d.ts +38 -0
  126. package/state-management/undo-command-tool.d.ts +38 -0
  127. package/state-management/undo-redo.directive.d.ts +51 -0
  128. package/state-management/undo-redo.service.d.ts +19 -0
  129. package/state-management/undo-redo.stack.d.ts +104 -0
  130. package/utils.d.ts +11 -5
  131. package/esm2022/column-menu/column-chooser-tool.directive.mjs +0 -172
@@ -81,7 +81,7 @@ export class BooleanFilterCellComponent extends BooleanFilterComponent {
81
81
  [value]="currentFilter?.value">
82
82
  </kendo-dropdownlist>
83
83
  </kendo-grid-filter-wrapper-cell>
84
- `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }] });
84
+ `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }] });
85
85
  }
86
86
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BooleanFilterCellComponent, decorators: [{
87
87
  type: Component,
@@ -94,7 +94,7 @@ export class DateFilterCellComponent extends DateFilterComponent {
94
94
  ></kendo-datepicker-messages>
95
95
  </kendo-datepicker>
96
96
  </kendo-grid-filter-wrapper-cell>
97
- `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
97
+ `, isInline: true, dependencies: [{ kind: "component", type: FilterCellWrapperComponent, selector: "kendo-grid-filter-wrapper-cell", inputs: ["showOperators"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
98
98
  }
99
99
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterCellComponent, decorators: [{
100
100
  type: Component,
@@ -175,7 +175,7 @@ export class FilterCellOperatorsComponent {
175
175
  [size]="size"
176
176
  (click)="clearClick()"
177
177
  (keydown)="clearKeydown($event)"></button>
178
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
178
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n [kendoGridEditCommand],\n [kendoGridRemoveCommand],\n [kendoGridSaveCommand],\n [kendoGridCancelCommand],\n [kendoGridSelectionCheckbox]\n ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
179
179
  }
180
180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellOperatorsComponent, decorators: [{
181
181
  type: Component,
@@ -13,6 +13,7 @@ import * as i0 from "@angular/core";
13
13
  * @hidden
14
14
  */
15
15
  export class FilterInputDirective {
16
+ ngZone;
16
17
  element;
17
18
  renderer;
18
19
  change = new EventEmitter();
@@ -31,12 +32,19 @@ export class FilterInputDirective {
31
32
  changeRequestsSubscription;
32
33
  unsubscribeEvents;
33
34
  constructor(valueAccessors, ngZone, element, renderer) {
35
+ this.ngZone = ngZone;
34
36
  this.element = element;
35
37
  this.renderer = renderer;
36
38
  this.accessor = valueAccessors[0];
37
39
  ngZone.runOutsideAngular(() => {
38
40
  const unsubscribeStart = renderer.listen(element.nativeElement, 'compositionstart', () => this.composing = true);
39
- const unsubscribeEnd = renderer.listen(element.nativeElement, 'compositionend', () => this.composing = false);
41
+ const unsubscribeEnd = renderer.listen(element.nativeElement, 'compositionend', (event) => {
42
+ this.composing = false;
43
+ const value = event.target?.value;
44
+ this.filterDelay > 0 ?
45
+ this.changeRequests.next(value) :
46
+ this.change.emit(value);
47
+ });
40
48
  this.unsubscribeEvents = () => {
41
49
  unsubscribeStart();
42
50
  unsubscribeEnd();
@@ -63,7 +71,11 @@ export class FilterInputDirective {
63
71
  subscribeChanges() {
64
72
  this.changeRequestsSubscription = this.changeRequests
65
73
  .pipe(debounceTime(this.filterDelay), filter(() => !this.composing))
66
- .subscribe(x => this.change.emit(x));
74
+ .subscribe((x) => {
75
+ this.ngZone.run(() => {
76
+ this.change.emit(x);
77
+ });
78
+ });
67
79
  }
68
80
  unsubscribeChanges() {
69
81
  if (this.changeRequestsSubscription) {
@@ -119,7 +119,7 @@ export class BooleanFilterMenuComponent extends BooleanFilterComponent {
119
119
  (change)="onChange(item.value, input)"
120
120
  (keydown.shift.tab)="onShiftTab($event)"
121
121
  ></kendo-radiobutton>
122
- <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
122
+ <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
123
123
  </li>
124
124
  </ul>
125
125
  `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: RadioButtonComponent, selector: "kendo-radiobutton", inputs: ["checked"], outputs: ["checkedChange"], exportAs: ["kendoRadioButton"] }, { kind: "directive", type: BooleanFilterRadioButtonDirective, selector: "[kendoFilterMenuRadioButton]", inputs: ["columnLabel"] }] });
@@ -141,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
141
141
  (change)="onChange(item.value, input)"
142
142
  (keydown.shift.tab)="onShiftTab($event)"
143
143
  ></kendo-radiobutton>
144
- <label class="k-radio-label" [attr.for]="radioId(item.value)">{{item.text}}</label>
144
+ <label class="k-radio-label" [attr.for]="input.focusableId">{{item.text}}</label>
145
145
  </li>
146
146
  </ul>
147
147
  `,
@@ -76,6 +76,7 @@ export class DateFilterMenuInputComponent {
76
76
  <kendo-datepicker
77
77
  #picker
78
78
  kendoFilterInput
79
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
79
80
  [columnLabel]="columnLabel"
80
81
  [filterDelay]="0"
81
82
  (open)="open(picker)"
@@ -95,7 +96,7 @@ export class DateFilterMenuInputComponent {
95
96
  ></kendo-datepicker-messages>
96
97
  </kendo-datepicker>
97
98
  </kendo-grid-filter-menu-input-wrapper>
98
- `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "subtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
99
+ `, isInline: true, dependencies: [{ kind: "component", type: FilterMenuInputWrapperComponent, selector: "kendo-grid-filter-menu-input-wrapper", inputs: ["filterService", "isFirstDropDown", "menuTabbingService", "currentFilter"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: FilterInputDirective, selector: "[kendoFilterInput]", inputs: ["filterDelay", "columnLabel", "value"] }, { kind: "component", type: DatePickerCustomMessagesComponent, selector: "kendo-datepicker-messages" }] });
99
100
  }
100
101
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuInputComponent, decorators: [{
101
102
  type: Component,
@@ -114,6 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
114
115
  <kendo-datepicker
115
116
  #picker
116
117
  kendoFilterInput
118
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
117
119
  [columnLabel]="columnLabel"
118
120
  [filterDelay]="0"
119
121
  (open)="open(picker)"
@@ -101,6 +101,8 @@ export class DateFilterMenuComponent extends DateFilterComponent {
101
101
  <kendo-dropdownlist
102
102
  *ngIf="extra"
103
103
  kendoFilterMenuDropDown
104
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
105
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
104
106
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
105
107
  class="k-filter-and"
106
108
  [data]="logicOperators"
@@ -128,7 +130,7 @@ export class DateFilterMenuComponent extends DateFilterComponent {
128
130
  [weekNumber]="weekNumber"
129
131
  [menuTabbingService]="menuTabbingService">
130
132
  </kendo-grid-date-filter-menu-input>
131
- `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
133
+ `, isInline: true, dependencies: [{ kind: "component", type: DateFilterMenuInputComponent, selector: "kendo-grid-date-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "menuTabbingService", "format", "formatPlaceholder", "placeholder", "min", "max", "activeView", "bottomView", "topView", "weekNumber", "isFirstDropDown"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
132
134
  }
133
135
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateFilterMenuComponent, decorators: [{
134
136
  type: Component,
@@ -156,6 +158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
156
158
  <kendo-dropdownlist
157
159
  *ngIf="extra"
158
160
  kendoFilterMenuDropDown
161
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
162
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
159
163
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
160
164
  class="k-filter-and"
161
165
  [data]="logicOperators"
@@ -13,16 +13,21 @@ import { ContextService } from '../../common/provider.service';
13
13
  import { FilterMenuHostDirective } from './filter-menu-host.directive';
14
14
  import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgClass } from '@angular/common';
15
15
  import { FormsModule } from '@angular/forms';
16
+ import { AdaptiveGridService } from '../../common/adaptiveness.service';
16
17
  import * as i0 from "@angular/core";
17
18
  import * as i1 from "../filter.service";
18
19
  import * as i2 from "../../common/provider.service";
19
20
  import * as i3 from "./menu-tabbing.service";
20
- import * as i4 from "@angular/forms";
21
+ import * as i4 from "../../common/adaptiveness.service";
22
+ import * as i5 from "@angular/forms";
21
23
  const isNoValueOperator = operator => (operator === "isnull"
22
24
  || operator === "isnotnull"
23
25
  || operator === "isempty"
24
26
  || operator === "isnotempty");
25
- const validFilters = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
27
+ /**
28
+ * @hidden
29
+ */
30
+ export const validFilters = ({ value, operator }) => !isNullOrEmptyString(value) || isNoValueOperator(operator);
26
31
  const trimFilters = filter => {
27
32
  filter.filters = filter.filters.filter(validFilters);
28
33
  return filter;
@@ -41,7 +46,10 @@ const findParent = (filters, field, parent) => {
41
46
  return acc;
42
47
  }, undefined);
43
48
  };
44
- const parentLogicOfDefault = (filter, field, def = "and") => {
49
+ /**
50
+ * @hidden
51
+ */
52
+ export const parentLogicOfDefault = (filter, field, def = "and") => {
45
53
  const parent = findParent(((filter || {}).filters || []), field);
46
54
  return isPresent(parent) ? parent.logic : def;
47
55
  };
@@ -53,6 +61,7 @@ export class FilterMenuContainerComponent {
53
61
  childService;
54
62
  ctx;
55
63
  cd;
64
+ adaptiveGridService;
56
65
  close = new EventEmitter();
57
66
  /**
58
67
  * The column with which the filter is associated.
@@ -100,12 +109,14 @@ export class FilterMenuContainerComponent {
100
109
  subscription;
101
110
  _templateContext = {};
102
111
  _filter;
103
- constructor(parentService, childService, ctx, cd, menuTabbingService) {
112
+ constructor(parentService, childService, ctx, cd, menuTabbingService, adaptiveGridService) {
104
113
  this.parentService = parentService;
105
114
  this.childService = childService;
106
115
  this.ctx = ctx;
107
116
  this.cd = cd;
117
+ this.adaptiveGridService = adaptiveGridService;
108
118
  this.menuTabbingService = menuTabbingService;
119
+ this.adaptiveGridService.filterMenuContainer = this;
109
120
  }
110
121
  ngOnInit() {
111
122
  this.subscription = this.childService.changes.subscribe(filter => this._childFilter = filter);
@@ -113,7 +124,7 @@ export class FilterMenuContainerComponent {
113
124
  }
114
125
  ngAfterViewChecked() {
115
126
  if (!this.menuTabbingService.isColumnMenu || (this.isLast && this.isExpanded)) {
116
- this.menuTabbingService.lastFocusable = this.resetButton.nativeElement;
127
+ this.menuTabbingService.lastFocusable = this.resetButton?.nativeElement;
117
128
  }
118
129
  }
119
130
  ngOnDestroy() {
@@ -175,7 +186,7 @@ export class FilterMenuContainerComponent {
175
186
  get filterText() {
176
187
  return this.ctx.localization.get("filterFilterButton");
177
188
  }
178
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }], target: i0.ɵɵFactoryTarget.Component });
189
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, deps: [{ token: i1.FilterService, skipSelf: true }, { token: i1.FilterService }, { token: i2.ContextService }, { token: i0.ChangeDetectorRef }, { token: i3.MenuTabbingService }, { token: i4.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
179
190
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuContainerComponent, isStandalone: true, selector: "kendo-grid-filter-menu-container", inputs: { column: "column", isLast: "isLast", isExpanded: "isExpanded", menuTabbingService: "menuTabbingService", filter: "filter", actionsClass: "actionsClass" }, outputs: { close: "close" }, providers: [
180
191
  FilterService,
181
192
  MenuTabbingService
@@ -202,7 +213,7 @@ export class FilterMenuContainerComponent {
202
213
  </ng-template>
203
214
  </ng-container>
204
215
  </ng-container>
205
- <div [ngClass]="actionsClass">
216
+ <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
206
217
  <button #filterButton
207
218
  type="submit"
208
219
  class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
@@ -216,7 +227,7 @@ export class FilterMenuContainerComponent {
216
227
  </div>
217
228
  </div>
218
229
  </form>
219
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
230
+ `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: FilterMenuHostDirective, selector: "[kendoFilterMenuHost]", inputs: ["filterService", "menuTabbingService"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
220
231
  }
221
232
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuContainerComponent, decorators: [{
222
233
  type: Component,
@@ -249,7 +260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
249
260
  </ng-template>
250
261
  </ng-container>
251
262
  </ng-container>
252
- <div [ngClass]="actionsClass">
263
+ <div *ngIf="!ctx.grid?.isActionSheetExpanded" [ngClass]="actionsClass">
253
264
  <button #filterButton
254
265
  type="submit"
255
266
  class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
@@ -269,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
269
280
  }]
270
281
  }], ctorParameters: function () { return [{ type: i1.FilterService, decorators: [{
271
282
  type: SkipSelf
272
- }] }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i0.ChangeDetectorRef }, { type: i3.MenuTabbingService }]; }, propDecorators: { close: [{
283
+ }] }, { type: i1.FilterService }, { type: i2.ContextService }, { type: i0.ChangeDetectorRef }, { type: i3.MenuTabbingService }, { type: i4.AdaptiveGridService }]; }, propDecorators: { close: [{
273
284
  type: Output
274
285
  }], column: [{
275
286
  type: Input
@@ -10,36 +10,52 @@ import { FilterInputWrapperComponent } from "../filter-input-wrapper.component";
10
10
  import { replaceMessagePlaceholder } from '../../utils';
11
11
  import { ContextService } from '../../common/provider.service';
12
12
  import { FilterMenuDropDownListDirective } from './filter-menu-dropdownlist.directive';
13
+ import { AdaptiveGridService } from '../../common/adaptiveness.service';
14
+ import { Subscription } from 'rxjs';
13
15
  import * as i0 from "@angular/core";
14
16
  import * as i1 from "../../common/provider.service";
17
+ import * as i2 from "../../common/adaptiveness.service";
15
18
  /**
16
19
  * @hidden
17
20
  */
18
21
  export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent {
19
22
  ctx;
23
+ adaptiveGridService;
20
24
  filterService;
21
25
  isFirstDropDown;
22
26
  menuTabbingService;
23
27
  firstOperatorDropDown;
24
28
  _currentFilter;
29
+ subs = new Subscription();
25
30
  /**
26
31
  * @hidden
27
32
  */
28
33
  get hostClasses() {
29
34
  return false;
30
35
  }
31
- constructor(ctx) {
36
+ constructor(ctx, adaptiveGridService) {
32
37
  super(null);
33
38
  this.ctx = ctx;
39
+ this.adaptiveGridService = adaptiveGridService;
34
40
  }
35
41
  ngAfterViewInit() {
36
42
  const shouldFocusFirstFocusable = this.isFirstDropDown && this.filterService?.menuTabbingService;
37
43
  const isTabbedInterface = this.menuTabbingService?.isTabbedInterface;
38
44
  if (shouldFocusFirstFocusable && !isTabbedInterface) {
39
45
  this.filterService.menuTabbingService.firstFocusable = this.firstOperatorDropDown;
40
- this.firstOperatorDropDown.focus();
46
+ if (this.ctx.grid?.isActionSheetExpanded) {
47
+ this.subs.add(this.adaptiveGridService.animationEnd.subscribe(() => {
48
+ this.firstOperatorDropDown.focus();
49
+ }));
50
+ }
51
+ else {
52
+ this.firstOperatorDropDown.focus();
53
+ }
41
54
  }
42
55
  }
56
+ ngOnDestroy() {
57
+ this.subs?.unsubscribe();
58
+ }
43
59
  operatorChange(dataItem) {
44
60
  this.currentOperator = dataItem;
45
61
  }
@@ -85,10 +101,12 @@ export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent
85
101
  const columnName = this.column ? this.column.title || this.column.field : '';
86
102
  return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
87
103
  }
88
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
104
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, deps: [{ token: i1.ContextService }, { token: i2.AdaptiveGridService }], target: i0.ɵɵFactoryTarget.Component });
89
105
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuInputWrapperComponent, isStandalone: true, selector: "kendo-grid-filter-menu-input-wrapper", inputs: { filterService: "filterService", isFirstDropDown: "isFirstDropDown", menuTabbingService: "menuTabbingService", currentFilter: "currentFilter" }, viewQueries: [{ propertyName: "firstOperatorDropDown", first: true, predicate: DropDownListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
90
106
  <kendo-dropdownlist
91
107
  kendoFilterMenuDropDown
108
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
109
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
92
110
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
93
111
  [data]="operators"
94
112
  (valueChange)="operatorChange($event)"
@@ -99,7 +117,7 @@ export class FilterMenuInputWrapperComponent extends FilterInputWrapperComponent
99
117
  (keydown.shift.tab)="onShiftTab($event)">
100
118
  </kendo-dropdownlist>
101
119
  <ng-content></ng-content>
102
- `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
120
+ `, isInline: true, dependencies: [{ kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
103
121
  }
104
122
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuInputWrapperComponent, decorators: [{
105
123
  type: Component,
@@ -108,6 +126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
108
126
  template: `
109
127
  <kendo-dropdownlist
110
128
  kendoFilterMenuDropDown
129
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
130
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
111
131
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
112
132
  [data]="operators"
113
133
  (valueChange)="operatorChange($event)"
@@ -122,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
122
142
  standalone: true,
123
143
  imports: [DropDownListComponent, FilterMenuDropDownListDirective]
124
144
  }]
125
- }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { filterService: [{
145
+ }], ctorParameters: function () { return [{ type: i1.ContextService }, { type: i2.AdaptiveGridService }]; }, propDecorators: { filterService: [{
126
146
  type: Input
127
147
  }], isFirstDropDown: [{
128
148
  type: Input
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { NavigationService } from './../../navigation/navigation.service';
6
- import { ChangeDetectorRef, Component, ElementRef, Input, Optional, Renderer2, TemplateRef, ViewChild } from '@angular/core';
6
+ import { ChangeDetectorRef, Component, ElementRef, Input, NgZone, Optional, Renderer2, TemplateRef, ViewChild } from '@angular/core';
7
7
  import { FilterService } from "../filter.service";
8
8
  import { ColumnComponent } from '../../columns/column.component';
9
9
  import { SinglePopupService } from '../../common/single-popup.service';
@@ -14,12 +14,14 @@ import { ContextService } from '../../common/provider.service';
14
14
  import { IdService } from '../../common/id.service';
15
15
  import { FilterMenuContainerComponent } from './filter-menu-container.component';
16
16
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
17
+ import { AdaptiveGridService } from '../../common/adaptiveness.service';
17
18
  import * as i0 from "@angular/core";
18
19
  import * as i1 from "../filter.service";
19
20
  import * as i2 from "../../common/single-popup.service";
20
21
  import * as i3 from "../../common/provider.service";
21
22
  import * as i4 from "./../../navigation/navigation.service";
22
- import * as i5 from "../../common/id.service";
23
+ import * as i5 from "../../common/adaptiveness.service";
24
+ import * as i6 from "../../common/id.service";
23
25
  let id = 0;
24
26
  const getId = (gridId) => `${gridId}-filter-menu-${id++}`;
25
27
  /**
@@ -32,6 +34,8 @@ export class FilterMenuComponent {
32
34
  navigationService;
33
35
  renderer;
34
36
  cdr;
37
+ adaptiveGridService;
38
+ zone;
35
39
  idService;
36
40
  filterIcon = filterIcon;
37
41
  /**
@@ -49,13 +53,15 @@ export class FilterMenuComponent {
49
53
  tabIndex = '-1';
50
54
  popupRef;
51
55
  popupSubs;
52
- constructor(filterService, popupService, ctx, navigationService, renderer, cdr, idService) {
56
+ constructor(filterService, popupService, ctx, navigationService, renderer, cdr, adaptiveGridService, zone, idService) {
53
57
  this.filterService = filterService;
54
58
  this.popupService = popupService;
55
59
  this.ctx = ctx;
56
60
  this.navigationService = navigationService;
57
61
  this.renderer = renderer;
58
62
  this.cdr = cdr;
63
+ this.adaptiveGridService = adaptiveGridService;
64
+ this.zone = zone;
59
65
  this.idService = idService;
60
66
  }
61
67
  ngOnDestroy() {
@@ -79,32 +85,41 @@ export class FilterMenuComponent {
79
85
  return this.navigationService.tableEnabled;
80
86
  }
81
87
  toggle(anchor, template) {
82
- this.popupRef = this.popupService.open(anchor, template, this.popupRef);
83
- // Needed as changes to 'popupRef' are not reflected
84
- // automatically when the Popup is closed by clicking outside the anchor
85
- const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
86
- if (this.popupRef) {
87
- this.popupSubs?.unsubscribe();
88
- this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
89
- this.close();
90
- this.updateAria(ariaRoot);
91
- });
92
- this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
93
- this.popupRef = null;
94
- this.updateAria(ariaRoot);
95
- }));
96
- const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-popup');
97
- if (popupAriaElement) {
98
- const popupId = getId(this.idService?.gridId());
99
- this.renderer.setAttribute(popupAriaElement, 'id', popupId);
100
- this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
101
- this.renderer.setAttribute(popupAriaElement, 'aria-label', this.filterLabel);
102
- ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
103
- ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
88
+ if (this.ctx.grid?.adaptiveMode === 'auto' && this.adaptiveGridService.windowSize !== 'large') {
89
+ if (!this.ctx.grid.isActionSheetExpanded) {
90
+ this.adaptiveGridService.viewType = 'filterMenu';
91
+ this.adaptiveGridService.column = this.column;
92
+ this.ctx.grid.adaptiveRenderer.actionSheet.toggle(true);
104
93
  }
105
94
  }
106
95
  else {
107
- this.focusRoot();
96
+ this.popupRef = this.popupService.open(anchor, template, this.popupRef);
97
+ // Needed as changes to 'popupRef' are not reflected
98
+ // automatically when the Popup is closed by clicking outside the anchor
99
+ const ariaRoot = this.isNavigable ? anchor.closest('.k-table-th') : anchor;
100
+ if (this.popupRef) {
101
+ this.popupSubs?.unsubscribe();
102
+ this.popupSubs = this.popupRef.popup.instance.anchorViewportLeave.subscribe(() => {
103
+ this.close();
104
+ this.updateAria(ariaRoot);
105
+ });
106
+ this.popupSubs.add(() => this.popupRef.popup.instance.close.subscribe(() => {
107
+ this.popupRef = null;
108
+ this.updateAria(ariaRoot);
109
+ }));
110
+ const popupAriaElement = this.popupRef.popupElement.querySelector('.k-grid-filter-popup');
111
+ if (popupAriaElement) {
112
+ const popupId = getId(this.idService?.gridId());
113
+ this.renderer.setAttribute(popupAriaElement, 'id', popupId);
114
+ this.renderer.setAttribute(popupAriaElement, 'role', 'dialog');
115
+ this.renderer.setAttribute(popupAriaElement, 'aria-label', this.filterLabel);
116
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-controls', popupId);
117
+ ariaRoot && this.renderer.setAttribute(ariaRoot, 'aria-expanded', 'true');
118
+ }
119
+ }
120
+ else {
121
+ this.focusRoot();
122
+ }
108
123
  }
109
124
  return false;
110
125
  }
@@ -126,7 +141,7 @@ export class FilterMenuComponent {
126
141
  focusRoot() {
127
142
  this.isNavigable ? this.navigationService.focusCell(0, this.column.leafIndex) : this.anchor.nativeElement.focus();
128
143
  }
129
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
144
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuComponent, deps: [{ token: i1.FilterService }, { token: i2.SinglePopupService }, { token: i3.ContextService }, { token: i4.NavigationService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.AdaptiveGridService }, { token: i0.NgZone }, { token: i6.IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
130
145
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuComponent, isStandalone: true, selector: "kendo-grid-filter-menu", inputs: { column: "column", filter: "filter", tabIndex: "tabIndex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, static: true }, { propertyName: "template", first: true, predicate: ["template"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
131
146
  <a #anchor
132
147
  class="k-grid-filter-menu k-grid-header-menu"
@@ -183,9 +198,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
183
198
  </ng-template>
184
199
  `,
185
200
  standalone: true,
186
- imports: [IconWrapperComponent, FilterMenuContainerComponent]
201
+ imports: [IconWrapperComponent, FilterMenuContainerComponent],
187
202
  }]
188
- }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.IdService, decorators: [{
203
+ }], ctorParameters: function () { return [{ type: i1.FilterService }, { type: i2.SinglePopupService }, { type: i3.ContextService }, { type: i4.NavigationService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i5.AdaptiveGridService }, { type: i0.NgZone }, { type: i6.IdService, decorators: [{
189
204
  type: Optional
190
205
  }] }]; }, propDecorators: { column: [{
191
206
  type: Input
@@ -116,6 +116,8 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
116
116
  <kendo-dropdownlist
117
117
  *ngIf="extra"
118
118
  kendoFilterMenuDropDown
119
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
120
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
119
121
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
120
122
  class="k-filter-and"
121
123
  [data]="logicOperators"
@@ -141,7 +143,7 @@ export class NumericFilterMenuComponent extends NumericFilterComponent {
141
143
  [menuTabbingService]="menuTabbingService"
142
144
  [placeholder]="extraPlaceholder">
143
145
  </kendo-grid-numeric-filter-menu-input>
144
- `, isInline: true, dependencies: [{ kind: "component", type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format", "placeholder"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
146
+ `, isInline: true, dependencies: [{ kind: "component", type: NumericFilterMenuInputComponent, selector: "kendo-grid-numeric-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "filterDelay", "isFirstDropDown", "menuTabbingService", "step", "min", "max", "spinners", "decimals", "format", "placeholder"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
145
147
  }
146
148
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumericFilterMenuComponent, decorators: [{
147
149
  type: Component,
@@ -168,6 +170,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
168
170
  <kendo-dropdownlist
169
171
  *ngIf="extra"
170
172
  kendoFilterMenuDropDown
173
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
174
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
171
175
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
172
176
  class="k-filter-and"
173
177
  [data]="logicOperators"
@@ -103,6 +103,8 @@ export class StringFilterMenuComponent extends StringFilterComponent {
103
103
  <kendo-dropdownlist
104
104
  *ngIf="extra"
105
105
  kendoFilterMenuDropDown
106
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
107
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
106
108
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
107
109
  class="k-filter-and"
108
110
  [data]="logicOperators"
@@ -121,7 +123,7 @@ export class StringFilterMenuComponent extends StringFilterComponent {
121
123
  [placeholder]="extraPlaceholder"
122
124
  [menuTabbingService]="menuTabbingService">
123
125
  </kendo-grid-string-filter-menu-input>
124
- `, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService", "placeholder"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "title", "subtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
126
+ `, isInline: true, dependencies: [{ kind: "component", type: StringFilterMenuInputComponent, selector: "kendo-grid-string-filter-menu-input", inputs: ["operators", "column", "filter", "operator", "currentFilter", "filterService", "isFirstDropDown", "menuTabbingService", "placeholder"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: FilterMenuDropDownListDirective, selector: "[kendoFilterMenuDropDown]", inputs: ["filterMenuDropDownLabel"] }] });
125
127
  }
126
128
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StringFilterMenuComponent, decorators: [{
127
129
  type: Component,
@@ -141,6 +143,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
141
143
  <kendo-dropdownlist
142
144
  *ngIf="extra"
143
145
  kendoFilterMenuDropDown
146
+ [adaptiveTitle]="ctx.localization.get('adaptiveFilterOperatorsTitle')"
147
+ [adaptiveMode]="ctx.grid?.adaptiveMode"
144
148
  [filterMenuDropDownLabel]="filterMenuDropDownLabel"
145
149
  class="k-filter-and"
146
150
  [data]="logicOperators"