Merge branch 'master' into didimmova/update-contrast-color-docs

Author: didimmova

en/components/carousel.md

@@ -119,9 +119,37 @@ export class HomeComponent {
 ### Configuring IgxCarousel
 <div class="divider--half"></div>
 
-By default, the Carousel in Angular has its **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** input property set to `true` ( *looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action* ). The looping behavior can be disabled by setting the value of the `loop` input to `false`.
+By default, the Carousel in Angular has its [`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop) input property set to `true` (*looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action*). The looping behavior can be disabled by setting the value of the [`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop) input to `false`.
 
-To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by setting the `indicators` input property to `false`.
+```html
+<igx-carousel [loop]="false">
+    ...
+</igx-carousel>
+```
+
+To keep track of each slide index, the carousel has indicators that are positioned at the `end` of the carousel by default. In order to change this behavior, use the [`indicatorsOrientation`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `start`.
+
+```html
+<igx-carousel indicatorsOrientation="start">
+    ...
+</igx-carousel>
+```
+
+By default, the [`IgxCarousel`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html) displays its navigation buttons and indicators. Use the [`indicators`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicators) property to hide the indicators and the [`navigation`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#navigation) property to hide the navigation buttons.
+
+```html
+<igx-carousel [navigation]="false" [indicators]="false">
+    ...
+</igx-carousel>
+```
+
+The [`IgxCarousel`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html) supports vertical mode. Use the [`vertical`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#vertical) property to enable it.
+
+```html
+<igx-carousel [vertical]="true">
+    ...
+</igx-carousel>
+```
 
 ### Custom indicators
 <div class="divider--half"></div>

en/components/charts/features/chart-data-selection.md

@@ -89,6 +89,13 @@ The matcher is ideal for using in charts, such as the [`IgxCategoryChartComponen
 
 For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set.
 
+<code-view style="height: 500px" alt="Angular Selection Matcher"
+           data-demos-base-url="{environment:dvDemosBaseUrl}"
+                    iframe-src="{environment:dvDemosBaseUrl}/charts/category-chart/selection-matcher"
+                                                 github-src="charts/category-chart/selection-matcher">
+</code-view>
+
+
 ## API References
 
 The following is a list of API members mentioned in the above sections:

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/general-changelog-dv.md

@@ -16,6 +16,35 @@ All notable changes for each version of Ignite UI for Angular are documented on
 
 *   [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master)
 
+## **19.0.1 (February 2025)**
+
+### Enhancements
+
+#### Toolbar
+
+*   Added new `GroupHeaderTextStyle` property to [`IgxToolbarComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html) and [`IgxToolPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolpanelcomponent.html). If set, it will apply to all [`IgxToolActionGroupHeaderComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactiongroupheadercomponent.html) actions.
+*   Added new property on [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) called [`titleHorizontalAlignment`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#titleHorizontalAlignment) which controls the horizontal alignment of the title text.
+*   Added new property on [`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) called `ItemSpacing` which controls the spacing between items inside the panel.
+
+### Bug Fixes
+
+The following table lists the bug fixes made for the Ignite UI for Angular toolset for this release:
+
+| Bug Number | Control | Description      |
+|------------|---------|------------------|
+|26218|Excel Library|Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file|
+|30286|IgxDataChart|Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
+|32906|IgxDataChart|IgxDataChart is showing two xAxis on the top|
+|33605|IgxDataChart|ScatterLineSeries is not showing the color of the line correctly in the legend|
+|34053|IgxRadialGauge|The position of the scale label is shifted|
+|34083|Excel Library|TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file|
+|34776|IgxDataChart|Repeatedly showing and hiding the IgxDataChart causes memory leakage in JS Heap|
+|35495|Excel Library|Pictures in cells are lost when a template file is loaded|
+|35496|IgxSpreadsheet|Error when setting styles in Excel with images|
+|35498|IgxDataChart|Tooltips for the series specified in IncludedSeries are not displayed|
+|36176|Excel Library|Exception occurs when loading an Excel workbook that has a LET function|
+|36379|Excel Library|Colors with any alpha channel in an excel workbook fail to load|
+
 ## **19.0.0 (January 2025)**
 
 *   Angular 19 support.

en/components/grids_templates/state-persistence.md

@@ -38,7 +38,7 @@ _canonicalLink: grid/state-persistence
 ## Supported Features
 [`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) directive supports saving and restoring the state of the following features:
 
-@@if (igxName !== 'IgxHierarchicalGrid' && igxName !== 'IgxPivotGrid') {
+@@if (igxName === 'IgxGrid') {
 
 * `Sorting`
 * `Filtering`
@@ -60,6 +60,24 @@ _canonicalLink: grid/state-persistence
     * Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence.md#restoring-columns) section.
 }
 
+@@if (igxName === 'IgxTreeGrid') {
+
+* `Sorting`
+* `Filtering`
+* `Advanced Filtering`
+* `Paging`
+* `Cell Selection`
+* `Row Selection`
+* `Column Selection`
+* `Row Pinning`
+* `Expansion`
+* `Columns`
+    * **NEW**: Multi column headers are now supported out of the box
+    * Columns order
+    * Column properties defined by the [`IColumnState`]({environment:angularApiUrl}/interfaces/icolumnstate.html) interface.
+    * Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence.md#restoring-columns) section.
+}
+
 @@if (igxName === 'IgxHierarchicalGrid') {
 * `RowIslands`
     * saving/restoring features for all child grids down the hierarchy

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