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

[igdmdimitrov]

Closes #14642
Closes #14979

Additional information (check all that apply):

• Bug fix
• New functionality
• Documentation
• Demos
• CI/CD

Checklist:

• All relevant tags have been applied to this PR
• This PR includes unit tests covering all the new code (test guidelines)
• This PR includes API docs for newly added methods/properties (api docs guidelines)
• This PR includes feature/README.MD updates for the feature docs
• This PR includes general feature table updates in the root README.MD
• This PR includes CHANGELOG.MD updates for newly added functionality
• This PR contains breaking changes
• This PR includes ng update migrations for the breaking changes (migrations guidelines)
• This PR includes behavioral changes and the feature specification has been updated with them

[gedinakova]

1. Run QB dev demo
2. Click on the group line in the inner query

Result: The dialog to change the group operator is not shown. Only the group line style changes to selected.
Note: The dialog is shown when the query is in edit mode.

This may be by design but I still think we should probably discuss this UX.

[gedinakova]

    1. Run QB Dev Demo
2. Hover over the first condition of the inner query
3. Click the "+" button to add a new condition
4. Click the "+condition", "and group" or "or group" button 

The row to add a condition is shown but the following error is logged in the console (3 times):
TypeError: Cannot read properties of null (reading 'name')
at IgxQueryBuilderTreeComponent2_ng_template_9_div_0_Template (template.html:99:21)
at executeTemplate (core.mjs:11621:9)
at refreshView (core.mjs:13239:13)
at detectChangesInView (core.mjs:13455:9)
at detectChangesInViewIfAttached (core.mjs:13415:5)
at detectChangesInEmbeddedViews (core.mjs:13374:13)
at refreshView (core.mjs:13267:9)
at detectChangesInView (core.mjs:13455:9)
at detectChangesInViewIfAttached (core.mjs:13415:5)
at detectChangesInEmbeddedViews (core.mjs:13374:13)

[gedinakova]

    1. Run the dev demo
2. Reset all filters & start a new group
3. Select entity & add the first condition
4. The add a new group, e.g an and group
5. Add the first condition to it (note how all the buttons to add new filters are inside the group)
6. Submit the condition - only the condition remains in the group, the buttons seem to be shifted to the outer group
7. Attempt to add another group

Result: All inputs and buttons in the new group are disabled.
Expected result: The buttons should stay part of the current group and it should be possible to add another condition to it (not having all inputs disabled on step 7)

[gedinakova]

    1. Run the dev demo
2. Click the edit button on the first filter (In)
3. Select the two inner conditions and click the "Create OR group" button in the pop up - the group is created in the UI
4. Click the submit button

Result: All inner conditions disappear from the UI. The tree doesn't seem to change.
The following error is logged in the console:
TypeError: Cannot read properties of undefined (reading 'find')
at IgxQueryBuilderTreeComponent2.createExpressionGroupItem (query-builder-tree.component.ts:1164:47)
at IgxQueryBuilderTreeComponent2.createExpressionGroupItem (query-builder-tree.component.ts:1149:50)
at IgxQueryBuilderTreeComponent2.init (query-builder-tree.component.ts:1369:31)
at set expressionTree (query-builder-tree.component.ts:175:14)
at applyValueToInputField (core.mjs:4045:29)
at writeToDirectiveInput (core.mjs:11443:13)
at setInputsForProperty (core.mjs:12749:9)
at elementPropertyInternal (core.mjs:12050:9)
at ɵɵproperty (core.mjs:22491:9)
at IgxQueryBuilderTreeComponent2_ng_template_9_ng_container_2_Template (template.html:369:17)

[gedinakova]

1. Run the dev demo
2. Click to edit the second condition
3. In the filter dropdown change from "Equals" to "In"
4. Click the commit icon button

The button is not disabled on switching to In/Not In conditions (as the value the input is). The following error is logged in the console on clicking it:
TypeError: Cannot read properties of undefined (reading 'operator')
at IgxQueryBuilderTreeComponent2.commitOperandEdit (query-builder-tree.component.ts:618:123)
at IgxQueryBuilderTreeComponent2_ng_template_9_div_1_Template_button_click_18_listener (template.html:351:21)
at executeListenerWithErrorHandling (core.mjs:26660:16)

[gedinakova]

On behalf of Javier.
In the dev demo attempt the following initial setup:
const jsonTree = {
"filteringOperands": [
{
"fieldName": "categoryId",
"condition": {
"name": "lessThan",
"isUnary": false,
"iconName": "filter_less_than"
},
"conditionName": "lessThan",
"searchVal": 4,
"searchTree": null,
"ignoreCase": true
},
{
"fieldName": "categoryId",
"condition": {
"name": "greaterThan",
"isUnary": false,
"iconName": "filter_greater_than"
},
"conditionName": "greaterThan",
"searchVal": 6,
"searchTree": null,
"ignoreCase": true
},
{
"fieldName": "name",
"condition": {
"name": "in",
"isUnary": false,
"isNestedQuery": true,
"iconName": "in"
},
"conditionName": "in",
"ignoreCase": true,
"searchVal": null,
"searchTree": {
"filteringOperands": [
{
"fieldName": "name",
"condition": {
"name": "contains",
"isUnary": false,
"iconName": "filter_contains"
},
"conditionName": "contains",
"ignoreCase": true,
"searchVal": "a",
"searchTree": null
},
{
"fieldName": "name",
"condition": {
"name": "contains",
"isUnary": false,
"iconName": "filter_contains"
},
"conditionName": "contains",
"ignoreCase": true,
"searchVal": "b",
"searchTree": null
}
],
"operator": 0,
"entity": "categories",
"returnFields": [
"name",
"categoryId",
"description"
]
}
}
],
"operator": 1,
"entity": "categories",
"returnFields": [
"categoryId",
"description",
"name"
]
};
this.expressionTree = jsonTree as IExpressionTree;

An error is thrown in getFormatter function.

[gedinakova]

@igdmdimitrov After deleting all inner conditions and submitting the parent, the two buttons for adding a group remain.

1. In the dev demo, expand the inner query via "Details" button (without entering edit mode on the parent)
2. Put the first inner condition in edit mode & discard
3. Delete all inner conditons
4. Commit the parent

The buttons stay:
screen-capture (2).webm

[gedinakova]

@igdmdimitrov @ivanvpetrov

1. In the dev demo, change the entity (do not change the return fields)
2. Click one of the add group buttons
3. Discard the empty condition

Result: In addition to removing the empty condition, the return fields are also cleared.

Expected result: Return fields not to be changed.