IgxQueryBuilderComponent: expose disableReturnFieldsChange & empty header title (#15381)

teodosiah · igdmdimitrov · desig9stein · web-flow · commit 7b04dce1c5a2 · 2025-02-25T17:15:07.000+02:00
* feat(query-builder): expose disableReturnFieldsChange prop on root level
* feat(query-builder): hide header, remove title RS, update CHANGELOG and README.md
* chore(*): Move header variants down in the dev demo.

---------

Co-authored-by: igdmdimitrov &lt;dmdimitrov@infragistics.com&gt;
Co-authored-by: desig9stein &lt;mspopovv@gmail.com&gt;
Co-authored-by: Galina Edinakova &lt;gedinakova@infragistics.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@ All notable changes for each version of this project will be documented in this
         - Introduced the ability to reposition condition chips by dragging or using `Arrow Up/Down`.
         - Added the `entities` property that accepts an array of `EntityType` objects describing an entity with its name and an array of fields. The `fields` input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on `ng update`.
         - Added `disableEntityChange` property that can be used to disable the entity select on root level after the initial selection. Defaults to `false`.
+        - Added `disableReturnFieldsChange` property that can be used to disable the fields combo on root level. Defaults to `false`.
         - Added the `canCommit`, `commit` and `discard` public methods that allows the user to save/discard the current state of the expression tree.
         - Added option to template the search value input:
             ```
@@ -37,8 +38,11 @@ All notable changes for each version of this project will be documented in this
         - Selecting conditions inside the `IgxQueryBuilderComponent` is no longer supported. Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality.
         - Deleting multiple expressions through the context menu is no longer supported.
     - `IgxQueryBuilderHeaderComponent`
-        - **Behavioral Change** - Legend is no longer shown.
-        - **Deprecation** - The `showLegend` input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on `ng update`.
+        - **Behavioral Change** 
+        - Legend is no longer shown.
+        - If the `title` input property is not set, by default it would be empty string.
+        - **Deprecation**
+        - The `showLegend` and `resourceStrings` input properties have been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on `ng update`.
 - `IFilteringExpression`
     - A new optional property called `conditionName` has been introduced. This would generally be equal to the existing `condition.name`.
 - `IFilteringOperation`
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsBG = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Всички',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'От',
     igx_query_builder_select_label: 'Избери',
     igx_query_builder_where_label: 'Където',
diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsCS = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Všechno',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Z',
     igx_query_builder_select_label: 'Vybrat',
     igx_query_builder_where_label: 'Kde',
diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsDA = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Alle',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Fra',
     igx_query_builder_select_label: 'Vælg',
     igx_query_builder_where_label: 'Hvor',
diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsDE = {
     igx_query_builder_filter_true: 'Wahr',
     igx_query_builder_filter_false: 'Falsch',
     igx_query_builder_filter_all: 'Alle',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Von',
     igx_query_builder_select_label: 'Auswählen',
     igx_query_builder_where_label: 'Wo',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsES = {
     igx_query_builder_filter_true: 'Verdadero',
     igx_query_builder_filter_false: 'Falso',
     igx_query_builder_filter_all: 'Todo',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Desde',
     igx_query_builder_select_label: 'Seleccionar',
     igx_query_builder_where_label: 'Donde',
diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsFR = {
     igx_query_builder_filter_true: 'Vrai',
     igx_query_builder_filter_false: 'Faux',
     igx_query_builder_filter_all: 'Tout',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'De',
     igx_query_builder_select_label: 'Sélectionner',
     igx_query_builder_where_label: 'Où',
diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsHU = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Összes',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Kezdete',
     igx_query_builder_select_label: 'Kiválasztás',
     igx_query_builder_where_label: 'Ahol',
diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsIT = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Tutto',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Da',
     igx_query_builder_select_label: 'Seleziona',
     igx_query_builder_where_label: 'Dove',
diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsJA = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'すべて',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'から',
     igx_query_builder_select_label: '選択',
     igx_query_builder_where_label: '条件',
diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsKO = {
     igx_query_builder_filter_true: '참',
     igx_query_builder_filter_false: '거짓',
     igx_query_builder_filter_all: '모두',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: '부터',
     igx_query_builder_select_label: '선택',
     igx_query_builder_where_label: '선택',
diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsNB = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Alle',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Fra',
     igx_query_builder_select_label: 'Velg',
     igx_query_builder_where_label: 'Hvor',
diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsNL = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Alles',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Van',
     igx_query_builder_select_label: 'Selecteer',
     igx_query_builder_where_label: 'Waar',
diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsPL = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Wszystko',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Od',
     igx_query_builder_select_label: 'Wybierz',
     igx_query_builder_where_label: 'Gdzie',
diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsPT = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Todos',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'De',
     igx_query_builder_select_label: 'Selecionar',
     igx_query_builder_where_label: 'Onde',
diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsRO = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Toate',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Din',
     igx_query_builder_select_label: 'Selectează',
     igx_query_builder_where_label: 'Unde',
diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsSV = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: 'Allt',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Från',
     igx_query_builder_select_label: 'Välj',
     igx_query_builder_where_label: 'Där',
diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsTR = {
     igx_query_builder_filter_true: 'Doğru',
     igx_query_builder_filter_false: 'Yanlış',
     igx_query_builder_filter_all: 'Tümü',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: 'Başlangıç',
     igx_query_builder_select_label: 'Seç',
     igx_query_builder_where_label: 'Nerede',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsZHHANS = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: '全部',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: '从',
     igx_query_builder_select_label: '选择',
     igx_query_builder_where_label: '在哪里',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/query-builder-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/query-builder-resources.ts
@@ -42,7 +42,6 @@ export const QueryBuilderResourceStringsZHHANT = {
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
     igx_query_builder_filter_all: '全部',
-    igx_query_builder_title: 'Query Builder',
     igx_query_builder_from_label: '從',
     igx_query_builder_select_label: '選擇',
     igx_query_builder_where_label: '在哪裡',
diff --git a/projects/igniteui-angular/migrations/update-19_1_0/changes/inputs.json b/projects/igniteui-angular/migrations/update-19_1_0/changes/inputs.json
@@ -17,6 +17,14 @@
                 "selector": "igx-query-builder-header",
                 "type": "component"
             }
+        },
+        {
+            "name": "resourceStrings",
+            "remove": true,
+            "owner": {
+                "selector": "igx-query-builder-header",
+                "type": "component"
+            }
         }
     ]
 }
diff --git a/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts b/projects/igniteui-angular/migrations/update-19_1_0/index.spec.ts
@@ -75,10 +75,10 @@ describe(`Update to ${version}`, () => {
         );
     });
 
-    it('should remove Query Builder Header deprecated property `showLegend`', async () => {
+    it('should remove Query Builder Header deprecated `showLegend` and `resourceStrings` properties', async () => {
         appTree.create(`/testSrc/appPrefix/component/test.component.html`,
         `
-        <igx-query-builder-header [showLegend]="false"></igx-query-builder-header>
+        <igx-query-builder-header [showLegend]="false" [resourceStrings]="resourceStrings"></igx-query-builder-header>
         `
         );
 
@@ -90,4 +90,33 @@ describe(`Update to ${version}`, () => {
         `
         );
     });
+
+    it('should remove igx_query_builder_title from resources ', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.ts`,
+        `
+        export class TestComponent {
+            public resourceStrings = {
+                igx_query_builder_add_condition: '+ Add Condition',
+                igx_query_builder_title: 'Query Builder Title',
+                igx_query_builder_add_group: '+ Add Group',
+                igx_query_builder_create_and_group: 'My create and group',
+                igx_query_builder_create_or_group: 'My create or group'
+            };
+        }
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.ts')).toEqual(
+        `
+        export class TestComponent {
+            public resourceStrings = {
+                igx_query_builder_add_condition: '+ Add Condition',
+                igx_query_builder_add_group: '+ Add Group'
+            };
+        }
+        `
+        );
+    });
 });
diff --git a/projects/igniteui-angular/migrations/update-19_1_0/index.ts b/projects/igniteui-angular/migrations/update-19_1_0/index.ts
@@ -16,5 +16,19 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
         args.value = `[{ name: '', fields: ${args.value}}]`;
     });
 
+    // remove igx_query_builder_title, igx_query_builder_create_and_group, igx_query_builder_create_or_group from resources
+    const removedRS = ['igx_query_builder_title', 'igx_query_builder_create_and_group', 'igx_query_builder_create_or_group'];
+    for (const entryPath of update.tsFiles) {
+        let content = host.read(entryPath).toString();
+        for (const rs of removedRS) {
+            const regex = new RegExp(String.raw`,?\s*${rs}\s*:\s*'[^']*'`, 'g');
+    
+            if (regex.test(content)) {
+                content = content.replace(regex, '');
+                host.overwrite(entryPath, content);
+            }
+        }
+    }
+
     update.applyChanges();
 };
diff --git a/projects/igniteui-angular/src/lib/core/i18n/query-builder-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/query-builder-resources.ts
@@ -36,8 +36,7 @@ export interface IQueryBuilderResourceStrings {
     igx_query_builder_filter_lessThanOrEqualTo?: string;
     igx_query_builder_filter_true?: string;
     igx_query_builder_filter_false?: string;
-    igx_query_builder_filter_all?: string;    
-    igx_query_builder_title?: string;
+    igx_query_builder_filter_all?: string;
     igx_query_builder_from_label?: string;
     igx_query_builder_select_label?: string;
     igx_query_builder_where_label?: string;
@@ -112,8 +111,7 @@ export const QueryBuilderResourceStringsEN: IQueryBuilderResourceStrings = {
     igx_query_builder_filter_lessThanOrEqualTo: 'Less Than Or Equal To',
     igx_query_builder_filter_true: 'True',
     igx_query_builder_filter_false: 'False',
-    igx_query_builder_filter_all: 'All',    
-    igx_query_builder_title: 'Query Builder',
+    igx_query_builder_filter_all: 'All',
     igx_query_builder_from_label: 'From',
     igx_query_builder_select_label: 'Select',
     igx_query_builder_where_label: 'Where',
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
diff --git a/projects/igniteui-angular/src/lib/query-builder/README.md b/projects/igniteui-angular/src/lib/query-builder/README.md
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.html
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-header.component.ts
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.ts
diff --git a/src/app/query-builder/query-builder.sample.html b/src/app/query-builder/query-builder.sample.html
diff --git a/src/app/query-builder/query-builder.sample.ts b/src/app/query-builder/query-builder.sample.ts
