feat(query-builder): Expose query builder component in elements

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
 ];

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,29 @@ export var registerConfig = [
       "selectRowOnClick",
     ],
   },
+  {
+    component: IgxQueryBuilderComponent,
+    selector: "igc-query-builder",
+    parents: [],
+    contentQueries: [],
+    additionalProperties: [],
+    methods: ["canCommit", "commit", "discard", "onExpressionTreeChange"],
+    templateProps: ["searchValueTemplate"],
+    boolProps: [
+      "showEntityChangeDialog",
+      "disableEntityChange",
+      "disableReturnFieldsChange",
+    ],
+  },
+  {
+    component: IgxQueryBuilderHeaderComponent,
+    selector: "igc-query-builder-header",
+    parents: [IgxQueryBuilderComponent],
+    contentQueries: [],
+    additionalProperties: [],
+    methods: [],
+    boolProps: ["showLegend"],
+  },
   {
     component: IgxRowIslandComponent,
     selector: "igc-row-island",

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<IgxTreeGridElement>;
         'igc-paginator': NgElement & WithProperties<IgxPaginatorComponent>;
         'igc-grid-state': NgElement & WithProperties<IgxGridStateComponent>;
+        'igc-query-builder': NgElement & WithProperties<IgxQueryBuilderComponent>;
     }
 }

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
 );

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
   );
 }

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'

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';
@@ -162,7 +162,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
      * Sets/gets the search value template.
      */
     @Input()
-    public searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueTemplateDirective> = null;
+    public searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueContext> = null;
 
     /**
     * Returns the parent expression operand.
@@ -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,

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<any>;
+}

projects/igniteui-angular/query-builder/src/query-builder/query-builder.component.html

@@ -1,4 +1,4 @@
-<ng-content select="igx-query-builder-header"></ng-content>
+<ng-content select="igx-query-builder-header,igc-query-builder-header"></ng-content>
 
 <igx-query-builder-tree
     [entities]="this.entities"

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,7 +18,9 @@ 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 */
 /**
  * A component used for operating with complex filters by creating or editing conditions
  * and grouping them using AND/OR logic.
@@ -35,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);
 
     /**
@@ -184,6 +186,18 @@ export class IgxQueryBuilderComponent implements OnDestroy {
     @Input()
     public disableEntityChange = false;
 
+    /**
+     * Sets/gets the search value template.
+     */
+    @Input()
+    public set searchValueTemplate(template: TemplateRef<IgxQueryBuilderSearchValueContext>) {
+        this._searchValueTemplate = template;
+    }
+
+    public get searchValueTemplate(): TemplateRef<IgxQueryBuilderSearchValueContext> {
+        return this._searchValueTemplate;
+    }
+
     /**
      * Disables return fields changes at the root level.
      */
@@ -203,8 +217,8 @@ export class IgxQueryBuilderComponent implements OnDestroy {
     /**
      * @hidden @internal
      */
-    @ContentChild(IgxQueryBuilderSearchValueTemplateDirective, { read: TemplateRef })
-    public searchValueTemplate: TemplateRef<any>;
+    @ContentChild(IgxQueryBuilderSearchValueTemplateDirective)
+    protected searchValueTemplateDirective: IgxQueryBuilderSearchValueTemplateDirective;
 
     /**
      * @hidden @internal
@@ -219,6 +233,7 @@ export class IgxQueryBuilderComponent implements OnDestroy {
     private _fields: FieldType[];
     private _entities: EntityType[];
     private _shouldEmitTreeChange = true;
+    private _searchValueTemplate: TemplateRef<IgxQueryBuilderSearchValueContext>;
 
     constructor() {
         this.registerSVGIcons();
@@ -227,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.
      */