Merge branch 'master' into dpetev/control-flow-test-track-leftovers

Author: Konstantin Dinev

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+
+## 19.2.0
+### General
+- `IgxCarousel`
+    - Removed deprecated property `keyboardSupport`.
+- `IgxSlide`
+    - **Deprecation** - `tabIndex` has been deprecated and will be removed in a future version.
+
 ## 19.1.1
 ### New Features
 - IgxListItem
@@ -11,6 +19,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxCarousel`
     - **Behavioral Changes** - the `maximumIndicatorsCount` input property now defaults to `10`.
     - **Deprecation** - `CarouselIndicatorsOrientation` enum members `top` and `bottom` have been deprecated and will be removed in a future version. Use `start` and `end` instead.
+
 ### New Features
 - `IgxBanner`
     - Introduced a new `expanded` input property, enabling dynamic control over the banner's state. The banner can now be programmatically set to expanded (visible) or collapsed (hidden) both initially and at runtime. Animations will trigger during runtime updates — the **open animation** plays when `expanded` is set to `true`, and the **close animation** plays when set to `false`. However, no animations will trigger when the property is set initially.

ROADMAP.md

@@ -2,21 +2,25 @@
 
 # Current Milestone
 
-## Milestone 36,  version 19.1 (Due by Feb, 2025)
+## Milestone 37,  version 19.2 (Due by Mar, 2025)
 
-1. Query Builder multi-table query support [#14979](https://github.com/IgniteUI/igniteui-angular/issues/14979)
-2. IgxBannerComponent - Support collapsed input [#14890](https://github.com/IgniteUI/igniteui-angular/issues/14890)
-3. Carousel component vertical orientation support [#15025](https://github.com/IgniteUI/igniteui-angular/issues/15025)
+1. Tile Manager - layout component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
+2. SSR Grid Improvements - [15202](https://github.com/IgniteUI/igniteui-angular/issues/15202)
 
 ## Going down the road
 
 1. Provide an option to modify the default enter edit mode conditions, to e.g. allow edit mode start on a single click [#14658](https://github.com/IgniteUI/igniteui-angular/issues/14658)
 2. Provide an excel-like navigation mode for editing where all arrow keys navigate the cell in edit mode. [#14659](https://github.com/IgniteUI/igniteui-angular/issues/14659)
 3. Extend the 18.2 editorOptions property to allow modifying numeric editors to not change the value on up/down arrow press [#14660](https://github.com/IgniteUI/igniteui-angular/issues/14660)
-4. Tile Manager - layout component [#239](https://github.com/IgniteUI/igniteui-angular/issues/239)
 
 # Previous Milestone
 
+## Milestone 36,  version 19.1 (Released Feb 27th, 2025)
+
+1. **[DONE]** Query Builder multi-table query support [#14979](https://github.com/IgniteUI/igniteui-angular/issues/14979)
+2. **[DONE]** IgxBannerComponent - Support collapsed input [#14890](https://github.com/IgniteUI/igniteui-angular/issues/14890)
+3. **[DONE]** Carousel component vertical orientation support [#15025](https://github.com/IgniteUI/igniteui-angular/issues/15025)
+
 ## Milestone 35, version 19.0 (Released Nov 25th, 2024)
 
 1. Angular 19 support

projects/igniteui-angular-elements/src/public_api.ts

@@ -11,13 +11,14 @@ import { IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotNumericAggregate, Igx
 import { IgxPivotDateDimension } from 'projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-dimensions';
 import { PivotDimensionType } from 'projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface';
 import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxTimeSummaryOperand } from 'projects/igniteui-angular/src/lib/grids/summaries/grid-summary';
+import { HorizontalAlignment, VerticalAlignment } from 'projects/igniteui-angular/src/lib/services/overlay/utilities';
 
 
 /** Export Public API, TODO: reorganize, Generate all w/ renames? */
 export {
     //Grids API
     FilteringExpressionsTree as IgcFilteringExpressionsTree,
-    FilteringLogic, // TODO: already exported by analyzer?
+    FilteringLogic,
     FilteringExpressionsTreeType,
     IgxFilteringOperand as IgcFilteringOperand,
     IgxBooleanFilteringOperand as IgcBooleanFilteringOperand,
@@ -48,5 +49,9 @@ export {
     RowPinningPosition,
     GridPagingMode,
     DropPosition,
-    PivotDimensionType
+    PivotDimensionType,
+
+    // overlay position settings (used in grids, paginator, toolbar)
+    HorizontalAlignment,
+    VerticalAlignment,
 }

projects/igniteui-angular/migrations/migration-collection.json

@@ -216,6 +216,11 @@
             "version": "19.1.1",
             "description": "Updates Ignite UI for Angular from v19.1.0 to v19.1.1",
             "factory": "./update-19_1_1"
+        },
+        "migration-44": {
+            "version": "19.2.0",
+            "description": "Updates Ignite UI for Angular from v19.1.1 to v19.2.0",
+            "factory": "./update-19_2_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-19_2_0/changes/inputs.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "keyboardSupport",
+            "remove": true,
+            "owner": {
+                "selector": "igx-carousel",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-19_2_0/index.spec.ts

@@ -0,0 +1,37 @@
+import * as path from 'path';
+
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import { setupTestTree } from '../common/setup.spec';
+
+const version = '19.2.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    beforeEach(() => {
+        appTree = setupTestTree();
+    });
+
+    const migrationName = 'migration-44';
+
+    it('should remove igx-caroursel property `keyboardSupport` in template', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-carousel [keyboardSupport]="true"></igx-carousel>
+        <igx-carousel [keyboardSupport]="false"></igx-carousel>
+        <igx-carousel [keyboardSupport]="myProp"></igx-carousel>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-carousel></igx-carousel>
+        <igx-carousel></igx-carousel>
+        <igx-carousel></igx-carousel>
+        `
+        );
+    });
+});

projects/igniteui-angular/migrations/update-19_2_0/index.ts

@@ -0,0 +1,14 @@
+import type {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '19.2.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const update = new UpdateChanges(__dirname, host, context);
+    update.applyChanges();
+};

projects/igniteui-angular/src/lib/carousel/README.md

@@ -15,7 +15,6 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `navigation` | boolean | Controls should the carousel render the left/right navigation buttons. Defaults to `true`. |
 | `indicators` | boolean | Controls should the carousel render the indicators. Defaults to `true`. |
 | `vertical` | boolean | Controls should the carousel be rendered in vertical alignment. Defaults to `false`. |
-| `keyboardSupport` | boolean | Controls should the keyboard navigation should be supported. 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`. |
@@ -39,10 +38,14 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 | `select(slide: IgxSlide, direction: Direction)`| void | Selects the slide and the direction to transition to. Emits `slideChanged` event. |
 
 ### Keyboard navigation
-Keyboard navigation will be enabled when the **IgxCarousel** component is focused and `keyboardSupport` property is set to `true`:
-- Arrow keys will navigate through the slides.
-- `Home` will focus the first slide inside the carousel view.
-- `End` will focus the last slide inside the carousel view.
+
+- Navigation buttons
+  - `Space`/`Enter` key - navigates to the next/previous slide.
+- Indicators
+  - `ArrowLeft` key - navigates to the previous (next in Right-to-Left mode) slide.
+  - `ArrowRight` key - navigates to the next (previous in Right-to-Left mode) slide.
+  - `Home` key - navigates to the first (last in Right-to-Left mode) slide.
+  - `End` key - navigates to the last (first in Right-to-Left mode) slide.
 
 ### Templates
 The **IgxCarousel** supports templating indicators and navigation buttons

projects/igniteui-angular/src/lib/carousel/carousel-base.ts

@@ -1,9 +1,9 @@
 import { AnimationReferenceMetadata, useAnimation } from '@angular/animations';
-import { ChangeDetectorRef, EventEmitter, Inject, InjectionToken } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, Inject } from '@angular/core';
 import { IgxAngularAnimationService } from '../services/animation/angular-animation-service';
 import { AnimationPlayer, AnimationService } from '../services/animation/animation';
 import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
-import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
+import { CarouselAnimationType } from './enums';
 
 export enum Direction { NONE, NEXT, PREV }
 
@@ -12,37 +12,6 @@ export interface CarouselAnimationSettings {
     leaveAnimation: AnimationReferenceMetadata;
 }
 
-export interface ICarouselComponentBase {
-    id: string;
-    role: string;
-    cssClass: string;
-    loop: boolean;
-    pause: boolean;
-    navigation: boolean;
-    indicators: boolean;
-    vertical: boolean;
-    keyboardSupport: boolean;
-    gesturesSupport: boolean;
-    maximumIndicatorsCount: number;
-    indicatorsOrientation: CarouselIndicatorsOrientation;
-    animationType: CarouselAnimationType;
-    total: number;
-    current: number;
-    interval: number;
-    slideChanged: EventEmitter<any>;
-    slideAdded: EventEmitter<any>;
-    slideRemoved: EventEmitter<any>;
-    carouselPaused: EventEmitter<any>;
-    carouselPlaying: EventEmitter<any>;
-    next(): void;
-    prev(): void;
-    play(): void;
-    stop(): void
-}
-
-/** @hidden */
-export const IGX_CAROUSEL_COMPONENT = /*@__PURE__*/new InjectionToken<ICarouselComponentBase>('IgxCarouselToken');
-
 /** @hidden */
 export interface IgxSlideComponentBase {
     direction: Direction;

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

@@ -186,7 +186,7 @@ describe('Carousel', () => {
             expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(3);
 
             spyOn(carousel.slideAdded, 'emit');
-            const newSlide = new IgxSlideComponent(null, null);
+            const newSlide = new IgxSlideComponent(null);
             carousel.add(newSlide);
             fixture.detectChanges();
             args = {
@@ -233,37 +233,41 @@ describe('Carousel', () => {
         it('keyboard navigation test', () => {
             spyOn(carousel.slideChanged, 'emit');
             carousel.pause = true;
-            carousel.keyboardSupport = true;
+            const indicators = HelperTestFunctions.getIndicatorsContainer(fixture);
+
+            indicators.dispatchEvent(new KeyboardEvent('keyup', { key: 'Tab' }));
+            fixture.detectChanges();
+            expect(indicators.classList).toContain('igx-carousel-indicators--focused');
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 1);
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 2);
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 3);
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 0);
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 3);
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 2);
 
-            UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('Home', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 0);
 
-            UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true);
+            UIInteractions.triggerKeyDownEvtUponElem('End', indicators, true);
             fixture.detectChanges();
             HelperTestFunctions.verifyActiveSlide(carousel, 3);
 
@@ -402,39 +406,6 @@ describe('Carousel', () => {
             expect(indicatorsContainer).toBeDefined();
         });
 
-        it('keyboardSupport changes support for keyboard navigation', () => {
-            expect(carousel.keyboardSupport).toBe(false);
-            carousel.select(carousel.get(1));
-            fixture.detectChanges();
-
-            spyOn(carousel.slideChanged, 'emit');
-
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
-            fixture.detectChanges();
-            HelperTestFunctions.verifyActiveSlide(carousel, 1);
-
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', carousel.nativeElement, true);
-            fixture.detectChanges();
-            HelperTestFunctions.verifyActiveSlide(carousel, 1);
-
-            UIInteractions.triggerKeyDownEvtUponElem('End', carousel.nativeElement, true);
-            fixture.detectChanges();
-            HelperTestFunctions.verifyActiveSlide(carousel, 1);
-
-            UIInteractions.triggerKeyDownEvtUponElem('Home', carousel.nativeElement, true);
-            fixture.detectChanges();
-            HelperTestFunctions.verifyActiveSlide(carousel, 1);
-
-            expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(0);
-            carousel.keyboardSupport = true;
-            fixture.detectChanges();
-
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', carousel.nativeElement, true);
-            fixture.detectChanges();
-            HelperTestFunctions.verifyActiveSlide(carousel, 2);
-            expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(1);
-        });
-
         it('should stop/play on mouse enter/leave ', () => {
             carousel.interval = 1000;
             carousel.play();