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

CHANGELOG.md

@@ -14,10 +14,31 @@ All notable changes for each version of this project will be documented in this
 - `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`.
+- `IFilteringOperation`
+    - A new optional property called `isNestedQuery` has been introduced. It's used to indicate whether the condition leads to a nested query creation.
 - `ColumnType`, `IgxColumn`
     - The built-in editors for columns of type `date`, `dateTime` and `time` now use a default input format as per the `IgxGrid`'s `locale`. This is valid both for cell editors and the ones in the filtering UI for all modes - `quickFilter`, `excelStyle` and the Advanced filtering.
     - In case the `pipeArgs.displayFormat` property of a date-time column is set and contains only numeric date-time parts or such that can be handled by the editors, the built-in editors input format is inferred from it.
-    - To configure the built-in editors, a new `editorOptions` property is added that allows to pass optional parameters. Accepts an `IColumnEditorOptions` object with the `dateTimeFormat` property, that is used as input format for the editors of
+    - To configure the built-in editors, a new `editorOptions` optional property is added that allows to pass optional parameters. Accepts an `IColumnEditorOptions` object with the `dateTimeFormat` property, that is used as input format for the editors of
     `date`, `dateTime` and `time` column data types:
         ```ts
             const editorOptions: IColumnEditorOptions = { Field?

package.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^4.21.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^14.1.0",
+    "igniteui-theming": "^14.2.0-beta.3",
     "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: 'Избери дата и час',
     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: 'В/във',
+    igx_query_builder_filter_notIn: 'Не е в/във',
     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: 'Всички полета',
+    igx_query_builder_details: 'Детайли',
+    igx_query_builder_search: 'Търсене',
+    igx_query_builder_select_all: 'Избери всички',
+    igx_query_builder_select_entity: 'Избери обект',
+    igx_query_builder_select_return_fields: 'Избери полета за връщане',
+    igx_query_builder_dialog_title: 'Потвърждение',
+    igx_query_builder_dialog_message: 'С промяната на обекта ще загубите текущите си настройки. Сигурни ли сте, че искате да продължите?',
+    igx_query_builder_dialog_checkbox_text: 'Не показвай този диалогов прозорец отново',
+    igx_query_builder_dialog_cancel: 'Отказ',
+    igx_query_builder_dialog_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: 'Vyberte datum a čas',
     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: 'V',
+    igx_query_builder_filter_notIn: 'Není v',
     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: 'Všechna pole',
+    igx_query_builder_details: 'Podrobnosti',
+    igx_query_builder_search: 'Vyhledávání',
+    igx_query_builder_select_all: 'Vybrat vše',
+    igx_query_builder_select_entity: 'Vyberte entitu',
+    igx_query_builder_select_return_fields: 'Vyberte pole pro vrácení',
+    igx_query_builder_dialog_title: 'Potvrzení',
+    igx_query_builder_dialog_message: 'Změnou entity ztratíte svá aktuální nastavení. Opravdu to chcete udělat?',
+    igx_query_builder_dialog_checkbox_text: 'Tento dialog již příště nezobrazovat',
+    igx_query_builder_dialog_cancel: 'Zrušení',
+    igx_query_builder_dialog_confirm: 'Potvrdit',
 };
 
 /**

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: 'Vælg dato og tid',
     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: 'I',
+    igx_query_builder_filter_notIn: 'Ikke i',
     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: 'Alle felter',
+    igx_query_builder_details: 'Detaljer',
+    igx_query_builder_search: 'Søg',
+    igx_query_builder_select_all: 'Vælg alle',
+    igx_query_builder_select_entity: 'Vælg objekt',
+    igx_query_builder_select_return_fields: 'Vælg returfelter',
+    igx_query_builder_dialog_title: 'Bekræftelse',
+    igx_query_builder_dialog_message: 'Ved at ændre objektet mister du dine nuværende indstillinger. Er du sikker på, at du vil fortsætte?',
+    igx_query_builder_dialog_checkbox_text: 'Vis ikke denne dialogboks igen',
+    igx_query_builder_dialog_cancel: 'Annuller',
+    igx_query_builder_dialog_confirm: 'Bekræft',
 };
 
 /**

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: 'Datum und Uhrzeit auswählen',
     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: 'Nicht 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: 'Alle Felder',
+    igx_query_builder_details: 'Details',
+    igx_query_builder_search: 'Suchen',
+    igx_query_builder_select_all: 'Alle auswählen',
+    igx_query_builder_select_entity: 'Entität auswählen',
+    igx_query_builder_select_return_fields: 'Rückgabefelder auswählen',
+    igx_query_builder_dialog_title: 'Bestätigung',
+    igx_query_builder_dialog_message: 'Durch das Ändern der Entität gehen Ihre aktuellen Einstellungen verloren.  Möchten Sie wirklich fortfahren?',
+    igx_query_builder_dialog_checkbox_text: 'Dieses Dialogfeld nicht mehr anzeigen',
+    igx_query_builder_dialog_cancel: 'Abbrechen',
+    igx_query_builder_dialog_confirm: 'Bestätigen',
 };
 
 /**

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: 'Seleccionar fecha y hora',
     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: 'En',
+    igx_query_builder_filter_notIn: 'No en',
     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: 'Todos los campos',
+    igx_query_builder_details: 'Detalles',
+    igx_query_builder_search: 'Buscar',
+    igx_query_builder_select_all: 'Seleccionar todo',
+    igx_query_builder_select_entity: 'Seleccionar entidad',
+    igx_query_builder_select_return_fields: 'Seleccionar campos de retorno',
+    igx_query_builder_dialog_title: 'Confirmación',
+    igx_query_builder_dialog_message: 'Al cambiar la entidad, se perderán las configuraciones actuales. ¿Está seguro de que desea continuar?',
+    igx_query_builder_dialog_checkbox_text: 'No volver a mostrar este cuadro de diálogo',
+    igx_query_builder_dialog_cancel: 'Cancelar',
+    igx_query_builder_dialog_confirm: 'Confirmar',
 };
 
 /**

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: 'Sélectionner la date et l\'heure',
     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: 'Dans',
+    igx_query_builder_filter_notIn: 'Pas dans',
     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: 'Tous les domaines',
+    igx_query_builder_details: 'Détails',
+    igx_query_builder_search: 'Chercher',
+    igx_query_builder_select_all: 'Sélectionner tout',
+    igx_query_builder_select_entity: 'Sélectionner une entité',
+    igx_query_builder_select_return_fields: 'Sélectionner les champs de retour',
+    igx_query_builder_dialog_title: 'Confirmation',
+    igx_query_builder_dialog_message: 'En changeant l\'entité, vous perdrez vos paramètres actuels. Êtes-vous sûr de vouloir faire cela ?',
+    igx_query_builder_dialog_checkbox_text: 'Ne plus afficher cette boîte de dialogue',
+    igx_query_builder_dialog_cancel: 'Annuler',
+    igx_query_builder_dialog_confirm: 'Confirmer',
 };
 
 /**

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: 'Dátum és idő kiválasztása',
     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: 'Itt',
+    igx_query_builder_filter_notIn: 'Nem itt',
     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: 'Minden mező',
+    igx_query_builder_details: 'Részletek',
+    igx_query_builder_search: 'Keresés',
+    igx_query_builder_select_all: 'Mindet kijelöli',
+    igx_query_builder_select_entity: 'Entitás kiválasztása',
+    igx_query_builder_select_return_fields: 'Visszatérő mezők kiválasztása',
+    igx_query_builder_dialog_title: 'Megerősítés',
+    igx_query_builder_dialog_message: 'Az entitás megváltoztatásával elveszíti jelenlegi beállításait. Biztos, hogy folytatni kívánja?',
+    igx_query_builder_dialog_checkbox_text: 'Ne jelenjen meg többet ez a párbeszédpanel',
+    igx_query_builder_dialog_cancel: 'Mégse',
+    igx_query_builder_dialog_confirm: 'Megerősítés',
 };
 
 /**

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: 'Seleziona data e ora',
     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: 'Non 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: 'Tutti i campi',
+    igx_query_builder_details: 'Dettagli',
+    igx_query_builder_search: 'Cerca',
+    igx_query_builder_select_all: 'Seleziona tutto',
+    igx_query_builder_select_entity: 'Seleziona entità',
+    igx_query_builder_select_return_fields: 'Seleziona campi di ritorno',
+    igx_query_builder_dialog_title: 'Conferma',
+    igx_query_builder_dialog_message: 'Modificando l\'entità, perderai le impostazioni correnti. Procedere?',
+    igx_query_builder_dialog_checkbox_text: 'Non visualizzare più questo messaggio',
+    igx_query_builder_dialog_cancel: 'Annulla',
+    igx_query_builder_dialog_confirm: 'Conferma',
 };
 
 /**