Updating prod with qb and tile manager samples.

en/components/charts/types/data-pie-chart.md

@@ -163,6 +163,15 @@ In addition to the mouse highlighting, the [`IgxDataPieChartComponent`]({environ
 
 When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control.
 
+The following example demonstrates highlight filtering.
+
+<code-view style="height: 600px" alt="Angular Data Pie Chart Highlight Filtering"
+           data-demos-base-url="{environment:dvDemosBaseUrl}"
+                    iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/highlight-filter"
+                                                 github-src="charts/data-pie-chart/highlight-filter">
+</code-view>
+
+
 <div class="divider--half"></div>
 
 ## Angular Data Pie Chart Animation
@@ -177,8 +186,8 @@ The following sample demonstrates the usage of animation in the [`IgxDataPieChar
 
 <code-view style="height: 600px" alt="Angular Data Pie Chart Animation"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
-                    iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/animation"
-                                                 github-src="charts/data-pie-chart/animation">
+                    iframe-src="{environment:dvDemosBaseUrl}/charts/data-pie-chart/animation-replay"
+                                                 github-src="charts/data-pie-chart/animation-replay">
 </code-view>
 
 

en/components/list.md

@@ -549,46 +549,52 @@ Finally, we need to apply the filtering pipe to our contacts data before we can
 
 ## List Item Selection
 
-As you probably have already noticed, list items do not provide selection states. However, if your application requires your list to keep track of which item is selected, we give you an example of how this can be achieved. All you need to do is keep track of the state somewhere in your component, or in the data the list is bound to.
+The list items have a `selected` property that helps us track which items are "selected". This property allows us to identify and manage the selection status of each item.
 
-Here's an example, in which we apply a background color to the list according to the theme's secondary 500 color, based on state tracking coming from the data the list is bound to:
+Here's an example illustrating how the visual style of the items changes when using the `selected` property:
 
 <code-view style="height: 420px"
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/lists/list-item-selection" >
 </code-view>
 
-What we are doing is we are adding an additional `selected` property to each data member, which defaults to `false`. Upon list item click, we're resetting all the `selected` properties in the data collection and setting the one corresponding to the clicked item to `true`. Based on the selected property, we're applying a css class to the list item which gives it the selected background.
+By default, the `selected` property is set to `false`. We can toggle its value using an inline expression bound to the `(click)` event on each list item, effectively switching the visual state of the item each time it's clicked.
 
 ```html
 <igx-list>
-    <igx-list-item isHeader="true">Contacts</igx-list-item>
-    <igx-list-item [ngClass]="contact.selected ? 'selected' : ''"
-                    (click)="selectItem(contact)"
-                    *ngFor="let contact of contacts | igxFilter: filterContacts;">
+    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
+    @for (contact of contacts | igxFilter: filterContacts; track contact) {
+      <igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
         <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
         <span igxListLineTitle>{{ contact.name }}</span>
         <span igxListLineSubTitle>{{ contact.phone }}</span>
-        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact, $event)">star</igx-icon>
-    </igx-list-item>
-</igx-list>
-```
-
-```typescript
-public selectItem(item) {
-    if (!item.selected) {
-        this.contacts.forEach(c => c.selected = false);
-        item.selected = true;
+        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+          [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+        (mousedown)="mousedown($event)">star</igx-icon>
+      </igx-list-item>
     }
-}
+  </igx-list>
 ```
 
+The list item also exposes a few CSS variables which you can use to style different parts of the selected elements:
+
+- `--item-background-selected`
+- `--item-text-color-selected`
+- `--item-title-color-selected`
+- `--item-action-color-selected`
+- `--item-subtitle-color-selected`
+- `--item-thumbnail-color-selected`
+
 ```scss
-.selected {
-    background-color: hsla(var(--igx-secondary-500))
+igx-list-item {
+  --item-background-selected: var(--ig-secondary-500);
+  --item-title-color-selected: var(--ig-secondary-500-contrast);
+  --item-subtitle-color-selected: var(--ig-info-100);
 }
 ```
 
+If you prefer to use the list theming function, there are parameters available that allow you to style the selected state of the list items. You can find more information about these parameters here: [`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme)
+
 <div class="divider--half"></div>
 
 ## Chat Component

en/components/query-builder-model.md

@@ -0,0 +1,233 @@
+---
+title: Using the Query Builder Model
+_description: Angular Query Builder provides a serializable/deserializable JSON format model, making it easy to build SQL queries. Try it now.
+_keywords: Angular Query Builder component, Angular Query Builder control, Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Angular UI Components, Native Angular Components Library
+---
+
+# Using the Query Builder Model
+Angular Query Builder provides a serializable/deserializable JSON format model, making it easy to build SQL queries.
+
+## Overview
+
+This Angular Query Builder example demonstartes how the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) expression tree could be used to request data from an endpoint [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) and set it as an [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) data source.
+
+<code-view style="height:700px" 
+           no-theming
+           data-demos-base-url="{environment:demosBaseUrl}" 
+           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-request-sample" >
+</code-view>
+
+## Query Builder Model
+In order to set an expression tree to the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html), you need to define a[`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html). Each [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) should have filtering logic that represents how a data record should resolve against the tree and depending on the use case, you could pass a field name, entity name, and an array of return fields. If all fields in a certain entity should be returned, the `returnFields` property could be set to ['*']:
+
+```ts
+const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity A', ['*']);
+```
+Once the root [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) is created, adding conditions, groups or subqueries, could be done by setting its `filteringOperands` property to an array of [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) (single expression or a group) or [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) (subquery).
+Each [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) and [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) should have a `fieldName` that is the name of the column where the filtering expression is placed, and either a `condition` of type [`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) or a `conditionName`. If required, you could also set a `searchVal`, `searchTree` of type [`IExpressionTree`]({environment:angularApiUrl}/interfaces/iexpressiontree.html), and `ignoreCase` properties.
+
+- Defining a simple **expression**:
+```ts
+tree.filteringOperands.push({
+            fieldName: 'Name',
+            conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
+            searchVal: 'a'
+        });
+```
+
+- Defining a **group** of expressions:
+```ts
+const group = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Entity A', ['*']);
+group.filteringOperands.push({
+    fieldName: 'Name',
+    conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
+    searchVal: 'a'
+});
+group.filteringOperands.push({
+    fieldName: 'DateTime created',
+    conditionName: IgxDateFilteringOperand.instance().condition('today').name
+});
+tree.filteringOperands.push(group);
+```
+
+- Defining a **subquery**:
+```ts
+const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity B', ['Number']);
+innerTree.filteringOperands.push({
+    fieldName: 'Number',
+    conditionName: 'equals',
+    searchVal: 123
+});
+ tree.filteringOperands.push({
+    fieldName: 'Id',
+    conditionName: 'inQuery',
+    searchTree: innerTree
+});
+```
+
+The model can be serialized/deserialized in JSON format, making it easily transferable between client and server:
+```ts
+JSON.stringify(tree, null, 2);
+```
+
+## Using Sub-Queries
+
+In the context of the [`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) the *IN / NOT-IN* operators are used with the newly exposed subquery functionality in the *WHERE* clause.
+
+> [!Note]
+> A subquery is a query nested inside another query used to retrieve data that will be used as a condition for the outer query. 
+
+Selecting the *IN / NOT-IN* operator in a `FilteringExpression` would create a subquery. After choosing an entity and a column to return, it checks if the value in the specified column in the outer query matches or not any of the values returned by the subquery.
+
+The following expression tree:
+```ts
+const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Products', ['supplierId']);
+innerTree.filteringOperands.push({
+    fieldName: 'supplierId',
+    conditionName: IgxNumberFilteringOperand.instance().condition('greaterThan').name,
+    searchVal: 10
+});
+
+const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Suppliers', ['supplierId']);
+tree.filteringOperands.push({
+    fieldName: 'supplierId',
+    conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
+    searchTree: innerTree
+});
+```
+Could be serialized by calling:
+```ts
+JSON.stringify(tree, null, 2);
+```
+
+This would be transferred as:
+``` 
+{
+  "filteringOperands": [
+    {
+      "fieldName": "supplierId",
+      "condition": {
+        "name": "inQuery",
+        "isUnary": false,
+        "isNestedQuery": true,
+        "iconName": "in"
+      },
+      "conditionName": "inQuery",
+      "searchVal": null,
+      "searchTree": {
+        "filteringOperands": [
+          {
+            "fieldName": "supplierId",
+            "condition": {
+              "name": "greaterThan",
+              "isUnary": false,
+              "iconName": "filter_greater_than"
+            },
+            "conditionName": "greaterThan",
+            "searchVal": 10,
+            "searchTree": null
+          }
+        ],
+        "operator": 0,
+        "entity": "Suppliers",
+        "returnFields": [
+          "supplierId"
+        ]
+      }
+    }
+  ],
+  "operator": 0,
+  "entity": "Products",
+  "returnFields": [
+    "supplierId"
+  ]
+}
+```
+
+## SQL Example
+
+Let's take a look at a practical example of how the Ignite UI for Angular Query Builder Component can be used to build SQL queries.
+
+In the sample below we have 3 `entities` with names 'Suppliers', 'Categories' and 'Products'.
+
+Let's say we want to find all suppliers who supply products which belong to the 'Beverages' category. Since the data is distributed across all entities, we can take advantage of the *IN* operator and accomplish the task by creating subqueries. Each subquery is represented by a `FilteringExpressionsTree` and can be converted to a SQL query through the `transformExpressionTreeToSqlQuery(tree: IExpressionTree)` method.
+
+First, we create а `categoriesTree` which will return the `categoryId` for the record where `name` is `Beverages`. This is the innermost subquery:
+
+```ts
+const categoriesTree = new FilteringExpressionsTree(0, undefined, 'Categories', ['categoryId']);
+categoriesTree.filteringOperands.push({
+    fieldName: 'name',
+    conditionName: IgxStringFilteringOperand.instance().condition('equals').name,
+    searchVal: 'Beverages'
+});
+```
+
+The corresponding SQL query for this `FilteringExpressionsTree` will look like this:
+
+```
+SELECT categoryId FROM Categories WHERE name = 'Beverages'
+```
+
+Then we create а `productsTree` that will return the `supplierId` field from the `categoriesTree` for the records where the `categoryId` matches the `categoryId` returned by the innermost subquery. We do this by setting the `inQuery` condition and the relevant `searchTree`. This is the middle subquery:
+
+```ts
+const productsTree = new FilteringExpressionsTree(0, undefined, 'Products', ['supplierId']);
+productsTree.filteringOperands.push({
+    fieldName: 'categoryId',
+    conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
+    searchTree: categoriesTree
+});
+```
+
+This is the updated state of the SQL query:
+
+```
+SELECT supplierId FROM Products WHERE categoryId IN (
+    SELECT categoryId FROM Categories WHERE name = 'Beverages'
+  )
+```
+
+Finally, we create а `suppliersTree` that will return all fields from `Suppliers` entity where the `supplierId` matches any of the `supplierId`s returned by the middle subquery. This is the outermost query:
+
+```ts
+const suppliersTree = new FilteringExpressionsTree(0, undefined, 'Suppliers', ['*']);
+suppliersTree.filteringOperands.push({
+    fieldName: 'supplierId',
+    conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
+    searchTree: productsTree
+});
+```
+
+Our SQL query is now complete:
+
+```
+SELECT * FROM Suppliers WHERE supplierId IN (
+  SELECT supplierId FROM Products WHERE categoryId IN (
+      SELECT categoryId FROM Categories WHERE name = 'Beverages'
+    )
+)
+```
+
+Now we can set the `expressionsTree` property of the `IgxQueryBuilderComponent` to `suppliersTree`. Furthermore, every change to the query triggers a new request to the endpoint and the resulting data shown in the grid is refreshed.
+
+<code-view style="height:700px" 
+           no-theming
+           data-demos-base-url="{environment:demosBaseUrl}" 
+           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-sql-sample" >
+</code-view>
+
+## API References
+
+<div class="divider--half"></div>
+
+* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
+* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/index.html#function-query-builder-theme)
+
+## Additional Resources
+
+<div class="divider--half"></div>
+Our community is active and always welcoming to new ideas.
+
+* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)

en/components/themes/palettes.md

@@ -107,11 +107,11 @@ Apart from having a single global palette, you can also create several palettes
 /* styles.css */
 
 .blue-theme {
-    --ig-primary-500: #0008ff;
+  --ig-primary-500: #0008ff;
 }
 
 .red-theme {
-    --ig-primary-500: #ff0400;
+  --ig-primary-500: #ff0400;
 }
 ```
 
@@ -172,12 +172,13 @@ Be mindful when changing the `gray` and `surface` color variants as they are use
 
 So far we've covered the `primary`, `secondary`, `gray`, and `surface` color variants and how you can override them. There are four more colors - `info`, `success`, `warn`, and `error`. They are usually used to set the colors in different states. For example, the `igx-input-group` component uses these colors in its input validation states.
 They can be changed as the other color variants, all we need to do it to set the `500` variant and all of the other varints will be generated.
+
 ```css
 :root {
-    --ig-info-500: #1377d5;
-    --ig-success-500: #4eb862;
-    --ig-warn-500: #faa419;
-    --ig-error-500: #ff134a;
+  --ig-info-500: #1377d5;
+  --ig-success-500: #4eb862;
+  --ig-warn-500: #faa419;
+  --ig-error-500: #ff134a;
 }
 ```