Deprecated properties cleanup (#14323)

* refactor(banner): remove deprecated event arg

* refactor(column): remove deprecated movable prop

* refactor(pivot-grid): remove deprecated date dimension props

* refactor(overlay): remove deprecated position settings target

* refactor(overlay): remove deprecated attach overload module ref param

* chore(migrations): add banner event migration

* chore(combo): add migration for filterable prop

* docs(changelog): add entries for removed deprecated props

* test(overlay): fix unit tests that unintentionally trigger component creation

---------

Co-authored-by: Stamen Stoychev <[email protected]>

Author: damyanpetev

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes for each version of this project will be documented in this
 ## 18.0.0
 ### New Features
 - `IgxCombo`, `IgxSimpleCombo`:
-    - Introduced abillity for hiding the clear icon button when the custom clear icon template is empty.
+    - Introduced ability for hiding the clear icon button when the custom clear icon template is empty.
 - `IgxDateTimeEditor`, `IgxTimePicker`:
   - Now accept the following  custom `inputFormat` options, as Angular's DatePipe:
       - Fractional seconds: S, SS, SSS.
@@ -38,8 +38,15 @@ All notable changes for each version of this project will be documented in this
 
 ### General
 - Removed deprecated property `displayDensity`. Size is now controlled only through the custom CSS property `--ig-size`. Refer to the [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide) and components documentation for usage details.
-
-### General
+- `IgxBanner`
+    - Removed the deprecated `banner` property of `BannerEventArgs` and `BannerCancelEventArgs`. Automatic migration to `owner` is applied.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Removed the deprecated `movable` property of `IgxColumnComponent`.
+- `IgxOverlayService`
+    - Removed the deprecated `PositionSettings.target` (in favor of general `OverlaySettings.target`).
+    - Replaced deprecated `attach` method overload accepting `ComponentFactoryResolver` (trough `NgModuleRef`-like object) with shortcut overload that uses just the root scope and `createComponent`. The overload accepting `ViewComponentRef` is still recommended for local injection context.
+ - `IgxPivotGrid`
+    - The `IgxPivotDateDimension` deprecated getters `inBaseDimension` and `inOption` have been removed.
 - `IgxSimpleCombo`
     - **Behavioral Change** When bound to `ngModel` and `formControlName` directives, the model would not be updated when the user types into the input and will only be updated on selection.
 

projects/igniteui-angular/migrations/update-12_1_0/index.spec.ts

@@ -231,51 +231,6 @@ export class TestComponent implements OnInit {
 </igx-expansion-panel>`);
     });
 
-it('Should remove references to deprecated `banner` property of `BannerEventArgs`', async () => {
-    pending('set up tests for migrations through lang service');
-    appTree.create(
-        '/testSrc/appPrefix/component/expansion-test.component.ts',
-        `import { Component, ViewChild } from '@angular/core';
-import { IgxBanner } from 'igniteui-angular';
-
-@Component({
-selector: 'app-banner-test',
-templateUrl: './banner-test.component.html',
-styleUrls: ['./banner-test.component.scss']
-})
-export class BannerTestComponent {
-
-@ViewChild(IgxBannerComponent, { static: true })
-public panel: IgxBannerComponent;
-
-public onBannerOpened(event: BannerEventArgs) {
-    console.log(event.banner);
-}
-}`
-    );
-    const tree = await schematicRunner
-        .runSchematic('migration-17', {}, appTree);
-    const expectedContent =  `import { Component, ViewChild } from '@angular/core';
-import { IgxBanner } from 'igniteui-angular';
-
-@Component({
-selector: 'app-banner-test',
-templateUrl: './banner-test.component.html',
-styleUrls: ['./banner-test.component.scss']
-})
-export class BannerTestComponent {
-
-@ViewChild(IgxBannerComponent, { static: true })
-public panel: IgxBannerComponent;
-
-public onBannerOpened(event: BannerEventArgs) {
-    console.log(event.owner);
-}
-}`;
-    expect(
-            tree.readContent('/testSrc/appPrefix/component/expansion-test.component.ts')
-        ).toEqual(expectedContent);
-});
     it('should remove paging property and define a igx-paginator component instead', async () => {
         appTree.create(
             '/testSrc/appPrefix/component/test.component.html', `

projects/igniteui-angular/migrations/update-18_0_0/changes/inputs.json

@@ -161,6 +161,15 @@
                 "selector": "igx-pivot-grid",
                 "type": "component"
             }
+        },
+        {
+            "name": "filterable",
+            "replaceWith": "filteringOptions",
+            "valueTransform": "comboFilteringTransform",
+            "owner": {
+                "selector": "igx-combo",
+                "type": "component"
+            }
         }
     ]
 }

projects/igniteui-angular/migrations/update-18_0_0/changes/members.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../common/schema/members-changes.schema.json",
+    "changes": [
+        {
+            "member": "banner",
+            "replaceWith": "owner",
+            "definedIn": [
+                "BannerEventArgs",
+                "BannerCancelEventArgs"
+            ]
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-18_0_0/index.spec.ts

@@ -462,4 +462,69 @@ describe(`Update to ${version}`, () => {
             `$custom-bottom-nav: bottom-nav-theme($icon-selected-color: red);`
         );
     });
+
+    it('Should remove references to deprecated `banner` property of `BannerEventArgs`', async () => {
+        pending('set up tests for migrations through lang service');
+        appTree.create(
+            '/testSrc/appPrefix/component/expansion-test.component.ts',
+            `import { Component, ViewChild } from '@angular/core';
+import { IgxBanner } from 'igniteui-angular';
+
+@Component({
+selector: 'app-banner-test',
+templateUrl: './banner-test.component.html',
+styleUrls: ['./banner-test.component.scss']
+})
+export class BannerTestComponent {
+
+@ViewChild(IgxBannerComponent, { static: true })
+public panel: IgxBannerComponent;
+
+public onBannerOpened(event: BannerEventArgs) {
+    console.log(event.banner);
+}
+}`
+        );
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+        const expectedContent =  `import { Component, ViewChild } from '@angular/core';
+import { IgxBanner } from 'igniteui-angular';
+
+@Component({
+selector: 'app-banner-test',
+templateUrl: './banner-test.component.html',
+styleUrls: ['./banner-test.component.scss']
+})
+export class BannerTestComponent {
+
+@ViewChild(IgxBannerComponent, { static: true })
+public panel: IgxBannerComponent;
+
+public onBannerOpened(event: BannerEventArgs) {
+    console.log(event.owner);
+}
+}`;
+        expect(
+                tree.readContent('/testSrc/appPrefix/component/expansion-test.component.ts')
+            ).toEqual(expectedContent);
+    });
+
+    it('should replace Combo property `filterable` with `filteringOptions`', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-combo [filterable]="false"></igx-combo>
+        <igx-combo filterable="true"></igx-combo>
+        <igx-combo [filterable]="myProp"></igx-combo>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-combo [filteringOptions]="{ filterable: false }"></igx-combo>
+        <igx-combo [filteringOptions]="{ filterable: true }"></igx-combo>
+        <igx-combo [filteringOptions]="{ filterable: myProp }"></igx-combo>
+        `
+        );
+    });
 });

projects/igniteui-angular/migrations/update-18_0_0/index.ts

@@ -77,6 +77,21 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
         }
     });
 
+    update.addValueTransform('comboFilteringTransform', (args: BoundPropertyObject): void => {
+        args.bindingType = InputPropertyType.EVAL;
+
+        switch (args.value) {
+            case 'true':
+                args.value = '{ filterable: true }';
+                break;
+            case 'false':
+                args.value = '{ filterable: false }';
+                break;
+            default:
+                args.value = `{ filterable: ${args.value} }`;
+        }
+    });
+
     const updateMainCSSFile = (host: Tree, context: SchematicContext): Tree => {
         const angularConfigBuffer = host.read('angular.json');
         if (!angularConfigBuffer) {

projects/igniteui-angular/src/lib/banner/banner.component.ts

@@ -23,10 +23,6 @@ import { BannerResourceStringsEN, IBannerResourceStrings } from '../core/i18n/ba
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 
 export interface BannerEventArgs extends IBaseEventArgs {
-    /**
-     * @deprecated in 12.1.0. To get a reference to the banner, use `owner` instead
-     */
-    banner: IgxBannerComponent;
     event?: Event;
 }
 
@@ -221,9 +217,8 @@ export class IgxBannerComponent implements IToggleView {
      * ```
      */
     public open(event?: Event) {
-        this._bannerEvent = { banner: this, owner: this, event};
+        this._bannerEvent = { owner: this, event};
         const openingArgs: BannerCancelEventArgs = {
-            banner: this,
             owner: this,
             event,
             cancel: false
@@ -250,9 +245,8 @@ export class IgxBannerComponent implements IToggleView {
      * ```
      */
     public close(event?: Event) {
-        this._bannerEvent = { banner: this, owner: this, event};
+        this._bannerEvent = { owner: this, event};
         const closingArgs: BannerCancelEventArgs = {
-            banner: this,
             owner: this,
             event,
             cancel: false

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

@@ -16,7 +16,6 @@ import { DateRangeType } from '../core/dates';
 import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api';
 import { AutoPositionStrategy, IgxOverlayService } from '../services/public_api';
 import { AnimationMetadata, AnimationOptions } from '@angular/animations';
-import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { IgxCalendarComponent, WEEKDAYS } from '../calendar/public_api';
 import { Subject } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
@@ -47,8 +46,6 @@ const CSS_CLASS_INACTIVE_DATE = 'igx-days-view__date--inactive';
 describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
         let mockElement: any;
-        let mockElementRef: any;
-        let mockFactoryResolver: any;
         let mockApplicationRef: any;
         let mockAnimationBuilder: any;
         let mockDocument: any;
@@ -67,17 +64,6 @@ describe('IgxDateRangePicker', () => {
                 'registerOnValidatorChangeCb']);
         /* eslint-disable @typescript-eslint/no-unused-vars */
         beforeEach(() => {
-            mockFactoryResolver = {
-                resolveComponentFactory: (c: any) => ({
-                    create: (i: any) => ({
-                        hostView: '',
-                        location: mockElementRef,
-                        changeDetectorRef: { detectChanges: () => { } },
-                        destroy: () => { },
-                        instance: new IgxCalendarContainerComponent()
-                    })
-                })
-            };
             mockElement = {
                 style: { visibility: '', cursor: '', transitionDuration: '' },
                 classList: { add: () => { }, remove: () => { } },
@@ -91,7 +77,6 @@ describe('IgxDateRangePicker', () => {
             };
             mockElement.parent = mockElement;
             mockElement.parentElement = mockElement;
-            mockElementRef = { nativeElement: mockElement };
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             mockApplicationRef = { attachView: (h: any) => { }, detachView: (h: any) => { } };
             mockInjector = jasmine.createSpyObj('Injector', {
@@ -143,7 +128,7 @@ describe('IgxDateRangePicker', () => {
             mockPlatformUtil = { isIOS: false };
             mockAnimationService = new IgxAngularAnimationService(mockAnimationBuilder);
             overlay = new IgxOverlayService(
-                mockFactoryResolver, mockApplicationRef, mockInjector, mockDocument, mockNgZone, mockPlatformUtil, mockAnimationService);
+                mockApplicationRef, mockDocument, mockNgZone, mockPlatformUtil, mockAnimationService);
             mockCalendar = new IgxCalendarComponent(platform, 'en');
 
             mockDaysView = {
@@ -264,15 +249,6 @@ describe('IgxDateRangePicker', () => {
             dateRange.minValue = new Date(2000, 10, 1);
             dateRange.maxValue = new Date(2000, 10, 20);
 
-            dateRange.open({
-                closeOnOutsideClick: true,
-                modal: false,
-                target: dateRange.element.nativeElement,
-                positionStrategy: new AutoPositionStrategy({
-                    openAnimation: null,
-                    closeAnimation: null
-                })
-            });
             (dateRange as any).updateCalendar();
             expect(mockCalendar.disabledDates.length).toEqual(2);
             expect(mockCalendar.disabledDates[0].type).toEqual(DateRangeType.Before);

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -171,8 +171,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
 
     private get settings(): OverlaySettings {
         const settings = Object.assign({}, this.defaultSettings, this.autocompleteSettings);
-        const target = settings.target || settings.positionStrategy.settings.target;
-        if (!target) {
+        if (!settings.target) {
             const positionStrategyClone: IPositionStrategy = settings.positionStrategy.clone();
             settings.target = this.parentElement;
             settings.positionStrategy = positionStrategyClone;

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -440,21 +440,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
     @WatchColumnChanges()
     @Input({ transform: booleanAttribute })
     public disablePinning = false;
-    /**
-     * Sets/gets whether the column is movable.
-     * Default value is `false`.
-     *
-     * ```typescript
-     * let isMovable = this.column.movable;
-     * ```
-     * ```html
-     * <igx-column [movable] = "true"></igx-column>
-     * ```
-     *
-     * @deprecated in version 13.1.0. Use the Grid's `moving` property instead.
-     */
-    @Input({ transform: booleanAttribute })
-    public movable = false;
+
     /**
      * Gets the `width` of the column.
      * ```typescript