refactor(carousel): IgxCarouselDirection -> CarouselAnimationDirection

damyanpetev · damyanpetev · commit baf75cf99da2 · 2025-11-19T19:13:09.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,7 +36,7 @@ ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0 --migrate-im
 - `IgxRadioGroupDirective` → `igniteui-angular/radio`
 
 **Type Renames (to avoid conflicts):**
-- `Direction` → `IgxCarouselDirection` (in carousel)
+- `Direction` → `CarouselAnimationDirection` (in carousel)
 
 **Benefits:**
 - Better tree-shaking - unused components won't be bundled
diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts b/projects/igniteui-angular/carousel/src/carousel/carousel-base.ts
@@ -5,7 +5,7 @@ import { AnimationPlayer, AnimationService } from 'igniteui-angular/core';
 import { fadeIn, slideInLeft } from 'igniteui-angular/animations';
 import { CarouselAnimationType } from './enums';
 
-export enum IgxCarouselDirection { NONE, NEXT, PREV }
+export enum CarouselAnimationDirection { NONE, NEXT, PREV }
 
 export interface CarouselAnimationSettings {
     enterAnimation: AnimationReferenceMetadata;
@@ -14,7 +14,7 @@ export interface CarouselAnimationSettings {
 
 /** @hidden */
 export interface IgxSlideComponentBase {
-    direction: IgxCarouselDirection;
+    direction: CarouselAnimationDirection;
     previous: boolean;
 }
 
diff --git a/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts b/projects/igniteui-angular/carousel/src/carousel/carousel.component.ts
@@ -31,7 +31,7 @@ import { CarouselResourceStringsEN, ICarouselResourceStrings } from 'igniteui-an
 import { first, IBaseEventArgs, last, PlatformUtil } from 'igniteui-angular/core';
 import { IgxAngularAnimationService } from 'igniteui-angular/core';
 import { AnimationService } from 'igniteui-angular/core';
-import { IgxCarouselDirection, IgxCarouselComponentBase } from './carousel-base';
+import { CarouselAnimationDirection, IgxCarouselComponentBase } from './carousel-base';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
 import { IgxSlideComponent } from './slide.component';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -664,7 +664,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         if (this.incomingSlide) {
             this.resetSlideStyles(this.incomingSlide);
             if (slideSize / 2 < delta || velocity > 1) {
-                this.incomingSlide.direction = eventDelta < 0 ? IgxCarouselDirection.NEXT : IgxCarouselDirection.PREV;
+                this.incomingSlide.direction = eventDelta < 0 ? CarouselAnimationDirection.NEXT : CarouselAnimationDirection.PREV;
                 this.incomingSlide.previous = false;
 
                 this.animationPosition = this.animationType === CarouselAnimationType.fade ?
@@ -675,7 +675,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
                 }
                 this.incomingSlide.active = true;
             } else {
-                this.currentItem.direction = eventDelta > 0 ? IgxCarouselDirection.NEXT : IgxCarouselDirection.PREV;
+                this.currentItem.direction = eventDelta > 0 ? CarouselAnimationDirection.NEXT : CarouselAnimationDirection.PREV;
                 this.previousItem = this.incomingSlide;
                 this.previousItem.previous = true;
                 this.animationPosition = this.animationType === CarouselAnimationType.fade ?
@@ -819,22 +819,22 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
      * Switches to the passed-in slide with a given `direction`.
      * ```typescript
      * const slide = this.carousel.get(2);
-     * this.carousel.select(slide, IgxCarouselDirection.NEXT);
+     * this.carousel.select(slide, CarouselAnimationDirection.NEXT);
      * ```
      *
      * @memberOf IgxCarouselComponent
      */
-    public select(slide: IgxSlideComponent, direction?: IgxCarouselDirection): void;
+    public select(slide: IgxSlideComponent, direction?: CarouselAnimationDirection): void;
     /**
      * Switches to slide by index with a given `direction`.
      * ```typescript
-     * this.carousel.select(2, IgxCarouselDirection.NEXT);
+     * this.carousel.select(2, CarouselAnimationDirection.NEXT);
      * ```
      *
      * @memberOf IgxCarouselComponent
      */
-    public select(index: number, direction?: IgxCarouselDirection): void;
-    public select(slideOrIndex: IgxSlideComponent | number, direction: IgxCarouselDirection = IgxCarouselDirection.NONE): void {
+    public select(index: number, direction?: CarouselAnimationDirection): void;
+    public select(slideOrIndex: IgxSlideComponent | number, direction: CarouselAnimationDirection = CarouselAnimationDirection.NONE): void {
         const slide = typeof slideOrIndex === 'number'
             ? this.get(slideOrIndex)
             : slideOrIndex;
@@ -860,7 +860,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
             this.stop();
             return;
         }
-        return this.select(this.get(index), IgxCarouselDirection.NEXT);
+        return this.select(this.get(index), CarouselAnimationDirection.NEXT);
     }
 
     /**
@@ -878,7 +878,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
             this.stop();
             return;
         }
-        return this.select(this.get(index), IgxCarouselDirection.PREV);
+        return this.select(this.get(index), CarouselAnimationDirection.PREV);
     }
 
     /**
@@ -1044,9 +1044,9 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
 
     private onSlideActivated(slide: IgxSlideComponent) {
         if (slide.active && slide !== this.currentItem) {
-            if (slide.direction === IgxCarouselDirection.NONE) {
+            if (slide.direction === CarouselAnimationDirection.NONE) {
                 const newIndex = slide.index;
-                slide.direction = newIndex > this.current ? IgxCarouselDirection.NEXT : IgxCarouselDirection.PREV;
+                slide.direction = newIndex > this.current ? CarouselAnimationDirection.NEXT : CarouselAnimationDirection.PREV;
             }
 
             if (this.currentItem) {
diff --git a/projects/igniteui-angular/carousel/src/carousel/public_api.ts b/projects/igniteui-angular/carousel/src/carousel/public_api.ts
@@ -2,7 +2,7 @@ import { IgxCarouselComponent } from './carousel.component';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
 import { IgxSlideComponent } from './slide.component';
 
-export { IgxCarouselDirection, IgxCarouselComponentBase, IgxSlideComponentBase, CarouselAnimationSettings } from './carousel-base';
+export { CarouselAnimationDirection, IgxCarouselComponentBase, IgxSlideComponentBase, CarouselAnimationSettings } from './carousel-base';
 export * from './carousel.component';
 export * from './slide.component';
 export * from './carousel.directives';
diff --git a/projects/igniteui-angular/carousel/src/carousel/slide.component.ts b/projects/igniteui-angular/carousel/src/carousel/slide.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnDestroy, Input, HostBinding, Output, EventEmitter, ElementRef, AfterContentChecked, booleanAttribute } from '@angular/core';
 import { Subject } from 'rxjs';
-import { IgxCarouselDirection, IgxSlideComponentBase } from './carousel-base';
+import { CarouselAnimationDirection, IgxSlideComponentBase } from './carousel-base';
 
 /**
  * A slide component that usually holds an image and/or a caption text.
@@ -42,7 +42,7 @@ export class IgxSlideComponent implements AfterContentChecked, OnDestroy, IgxSli
      *
      * @memberOf IgxSlideComponent
      */
-    @Input() public direction: IgxCarouselDirection;
+    @Input() public direction: CarouselAnimationDirection;
 
     @Input()
     public total: number;
diff --git a/projects/igniteui-angular/migrations/update-21_0_0/README.md b/projects/igniteui-angular/migrations/update-21_0_0/README.md
@@ -31,7 +31,7 @@ The following directives have been moved to new entry points:
 
 The following types have been renamed to avoid conflicts:
 
-- `Direction` → `IgxCarouselDirection` (carousel)
+- `Direction` → `CarouselAnimationDirection` (carousel)
 
 ### Example
 
@@ -48,9 +48,8 @@ import {
 **After:**
 ```typescript
 import { DisplayDensity } from 'igniteui-angular/core';
-import { IgxGridComponent } from 'igniteui-angular/grids';
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxInputDirective } from 'igniteui-angular/input-group';
-import { IgxCarouselDirection } from 'igniteui-angular/carousel';
 ```
 
 ### Note
diff --git a/projects/igniteui-angular/migrations/update-21_0_0/changes/classes.json b/projects/igniteui-angular/migrations/update-21_0_0/changes/classes.json
@@ -3,7 +3,7 @@
     "changes": [
         {
             "name": "Direction",
-            "replaceWith": "IgxCarouselDirection"
+            "replaceWith": "CarouselAnimationDirection"
         }
     ]
 }
diff --git a/projects/igniteui-angular/migrations/update-21_0_0/index.ts b/projects/igniteui-angular/migrations/update-21_0_0/index.ts
@@ -148,7 +148,7 @@ const ENTRY_POINT_MAP = new Map<string, string>([
     ['IgxCarouselComponent', 'carousel'],
     ['IgxCarouselModule', 'carousel'],
     ['IgxSlideComponent', 'carousel'],
-    ['IgxCarouselDirection', 'carousel'], // Renamed from Direction
+    ['CarouselAnimationDirection', 'carousel'], // Renamed from Direction
     ['ISlideEventArgs', 'carousel'],
     ['ISlideCarouselBaseEventArgs', 'carousel'],
     ['CarouselAnimationType', 'carousel'],
@@ -444,7 +444,7 @@ const ENTRY_POINT_MAP = new Map<string, string>([
 
 // Type renames (old name -> new name and entry point)
 const TYPE_RENAMES = new Map<string, { newName: string, entryPoint: string }>([
-    ['Direction', { newName: 'IgxCarouselDirection', entryPoint: 'carousel' }],
+    ['Direction', { newName: 'CarouselAnimationDirection', entryPoint: 'carousel' }],
 ]);
 
 function migrateImportDeclaration(node: ts.ImportDeclaration, sourceFile: ts.SourceFile): { start: number, end: number, replacement: string } | null {
@@ -642,7 +642,7 @@ export default (options: MigrationOptions = {}): Rule => async (host: Tree, cont
         context.logger.info('  - IgxAutocompleteDirective moved to igniteui-angular/drop-down');
         context.logger.info('  - IgxRadioGroupDirective moved to igniteui-angular/radio');
         context.logger.info('Type renames:');
-        context.logger.info('  - Direction → IgxCarouselDirection');
+        context.logger.info('  - Direction → CarouselAnimationDirection');
     } else {
         context.logger.info('Skipping import migration. You can continue using the main entry point.');
         context.logger.info('Note: The library now supports granular entry points for better tree-shaking.');
diff --git a/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts b/projects/igniteui-angular/stepper/src/stepper/step/step.component.ts
@@ -24,7 +24,7 @@ import { IgxStepperService } from '../stepper.service';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { IgxRippleDirective } from 'igniteui-angular/directives';
 import { ToggleAnimationPlayer, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';
-import { IgxCarouselDirection, IgxSlideComponentBase } from 'igniteui-angular/carousel';
+import { CarouselAnimationDirection, IgxSlideComponentBase } from 'igniteui-angular/carousel';
 import { AnimationService, IgxAngularAnimationService, ɵIgxDirectionality, PlatformUtil } from 'igniteui-angular/core';
 
 let NEXT_ID = 0;
@@ -301,11 +301,11 @@ export class IgxStepComponent extends ToggleAnimationPlayer implements IgxStep,
     }
 
     /** @hidden @internal */
-    public get direction(): IgxCarouselDirection {
+    public get direction(): CarouselAnimationDirection {
         return this.stepperService.previousActiveStep
             && this.stepperService.previousActiveStep.index > this.index
-            ? IgxCarouselDirection.PREV
-            : IgxCarouselDirection.NEXT;
+            ? CarouselAnimationDirection.PREV
+            : CarouselAnimationDirection.NEXT;
     }
 
     /** @hidden @internal */
diff --git a/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts b/projects/igniteui-angular/stepper/src/stepper/stepper.common.ts
@@ -7,7 +7,7 @@ import {
     IgxStepIndicatorDirective, IgxStepInvalidIndicatorDirective
 } from './stepper.directive';
 import { ToggleAnimationPlayer, ToggleAnimationSettings } from 'igniteui-angular/expansion-panel';
-import { CarouselAnimationType, IgxCarouselComponentBase, IgxCarouselDirection } from 'igniteui-angular/carousel';
+import { CarouselAnimationType, IgxCarouselComponentBase, CarouselAnimationDirection } from 'igniteui-angular/carousel';
 
 // Component interfaces
 export interface IgxStepper extends IgxCarouselComponentBase {
@@ -71,7 +71,7 @@ export interface IgxStep extends ToggleAnimationPlayer {
     /** @hidden @internal */
     titlePositionTop: string;
     /** @hidden @internal */
-    direction: IgxCarouselDirection;
+    direction: CarouselAnimationDirection;
     /** @hidden @internal */
     isAccessible: boolean;
     /** @hidden @internal */
diff --git a/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts b/projects/igniteui-angular/tabs/src/tabs/tab-item.directive.ts
@@ -1,6 +1,6 @@
 import { ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, ViewChild, booleanAttribute } from '@angular/core';
 import { IgxTabHeaderBase, IgxTabItemBase, IgxTabContentBase, IgxTabsBase } from './tabs.base';
-import { IgxCarouselDirection, IgxSlideComponentBase } from 'igniteui-angular/carousel';
+import { CarouselAnimationDirection, IgxSlideComponentBase } from 'igniteui-angular/carousel';
 
 @Directive()
 export abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideComponentBase {
@@ -34,7 +34,7 @@ export abstract class IgxTabItemDirective implements IgxTabItemBase, IgxSlideCom
     public disabled = false;
 
     /** @hidden */
-    public direction = IgxCarouselDirection.NONE;
+    public direction = CarouselAnimationDirection.NONE;
     /** @hidden */
     public previous: boolean;
 
diff --git a/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts b/projects/igniteui-angular/tabs/src/tabs/tabs.directive.ts
@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs';
 import { IBaseEventArgs, IgxAngularAnimationService, AnimationService, ɵIgxDirectionality } from 'igniteui-angular/core';
 import { IgxTabItemDirective } from './tab-item.directive';
 import { IgxTabContentBase, IgxTabsBase } from './tabs.base';
-import { IgxCarouselComponentBase, IgxCarouselDirection } from 'igniteui-angular/carousel';
+import { IgxCarouselComponentBase, CarouselAnimationDirection } from 'igniteui-angular/carousel';
 
 export interface ITabsBaseEventArgs extends IBaseEventArgs {
     readonly owner: IgxTabsDirective;
@@ -291,7 +291,7 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
             !this.currentItem.selected) {
             item.direction = (!this.dir.rtl && this._selectedIndex > oldSelectedIndex) ||
                 (this.dir.rtl && this._selectedIndex < oldSelectedIndex)
-                ? IgxCarouselDirection.NEXT : IgxCarouselDirection.PREV;
+                ? CarouselAnimationDirection.NEXT : CarouselAnimationDirection.PREV;
 
             if (this.previousItem && this.previousItem.previous) {
                 this.previousItem.previous = false;

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`"changes": [`
`4`	`4`	`{`
`5`	`5`	`"name": "Direction",`
`6`		`- "replaceWith": "IgxCarouselDirection"`
	`6`	`+ "replaceWith": "CarouselAnimationDirection"`
`7`	`7`	`}`
`8`	`8`	`]`
`9`	`9`	`}`