Merge branch 'master' into mpopov/indigo-calendar-updates

desig9stein · web-flow · commit 4c3c372bef90 · 2024-07-22T10:21:55.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,7 +18,8 @@ All notable changes for each version of this project will be documented in this
     `filterCell`, `headerCell`, `headerGroup`, `defaultMinWidth`, `gridRowSpan`, `gridColumnSpan` and `cells`.
 - `IgxPaginator`
     - The `isFirstPageDisabled` and `isLastPageDisabled` have been deprecated in favor of the identical `isFirstPage` and `isLastPage` getter.
-
+- `IgxOverlayService`
+    - The `attach` method overload accepting `Type` and `OverlaySettings` now accepts `OverlayCreateSettings` as second parameter. This interface extends `OverlaySettings` with an additional `injector` property used as `ElementInjector` when creating the dynamic component.
 
 ## 18.0.0
 ### New Features
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
@@ -94,7 +94,7 @@
         }
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~18.0.1330"
+        "@igniteui/angular-schematics": "~18.1.1340"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json",
diff --git a/projects/igniteui-angular/src/lib/grids/state-base.directive.ts b/projects/igniteui-angular/src/lib/grids/state-base.directive.ts
@@ -113,7 +113,6 @@ interface Feature {
 /* blazorIndirectRender */
 @Directive()
 export class IgxGridStateBaseDirective {
-    private static ngAcceptInputType_options: IGridStateOptions | '';
 
     private featureKeys: GridFeatures[] = [];
     private state: IGridState;
diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.ts b/projects/igniteui-angular/src/lib/grids/state.directive.ts
@@ -6,7 +6,7 @@ import { GridFeatures, IGridState, IGridStateOptions, IgxGridStateBaseDirective
     standalone: true
 })
 export class IgxGridStateDirective extends IgxGridStateBaseDirective {
-
+    private static ngAcceptInputType_options: IGridStateOptions | '';
 
     /**
      *  An object with options determining if a certain feature state should be saved.
@@ -17,14 +17,14 @@ export class IgxGridStateDirective extends IgxGridStateBaseDirective {
      * public options = {selection: false, advancedFiltering: false};
      * ```
      */
-        @Input('igxGridState')
-        public get stateOptions(): IGridStateOptions {
-           return super.options;
-        }
+    @Input('igxGridState')
+    public override get options(): IGridStateOptions {
+        return super.options;
+    }
 
-        public set stateOptions(value: IGridStateOptions) {
-            super.options = value;
-        }
+    public override set options(value: IGridStateOptions) {
+        super.options = value;
+    }
 
     /**
      * Gets the state of a feature or states of all grid features, unless a certain feature is disabled through the `options` property.
diff --git a/projects/igniteui-angular/src/lib/services/overlay/README.md b/projects/igniteui-angular/src/lib/services/overlay/README.md
@@ -84,16 +84,22 @@ this.overlay.show(component, overlaySettings);
 |closeAnimation      | AnimationMetadata | AnimationMetadata[] | Animation applied while overlay closes              |
 |minSize             | Size        | The size up to which element may shrink when shown in elastic position strategy |
 
+###### OverlayCreateSettings extends OverlaySettings
+
+| Name | Type | Description |
+| :--- | :--- | :---------- |
+|injector | Injector | An `Injector` instance to add in the created component ref's injectors tree |
 
 ##### Methods
 
 ###### IgxOverlayService
 
 | Name            | Description                                                                     | Parameters      |
 |-----------------|---------------------------------------------------------------------------------|-----------------|
-|attach           | Generates Id. Provide this Id when call `show(id, settings?)` method   |element, overlaySettings? |
-|attach           | Generates Id. Provide this Id when call `show(id, settings?)` method |component, overlaySettings?, moduleRef? |
-|show             | Shows the provided component on the overlay                                  |id, overlaySettings?|
+|attach           | Generates Id. Provide this Id when call `show(id, settings?)` method            |element, overlaySettings? |
+|attach           | Generates Id. Provide this Id when call `show(id, settings?)` method            |component, overlayCreateSettings?, |
+|attach           | Generates Id. Provide this Id when call `show(id, settings?)` method            |component, viewContainerRef, overlaySettings? |
+|show             | Shows the provided component on the overlay                                     |id, overlaySettings?|
 |hide             | Hides the component with the ID provided as a parameter                         |id               |
 |hideAll          | Hides all the components and the overlay                                        |-                |
 |detach           | Remove overlay with the provided id                                             |id               |
@@ -134,6 +140,6 @@ this.overlay.show(component, overlaySettings);
 | opened            | Emitted after overlay shows                   | false      |            |
 | closing           | Emitted before overlay hides                  | true       |            |
 | closed            | Emitted after overlay hides                   | false      |            |
-| contentAppending   | Emitted before overlay's content is appended   | false      |            |
+| contentAppending  | Emitted before overlay's content is appended  | false      |            |
 | contentAppended   | Emitted after overlay's content is appended   | false      |            |
 | animationStarting | Emitted before animation is started           | false      |            |
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts
@@ -4,6 +4,7 @@ import {
     ElementRef,
     HostBinding,
     Inject,
+    Injector,
     ViewChild,
     ViewContainerRef,
     ViewEncapsulation
@@ -626,8 +627,10 @@ describe('igxOverlay', () => {
             expect(overlayInstance.contentAppending.emit).toHaveBeenCalledTimes(1);
             expect(overlayInstance.contentAppended.emit).toHaveBeenCalledTimes(1);
 
-            expect(overlayInstance.contentAppending.emit).toHaveBeenCalledWith({ id: firstCallId, elementRef: jasmine.any(Object),
-                componentRef: jasmine.any(ComponentRef) as any, settings: os })
+            expect(overlayInstance.contentAppending.emit).toHaveBeenCalledWith({
+                id: firstCallId, elementRef: jasmine.any(Object),
+                componentRef: jasmine.any(ComponentRef) as any, settings: os
+            })
         }));
 
         it('Should properly be able to override OverlaySettings using contentAppending event args', fakeAsync(() => {
@@ -1170,6 +1173,76 @@ describe('igxOverlay', () => {
             overlay.detachAll();
         });
 
+        it('#14364 - Should provide injector to attach method', () => {
+            const fixture = TestBed.createComponent(EmptyPageComponent);
+            const overlay = fixture.componentInstance.overlay;
+            const injector = Injector.create({
+                parent: fixture.componentInstance.injector,
+                providers: [
+                    { provide: 'SomeConst', useValue: 100 },
+                ],
+            });
+            fixture.detectChanges();
+
+            const id = overlay.attach(SimpleDynamicComponent, { injector });
+            expect(id).toBeDefined();
+
+            const overlayInfo = overlay.getOverlayById(id);
+            expect(overlayInfo).toBeDefined();
+
+            const elementInjector = overlayInfo.componentRef.injector;
+            expect(elementInjector).toBeDefined();
+
+            const result = elementInjector.get('SomeConst');
+            expect(result).toEqual(100);
+
+            overlay.detachAll();
+        });
+
+        it('#14364 - Should provide different injectors to attach method to each component', () => {
+            const fixture = TestBed.createComponent(EmptyPageComponent);
+            const overlay = fixture.componentInstance.overlay;
+            const injector1 = Injector.create({
+                parent: fixture.componentInstance.injector,
+                providers: [
+                    { provide: 'SomeConst', useValue: 'First Value' },
+                ],
+            });
+            const injector2 = Injector.create({
+                parent: fixture.componentInstance.injector,
+                providers: [
+                    { provide: 'SomeConst', useValue: 'Second Value' },
+                ],
+            });
+            fixture.detectChanges();
+
+            const id1 = overlay.attach(SimpleDynamicComponent, { injector: injector1 });
+            expect(id1).toBeDefined();
+
+            const overlayInfo1 = overlay.getOverlayById(id1);
+            expect(overlayInfo1).toBeDefined();
+
+            const elementInjector1 = overlayInfo1.componentRef.injector;
+            expect(elementInjector1).toBeDefined();
+
+            const result1 = elementInjector1.get('SomeConst');
+            expect(result1).toEqual('First Value');
+
+            const id2 = overlay.attach(SimpleDynamicComponent, { injector: injector2 });
+            expect(id2).toBeDefined();
+
+            const overlayInfo2 = overlay.getOverlayById(id2);
+            expect(overlayInfo2).toBeDefined();
+
+            const elementInjector2 = overlayInfo2.componentRef.injector;
+            expect(elementInjector2).toBeDefined();
+
+            const result2 = elementInjector2.get('SomeConst');
+            expect(result2).toEqual('Second Value');
+
+            overlay.detachAll();
+        });
+
         // it('##6474 - should calculate correctly position', () => {
         //     const elastic: ElasticPositionStrategy = new ElasticPositionStrategy();
         //     const targetRect: ClientRect = {
@@ -4391,7 +4464,7 @@ export class SimpleDynamicComponent {
     public hostDisplay = 'block';
     @HostBinding('style.width')
     @HostBinding('style.height')
-    public hostDimenstions = '100px';
+    public hostDimensions = '100px';
 }
 
 @Component({
@@ -4481,7 +4554,8 @@ export class EmptyPageComponent {
 
     constructor(
         @Inject(IgxOverlayService) public overlay: IgxOverlayService,
-        public viewContainerRef: ViewContainerRef) { }
+        public viewContainerRef: ViewContainerRef,
+        public injector: Injector) { }
 
     public click() {
         this.overlay.show(this.overlay.attach(SimpleDynamicComponent));
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/projects/igniteui-angular/src/lib/services/overlay/overlay.ts
@@ -8,6 +8,7 @@ import {
     EventEmitter,
     Inject,
     Injectable,
+    Injector,
     NgZone,
     OnDestroy,
     Type,
@@ -16,6 +17,7 @@ import {
 import { fromEvent, Subject, Subscription } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
+import { fadeIn, fadeOut, IAnimationParams, scaleInHorLeft, scaleInHorRight, scaleInVerBottom, scaleInVerTop, scaleOutHorLeft, scaleOutHorRight, scaleOutVerBottom, scaleOutVerTop, slideInBottom, slideInTop, slideOutBottom, slideOutTop } from 'igniteui-angular/animations';
 import { PlatformUtil } from '../../core/utils';
 import { IgxOverlayOutletDirective } from '../../directives/toggle/toggle.directive';
 import { IgxAngularAnimationService } from '../animation/angular-animation-service';
@@ -34,6 +36,7 @@ import {
     OverlayAnimationEventArgs,
     OverlayCancelableEventArgs,
     OverlayClosingEventArgs,
+    OverlayCreateSettings,
     OverlayEventArgs,
     OverlayInfo,
     OverlaySettings,
@@ -43,7 +46,6 @@ import {
     RelativePositionStrategy,
     VerticalAlignment
 } from './utilities';
-import { fadeIn, fadeOut, IAnimationParams, scaleInHorLeft, scaleInHorRight, scaleInVerBottom, scaleInVerTop, scaleOutHorLeft, scaleOutHorRight, scaleOutVerBottom, scaleOutVerTop, slideInBottom, slideInTop, slideOutBottom, slideOutTop } from 'igniteui-angular/animations';
 
 /**
  * [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay-main)
@@ -144,7 +146,7 @@ export class IgxOverlayService implements OnDestroy {
         @Inject(DOCUMENT) private document: any,
         private _zone: NgZone,
         protected platformUtil: PlatformUtil,
-        @Inject(IgxAngularAnimationService)private animationService: AnimationService) {
+        @Inject(IgxAngularAnimationService) private animationService: AnimationService) {
         this._document = this.document;
     }
 
@@ -298,7 +300,7 @@ export class IgxOverlayService implements OnDestroy {
      * Generates Id. Provide this Id when call `show(id)` method
      *
      * @param component ElementRef to show in overlay
-     * @param settings Display settings for the overlay, such as positioning and scroll/close behavior.
+     * @param settings (optional): Display settings for the overlay, such as positioning and scroll/close behavior.
      * @returns Id of the created overlay. Valid until `detach` is called.
      */
     public attach(element: ElementRef, settings?: OverlaySettings): string;
@@ -308,23 +310,25 @@ export class IgxOverlayService implements OnDestroy {
      * Note created instance is in root scope, prefer the `viewContainerRef` overload when local injection context is needed.
      *
      * @param component Component Type to show in overlay
-     * @param settings Display settings for the overlay, such as positioning and scroll/close behavior.
+     * @param settings (optional): Create settings for the overlay, such as positioning and scroll/close behavior.
+     * Includes also an optional `Injector` to add to the created dynamic component's injectors.
      * @returns Id of the created overlay. Valid until `detach` is called.
      */
-    public attach(component: Type<any>, settings?: OverlaySettings): string;
+    public attach(component: Type<any>, settings?: OverlayCreateSettings): string;
+    // TODO: change third parameter to OverlayCreateSettings and allow passing of Injector and so on.
     /**
      * Generates an Id. Provide this Id when calling the `show(id)` method
      *
      * @param component Component Type to show in overlay
      * @param viewContainerRef Reference to the container where created component's host view will be inserted
-     * @param settings Display settings for the overlay, such as positioning and scroll/close behavior.
+     * @param settings (optional): Display settings for the overlay, such as positioning and scroll/close behavior.
      */
     public attach(component: Type<any>, viewContainerRef: ViewContainerRef, settings?: OverlaySettings): string;
     public attach(
         componentOrElement: ElementRef | Type<any>,
-        viewContainerRefOrSettings?: ViewContainerRef | OverlaySettings,
-        moduleRefOrSettings?: OverlaySettings): string {
-        const info: OverlayInfo = this.getOverlayInfo(componentOrElement, viewContainerRefOrSettings);
+        viewContainerRefOrSettings?: ViewContainerRef | OverlayCreateSettings,
+        settings?: OverlaySettings): string {
+        const info: OverlayInfo = this.getOverlayInfo(componentOrElement, viewContainerRefOrSettings, settings);
 
         if (!info) {
             console.warn('Overlay was not able to attach provided component!');
@@ -333,9 +337,8 @@ export class IgxOverlayService implements OnDestroy {
 
         info.id = (this._componentId++).toString();
         info.visible = false;
-        const settings = Object.assign({}, this._defaultSettings, this.getUserOverlaySettings(viewContainerRefOrSettings, moduleRefOrSettings));
         // Emit the contentAppending event before appending the content
-        const eventArgs = { id: info.id, elementRef: info.elementRef, componentRef: info.componentRef, settings };
+        const eventArgs = { id: info.id, elementRef: info.elementRef, componentRef: info.componentRef, settings: info.settings };
         this.contentAppending.emit(eventArgs);
         // Append the content to the overlay
         info.settings = eventArgs.settings;
@@ -559,29 +562,38 @@ export class IgxOverlayService implements OnDestroy {
         }
     }
 
-    private getUserOverlaySettings(
-      viewContainerRefOrSettings?: ViewContainerRef | OverlaySettings,
-      moduleRefOrSettings?: OverlaySettings): OverlaySettings {
-        let result: OverlaySettings | undefined = moduleRefOrSettings;
-        if (viewContainerRefOrSettings && !(viewContainerRefOrSettings instanceof ViewContainerRef)) {
-            result = viewContainerRefOrSettings;
-        }
-        return result;
-    }
-
+    /**
+     * Creates overlayInfo. Sets the info's `elementRef`, `componentRef`and `settings`. Also
+     * initialize info's `ngZone`, `transformX` and `transformY`.
+     * @param component ElementRef or Type. If type is provided dynamic component will be created
+     * @param viewContainerRefOrSettings (optional): If ElementRef is provided for `component` this
+     * parameter is OverlaySettings. Otherwise it could be ViewContainerRef or OverlayCreateSettings and will be
+     * used when dynamic component is created.
+     * @param settings (optional): OverlaySettings when `ViewContainerRef` is provided.
+     * @returns OverlayInfo
+     */
     private getOverlayInfo(
         component: ElementRef | Type<any>,
-        viewContainerRefOrSettings?: ViewContainerRef | OverlaySettings): OverlayInfo | null {
+        viewContainerRefOrSettings?: ViewContainerRef | OverlayCreateSettings,
+        settings?: OverlaySettings): OverlayInfo | null {
         const info: OverlayInfo = { ngZone: this._zone, transformX: 0, transformY: 0 };
+        let overlaySettings = settings;
         if (component instanceof ElementRef) {
             info.elementRef = component;
+            overlaySettings = viewContainerRefOrSettings as OverlaySettings;
         } else {
             let dynamicComponent: ComponentRef<any>;
             if (viewContainerRefOrSettings instanceof ViewContainerRef) {
-                dynamicComponent = viewContainerRefOrSettings.createComponent(component);
+                const viewContainerRef = viewContainerRefOrSettings as ViewContainerRef;
+                dynamicComponent = viewContainerRef.createComponent(component);
             } else {
                 const environmentInjector = this._appRef.injector;
-                dynamicComponent = createComponent(component, { environmentInjector });
+                const createSettings = viewContainerRefOrSettings as OverlayCreateSettings | undefined;
+                let elementInjector: Injector;
+                if (createSettings) {
+                    ({ injector: elementInjector, ...overlaySettings} = createSettings);
+                }
+                dynamicComponent = createComponent(component, { environmentInjector, elementInjector });
                 this._appRef.attachView(dynamicComponent.hostView);
             }
             if (dynamicComponent.onDestroy) {
@@ -597,6 +609,7 @@ export class IgxOverlayService implements OnDestroy {
             info.elementRef = { nativeElement: element };
             info.componentRef = dynamicComponent;
         }
+        info.settings = Object.assign({}, this._defaultSettings, overlaySettings); 
         return info;
     }
 
diff --git a/projects/igniteui-angular/src/lib/services/overlay/utilities.ts b/projects/igniteui-angular/src/lib/services/overlay/utilities.ts
@@ -1,5 +1,5 @@
 import { AnimationReferenceMetadata } from '@angular/animations';
-import { ComponentRef, ElementRef, NgZone } from '@angular/core';
+import { ComponentRef, ElementRef, Injector, NgZone } from '@angular/core';
 import { CancelableBrowserEventArgs, CancelableEventArgs, cloneValue, IBaseEventArgs } from '../../core/utils';
 import { IgxOverlayOutletDirective } from '../../directives/toggle/toggle.directive';
 import { AnimationPlayer } from '../animation/animation';
@@ -189,6 +189,13 @@ export interface ConnectedFit {
     verticalOffset?: number;
 }
 
+export interface OverlayCreateSettings extends OverlaySettings {
+    /**
+     * An `Injector` instance to add in the created component ref's injectors tree.
+     */
+    injector?: Injector
+}
+
 /** @hidden @internal */
 export class Util {
     /**
diff --git a/projects/igniteui-angular/src/lib/services/public_api.ts b/projects/igniteui-angular/src/lib/services/public_api.ts

Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@`
`94`	`94`	`}`
`95`	`95`	`},`
`96`	`96`	`"igxDevDependencies": {`
`97`		`- "@igniteui/angular-schematics": "~18.0.1330"`
	`97`	`+ "@igniteui/angular-schematics": "~18.1.1340"`
`98`	`98`	`},`
`99`	`99`	`"ng-update": {`
`100`	`100`	`"migrations": "./migrations/migration-collection.json",`