From 7b45313771fbbee01617b37c727e9debc278626f Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 9 Jan 2026 17:50:56 +0200 Subject: [PATCH 1/4] chore(query-builder): Add context type --- .../query-builder/query-builder-tree.component.ts | 4 ++-- .../src/query-builder/query-builder.common.ts | 12 ++++++++++-- .../src/query-builder/query-builder.component.ts | 3 ++- .../src/query-builder/query-builder.directives.ts | 10 ++++++++-- 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts index 8dac2427e63..dd820fc336b 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts @@ -71,7 +71,7 @@ import { import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.directives'; import { IgxQueryBuilderComponent } from './query-builder.component'; import { IgxQueryBuilderDragService } from './query-builder-drag.service'; -import { ExpressionGroupItem, ExpressionItem, ExpressionOperandItem, IgxFieldFormatterPipe } from './query-builder.common'; +import { ExpressionGroupItem, ExpressionItem, ExpressionOperandItem, IgxFieldFormatterPipe, IgxQueryBuilderSearchValueContext } from './query-builder.common'; import { getCurrentI18n, IResourceChangeEventArgs } from 'igniteui-i18n-core'; const DEFAULT_PIPE_DATE_FORMAT = 'mediumDate'; @@ -1527,7 +1527,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { } } - public getSearchValueTemplateContext(defaultSearchValueTemplate): any { + public getSearchValueTemplateContext(defaultSearchValueTemplate): IgxQueryBuilderSearchValueContext { const ctx = { $implicit: this.searchValue, selectedField: this.selectedField, diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.common.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.common.ts index eed4b27a7f0..3c3decb5af5 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.common.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.common.ts @@ -1,5 +1,5 @@ -import { Pipe, PipeTransform } from '@angular/core'; -import { FilteringLogic, IFilteringExpression } from 'igniteui-angular/core'; +import { Pipe, PipeTransform, TemplateRef } from '@angular/core'; +import { FieldType, FilteringLogic, IFilteringExpression } from 'igniteui-angular/core'; @Pipe({ name: 'fieldFormatter', @@ -82,3 +82,11 @@ export const QueryBuilderSelectors = { QUERY_BUILDER_HEADER: IGX_QUERY_BUILDER + '__header', QUERY_BUILDER_TREE: IGX_QUERY_BUILDER + '-tree', } + +export interface IgxQueryBuilderSearchValueContext { + $implicit: any; + selectedField: FieldType; + selectedCondition: string; + /* blazorSuppress */ + defaultSearchValueTemplate: TemplateRef; +} diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts index be4dfc9ae06..45d40f15319 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts @@ -19,6 +19,7 @@ import { IgxIconService } from 'igniteui-angular/icon'; import { editor } from '@igniteui/material-icons-extended'; import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.directives'; +/* wcElementTag: igc-query-builder-header */ /** * A component used for operating with complex filters by creating or editing conditions * and grouping them using AND/OR logic. @@ -204,7 +205,7 @@ export class IgxQueryBuilderComponent implements OnDestroy { * @hidden @internal */ @ContentChild(IgxQueryBuilderSearchValueTemplateDirective, { read: TemplateRef }) - public searchValueTemplate: TemplateRef; + public searchValueTemplate: TemplateRef; /** * @hidden @internal diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts index 4dd8201850c..89d6f9431c7 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.directives.ts @@ -1,8 +1,9 @@ import { Directive, TemplateRef, inject } from '@angular/core'; +import { IgxQueryBuilderSearchValueContext } from './query-builder.common'; /** * Defines the custom template that will be used for the search value input of condition in edit mode - * + * * @igxModule IgxQueryBuilderModule * @igxKeywords query builder, query builder search value * @igxGroup Data entry and display @@ -19,5 +20,10 @@ import { Directive, TemplateRef, inject } from '@angular/core'; standalone: true }) export class IgxQueryBuilderSearchValueTemplateDirective { - public template = inject>(TemplateRef); + public template = inject>(TemplateRef); + + public static ngTemplateContextGuard(_directive: IgxQueryBuilderSearchValueTemplateDirective, + context: unknown): context is IgxQueryBuilderSearchValueContext { + return true; + } } From 147f5290983a33bafbe0c2f9c7bc94be30362ace Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Fri, 9 Jan 2026 17:54:48 +0200 Subject: [PATCH 2/4] feat(query-builder): Expose query builder for elements --- .../src/analyzer/config.template.ts | 4 +- .../src/analyzer/elements.config.ts | 25 +++++ .../src/app/components.ts | 98 +++++++++++++++---- .../src/utils/define-all.ts | 4 + .../query-builder-header.component.ts | 5 + .../query-builder.component.html | 2 +- 6 files changed, 115 insertions(+), 23 deletions(-) diff --git a/projects/igniteui-angular-elements/src/analyzer/config.template.ts b/projects/igniteui-angular-elements/src/analyzer/config.template.ts index 99ac8a2bd85..ecde0f764ba 100644 --- a/projects/igniteui-angular-elements/src/analyzer/config.template.ts +++ b/projects/igniteui-angular-elements/src/analyzer/config.template.ts @@ -1,3 +1,4 @@ +import { IgxQueryBuilderComponent } from '../../../igniteui-angular/query-builder'; import { IgxGridComponent } from '../../../igniteui-angular/grids/grid'; import { IgxHierarchicalGridComponent } from '../../../igniteui-angular/grids/hierarchical-grid'; import { IgxPivotDataSelectorComponent, IgxPivotGridComponent } from '../../../igniteui-angular/grids/pivot-grid'; @@ -8,5 +9,6 @@ export const registerComponents = [ IgxHierarchicalGridComponent, IgxTreeGridComponent, IgxPivotGridComponent, - IgxPivotDataSelectorComponent + IgxPivotDataSelectorComponent, + IgxQueryBuilderComponent ]; diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index 29f2351a067..e0c1d0f2e1e 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -1,3 +1,4 @@ +import { IgxQueryBuilderComponent } from "../../../igniteui-angular/query-builder"; import { IgxGridComponent } from "../../../igniteui-angular/grids/grid"; import { IgxHierarchicalGridComponent } from "../../../igniteui-angular/grids/hierarchical-grid"; import { @@ -12,6 +13,7 @@ import { IgxPaginatorToken } from "../../../igniteui-angular/paginator/src/pagin import { IgxColumnGroupComponent } from "../../../igniteui-angular/grids/core/src/columns/column-group.component"; import { IgxColumnComponent } from "../../../igniteui-angular/grids/core/src/columns/column.component"; import { IgxColumnLayoutComponent } from "../../../igniteui-angular/grids/core/src/columns/column-layout.component"; +import { IgxQueryBuilderHeaderComponent } from "../../../igniteui-angular/query-builder/src/query-builder/query-builder-header.component"; import { IgxGridEditingActionsComponent } from "../../../igniteui-angular/grids/core/src/grid-actions/grid-editing-actions.component"; import { IgxActionStripActionsToken } from "../../../igniteui-angular/core/src/grid-column-actions/token"; import { IgxGridPinningActionsComponent } from "../../../igniteui-angular/grids/core/src/grid-actions/grid-pinning-actions.component"; @@ -32,6 +34,7 @@ export const registerComponents = [ IgxTreeGridComponent, IgxPivotGridComponent, IgxPivotDataSelectorComponent, + IgxQueryBuilderComponent, ]; //// WARNING: Code below this line is auto-generated and any modifications will be overwritten @@ -829,6 +832,28 @@ export var registerConfig = [ "selectRowOnClick", ], }, + { + component: IgxQueryBuilderComponent, + selector: "igc-query-builder", + parents: [], + contentQueries: [], + additionalProperties: [], + methods: ["canCommit", "commit", "discard", "onExpressionTreeChange"], + boolProps: [ + "showEntityChangeDialog", + "disableEntityChange", + "disableReturnFieldsChange", + ], + }, + { + component: IgxQueryBuilderHeaderComponent, + selector: "igc-query-builder-header", + parents: [IgxQueryBuilderComponent], + contentQueries: [], + additionalProperties: [], + methods: [], + boolProps: ["showLegend"], + }, { component: IgxRowIslandComponent, selector: "igc-row-island", diff --git a/projects/igniteui-angular-elements/src/app/components.ts b/projects/igniteui-angular-elements/src/app/components.ts index 903d12c25b7..3b853b250b1 100644 --- a/projects/igniteui-angular-elements/src/app/components.ts +++ b/projects/igniteui-angular-elements/src/app/components.ts @@ -12,71 +12,124 @@ import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; import { IgxHierarchicalGridComponent, IgxRowIslandComponent } from 'igniteui-angular/grids/hierarchical-grid'; import { IgxPivotDataSelectorComponent, IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid'; import { GridType, IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent } from 'igniteui-angular/query-builder'; // force-create icon service, TODO: move to initializer or register/define mechanic to avoid side-effect? const _iconBroadcast: IgxIconBroadcastService = injector.get(IgxIconBroadcastService); const grid = createIgxCustomElement(IgxGridComponent, { injector, registerConfig }); -const IgcGridComponent = withRegister(grid, () => { registerComponent(IgcGridComponent) }); +const IgcGridComponent = withRegister(grid, () => { + registerComponent(IgcGridComponent) +}); const treeGrid = createIgxCustomElement(IgxTreeGridComponent, { injector, registerConfig }); -const IgcTreeGridComponent = withRegister(treeGrid, () => { registerComponent(IgcTreeGridComponent) }); +const IgcTreeGridComponent = withRegister(treeGrid, () => { + registerComponent(IgcTreeGridComponent) +}); const hGrid = createIgxCustomElement(IgxHierarchicalGridComponent, { injector, registerConfig }); -const IgcHierarchicalGridComponent = withRegister(hGrid, () => { registerComponent(IgcHierarchicalGridComponent) }); +const IgcHierarchicalGridComponent = withRegister(hGrid, () => { + registerComponent(IgcHierarchicalGridComponent) +}); const pivot = createIgxCustomElement(IgxPivotGridComponent, { injector, registerConfig }); -const IgcPivotGridComponent = withRegister(pivot, () => { registerComponent(IgcPivotGridComponent) }); +const IgcPivotGridComponent = withRegister(pivot, () => { + registerComponent(IgcPivotGridComponent) +}); const pivotDataSelector = createIgxCustomElement(IgxPivotDataSelectorComponent, { injector, registerConfig }); -const IgcPivotDataSelectorComponent = withRegister(pivotDataSelector, () => { registerComponent(IgcPivotDataSelectorComponent) }); +const IgcPivotDataSelectorComponent = withRegister(pivotDataSelector, () => { + registerComponent(IgcPivotDataSelectorComponent) +}); const rowIsland = createIgxCustomElement(IgxRowIslandComponent, { injector, registerConfig }); -const IgcRowIslandComponent = withRegister(rowIsland, () => { registerComponent(IgcRowIslandComponent) }); +const IgcRowIslandComponent = withRegister(rowIsland, () => { + registerComponent(IgcRowIslandComponent) +}); const columnGroup = createIgxCustomElement(IgxColumnGroupComponent, { injector, registerConfig }); -const IgcColumnGroupComponent = withRegister(columnGroup, () => { registerComponent(IgcColumnGroupComponent) }); +const IgcColumnGroupComponent = withRegister(columnGroup, () => { + registerComponent(IgcColumnGroupComponent) +}); const columnLayout = createIgxCustomElement(IgxColumnLayoutComponent, { injector, registerConfig }); -const IgcColumnLayoutComponent = withRegister(columnLayout, () => { registerComponent(IgcColumnLayoutComponent) }); +const IgcColumnLayoutComponent = withRegister(columnLayout, () => { + registerComponent(IgcColumnLayoutComponent) +}); const column = createIgxCustomElement(IgxColumnComponent, { injector, registerConfig }); -const IgcColumnComponent = withRegister(column, () => { registerComponent(IgcColumnComponent) }); +const IgcColumnComponent = withRegister(column, () => { + registerComponent(IgcColumnComponent) +}); const paginator = createIgxCustomElement(IgxPaginatorComponent, { injector, registerConfig }); -const IgcPaginatorComponent = withRegister(paginator, () => { registerComponent(IgcPaginatorComponent) }); +const IgcPaginatorComponent = withRegister(paginator, () => { + registerComponent(IgcPaginatorComponent) +}); const toolbar = createIgxCustomElement(IgxGridToolbarComponent, { injector, registerConfig }); -const IgcGridToolbarComponent = withRegister(toolbar, () => { registerComponent(IgcGridToolbarComponent) }); +const IgcGridToolbarComponent = withRegister(toolbar, () => { + registerComponent(IgcGridToolbarComponent) +}); const actionStrip = createIgxCustomElement(IgxActionStripComponent, { injector, registerConfig }); -const IgcActionStripComponent = withRegister(actionStrip, () => { registerComponent(IgcActionStripComponent) }); +const IgcActionStripComponent = withRegister(actionStrip, () => { + registerComponent(IgcActionStripComponent) +}); const statePersistance = createIgxCustomElement(IgxGridStateComponent, { injector, registerConfig }); -const IgcGridStateComponent = withRegister(statePersistance, () => { registerComponent(IgcGridStateComponent) }); +const IgcGridStateComponent = withRegister(statePersistance, () => { + registerComponent(IgcGridStateComponent) +}); const editingActions = createIgxCustomElement(IgxGridEditingActionsComponent, { injector, registerConfig }); -const IgcGridEditingActionsComponent = withRegister(editingActions, () => { registerComponent(IgcGridEditingActionsComponent) }); +const IgcGridEditingActionsComponent = withRegister(editingActions, () => { + registerComponent(IgcGridEditingActionsComponent) +}); const pinningActions = createIgxCustomElement(IgxGridPinningActionsComponent, { injector, registerConfig }); -const IgcGridPinningActionsComponent = withRegister(pinningActions, () => { registerComponent(IgcGridPinningActionsComponent) }); +const IgcGridPinningActionsComponent = withRegister(pinningActions, () => { + registerComponent(IgcGridPinningActionsComponent) +}); const toolbarTitle = createIgxCustomElement(IgxGridToolbarTitleComponent, { injector, registerConfig }); -const IgcGridToolbarTitleComponent = withRegister(toolbarTitle, () => { registerComponent(IgcGridToolbarTitleComponent) }); +const IgcGridToolbarTitleComponent = withRegister(toolbarTitle, () => { + registerComponent(IgcGridToolbarTitleComponent) +}); const toolbarActions = createIgxCustomElement(IgxGridToolbarActionsComponent, { injector, registerConfig }); -const IgcGridToolbarActionsComponent = withRegister(toolbarActions, () => { registerComponent(IgcGridToolbarActionsComponent) }); +const IgcGridToolbarActionsComponent = withRegister(toolbarActions, () => { + registerComponent(IgcGridToolbarActionsComponent) +}); const toolbarHiding = createIgxCustomElement(IgxGridToolbarHidingComponent, { injector, registerConfig }); -const IgcGridToolbarHidingComponent = withRegister(toolbarHiding, () => { registerComponent(IgcGridToolbarHidingComponent) }); +const IgcGridToolbarHidingComponent = withRegister(toolbarHiding, () => { + registerComponent(IgcGridToolbarHidingComponent) +}); const toolbarPinning = createIgxCustomElement(IgxGridToolbarPinningComponent, { injector, registerConfig }); -const IgcGridToolbarPinningComponent = withRegister(toolbarPinning, () => { registerComponent(IgcGridToolbarPinningComponent) }); +const IgcGridToolbarPinningComponent = withRegister(toolbarPinning, () => { + registerComponent(IgcGridToolbarPinningComponent) +}); const toolbarExport = createIgxCustomElement(IgxGridToolbarExporterComponent, { injector, registerConfig }); -const IgcGridToolbarExporterComponent = withRegister(toolbarExport, () => { registerComponent(IgcGridToolbarExporterComponent) }); +const IgcGridToolbarExporterComponent = withRegister(toolbarExport, () => { + registerComponent(IgcGridToolbarExporterComponent) +}); const toolbarFilter = createIgxCustomElement(IgxGridToolbarAdvancedFilteringComponent, { injector, registerConfig }); -const IgcGridToolbarAdvancedFilteringComponent = withRegister(toolbarFilter, () => { registerComponent(IgcGridToolbarAdvancedFilteringComponent) }); +const IgcGridToolbarAdvancedFilteringComponent = withRegister(toolbarFilter, () => { + registerComponent(IgcGridToolbarAdvancedFilteringComponent) +}); + +const queryBuilder = createIgxCustomElement(IgxQueryBuilderComponent, { injector, registerConfig }); +const IgcQueryBuilderComponent = withRegister(queryBuilder, () => { + registerComponent(IgcQueryBuilderComponent) +}); + +const queryBuilderHeader = createIgxCustomElement(IgxQueryBuilderHeaderComponent, { injector, registerConfig }); +const IgcQueryBuilderHeaderComponent = withRegister(queryBuilderHeader, () => { + registerComponent(IgcQueryBuilderHeaderComponent) +}); export { IgcGridComponent, @@ -100,6 +153,8 @@ export { IgcGridToolbarPinningComponent, IgcGridToolbarExporterComponent, IgcGridToolbarAdvancedFilteringComponent, + IgcQueryBuilderComponent, + IgcQueryBuilderHeaderComponent } // TODO: Custom elements JSON as well @@ -111,5 +166,6 @@ declare global { 'igc-tree-grid': NgElement & WithProperties; 'igc-paginator': NgElement & WithProperties; 'igc-grid-state': NgElement & WithProperties; + 'igc-query-builder': NgElement & WithProperties; } } diff --git a/projects/igniteui-angular-elements/src/utils/define-all.ts b/projects/igniteui-angular-elements/src/utils/define-all.ts index 2ae5cf0bc31..344291a2711 100644 --- a/projects/igniteui-angular-elements/src/utils/define-all.ts +++ b/projects/igniteui-angular-elements/src/utils/define-all.ts @@ -21,6 +21,8 @@ import { IgcGridToolbarPinningComponent, IgcGridToolbarExporterComponent, IgcGridToolbarAdvancedFilteringComponent, + IgcQueryBuilderComponent, + IgcQueryBuilderHeaderComponent } from '../app/components'; export function defineAllComponents() { @@ -46,5 +48,7 @@ export function defineAllComponents() { IgcGridToolbarPinningComponent, IgcGridToolbarExporterComponent, IgcGridToolbarAdvancedFilteringComponent, + IgcQueryBuilderComponent, + IgcQueryBuilderHeaderComponent ); } diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts index 3e8a6c6c913..6ce221e6c00 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-header.component.ts @@ -2,6 +2,11 @@ import { Component, DestroyRef, HostBinding, inject, Input } from '@angular/core import { IQueryBuilderResourceStrings, QueryBuilderResourceStringsEN } from 'igniteui-angular/core'; import { getCurrentResourceStrings, onResourceChangeHandle } from 'igniteui-angular/core'; + +/* wcElementTag: igc-query-builder-header */ +/** +* @igxParent IgxQueryBuilderComponent +*/ @Component({ selector: 'igx-query-builder-header', templateUrl: 'query-builder-header.component.html' diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.html b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.html index 20eeb62f206..7d13ec5b0da 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.html +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.html @@ -1,4 +1,4 @@ - + Date: Mon, 12 Jan 2026 15:53:19 +0200 Subject: [PATCH 3/4] feat(*): Introduce new template input for other platforms --- .../src/analyzer/elements.config.ts | 1 + .../query-builder-tree.component.ts | 2 +- .../query-builder/query-builder.component.ts | 31 ++++++++++++++++--- 3 files changed, 29 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts index e0c1d0f2e1e..92a5f502f82 100644 --- a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts +++ b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts @@ -839,6 +839,7 @@ export var registerConfig = [ contentQueries: [], additionalProperties: [], methods: ["canCommit", "commit", "discard", "onExpressionTreeChange"], + templateProps: ["searchValueTemplate"], boolProps: [ "showEntityChangeDialog", "disableEntityChange", diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts index dd820fc336b..729b6ce9bb9 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder-tree.component.ts @@ -162,7 +162,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy { * Sets/gets the search value template. */ @Input() - public searchValueTemplate: TemplateRef = null; + public searchValueTemplate: TemplateRef = null; /** * Returns the parent expression operand. diff --git a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts index 45d40f15319..87e82835124 100644 --- a/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts +++ b/projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.ts @@ -1,4 +1,4 @@ -import { booleanAttribute, ContentChild, EventEmitter, Output, TemplateRef, inject } from '@angular/core'; +import { booleanAttribute, ContentChild, EventEmitter, Output, TemplateRef, inject, AfterContentInit } from '@angular/core'; import { Component, Input, ViewChild, ElementRef, OnDestroy, HostBinding } from '@angular/core'; @@ -18,6 +18,7 @@ import { IgxQueryBuilderTreeComponent } from './query-builder-tree.component'; import { IgxIconService } from 'igniteui-angular/icon'; import { editor } from '@igniteui/material-icons-extended'; import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.directives'; +import { IgxQueryBuilderSearchValueContext } from './query-builder.common'; /* wcElementTag: igc-query-builder-header */ /** @@ -36,7 +37,7 @@ import { IgxQueryBuilderSearchValueTemplateDirective } from './query-builder.dir templateUrl: './query-builder.component.html', imports: [IgxQueryBuilderTreeComponent] }) -export class IgxQueryBuilderComponent implements OnDestroy { +export class IgxQueryBuilderComponent implements AfterContentInit,OnDestroy { protected iconService = inject(IgxIconService); /** @@ -185,6 +186,18 @@ export class IgxQueryBuilderComponent implements OnDestroy { @Input() public disableEntityChange = false; + /** + * Sets/gets the search value template. + */ + @Input() + public set searchValueTemplate(template: TemplateRef) { + this._searchValueTemplate = template; + } + + public get searchValueTemplate(): TemplateRef { + return this._searchValueTemplate; + } + /** * Disables return fields changes at the root level. */ @@ -204,8 +217,8 @@ export class IgxQueryBuilderComponent implements OnDestroy { /** * @hidden @internal */ - @ContentChild(IgxQueryBuilderSearchValueTemplateDirective, { read: TemplateRef }) - public searchValueTemplate: TemplateRef; + @ContentChild(IgxQueryBuilderSearchValueTemplateDirective) + protected searchValueTemplateDirective: IgxQueryBuilderSearchValueTemplateDirective; /** * @hidden @internal @@ -220,6 +233,7 @@ export class IgxQueryBuilderComponent implements OnDestroy { private _fields: FieldType[]; private _entities: EntityType[]; private _shouldEmitTreeChange = true; + private _searchValueTemplate: TemplateRef; constructor() { this.registerSVGIcons(); @@ -228,6 +242,15 @@ export class IgxQueryBuilderComponent implements OnDestroy { }, this); } + /** + * @hidden + */ + public ngAfterContentInit(): void { + if (this.searchValueTemplateDirective) { + this._searchValueTemplate = this.searchValueTemplateDirective.template; + } + } + /** * Returns whether the expression tree can be committed in the current state. */ From 345e250ef5aac4c5083c4b17ce826ac408e29cd0 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Thu, 15 Jan 2026 10:39:15 +0200 Subject: [PATCH 4/4] chore(*): Include query builder themes for generation --- projects/igniteui-angular-elements/src/themes/_variables.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular-elements/src/themes/_variables.scss b/projects/igniteui-angular-elements/src/themes/_variables.scss index 9cb2c764d5f..cfcbaf7ffc2 100644 --- a/projects/igniteui-angular-elements/src/themes/_variables.scss +++ b/projects/igniteui-angular-elements/src/themes/_variables.scss @@ -36,5 +36,6 @@ $allowed: ( igx-paginator, igx-action-strip, igx-grid-toolbar, - igx-pivot-data-selector + igx-pivot-data-selector, + igx-query-builder );