igniteui-angular 22.2.0-rc.1 → 22.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (107) hide show
  1. package/README.md +1 -1
  2. package/button-group/README.md +42 -9
  3. package/calendar/README.md +30 -20
  4. package/card/README.md +1 -1
  5. package/fesm2022/igniteui-angular-accordion.mjs +7 -7
  6. package/fesm2022/igniteui-angular-action-strip.mjs +11 -22
  7. package/fesm2022/igniteui-angular-action-strip.mjs.map +1 -1
  8. package/fesm2022/igniteui-angular-avatar.mjs +7 -7
  9. package/fesm2022/igniteui-angular-badge.mjs +7 -7
  10. package/fesm2022/igniteui-angular-banner.mjs +10 -10
  11. package/fesm2022/igniteui-angular-bottom-nav.mjs +22 -22
  12. package/fesm2022/igniteui-angular-button-group.mjs +32 -35
  13. package/fesm2022/igniteui-angular-button-group.mjs.map +1 -1
  14. package/fesm2022/igniteui-angular-calendar.mjs +132 -180
  15. package/fesm2022/igniteui-angular-calendar.mjs.map +1 -1
  16. package/fesm2022/igniteui-angular-card.mjs +47 -58
  17. package/fesm2022/igniteui-angular-card.mjs.map +1 -1
  18. package/fesm2022/igniteui-angular-carousel.mjs +22 -22
  19. package/fesm2022/igniteui-angular-chat-extras.mjs +6 -6
  20. package/fesm2022/igniteui-angular-chat.mjs +12 -12
  21. package/fesm2022/igniteui-angular-checkbox.mjs +7 -7
  22. package/fesm2022/igniteui-angular-chips.mjs +10 -10
  23. package/fesm2022/igniteui-angular-combo.mjs +66 -60
  24. package/fesm2022/igniteui-angular-combo.mjs.map +1 -1
  25. package/fesm2022/igniteui-angular-core.mjs +107 -79
  26. package/fesm2022/igniteui-angular-core.mjs.map +1 -1
  27. package/fesm2022/igniteui-angular-date-picker.mjs +38 -38
  28. package/fesm2022/igniteui-angular-dialog.mjs +13 -13
  29. package/fesm2022/igniteui-angular-directives.mjs +194 -194
  30. package/fesm2022/igniteui-angular-drop-down.mjs +29 -29
  31. package/fesm2022/igniteui-angular-expansion-panel.mjs +28 -28
  32. package/fesm2022/igniteui-angular-grids-core.mjs +737 -661
  33. package/fesm2022/igniteui-angular-grids-core.mjs.map +1 -1
  34. package/fesm2022/igniteui-angular-grids-grid.mjs +69 -58
  35. package/fesm2022/igniteui-angular-grids-grid.mjs.map +1 -1
  36. package/fesm2022/igniteui-angular-grids-hierarchical-grid.mjs +37 -37
  37. package/fesm2022/igniteui-angular-grids-lite.mjs +25 -17
  38. package/fesm2022/igniteui-angular-grids-lite.mjs.map +1 -1
  39. package/fesm2022/igniteui-angular-grids-pivot-grid.mjs +92 -81
  40. package/fesm2022/igniteui-angular-grids-pivot-grid.mjs.map +1 -1
  41. package/fesm2022/igniteui-angular-grids-tree-grid.mjs +55 -55
  42. package/fesm2022/igniteui-angular-icon.mjs +10 -10
  43. package/fesm2022/igniteui-angular-input-group.mjs +25 -25
  44. package/fesm2022/igniteui-angular-list.mjs +40 -40
  45. package/fesm2022/igniteui-angular-navbar.mjs +13 -13
  46. package/fesm2022/igniteui-angular-navigation-drawer.mjs +43 -38
  47. package/fesm2022/igniteui-angular-navigation-drawer.mjs.map +1 -1
  48. package/fesm2022/igniteui-angular-paginator.mjs +19 -19
  49. package/fesm2022/igniteui-angular-progressbar.mjs +19 -19
  50. package/fesm2022/igniteui-angular-query-builder.mjs +22 -22
  51. package/fesm2022/igniteui-angular-radio.mjs +25 -21
  52. package/fesm2022/igniteui-angular-radio.mjs.map +1 -1
  53. package/fesm2022/igniteui-angular-select.mjs +25 -25
  54. package/fesm2022/igniteui-angular-simple-combo.mjs +9 -9
  55. package/fesm2022/igniteui-angular-simple-combo.mjs.map +1 -1
  56. package/fesm2022/igniteui-angular-slider.mjs +28 -28
  57. package/fesm2022/igniteui-angular-snackbar.mjs +7 -7
  58. package/fesm2022/igniteui-angular-splitter.mjs +13 -13
  59. package/fesm2022/igniteui-angular-stepper.mjs +34 -34
  60. package/fesm2022/igniteui-angular-switch.mjs +7 -7
  61. package/fesm2022/igniteui-angular-tabs.mjs +34 -34
  62. package/fesm2022/igniteui-angular-time-picker.mjs +19 -19
  63. package/fesm2022/igniteui-angular-toast.mjs +7 -7
  64. package/fesm2022/igniteui-angular-tree.mjs +28 -28
  65. package/fesm2022/igniteui-angular-virtual-scroll.mjs +497 -145
  66. package/fesm2022/igniteui-angular-virtual-scroll.mjs.map +1 -1
  67. package/migrations/common/UpdateChanges.d.ts +25 -5
  68. package/migrations/common/UpdateChanges.js +218 -34
  69. package/migrations/common/UpdateChanges.spec.js +763 -0
  70. package/migrations/migration-collection.json +1 -1
  71. package/migrations/update-22_2_0/index.js +145 -0
  72. package/migrations/update-22_2_0/index.spec.js +133 -0
  73. package/navigation-drawer/README.md +1 -1
  74. package/package.json +4 -4
  75. package/schematics/tsconfig.tsbuildinfo +1 -1
  76. package/skills/igniteui-angular-components/SKILL.md +9 -5
  77. package/skills/igniteui-angular-components/references/form-controls.md +1 -1
  78. package/skills/igniteui-angular-components/references/mcp-setup.md +14 -2
  79. package/skills/igniteui-angular-figma-to-app/SKILL.md +112 -525
  80. package/skills/igniteui-angular-figma-to-app/references/asset-extraction.md +49 -75
  81. package/skills/igniteui-angular-figma-to-app/references/design-provenance.md +201 -0
  82. package/skills/igniteui-angular-figma-to-app/references/design-token-bridge.md +175 -52
  83. package/skills/igniteui-angular-figma-to-app/references/figma-component-map.md +153 -99
  84. package/skills/igniteui-angular-figma-to-app/references/figma-exploration.md +226 -0
  85. package/skills/igniteui-angular-figma-to-app/references/mcp-setup.md +71 -105
  86. package/skills/igniteui-angular-figma-to-app/references/project-setup.md +63 -0
  87. package/skills/igniteui-angular-figma-to-app/references/theme-generation.md +120 -0
  88. package/skills/igniteui-angular-figma-to-app/references/validation-patterns.md +48 -50
  89. package/skills/igniteui-angular-generate-from-image-design/SKILL.md +11 -7
  90. package/skills/igniteui-angular-grids/SKILL.md +7 -3
  91. package/skills/igniteui-angular-grids/references/editing.md +1 -2
  92. package/skills/igniteui-angular-grids/references/grid-migration.md +1 -1
  93. package/skills/igniteui-angular-theming/SKILL.md +9 -5
  94. package/skills/igniteui-angular-theming/references/mcp-setup.md +12 -2
  95. package/types/igniteui-angular-button-group.d.ts +49 -34
  96. package/types/igniteui-angular-calendar.d.ts +33 -50
  97. package/types/igniteui-angular-card.d.ts +12 -17
  98. package/types/igniteui-angular-combo.d.ts +6 -0
  99. package/types/igniteui-angular-core.d.ts +10 -2
  100. package/types/igniteui-angular-grids-core.d.ts +48 -4
  101. package/types/igniteui-angular-grids-grid.d.ts +4 -0
  102. package/types/igniteui-angular-grids-lite.d.ts +5 -1
  103. package/types/igniteui-angular-grids-pivot-grid.d.ts +5 -1
  104. package/types/igniteui-angular-navigation-drawer.d.ts +1 -0
  105. package/types/igniteui-angular-radio.d.ts +5 -0
  106. package/types/igniteui-angular-virtual-scroll.d.ts +41 -13
  107. package/virtual-scroll/README.md +32 -1
@@ -72,10 +72,10 @@ class IgxQueryBuilderHeaderComponent {
72
72
  this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
73
73
  }, this);
74
74
  }
75
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
76
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", showLegend: "showLegend", resourceStrings: "resourceStrings" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<div class=\"igx-query-builder__title\">{{ title }}</div>\n<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
75
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
76
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.0", type: IgxQueryBuilderHeaderComponent, isStandalone: true, selector: "igx-query-builder-header", inputs: { title: "title", showLegend: "showLegend", resourceStrings: "resourceStrings" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<div class=\"igx-query-builder__title\">{{ title }}</div>\n<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.Eager }); }
77
77
  }
78
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{
78
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderHeaderComponent, decorators: [{
79
79
  type: Component,
80
80
  args: [{ selector: 'igx-query-builder-header', changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"igx-query-builder__title\">{{ title }}</div>\n<ng-content></ng-content>\n" }]
81
81
  }], ctorParameters: () => [], propDecorators: { getClass: [{
@@ -93,10 +93,10 @@ class IgxFieldFormatterPipe {
93
93
  transform(value, formatter, rowData, fieldData) {
94
94
  return formatter(value, rowData, fieldData);
95
95
  }
96
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFieldFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
97
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxFieldFormatterPipe, isStandalone: true, name: "fieldFormatter" }); }
96
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFieldFormatterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
97
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxFieldFormatterPipe, isStandalone: true, name: "fieldFormatter" }); }
98
98
  }
99
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxFieldFormatterPipe, decorators: [{
99
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxFieldFormatterPipe, decorators: [{
100
100
  type: Pipe,
101
101
  args: [{
102
102
  name: 'fieldFormatter',
@@ -598,10 +598,10 @@ class IgxQueryBuilderDragService {
598
598
  }
599
599
  }, DEFAULT_SET_Z_INDEX_DELAY);
600
600
  }
601
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
602
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderDragService }); }
601
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
602
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderDragService }); }
603
603
  }
604
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderDragService, decorators: [{
604
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderDragService, decorators: [{
605
605
  type: Injectable
606
606
  }] });
607
607
 
@@ -1885,12 +1885,12 @@ class IgxQueryBuilderTreeComponent {
1885
1885
  this._defaultResourceStrings = getCurrentResourceStrings(QueryBuilderResourceStringsEN, false, locale);
1886
1886
  this._customResourceStrings = this._resourceStrings ? Object.assign({}, this._defaultResourceStrings, this._resourceStrings) : null;
1887
1887
  }
1888
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1889
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", expectedReturnField: "expectedReturnField" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, providers: [
1888
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1889
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.0", type: IgxQueryBuilderTreeComponent, isStandalone: true, selector: "igx-query-builder-tree", inputs: { entities: "entities", queryBuilder: "queryBuilder", searchValueTemplate: "searchValueTemplate", parentExpression: "parentExpression", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", expectedReturnField: "expectedReturnField" }, outputs: { expressionTreeChange: "expressionTreeChange", inEditModeChange: "inEditModeChange" }, host: { properties: { "class": "this.getClass" }, classAttribute: "igx-query-builder-tree" }, providers: [
1890
1890
  IgxQueryBuilderDragService
1891
1891
  ], viewQueries: [{ propertyName: "entitySelect", first: true, predicate: ["entitySelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "editingInputs", first: true, predicate: ["editingInputs"], descendants: true, read: ElementRef }, { propertyName: "returnFieldsCombo", first: true, predicate: ["returnFieldsCombo"], descendants: true, read: IgxComboComponent }, { propertyName: "returnFieldSelect", first: true, predicate: ["returnFieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "fieldSelect", first: true, predicate: ["fieldSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "conditionSelect", first: true, predicate: ["conditionSelect"], descendants: true, read: IgxSelectComponent }, { propertyName: "searchValueInput", first: true, predicate: ["searchValueInput"], descendants: true, read: ElementRef }, { propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "addRootAndGroupButton", first: true, predicate: ["addRootAndGroupButton"], descendants: true, read: ElementRef }, { propertyName: "addConditionButton", first: true, predicate: ["addConditionButton"], descendants: true, read: ElementRef }, { propertyName: "entityChangeDialog", first: true, predicate: ["entityChangeDialog"], descendants: true, read: IgxDialogComponent }, { propertyName: "addExpressionItemDropDown", first: true, predicate: ["addOptionsDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "groupContextMenuDropDown", first: true, predicate: ["groupContextMenuDropDown"], descendants: true, read: IgxDropDownComponent }, { propertyName: "editingInputsContainer", first: true, predicate: ["editingInputsContainer"], descendants: true, read: ElementRef }, { propertyName: "currentGroupButtonsContainer", first: true, predicate: ["currentGroupButtonsContainer"], descendants: true, read: ElementRef }, { propertyName: "expressionsContainer", first: true, predicate: ["expressionsContainer"], descendants: true }, { propertyName: "expressionsChips", predicate: IgxChipComponent, descendants: true, read: IgxChipComponent }, { propertyName: "innerQueries", predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-template #addIcon>\n <igx-icon family=\"default\" name=\"add\"></igx-icon>\n</ng-template>\n\n<ng-template #closeIcon>\n <igx-icon family=\"default\" name=\"close\"></igx-icon>\n</ng-template>\n\n<ng-template #selectFromTemplate>\n <div\n class=\"igx-filter-tree__inputs\"\n [style.display]=\"\n isInEditMode() &&\n (!this.isAdvancedFiltering() || this.isHierarchicalNestedQuery())\n ? 'flex'\n : 'none'\n \"\n >\n <div class=\"igx-filter-tree__inputs-field\">\n <span class=\"igx-query-builder__label\">{{\n this.resourceStrings.igx_query_builder_from_label\n }}</span>\n <igx-select\n #entitySelect\n type=\"box\"\n (selectionChanging)=\"onEntitySelectChanging($event)\"\n (opening)=\"exitEditAddMode(true)\"\n [overlaySettings]=\"entitySelectOverlaySettings\"\n [ngModel]=\"selectedEntity\"\n [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n [placeholder]=\"this.resourceStrings.igx_query_builder_select_entity!\"\n [disabled]=\"disableEntityChange\"\n >\n @for (entity of entities; track entity.name) {\n <igx-select-item [value]=\"entity\">\n {{ entity.name }}\n </igx-select-item>\n }\n </igx-select>\n </div>\n\n <div class=\"igx-filter-tree__inputs-field\">\n @if (!this.isHierarchicalNestedQuery()) {\n <span class=\"igx-query-builder__label\">{{\n this.resourceStrings.igx_query_builder_select_label\n }}</span>\n }\n @if (!parentExpression) {\n <igx-combo\n #returnFieldsCombo\n [itemsMaxHeight]=\"250\"\n [data]=\"fields\"\n [displayKey]=\"'field'\"\n [valueKey]=\"'field'\"\n [disabled]=\"disableReturnFieldsChange\"\n [(ngModel)]=\"selectedReturnFields\"\n [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_fields!\"\n [searchPlaceholder]=\"this.resourceStrings.igx_query_builder_search!\"\n [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n (opening)=\"exitEditAddMode()\"\n >\n <ng-template igxComboHeader>\n <div\n class=\"igx-drop-down__item igx-drop-down__item--query-builder\"\n (click)=\"onSelectAllClicked()\"\n [ngClass]=\"{\n 'igx-drop-down__item--selected':\n this.selectedEntity &&\n this.selectedReturnFields &&\n this.selectedEntity.fields.length ===\n this.selectedReturnFields.length,\n }\"\n >\n <igx-checkbox\n [checked]=\"\n this.selectedEntity &&\n this.selectedReturnFields &&\n this.selectedEntity.fields.length ===\n this.selectedReturnFields.length\n \"\n [indeterminate]=\"\n this.selectedEntity &&\n this.selectedReturnFields &&\n this.selectedReturnFields.length > 0 &&\n this.selectedReturnFields.length < this.selectedEntity.fields.length\n \"\n [readonly]=\"true\"\n [disableRipple]=\"true\"\n [tabindex]=\"-1\"\n class=\"igx-combo__checkbox\"\n >\n </igx-checkbox>\n <div class=\"igx-drop-down__inner\">\n {{ this.resourceStrings.igx_query_builder_select_all }}\n </div>\n </div>\n </ng-template>\n </igx-combo>\n } @else {\n <igx-select\n #returnFieldSelect\n type=\"box\"\n (selectionChanging)=\"onReturnFieldSelectChanging($event)\"\n [overlaySettings]=\"returnFieldSelectOverlaySettings\"\n [disabled]=\"!selectedEntity\"\n [ngModel]=\"selectedReturnFields ? selectedReturnFields[0] : null\"\n [placeholder]=\"this.resourceStrings.igx_query_builder_select_return_field_single!\"\n [style.display]=\"isInEditMode() ? 'block' : 'none'\"\n (opening)=\"exitEditAddMode()\"\n >\n @for (field of fields; track field.field) {\n <igx-select-item [value]=\"field.field\">\n {{ field.field }}\n </igx-select-item>\n }\n </igx-select>\n }\n </div>\n </div>\n</ng-template>\n\n<div #expressionsContainer class=\"igx-query-builder__main\">\n <ng-container *ngTemplateOutlet=\"selectFromTemplate\"></ng-container>\n\n <ng-template\n #addExpressionsTemplate\n let-expressionItem\n let-afterExpression=\"afterExpression\"\n >\n <button\n type=\"button\"\n #addConditionButton\n igxButton=\"flat\"\n [disabled]=\"hasEditedExpression\"\n (click)=\"addCondition(expressionItem, afterExpression, true)\"\n igxDrop\n (enter)=\"\n dragService.onAddConditionEnter(addConditionButton, expressionItem)\n \"\n (leave)=\"dragService.onChipLeave()\"\n >\n <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n <span>{{\n this.resourceStrings.igx_query_builder_add_condition_root\n }}</span>\n </button>\n\n @if (this.rootGroup) {\n <button\n type=\"button\"\n igxButton=\"flat\"\n [disabled]=\"hasEditedExpression\"\n (click)=\"addReverseGroup(expressionItem, afterExpression)\"\n >\n <ng-container *ngTemplateOutlet=\"addIcon\"></ng-container>\n <span>{{ this.resourceStrings.igx_query_builder_add_group_root }}</span>\n </button>\n }\n </ng-template>\n\n <ng-template #operandTemplate let-expressionItem>\n @if (!expressionItem.inEditMode) {\n @if (\n dragService.dropGhostExpression &&\n expressionItem === dragService.dropGhostExpression &&\n dragService.isKeyboardDrag === false\n ) {\n <div\n class=\"igx-filter-tree__expression-item igx-filter-tree__expression-item-drop-ghost\"\n >\n <igx-chip [data]=\"expressionItem\">\n {{ this.resourceStrings.igx_query_builder_drop_ghost_text }}\n </igx-chip>\n </div>\n } @else {\n <div\n #dragRef\n igxDrop\n (enter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n (over)=\"dragService.onDivOver(dragRef, expressionItem)\"\n (leave)=\"dragService.onChipLeave()\"\n (dropped)=\"dragService.onDivDropped(expressionItem)\"\n [ngClass]=\"{\n 'igx-filter-tree__expression-item': true,\n 'igx-filter-tree__expression-item-keyboard-ghost':\n expressionItem === dragService.dropGhostExpression,\n }\"\n (mouseenter)=\"expressionItem.hovered = true\"\n (mouseleave)=\"expressionItem.hovered = false\"\n (focusin)=\"onExpressionFocus(expressionItem)\"\n (focusout)=\"onExpressionBlur($event, expressionItem)\"\n >\n <igx-chip\n #expressionChip\n [draggable]=\"true\"\n [hideBaseOnDrag]=\"false\"\n [animateOnRelease]=\"false\"\n (moveStart)=\"\n dragService.onMoveStart(dragRef, expressionItem, false)\n \"\n (moveEnd)=\"dragService.onMoveEnd()\"\n (dragEnter)=\"dragService.onChipEnter(dragRef, expressionItem)\"\n (dragOver)=\"dragService.onChipOver(dragRef)\"\n (dragLeave)=\"dragService.onChipLeave()\"\n (dragDrop)=\"dragService.onChipDropped()\"\n #target=\"tooltipTarget\"\n [igxTooltipTarget]=\"tooltipRef\"\n [data]=\"expressionItem\"\n [removable]=\"isInEditMode() ? 'true' : 'false'\"\n (keydown)=\"invokeClick($event)\"\n (click)=\"onChipClick(expressionItem, expressionChip)\"\n (remove)=\"onChipRemove(expressionItem)\"\n >\n <igx-icon\n igxPrefix\n class=\"igx-drag-indicator\"\n tabindex=\"0\"\n (focus)=\"\n dragService.onChipDragIndicatorFocus(dragRef, expressionItem)\n \"\n (focusout)=\"dragService.onChipDragIndicatorFocusOut()\"\n family=\"default\"\n name=\"drag_indicator\"\n >\n </igx-icon>\n <span igxPrefix class=\"igx-filter-tree__expression-column\">\n {{\n expressionItem.fieldLabel || expressionItem.expression.fieldName\n }}\n </span>\n <span igxPrefix class=\"igx-filter-tree__expression-condition\">\n {{\n getConditionFriendlyName(\n $safeNavigationMigration(\n expressionItem.expression.condition?.name\n )\n )\n }}\n </span>\n @if (!expressionItem.expression.condition?.isUnary) {\n <span>\n @if (expressionItem.expression.searchTree) {\n <ng-container>\n <strong>{{\n expressionItem.expression.searchTree.entity\n }}</strong\n >&nbsp;/\n {{\n formatReturnFields(expressionItem.expression.searchTree)\n }}\n </ng-container>\n } @else {\n <ng-container>\n @if (isDate(expressionItem.expression.searchVal)) {\n @if (getFormatter(expressionItem.expression.fieldName)) {\n {{\n expressionItem.expression.searchVal\n | fieldFormatter\n : $any(getFormatter(\n expressionItem.expression.fieldName\n ))\n : undefined\n }}\n } @else {\n {{\n expressionItem.expression.searchVal\n | date\n : getFormat(expressionItem.expression.fieldName)\n : undefined\n : this.locale\n }}\n }\n } @else {\n @if (getFormatter(expressionItem.expression.fieldName)) {\n {{\n expressionItem.expression.searchVal\n | fieldFormatter\n : $any(getFormatter(\n expressionItem.expression.fieldName\n ))\n : expressionItem.expression.conditionName ||\n expressionItem.expression.condition?.name\n }}\n } @else {\n {{ expressionItem.expression.searchVal }}\n }\n }\n </ng-container>\n }\n </span>\n }\n </igx-chip>\n <div #tooltipRef=\"tooltip\" igxTooltip>\n @if (expressionItem.expression.searchTree) {\n {{ expressionItem.expression.searchTree.returnFields.join(', ') }}\n } @else if (expressionItem.expression.condition?.isUnary) {\n {{\n getConditionFriendlyName(\n $safeNavigationMigration(\n expressionItem.expression.condition?.name\n )\n )\n }}\n } @else {\n @if (getFormatter(expressionItem.expression.fieldName)) {\n {{\n expressionItem.expression.searchVal\n | fieldFormatter\n : $any(getFormatter(expressionItem.expression.fieldName))\n : expressionItem.expression.conditionName ||\n expressionItem.expression.condition?.name\n }}\n } @else {\n {{ expressionItem.expression.searchVal }}\n }\n }\n </div>\n\n @if (expressionItem.focused || expressionItem.hovered) {\n <div igxDragIgnore class=\"igx-filter-tree__expression-actions\">\n <button\n #addExpressionButton\n igxDragIgnore\n igxIconButton=\"outlined\"\n [igxDropDownItemNavigation]=\"addOptionsDropDown\"\n aria-labelledby=\"add-expression\"\n (keydown)=\"invokeClick($event)\"\n (click)=\"\n clickExpressionAdd(addExpressionButton, expressionChip)\n \"\n (blur)=\"addExpressionBlur()\"\n >\n <igx-icon\n id=\"add-expression\"\n family=\"default\"\n name=\"add\"\n ></igx-icon>\n </button>\n <igx-drop-down\n #addOptionsDropDown\n (selectionChanging)=\"enterExpressionAdd($event, expressionItem)\"\n >\n <igx-drop-down-item [value]=\"'addCondition'\">\n <span>{{\n this.resourceStrings.igx_query_builder_add_condition\n }}</span>\n </igx-drop-down-item>\n <igx-drop-down-item [value]=\"'addGroup'\">\n <span>{{\n this.resourceStrings.igx_query_builder_add_group\n }}</span>\n </igx-drop-down-item>\n </igx-drop-down>\n </div>\n }\n </div>\n }\n }\n <div #editingInputsContainer class=\"igx-filter-tree__subquery\">\n @if (expressionItem.inEditMode) {\n <div\n #editingInputs\n igxDrop\n (enter)=\"\n dragService.onChipEnter(editingInputsContainer, expressionItem)\n \"\n (over)=\"\n dragService.onChipEnter(editingInputsContainer, expressionItem)\n \"\n (leave)=\"dragService.onChipLeave()\"\n (dropped)=\"dragService.onDivDropped(expressionItem)\"\n class=\"igx-filter-tree__inputs\"\n >\n <igx-select\n #fieldSelect\n type=\"box\"\n [overlaySettings]=\"fieldSelectOverlaySettings\"\n [(ngModel)]=\"selectedField\"\n [disabled]=\"!fields\"\n [placeholder]=\"this.resourceStrings.igx_query_builder_column_placeholder!\"\n >\n @for (field of fields; track field) {\n <igx-select-item [value]=\"field\">\n {{ field.label || field.header || field.field }}\n </igx-select-item>\n }\n </igx-select>\n\n <igx-select\n #conditionSelect\n type=\"box\"\n [overlaySettings]=\"conditionSelectOverlaySettings\"\n [(ngModel)]=\"selectedCondition\"\n (selectionChanging)=\"onConditionSelectChanging($event)\"\n [disabled]=\"!selectedField\"\n [placeholder]=\"this.resourceStrings.igx_query_builder_condition_placeholder!\"\n >\n @if (\n selectedField &&\n conditionSelect.value &&\n selectedField.filters!.condition(conditionSelect.value)\n ) {\n <igx-prefix>\n <igx-icon\n family=\"default\"\n [name]=\"\n selectedField.filters!.condition(conditionSelect.value)\n .iconName\n \"\n >\n </igx-icon>\n </igx-prefix>\n }\n\n @for (condition of getConditionList(); track condition) {\n <igx-select-item\n [value]=\"condition\"\n [text]=\"getConditionFriendlyName(condition)\"\n >\n <div class=\"igx-grid__filtering-dropdown-items\">\n <igx-icon\n family=\"default\"\n [name]=\"selectedField!.filters!.condition(condition).iconName\"\n >\n </igx-icon>\n <span class=\"igx-grid__filtering-dropdown-text\">{{\n getConditionFriendlyName(condition)\n }}</span>\n </div>\n </igx-select-item>\n }\n </igx-select>\n\n <ng-container\n *ngTemplateOutlet=\"\n searchValueTemplate\n ? searchValueTemplate\n : defaultSearchValueTemplate;\n context: getSearchValueTemplateContext(defaultSearchValueTemplate)\n \"\n >\n </ng-container>\n\n <ng-template #defaultSearchValueTemplate>\n @if (\n !selectedField ||\n (selectedField.dataType !== 'date' &&\n selectedField.dataType !== 'time' &&\n selectedField.dataType !== 'dateTime')\n ) {\n <igx-input-group type=\"box\">\n <input\n #searchValueInput\n igxInput\n [disabled]=\"isSearchValueInputDisabled()\"\n [placeholder]=\"\n this.selectedCondition === 'inQuery' ||\n this.selectedCondition === 'notInQuery'\n ? this.resourceStrings\n .igx_query_builder_query_value_placeholder\n : this.resourceStrings.igx_query_builder_value_placeholder\n \"\n [type]=\"\n selectedField && selectedField.dataType === 'number'\n ? 'number'\n : 'text'\n \"\n [(ngModel)]=\"searchValue.value\"\n />\n </igx-input-group>\n } @else if (selectedField && selectedField.dataType === 'date') {\n <igx-date-picker\n #picker\n [(value)]=\"searchValue.value\"\n (keydown)=\"openPicker($event)\"\n (click)=\"picker.open()\"\n type=\"box\"\n [disabled]=\"isSearchValueInputDisabled()\"\n [locale]=\"this.locale\"\n [formatter]=\"selectedField.formatter!\"\n [displayFormat]=\"selectedField.pipeArgs!.format!\"\n [weekStart]=\"selectedField.pipeArgs!.weekStart!\"\n [placeholder]=\"\n this.resourceStrings.igx_query_builder_date_placeholder\n !\"\n >\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-date-picker>\n } @else if (selectedField && selectedField.dataType === 'time') {\n <igx-time-picker\n #picker\n [(value)]=\"searchValue.value\"\n (click)=\"picker.open()\"\n (keydown)=\"openPicker($event)\"\n type=\"box\"\n [disabled]=\"isSearchValueInputDisabled()\"\n [locale]=\"this.locale\"\n [formatter]=\"selectedField.formatter!\"\n [displayFormat]=\"selectedField.pipeArgs!.format!\"\n [inputFormat]=\"selectedField.editorOptions!.dateTimeFormat!\"\n [placeholder]=\"\n this.resourceStrings.igx_query_builder_time_placeholder\n !\"\n >\n <!-- disable default icons -->\n <igx-picker-toggle></igx-picker-toggle>\n <igx-picker-clear></igx-picker-clear>\n </igx-time-picker>\n } @else if (\n selectedField && selectedField.dataType === 'dateTime'\n ) {\n <igx-input-group #inputGroup type=\"box\">\n <input\n #input\n igxInput\n tabindex=\"0\"\n [placeholder]=\"\n this.resourceStrings.igx_query_builder_datetime_placeholder\n \"\n [(ngModel)]=\"searchValue.value\"\n [disabled]=\"isSearchValueInputDisabled()\"\n [locale]=\"this.locale\"\n [igxDateTimeEditor]=\"selectedField.editorOptions?.dateTimeFormat!\"\n [defaultFormatType]=\"selectedField.dataType\"\n [displayFormat]=\"selectedField.pipeArgs!.format!\"\n />\n </igx-input-group>\n }\n </ng-template>\n\n <div class=\"igx-filter-tree__inputs-actions\">\n <button\n type=\"button\"\n igxIconButton=\"outlined\"\n [disabled]=\"!operandCanBeCommitted()\"\n (click)=\"commitExpression()\"\n >\n <igx-icon family=\"default\" name=\"confirm\"></igx-icon>\n </button>\n <button\n type=\"button\"\n igxIconButton=\"outlined\"\n (click)=\"discardExpression(expressionItem)\"\n >\n <ng-container *ngTemplateOutlet=\"closeIcon\"></ng-container>\n </button>\n </div>\n </div>\n }\n\n @if (\n (!expressionItem.inEditMode &&\n expressionItem.expression.searchTree &&\n expressionItem.expression.searchTree.filteringOperands?.length > 0) ||\n (expressionItem.inEditMode &&\n selectedField?.filters?.condition(selectedCondition)?.isNestedQuery)\n ) {\n <ng-container>\n <igx-query-builder-tree\n [style.display]=\"\n expressionItem.inEditMode || expressionItem.expanded\n ? 'block'\n : 'none'\n \"\n [entities]=\"\n (this.selectedEntity\n ? this.selectedEntity.childEntities\n : entities?.[0]?.childEntities) ??\n entities ?? []\n \"\n [queryBuilder]=\"this.queryBuilder\"\n [parentExpression]=\"expressionItem\"\n [expectedReturnField]=\"this.selectedField?.field\"\n [expressionTree]=\"\n expressionItem.inEditMode\n ? (innerQueryNewExpressionTree ||\n getExpressionTreeCopy(\n expressionItem.expression.searchTree,\n true\n ))\n : expressionItem.expression.searchTree\n \"\n (inEditModeChange)=\"onInEditModeChanged($event)\"\n [searchValueTemplate]=\"searchValueTemplate\"\n [resourceStrings]=\"resourceStrings\"\n >\n </igx-query-builder-tree>\n </ng-container>\n }\n </div>\n </ng-template>\n\n <ng-template #expressionGroupTemplate let-expressionItem>\n <div\n class=\"igx-filter-tree\"\n (focusout)=\"parentExpression ? null : dragService.onDragFocusOut()\"\n >\n <div\n class=\"igx-filter-tree__line\"\n [ngClass]=\"{\n 'igx-filter-tree__line--and': getOperator(expressionItem) === 0,\n 'igx-filter-tree__line--or': getOperator(expressionItem) === 1,\n }\"\n ></div>\n\n <div class=\"igx-filter-tree__expressions\">\n <div\n class=\"igx-filter-tree__expression-context-menu\"\n #groupRef\n igxDrop\n (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n (leave)=\"dragService.onChipLeave()\"\n >\n <button\n #changeGroupButton\n [ngClass]=\"{\n 'igx-filter-tree__button--and': getOperator(expressionItem) === 0,\n 'igx-filter-tree__button--or': getOperator(expressionItem) === 1,\n }\"\n [igxDropDownItemNavigation]=\"groupContextMenuDropDown\"\n igxDragIgnore\n igxButton=\"flat\"\n aria-labelledby=\"change-group\"\n (keydown)=\"invokeClick($event)\"\n (click)=\"\n onGroupClick(\n groupContextMenuDropDown,\n changeGroupButton,\n expressionItem\n )\n \"\n >\n <span\n igxDrop\n (enter)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n (over)=\"dragService.onGroupRootOver(groupRef, expressionItem)\"\n (leave)=\"dragService.onChipLeave()\"\n >\n {{\n getOperator(expressionItem) === 0\n ? this.resourceStrings.igx_query_builder_and_label\n : this.resourceStrings.igx_query_builder_or_label\n }}\n </span>\n <igx-icon\n family=\"default\"\n name=\"arrow_drop_down\"\n role=\"button\"\n ></igx-icon>\n </button>\n <igx-drop-down\n #groupContextMenuDropDown\n (selectionChanging)=\"\n onGroupContextMenuDropDownSelectionChanging($event)\n \"\n [width]=\"'fit-content'\"\n >\n <igx-drop-down-item [value]=\"'switchCondition'\">\n {{ getSwitchGroupText(expressionItem) }}\n </igx-drop-down-item>\n <igx-drop-down-item\n [value]=\"'ungroup'\"\n [disabled]=\"this.rootGroup === this.contextualGroup\"\n >\n {{ this.resourceStrings.igx_query_builder_ungroup }}\n </igx-drop-down-item>\n </igx-drop-down>\n </div>\n <div class=\"igx-filter-tree__expression-section\">\n @for (\n expr of expressionItem?.children;\n track trackExpressionItem(expr)\n ) {\n <ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n isExpressionGroup(expr)\n ? expressionGroupTemplate\n : operandTemplate;\n context: context(expr)\n \"\n >\n </ng-container>\n </ng-container>\n }\n </div>\n\n @if (expressionItem === rootGroup && !hasEditedExpression) {\n <div #currentGroupButtonsContainer class=\"igx-filter-tree__buttons\">\n <ng-container\n *ngTemplateOutlet=\"\n addExpressionsTemplate;\n context: context(expressionItem)\n \"\n >\n </ng-container>\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n @if (\n rootGroup ||\n (!rootGroup &&\n (selectedEntity || (entities?.length === 1 && !entities[0]?.name)))\n ) {\n <div class=\"igx-filter-tree__section\">\n @if (!this.isAdvancedFiltering()) {\n <span class=\"igx-query-builder__label\">Where</span>\n }\n <ng-container\n *ngTemplateOutlet=\"expressionGroupTemplate; context: context(rootGroup)\"\n ></ng-container>\n </div>\n }\n</div>\n\n<igx-dialog\n #entityChangeDialog\n title=\"{{ this.resourceStrings.igx_query_builder_dialog_title }}\"\n leftButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_cancel }}\"\n rightButtonLabel=\"{{ this.resourceStrings.igx_query_builder_dialog_confirm }}\"\n (leftButtonSelect)=\"onEntityChangeCancel()\"\n (rightButtonSelect)=\"onEntityChangeConfirm()\"\n>\n <section class=\"igx-query-builder-dialog\">\n <p>{{ this.resourceStrings.igx_query_builder_dialog_message }}</p>\n <igx-checkbox\n (change)=\"onShowEntityChangeDialogChange($event)\"\n [disableRipple]=\"true\"\n [tabindex]=\"-1\"\n >\n {{ this.resourceStrings.igx_query_builder_dialog_checkbox_text }}\n </igx-checkbox>\n </section>\n</igx-dialog>\n", dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "directive", type: IgxButtonDirective, selector: "[igxButton]", inputs: ["selected", "igxButton", "igxLabel"], outputs: ["buttonSelected"] }, { kind: "component", type: IgxCheckboxComponent, selector: "igx-checkbox", inputs: ["indeterminate", "checked", "disabled", "invalid", "readonly", "disableTransitions"] }, { kind: "component", type: IgxChipComponent, selector: "igx-chip", inputs: ["variant", "id", "tabIndex", "data", "draggable", "animateOnRelease", "hideBaseOnDrag", "removable", "removeIcon", "outlined", "selectable", "selectIcon", "class", "disabled", "selected", "color", "resourceStrings"], outputs: ["selectedChange", "moveStart", "moveEnd", "remove", "chipClick", "selectedChanging", "selectedChanged", "keyDown", "dragEnter", "dragLeave", "dragOver", "dragDrop"] }, { kind: "component", type: IgxComboComponent, selector: "igx-combo", inputs: ["autoFocusSearch", "searchPlaceholder"], outputs: ["selectionChanging", "selectionChanged"] }, { kind: "directive", type: IgxComboHeaderDirective, selector: "[igxComboHeader]" }, { kind: "component", type: IgxDatePickerComponent, selector: "igx-date-picker", inputs: ["hideOutsideDays", "displayMonthsCount", "orientation", "showWeekNumbers", "activeDate", "formatter", "todayButtonLabel", "cancelButtonLabel", "spinLoop", "spinDelta", "id", "formatViews", "disabledDates", "specialDates", "calendarFormat", "value", "minValue", "maxValue", "resourceStrings", "readOnly"], outputs: ["valueChange", "validationFailed"] }, { kind: "directive", type: IgxDateTimeEditorDirective, selector: "[igxDateTimeEditor]", inputs: ["locale", "minValue", "maxValue", "spinLoop", "displayFormat", "igxDateTimeEditor", "value", "defaultFormatType", "spinDelta"], outputs: ["valueChange", "validationFailed"], exportAs: ["igxDateTimeEditor"] }, { kind: "component", type: IgxDialogComponent, selector: "igx-dialog", inputs: ["id", "isModal", "closeOnEscape", "focusTrap", "title", "message", "leftButtonLabel", "leftButtonType", "leftButtonRipple", "rightButtonLabel", "rightButtonType", "rightButtonRipple", "closeOnOutsideSelect", "positionSettings", "isOpen", "role", "titleId"], outputs: ["opening", "opened", "closing", "closed", "leftButtonSelect", "rightButtonSelect", "isOpenChange"] }, { kind: "directive", type: IgxDragIgnoreDirective, selector: "[igxDragIgnore]" }, { kind: "directive", type: IgxDropDirective, selector: "[igxDrop]", inputs: ["igxDrop", "dropChannel", "dropStrategy"], outputs: ["enter", "over", "leave", "dropped"], exportAs: ["drop"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "directive", type: IgxInputDirective, selector: "[igxInput]", inputs: ["value", "disabled", "required"], exportAs: ["igxInput"] }, { kind: "component", type: IgxInputGroupComponent, selector: "igx-input-group", inputs: ["resourceStrings", "suppressInputAutofocus", "type", "theme"] }, { kind: "component", type: IgxPickerClearComponent, selector: "igx-picker-clear" }, { kind: "component", type: IgxPickerToggleComponent, selector: "igx-picker-toggle", outputs: ["clicked"] }, { kind: "directive", type: IgxPrefixDirective, selector: "[igxPrefix],[igxStart],igx-prefix" }, { kind: "component", type: IgxSelectComponent, selector: "igx-select", inputs: ["placeholder", "disabled", "overlaySettings", "value", "type"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxSelectItemComponent, selector: "igx-select-item", inputs: ["text"] }, { kind: "component", type: IgxTimePickerComponent, selector: "igx-time-picker", inputs: ["id", "displayFormat", "inputFormat", "mode", "minValue", "maxValue", "spinLoop", "formatter", "readOnly", "value", "resourceStrings", "okButtonLabel", "cancelButtonLabel", "itemsDelta"], outputs: ["selected", "valueChange", "validationFailed"] }, { kind: "directive", type: IgxTooltipDirective, selector: "[igxTooltip]", inputs: ["context", "id", "role"], exportAs: ["tooltip"] }, { kind: "directive", type: IgxTooltipTargetDirective, selector: "[igxTooltipTarget]", inputs: ["showDelay", "hideDelay", "hasArrow", "sticky", "closeButtonTemplate", "positionSettings", "tooltipDisabled", "showTriggers", "hideTriggers", "igxTooltipTarget", "tooltip"], outputs: ["tooltipShow", "tooltipHide"], exportAs: ["tooltipTarget"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: IgxDateFormatterPipe, name: "date" }, { kind: "pipe", type: IgxFieldFormatterPipe, name: "fieldFormatter" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
1892
1892
  }
1893
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
1893
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderTreeComponent, decorators: [{
1894
1894
  type: Component,
1895
1895
  args: [{ selector: 'igx-query-builder-tree', host: { 'class': 'igx-query-builder-tree' }, imports: [
1896
1896
  IgxDateFormatterPipe,
@@ -2029,10 +2029,10 @@ class IgxQueryBuilderSearchValueTemplateDirective {
2029
2029
  static ngTemplateContextGuard(_directive, context) {
2030
2030
  return true;
2031
2031
  }
2032
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
2033
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: IgxQueryBuilderSearchValueTemplateDirective, isStandalone: true, selector: "[igxQueryBuilderSearchValue]", ngImport: i0 }); }
2032
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
2033
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.2.0", type: IgxQueryBuilderSearchValueTemplateDirective, isStandalone: true, selector: "[igxQueryBuilderSearchValue]", ngImport: i0 }); }
2034
2034
  }
2035
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, decorators: [{
2035
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderSearchValueTemplateDirective, decorators: [{
2036
2036
  type: Directive,
2037
2037
  args: [{
2038
2038
  selector: '[igxQueryBuilderSearchValue]',
@@ -2318,10 +2318,10 @@ class IgxQueryBuilderComponent {
2318
2318
  family: 'material',
2319
2319
  });
2320
2320
  }
2321
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2322
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { showEntityChangeDialog: ["showEntityChangeDialog", "showEntityChangeDialog", booleanAttribute], entities: "entities", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", disableEntityChange: "disableEntityChange", searchValueTemplate: "searchValueTemplate", disableReturnFieldsChange: "disableReturnFieldsChange" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "searchValueTemplateDirective", first: true, predicate: IgxQueryBuilderSearchValueTemplateDirective, descendants: true }, { propertyName: "queryBuilderHeaderCollection", predicate: IgxQueryBuilderHeaderComponent }], viewQueries: [{ propertyName: "queryTree", first: true, predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"igx-query-builder-header,igc-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n [entities]=\"this.entities\"\n [expressionTree]=\"this.expressionTree\"\n [locale]=\"this.locale\"\n [resourceStrings]=\"this.resourceStrings\"\n [queryBuilder]=\"this\"\n (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", styles: ["@layer ig.base{.igx-query-builder{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--query-builder-outer-padding: 1.5rem;--_tree-scrollbar-gutter: 1rem;width:auto;min-width:41.25rem;background-color:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);overflow:hidden}.igx-query-builder:has(:not(igx-query-builder-header)){padding-block-start:var(--query-builder-outer-padding)}.igx-query-builder:has(:not(igx-query-builder-header)) .igx-query-builder-tree--level-0{padding-block:0 var(--query-builder-outer-padding)}.igx-query-builder:has(igx-query-builder-header){padding-block-start:0}.igx-query-builder .igx-chip__ghost{position:relative}.igx-query-builder__header{display:flex;align-items:center;background-color:var(--header-background);color:var(--header-foreground);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--border-radius) var(--border-radius) 0 0;margin-bottom:0;border-block-end:.0625rem solid var(--header-border);padding-inline:var(--query-builder-outer-padding);padding-block:var(--query-builder-outer-padding) 1rem}.igx-query-builder__title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-query-builder__title:empty{display:none}.igx-query-builder__label{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);color:var(--label-foreground)}.igx-query-builder__main{display:grid;gap:1rem}.igx-query-builder__root{display:flex;flex-direction:column;flex-grow:1}.igx-query-builder__root>*{flex-grow:1}.igx-query-builder__root-actions{display:flex;gap:.5rem;padding-bottom:1rem}.igx-query-builder__outlet igx-select-item{--ig-icon-size: 1.125rem}.igx-query-builder--inline{display:flex;flex-direction:column;width:100%;max-width:100%;height:inherit;max-height:inherit;min-width:30rem;box-shadow:none}.igx-query-builder--inline .igx-query-builder__main{min-height:initial;max-height:initial;flex-grow:1}.igx-filter-tree{display:flex;width:100%}.igx-filter-tree .igx-filter-tree{margin-block:.5rem}.igx-filter-tree__subquery{max-width:60rem}.igx-filter-tree__subquery:has(>.igx-filter-tree__inputs){background:var(--subquery-header-background);border:.0625rem solid var(--subquery-border-color);border-radius:var(--subquery-border-radius)}.igx-filter-tree__subquery:has(>.igx-query-builder-tree[style=\"display: none;\"]){display:none}.igx-filter-tree__subquery>.igx-filter-tree__inputs{padding:.75rem;border-radius:inherit}.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-input-group,.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-date-picker,.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-time-picker{flex-grow:1}.igx-filter-tree__subquery .igx-filter-tree__buttons{margin-block-start:.5rem}.igx-filter-tree__subquery .igx-query-builder-tree{border-block-start:.0625rem dashed var(--separator-color);padding:.75rem}.igx-filter-tree__subquery:empty{display:none}.igx-filter-tree__section{display:flex;flex-direction:column;gap:.5rem}.igx-filter-tree__section>.igx-filter-tree{margin-block:0}.igx-filter-tree__line{width:.125rem;background-color:#fff;margin-inline-end:.375rem;outline-style:none}.igx-filter-tree__line--and{background:var(--color-expression-group-and)}.igx-filter-tree__line--or{background:var(--color-expression-group-or)}.igx-filter-tree__button--and[igxButton=flat]{--ig-flat-button-foreground: var(--color-expression-group-and);--ig-flat-button-focus-visible-foreground: var(--color-expression-group-and);--ig-flat-button-icon-color: var(--color-expression-group-and);--ig-flat-button-focus-foreground: var(--color-expression-group-and);--ig-flat-button-hover-foreground: var(--color-expression-group-and);--ig-flat-button-icon-color-hover: var(--color-expression-group-and);--ig-flat-button-focus-hover-foreground: var(--color-expression-group-and);--ig-flat-button-active-foreground: var(--color-expression-group-and)}.igx-filter-tree__button--or[igxButton=flat]{--ig-flat-button-foreground: var(--color-expression-group-or);--ig-flat-button-focus-visible-foreground: var(--color-expression-group-or);--ig-flat-button-icon-color: var(--color-expression-group-or);--ig-flat-button-focus-foreground: var(--color-expression-group-or);--ig-flat-button-hover-foreground: var(--color-expression-group-or);--ig-flat-button-icon-color-hover: var(--color-expression-group-or);--ig-flat-button-focus-hover-foreground: var(--color-expression-group-or);--ig-flat-button-active-foreground: var(--color-expression-group-or)}.igx-filter-tree__expressions{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;gap:.5rem}.igx-filter-tree__expression-context-menu{display:flex;width:100%}.igx-filter-tree__expression-context-menu [igxbutton=flat]{--ig-size: 1;border:none;min-width:auto}.igx-filter-tree__expression-section{display:flex;flex-direction:column;width:calc(100% - 1rem);gap:.5rem;margin-inline-start:1rem}.igx-filter-tree__expression-section:empty{display:none}.igx-filter-tree__expression-item{display:flex;align-items:center;width:100%;gap:.5rem;position:relative}.igx-filter-tree__expression-item igx-chip{--ig-size: 3}.igx-filter-tree__expression-item>igx-chip .igx-filter-tree__expression-column{padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-filter-tree__expression-item>igx-chip .igx-filter-tree__expression-condition{padding-inline-start:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-filter-tree__expression-item>igx-chip igx-prefix{display:flex}.igx-filter-tree__expression-item>igx-chip .igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);--ig-body-2-text-transform: unset;padding-inline:2rem;background:#0000;border-width:.0625rem;border-style:dashed}.igx-filter-tree__expression-item-keyboard-ghost .igx-chip__item,.igx-filter-tree__expression-item-keyboard-ghost .igx-chip:hover .igx-chip__item{box-shadow:var(--ghost-shadow);background:var(--ghost-background);color:var(--focus-text-color)}.igx-filter-tree__expression-column{padding:0 .5rem}.igx-filter-tree__expression-actions,.igx-filter-tree__expression-actions span{display:inline-flex}.igx-filter-tree__buttons{--ig-size: 1;display:flex;align-items:center;gap:.5rem}.igx-filter-tree__buttons [igxbutton=flat]{padding-block:0;border:none}.igx-filter-tree__inputs{--ig-size: 1;display:flex;align-items:flex-end;gap:1rem;width:100%;border-radius:inherit}.igx-filter-tree__inputs:empty{display:none}.igx-filter-tree__inputs-field{display:flex;flex-direction:column;gap:.25rem;max-width:15.625rem;width:100%}.igx-filter-tree__inputs-actions{--ig-size: 2;display:flex;gap:.5rem;align-items:center;width:auto;align-self:center}.igx-filter-tree__inputs-actions [igxIconButton]{transition:none}.igx-filter-tree__details-button{margin-inline-start:auto}.igx-query-builder-tree{background:var(--background)}.igx-query-builder-tree .igx-query-builder-tree{border-radius:var(--subquery-border-radius)}.igx-query-builder-tree--level-0{display:block;width:100%;padding-inline:var(--query-builder-outer-padding)}.igx-query-builder-tree--level-0>.igx-query-builder__main{gap:1rem}.igx-query-builder-tree--level-0>.igx-query-builder__main>.igx-filter-tree__section{scrollbar-width:thin;max-height:35.625rem;overflow-y:auto;overflow-x:hidden;padding-inline-end:var(--_tree-scrollbar-gutter)}.igx-query-builder-dialog{display:flex;flex-direction:column;gap:1rem;max-width:19.375rem}.igx-query-builder-dialog>*{margin:0!important}.igx-advanced-filter{background:var(--background);box-shadow:var(--ig-elevation-24);border-radius:var(--border-radius)}.igx-advanced-filter igx-query-builder{box-shadow:none;border:none;border-radius:inherit}.igx-advanced-filter igx-query-builder-header{cursor:grab}}@layer ig.material{@container style(--ig-theme: material){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0}}}@layer ig.material{@container style(--ig-theme: material){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-and) h s l / .16);--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--background: transparent}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-or) h s l / .16);--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--background: transparent}.igx-filter-tree__expression-actions{gap:1rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-condition{opacity:.6}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-query-builder{--query-builder-outer-padding: 1rem}.igx-query-builder:has(igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:1rem var(--query-builder-outer-padding)}.igx-query-builder__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin-block:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-advanced-filter .igx-excel-filter__secondary-footer{padding:1rem;border-top:.0625rem solid var(--header-border)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: transparent;--focus-visible-background: transparent;--focus-background: transparent;--active-background: transparent;--hover-background: transparent;--background: transparent;--shadow-color: hsl(from var(--color-expression-group-and) h s l / .5);--icon-color-hover: hsl(from var(--color-expression-group-and) h s 34% / 1);--focus-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--hover-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--active-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1)}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: transparent;--focus-visible-background: transparent;--focus-background: transparent;--active-background: transparent;--hover-background: transparent;--background: transparent;--shadow-color: hsl(from var(--color-expression-group-or) h s l / .5);--icon-color-hover: hsl(from var(--color-expression-group-or) h s 14% / 1);--focus-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--hover-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--active-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1)}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 1}.igx-filter-tree__expression-context-menu{--ig-button-text-transform: capitalize}.igx-filter-tree__inputs{--ig-size: 2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0 var(--query-builder-outer-padding)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-filter-tree__button--and[igxButton=flat]{--background: transparent;--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--focus-visible-background: transparent;--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08)}.igx-filter-tree__button--or[igxButton=flat]{--background: transparent;--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--focus-visible-background: transparent;--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08)}.igx-filter-tree__expression-actions{gap:1rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-condition{opacity:.6}.igx-filter-tree__inputs{--ig-size: 1}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-advanced-filter{box-shadow:var(--ig-elevation-24)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-and) h s l / .16);--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--background: transparent}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-or) h s l / .16);--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--background: transparent}.igx-filter-tree__expression-actions{gap:.5rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-item-keyboard-ghost .igx-chip:hover .igx-chip__item{border-color:var(--border-color)}.igx-filter-tree__expression-condition{opacity:.8}.igx-filter-tree__inputs{--ig-size: 2}.igx-filter-tree__expression-item-keyboard-ghost igx-chip:hover .igx-chip__item{border-color:var(--border-color)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-query-builder--sortable .igx-query-builder__icons .sort-icon{opacity:.75}.igx-query-builder--sortable .igx-query-builder__icons .sort-icon:hover{opacity:1}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-filter-tree__button--and[igxButton=flat]{--icon-color-hover: hsl(from var(--color-expression-group-and) h s 78% / 1);--focus-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--hover-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--active-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1)}.igx-filter-tree__button--or[igxButton=flat]{--icon-color-hover: hsl(from var(--color-expression-group-or) h s 47% / 1);--focus-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--hover-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--active-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1)}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-filter-tree__button--and[igxButton=flat],.igx-filter-tree__button--or[igxButton=flat]{--background: transparent;--focus-hover-background: var(--ig-gray-200);--focus-visible-background: transparent;--focus-background: transparent;--active-background: var(--ig-gray-200);--hover-background: var(--ig-gray-200)}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}\n"], dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
2321
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2322
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.2.0", type: IgxQueryBuilderComponent, isStandalone: true, selector: "igx-query-builder", inputs: { showEntityChangeDialog: ["showEntityChangeDialog", "showEntityChangeDialog", booleanAttribute], entities: "entities", fields: "fields", expressionTree: "expressionTree", locale: "locale", resourceStrings: "resourceStrings", disableEntityChange: "disableEntityChange", searchValueTemplate: "searchValueTemplate", disableReturnFieldsChange: "disableReturnFieldsChange" }, outputs: { expressionTreeChange: "expressionTreeChange" }, host: { properties: { "class.igx-query-builder": "this.cssClass", "style.display": "this.display" } }, queries: [{ propertyName: "searchValueTemplateDirective", first: true, predicate: IgxQueryBuilderSearchValueTemplateDirective, descendants: true }, { propertyName: "queryBuilderHeaderCollection", predicate: IgxQueryBuilderHeaderComponent }], viewQueries: [{ propertyName: "queryTree", first: true, predicate: IgxQueryBuilderTreeComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"igx-query-builder-header,igc-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n [entities]=\"this.entities\"\n [expressionTree]=\"this.expressionTree\"\n [locale]=\"this.locale\"\n [resourceStrings]=\"this.resourceStrings\"\n [queryBuilder]=\"this\"\n (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", styles: ["@layer ig.base{.igx-query-builder{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--query-builder-outer-padding: 1.5rem;--_tree-scrollbar-gutter: 1rem;width:auto;min-width:41.25rem;background-color:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);overflow:hidden}.igx-query-builder:has(:not(igx-query-builder-header)){padding-block-start:var(--query-builder-outer-padding)}.igx-query-builder:has(:not(igx-query-builder-header)) .igx-query-builder-tree--level-0{padding-block:0 var(--query-builder-outer-padding)}.igx-query-builder:has(igx-query-builder-header){padding-block-start:0}.igx-query-builder .igx-chip__ghost{position:relative}.igx-query-builder__header{display:flex;align-items:center;background-color:var(--header-background);color:var(--header-foreground);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--border-radius) var(--border-radius) 0 0;margin-bottom:0;border-block-end:.0625rem solid var(--header-border);padding-inline:var(--query-builder-outer-padding);padding-block:var(--query-builder-outer-padding) 1rem}.igx-query-builder__title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-query-builder__title:empty{display:none}.igx-query-builder__label{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);color:var(--label-foreground)}.igx-query-builder__main{display:grid;gap:1rem}.igx-query-builder__root{display:flex;flex-direction:column;flex-grow:1}.igx-query-builder__root>*{flex-grow:1}.igx-query-builder__root-actions{display:flex;gap:.5rem;padding-bottom:1rem}.igx-query-builder__outlet igx-select-item{--ig-icon-size: 1.125rem}.igx-query-builder--inline{display:flex;flex-direction:column;width:100%;max-width:100%;height:inherit;max-height:inherit;min-width:30rem;box-shadow:none}.igx-query-builder--inline .igx-query-builder__main{min-height:initial;max-height:initial;flex-grow:1}.igx-filter-tree{display:flex;width:100%}.igx-filter-tree .igx-filter-tree{margin-block:.5rem}.igx-filter-tree__subquery{max-width:60rem}.igx-filter-tree__subquery:has(>.igx-filter-tree__inputs){background:var(--subquery-header-background);border:.0625rem solid var(--subquery-border-color);border-radius:var(--subquery-border-radius)}.igx-filter-tree__subquery:has(>.igx-query-builder-tree[style=\"display: none;\"]){display:none}.igx-filter-tree__subquery>.igx-filter-tree__inputs{padding:.75rem;border-radius:inherit}.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-input-group,.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-date-picker,.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-time-picker{flex-grow:1}.igx-filter-tree__subquery .igx-filter-tree__buttons{margin-block-start:.5rem}.igx-filter-tree__subquery .igx-query-builder-tree{border-block-start:.0625rem dashed var(--separator-color);padding:.75rem}.igx-filter-tree__subquery:empty{display:none}.igx-filter-tree__section{display:flex;flex-direction:column;gap:.5rem}.igx-filter-tree__section>.igx-filter-tree{margin-block:0}.igx-filter-tree__line{width:.125rem;background-color:#fff;margin-inline-end:.375rem;outline-style:none}.igx-filter-tree__line--and{background:var(--color-expression-group-and)}.igx-filter-tree__line--or{background:var(--color-expression-group-or)}.igx-filter-tree__button--and[igxButton=flat]{--ig-flat-button-foreground: var(--color-expression-group-and);--ig-flat-button-focus-visible-foreground: var(--color-expression-group-and);--ig-flat-button-icon-color: var(--color-expression-group-and);--ig-flat-button-focus-foreground: var(--color-expression-group-and);--ig-flat-button-hover-foreground: var(--color-expression-group-and);--ig-flat-button-icon-color-hover: var(--color-expression-group-and);--ig-flat-button-focus-hover-foreground: var(--color-expression-group-and);--ig-flat-button-active-foreground: var(--color-expression-group-and)}.igx-filter-tree__button--or[igxButton=flat]{--ig-flat-button-foreground: var(--color-expression-group-or);--ig-flat-button-focus-visible-foreground: var(--color-expression-group-or);--ig-flat-button-icon-color: var(--color-expression-group-or);--ig-flat-button-focus-foreground: var(--color-expression-group-or);--ig-flat-button-hover-foreground: var(--color-expression-group-or);--ig-flat-button-icon-color-hover: var(--color-expression-group-or);--ig-flat-button-focus-hover-foreground: var(--color-expression-group-or);--ig-flat-button-active-foreground: var(--color-expression-group-or)}.igx-filter-tree__expressions{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;gap:.5rem}.igx-filter-tree__expression-context-menu{display:flex;width:100%}.igx-filter-tree__expression-context-menu [igxbutton=flat]{--ig-size: 1;border:none;min-width:auto}.igx-filter-tree__expression-section{display:flex;flex-direction:column;width:calc(100% - 1rem);gap:.5rem;margin-inline-start:1rem}.igx-filter-tree__expression-section:empty{display:none}.igx-filter-tree__expression-item{display:flex;align-items:center;width:100%;gap:.5rem;position:relative}.igx-filter-tree__expression-item igx-chip{--ig-size: 3}.igx-filter-tree__expression-item>igx-chip .igx-filter-tree__expression-column{padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-filter-tree__expression-item>igx-chip .igx-filter-tree__expression-condition{padding-inline-start:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-filter-tree__expression-item>igx-chip igx-prefix{display:flex}.igx-filter-tree__expression-item>igx-chip .igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);--ig-body-2-text-transform: unset;padding-inline:2rem;background:#0000;border-width:.0625rem;border-style:dashed}.igx-filter-tree__expression-item-keyboard-ghost .igx-chip__item,.igx-filter-tree__expression-item-keyboard-ghost .igx-chip:hover .igx-chip__item{box-shadow:var(--ghost-shadow);background:var(--ghost-background);color:var(--focus-text-color)}.igx-filter-tree__expression-column{padding:0 .5rem}.igx-filter-tree__expression-actions,.igx-filter-tree__expression-actions span{display:inline-flex}.igx-filter-tree__buttons{--ig-size: 1;display:flex;align-items:center;gap:.5rem}.igx-filter-tree__buttons [igxbutton=flat]{padding-block:0;border:none}.igx-filter-tree__inputs{--ig-size: 1;display:flex;align-items:flex-end;gap:1rem;width:100%;border-radius:inherit}.igx-filter-tree__inputs:empty{display:none}.igx-filter-tree__inputs-field{display:flex;flex-direction:column;gap:.25rem;max-width:15.625rem;width:100%}.igx-filter-tree__inputs-actions{--ig-size: 2;display:flex;gap:.5rem;align-items:center;width:auto;align-self:center}.igx-filter-tree__inputs-actions [igxIconButton]{transition:none}.igx-filter-tree__details-button{margin-inline-start:auto}.igx-query-builder-tree{background:var(--background)}.igx-query-builder-tree .igx-query-builder-tree{border-radius:var(--subquery-border-radius)}.igx-query-builder-tree--level-0{display:block;width:100%;padding-inline:var(--query-builder-outer-padding)}.igx-query-builder-tree--level-0>.igx-query-builder__main{gap:1rem}.igx-query-builder-tree--level-0>.igx-query-builder__main>.igx-filter-tree__section{scrollbar-width:thin;max-height:35.625rem;overflow-y:auto;overflow-x:hidden;padding-inline-end:var(--_tree-scrollbar-gutter)}.igx-query-builder-dialog{display:flex;flex-direction:column;gap:1rem;max-width:19.375rem}.igx-query-builder-dialog>*{margin:0!important}.igx-advanced-filter{background:var(--background);box-shadow:var(--ig-elevation-24);border-radius:var(--border-radius)}.igx-advanced-filter igx-query-builder{box-shadow:none;border:none;border-radius:inherit}.igx-advanced-filter igx-query-builder-header{cursor:grab}}@layer ig.material{@container style(--ig-theme: material){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0}}}@layer ig.material{@container style(--ig-theme: material){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-and) h s l / .16);--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--background: transparent}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-or) h s l / .16);--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--background: transparent}.igx-filter-tree__expression-actions{gap:1rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-condition{opacity:.6}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-query-builder{--query-builder-outer-padding: 1rem}.igx-query-builder:has(igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:1rem var(--query-builder-outer-padding)}.igx-query-builder__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin-block:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-advanced-filter .igx-excel-filter__secondary-footer{padding:1rem;border-top:.0625rem solid var(--header-border)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: transparent;--focus-visible-background: transparent;--focus-background: transparent;--active-background: transparent;--hover-background: transparent;--background: transparent;--shadow-color: hsl(from var(--color-expression-group-and) h s l / .5);--icon-color-hover: hsl(from var(--color-expression-group-and) h s 34% / 1);--focus-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--hover-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--active-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1)}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: transparent;--focus-visible-background: transparent;--focus-background: transparent;--active-background: transparent;--hover-background: transparent;--background: transparent;--shadow-color: hsl(from var(--color-expression-group-or) h s l / .5);--icon-color-hover: hsl(from var(--color-expression-group-or) h s 14% / 1);--focus-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--hover-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--active-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1)}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 1}.igx-filter-tree__expression-context-menu{--ig-button-text-transform: capitalize}.igx-filter-tree__inputs{--ig-size: 2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0 var(--query-builder-outer-padding)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-filter-tree__button--and[igxButton=flat]{--background: transparent;--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--focus-visible-background: transparent;--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08)}.igx-filter-tree__button--or[igxButton=flat]{--background: transparent;--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--focus-visible-background: transparent;--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08)}.igx-filter-tree__expression-actions{gap:1rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-condition{opacity:.6}.igx-filter-tree__inputs{--ig-size: 1}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-advanced-filter{box-shadow:var(--ig-elevation-24)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-and) h s l / .16);--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--background: transparent}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-or) h s l / .16);--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--background: transparent}.igx-filter-tree__expression-actions{gap:.5rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-item-keyboard-ghost .igx-chip:hover .igx-chip__item{border-color:var(--border-color)}.igx-filter-tree__expression-condition{opacity:.8}.igx-filter-tree__inputs{--ig-size: 2}.igx-filter-tree__expression-item-keyboard-ghost igx-chip:hover .igx-chip__item{border-color:var(--border-color)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-query-builder--sortable .igx-query-builder__icons .sort-icon{opacity:.75}.igx-query-builder--sortable .igx-query-builder__icons .sort-icon:hover{opacity:1}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-filter-tree__button--and[igxButton=flat]{--icon-color-hover: hsl(from var(--color-expression-group-and) h s 78% / 1);--focus-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--hover-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--active-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1)}.igx-filter-tree__button--or[igxButton=flat]{--icon-color-hover: hsl(from var(--color-expression-group-or) h s 47% / 1);--focus-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--hover-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--active-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1)}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-filter-tree__button--and[igxButton=flat],.igx-filter-tree__button--or[igxButton=flat]{--background: transparent;--focus-hover-background: var(--ig-gray-200);--focus-visible-background: transparent;--focus-background: transparent;--active-background: var(--ig-gray-200);--hover-background: var(--ig-gray-200)}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}\n"], dependencies: [{ kind: "component", type: IgxQueryBuilderTreeComponent, selector: "igx-query-builder-tree", inputs: ["entities", "queryBuilder", "searchValueTemplate", "parentExpression", "fields", "expressionTree", "locale", "resourceStrings", "expectedReturnField"], outputs: ["expressionTreeChange", "inEditModeChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
2323
2323
  }
2324
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
2324
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderComponent, decorators: [{
2325
2325
  type: Component,
2326
2326
  args: [{ selector: 'igx-query-builder', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, imports: [IgxQueryBuilderTreeComponent], template: "<ng-content select=\"igx-query-builder-header,igc-query-builder-header\"></ng-content>\n\n<igx-query-builder-tree\n [entities]=\"this.entities\"\n [expressionTree]=\"this.expressionTree\"\n [locale]=\"this.locale\"\n [resourceStrings]=\"this.resourceStrings\"\n [queryBuilder]=\"this\"\n (expressionTreeChange)=\"onExpressionTreeChange($event)\"\n [searchValueTemplate]=\"searchValueTemplate\">\n</igx-query-builder-tree>\n", styles: ["@layer ig.base{.igx-query-builder{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);--query-builder-outer-padding: 1.5rem;--_tree-scrollbar-gutter: 1rem;width:auto;min-width:41.25rem;background-color:var(--background);border-radius:var(--border-radius);box-shadow:var(--elevation);overflow:hidden}.igx-query-builder:has(:not(igx-query-builder-header)){padding-block-start:var(--query-builder-outer-padding)}.igx-query-builder:has(:not(igx-query-builder-header)) .igx-query-builder-tree--level-0{padding-block:0 var(--query-builder-outer-padding)}.igx-query-builder:has(igx-query-builder-header){padding-block-start:0}.igx-query-builder .igx-chip__ghost{position:relative}.igx-query-builder__header{display:flex;align-items:center;background-color:var(--header-background);color:var(--header-foreground);-webkit-user-select:none;-moz-user-select:none;user-select:none;border-radius:var(--border-radius) var(--border-radius) 0 0;margin-bottom:0;border-block-end:.0625rem solid var(--header-border);padding-inline:var(--query-builder-outer-padding);padding-block:var(--query-builder-outer-padding) 1rem}.igx-query-builder__title{font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom)}.igx-query-builder__title:empty{display:none}.igx-query-builder__label{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);color:var(--label-foreground)}.igx-query-builder__main{display:grid;gap:1rem}.igx-query-builder__root{display:flex;flex-direction:column;flex-grow:1}.igx-query-builder__root>*{flex-grow:1}.igx-query-builder__root-actions{display:flex;gap:.5rem;padding-bottom:1rem}.igx-query-builder__outlet igx-select-item{--ig-icon-size: 1.125rem}.igx-query-builder--inline{display:flex;flex-direction:column;width:100%;max-width:100%;height:inherit;max-height:inherit;min-width:30rem;box-shadow:none}.igx-query-builder--inline .igx-query-builder__main{min-height:initial;max-height:initial;flex-grow:1}.igx-filter-tree{display:flex;width:100%}.igx-filter-tree .igx-filter-tree{margin-block:.5rem}.igx-filter-tree__subquery{max-width:60rem}.igx-filter-tree__subquery:has(>.igx-filter-tree__inputs){background:var(--subquery-header-background);border:.0625rem solid var(--subquery-border-color);border-radius:var(--subquery-border-radius)}.igx-filter-tree__subquery:has(>.igx-query-builder-tree[style=\"display: none;\"]){display:none}.igx-filter-tree__subquery>.igx-filter-tree__inputs{padding:.75rem;border-radius:inherit}.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-input-group,.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-date-picker,.igx-filter-tree__subquery>.igx-filter-tree__inputs>igx-time-picker{flex-grow:1}.igx-filter-tree__subquery .igx-filter-tree__buttons{margin-block-start:.5rem}.igx-filter-tree__subquery .igx-query-builder-tree{border-block-start:.0625rem dashed var(--separator-color);padding:.75rem}.igx-filter-tree__subquery:empty{display:none}.igx-filter-tree__section{display:flex;flex-direction:column;gap:.5rem}.igx-filter-tree__section>.igx-filter-tree{margin-block:0}.igx-filter-tree__line{width:.125rem;background-color:#fff;margin-inline-end:.375rem;outline-style:none}.igx-filter-tree__line--and{background:var(--color-expression-group-and)}.igx-filter-tree__line--or{background:var(--color-expression-group-or)}.igx-filter-tree__button--and[igxButton=flat]{--ig-flat-button-foreground: var(--color-expression-group-and);--ig-flat-button-focus-visible-foreground: var(--color-expression-group-and);--ig-flat-button-icon-color: var(--color-expression-group-and);--ig-flat-button-focus-foreground: var(--color-expression-group-and);--ig-flat-button-hover-foreground: var(--color-expression-group-and);--ig-flat-button-icon-color-hover: var(--color-expression-group-and);--ig-flat-button-focus-hover-foreground: var(--color-expression-group-and);--ig-flat-button-active-foreground: var(--color-expression-group-and)}.igx-filter-tree__button--or[igxButton=flat]{--ig-flat-button-foreground: var(--color-expression-group-or);--ig-flat-button-focus-visible-foreground: var(--color-expression-group-or);--ig-flat-button-icon-color: var(--color-expression-group-or);--ig-flat-button-focus-foreground: var(--color-expression-group-or);--ig-flat-button-hover-foreground: var(--color-expression-group-or);--ig-flat-button-icon-color-hover: var(--color-expression-group-or);--ig-flat-button-focus-hover-foreground: var(--color-expression-group-or);--ig-flat-button-active-foreground: var(--color-expression-group-or)}.igx-filter-tree__expressions{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;gap:.5rem}.igx-filter-tree__expression-context-menu{display:flex;width:100%}.igx-filter-tree__expression-context-menu [igxbutton=flat]{--ig-size: 1;border:none;min-width:auto}.igx-filter-tree__expression-section{display:flex;flex-direction:column;width:calc(100% - 1rem);gap:.5rem;margin-inline-start:1rem}.igx-filter-tree__expression-section:empty{display:none}.igx-filter-tree__expression-item{display:flex;align-items:center;width:100%;gap:.5rem;position:relative}.igx-filter-tree__expression-item igx-chip{--ig-size: 3}.igx-filter-tree__expression-item>igx-chip .igx-filter-tree__expression-column{padding-inline:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-filter-tree__expression-item>igx-chip .igx-filter-tree__expression-condition{padding-inline-start:max(var(--is-large, 1)*max(.5rem,-1 * .5rem)*var(--ig-spacing-inline-large, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-medium, 1)*max(.375rem,-1 * .375rem)*var(--ig-spacing-inline-medium, var(--ig-spacing-inline, var(--ig-spacing))),var(--is-small, 1)*max(.1875rem,-1 * .1875rem)*var(--ig-spacing-inline-small, var(--ig-spacing-inline, var(--ig-spacing))))}.igx-filter-tree__expression-item>igx-chip igx-prefix{display:flex}.igx-filter-tree__expression-item>igx-chip .igx-chip__end{gap:max(var(--is-large, 1)*max(.5rem,-1 * .5rem),var(--is-medium, 1)*max(.375rem,-1 * .375rem),var(--is-small, 1)*max(.1875rem,-1 * .1875rem))}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);--ig-body-2-text-transform: unset;padding-inline:2rem;background:#0000;border-width:.0625rem;border-style:dashed}.igx-filter-tree__expression-item-keyboard-ghost .igx-chip__item,.igx-filter-tree__expression-item-keyboard-ghost .igx-chip:hover .igx-chip__item{box-shadow:var(--ghost-shadow);background:var(--ghost-background);color:var(--focus-text-color)}.igx-filter-tree__expression-column{padding:0 .5rem}.igx-filter-tree__expression-actions,.igx-filter-tree__expression-actions span{display:inline-flex}.igx-filter-tree__buttons{--ig-size: 1;display:flex;align-items:center;gap:.5rem}.igx-filter-tree__buttons [igxbutton=flat]{padding-block:0;border:none}.igx-filter-tree__inputs{--ig-size: 1;display:flex;align-items:flex-end;gap:1rem;width:100%;border-radius:inherit}.igx-filter-tree__inputs:empty{display:none}.igx-filter-tree__inputs-field{display:flex;flex-direction:column;gap:.25rem;max-width:15.625rem;width:100%}.igx-filter-tree__inputs-actions{--ig-size: 2;display:flex;gap:.5rem;align-items:center;width:auto;align-self:center}.igx-filter-tree__inputs-actions [igxIconButton]{transition:none}.igx-filter-tree__details-button{margin-inline-start:auto}.igx-query-builder-tree{background:var(--background)}.igx-query-builder-tree .igx-query-builder-tree{border-radius:var(--subquery-border-radius)}.igx-query-builder-tree--level-0{display:block;width:100%;padding-inline:var(--query-builder-outer-padding)}.igx-query-builder-tree--level-0>.igx-query-builder__main{gap:1rem}.igx-query-builder-tree--level-0>.igx-query-builder__main>.igx-filter-tree__section{scrollbar-width:thin;max-height:35.625rem;overflow-y:auto;overflow-x:hidden;padding-inline-end:var(--_tree-scrollbar-gutter)}.igx-query-builder-dialog{display:flex;flex-direction:column;gap:1rem;max-width:19.375rem}.igx-query-builder-dialog>*{margin:0!important}.igx-advanced-filter{background:var(--background);box-shadow:var(--ig-elevation-24);border-radius:var(--border-radius)}.igx-advanced-filter igx-query-builder{box-shadow:none;border:none;border-radius:inherit}.igx-advanced-filter igx-query-builder-header{cursor:grab}}@layer ig.material{@container style(--ig-theme: material){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0}}}@layer ig.material{@container style(--ig-theme: material){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-and) h s l / .16);--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--background: transparent}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-or) h s l / .16);--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--background: transparent}.igx-filter-tree__expression-actions{gap:1rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-condition{opacity:.6}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-query-builder{--query-builder-outer-padding: 1rem}.igx-query-builder:has(igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:1rem var(--query-builder-outer-padding)}.igx-query-builder__title{font-family:var(--ig-h5-font-family, var(--ig-font-family));font-size:var(--ig-h5-font-size);font-weight:var(--ig-h5-font-weight);font-style:var(--ig-h5-font-style);line-height:var(--ig-h5-line-height);letter-spacing:var(--ig-h5-letter-spacing);text-transform:var(--ig-h5-text-transform);margin-top:var(--ig-h5-margin-top);margin-bottom:var(--ig-h5-margin-bottom);margin-block:0}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-advanced-filter .igx-excel-filter__secondary-footer{padding:1rem;border-top:.0625rem solid var(--header-border)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: transparent;--focus-visible-background: transparent;--focus-background: transparent;--active-background: transparent;--hover-background: transparent;--background: transparent;--shadow-color: hsl(from var(--color-expression-group-and) h s l / .5);--icon-color-hover: hsl(from var(--color-expression-group-and) h s 34% / 1);--focus-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--hover-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1);--active-foreground: hsl(from var(--color-expression-group-and) h s 34% / 1)}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: transparent;--focus-visible-background: transparent;--focus-background: transparent;--active-background: transparent;--hover-background: transparent;--background: transparent;--shadow-color: hsl(from var(--color-expression-group-or) h s l / .5);--icon-color-hover: hsl(from var(--color-expression-group-or) h s 14% / 1);--focus-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--hover-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1);--active-foreground: hsl(from var(--color-expression-group-or) h s 14% / 1)}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 1}.igx-filter-tree__expression-context-menu{--ig-button-text-transform: capitalize}.igx-filter-tree__inputs{--ig-size: 2}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0 var(--query-builder-outer-padding)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-filter-tree__button--and[igxButton=flat]{--background: transparent;--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--focus-visible-background: transparent;--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08)}.igx-filter-tree__button--or[igxButton=flat]{--background: transparent;--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--focus-visible-background: transparent;--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08)}.igx-filter-tree__expression-actions{gap:1rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-condition{opacity:.6}.igx-filter-tree__inputs{--ig-size: 1}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-advanced-filter{box-shadow:var(--ig-elevation-24)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-query-builder:has(.igx-query-builder-header) .igx-query-builder-tree--level-0{padding-block:0}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-filter-tree__button--and[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-and) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-and) h s l / .16);--focus-background: hsl(from var(--color-expression-group-and) h s l / .16);--active-background: hsl(from var(--color-expression-group-and) h s l / .16);--hover-background: hsl(from var(--color-expression-group-and) h s l / .08);--background: transparent}.igx-filter-tree__button--or[igxButton=flat]{--focus-hover-background: hsl(from var(--color-expression-group-or) h s l / .24);--focus-visible-background: hsl(from var(--color-expression-group-or) h s l / .16);--focus-background: hsl(from var(--color-expression-group-or) h s l / .16);--active-background: hsl(from var(--color-expression-group-or) h s l / .16);--hover-background: hsl(from var(--color-expression-group-or) h s l / .08);--background: transparent}.igx-filter-tree__expression-actions{gap:.5rem}.igx-filter-tree__expression-actions .igx-icon-button{--ig-size: 2}.igx-filter-tree__expression-item-keyboard-ghost .igx-chip:hover .igx-chip__item{border-color:var(--border-color)}.igx-filter-tree__expression-condition{opacity:.8}.igx-filter-tree__inputs{--ig-size: 2}.igx-filter-tree__expression-item-keyboard-ghost igx-chip:hover .igx-chip__item{border-color:var(--border-color)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-query-builder--sortable .igx-query-builder__icons .sort-icon{opacity:.75}.igx-query-builder--sortable .igx-query-builder__icons .sort-icon:hover{opacity:1}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: light){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-600);border-color:var(--ig-gray-600)}}}@layer ig.material{@container style(--ig-theme: material) and style(--ig-theme-variant: dark){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-filter-tree__button--and[igxButton=flat]{--icon-color-hover: hsl(from var(--color-expression-group-and) h s 78% / 1);--focus-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--hover-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1);--active-foreground: hsl(from var(--color-expression-group-and) h s 78% / 1)}.igx-filter-tree__button--or[igxButton=flat]{--icon-color-hover: hsl(from var(--color-expression-group-or) h s 47% / 1);--focus-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--hover-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--focus-hover-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1);--active-foreground: hsl(from var(--color-expression-group-or) h s 47% / 1)}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-filter-tree__button--and[igxButton=flat],.igx-filter-tree__button--or[igxButton=flat]{--background: transparent;--focus-hover-background: var(--ig-gray-200);--focus-visible-background: transparent;--focus-background: transparent;--active-background: var(--ig-gray-200);--hover-background: var(--ig-gray-200)}.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}@layer ig.indigo{@container style(--ig-theme: indigo) and style(--ig-theme-variant: dark){.igx-filter-tree__expression-item-drop-ghost .igx-chip__item{color:var(--ig-gray-900);border-color:var(--ig-gray-300)}}}\n"] }]
2327
2327
  }], ctorParameters: () => [], propDecorators: { cssClass: [{
@@ -2374,11 +2374,11 @@ const IGX_QUERY_BUILDER_DIRECTIVES = [
2374
2374
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
2375
2375
  */
2376
2376
  class IgxQueryBuilderModule {
2377
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2378
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective], exports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective] }); }
2379
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent] }); }
2377
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2378
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective], exports: [IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxQueryBuilderSearchValueTemplateDirective] }); }
2379
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderModule, imports: [IgxQueryBuilderComponent] }); }
2380
2380
  }
2381
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxQueryBuilderModule, decorators: [{
2381
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxQueryBuilderModule, decorators: [{
2382
2382
  type: NgModule,
2383
2383
  args: [{
2384
2384
  imports: [
@@ -236,6 +236,7 @@ class IgxRadioGroupDirective {
236
236
  * @internal
237
237
  */
238
238
  updateValidityOnBlur() {
239
+ this._onTouchedCallback();
239
240
  this._radioButtons().forEach((button) => {
240
241
  button.focused = false;
241
242
  if (button.invalid) {
@@ -307,11 +308,8 @@ class IgxRadioGroupDirective {
307
308
  * @internal
308
309
  */
309
310
  registerOnTouched(fn) {
310
- if (this._radioButtons) {
311
- this._radioButtons().forEach((button) => {
312
- button.registerOnTouched(fn);
313
- });
314
- }
311
+ // Invoked on child blur, as forms register it before the child radio buttons exist.
312
+ this._onTouchedCallback = fn;
315
313
  }
316
314
  /** @hidden @internal */
317
315
  setDisabledState(isDisabled) {
@@ -372,6 +370,11 @@ class IgxRadioGroupDirective {
372
370
  * @internal
373
371
  */
374
372
  this._onChangeCallback = noop;
373
+ /**
374
+ * @hidden
375
+ * @internal
376
+ */
377
+ this._onTouchedCallback = noop;
375
378
  /**
376
379
  * @hidden
377
380
  * @internal
@@ -430,15 +433,17 @@ class IgxRadioGroupDirective {
430
433
  // The initial value can possibly be set by NgModel and it is possible that
431
434
  // the OnInit of the NgModel occurs after the OnInit of this class.
432
435
  this._isInitialized.set(true);
433
- if (this.control) {
436
+ const control = this.control;
437
+ if (control) {
434
438
  // Runs inside an effect, so subscribe once.
435
- this._statusChanges$ ??= this.control.statusChanges
439
+ // Signal Forms also emit on touch, so re-evaluate rather than reset the state set on blur.
440
+ this._statusChanges$ ??= control.statusChanges
436
441
  .pipe(takeUntil(this.destroy$))
437
442
  .subscribe(() => {
438
- this.invalid = false;
443
+ this.invalid = !control.disabled && control.touchedOrDirty && control.invalid;
439
444
  });
440
- if (this.control.hasValidators) {
441
- this._required = this.control.required;
445
+ if (control.hasValidators) {
446
+ this._required = control.required;
442
447
  }
443
448
  // Buttons registered after `setDisabledState` pick the state up here.
444
449
  if (this._disabled) {
@@ -461,7 +466,6 @@ class IgxRadioGroupDirective {
461
466
  this._selected = button;
462
467
  this.cdr.markForCheck();
463
468
  }
464
- this._setRadioButtonEvents(button);
465
469
  });
466
470
  }
467
471
  /**
@@ -586,10 +590,10 @@ class IgxRadioGroupDirective {
586
590
  });
587
591
  }
588
592
  }
589
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
590
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.7", type: IgxRadioGroupDirective, isStandalone: true, selector: "[igxRadioGroup],igx-radio-group", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical", "class.igx-radio-group--before": "this.labelBefore", "class.igx-radio-group--disabled": "this.disabled" } }, exportAs: ["igxRadioGroup"], ngImport: i0 }); }
593
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
594
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.2.0", type: IgxRadioGroupDirective, isStandalone: true, selector: "[igxRadioGroup],igx-radio-group", inputs: { value: "value", name: "name", required: ["required", "required", booleanAttribute], selected: "selected", invalid: ["invalid", "invalid", booleanAttribute], alignment: "alignment" }, outputs: { change: "change" }, host: { listeners: { "click": "handleClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "class.igx-radio-group": "this.cssClass", "class.igx-radio-group--vertical": "this.vertical", "class.igx-radio-group--before": "this.labelBefore", "class.igx-radio-group--disabled": "this.disabled" } }, exportAs: ["igxRadioGroup"], ngImport: i0 }); }
591
595
  }
592
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioGroupDirective, decorators: [{
596
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioGroupDirective, decorators: [{
593
597
  type: Directive,
594
598
  args: [{
595
599
  exportAs: 'igxRadioGroup',
@@ -827,14 +831,14 @@ class IgxRadioComponent extends CheckboxBaseDirective {
827
831
  this.radioGroup._removeRadioButton(this);
828
832
  }
829
833
  }
830
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
831
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.1.7", type: IgxRadioComponent, isStandalone: true, selector: "igx-radio", inputs: { checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute] }, host: { listeners: { "change": "_changed($event)", "click": "_onCheckboxClick()", "blur": "onBlur()" }, properties: { "class.igx-radio": "this.cssClass", "class.igx-radio--checked": "this.checked", "class.igx-radio--disabled": "this.disabled", "class.igx-radio--invalid": "this.invalid", "class.igx-radio--focused": "this.focused" } }, providers: [{
834
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
835
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.2.0", type: IgxRadioComponent, isStandalone: true, selector: "igx-radio", inputs: { checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], invalid: ["invalid", "invalid", booleanAttribute] }, host: { listeners: { "change": "_changed($event)", "click": "_onCheckboxClick()", "blur": "onBlur()" }, properties: { "class.igx-radio": "this.cssClass", "class.igx-radio--checked": "this.checked", "class.igx-radio--disabled": "this.disabled", "class.igx-radio--invalid": "this.invalid", "class.igx-radio--focused": "this.focused" } }, providers: [{
832
836
  provide: EDITOR_PROVIDER,
833
837
  useExisting: IgxRadioComponent,
834
838
  multi: true
835
839
  }], usesInheritance: true, ngImport: i0, template: "<input #checkbox class=\"igx-radio__input\" type=\"radio\"\n [id]=\"inputId\"\n [name]=\"name\"\n [value]=\"value\"\n [tabindex]=\"tabindex\"\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [required]=\"required\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"invalid\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-labelledby]=\"ariaLabel ? null : ariaLabelledBy\"\n [attr.aria-label]=\"ariaLabel\"\n (blur)=\"onBlur()\" />\n\n<span #label class=\"igx-radio__composite\" igxRipple\n igxRippleTarget=\".igx-radio__ripple\"\n [igxRippleDisabled]=\"disableRipple\"\n [igxRippleCentered]=\"true\"\n [igxRippleDuration]=\"300\">\n <div class=\"igx-radio__ripple\"></div>\n</span>\n\n<span #placeholderLabel\n [id]=\"labelId\"\n [class]=\"labelClass\">\n <ng-content></ng-content>\n</span>\n", styles: ["@property --ig-radio-ready{syntax:\"<number>\";inherits:true;initial-value:0}@layer ig.base{@keyframes scale-in-out{50%{transform:scale(.9);transform-origin:50% 50%}to{transform:scale(1);transform-origin:50% 50%}}@keyframes radio-ready{0%{--ig-radio-ready: 0}to{--ig-radio-ready: 1}}.igx-radio__label--before,.igx-radio__label{color:var(--label-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;word-wrap:break-all}.igx-radio__label--before:empty,.igx-radio__label:empty{display:none}.igx-radio--focused.igx-radio--invalid .igx-radio__ripple,.igx-radio--focused.igx-radio--checked .igx-radio__ripple,.igx-radio--focused:hover .igx-radio__ripple,.igx-radio--focused .igx-radio__ripple,.igx-radio--invalid:active .igx-radio__ripple,.igx-radio--invalid:hover .igx-radio__ripple,.igx-radio--checked:active .igx-radio__ripple,.igx-radio--checked:hover .igx-radio__ripple,.igx-radio:active .igx-radio__ripple,.igx-radio:hover .igx-radio__ripple{background:var(--empty-color);transition:background .2s cubic-bezier(.25,.46,.45,.94)}.igx-radio--invalid:active .igx-radio__ripple,.igx-radio--invalid:hover .igx-radio__ripple,.igx-radio--checked:active .igx-radio__ripple,.igx-radio--checked:hover .igx-radio__ripple,.igx-radio:active .igx-radio__ripple,.igx-radio:hover .igx-radio__ripple{opacity:.06}@container style(--ig-theme-variant: dark){.igx-radio--invalid:active .igx-radio__ripple,.igx-radio--invalid:hover .igx-radio__ripple,.igx-radio--checked:active .igx-radio__ripple,.igx-radio--checked:hover .igx-radio__ripple,.igx-radio:active .igx-radio__ripple,.igx-radio:hover .igx-radio__ripple{opacity:.12}}.igx-radio--checked:active .igx-radio__ripple,.igx-radio--checked:hover .igx-radio__ripple{background:var(--fill-color)}.igx-radio--invalid:active .igx-radio__ripple,.igx-radio--invalid:hover .igx-radio__ripple{background:var(--error-color)}.igx-radio--invalid:active .igx-radio__ripple,.igx-radio--checked:active .igx-radio__ripple,.igx-radio:active .igx-radio__ripple,.igx-radio--focused.igx-radio--invalid .igx-radio__ripple,.igx-radio--focused.igx-radio--checked .igx-radio__ripple,.igx-radio--focused:hover .igx-radio__ripple,.igx-radio--focused .igx-radio__ripple{opacity:.12}@container style(--ig-theme-variant: dark){.igx-radio--invalid:active .igx-radio__ripple,.igx-radio--checked:active .igx-radio__ripple,.igx-radio:active .igx-radio__ripple,.igx-radio--focused.igx-radio--invalid .igx-radio__ripple,.igx-radio--focused.igx-radio--checked .igx-radio__ripple,.igx-radio--focused:hover .igx-radio__ripple,.igx-radio--focused .igx-radio__ripple{opacity:.24}}.igx-radio{position:relative;display:inline-flex;flex-flow:row nowrap;align-items:center;color:var(--label-color);width:-moz-max-content;width:max-content;cursor:pointer;animation:radio-ready 1ms linear .12s forwards}.igx-radio:hover .igx-radio__label{color:var(--label-color-hover)}.igx-radio:hover .igx-radio__composite:before{background:var(--hover-color)}.igx-radio:active .igx-radio__composite:before{background:var(--hover-color)}.igx-radio__input{position:absolute;width:1px;height:1px;margin:-1px;border:none;clip:rect(0,0,0,0);outline:0;pointer-events:none;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.igx-radio__composite{position:relative;display:inline-block;width:var(--size);height:var(--size);min-width:var(--size);line-height:var(--size);color:var(--label-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;--ig-ripple-color: var(--empty-color)}.igx-radio__composite:before,.igx-radio__composite:after{position:absolute;content:\"\";width:var(--size);height:var(--size);inset-inline-start:0;top:0;border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * 50%),50%)}.igx-radio__composite:before{backface-visibility:hidden;z-index:1;transform:scale(0)}@container style(--ig-radio-ready: 1){.igx-radio__composite:before{transition:all .2s cubic-bezier(.25,.46,.45,.94)}}.igx-radio__composite:after{border:var(--border-width) solid var(--empty-color);background:var(--empty-fill-color)}.igx-radio__label{margin-inline-start:var(--label-margin)}.igx-radio__label--before{order:-1;margin-inline-end:var(--label-margin)}.igx-radio__ripple{--_ripple-size: 2.5rem;display:none;position:absolute;top:calc(50% - var(--_ripple-size)/2);inset-inline-start:calc(50% - var(--_ripple-size)/2);width:var(--_ripple-size);aspect-ratio:1;border-radius:calc(var(--_ripple-size)/2);overflow:hidden;pointer-events:none;filter:opacity(1)}.igx-radio--checked .igx-radio__composite{--ig-ripple-color: var(--fill-color)}.igx-radio--checked .igx-radio__composite:before{border:var(--border-width) solid var(--fill-color);background:var(--fill-color);transform:var(--scale)}.igx-radio--checked .igx-radio__composite:after{border:var(--border-width) solid var(--fill-color)}.igx-radio--checked:hover .igx-radio__composite:before{background:var(--fill-color-hover);border-color:var(--fill-hover-border-color)}.igx-radio--checked:hover .igx-radio__composite:after{border-color:var(--fill-hover-border-color)}.igx-radio--checked:active .igx-radio__composite:before{background:var(--fill-color-hover);border-color:var(--fill-hover-border-color)}.igx-radio--checked:active .igx-radio__composite:after{border-color:var(--fill-hover-border-color)}.igx-radio--focused.igx-radio--checked:hover .igx-radio__composite:before{background:var(--fill-color-hover);border-color:var(--fill-hover-border-color)}.igx-radio--focused.igx-radio--checked:hover .igx-radio__composite:after{border-color:var(--fill-hover-border-color)}.igx-radio--focused.igx-radio--checked:active .igx-radio__composite:before{background:var(--fill-color-hover);border-color:var(--fill-hover-border-color)}.igx-radio--focused.igx-radio--checked:active .igx-radio__composite:after{border-color:var(--fill-hover-border-color)}.igx-radio--focused.igx-radio--checked .igx-radio__ripple{background:var(--fill-color)}.igx-radio--invalid .igx-radio__composite{--ig-ripple-color: var(--error-color)}.igx-radio--invalid .igx-radio__composite:after{border:var(--border-width) solid var(--error-color)}.igx-radio--invalid .igx-radio__label,.igx-radio--invalid .igx-radio__label--before,.igx-radio--invalid:hover .igx-radio__label{color:var(--error-color)}.igx-radio--invalid:hover .igx-radio__composite:before{background:var(--error-color)}.igx-radio--invalid:hover .igx-radio__composite:after{border-color:var(--error-color)}.igx-radio--invalid:active .igx-radio__composite:before{background:var(--error-color)}.igx-radio--invalid:active .igx-radio__composite:after{border-color:var(--error-color-hover)}.igx-radio--focused.igx-radio--invalid .igx-radio__ripple{background:var(--error-color)}.igx-radio--checked.igx-radio--invalid .igx-radio__composite:after{border:var(--border-width) solid var(--error-color)}.igx-radio--checked.igx-radio--invalid .igx-radio__composite:before{background:var(--error-color);border:var(--border-width) solid rgba(0,0,0,0)}.igx-radio--checked.igx-radio--invalid:hover .igx-radio__composite:before{background:var(--error-color-hover);border-color:var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid:hover .igx-radio__composite:after{border:var(--border-width) solid var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid:active .igx-radio__composite:before{background:var(--error-color-hover);border-color:var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid:active .igx-radio__composite:after{border:var(--border-width) solid var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid.igx-radio--focused .igx-radio__composite:after{border:var(--border-width) solid var(--error-color)}.igx-radio--checked.igx-radio--invalid.igx-radio--focused .igx-radio__composite:before{background:var(--error-color);border-color:var(--error-color)}.igx-radio--disabled{pointer-events:none;color:var(--disabled-label-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.igx-radio--disabled .igx-radio__composite:after{border:var(--border-width) solid var(--disabled-color)}.igx-radio--disabled .igx-radio__label,.igx-radio--disabled .igx-radio__label--before{color:var(--disabled-label-color)}.igx-radio--disabled.igx-radio--checked .igx-radio__composite:after{border:var(--border-width) solid var(--disabled-fill-color)}.igx-radio--disabled.igx-radio--checked .igx-radio__composite:before{background:var(--disabled-fill-color);border:var(--border-width) solid rgba(0,0,0,0)}.igx-radio-group{display:grid;-moz-column-gap:var(--horizontal-group-margin);column-gap:var(--horizontal-group-margin);align-items:start;width:-moz-max-content;width:max-content}.igx-radio-group:not(.igx-radio-group--vertical) [igxLabel]{margin-block-end:1rem}.igx-radio-group:not(.igx-radio-group--vertical) igx-radio{grid-row:2}.igx-radio-group--vertical{row-gap:var(--vertical-group-margin)}.igx-radio-group--vertical [igxLabel]{margin-block-end:.5rem}.igx-radio-group--before.igx-radio-group--vertical igx-radio,.igx-radio-group--before.igx-radio-group--vertical [igxLabel]{justify-self:flex-end}.igx-radio-group--disabled [igxLabel]{color:var(--disabled-color)}}@layer ig.material{@container style(--ig-theme: material){.igx-radio{--size: 2.5rem;--label-margin: .125rem;--scale: scale(.5);--border-width: .125rem}.igx-radio__composite:before,.igx-radio__composite:after{width:calc(var(--size)/2);height:calc(var(--size)/2);top:25%;inset-inline-start:25%}.igx-radio__ripple{display:block}.igx-radio__label{font-family:var(--ig-subtitle-1-font-family, var(--ig-font-family));font-size:var(--ig-subtitle-1-font-size);font-weight:var(--ig-subtitle-1-font-weight);font-style:var(--ig-subtitle-1-font-style);line-height:var(--ig-subtitle-1-line-height);letter-spacing:var(--ig-subtitle-1-letter-spacing);text-transform:var(--ig-subtitle-1-text-transform);margin-top:var(--ig-subtitle-1-margin-top);margin-bottom:var(--ig-subtitle-1-margin-bottom);margin-block:0}igx-radio--invalid:hover,.igx-radio__composite{border-color:var(--error-color)}}}@layer ig.material{@container style(--ig-theme: material){.igx-radio-group{--horizontal-group-margin: 1rem;--vertical-group-margin: 0}.igx-radio-group--vertical [igxLabel]{margin-block-end:1rem}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-radio{--size: 1rem;--label-margin: .5rem;--scale: scale(.4375);--border-width: .0625rem}.igx-radio__label{font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin-block:0}.igx-radio__composite:before{transition:none}.igx-radio:hover .igx-radio__composite:after{border:var(--border-width) solid var(--hover-color);transition:all .2s ease-in}.igx-radio--checked .igx-radio__composite:before{border-color:var(--fill-hover-border-color);background:var(--fill-hover-border-color)}.igx-radio--checked .igx-radio__composite:after{background:var(--fill-color)}.igx-radio--checked:hover .igx-radio__composite:after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}.igx-radio--checked:active .igx-radio__composite:after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}.igx-radio--focused .igx-radio__composite{border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * 50%),50%);box-shadow:0 0 0 .25rem var(--focus-outline-color)}.igx-radio--focused .igx-radio__composite:after{border-color:var(--focus-border-color)}.igx-radio--focused:hover .igx-radio__composite:after{border-color:hsl(from var(--focus-border-color) h calc(s*1.12) calc(l*.82))}.igx-radio--focused.igx-radio--checked .igx-radio__composite:after{border-color:#0000}.igx-radio--focused.igx-radio--checked:hover .igx-radio__composite:after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}.igx-radio--focused.igx-radio--checked:active .igx-radio__composite:after{background:var(--fill-color-hover);border-color:var(--fill-color-hover)}.igx-radio--invalid:hover .igx-radio__composite:after{border-color:var(--error-color-hover)}.igx-radio--focused.igx-radio--invalid .igx-radio__composite{box-shadow:0 0 0 .25rem var(--focus-outline-color-error)}.igx-radio--focused.igx-radio--invalid .igx-radio__composite:after{border:var(--border-width) solid var(--error-color)}.igx-radio--focused.igx-radio--invalid:hover .igx-radio__composite:after{border:var(--border-width) solid var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid .igx-radio__composite:after{background:var(--error-color)}.igx-radio--checked.igx-radio--invalid .igx-radio__composite:before{background:var(--fill-hover-border-color)}.igx-radio--checked.igx-radio--invalid:hover .igx-radio__composite:after{background:var(--error-color-hover);border-color:var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid:active .igx-radio__composite:after{background:var(--error-color-hover);border-color:var(--error-color-hover)}.igx-radio--invalid.igx-radio--disabled .igx-radio__composite:after{border-color:var(--disabled-color)}.igx-radio--checked.igx-radio--disabled .igx-radio__composite:after{background:var(--disabled-fill-color);border-color:var(--disabled-fill-color)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap){.igx-radio-group{--horizontal-group-margin: .5rem;--vertical-group-margin: .5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-radio{--size: 1.25rem;--label-margin: .5rem;--scale: scale(.5);--border-width: .0625rem}.igx-radio__label{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0}.igx-radio:hover .igx-radio__composite:before{transform:scale(.5)}.igx-radio--focused{position:relative}.igx-radio--focused:after{content:\"\";position:absolute;inset:-.125rem;box-shadow:0 0 0 .0625rem var(--focus-outline-color)}.igx-radio--invalid:hover .igx-radio__composite:after{border-color:var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid.igx-radio--focused:hover .igx-radio__composite:before{background:var(--error-color-hover);border-color:var(--error-color-hover)}.igx-radio--checked.igx-radio--invalid.igx-radio--focused:hover .igx-radio__composite:after{border-color:var(--error-color-hover)}}}@layer ig.fluent{@container style(--ig-theme: fluent){.igx-radio-group{--horizontal-group-margin: .75rem;--vertical-group-margin: .5rem}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-radio{--size: 1rem;--label-margin: .5rem;--scale: scale(.5);--border-width: .125rem}.igx-radio__label{font-family:var(--ig-body-2-font-family, var(--ig-font-family));font-size:var(--ig-body-2-font-size);font-weight:var(--ig-body-2-font-weight);font-style:var(--ig-body-2-font-style);line-height:var(--ig-body-2-line-height);letter-spacing:var(--ig-body-2-letter-spacing);text-transform:var(--ig-body-2-text-transform);margin-top:var(--ig-body-2-margin-top);margin-bottom:var(--ig-body-2-margin-bottom);margin-block:0}.igx-radio:hover .igx-radio__composite:after{border-color:var(--hover-color);transition:all .2s ease-in}.igx-radio--checked:hover .igx-radio__composite:after{border-color:var(--fill-hover-border-color)}.igx-radio--invalid .igx-radio__label,.igx-radio--invalid .igx-radio__label--before{color:var(--label-color)}.igx-radio--invalid:hover .igx-radio__composite:after{border-color:var(--error-color-hover)}.igx-radio--invalid:hover .igx-radio__label{color:var(--label-color-hover)}.igx-radio--invalid:active .igx-radio__composite:after{border-color:var(--error-color-hover)}.igx-radio--focused .igx-radio__composite{border-radius:clamp(0rem,calc(var(--ig-radius-factor, 1) * 50%),50%);box-shadow:0 0 0 .1875rem var(--focus-outline-color)}.igx-radio--focused.igx-radio--checked .igx-radio__composite{box-shadow:0 0 0 .1875rem var(--focus-outline-color-filled)}.igx-radio--focused.igx-radio--invalid .igx-radio__composite{box-shadow:0 0 0 .1875rem var(--focus-outline-color-error)}.igx-radio--checked.igx-radio--invalid.igx-radio--focused:hover .igx-radio__composite:before{background:var(--error-color-hover);border-color:var(--error-color-hover)}.igx-radio--disabled .igx-radio__label,.igx-radio--disabled .igx-radio__label--before{color:var(--disabled-label-color)}}}@layer ig.indigo{@container style(--ig-theme: indigo){.igx-radio-group{--horizontal-group-margin: 1rem;--vertical-group-margin: .5rem}}}@layer ig.fluent{@container style(--ig-theme: fluent) and style(--ig-theme-variant: dark){.igx-radio--invalid:hover .igx-radio__composite:before{background:var(--ig-error-500)}.igx-radio--checked.igx-radio--invalid:hover .igx-radio__composite:before{background:var(--error-color-hover)}}}@layer ig.bootstrap{@container style(--ig-theme: bootstrap) and style(--ig-theme-variant: dark){.igx-radio--disabled .igx-radio__composite:after{background:var(--ig-surface-500)}}}\n"], dependencies: [{ kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
836
840
  }
837
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioComponent, decorators: [{
841
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioComponent, decorators: [{
838
842
  type: Component,
839
843
  args: [{ selector: 'igx-radio', providers: [{
840
844
  provide: EDITOR_PROVIDER,
@@ -888,11 +892,11 @@ const IGX_RADIO_GROUP_DIRECTIVES = [
888
892
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
889
893
  */
890
894
  class IgxRadioModule {
891
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
892
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioModule, imports: [IgxRadioGroupDirective, IgxRadioComponent], exports: [IgxRadioGroupDirective, IgxRadioComponent] }); }
893
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioModule }); }
895
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
896
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioModule, imports: [IgxRadioGroupDirective, IgxRadioComponent], exports: [IgxRadioGroupDirective, IgxRadioComponent] }); }
897
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioModule }); }
894
898
  }
895
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: IgxRadioModule, decorators: [{
899
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: IgxRadioModule, decorators: [{
896
900
  type: NgModule,
897
901
  args: [{
898
902
  imports: [IgxRadioGroupDirective, IgxRadioComponent],