chore(23.0.0): removing old deprecated apis

.agents/agents/theming-styles-agent.md

@@ -66,8 +66,6 @@ If a task also needs TypeScript, template, or behavior changes, coordinate with
 | New visual state / modifier | `_<name>-theme.scss` (new placeholder), `_<name>-component.scss` (new `@include m/e`) |
 | Bug fix in existing styles | The relevant `_<name>-theme.scss` or `_<name>-component.scss` only, unless theme wiring truly changes |
 
-Update additional variant generator files only when the component actually requires them.
-
 ---
 
 ## Non-Negotiable Rules
@@ -91,7 +89,6 @@ described in the contributing guide:
 - `projects/igniteui-angular/core/src/core/styles/components/_index.scss`
 - `projects/igniteui-angular/core/src/core/styles/themes/_core.scss`
 - `projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss`
-- variant generator files when the component requires them
 
 Keep component order consistent with the existing files.
 

.github/themes-contributing.md

@@ -24,10 +24,7 @@ projects/igniteui-angular/core/src/core/styles/
   themes/
     _core.scss                  ← core() mixin: @use + @include every *-component mixin
     generators/
-      _base.scss                ← theme() mixin: calls every *-theme() function (defines the material theme)
-      _bootstrap.scss           ← bootstrap-light-theme() / bootstrap-dark-theme()
-      _fluent.scss              ← fluent-light-theme() / fluent-dark-theme()
-      _indigo.scss              ← indigo-light-theme() / indigo-dark-theme()
+      _base.scss                ← theme() mixin: calls every *-theme() function for any schema (material, bootstrap, fluent, indigo)
     presets/                    ← compilable entry-point SCSS files (one per variant)
   spec/                         ← sass-true unit tests
 ```
@@ -240,10 +237,6 @@ Inside the `theme-internal` mixin body, follow the existing pattern:
 }
 ```
 
-Also add the same block to each of the variant-specific generator files
-(`_bootstrap.scss`, `_fluent.scss`, `_indigo.scss`) if the component has
-variant-specific theme overrides.
-
 > **Order matters**: Add the new `@if is-used(...)` block in the same relative
 > position as the corresponding `@include <name>.component()` call in `_core.scss`.
 > The two files should stay in the same component order for maintainability.

CHANGELOG.md

@@ -3,7 +3,51 @@
 All notable changes for each version of this project will be documented in this file.
 
 
-## Unreleased
+## 23.0.0
+
+### Breaking Changes
+
+The following API, deprecated before 21.1.0, is removed in 23.0.0. Unless noted otherwise, the `ng update` migration for 23.0.0 updates existing usages automatically. Usages in TypeScript are migrated when the type of the object the member is accessed on is known; members with no replacement are reported as warnings by the migration and need to be updated manually.
+
+- `IgxGridComponent`, `IgxTreeGridComponent`, `IgxHierarchicalGridComponent`, `IgxPivotGridComponent`
+    - Removed the `rowID` property of `IGridEditDoneEventArgs`, `IGridEditEventArgs`, `IRowToggleEventArgs`, `IPinRowEventArgs`, `IgxAddRowParent` and `IPathSegment`, deprecated since 17.1.0. Use `rowKey` instead.
+    - Removed the `primaryKey` property of `IGridEditDoneEventArgs`, `IGridEditEventArgs` and `IRowDataEventArgs`, deprecated since 17.1.0. Use `rowKey` instead.
+    - Removed the `data` property of `IRowDataEventArgs`, deprecated since 17.1.0. Use `rowData` instead.
+    - `IRowDataCancelableEventArgs`, the arguments of `rowAdd` and `rowDelete`, no longer extends `IGridEditEventArgs`. It now extends `IRowDataEventArgs` and `CancelableEventArgs` and adds the optional `event` and `valid` set by `rowAdd`. The `cellID`, `column`, `oldValue`, `newValue` and `isAddRow` properties, deprecated since 17.1.0 and not set for these events, are removed. Handlers of `rowAdd` and `rowDelete` typed with `IGridEditEventArgs` need to use `IRowDataCancelableEventArgs` instead.
+    - Removed the `rowID` property of the `igxRowSelector` template context (`IgxRowSelectorTemplateDetails`), deprecated since 15.1.0. Use `key` instead. The migration replaces it in row selector templates.
+    - Removed `shouldGenerate`, deprecated since 18.2.0. Use `autoGenerate` instead.
+    - Removed `filterGlobal()`, deprecated since 19.0.0, from the grids and `IgxFilteringService`. Filter the columns with `filter()` or set `filteringExpressionsTree` instead. The migration reports its usages.
+    - The `parent` property of `IColumnState`, deprecated since 18.2.0, is removed. Column groups are restored by `parentKey`, so states saved before 18.2.0, which identify the parent group only by `parent`, no longer restore the columns into their groups.
+    - The `children` property of `IgxColumnComponent`, `IgxColumnGroupComponent` and `ColumnType`, deprecated since 18.1.0, is no longer part of the public API. Use `childColumns` instead. The migration replaces `children.toArray()` with `childColumns`.
+- `IgxGridToolbarComponent`
+    - Removed the `grid` input, deprecated since 17.1.0. The toolbar resolves its grid automatically, including in hierarchical child grids, and `grid` is now a read-only property. The migration removes the input from templates.
+- `FilteringExpressionsTree`
+    - Removed the `find()` and `findIndex()` methods of `FilteringExpressionsTree` and `IFilteringExpressionsTree`, deprecated since 18.2.0. Use `ExpressionsTreeUtil.find(tree, fieldName)` and `ExpressionsTreeUtil.findIndex(tree, fieldName)` instead. The migration rewrites the calls and imports `ExpressionsTreeUtil`.
+- `IgxForOfDirective`
+    - Removed the `IForOfDataChangingEventArgs` interface, deprecated since 19.2.7. Use `IForOfDataChangeEventArgs` instead, which now declares `containerSize` and `state` itself. The migration renames the type.
+- `IgxCarouselComponent`
+    - Removed the `top` and `bottom` members of `CarouselIndicatorsOrientation`, deprecated since 19.1.0. Use `start` and `end` instead. The migration replaces them in `indicatorsOrientation` template bindings set to `top` or `bottom`, in `CarouselIndicatorsOrientation.top` / `.bottom` references and in string assignments to `indicatorsOrientation`; other bindings containing `'top'` or `'bottom'`, such as conditional expressions, are reported for review.
+    - Removed the `IgxSlideComponent` `tabIndex` property, deprecated since 19.2.0. The active slide still renders `tabindex="0"`.
+- `IgxAvatarComponent`
+    - Removed the `color` and `bgColor` inputs, deprecated since 17.2.0. Style the avatar through `avatar-theme` or CSS instead. The migration replaces them with `[style.color]` and `[style.background]` bindings in templates, which keep the previous result.
+- `IgxIconService`
+    - Removed `registerFamilyAlias()`, deprecated since 18.1.0. Use `setFamily(alias, { className, type })` instead. The migration rewrites standalone calls with string arguments, keeping the defaults of omitted arguments; chained calls, which relied on `registerFamilyAlias` returning the service, and calls with other arguments are reported and need to be updated manually.
+- `IgxPaginatorComponent`
+    - Removed `isFirstPageDisabled` and `isLastPageDisabled`, deprecated since 18.1.0. Use `isFirstPage` and `isLastPage` instead.
+- `IgxComboComponent`
+    - Removed the `searchPlaceholder` input, deprecated since 18.2.0. Set the `igx_combo_filter_search_placeholder` resource string through `resourceStrings` instead, and `igx_combo_addCustomValues_placeholder` when `disableFiltering` and `allowCustomValues` are set. The migration moves the value of the input to these resource strings in templates; a combo that already binds `resourceStrings` is reported instead.
+- `IgxQueryBuilderComponent`
+    - Removed the `fields` input, deprecated since 19.1.0. Use `entities` instead. The migration replaces `fields` in templates with an `entities` binding that wraps the fields in a single entity; assignments in TypeScript are reported.
+- `IgxQueryBuilderHeaderComponent`
+    - Removed the `showLegend` and `resourceStrings` inputs, deprecated since 19.1.0. They had no effect. The migration removes them from templates.
+- **Theming**
+    - Removed the `$default-palette`, `$light-palette` and `$dark-palette` variables, deprecated since 15.0.0. Use `$light-material-palette` and `$dark-material-palette` instead. The migration replaces them, leaving variables with the same names declared by the application untouched.
+    - Removed the `light-theme`, `dark-theme`, `bootstrap-light-theme`, `bootstrap-dark-theme`, `fluent-light-theme`, `fluent-dark-theme`, `indigo-light-theme` and `indigo-dark-theme` mixins, deprecated since 19.0.0. Use the `theme` mixin with the matching schema instead, e.g. `@include theme($palette: $palette, $schema: $light-indigo-schema, $elevations: $indigo-elevations)`. The migration rewrites existing `@include` calls this way. Unlike the removed mixins, `theme` uses the gray and surface colors of the palette as they are: the Bootstrap, Fluent and Indigo mixins took them from the matching preset palette, and `light-theme` / `dark-theme` replaced the default gray. Review the palettes passed to the migrated calls.
+
+### Behavioral Changes
+
+- **Theming**
+    - The prebuilt Indigo themes, `igniteui-indigo-light.css` and `igniteui-indigo-dark.css`, and the Indigo themes of Ignite UI for Web Components grids built from this package, now use the Indigo elevations (`$indigo-elevations`) instead of the Material ones, so the `--ig-elevation-*` shadows match the Indigo design system. Applications that build their own Indigo theme with the `theme` mixin should pass `$elevations: $indigo-elevations` for the same result.
 
 ### Bug Fixes
 

projects/bundle-test/src/styles.scss

@@ -29,7 +29,8 @@ $include: (
 //   igx-stepper
 );
 
-@include light-theme(
+@include theme(
   $palette: $app-palette,
+  $schema: $light-material-schema,
   $exclude: map-keys(map-remove($components, $include...),)
 );

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -265,7 +265,6 @@ export var registerConfig = [
       { name: "gridAPI" },
       { name: "cdr" },
       { name: "navigation", writable: true },
-      { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
       { name: "hiddenColumnsCount" },
@@ -322,7 +321,6 @@ export var registerConfig = [
       "getRowData",
       "sort",
       "filter",
-      "filterGlobal",
       "enableSummaries",
       "disableSummaries",
       "clearFilter",
@@ -472,7 +470,7 @@ export var registerConfig = [
     contentQueries: [
       { property: "hasActions", childType: IgxGridToolbarActionsComponent },
     ],
-    additionalProperties: [{ name: "nativeElement" }],
+    additionalProperties: [{ name: "grid" }, { name: "nativeElement" }],
     methods: [],
     boolProps: ["showProgress"],
     provideAs: IgxToolbarToken,
@@ -561,7 +559,6 @@ export var registerConfig = [
       { name: "navigation", writable: true },
       { name: "validation" },
       { name: "cdr" },
-      { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
       { name: "hiddenColumnsCount" },
@@ -611,7 +608,6 @@ export var registerConfig = [
       "getRowData",
       "sort",
       "filter",
-      "filterGlobal",
       "enableSummaries",
       "disableSummaries",
       "clearFilter",
@@ -787,7 +783,6 @@ export var registerConfig = [
       "getRowData",
       "sort",
       "filter",
-      "filterGlobal",
       "clearFilter",
       "clearSort",
       "reflow",
@@ -865,7 +860,6 @@ export var registerConfig = [
     contentQueries: [],
     additionalProperties: [],
     methods: [],
-    boolProps: ["showLegend"],
   },
   {
     component: IgxRowIslandComponent,
@@ -905,7 +899,6 @@ export var registerConfig = [
       { name: "navigation", writable: true },
       { name: "validation" },
       { name: "cdr" },
-      { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
       { name: "transactions" },
@@ -935,7 +928,6 @@ export var registerConfig = [
       "getRowData",
       "sort",
       "filter",
-      "filterGlobal",
       "enableSummaries",
       "disableSummaries",
       "clearFilter",
@@ -1050,7 +1042,6 @@ export var registerConfig = [
       { name: "gridAPI" },
       { name: "cdr" },
       { name: "navigation", writable: true },
-      { name: "shouldGenerate", writable: true },
       { name: "rowList" },
       { name: "dataRowList" },
       { name: "hiddenColumnsCount" },
@@ -1100,7 +1091,6 @@ export var registerConfig = [
       "getRowData",
       "sort",
       "filter",
-      "filterGlobal",
       "enableSummaries",
       "disableSummaries",
       "clearFilter",

projects/igniteui-angular-elements/src/themes/_util.scss

@@ -103,13 +103,14 @@ $elements-selector-prefix: 'igc';
 /// @requires $light-material-schema
 /// @requires {function} is-component
 /// @requires {function} is-used
-@mixin elements-theme($palette, $schema, $exclude) {
+@mixin elements-theme($palette, $schema, $exclude, $elevations: igx.$material-elevations) {
     @include theme.configure-variable-prefix($elements-var-prefix);
 
     @include igx.theme-internal(
         $palette: $palette,
         $exclude: $exclude,
         $schema: $schema,
+        $elevations: $elevations,
         $theme-handler: meta.get-function('update-element')
     );
 }

projects/igniteui-angular-elements/src/themes/dark/indigo.scss

@@ -15,4 +15,5 @@ $palette: igx.$dark-indigo-palette;
     // $exclude: util.include(vars.$allowed, igx.$components),
     $exclude: vars.$unused-themes,
     $schema: igx.$dark-indigo-schema,
+    $elevations: igx.$indigo-elevations,
 );

projects/igniteui-angular-elements/src/themes/light/indigo.scss

@@ -15,5 +15,6 @@ $palette: igx.$light-indigo-palette;
     // $exclude: util.include(vars.$allowed, igx.$components),
     $exclude: vars.$unused-themes,
     $schema: igx.$light-indigo-schema,
+    $elevations: igx.$indigo-elevations,
 );
 

projects/igniteui-angular-performance/src/styles.scss

@@ -5,7 +5,7 @@
     $font-family: $material-typeface,
     $type-scale: $material-type-scale
 );
-@include theme($default-palette);
+@include theme($palette: $light-material-palette, $schema: $light-material-schema);
 
 html,
 body {

projects/igniteui-angular/avatar/README.md

@@ -5,7 +5,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 
 # Usage
 ```html
-<igx-avatar shape="rounded" icon="person" bgColor="#0375be" data-init="SS">
+<igx-avatar shape="rounded" icon="person" [style.background]="'#0375be'" data-init="SS">
 </igx-avatar>
 ```
 
@@ -16,18 +16,18 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `src` |  string | Set the image source of the avatar. |
 | `initials` | string | Set the initials of the avatar. |
 | `icon` | string | Set the icon of the avatar. Currently all icons from the material icon set are supported. Not applicable for initials and image avatars. |
-| `bgColor` | string | Set the background color of initials or icon avatars. |
-| `color` | string | Set the color of initials or icon avatars. (optional) |
 | `shape` | boolean | Set the shape of the avatar to rounded. The default shape is square. |
 | `size` | string | Set the size of the avatar to either small, medium, or large. |
 
 *You can also set all igx-avatar properties programmatically.
 
+> **Note:** The `color` and `bgColor` inputs were removed in 23.0.0. Use `[style.color]` and `[style.background]` bindings (or the avatar theme) instead.
+
 # Examples
 
 Using `igx-avatar` tag to include it into your app.
 ```html
-<igx-avatar icon="person" bgColor="#0375be" data-init="SS">
+<igx-avatar icon="person" [style.background]="'#0375be'" data-init="SS">
 </igx-avatar>
 ```
 

projects/igniteui-angular/avatar/src/avatar/avatar.component.ts

@@ -137,35 +137,6 @@ export class IgxAvatarComponent implements OnInit {
         return this.shape === 'circle';
     }
 
-    /**
-     * Sets the color of the avatar's initials or icon.
-     *
-     * @example
-     * ```html
-     * <igx-avatar color="blue"></igx-avatar>
-     * ```
-     * @deprecated in version 17.2.0.
-     */
-
-    @HostBinding('style.color')
-    @Input()
-    public color!: string;
-
-    /**
-     * Sets the background color of the avatar.
-     *
-     * @example
-     * ```html
-     * <igx-avatar bgColor="yellow"></igx-avatar>
-     * ```
-     * @igxFriendlyName Background color
-     * @deprecated in version 17.2.0.
-     */
-
-    @HostBinding('style.background')
-    @Input()
-    public bgColor!: string;
-
     /**
      * Sets initials to the avatar.
      *

projects/igniteui-angular/carousel/README.md

@@ -17,7 +17,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `vertical` | boolean | Controls should the carousel be rendered in vertical alignment. Defaults to `false`. |
 | `gesturesSupport` | boolean | Controls should the gestures should be supported. Defaults to `true`. |
 | `maximumIndicatorsCount` | number | The number of visible indicators. Defaults to `10`. |
-| `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls the orientation of the indicators. Defaults to `end`. |
+| `indicatorsOrientation` | CarouselIndicatorsOrientation | Controls the position of the indicators. Can be `start` or `end`. Defaults to `end`. |
 | `animationType` | CarouselAnimationType | Controls what animation should be played when slides are changing. Defaults to `slide`. |
 | `total` | number | The number of slides the carousel currently has.  |
 | `current` | number | The index of the slide currently showing. |

projects/igniteui-angular/carousel/src/carousel/carousel.component.spec.ts

@@ -497,6 +497,9 @@ describe('Carousel', () => {
 
             expect(+tabIndex).toBe(0);
             expect(slide.nativeElement.getAttribute('role')).toEqual(expectedRole);
+            carousel.slides.filter(s => !s.active).forEach(s => {
+                expect(s.nativeElement.hasAttribute('tabindex')).toBeFalse();
+            });
 
             const tabs = carousel.nativeElement.querySelectorAll('[role="tab"]');
             const slides = carousel.nativeElement.querySelectorAll('[role="tabpanel"]');

projects/igniteui-angular/carousel/src/carousel/carousel.component.ts

@@ -448,7 +448,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         return {
             'igx-carousel-indicators': true,
             ['igx-carousel-indicators--focused']: this._hasKeyboardFocusOnIndicators,
-            [`igx-carousel-indicators--${this.getIndicatorsClass()}`]: true,
+            [`igx-carousel-indicators--${this.indicatorsOrientation}`]: true,
             'igx-carousel-indicators--vertical': this.isVertical
         };
     }
@@ -983,17 +983,6 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         return this._indicators.toArray();
     }
 
-    private getIndicatorsClass(): string {
-        switch (this.indicatorsOrientation) {
-            case CarouselIndicatorsOrientation.top:
-                return CarouselIndicatorsOrientation.start;
-            case CarouselIndicatorsOrientation.bottom:
-                return CarouselIndicatorsOrientation.end;
-            default:
-                return this.indicatorsOrientation;
-        }
-    }
-
     private getNextIndex(): number {
         return (this.current + 1) % this.total;
     }

projects/igniteui-angular/carousel/src/carousel/enums.ts

@@ -7,14 +7,6 @@ export const CarouselAnimationType = {
 export type CarouselAnimationType = (typeof CarouselAnimationType)[keyof typeof CarouselAnimationType];
 
 export const CarouselIndicatorsOrientation = {
-    /**
-     * @deprecated in version 19.1.0. Use `end` instead.
-     */
-    bottom: 'bottom',
-    /**
-     * @deprecated in version 19.1.0. Use `start` instead.
-     */
-    top: 'top',
     start: 'start',
     end: 'end'
 } as const;

projects/igniteui-angular/carousel/src/carousel/slide.component.ts

@@ -18,7 +18,11 @@ import { CarouselAnimationDirection, IgxSlideComponentBase } from './carousel-ba
     selector: 'igx-slide',
     templateUrl: 'slide.component.html',
     changeDetection: ChangeDetectionStrategy.Eager,
-    standalone: true
+    standalone: true,
+    host: {
+        // The active slide (tabpanel) is part of the tab sequence after the indicators (tablist).
+        '[attr.tabindex]': 'active ? 0 : null'
+    }
 })
 export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSlideComponentBase {
     private elementRef = inject(ElementRef);
@@ -50,20 +54,6 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
     @Input()
     public total!: number;
 
-    /**
-     * Returns the `tabIndex` of the slide component.
-     * ```typescript
-     * let tabIndex =  this.carousel.tabIndex;
-     * ```
-     *
-     * @memberof IgxSlideComponent
-     * @deprecated in version 19.2.0.
-     */
-    @HostBinding('attr.tabindex')
-    public get tabIndex() {
-        return this.active ? 0 : null;
-    }
-
     /**
      * @hidden
      */