igniteui-angular 18.2.2 → 18.2.3

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 (55) hide show
  1. package/esm2022/lib/combo/combo.common.mjs +8 -17
  2. package/esm2022/lib/combo/combo.component.mjs +3 -3
  3. package/esm2022/lib/data-operations/filtering-expressions-tree.mjs +3 -1
  4. package/esm2022/lib/grids/filtering/excel-style/excel-style-filtering.component.mjs +14 -1
  5. package/esm2022/lib/grids/grid-base.directive.mjs +1 -17
  6. package/esm2022/lib/grids/headers/grid-header.component.mjs +2 -11
  7. package/esm2022/lib/grids/pivot-grid/pivot-grid.component.mjs +1 -7
  8. package/esm2022/lib/navigation-drawer/navigation-drawer.component.mjs +3 -3
  9. package/esm2022/lib/slider/slider.component.mjs +4 -4
  10. package/fesm2022/igniteui-angular.mjs +30 -55
  11. package/fesm2022/igniteui-angular.mjs.map +1 -1
  12. package/lib/combo/combo.common.d.ts +1 -3
  13. package/lib/core/styles/components/dialog/_dialog-theme.scss +5 -12
  14. package/lib/core/styles/components/drop-down/_drop-down-theme.scss +10 -4
  15. package/lib/core/styles/components/time-picker/_time-picker-component.scss +0 -4
  16. package/lib/core/styles/components/time-picker/_time-picker-theme.scss +7 -28
  17. package/lib/core/styles/typography/_bootstrap.scss +3 -4
  18. package/lib/core/styles/typography/_fluent.scss +9 -2
  19. package/lib/core/styles/typography/_indigo.scss +0 -1
  20. package/lib/data-operations/filtering-expressions-tree.d.ts +2 -2
  21. package/lib/grids/filtering/excel-style/excel-style-filtering.component.d.ts +1 -0
  22. package/lib/grids/grid-base.directive.d.ts +0 -5
  23. package/lib/grids/headers/grid-header.component.d.ts +0 -1
  24. package/lib/grids/pivot-grid/pivot-grid.component.d.ts +0 -5
  25. package/migrations/migration-collection.json +5 -0
  26. package/migrations/update-18_2_3/changes/theme-changes.json +11 -0
  27. package/migrations/update-18_2_3/index.d.ts +3 -0
  28. package/migrations/update-18_2_3/index.js +18 -0
  29. package/package.json +2 -2
  30. package/styles/igniteui-angular-dark.css +1 -1
  31. package/styles/igniteui-angular.css +1 -1
  32. package/styles/igniteui-bootstrap-dark.css +1 -1
  33. package/styles/igniteui-bootstrap-light.css +1 -1
  34. package/styles/igniteui-dark-green.css +1 -1
  35. package/styles/igniteui-fluent-dark-excel.css +1 -1
  36. package/styles/igniteui-fluent-dark-word.css +1 -1
  37. package/styles/igniteui-fluent-dark.css +1 -1
  38. package/styles/igniteui-fluent-light-excel.css +1 -1
  39. package/styles/igniteui-fluent-light-word.css +1 -1
  40. package/styles/igniteui-fluent-light.css +1 -1
  41. package/styles/igniteui-indigo-dark.css +1 -1
  42. package/styles/igniteui-indigo-light.css +1 -1
  43. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  44. package/styles/maps/igniteui-angular.css.map +1 -1
  45. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  46. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  47. package/styles/maps/igniteui-dark-green.css.map +1 -1
  48. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  49. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  50. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  51. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  52. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  53. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  54. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  55. package/styles/maps/igniteui-indigo-light.css.map +1 -1
@@ -1524,6 +1524,7 @@ class FilteringExpressionsTree {
1524
1524
  static empty(expressionTree) {
1525
1525
  return !expressionTree || !expressionTree.filteringOperands || !expressionTree.filteringOperands.length;
1526
1526
  }
1527
+ /* blazorSuppress */
1527
1528
  /**
1528
1529
  * Returns the filtering expression for a column with the provided fieldName.
1529
1530
  * ```typescript
@@ -1536,6 +1537,7 @@ class FilteringExpressionsTree {
1536
1537
  find(fieldName) {
1537
1538
  return ExpressionsTreeUtil.find(this, fieldName);
1538
1539
  }
1540
+ /* blazorSuppress */
1539
1541
  /**
1540
1542
  * Returns the index of the filtering expression for a column with the provided fieldName.
1541
1543
  * ```typescript
@@ -37207,17 +37209,11 @@ class IgxComboBaseDirective {
37207
37209
  return;
37208
37210
  }
37209
37211
  const selection = this.selectionService.get(this._id);
37212
+ this.selectionService.clear(this._id);
37210
37213
  this._id = value;
37211
37214
  if (selection) {
37212
37215
  this.selectionService.set(this._id, selection);
37213
37216
  }
37214
- if (this.dropdown?.open) {
37215
- this.dropdown.close();
37216
- }
37217
- if (this.inputGroup?.isFocused) {
37218
- this.inputGroup.element.nativeElement.blur();
37219
- this.inputGroup.isFocused = false;
37220
- }
37221
37217
  }
37222
37218
  /**
37223
37219
  * Configures the drop down list height
@@ -38080,13 +38076,14 @@ class IgxComboBaseDirective {
38080
38076
  if (!e.event) {
38081
38077
  this.comboInput?.nativeElement.focus();
38082
38078
  }
38079
+ else {
38080
+ this._onTouchedCallback();
38081
+ this.updateValidity();
38082
+ }
38083
38083
  }
38084
38084
  /** @hidden @internal */
38085
38085
  handleClosed() {
38086
38086
  this.closed.emit({ owner: this });
38087
- if (this.comboInput.nativeElement !== this.document.activeElement) {
38088
- this.validateComboState();
38089
- }
38090
38087
  }
38091
38088
  /** @hidden @internal */
38092
38089
  handleKeyDown(event) {
@@ -38120,14 +38117,10 @@ class IgxComboBaseDirective {
38120
38117
  onBlur() {
38121
38118
  if (this.collapsed) {
38122
38119
  this._onTouchedCallback();
38123
- this.validateComboState();
38120
+ this.updateValidity();
38124
38121
  }
38125
38122
  }
38126
38123
  /** @hidden @internal */
38127
- onFocus() {
38128
- this._onTouchedCallback();
38129
- }
38130
- /** @hidden @internal */
38131
38124
  setActiveDescendant() {
38132
38125
  this.activeDescendant = this.dropdown.focusedItem?.id || '';
38133
38126
  }
@@ -38135,7 +38128,7 @@ class IgxComboBaseDirective {
38135
38128
  toggleCaseSensitive() {
38136
38129
  this.filteringOptions = Object.assign({}, this.filteringOptions, { caseSensitive: !this.filteringOptions.caseSensitive });
38137
38130
  }
38138
- validateComboState() {
38131
+ updateValidity() {
38139
38132
  if (this.ngControl && this.ngControl.invalid) {
38140
38133
  this.valid = IgxInputState.INVALID;
38141
38134
  }
@@ -39019,7 +39012,7 @@ class IgxComboComponent extends IgxComboBaseDirective {
39019
39012
  IgxComboAPIService,
39020
39013
  { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
39021
39014
  { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
39022
- ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\">\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon\n family=\"default\"\n name=\"case_sensitive\"\n [active]=\"filteringOptions.caseSensitive\">\n </igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n", dependencies: [{ 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
39015
+ ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\">\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon\n family=\"default\"\n name=\"case_sensitive\"\n [active]=\"filteringOptions.caseSensitive\">\n </igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n", dependencies: [{ 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "directive", type: IgxSuffixDirective, selector: "igx-suffix,[igxSuffix],[igxEnd]" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "component", type: IgxComboDropDownComponent, selector: "igx-combo-drop-down", inputs: ["singleMode"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxForOfDirective, selector: "[igxFor][igxForOf]", inputs: ["igxForOf", "igxForSizePropName", "igxForScrollOrientation", "igxForScrollContainer", "igxForContainerSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "contentSizeChange", "dataChanged", "beforeViewDestroyed", "chunkPreload"] }, { kind: "component", type: IgxComboItemComponent, selector: "igx-combo-item", inputs: ["itemHeight", "ariaLabel", "singleMode"] }, { kind: "component", type: IgxComboAddItemComponent, selector: "igx-combo-add-item" }, { kind: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
39023
39016
  }
39024
39017
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxComboComponent, decorators: [{
39025
39018
  type: Component,
@@ -39045,7 +39038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
39045
39038
  IgxRippleDirective,
39046
39039
  IgxComboFilteringPipe,
39047
39040
  IgxComboGroupingPipe
39048
- ], template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\"\n (focus)=\"onFocus()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\">\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon\n family=\"default\"\n name=\"case_sensitive\"\n [active]=\"filteringOptions.caseSensitive\">\n </igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n" }]
39041
+ ], template: "<igx-input-group #inputGroup [type]=\"type\" (click)=\"onClick($event)\">\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint, [igxHint]\">\n <ng-content select=\"igx-hint, [igxHint]\"></ng-content>\n </ng-container>\n <input igxInput #comboInput name=\"comboInput\" type=\"text\" [value]=\"displayValue\" readonly\n [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\"\n role=\"combobox\" aria-haspopup=\"listbox\"\n [attr.aria-expanded]=\"!dropdown.collapsed\" [attr.aria-controls]=\"dropdown.listId\"\n [attr.aria-labelledby]=\"ariaLabelledBy || label?.id || placeholder\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix\"></ng-content>\n </ng-container>\n <igx-suffix *ngIf=\"displayValue\" [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n <ng-container *ngIf=\"clearIconTemplate\">\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!clearIconTemplate\" family=\"default\" name=\"input_clear\"></igx-icon>\n </igx-suffix>\n <igx-suffix class=\"igx-combo__toggle-button\">\n <ng-container *ngIf=\"toggleIconTemplate\">\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n </ng-container>\n <igx-icon *ngIf=\"!toggleIconTemplate\" family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n </igx-suffix>\n</igx-input-group>\n<igx-combo-drop-down #igxComboDropDown class=\"igx-combo__drop-down\"\n [labelledBy]=\"ariaLabelledBy || label?.id || placeholder || ''\"\n [width]=\"itemsWidth || '100%'\" (opening)=\"handleOpening($event)\" (closing)=\"handleClosing($event)\"\n (opened)=\"handleOpened()\" (closed)=\"handleClosed()\">\n <div class=\"igx-combo__search\">\n <igx-input-group *ngIf=\"displaySearchInput\">\n <input igxInput #searchInput name=\"searchInput\" autocomplete=\"off\" type=\"text\"\n [(ngModel)]=\"searchValue\" (ngModelChange)=\"handleInputChange($event)\" (keyup)=\"handleKeyUp($event)\"\n (keydown)=\"handleKeyDown($event)\" (focus)=\"dropdown.onBlur($event)\" [attr.placeholder]=\"getSearchPlaceholderText()\"\n aria-autocomplete=\"list\" role=\"searchbox\" aria-label=\"search\"/>\n <igx-suffix *ngIf=\"showSearchCaseIcon\" (click)=\"toggleCaseSensitive()\">\n <span [ngClass]=\"filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'\">\n <igx-icon\n family=\"default\"\n name=\"case_sensitive\"\n [active]=\"filteringOptions.caseSensitive\">\n </igx-icon>\n </span>\n </igx-suffix>\n </igx-input-group>\n </div>\n <ng-container *ngTemplateOutlet=\"headerTemplate\">\n </ng-container>\n <div #dropdownItemContainer class=\"igx-combo__content\" [style.overflow]=\"'hidden'\"\n [style.maxHeight.rem]=\"itemsMaxHeightInRem\" [igxDropDownItemNavigation]=\"dropdown\" (focus)=\"dropdown.onFocus()\"\n [tabindex]=\"dropdown.collapsed ? -1 : 0\" [attr.id]=\"dropdown.id\" aria-multiselectable=\"true\"\n [attr.aria-activedescendant]=\"activeDescendant\">\n <igx-combo-item [itemHeight]=\"itemHeight\" *igxFor=\"let item of data\n | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering\n | comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;\n index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n <ng-container *ngIf=\"item?.isHeader\">\n <ng-container\n *ngTemplateOutlet=\"headerItemTemplate ? headerItemTemplate : headerItemBase;\n context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}\">\n </ng-container>\n </ng-container>\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n <ng-container *ngIf=\"!item?.isHeader\">\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n </ng-container>\n </igx-combo-item>\n </div>\n <div class=\"igx-combo__add\" *ngIf=\"filteredData.length === 0 || isAddButtonVisible()\">\n <div class=\"igx-combo__empty\" *ngIf=\"filteredData.length === 0\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n <igx-combo-add-item [itemHeight]=\"itemHeight\" *ngIf=\"isAddButtonVisible()\"\n [tabindex]=\"dropdown.collapsed ? -1 : customValueFlag ? 1 : -1\" class=\"igx-combo__add-item\" role=\"button\"\n [attr.aria-label]=\"resourceStrings.igx_combo_addCustomValues_placeholder\" [index]=\"virtualScrollContainer.igxForOf.length\">\n <ng-container *ngTemplateOutlet=\"addItemTemplate ? addItemTemplate : addItemDefault\">\n </ng-container>\n </igx-combo-add-item>\n </div>\n <ng-container *ngTemplateOutlet=\"footerTemplate\">\n </ng-container>\n</igx-combo-drop-down>\n<ng-template #complex let-display let-data=\"data\" let-key=\"displayKey\">\n {{display[key]}}\n</ng-template>\n<ng-template #primitive let-display>\n {{display}}\n</ng-template>\n<ng-template #empty>\n <span>{{resourceStrings.igx_combo_empty_message}}</span>\n</ng-template>\n<ng-template #addItemDefault let-control>\n <button type=\"button\" igxButton=\"flat\" igxRipple>{{ resourceStrings.igx_combo_addCustomValues_placeholder }}</button>\n</ng-template>\n<ng-template #headerItemBase let-item let-key=\"valueKey\" let-groupKey=\"groupKey\">\n {{ item[key] }}\n</ng-template>\n" }]
39049
39042
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: IgxSelectionAPIService }, { type: IgxComboAPIService }, { type: undefined, decorators: [{
39050
39043
  type: Inject,
39051
39044
  args: [DOCUMENT]
@@ -54929,6 +54922,11 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
54929
54922
  renderValues() {
54930
54923
  this.filterValues = this.generateFilterValues();
54931
54924
  this.generateListData();
54925
+ this.expressionsList.forEach(expr => {
54926
+ if (this.column.dataType === GridColumnDataType.String && this.column.filteringIgnoreCase && expr.expression.searchVal) {
54927
+ this.modifyExpression(expr);
54928
+ }
54929
+ });
54932
54930
  }
54933
54931
  generateFilterValues() {
54934
54932
  const formatValue = (value) => {
@@ -54954,6 +54952,14 @@ class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent {
54954
54952
  const filterValues = new Set(this.expressionsList.reduce(processExpression, []));
54955
54953
  return filterValues;
54956
54954
  }
54955
+ modifyExpression(expr) {
54956
+ const lowerCaseFilterValues = new Set(Array.from(expr.expression.searchVal).map((value) => value.toLowerCase()));
54957
+ this.grid.data.forEach(item => {
54958
+ if (lowerCaseFilterValues.has(item[this.column.field]?.toLowerCase())) {
54959
+ expr.expression.searchVal.add(item[this.column.field]);
54960
+ }
54961
+ });
54962
+ }
54957
54963
  generateListData() {
54958
54964
  this.listData = new Array();
54959
54965
  const shouldUpdateSelection = this.areExpressionsSelectable();
@@ -56041,12 +56047,6 @@ class IgxGridHeaderComponent {
56041
56047
  get selectedStyle() {
56042
56048
  return this.selected;
56043
56049
  }
56044
- get height() {
56045
- if (!this.grid.hasColumnGroups || this.grid.type === 'pivot') {
56046
- return null;
56047
- }
56048
- return (this.grid.maxLevelHeaderDepth + 1 - this.column.level) * this.grid.defaultRowHeight / this.grid._baseFontSize;
56049
- }
56050
56050
  /**
56051
56051
  * @hidden
56052
56052
  */
@@ -56206,7 +56206,7 @@ class IgxGridHeaderComponent {
56206
56206
  });
56207
56207
  }
56208
56208
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridHeaderComponent, deps: [{ token: IGX_GRID_BASE }, { token: IgxColumnResizingService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
56209
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridHeaderComponent, isStandalone: true, selector: "igx-grid-header", inputs: { column: "column" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPinterEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.aria-selected": "this.ariaSelected", "class.igx-grid-th": "this.columnGroupStyle", "class.asc": "this.sortAscendingStyle", "class.desc": "this.sortDescendingStyle", "class.igx-grid-th--number": "this.numberStyle", "class.igx-grid-th--sortable": "this.sortableStyle", "class.igx-grid-th--selectable": "this.selectableStyle", "class.igx-grid-th--filtrable": "this.filterableStyle", "class.igx-grid-th--sorted": "this.sortedStyle", "class.igx-grid-th--selected": "this.selectedStyle", "style.height.rem": "this.height" } }, viewQueries: [{ propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSortHeaderIconTemplate", first: true, predicate: ["defaultSortHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortIconContainer", first: true, predicate: ["sortIconContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #defaultColumn>\n <span [title]=\"title\">{{ column.header || column.field }}</span>\n</ng-template>\n\n<ng-template #defaultESFHeaderIconTemplate>\n <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n <igx-icon\n family=\"default\"\n [name]=\"sortDirection < 2 ? 'sort_asc' : 'sort_desc'\">\n </igx-icon>\n</ng-template>\n\n<span class=\"igx-grid-th__title\">\n <ng-container\n *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n </ng-container>\n</span>\n<ng-container *ngIf=\"!column.columnGroup\">\n <div class=\"igx-grid-th__icons\">\n <ng-container *ngIf=\"column.sortable && !disabled\">\n <div #sortIconContainer class=\"sort-icon\"\n [attr.data-sortIndex]=\"(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions\"\n (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onSortingIconClick($event)\">\n <ng-container *ngTemplateOutlet=\"sortIconTemplate; context: { $implicit: this }\"></ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter'\">\n <div [ngClass]=\"filterIconClassName\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onFilteringIconClick($event)\" >\n <ng-container *ngTemplateOutlet=\"esfIconTemplate; context: { $implicit: this }\"></ng-container>\n </div>\n </ng-container>\n </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SortingIndexPipe, name: "sortingIndex" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
56209
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: IgxGridHeaderComponent, isStandalone: true, selector: "igx-grid-header", inputs: { column: "column" }, host: { listeners: { "click": "onClick($event)", "pointerenter": "onPinterEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.aria-selected": "this.ariaSelected", "class.igx-grid-th": "this.columnGroupStyle", "class.asc": "this.sortAscendingStyle", "class.desc": "this.sortDescendingStyle", "class.igx-grid-th--number": "this.numberStyle", "class.igx-grid-th--sortable": "this.sortableStyle", "class.igx-grid-th--selectable": "this.selectableStyle", "class.igx-grid-th--filtrable": "this.filterableStyle", "class.igx-grid-th--sorted": "this.sortedStyle", "class.igx-grid-th--selected": "this.selectedStyle" } }, viewQueries: [{ propertyName: "defaultESFHeaderIconTemplate", first: true, predicate: ["defaultESFHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSortHeaderIconTemplate", first: true, predicate: ["defaultSortHeaderIconTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "sortIconContainer", first: true, predicate: ["sortIconContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #defaultColumn>\n <span [title]=\"title\">{{ column.header || column.field }}</span>\n</ng-template>\n\n<ng-template #defaultESFHeaderIconTemplate>\n <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n</ng-template>\n\n<ng-template #defaultSortHeaderIconTemplate>\n <igx-icon\n family=\"default\"\n [name]=\"sortDirection < 2 ? 'sort_asc' : 'sort_desc'\">\n </igx-icon>\n</ng-template>\n\n<span class=\"igx-grid-th__title\">\n <ng-container\n *ngTemplateOutlet=\"column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}\">\n </ng-container>\n</span>\n<ng-container *ngIf=\"!column.columnGroup\">\n <div class=\"igx-grid-th__icons\">\n <ng-container *ngIf=\"column.sortable && !disabled\">\n <div #sortIconContainer class=\"sort-icon\"\n [attr.data-sortIndex]=\"(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions\"\n (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onSortingIconClick($event)\">\n <ng-container *ngTemplateOutlet=\"sortIconTemplate; context: { $implicit: this }\"></ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter'\">\n <div [ngClass]=\"filterIconClassName\" (pointerdown)=\"onPointerDownIndicator($event)\" (click)=\"onFilteringIconClick($event)\" >\n <ng-container *ngTemplateOutlet=\"esfIconTemplate; context: { $implicit: this }\"></ng-container>\n </div>\n </ng-container>\n </div>\n</ng-container>\n", dependencies: [{ kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["family", "name", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SortingIndexPipe, name: "sortingIndex" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
56210
56210
  }
56211
56211
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxGridHeaderComponent, decorators: [{
56212
56212
  type: Component,
@@ -56255,9 +56255,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
56255
56255
  }], selectedStyle: [{
56256
56256
  type: HostBinding,
56257
56257
  args: ['class.igx-grid-th--selected']
56258
- }], height: [{
56259
- type: HostBinding,
56260
- args: ['style.height.rem']
56261
56258
  }], onClick: [{
56262
56259
  type: HostListener,
56263
56260
  args: ['click', ['$event']]
@@ -62536,9 +62533,6 @@ class IgxGridBaseDirective {
62536
62533
  if (this._allowFiltering !== value) {
62537
62534
  this._allowFiltering = value;
62538
62535
  this.filteringService.registerSVGIcons();
62539
- if (!this._init) {
62540
- this.calcGridHeadRow();
62541
- }
62542
62536
  this.filteringService.isFilterRowVisible = false;
62543
62537
  this.filteringService.filteredColumn = null;
62544
62538
  this.notifyChanges(true);
@@ -67273,24 +67267,11 @@ class IgxGridBaseDirective {
67273
67267
  });
67274
67268
  }
67275
67269
  }
67276
- /**
67277
- * @hidden
67278
- * @internal
67279
- */
67280
- calcGridHeadRow() {
67281
- if (this.maxLevelHeaderDepth) {
67282
- this._baseFontSize = parseFloat(getComputedStyle(this.document.documentElement).getPropertyValue('font-size'));
67283
- const hasFilterRow = this._allowFiltering && this._filterMode === FilterMode.quickFilter;
67284
- const minSize = (this.maxLevelHeaderDepth + 1 + (hasFilterRow ? 1 : 0)) * this.defaultRowHeight / this._baseFontSize;
67285
- this.theadRow.nativeElement.style.minHeight = `${minSize}rem`;
67286
- }
67287
- }
67288
67270
  /**
67289
67271
  * @hidden
67290
67272
  * Sets TBODY height i.e. this.calcHeight
67291
67273
  */
67292
67274
  calculateGridHeight() {
67293
- this.calcGridHeadRow();
67294
67275
  this.calcHeight = this._calculateGridBodyHeight();
67295
67276
  if (this.pinnedRowHeight && this.calcHeight) {
67296
67277
  this.calcHeight -= this.pinnedRowHeight;
@@ -77078,12 +77059,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
77078
77059
  });
77079
77060
  }
77080
77061
  }
77081
- /**
77082
- * @hidden
77083
- * @internal
77084
- */
77085
- calcGridHeadRow() {
77086
- }
77087
77062
  buildDataView(data) {
77088
77063
  this._dataView = data;
77089
77064
  }
@@ -86303,11 +86278,11 @@ class IgxNavigationDrawerComponent {
86303
86278
  });
86304
86279
  }
86305
86280
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxNavigationDrawerComponent, deps: [{ token: ElementRef }, { token: IgxNavigationService, optional: true }, { token: i0.Renderer2 }, { token: HammerGesturesManager }, { token: PlatformUtil }], target: i0.ɵɵFactoryTarget.Component }); }
86306
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "class.igx-nav-drawer--mini": "this.isMini", "class.igx-nav-drawer--pinned": "this.pinned", "style.--igx-nav-drawer-size": "this.normalSize", "style.--igx-nav-drawer-size--mini": "this.miniSize", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<aside role=\"navigation\"\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</aside>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "disabled", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
86281
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.4", type: IgxNavigationDrawerComponent, isStandalone: true, selector: "igx-nav-drawer", inputs: { id: "id", position: "position", enableGestures: ["enableGestures", "enableGestures", booleanAttribute], pinThreshold: "pinThreshold", pin: ["pin", "pin", booleanAttribute], width: "width", disableAnimation: ["disableAnimation", "disableAnimation", booleanAttribute], miniWidth: "miniWidth", isOpen: ["isOpen", "isOpen", booleanAttribute] }, outputs: { isOpenChange: "isOpenChange", pinChange: "pinChange", opening: "opening", opened: "opened", closing: "closing", closed: "closed" }, host: { properties: { "class.igx-nav-drawer": "this.cssClass", "attr.id": "this.id", "class.igx-nav-drawer--disable-animation": "this.disableAnimation", "class.igx-nav-drawer--mini": "this.isMini", "class.igx-nav-drawer--pinned": "this.pinned", "style.--igx-nav-drawer-size": "this.normalSize", "style.--igx-nav-drawer-size--mini": "this.miniSize", "style.order": "this.isPinnedRight" } }, providers: [HammerGesturesManager], queries: [{ propertyName: "contentTemplate", first: true, predicate: IgxNavDrawerTemplateDirective, descendants: true, read: IgxNavDrawerTemplateDirective }, { propertyName: "miniTemplate", first: true, predicate: IgxNavDrawerMiniTemplateDirective, descendants: true, read: IgxNavDrawerMiniTemplateDirective }], viewQueries: [{ propertyName: "_drawer", first: true, predicate: ["aside"], descendants: true, static: true }, { propertyName: "_overlay", first: true, predicate: ["overlay"], descendants: true, static: true }, { propertyName: "_styleDummy", first: true, predicate: ["dummy"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<nav\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "directive", type: IgxNavDrawerItemDirective, selector: "[igxDrawerItem]", inputs: ["active", "disabled", "isHeader"], exportAs: ["igxDrawerItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
86307
86282
  }
86308
86283
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: IgxNavigationDrawerComponent, decorators: [{
86309
86284
  type: Component,
86310
- args: [{ providers: [HammerGesturesManager], selector: 'igx-nav-drawer', standalone: true, imports: [IgxNavDrawerItemDirective, NgTemplateOutlet], template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<aside role=\"navigation\"\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</aside>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"] }]
86285
+ args: [{ providers: [HammerGesturesManager], selector: 'igx-nav-drawer', standalone: true, imports: [IgxNavDrawerItemDirective, NgTemplateOutlet], template: "<ng-template #defaultItemsTemplate>\n <div igxDrawerItem [isHeader]=\"true\">Navigation Drawer</div>\n <div igxDrawerItem> Start by adding</div>\n <div igxDrawerItem> <code>&lt;ng-template igxDrawer&gt;</code> </div>\n <div igxDrawerItem> And some items inside </div>\n <div igxDrawerItem> Style with igxDrawerItem </div>\n <div igxDrawerItem> and igxRipple directives</div>\n <div igxDrawerItem [disabled]=\"true\">Disabled Item</div>\n</ng-template>\n\n<div [hidden]=\"pin\"\n class=\"igx-nav-drawer__overlay\"\n [class.igx-nav-drawer__overlay--hidden]=\"!isOpen\"\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\"\n (click)=\"close()\" #overlay>\n</div>\n<nav\n class=\"igx-nav-drawer__aside\"\n [class.igx-nav-drawer__aside--collapsed]=\"!miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--mini]=\"miniTemplate && !isOpen\"\n [class.igx-nav-drawer__aside--normal]=\"!miniTemplate || isOpen\"\n [class.igx-nav-drawer__aside--pinned]=\"pin\"\n [class.igx-nav-drawer__aside--right]=\"position === 'right'\" #aside\n [class.igx-nav-drawer--disable-animation]=\"disableAnimation\">\n\n <ng-container *ngTemplateOutlet=\"template || defaultItemsTemplate\"></ng-container>\n</nav>\n<div class=\"igx-nav-drawer__style-dummy\" #dummy></div>\n", styles: [":host{display:block;height:100%}\n"] }]
86311
86286
  }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
86312
86287
  type: Inject,
86313
86288
  args: [ElementRef]
@@ -88149,12 +88124,12 @@ class IgxSliderComponent {
88149
88124
  normalizeByStep(value) {
88150
88125
  if (this.isRange) {
88151
88126
  this._value = {
88152
- lower: value.lower - (value.lower % this.step),
88153
- upper: value.upper - (value.upper % this.step)
88127
+ lower: Math.floor(value.lower / this.step) * this.step,
88128
+ upper: Math.floor(value.upper / this.step) * this.step
88154
88129
  };
88155
88130
  }
88156
88131
  else {
88157
- this._value = value - (value % this.step);
88132
+ this._value = Math.floor(value / this.step) * this.step;
88158
88133
  }
88159
88134
  }
88160
88135
  updateTrack() {