feat(query-builder): support for nested queries and other improvements

CHANGELOG.md

@@ -8,10 +8,29 @@ All notable changes for each version of this project will be documented in this
     - Introduced ability for Simple Combo to automatically select and retain valid input on "Tab" press enhancing user experience by streamlining data entry and reducing the need for manual selection improving form navigation.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - To streamline the sorting of columns with custom formats, a new `FormattedValuesSortingStrategy` has been introduced. This strategy simplifies the sorting process by allowing direct sorting based on formatted values, eliminating the need to extend the `DefaultSortingStrategy` or implement a custom `ISortingStrategy`. This enhancement improves the ease of handling sorting with custom column formatters.
-
 - `IgxCarousel`
     - Added support for vertical alignment. Can be configured via the `vertical` property. Defaults to `false`.
     - Added support for showing/hiding the indicator controls (dots). Can be configured via the `indicators` property. Defaults to `true`.
+- `IgxQueryBuilder`
+    - Introduced ability to create nested queries by specifying IN/NOT IN operators.
+    - 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 option to template the search value input:
+    ```
+    <ng-template igxQueryBuilderSearchValue 
+                let-searchValue
+                let-selectedField = "selectedField" 
+                let-selectedCondition = "selectedCondition"
+                let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
+        @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
+            <input type="text" required [(ngModel)]="searchValue.value"/>
+        } @else {  
+            <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></ng-container>
+        }
+    </ng-template> 
+    ```
+- `IFilteringExpression`
+    - A new optional property called `conditionName` has been introduced. This would generally be equal to the existing `condition.name`.
+
 
 #### Scrollbar: New CSS variables
 

package.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^14.0.0",
+    "igniteui-theming": "^14.2.0-beta.2",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.0",

projects/igniteui-angular-i18n/src/i18n/BG/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsBG_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Избери дата',
     igx_query_builder_time_placeholder: 'Избери време',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'And',
     igx_query_builder_filter_operator_or: 'Or',
     igx_query_builder_filter_contains: 'Съдържа',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsBG_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'Не е празно',
     igx_query_builder_filter_null: 'Null',
     igx_query_builder_filter_notNull: 'Не е Null',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Преди',
     igx_query_builder_filter_after: 'След',
     igx_query_builder_filter_at: 'На',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsBG_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Избери колона',
     igx_query_builder_condition_placeholder: 'Изберете филтър',
     igx_query_builder_value_placeholder: 'Стойност',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/CS/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsCS_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Datum výdeje',
     igx_query_builder_time_placeholder: 'Čas vyzvednutí',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'A',
     igx_query_builder_filter_operator_or: 'Nebo',
     igx_query_builder_filter_contains: 'Obsahuje',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsCS_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'Není prázdný',
     igx_query_builder_filter_null: 'Nula',
     igx_query_builder_filter_notNull: 'Nenulový',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Před',
     igx_query_builder_filter_after: 'Po',
     igx_query_builder_filter_at: 'V',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsCS_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Vyberte sloupec',
     igx_query_builder_condition_placeholder: 'Vyberte filtr',
     igx_query_builder_value_placeholder: 'Hodnota',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/DA/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsDA_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Afhentningsdato',
     igx_query_builder_time_placeholder: 'Afhentningstidspunkt',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'Og',
     igx_query_builder_filter_operator_or: 'Eller',
     igx_query_builder_filter_contains: 'Indeholder',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsDA_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'Ikke tom',
     igx_query_builder_filter_null: 'Null',
     igx_query_builder_filter_notNull: 'Ikke Null',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Før',
     igx_query_builder_filter_after: 'Efter',
     igx_query_builder_filter_at: 'På',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsDA_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Vælg kolonne',
     igx_query_builder_condition_placeholder: 'Vælg filter',
     igx_query_builder_value_placeholder: 'Værdi',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/DE/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsDE_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Wähle Datum',
     igx_query_builder_time_placeholder: 'Abholungszeit',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'Und',
     igx_query_builder_filter_operator_or: 'Oder',
     igx_query_builder_filter_contains: 'Enthält',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsDE_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'Nicht leer',
     igx_query_builder_filter_null: 'Null',
     igx_query_builder_filter_notNull: 'Nicht Null',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Vor',
     igx_query_builder_filter_after: 'Nach',
     igx_query_builder_filter_at: 'Um',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsDE_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Wähle Spalte',
     igx_query_builder_condition_placeholder: 'Wähle Filter',
     igx_query_builder_value_placeholder: 'Wert',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/ES/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsES_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Elegir Fecha',
     igx_query_builder_time_placeholder: 'Hora de recogida',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'Y',
     igx_query_builder_filter_operator_or: 'O',
     igx_query_builder_filter_contains: 'Contiene',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsES_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'No Vacío',
     igx_query_builder_filter_null: 'Nulo',
     igx_query_builder_filter_notNull: 'No Nulo',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Antes',
     igx_query_builder_filter_after: 'Después',
     igx_query_builder_filter_at: 'A la(s)',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsES_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Seleccionar columna',
     igx_query_builder_condition_placeholder: 'Seleccionar filtro',
     igx_query_builder_value_placeholder: 'Valor',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/FR/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsFR_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Choisir la date',
     igx_query_builder_time_placeholder: 'Heure de récupération',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'Et',
     igx_query_builder_filter_operator_or: 'Ou',
     igx_query_builder_filter_contains: 'Contient',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsFR_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'Pas vide',
     igx_query_builder_filter_null: 'Nul',
     igx_query_builder_filter_notNull: 'Pas nul',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Avant',
     igx_query_builder_filter_after: 'Après',
     igx_query_builder_filter_at: 'À',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsFR_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Sélectionner la colonne',
     igx_query_builder_condition_placeholder: 'Sélectionner le filtre',
     igx_query_builder_value_placeholder: 'Valeur',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/HU/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsHU_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Felvétel dátuma',
     igx_query_builder_time_placeholder: 'Felvétel időpontja',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'És',
     igx_query_builder_filter_operator_or: 'Vagy',
     igx_query_builder_filter_contains: 'Tartalmazza',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsHU_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'Nem üres',
     igx_query_builder_filter_null: 'Nullértékű',
     igx_query_builder_filter_notNull: 'Nem nullértékű',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Előtte',
     igx_query_builder_filter_after: 'Utána',
     igx_query_builder_filter_at: 'Ekkor',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsHU_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Oszlop kiválasztása',
     igx_query_builder_condition_placeholder: 'Szűrő kiválasztása',
     igx_query_builder_value_placeholder: 'Érték',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**

projects/igniteui-angular-i18n/src/i18n/IT/query-builder-resources.ts

@@ -3,6 +3,7 @@ import { IQueryBuilderResourceStrings } from 'igniteui-angular';
 const QueryBuilderResourceStringsIT_: ExpandRequire<IQueryBuilderResourceStrings> = {
     igx_query_builder_date_placeholder: 'Data di prelievo',
     igx_query_builder_time_placeholder: 'Ora ritiro',
+    igx_query_builder_datetime_placeholder: 'Select date & time',
     igx_query_builder_filter_operator_and: 'E',
     igx_query_builder_filter_operator_or: 'O',
     igx_query_builder_filter_contains: 'Contiene',
@@ -15,6 +16,8 @@ const QueryBuilderResourceStringsIT_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_filter_notEmpty: 'Non vuoto',
     igx_query_builder_filter_null: 'Null',
     igx_query_builder_filter_notNull: 'Non null',
+    igx_query_builder_filter_in: 'In',
+    igx_query_builder_filter_notIn: 'Not In',
     igx_query_builder_filter_before: 'Prima',
     igx_query_builder_filter_after: 'Dopo',
     igx_query_builder_filter_at: 'A',
@@ -52,6 +55,17 @@ const QueryBuilderResourceStringsIT_: ExpandRequire<IQueryBuilderResourceStrings
     igx_query_builder_column_placeholder: 'Seleziona colonna',
     igx_query_builder_condition_placeholder: 'Seleziona filtro',
     igx_query_builder_value_placeholder: 'Valore',
+    igx_query_builder_all_fields: 'All fields',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Search',
+    igx_query_builder_select_all: 'Select All',
+    igx_query_builder_select_entity: 'Select entity',
+    igx_query_builder_select_return_fields: 'Select return fields',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'By changing the entity, you will lose your current settings. Are you sure you want to do that?',
+    igx_query_builder_dialog_checkbox_text: 'Do not show this dialog again',
+    igx_query_builder_dialog_cancel: 'Cancel',
+    igx_query_builder_dialog_confirm: 'Confirm',
 };
 
 /**