feat(*): refactor for typescript 4 support #8116

damyanpetev · damyanpetev · commit af8be033ada7 · 2020-09-14T17:13:55.000+03:00
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
@@ -132,7 +132,12 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
      * ```
      */
     @Input('igxAutocomplete')
-    public target: IgxDropDownComponent;
+    public get target(): IgxDropDownComponent {
+        return this._target as IgxDropDownComponent;
+    }
+    public set target(v: IgxDropDownComponent) {
+        this._target = v;
+    }
 
     /**
      * Enables/disables autocomplete component
diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts
@@ -1331,7 +1331,13 @@ export class IgxDropDirective implements OnInit, OnDestroy {
      * @memberof IgxDropDirective
      */
     @Input('igxDrop')
-    public data: any;
+    private _data: any;
+    public get data(): any {
+        return this._data;
+    }
+    public set data(v: any) {
+        this._data = v;
+    }
 
     /**
      * An @Input property that provide a way for igxDrag and igxDrop to be linked through channels.
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts
@@ -17,10 +17,8 @@ let NEXT_ID = 0;
  * Properties and methods for navigating (highlighting/focusing) items from the collection
  * Properties and methods for selecting items from the collection
  */
-@Directive({
-    selector: '[igxDropDownBase]'
-})
-export class IgxDropDownBaseDirective extends DisplayDensityBase implements IDropDownList {
+@Directive()
+export abstract class IgxDropDownBaseDirective extends DisplayDensityBase implements IDropDownList {
     protected _width;
     protected _height;
     protected _focusedItem: any = null;
@@ -93,7 +91,12 @@ export class IgxDropDownBaseDirective extends DisplayDensityBase implements IDro
      * ```
      */
     @Input()
-    public id: string;
+    public get id(): string {
+        return this._id;
+    }
+    public set id(value: string) {
+        this._id = value;
+    }
 
     /**
      * Gets/Sets the drop down's container max height.
@@ -171,7 +174,7 @@ export class IgxDropDownBaseDirective extends DisplayDensityBase implements IDro
     /**
      * Gets if the dropdown is collapsed
      */
-    public collapsed: boolean;
+    public abstract readonly collapsed: boolean;
 
     constructor(
         protected elementRef: ElementRef,
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
@@ -162,11 +162,10 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         this.selection.set(`${this.id}-active`, new Set([this._focusedItem]));
     }
 
-    @Input()
-    get id(): string {
+    public get id(): string {
         return this._id;
     }
-    set id(value: string) {
+    public set id(value: string) {
         this.selection.set(value, this.selection.get(this.id));
         this.selection.clear(this.id);
         this.selection.set(value, this.selection.get(`${this.id}-active`));
@@ -460,9 +459,9 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
     /**
      * @hidden @internal
      */
-    // temp workaround until fix --> https://github.com/angular/angular/issues/34992
     ngOnChanges(changes: SimpleChanges) {
         if (changes.id) {
+            // temp workaround until fix --> https://github.com/angular/angular/issues/34992
             this.toggleDirective.id = changes.id.currentValue;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/drop-down/public_api.ts b/projects/igniteui-angular/src/lib/drop-down/public_api.ts
@@ -4,9 +4,7 @@ import { IgxDropDownItemComponent } from './drop-down-item.component';
 import { IgxDropDownItemNavigationDirective } from './drop-down-navigation.directive';
 import { CommonModule } from '@angular/common';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
-import { IgxSelectionAPIService } from '../core/selection';
 import { IgxDropDownGroupComponent } from './drop-down-group.component';
-import { IgxDropDownBaseDirective } from './drop-down.base';
 import { IgxDropDownItemBaseDirective } from './drop-down-item.base';
 
 export * from './drop-down.component';
@@ -22,7 +20,6 @@ export * from './drop-down-group.component';
  */
 @NgModule({
     declarations: [
-        IgxDropDownBaseDirective,
         IgxDropDownComponent,
         IgxDropDownItemBaseDirective,
         IgxDropDownItemComponent,
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -421,7 +421,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     @Input()
     @HostBinding('class.igx-grid__td--active')
-    public active: boolean;
+    public active = false;
 
     @HostBinding('attr.aria-selected')
     get ariaSelected() {
@@ -547,6 +547,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             };
     }
 
+    /** @hidden @internal @deprecated */
     public focused = this.active;
     protected compositionStartHandler;
     protected compositionEndHandler;
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts
@@ -159,12 +159,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
      * @memberof IgxColumnGroupComponent
      */
     @Input()
-    get collapsibleIndicatorTemplate(): TemplateRef<any> {
-        return this._collapseIndicatorTemplate;
-    }
-    set collapsibleIndicatorTemplate(template: TemplateRef<any>) {
-        this._collapseIndicatorTemplate = template;
-    }
+    public collapsibleIndicatorTemplate: TemplateRef<any>;
 
     /**
      * Returns a reference to the inline editor template.
@@ -271,7 +266,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             this._headerTemplate = this.headTemplate.toArray()[0].template;
         }
         if (this.collapseIndicatorTemplate) {
-            this._collapseIndicatorTemplate = this.collapseIndicatorTemplate.template;
+            this.collapsibleIndicatorTemplate = this.collapseIndicatorTemplate.template;
         }
         // currently only ivy fixes the issue, we have to slice only if the first child is group
         if (this.children.first === this) {
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -976,7 +976,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     }
 
     /** @hidden */
-    @Input('collapsibleIndicatorTemplate')
+    @Input()
     public collapsibleIndicatorTemplate: TemplateRef<any>;
     /**
      * Gets the cells of the column.
@@ -1191,13 +1191,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * @hidden
      * @internal
      */
-    public collapsible = false;
+    public get collapsible() { return false; }
+    public set collapsible(_value: boolean) {}
 
     /**
      * @hidden
      * @internal
      */
-    public expanded = true;
+    public get expanded() { return true; }
+    public set expanded(_value: boolean) {}
 
     /**
      * hidden
@@ -1271,10 +1273,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * @hidden
      */
     protected _filterCellTemplate: TemplateRef<any>;
-    /**
-     * @hidden
-     */
-    protected _collapseIndicatorTemplate: TemplateRef<any>;
     /**
      * @hidden
      */
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -161,10 +161,8 @@ const MIN_ROW_EDITING_COUNT_THRESHOLD = 2;
 
 export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction');
 
-@Directive({
-    selector: '[igxGridBaseComponent]'
-})
-export class IgxGridBaseDirective extends DisplayDensityBase implements
+@Directive()
+export abstract class IgxGridBaseDirective extends DisplayDensityBase implements GridType,
     OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
     private _customDragIndicatorIconTemplate: TemplateRef<any>;
     protected _init = true;
@@ -247,7 +245,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    public id: string;
+    public abstract id: string;
 
     /**
      * Gets/Sets a custom template when empty.
@@ -2535,8 +2533,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public unpinnedRecords: any[];
 
-    data: any[];
-    filteredData: any[];
+    abstract data: any[];
+    abstract filteredData: any[];
 
     /**
      * @hidden
diff --git a/projects/igniteui-angular/src/lib/grids/grid-common.module.ts b/projects/igniteui-angular/src/lib/grids/grid-common.module.ts
@@ -4,7 +4,7 @@ import { IgxGridFooterComponent } from './grid-footer/grid-footer.component';
 import {
     IgxGridBodyDirective
 } from './grid.common';
-import { IgxGridTransaction, IgxGridBaseDirective } from './grid-base.directive';
+import { IgxGridTransaction } from './grid-base.directive';
 import { IgxBaseTransactionService } from '../services/transaction/base-transaction';
 import {
     IgxRowEditTemplateDirective,
@@ -35,7 +35,6 @@ import { IgxRowDirective } from './row.directive';
  */
 @NgModule({
     declarations: [
-        IgxGridBaseDirective,
         IgxRowDirective,
         IgxGridCellComponent,
         IgxRowEditTemplateDirective,
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.directive.ts
@@ -47,14 +47,11 @@ export interface IPathSegment {
     rowIslandKey: string;
 }
 
-@Directive({
-    selector: '[igxHierarchicalGridBase]'
-})
-export class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
-    public rootGrid;
+@Directive()
+export abstract class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
+    public abstract rootGrid;
 
-    @Input()
-    public expandChildren: boolean;
+    public abstract expandChildren: boolean;
 
     @Input()
     public hasChildrenKey: string;
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts
@@ -7,14 +7,12 @@ import { IgxRowIslandComponent } from './row-island.component';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
 import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component';
 import { IgxGridComponent } from '../grid/grid.component';
-import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.directive';
 
 /**
  * @hidden
  */
 @NgModule({
   declarations: [
-    IgxHierarchicalGridBaseDirective,
     IgxHierarchicalGridComponent,
     IgxHierarchicalRowComponent,
     IgxRowIslandComponent,
diff --git a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts
@@ -16,12 +16,10 @@ import { IgxColumnMovingService } from './moving.service';
 export class IgxColumnMovingDragDirective extends IgxDragDirective implements OnDestroy {
 
     @Input('igxColumnMovingDrag')
-    set data(val) {
-        this._column = val;
-    }
+    public data: any;
 
-    get column() {
-        return this._column;
+    get column(): IgxColumnComponent {
+        return this.data;
     }
 
     get draggable(): boolean {
@@ -33,7 +31,6 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On
     }
 
     private subscription$: Subscription;
-    private _column: IgxColumnComponent;
     private _ghostClass = 'igx-grid__drag-ghost-image';
     private ghostImgIconClass = 'igx-grid__drag-ghost-image-icon';
     private ghostImgIconGroupClass = 'igx-grid__drag-ghost-image-icon-group';
diff --git a/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts b/projects/igniteui-angular/src/lib/grids/row-drag.directive.ts
@@ -21,18 +21,14 @@ const cellActiveClass = 'igx-grid__td--active';
     selector: '[igxRowDrag]'
 })
 export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
-    private row: IgxRowDirective<IgxGridBaseDirective & GridType>;
     private subscription$: Subscription;
     private _rowDragStarted = false;
-
-    @Input('igxRowDrag')
-    set data(val) {
-        this.row = val;
+    private get row(): IgxRowDirective<IgxGridBaseDirective & GridType> {
+        return this.data;
     }
 
-    get data() {
-        return this.row;
-    }
+    @Input('igxRowDrag')
+    public data: any;
 
     public onPointerDown(event) {
         event.preventDefault();
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -23,20 +23,20 @@
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="true">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused"  type="number">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="true"  type="number">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
         <igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
-        [locale]="grid.locale" [(value)]="editValue" [igxFocus]="focused" [labelVisibility]="false">
+        [locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
     </igx-date-picker>
     </ng-container>
 </ng-template>
diff --git a/projects/igniteui-angular/src/lib/select/select-navigation.directive.ts b/projects/igniteui-angular/src/lib/select/select-navigation.directive.ts
@@ -9,9 +9,15 @@ import { IgxSelectBase } from './select.common';
     selector: '[igxSelectItemNavigation]'
 })
 export class IgxSelectItemNavigationDirective extends IgxDropDownItemNavigationDirective implements OnDestroy {
+    protected _target: IgxSelectBase = null;
 
     @Input('igxSelectItemNavigation')
-    public target: IgxSelectBase;
+    get target(): IgxSelectBase {
+        return this._target;
+    }
+    set target(target: IgxSelectBase) {
+        this._target = target ? target : this.dropdown as IgxSelectBase;
+    }
 
     constructor() { super(null); }
 
diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts
@@ -2858,7 +2858,7 @@ class IgxSelectReactiveFormComponent {
     ];
 
     public validationType = {
-        'firstName': new FormControl(Validators.required, Validators.pattern('^[\\w\\s/-/(/)]{3,50}$')),
+        'firstName': [Validators.required, Validators.pattern('^[\\w\\s/-/(/)]{3,50}$')],
         'password': [Validators.required, Validators.maxLength(12)],
         'optionsSelect': [Validators.required]
     };
diff --git a/projects/igniteui-angular/src/lib/tabs/tabs.common.ts b/projects/igniteui-angular/src/lib/tabs/tabs.common.ts
@@ -22,7 +22,7 @@ export abstract class IgxTabsBase {
 
 /** @hidden */
 export abstract class IgxTabItemBase {
-    nativeTabItem: ElementRef;
+    abstract readonly nativeTabItem: ElementRef;
     get index(): number { return 0; }
     select(): void {}
     setSelectedInternal(newValue: boolean) {}
diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts
@@ -14,8 +14,8 @@ export class DateRangeSampleComponent {
     public range3: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
     public range4: DateRange;
     public range5: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };
-    public range6Start;
-    public range6End;
+    public range6Start = null;
+    public range6End = null;
     public range6: DateRange = { start: this.range6Start, end: this.range6End };
     public minDate: Date = new Date();
     public maxDate: Date = new Date(new Date().setDate(new Date().getDate() + 25));

Original file line number	Diff line number	Diff line change
`@@ -162,11 +162,10 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID`
`162`	`162`	this.selection.set(`${this.id}-active`, new Set([this._focusedItem]));
`163`	`163`	`}`
`164`	`164`
`165`		`- @Input()`
`166`		`- get id(): string {`
	`165`	`+ public get id(): string {`
`167`	`166`	`return this._id;`
`168`	`167`	`}`
`169`		`- set id(value: string) {`
	`168`	`+ public set id(value: string) {`
`170`	`169`	`this.selection.set(value, this.selection.get(this.id));`
`171`	`170`	`this.selection.clear(this.id);`
`172`	`171`	this.selection.set(value, this.selection.get(`${this.id}-active`));
`@@ -460,9 +459,9 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID`
`460`	`459`	`/**`
`461`	`460`	`* @hidden @internal`
`462`	`461`	`*/`
`463`		`- // temp workaround until fix --> https://github.com/angular/angular/issues/34992`
`464`	`462`	`ngOnChanges(changes: SimpleChanges) {`
`465`	`463`	`if (changes.id) {`
	`464`	`+ // temp workaround until fix --> https://github.com/angular/angular/issues/34992`
`466`	`465`	`this.toggleDirective.id = changes.id.currentValue;`
`467`	`466`	`}`
`468`	`467`	`}`