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

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: damyanpetev <[email protected]>
Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: 4 people

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": [

package-lock.json

@@ -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/accordion/src/accordion/public_api.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/carousel/src/carousel/carousel.component.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/overlay.spec.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/overlay/utilities.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/core/src/services/public_api.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.spec.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/date-picker.component.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 {