igniteui-angular 21.2.0-rc.0 → 21.2.0-rc.2

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 (134) hide show
  1. package/fesm2022/igniteui-angular-accordion.mjs +7 -7
  2. package/fesm2022/igniteui-angular-action-strip.mjs +10 -10
  3. package/fesm2022/igniteui-angular-avatar.mjs +7 -7
  4. package/fesm2022/igniteui-angular-badge.mjs +7 -8
  5. package/fesm2022/igniteui-angular-badge.mjs.map +1 -1
  6. package/fesm2022/igniteui-angular-banner.mjs +10 -10
  7. package/fesm2022/igniteui-angular-bottom-nav.mjs +22 -22
  8. package/fesm2022/igniteui-angular-button-group.mjs +7 -7
  9. package/fesm2022/igniteui-angular-calendar.mjs +61 -61
  10. package/fesm2022/igniteui-angular-card.mjs +31 -31
  11. package/fesm2022/igniteui-angular-carousel.mjs +32 -33
  12. package/fesm2022/igniteui-angular-carousel.mjs.map +1 -1
  13. package/fesm2022/igniteui-angular-chat-extras.mjs +6 -6
  14. package/fesm2022/igniteui-angular-chat.mjs +12 -12
  15. package/fesm2022/igniteui-angular-checkbox.mjs +7 -7
  16. package/fesm2022/igniteui-angular-chips.mjs +10 -10
  17. package/fesm2022/igniteui-angular-combo.mjs +52 -52
  18. package/fesm2022/igniteui-angular-core.mjs +63 -110
  19. package/fesm2022/igniteui-angular-core.mjs.map +1 -1
  20. package/fesm2022/igniteui-angular-date-picker.mjs +38 -38
  21. package/fesm2022/igniteui-angular-dialog.mjs +13 -13
  22. package/fesm2022/igniteui-angular-directives.mjs +191 -191
  23. package/fesm2022/igniteui-angular-drop-down.mjs +29 -29
  24. package/fesm2022/igniteui-angular-expansion-panel.mjs +28 -28
  25. package/fesm2022/igniteui-angular-grids-core.mjs +454 -453
  26. package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
  27. package/fesm2022/igniteui-angular-grids-grid.mjs +49 -49
  28. package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +37 -37
  29. package/fesm2022/igniteui-angular-grids-lite.mjs +12 -12
  30. package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +79 -79
  31. package/fesm2022/igniteui-angular-grids-tree-grid.mjs +55 -55
  32. package/fesm2022/igniteui-angular-icon.mjs +10 -10
  33. package/fesm2022/igniteui-angular-input-group.mjs +25 -25
  34. package/fesm2022/igniteui-angular-list.mjs +40 -40
  35. package/fesm2022/igniteui-angular-navbar.mjs +13 -13
  36. package/fesm2022/igniteui-angular-navigation-drawer.mjs +16 -16
  37. package/fesm2022/igniteui-angular-paginator.mjs +19 -19
  38. package/fesm2022/igniteui-angular-progressbar.mjs +19 -19
  39. package/fesm2022/igniteui-angular-query-builder.mjs +22 -22
  40. package/fesm2022/igniteui-angular-radio.mjs +14 -14
  41. package/fesm2022/igniteui-angular-radio.mjs.map +1 -1
  42. package/fesm2022/igniteui-angular-select.mjs +25 -25
  43. package/fesm2022/igniteui-angular-simple-combo.mjs +7 -7
  44. package/fesm2022/igniteui-angular-slider.mjs +39 -42
  45. package/fesm2022/igniteui-angular-slider.mjs.map +1 -1
  46. package/fesm2022/igniteui-angular-snackbar.mjs +7 -7
  47. package/fesm2022/igniteui-angular-splitter.mjs +13 -13
  48. package/fesm2022/igniteui-angular-stepper.mjs +38 -38
  49. package/fesm2022/igniteui-angular-stepper.mjs.map +1 -1
  50. package/fesm2022/igniteui-angular-switch.mjs +7 -7
  51. package/fesm2022/igniteui-angular-tabs.mjs +44 -43
  52. package/fesm2022/igniteui-angular-tabs.mjs.map +1 -1
  53. package/fesm2022/igniteui-angular-time-picker.mjs +19 -19
  54. package/fesm2022/igniteui-angular-toast.mjs +7 -7
  55. package/fesm2022/igniteui-angular-tree.mjs +28 -28
  56. package/lib/core/styles/components/badge/_badge-theme.scss +6 -1
  57. package/lib/core/styles/components/button-group/_button-group-theme.scss +78 -324
  58. package/lib/core/styles/components/chip/_chip-theme.scss +6 -2
  59. package/lib/core/styles/components/grid/_excel-filtering-theme.scss +16 -118
  60. package/lib/core/styles/components/grid/_grid-theme-builder.scss +391 -0
  61. package/lib/core/styles/components/grid/_grid-theme.scss +37 -39
  62. package/lib/core/styles/components/input/_input-group-theme.scss +1 -1
  63. package/lib/core/styles/components/progress/circular/_circular-theme.scss +1 -1
  64. package/lib/core/styles/components/query-builder/_query-builder-theme.scss +8 -8
  65. package/lib/core/styles/components/select/_select-theme.scss +1 -1
  66. package/migrations/common/ServerHost.js +35 -2
  67. package/migrations/common/UpdateChanges.js +37 -4
  68. package/migrations/common/tsLogger.js +34 -1
  69. package/migrations/common/tsUtils.js +35 -2
  70. package/migrations/common/util.d.ts +1 -1
  71. package/migrations/common/util.js +34 -1
  72. package/migrations/migration-collection.json +5 -0
  73. package/migrations/update-11_0_0/index.js +2 -3
  74. package/migrations/update-12_0_0/index.d.ts +1 -1
  75. package/migrations/update-12_0_0/index.js +2 -3
  76. package/migrations/update-12_1_0/index.js +2 -3
  77. package/migrations/update-13_0_0/index.js +2 -3
  78. package/migrations/update-13_1_0/index.js +2 -3
  79. package/migrations/update-15_1_0/index.js +2 -3
  80. package/migrations/update-16_1_0/index.js +2 -3
  81. package/migrations/update-17_0_0/index.js +36 -4
  82. package/migrations/update-17_1_0/index.js +2 -3
  83. package/migrations/update-18_0_0/index.js +2 -2
  84. package/migrations/update-20_0_6/index.js +3 -4
  85. package/migrations/update-21_0_0_import-migration/index.js +34 -1
  86. package/migrations/update-21_1_0_import-migration/index.js +34 -1
  87. package/migrations/update-21_2_0/changes/theme-changes.json +11 -0
  88. package/migrations/update-21_2_0/index.d.ts +3 -0
  89. package/migrations/update-21_2_0/index.js +18 -0
  90. package/package.json +2 -2
  91. package/schematics/ng-add/add-normalize.js +34 -1
  92. package/schematics/ng-add/index.spec.js +34 -1
  93. package/schematics/tsconfig.tsbuildinfo +1 -1
  94. package/skills/igniteui-angular-components/references/charts.md +4 -4
  95. package/skills/igniteui-angular-grids/SKILL.md +2 -0
  96. package/skills/igniteui-angular-grids/references/data-operations.md +3 -2
  97. package/skills/igniteui-angular-grids/references/sizing.md +204 -0
  98. package/skills/igniteui-angular-theming/SKILL.md +0 -3
  99. package/styles/igniteui-angular-dark.css +1 -1
  100. package/styles/igniteui-angular.css +1 -1
  101. package/styles/igniteui-bootstrap-dark.css +1 -1
  102. package/styles/igniteui-bootstrap-light.css +1 -1
  103. package/styles/igniteui-dark-green.css +1 -1
  104. package/styles/igniteui-fluent-dark-excel.css +1 -1
  105. package/styles/igniteui-fluent-dark-word.css +1 -1
  106. package/styles/igniteui-fluent-dark.css +1 -1
  107. package/styles/igniteui-fluent-light-excel.css +1 -1
  108. package/styles/igniteui-fluent-light-word.css +1 -1
  109. package/styles/igniteui-fluent-light.css +1 -1
  110. package/styles/igniteui-indigo-dark.css +1 -1
  111. package/styles/igniteui-indigo-light.css +1 -1
  112. package/styles/maps/igniteui-angular-dark.css.map +1 -1
  113. package/styles/maps/igniteui-angular.css.map +1 -1
  114. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
  115. package/styles/maps/igniteui-bootstrap-light.css.map +1 -1
  116. package/styles/maps/igniteui-dark-green.css.map +1 -1
  117. package/styles/maps/igniteui-fluent-dark-excel.css.map +1 -1
  118. package/styles/maps/igniteui-fluent-dark-word.css.map +1 -1
  119. package/styles/maps/igniteui-fluent-dark.css.map +1 -1
  120. package/styles/maps/igniteui-fluent-light-excel.css.map +1 -1
  121. package/styles/maps/igniteui-fluent-light-word.css.map +1 -1
  122. package/styles/maps/igniteui-fluent-light.css.map +1 -1
  123. package/styles/maps/igniteui-indigo-dark.css.map +1 -1
  124. package/styles/maps/igniteui-indigo-light.css.map +1 -1
  125. package/types/igniteui-angular-badge.d.ts +0 -2
  126. package/types/igniteui-angular-carousel.d.ts +0 -2
  127. package/types/igniteui-angular-core.d.ts +8 -35
  128. package/types/igniteui-angular-grids-core.d.ts +5 -0
  129. package/types/igniteui-angular-radio.d.ts +1 -1
  130. package/types/igniteui-angular-slider.d.ts +0 -2
  131. package/types/igniteui-angular-stepper.d.ts +0 -1
  132. package/types/igniteui-angular-tabs.d.ts +2 -4
  133. package/migrations/common/import-helper.js +0 -14
  134. package/skills/igniteui-angular-theming/references/contributing.md +0 -471
@@ -674,10 +674,10 @@ class IgxChipComponent {
674
674
  this.destroy$.next();
675
675
  this.destroy$.complete();
676
676
  }
677
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
678
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
677
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
678
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxChipComponent, isStandalone: true, selector: "igx-chip", inputs: { variant: "variant", id: "id", tabIndex: "tabIndex", data: "data", draggable: ["draggable", "draggable", booleanAttribute], animateOnRelease: ["animateOnRelease", "animateOnRelease", booleanAttribute], hideBaseOnDrag: ["hideBaseOnDrag", "hideBaseOnDrag", booleanAttribute], removable: ["removable", "removable", booleanAttribute], removeIcon: "removeIcon", selectable: ["selectable", "selectable", booleanAttribute], selectIcon: "selectIcon", class: "class", disabled: ["disabled", "disabled", booleanAttribute], selected: ["selected", "selected", booleanAttribute], color: "color", resourceStrings: "resourceStrings" }, outputs: { selectedChange: "selectedChange", moveStart: "moveStart", moveEnd: "moveEnd", remove: "remove", chipClick: "chipClick", selectedChanging: "selectedChanging", selectedChanged: "selectedChanged", keyDown: "keyDown", dragEnter: "dragEnter", dragLeave: "dragLeave", dragOver: "dragOver", dragDrop: "dragDrop" }, host: { listeners: { "keydown": "keyEvent($event)" }, properties: { "attr.id": "this.id", "attr.role": "this.role", "attr.tabIndex": "this.tabIndex", "class.igx-chip--disabled": "this.disabled", "attr.aria-selected": "this.selected", "class.igx-chip": "this.defaultClass", "class.igx-chip--primary": "this.isPrimary", "class.igx-chip--info": "this.isInfo", "class.igx-chip--success": "this.isSuccess", "class.igx-chip--warning": "this.isWarning", "class.igx-chip--danger": "this.isDanger" } }, viewQueries: [{ propertyName: "dragDirective", first: true, predicate: ["chipArea"], descendants: true, read: IgxDragDirective, static: true }, { propertyName: "chipArea", first: true, predicate: ["chipArea"], descendants: true, read: ElementRef, static: true }, { propertyName: "defaultRemoveIcon", first: true, predicate: ["defaultRemoveIcon"], descendants: true, read: TemplateRef, static: true }, { propertyName: "defaultSelectIcon", first: true, predicate: ["defaultSelectIcon"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div #chipArea class=\"igx-chip__item\"\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n", dependencies: [{ kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "directive", type: IgxDragDirective, selector: "[igxDrag]", inputs: ["igxDrag", "dragTolerance", "dragDirection", "dragChannel", "ghost", "ghostClass", "ghostStyle", "ghostTemplate", "ghostHost", "scrollContainer", "ghostOffsetX", "ghostOffsetY"], outputs: ["dragStart", "dragMove", "dragEnd", "dragClick", "ghostCreate", "ghostDestroy", "transitioned"], exportAs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }] }); }
679
679
  }
680
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxChipComponent, decorators: [{
680
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxChipComponent, decorators: [{
681
681
  type: Component,
682
682
  args: [{ selector: 'igx-chip', imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent], template: "<div #chipArea class=\"igx-chip__item\"\n [igxDrag]=\"{chip: this}\"\n [style.visibility]='hideBaseElement ? \"hidden\" : \"visible\"'\n ghostClass=\"igx-chip__ghost\"\n [ghostStyle]=\"ghostStyles\"\n (dragStart)=\"onChipDragStart($event)\"\n (ghostCreate)=\"onChipGhostCreate()\"\n (ghostDestroy)=\"onChipGhostDestroy()\"\n (dragEnd)=\"onChipDragEnd()\"\n (transitioned)=\"onChipMoveEnd($event)\"\n (dragClick)=\"onChipDragClicked($event)\"\n igxDrop\n (enter)=\"onChipDragEnterHandler($event)\"\n (leave)=\"onChipDragLeaveHandler($event)\"\n (over)=\"onChipOverHandler($event)\"\n (dropped)=\"onChipDrop($event)\">\n\n <div class=\"igx-chip__start\" #selectContainer>\n @if (selected) {\n <div [ngClass]=\"selectClass(selected)\">\n <ng-container *ngTemplateOutlet=\"selectIconTemplate\"></ng-container>\n </div>\n }\n\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </div>\n\n <div class=\"igx-chip__content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"igx-chip__end\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n\n @if (removable) {\n <div class=\"igx-chip__remove\"\n [attr.tabIndex]=\"tabIndex\"\n (keydown)=\"onRemoveBtnKeyDown($event)\"\n (pointerdown)=\"onRemoveMouseDown($event)\"\n (mousedown)=\"onRemoveMouseDown($event)\"\n (click)=\"onRemoveClick($event)\"\n (touchmove)=\"onRemoveTouchMove()\"\n (touchend)=\"onRemoveTouchEnd($event)\">\n <ng-container *ngTemplateOutlet=\"removeButtonTemplate\"></ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #defaultSelectIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_select\"\n family=\"default\"\n name=\"selected\"\n ></igx-icon>\n</ng-template>\n\n<ng-template #defaultRemoveIcon>\n <igx-icon\n [attr.aria-label]=\"resourceStrings.igx_chip_remove\"\n family=\"default\"\n name=\"remove\"\n ></igx-icon>\n</ng-template>\n" }]
683
683
  }], ctorParameters: () => [], propDecorators: { variant: [{
@@ -1075,10 +1075,10 @@ class IgxChipsAreaComponent {
1075
1075
  owner: this
1076
1076
  });
1077
1077
  }
1078
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxChipsAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1079
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
1078
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxChipsAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1079
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: IgxChipsAreaComponent, isStandalone: true, selector: "igx-chips-area", inputs: { width: "width", height: "height" }, outputs: { reorder: "reorder", selectionChange: "selectionChange", moveStart: "moveStart", moveEnd: "moveEnd" }, host: { properties: { "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "style.width.rem": "this._widthToRem", "style.height.rem": "this._heightToRem", "class": "this.hostClass" } }, queries: [{ propertyName: "chipsList", predicate: IgxChipComponent, descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n" }); }
1080
1080
  }
1081
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
1081
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxChipsAreaComponent, decorators: [{
1082
1082
  type: Component,
1083
1083
  args: [{ selector: 'igx-chips-area', standalone: true, template: "<ng-content></ng-content>\n" }]
1084
1084
  }], ctorParameters: () => [], propDecorators: { role: [{
@@ -1126,11 +1126,11 @@ const IGX_CHIPS_DIRECTIVES = [
1126
1126
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
1127
1127
  */
1128
1128
  class IgxChipsModule {
1129
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1130
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxChipsModule, imports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective], exports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective] }); }
1131
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxChipsModule, imports: [IgxChipComponent] }); }
1129
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
1130
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxChipsModule, imports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective], exports: [IgxChipsAreaComponent, IgxChipComponent, i3.IgxPrefixDirective, i3.IgxSuffixDirective] }); }
1131
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxChipsModule, imports: [IgxChipComponent] }); }
1132
1132
  }
1133
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxChipsModule, decorators: [{
1133
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxChipsModule, decorators: [{
1134
1134
  type: NgModule,
1135
1135
  args: [{
1136
1136
  exports: [
@@ -61,10 +61,10 @@ class IgxComboAPIService {
61
61
  is_item_selected(itemID) {
62
62
  return this.combo.isItemSelected(itemID);
63
63
  }
64
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
65
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboAPIService }); }
64
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboAPIService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
65
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboAPIService }); }
66
66
  }
67
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboAPIService, decorators: [{
67
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboAPIService, decorators: [{
68
68
  type: Injectable
69
69
  }] });
70
70
 
@@ -153,10 +153,10 @@ class IgxComboItemComponent extends IgxDropDownItemComponent {
153
153
  disableCheck(event) {
154
154
  event.preventDefault();
155
155
  }
156
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
157
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxComboItemComponent, isStandalone: true, selector: "igx-combo-item", inputs: { itemHeight: "itemHeight", ariaLabel: "ariaLabel", singleMode: ["singleMode", "singleMode", booleanAttribute] }, host: { properties: { "style.height.rem": "this._itemHeightToRem", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, ngImport: i0, template: "@if (!isHeader && !singleMode) {\n <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->\n <igx-checkbox [checked]=\"selected\" [readonly]=\"true\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n}\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n", dependencies: [{ kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }] }); }
156
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
157
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxComboItemComponent, isStandalone: true, selector: "igx-combo-item", inputs: { itemHeight: "itemHeight", ariaLabel: "ariaLabel", singleMode: ["singleMode", "singleMode", booleanAttribute] }, host: { properties: { "style.height.rem": "this._itemHeightToRem", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, ngImport: i0, template: "@if (!isHeader && !singleMode) {\n <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->\n <igx-checkbox [checked]=\"selected\" [readonly]=\"true\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n}\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n", dependencies: [{ kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }] }); }
158
158
  }
159
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboItemComponent, decorators: [{
159
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboItemComponent, decorators: [{
160
160
  type: Component,
161
161
  args: [{ selector: 'igx-combo-item', imports: [IgxCheckboxComponent], template: "@if (!isHeader && !singleMode) {\n <!-- checkbox should not allow changing its state from UI click (that's why it should be readonly=true), becasue when cancelling the selectionChange event in the combo, then checkbox will still change state.-->\n <igx-checkbox [checked]=\"selected\" [readonly]=\"true\" [disableRipple]=\"true\" [disableTransitions]=\"disableTransitions\" [tabindex]=\"-1\" (click)=\"disableCheck($event)\" class=\"igx-combo__checkbox\"></igx-checkbox>\n}\n<span class=\"igx-drop-down__inner\"><ng-content></ng-content></span>\n" }]
162
162
  }], propDecorators: { itemHeight: [{
@@ -191,10 +191,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
191
191
  * </igx-combo>
192
192
  */
193
193
  class IgxComboHeaderDirective {
194
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
195
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboHeaderDirective, isStandalone: true, selector: "[igxComboHeader]", ngImport: i0 }); }
194
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
195
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboHeaderDirective, isStandalone: true, selector: "[igxComboHeader]", ngImport: i0 }); }
196
196
  }
197
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboHeaderDirective, decorators: [{
197
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboHeaderDirective, decorators: [{
198
198
  type: Directive,
199
199
  args: [{
200
200
  selector: '[igxComboHeader]',
@@ -218,10 +218,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
218
218
  * </igx-combo>
219
219
  */
220
220
  class IgxComboFooterDirective {
221
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
222
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboFooterDirective, isStandalone: true, selector: "[igxComboFooter]", ngImport: i0 }); }
221
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
222
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboFooterDirective, isStandalone: true, selector: "[igxComboFooter]", ngImport: i0 }); }
223
223
  }
224
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboFooterDirective, decorators: [{
224
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboFooterDirective, decorators: [{
225
225
  type: Directive,
226
226
  args: [{
227
227
  selector: '[igxComboFooter]',
@@ -247,10 +247,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
247
247
  * </igx-combo>
248
248
  */
249
249
  class IgxComboItemDirective {
250
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
251
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboItemDirective, isStandalone: true, selector: "[igxComboItem]", ngImport: i0 }); }
250
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
251
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboItemDirective, isStandalone: true, selector: "[igxComboItem]", ngImport: i0 }); }
252
252
  }
253
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboItemDirective, decorators: [{
253
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboItemDirective, decorators: [{
254
254
  type: Directive,
255
255
  args: [{
256
256
  selector: '[igxComboItem]',
@@ -275,10 +275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
275
275
  * </igx-combo>
276
276
  */
277
277
  class IgxComboEmptyDirective {
278
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
279
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboEmptyDirective, isStandalone: true, selector: "[igxComboEmpty]", ngImport: i0 }); }
278
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
279
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboEmptyDirective, isStandalone: true, selector: "[igxComboEmpty]", ngImport: i0 }); }
280
280
  }
281
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboEmptyDirective, decorators: [{
281
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboEmptyDirective, decorators: [{
282
282
  type: Directive,
283
283
  args: [{
284
284
  selector: '[igxComboEmpty]',
@@ -301,10 +301,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
301
301
  * </igx-combo>
302
302
  */
303
303
  class IgxComboHeaderItemDirective {
304
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboHeaderItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
305
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboHeaderItemDirective, isStandalone: true, selector: "[igxComboHeaderItem]", ngImport: i0 }); }
304
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboHeaderItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
305
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboHeaderItemDirective, isStandalone: true, selector: "[igxComboHeaderItem]", ngImport: i0 }); }
306
306
  }
307
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboHeaderItemDirective, decorators: [{
307
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboHeaderItemDirective, decorators: [{
308
308
  type: Directive,
309
309
  args: [{
310
310
  selector: '[igxComboHeaderItem]',
@@ -331,10 +331,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
331
331
  * </igx-combo>
332
332
  */
333
333
  class IgxComboAddItemDirective {
334
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboAddItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
335
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboAddItemDirective, isStandalone: true, selector: "[igxComboAddItem]", ngImport: i0 }); }
334
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboAddItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
335
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboAddItemDirective, isStandalone: true, selector: "[igxComboAddItem]", ngImport: i0 }); }
336
336
  }
337
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboAddItemDirective, decorators: [{
337
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboAddItemDirective, decorators: [{
338
338
  type: Directive,
339
339
  args: [{
340
340
  selector: '[igxComboAddItem]',
@@ -357,10 +357,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
357
357
  * </igx-combo>
358
358
  */
359
359
  class IgxComboToggleIconDirective {
360
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
361
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboToggleIconDirective, isStandalone: true, selector: "[igxComboToggleIcon]", ngImport: i0 }); }
360
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
361
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboToggleIconDirective, isStandalone: true, selector: "[igxComboToggleIcon]", ngImport: i0 }); }
362
362
  }
363
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboToggleIconDirective, decorators: [{
363
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboToggleIconDirective, decorators: [{
364
364
  type: Directive,
365
365
  args: [{
366
366
  selector: '[igxComboToggleIcon]',
@@ -383,10 +383,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
383
383
  * </igx-combo>
384
384
  */
385
385
  class IgxComboClearIconDirective {
386
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboClearIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
387
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboClearIconDirective, isStandalone: true, selector: "[igxComboClearIcon]", ngImport: i0 }); }
386
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboClearIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
387
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboClearIconDirective, isStandalone: true, selector: "[igxComboClearIcon]", ngImport: i0 }); }
388
388
  }
389
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboClearIconDirective, decorators: [{
389
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboClearIconDirective, decorators: [{
390
390
  type: Directive,
391
391
  args: [{
392
392
  selector: '[igxComboClearIcon]',
@@ -1461,10 +1461,10 @@ class IgxComboBaseDirective {
1461
1461
  }
1462
1462
  return false;
1463
1463
  }
1464
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1465
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.6", type: IgxComboBaseDirective, isStandalone: true, inputs: { showSearchCaseIcon: ["showSearchCaseIcon", "showSearchCaseIcon", booleanAttribute], disableFiltering: ["disableFiltering", "disableFiltering", booleanAttribute], overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: ["allowCustomValues", "allowCustomValues", booleanAttribute], itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], disableClear: ["disableClear", "disableClear", booleanAttribute], type: "type", resourceStrings: "resourceStrings", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }, { propertyName: "internalSuffixes", predicate: IgxSuffixDirective, descendants: true }], ngImport: i0 }); }
1464
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1465
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.2.9", type: IgxComboBaseDirective, isStandalone: true, inputs: { showSearchCaseIcon: ["showSearchCaseIcon", "showSearchCaseIcon", booleanAttribute], disableFiltering: ["disableFiltering", "disableFiltering", booleanAttribute], overlaySettings: "overlaySettings", id: "id", width: "width", allowCustomValues: ["allowCustomValues", "allowCustomValues", booleanAttribute], itemsMaxHeight: "itemsMaxHeight", itemHeight: "itemHeight", itemsWidth: "itemsWidth", placeholder: "placeholder", data: "data", valueKey: "valueKey", displayKey: "displayKey", groupKey: "groupKey", groupSortingDirection: "groupSortingDirection", filterFunction: "filterFunction", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], disableClear: ["disableClear", "disableClear", booleanAttribute], type: "type", resourceStrings: "resourceStrings", filteringOptions: "filteringOptions" }, outputs: { opening: "opening", opened: "opened", closing: "closing", closed: "closed", addition: "addition", searchInputUpdate: "searchInputUpdate", dataPreLoad: "dataPreLoad" }, host: { properties: { "attr.id": "this.id", "style.width": "this.width", "class.igx-combo": "this.cssClass" } }, queries: [{ propertyName: "itemTemplate", first: true, predicate: IgxComboItemDirective, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: IgxComboHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: IgxComboFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "headerItemTemplate", first: true, predicate: IgxComboHeaderItemDirective, descendants: true, read: TemplateRef }, { propertyName: "addItemTemplate", first: true, predicate: IgxComboAddItemDirective, descendants: true, read: TemplateRef }, { propertyName: "emptyTemplate", first: true, predicate: IgxComboEmptyDirective, descendants: true, read: TemplateRef }, { propertyName: "toggleIconTemplate", first: true, predicate: IgxComboToggleIconDirective, descendants: true, read: TemplateRef }, { propertyName: "clearIconTemplate", first: true, predicate: IgxComboClearIconDirective, descendants: true, read: TemplateRef }, { propertyName: "label", first: true, predicate: i0.forwardRef(() => IgxLabelDirective), descendants: true, static: true }, { propertyName: "prefixes", predicate: IgxPrefixDirective, descendants: true }, { propertyName: "suffixes", predicate: IgxSuffixDirective, descendants: true }], viewQueries: [{ propertyName: "inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: IgxInputGroupComponent, static: true }, { propertyName: "comboInput", first: true, predicate: ["comboInput"], descendants: true, read: IgxInputDirective, static: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "virtualScrollContainer", first: true, predicate: IgxForOfDirective, descendants: true, static: true }, { propertyName: "virtDir", first: true, predicate: IgxForOfDirective, descendants: true, read: IgxForOfDirective, static: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownItemContainer"], descendants: true, static: true }, { propertyName: "primitiveTemplate", first: true, predicate: ["primitive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "complexTemplate", first: true, predicate: ["complex"], descendants: true, read: TemplateRef, static: true }, { propertyName: "internalSuffixes", predicate: IgxSuffixDirective, descendants: true }], ngImport: i0 }); }
1466
1466
  }
1467
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
1467
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboBaseDirective, decorators: [{
1468
1468
  type: Directive
1469
1469
  }], ctorParameters: () => [], propDecorators: { showSearchCaseIcon: [{
1470
1470
  type: Input,
@@ -1616,10 +1616,10 @@ class IgxComboAddItemComponent extends IgxComboItemComponent {
1616
1616
  this.comboAPI.disableTransitions = false;
1617
1617
  this.comboAPI.add_custom_item();
1618
1618
  }
1619
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1620
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", host: { properties: { "class.igx-drop-down__item": "this.isDropDownItem" } }, providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
1619
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboAddItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1620
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: IgxComboAddItemComponent, isStandalone: true, selector: "igx-combo-add-item", host: { properties: { "class.igx-drop-down__item": "this.isDropDownItem" } }, providers: [{ provide: IgxComboItemComponent, useExisting: IgxComboAddItemComponent }], usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
1621
1621
  }
1622
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
1622
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboAddItemComponent, decorators: [{
1623
1623
  type: Component,
1624
1624
  args: [{
1625
1625
  selector: 'igx-combo-add-item',
@@ -1814,10 +1814,10 @@ class IgxComboDropDownComponent extends IgxDropDownComponent {
1814
1814
  this.focusedItem = this.items[this.items.length - 1];
1815
1815
  }
1816
1816
  }
1817
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1818
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxComboDropDownComponent, isStandalone: true, selector: "igx-combo-drop-down", inputs: { singleMode: ["singleMode", "singleMode", booleanAttribute] }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\n igxToggle\n (appended)=\"onToggleContentAppended($event)\"\n (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" [attr.role]=\"role\" [attr.aria-labelledby]=\"labelledBy\"\n [style.height]=\"height\"\n [style.maxHeight]=\"maxHeight\">\n @if (!collapsed) {\n <ng-content></ng-content>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
1817
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboDropDownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
1818
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxComboDropDownComponent, isStandalone: true, selector: "igx-combo-drop-down", inputs: { singleMode: ["singleMode", "singleMode", booleanAttribute] }, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], queries: [{ propertyName: "children", predicate: IgxComboItemComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\n igxToggle\n (appended)=\"onToggleContentAppended($event)\"\n (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" [attr.role]=\"role\" [attr.aria-labelledby]=\"labelledBy\"\n [style.height]=\"height\"\n [style.maxHeight]=\"maxHeight\">\n @if (!collapsed) {\n <ng-content></ng-content>\n }\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: IgxToggleDirective, selector: "[igxToggle]", inputs: ["id"], outputs: ["opened", "opening", "closed", "closing", "appended"], exportAs: ["toggle"] }] }); }
1819
1819
  }
1820
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
1820
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboDropDownComponent, decorators: [{
1821
1821
  type: Component,
1822
1822
  args: [{ selector: 'igx-combo-drop-down', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], imports: [IgxToggleDirective], template: "<div class=\"igx-drop-down__list\" [style.width]=\"width\"\n igxToggle\n (appended)=\"onToggleContentAppended($event)\"\n (opening)=\"onToggleOpening($event)\" (opened)=\"onToggleOpened()\"\n (closing)=\"onToggleClosing($event)\" (closed)=\"onToggleClosed()\">\n <div class=\"igx-drop-down__list-scroll\" #scrollContainer [attr.id]=\"listId\" [attr.role]=\"role\" [attr.aria-labelledby]=\"labelledBy\"\n [style.height]=\"height\"\n [style.maxHeight]=\"maxHeight\">\n @if (!collapsed) {\n <ng-content></ng-content>\n }\n </div>\n</div>\n" }]
1823
1823
  }], propDecorators: { singleMode: [{
@@ -1840,10 +1840,10 @@ class IgxComboFilteringPipe {
1840
1840
  filteringOptions.filteringKey = filteringOptions.filteringKey ?? displayKey;
1841
1841
  return filterFunction(collection, searchValue, filteringOptions);
1842
1842
  }
1843
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1844
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxComboFilteringPipe, isStandalone: true, name: "comboFiltering" }); }
1843
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboFilteringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1844
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxComboFilteringPipe, isStandalone: true, name: "comboFiltering" }); }
1845
1845
  }
1846
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
1846
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboFilteringPipe, decorators: [{
1847
1847
  type: Pipe,
1848
1848
  args: [{
1849
1849
  name: 'comboFiltering',
@@ -1878,10 +1878,10 @@ class IgxComboGroupingPipe {
1878
1878
  });
1879
1879
  return result;
1880
1880
  }
1881
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1882
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxComboGroupingPipe, isStandalone: true, name: "comboGrouping" }); }
1881
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboGroupingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1882
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxComboGroupingPipe, isStandalone: true, name: "comboGrouping" }); }
1883
1883
  }
1884
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
1884
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboGroupingPipe, decorators: [{
1885
1885
  type: Pipe,
1886
1886
  args: [{
1887
1887
  name: 'comboGrouping',
@@ -2273,14 +2273,14 @@ class IgxComboComponent extends IgxComboBaseDirective {
2273
2273
  selection.join(', ');
2274
2274
  return value;
2275
2275
  }
2276
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2277
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging", selectionChanged: "selectionChanged" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.Escape": "onEscape($event)" } }, providers: [
2276
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2277
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: IgxComboComponent, isStandalone: true, selector: "igx-combo", inputs: { autoFocusSearch: ["autoFocusSearch", "autoFocusSearch", booleanAttribute], searchPlaceholder: "searchPlaceholder" }, outputs: { selectionChanging: "selectionChanging", selectionChanged: "selectionChanged" }, host: { listeners: { "keydown.ArrowDown": "onArrowDown($event)", "keydown.Alt.ArrowDown": "onArrowDown($event)", "keydown.Escape": "onEscape($event)" } }, providers: [
2278
2278
  IgxComboAPIService,
2279
2279
  { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },
2280
2280
  { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true }
2281
2281
  ], viewQueries: [{ propertyName: "dropdown", first: true, predicate: IgxComboDropDownComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<igx-input-group #inputGroup [type]=\"type === 'search' ? 'box' : 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,[igxPrefix]\"></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\" [igxReadOnlyInput]=\"false\"\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 [attr.aria-label]=\"getAriaLabel()\"\n (blur)=\"onBlur()\" />\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n @if (displayValue && !disableClear) {\n <igx-suffix [attr.aria-label]=\"resourceStrings.igx_combo_clearItems_placeholder\" class=\"igx-combo__clear-button\"\n (click)=\"handleClearItems($event)\">\n @if (clearIconTemplate) {\n <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n }\n @if (!clearIconTemplate) {\n <igx-icon family=\"default\" name=\"input_clear\"></igx-icon>\n }\n </igx-suffix>\n }\n <igx-suffix class=\"igx-combo__toggle-button\">\n @if (toggleIconTemplate) {\n <ng-container *ngTemplateOutlet=\"toggleIconTemplate; context: {$implicit: collapsed}\"></ng-container>\n }\n @if (!toggleIconTemplate) {\n <igx-icon family=\"default\" [name]=\"toggleIcon\"></igx-icon>\n }\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 @if (displaySearchInput) {\n <div class=\"igx-combo__search\">\n <igx-input-group type=\"line\">\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 @if (showSearchCaseIcon) {\n <igx-suffix (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 }\n </igx-input-group>\n </div>\n }\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; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize, scrollOrientation: 'vertical';\"\n [value]=\"item\" [isHeader]=\"item?.isHeader\" [index]=\"rowIndex\" [role]=\"item?.isHeader? 'group' : 'option'\">\n @if (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 }\n <!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->\n @if (!item?.isHeader) {\n <ng-container #listItem\n *ngTemplateOutlet=\"template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};\">\n </ng-container>\n }\n </igx-combo-item>\n </div>\n @if (filteredData.length === 0 || isAddButtonVisible()) {\n <div class=\"igx-combo__add\">\n @if (filteredData.length === 0) {\n <div class=\"igx-combo__empty\">\n <ng-container *ngTemplateOutlet=\"emptyTemplate ? emptyTemplate : empty\">\n </ng-container>\n </div>\n }\n @if (isAddButtonVisible()) {\n <igx-combo-add-item [itemHeight]=\"itemHeight\"\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 }\n </div>\n }\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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "[igxSuffix],[igxEnd],igx-suffix" }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "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", "igxForInitialChunkSize", "igxForItemSize", "igxForTotalItemCount", "igxForTrackBy"], outputs: ["chunkLoad", "scrollbarVisibilityChanged", "chunkSizeChange", "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: "directive", type: IgxReadOnlyInputDirective, selector: "[igxReadOnlyInput]", inputs: ["igxReadOnlyInput"], exportAs: ["igxReadOnlyInput"] }, { kind: "pipe", type: IgxComboFilteringPipe, name: "comboFiltering" }, { kind: "pipe", type: IgxComboGroupingPipe, name: "comboGrouping" }] }); }
2282
2282
  }
2283
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboComponent, decorators: [{
2283
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboComponent, decorators: [{
2284
2284
  type: Component,
2285
2285
  args: [{ selector: 'igx-combo', providers: [
2286
2286
  IgxComboAPIService,
@@ -2350,11 +2350,11 @@ const IGX_COMBO_DIRECTIVES = [
2350
2350
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
2351
2351
  */
2352
2352
  class IgxComboModule {
2353
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2354
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.6", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
2355
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent] }); }
2353
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2354
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective], exports: [IgxComboComponent, IgxComboAddItemDirective, IgxComboClearIconDirective, IgxComboEmptyDirective, IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective, i3.IgxLabelDirective, i3.IgxPrefixDirective, i3.IgxSuffixDirective, i3.IgxHintDirective] }); }
2355
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboModule, imports: [IgxComboComponent] }); }
2356
2356
  }
2357
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: IgxComboModule, decorators: [{
2357
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: IgxComboModule, decorators: [{
2358
2358
  type: NgModule,
2359
2359
  args: [{
2360
2360
  imports: [