fix(*): moving the IgxOverlayOutletDirective and some renamed exports and fixing migration

angular.json

@@ -196,7 +196,7 @@
               "projects/igniteui-angular/test.css"
             ],
             "assets": [
-              "projects/igniteui-angular/src/assets"
+              "projects/igniteui-angular/test-utils/assets"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [

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

@@ -5,7 +5,7 @@ export * from './accordion.component';
 /* Imports that cannot be resolved from IGX_EXPANSION_PANEL_DIRECTIVES spread
     NOTE: Do not remove! Issue: https://github.com/IgniteUI/igniteui-angular/issues/13310
 */
- import {
+import {
     IgxExpansionPanelComponent,
     IgxExpansionPanelHeaderComponent,
     IgxExpansionPanelBodyComponent,

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

@@ -27,7 +27,7 @@ import {
 import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CarouselResourceStringsEN, ICarouselResourceStrings } from 'igniteui-angular/core';
+import { CarouselResourceStringsEN, ICarouselResourceStrings, ɵIgxDirectionality } from 'igniteui-angular/core';
 import { first, IBaseEventArgs, last, PlatformUtil } from 'igniteui-angular/core';
 import { IgxAngularAnimationService } from 'igniteui-angular/core';
 import { AnimationService } from 'igniteui-angular/core';
@@ -39,7 +39,6 @@ import { IgxButtonDirective } from 'igniteui-angular/directives';
 import { getCurrentResourceStrings } from 'igniteui-angular/core';
 import { HammerGesturesManager } from 'igniteui-angular/core';
 import { CarouselAnimationType, CarouselIndicatorsOrientation } from './enums';
-import { ɵIgxDirectionality } from 'igniteui-angular/core';
 
 let NEXT_ID = 0;
 

projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts

@@ -12,13 +12,9 @@ import {
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { first } from 'rxjs/operators';
-import { IgxAvatarComponent } from '../../../../avatar/src/avatar/avatar.component';
-import { IgxCalendarComponent } from '../../../../calendar/src/public_api';
-import { IgxCalendarContainerComponent } from '../../../../date-picker/src/date-picker/calendar-container/calendar-container.component';
 import { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
 import { IgxAngularAnimationService } from '../animation/angular-animation-service';
 import { AnimationService } from '../animation/animation';
-import { IgxOverlayOutletDirective, IgxToggleDirective } from '../../../../directives/src/directives/toggle/toggle.directive';
 import { IgxOverlayService } from './overlay';
 import { ContainerPositionStrategy } from './position';
 import { AutoPositionStrategy } from './position/auto-position-strategy';
@@ -33,6 +29,7 @@ import { CloseScrollStrategy } from './scroll/close-scroll-strategy';
 import { NoOpScrollStrategy } from './scroll/NoOpScrollStrategy';
 import {
     HorizontalAlignment,
+    IgxOverlayOutletDirective,
     OffsetMode,
     OverlayCancelableEventArgs,
     OverlayEventArgs,
@@ -42,6 +39,10 @@ import {
     VerticalAlignment
 } from './utilities';
 import { scaleInVerTop, scaleOutVerTop } from 'igniteui-angular/animations';
+import { IgxCalendarContainerComponent } from 'igniteui-angular/date-picker';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxCalendarComponent } from 'igniteui-angular/calendar';
+import { IgxToggleDirective } from 'igniteui-angular/directives';
 
 const CLASS_OVERLAY_CONTENT = 'igx-overlay__content';
 const CLASS_OVERLAY_CONTENT_MODAL = 'igx-overlay__content--modal';

projects/igniteui-angular/core/src/services/overlay/utilities.ts

@@ -1,17 +1,29 @@
 import { AnimationReferenceMetadata } from '@angular/animations';
-import { ComponentRef, ElementRef, Injector, NgZone } from '@angular/core';
+import { ComponentRef, Directive, ElementRef, Injector, NgZone } from '@angular/core';
 import { CancelableBrowserEventArgs, CancelableEventArgs, cloneValue, IBaseEventArgs } from '../../core/utils';
 import { AnimationPlayer } from '../animation/animation';
 import { IPositionStrategy } from './position/IPositionStrategy';
 import { IScrollStrategy } from './scroll';
 
 /**
- * Interface representing an overlay outlet directive.
- * The actual implementation is in igniteui-angular/directives.
+ * Mark an element as an igxOverlay outlet container.
+ * Directive instance is exported as `overlay-outlet` to be assigned to templates variables:
+ * ```html
+ * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
+ * ```
  */
-export interface IgxOverlayOutletDirective {
-    element: ElementRef;
-    readonly nativeElement: HTMLElement;
+@Directive({
+    exportAs: 'overlay-outlet',
+    selector: '[igxOverlayOutlet]',
+    standalone: true
+})
+export class IgxOverlayOutletDirective {
+    constructor(public element: ElementRef<HTMLElement>) { }
+
+    /** @hidden */
+    public get nativeElement() {
+        return this.element.nativeElement;
+    }
 }
 
 /* blazorAlternateName: GridHorizontalAlignment */

projects/igniteui-angular/core/src/services/public_api.ts

@@ -15,7 +15,8 @@ export * from './overlay/position';
 export * from './overlay/scroll';
 export {
     AbsolutePosition, ConnectedFit, HorizontalAlignment, OffsetMode, OverlayAnimationEventArgs, OverlayCancelableEventArgs, OverlayClosingEventArgs,
-    OverlayCreateSettings, OverlayEventArgs, OverlaySettings, Point, PositionSettings, RelativePosition, RelativePositionStrategy, Size, VerticalAlignment, Util
+    OverlayCreateSettings, OverlayEventArgs, OverlaySettings, Point, PositionSettings, RelativePosition, RelativePositionStrategy, Size, VerticalAlignment, Util,
+    IgxOverlayOutletDirective
 } from './overlay/utilities';
 export * from './transaction/base-transaction';
 export * from './transaction/hierarchical-transaction';

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts

@@ -9,6 +9,7 @@ import { IFormattingViews, IgxCalendarComponent, IgxCalendarHeaderTemplateDirect
 import { IgxCalendarContainerComponent } from './calendar-container/calendar-container.component';
 import { IgxDatePickerComponent } from './date-picker.component';
 import {
+    IgxOverlayOutletDirective,
     IgxOverlayService,
     OverlayCancelableEventArgs, OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings,
     WEEKDAYS
@@ -18,7 +19,6 @@ import { By } from '@angular/platform-browser';
 import { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../../../core/src/date-common/types';
 import { DatePart } from '../../../core/src/date-common/public_api';
 import { DateRangeDescriptor, DateRangeType } from 'igniteui-angular/core';
-import { IgxOverlayOutletDirective } from '../../../directives/src/directives/toggle/toggle.directive';
 import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../../../core/src/date-common/public_api';
 import { DateTimeUtil } from '../../../core/src/date-common/util/date-time.util';
 import { registerLocaleData } from "@angular/common";

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts

@@ -43,7 +43,7 @@ import {
 import { fromEvent, Subscription, noop, MonoTypeOperatorFunction } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
-import { IgxDateTimeEditorDirective, IgxOverlayOutletDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives';
+import { IgxDateTimeEditorDirective, IgxTextSelectionDirective } from 'igniteui-angular/directives';
 import {
     AbsoluteScrollStrategy,
     AutoPositionStrategy,
@@ -64,7 +64,8 @@ import {
     DateTimeUtil,
     DatePartDeltas,
     DatePart,
-    isDateInRanges
+    isDateInRanges,
+    IgxOverlayOutletDirective
 } from 'igniteui-angular/core';
 import { IDatePickerValidationFailedEventArgs } from './date-picker.common';
 import { IgxIconComponent } from 'igniteui-angular/icon';

projects/igniteui-angular/date-picker/src/date-picker/picker-base.directive.ts

@@ -8,8 +8,7 @@ import { getLocaleFirstDayOfWeek } from "@angular/common";
 import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IGX_INPUT_GROUP_TYPE, IgxInputGroupComponent, IgxInputGroupType, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
-import { DateRange, EditorProvider, IBaseCancelableBrowserEventArgs, IBaseEventArgs, IgxPickerClearComponent, IgxPickerToggleComponent, IToggleView, OverlaySettings, PickerHeaderOrientation, PickerInteractionMode, WEEKDAYS } from 'igniteui-angular/core';
-import { IgxOverlayOutletDirective } from 'igniteui-angular/directives';
+import { DateRange, EditorProvider, IBaseCancelableBrowserEventArgs, IBaseEventArgs, IgxOverlayOutletDirective, IgxPickerClearComponent, IgxPickerToggleComponent, IToggleView, OverlaySettings, PickerHeaderOrientation, PickerInteractionMode, WEEKDAYS } from 'igniteui-angular/core';
 
 @Directive()
 export abstract class PickerBaseDirective implements IToggleView, EditorProvider, AfterViewInit, AfterContentChecked, OnDestroy {

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts

@@ -37,11 +37,11 @@ import {
     DateTimeUtil,
     IgxPickerActionsDirective,
     isDateInRanges,
-    PickerCalendarOrientation
+    PickerCalendarOrientation,
+    IgxOverlayOutletDirective
 } from 'igniteui-angular/core';
 import { IgxCalendarContainerComponent } from '../date-picker/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-picker/picker-base.directive';
-import { IgxOverlayOutletDirective } from 'igniteui-angular/directives';
 import {
     IgxInputDirective,
     IgxInputGroupComponent,

projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, HostBinding, Input, OnDestroy, booleanAttribute } from '@angular/core';
-import { IToggleView } from 'igniteui-angular/core';
+import { IgxOverlayOutletDirective, IToggleView } from 'igniteui-angular/core';
 import { IPositionStrategy, OverlaySettings } from 'igniteui-angular/core';
-import { IgxOverlayOutletDirective, IgxToggleDirective } from '../toggle/toggle.directive';
+import { IgxToggleDirective } from '../toggle/toggle.directive';
 
 @Directive()
 export abstract class IgxNotificationsDirective extends IgxToggleDirective

projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.spec.ts

@@ -2,15 +2,10 @@ import { ChangeDetectionStrategy, Component, DebugElement, ViewChild, ElementRef
 import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxToggleActionDirective, IgxToggleDirective, IgxOverlayOutletDirective } from './toggle.directive';
-import {
-    IgxOverlayService, OverlaySettings, ConnectedPositioningStrategy,
-    AbsoluteScrollStrategy, AutoPositionStrategy, HorizontalAlignment
-} from '../../../../core/src/services/public_api';
-import { CancelableEventArgs } from '../../../../core/src/core/utils';
+import { IgxToggleActionDirective, IgxToggleDirective } from './toggle.directive';
 
 import { first } from 'rxjs/operators';
-import { OffsetMode } from '../../../../core/src/services/overlay/utilities';
+import { AbsoluteScrollStrategy, AutoPositionStrategy, CancelableEventArgs, ConnectedPositioningStrategy, HorizontalAlignment, IgxOverlayOutletDirective, IgxOverlayService, OffsetMode, OverlaySettings } from 'igniteui-angular/core';
 
 describe('IgxToggle', () => {
     const HIDDEN_TOGGLER_CLASS = 'igx-toggle--hidden';

projects/igniteui-angular/directives/src/directives/toggle/toggle.directive.ts

@@ -11,7 +11,7 @@ import {
     Optional,
     Output,
 } from '@angular/core';
-import { AbsoluteScrollStrategy } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy, IgxOverlayOutletDirective } from 'igniteui-angular/core';
 import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from 'igniteui-angular/core';
 import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
 import { filter, first, takeUntil } from 'rxjs/operators';
@@ -526,24 +526,3 @@ export class IgxToggleActionDirective implements OnInit {
         return settings;
     }
 }
-
-/**
- * Mark an element as an igxOverlay outlet container.
- * Directive instance is exported as `overlay-outlet` to be assigned to templates variables:
- * ```html
- * <div igxOverlayOutlet #outlet="overlay-outlet"></div>
- * ```
- */
-@Directive({
-    exportAs: 'overlay-outlet',
-    selector: '[igxOverlayOutlet]',
-    standalone: true
-})
-export class IgxOverlayOutletDirective {
-    constructor(public element: ElementRef<HTMLElement>) { }
-
-    /** @hidden */
-    public get nativeElement() {
-        return this.element.nativeElement;
-    }
-}

projects/igniteui-angular/directives/src/directives/toggle/toggle.module.ts

@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
-import { IgxOverlayOutletDirective, IgxToggleActionDirective, IgxToggleDirective } from './toggle.directive';
+import { IgxToggleActionDirective, IgxToggleDirective } from './toggle.directive';
 
 /**
  * @hidden
  * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
  */
 @NgModule({
-    imports: [IgxToggleDirective, IgxToggleActionDirective, IgxOverlayOutletDirective],
-    exports: [IgxToggleDirective, IgxToggleActionDirective, IgxOverlayOutletDirective]
+    imports: [IgxToggleDirective, IgxToggleActionDirective],
+    exports: [IgxToggleDirective, IgxToggleActionDirective]
 })
 export class IgxToggleModule { }

projects/igniteui-angular/drop-down/src/drop-down/autocomplete/autocomplete.directive.ts

@@ -18,7 +18,7 @@ import {
 import { NgModel, FormControlName } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { CancelableEventArgs, IBaseEventArgs } from 'igniteui-angular/core';
+import { CancelableEventArgs, IBaseEventArgs, IgxOverlayOutletDirective } from 'igniteui-angular/core';
 import {
     AbsoluteScrollStrategy,
     AutoPositionStrategy,
@@ -28,7 +28,6 @@ import {
 } from 'igniteui-angular/core';
 import { IgxDropDownComponent } from '../drop-down.component';
 import { IgxDropDownItemNavigationDirective } from '../drop-down-navigation.directive';
-import { IgxOverlayOutletDirective } from 'igniteui-angular/directives';
 import { ISelectionEventArgs } from '../drop-down.common';
 import { IgxInputGroupComponent } from 'igniteui-angular/input-group';
 

projects/igniteui-angular/drop-down/src/drop-down/public_api.ts

@@ -12,6 +12,7 @@ export { ISelectionEventArgs, IDropDownNavigationDirective } from './drop-down.c
 export * from './drop-down-navigation.directive';
 export * from './drop-down-group.component';
 export * from './autocomplete/autocomplete.directive';
+export * from './autocomplete/autocomplete.module';
 
 /* NOTE: Drop down directives collection for ease-of-use import in standalone components scenario */
 export const IGX_DROP_DOWN_DIRECTIVES = [

projects/igniteui-angular/grids/core/src/columns/public_api.ts

@@ -18,7 +18,7 @@ import {
     IgxColumnMinLengthValidatorDirective,
     IgxColumnMinValidatorDirective,
     IgxColumnRequiredValidatorDirective,
-    IgxColumPatternValidatorDirective
+    IgxColumnPatternValidatorDirective
 } from './validators.directive';
 
 export * from './column.component';
@@ -35,7 +35,7 @@ export const IGX_GRID_VALIDATION_DIRECTIVES = [
     IgxColumnEmailValidatorDirective,
     IgxColumnMinLengthValidatorDirective,
     IgxColumnMaxLengthValidatorDirective,
-    IgxColumPatternValidatorDirective
+    IgxColumnPatternValidatorDirective
 ] as const;
 
 /* NOTE: Grid column validation directives collection for ease-of-use import in standalone components scenario */

projects/igniteui-angular/grids/core/src/columns/validators.directive.ts

@@ -2,7 +2,7 @@ import { Directive } from '@angular/core';
 import { RequiredValidator, NG_VALIDATORS, MinValidator, MaxValidator, EmailValidator, MinLengthValidator, MaxLengthValidator, PatternValidator } from '@angular/forms';
 
 @Directive({
-     
+
     selector: 'igx-column[required]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -15,7 +15,7 @@ export class IgxColumnRequiredValidatorDirective extends RequiredValidator {
 }
 
 @Directive({
-     
+
     selector: 'igx-column[min]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -28,7 +28,7 @@ export class IgxColumnMinValidatorDirective extends MinValidator { }
 
 
 @Directive({
-     
+
     selector: 'igx-column[max]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -41,7 +41,7 @@ export class IgxColumnMaxValidatorDirective extends MaxValidator { }
 
 
 @Directive({
-     
+
     selector: 'igx-column[email]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -54,7 +54,7 @@ export class IgxColumnEmailValidatorDirective extends EmailValidator { }
 
 
 @Directive({
-     
+
     selector: 'igx-column[minlength]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -66,7 +66,7 @@ export class IgxColumnEmailValidatorDirective extends EmailValidator { }
 export class IgxColumnMinLengthValidatorDirective extends MinLengthValidator { }
 
 @Directive({
-     
+
     selector: 'igx-column[maxlength]',
     providers: [{
             provide: NG_VALIDATORS,
@@ -79,14 +79,14 @@ export class IgxColumnMaxLengthValidatorDirective extends MaxLengthValidator {
 }
 
 @Directive({
-     
+
     selector: 'igx-column[pattern]',
     providers: [{
             provide: NG_VALIDATORS,
-            useExisting: IgxColumPatternValidatorDirective,
+            useExisting: IgxColumnPatternValidatorDirective,
             multi: true
         }],
     standalone: true
 })
-export class IgxColumPatternValidatorDirective extends PatternValidator {
+export class IgxColumnPatternValidatorDirective extends PatternValidator {
 }

projects/igniteui-angular/grids/core/src/common/grid.interface.ts

@@ -15,9 +15,9 @@ import { IgxCell, IgxEditRow } from './crud.service';
 import { GridSelectionRange } from './types';
 import { DropPosition, IgxColumnMovingService } from '../moving/moving.service';
 import { Observable, Subject } from 'rxjs';
-import { ColumnPinningPosition, ColumnType, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, GridSummaryCalculationMode, GridTypeBase, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringStrategy, IGridGroupingStrategy, IGridMergeStrategy, IGridResourceStrings, IGridSortingStrategy, IGroupByExpandState, IGroupByRecord, IGroupingExpression, IgxSummaryResult, IPathSegment, ISortingExpression, ISortingOptions, ITreeGridRecord, OverlaySettings, ɵSize, SortingDirection, State, Transaction, TransactionService } from 'igniteui-angular/core';
+import { ColumnPinningPosition, ColumnType, FilteringExpressionsTree, FilteringLogic, GridColumnDataType, GridSummaryCalculationMode, GridTypeBase, IDataCloneStrategy, IFilteringExpressionsTree, IFilteringStrategy, IGridGroupingStrategy, IGridMergeStrategy, IGridResourceStrings, IGridSortingStrategy, IGroupByExpandState, IGroupByRecord, IGroupingExpression, IgxSummaryResult, IPathSegment, ISortingExpression, ISortingOptions, ITreeGridRecord, OverlaySettings, ɵSize, SortingDirection, State, Transaction, TransactionService, type IgxOverlayOutletDirective } from 'igniteui-angular/core';
 import { FormControl, FormGroup, ValidationErrors } from '@angular/forms';
-import type { IForOfState, IgxGridForOfDirective, IgxOverlayOutletDirective, IgxToggleDirective } from 'igniteui-angular/directives';
+import type { IForOfState, IgxGridForOfDirective, IgxToggleDirective } from 'igniteui-angular/directives';
 import type { IgxPaginatorComponent } from 'igniteui-angular/paginator';
 import { IgxGridValidationService } from '../grid-validation.service';
 import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType } from '../pivot-grid.interface';

projects/igniteui-angular/grids/core/src/filtering/excel-style/excel-style-date-expression.component.ts

@@ -6,9 +6,9 @@ import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/sel
 import { IgxInputDirective, IgxInputGroupComponent, IgxPrefixDirective } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxDatePickerComponent } from 'igniteui-angular/date-picker';
-import { IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core';
+import { IgxOverlayOutletDirective, IgxPickerClearComponent, IgxPickerToggleComponent } from 'igniteui-angular/core';
 import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
-import { IgxButtonDirective, IgxDateTimeEditorDirective, IgxIconButtonDirective, IgxOverlayOutletDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective, IgxDateTimeEditorDirective, IgxIconButtonDirective } from 'igniteui-angular/directives';
 import { IgxButtonGroupComponent } from 'igniteui-angular/button-group';
 
 /**