refactor(*): Transform abs base classes to directives

Author: rkaraivanov

projects/igniteui-angular/src/lib/core/displayDensity.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, Input, Output, EventEmitter, DoCheck, OnInit } from '@angular/core';
+import { InjectionToken, Input, Output, EventEmitter, DoCheck, OnInit, Directive, NgModule, Optional, Inject } from '@angular/core';
 import { IBaseEventArgs } from './utils';
 
 
@@ -31,6 +31,10 @@ export const DisplayDensityToken = new InjectionToken<IDisplayDensityOptions>('D
 /**
  * Base class containing all logic required for implementing DisplayDensity.
  */
+@Directive({
+    selector: '[igxDisplayDensityBase]'
+})
+// tslint:disable-next-line: directive-class-suffix
 export class DisplayDensityBase implements DoCheck, OnInit {
     protected _displayDensity: DisplayDensity;
 
@@ -76,7 +80,7 @@ export class DisplayDensityBase implements DoCheck, OnInit {
     protected oldDisplayDensityOptions: IDisplayDensityOptions = { displayDensity: DisplayDensity.comfortable };
 
 
-    constructor(protected displayDensityOptions: IDisplayDensityOptions) {
+    constructor(@Optional() @Inject(DisplayDensityToken) protected displayDensityOptions: IDisplayDensityOptions) {
         Object.assign(this.oldDisplayDensityOptions, displayDensityOptions);
     }
 
@@ -115,3 +119,13 @@ export class DisplayDensityBase implements DoCheck, OnInit {
         }
     }
 }
+
+@NgModule({
+    declarations: [
+        DisplayDensityBase
+    ],
+    exports: [
+        DisplayDensityBase
+    ]
+})
+export class IgxDisplayDensityModule {}

projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts

@@ -1,5 +1,5 @@
 import {
-    Input, HostBinding, ElementRef, QueryList, Output, EventEmitter, ChangeDetectorRef, Optional, Inject
+    Input, HostBinding, ElementRef, QueryList, Output, EventEmitter, ChangeDetectorRef, Optional, Inject, Directive
 } from '@angular/core';
 
 import { Navigate, ISelectionEventArgs } from './drop-down.common';
@@ -17,7 +17,10 @@ let NEXT_ID = 0;
  * Properties and methods for navigating (highlighting/focusing) items from the collection
  * Properties and methods for selecting items from the collection
  */
-export abstract class IgxDropDownBase extends DisplayDensityBase implements IDropDownList {
+@Directive({
+    selector: '[igxDropDownBase]'
+})
+export class IgxDropDownBase extends DisplayDensityBase implements IDropDownList {
     protected _width;
     protected _height;
     protected _focusedItem: any = null;
@@ -167,7 +170,7 @@ export abstract class IgxDropDownBase extends DisplayDensityBase implements IDro
     /**
      * Gets if the dropdown is collapsed
      */
-    public abstract collapsed: boolean;
+    public collapsed: boolean;
 
     constructor(
         protected elementRef: ElementRef,

projects/igniteui-angular/src/lib/drop-down/index.ts

@@ -6,6 +6,7 @@ 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 { IgxDropDownBase } from './drop-down.base';
 
 export * from './drop-down.component';
 export * from './drop-down-item.component';
@@ -19,11 +20,22 @@ export * from './drop-down-group.component';
  * @hidden
  */
 @NgModule({
-    declarations: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent,
-        IgxDropDownItemNavigationDirective],
-    exports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent,
-        IgxDropDownItemNavigationDirective],
-    imports: [CommonModule, IgxToggleModule],
-    providers: [IgxSelectionAPIService]
+    declarations: [
+        IgxDropDownBase,
+        IgxDropDownComponent,
+        IgxDropDownItemComponent,
+        IgxDropDownGroupComponent,
+        IgxDropDownItemNavigationDirective
+    ],
+    exports: [
+        IgxDropDownComponent,
+        IgxDropDownItemComponent,
+        IgxDropDownGroupComponent,
+        IgxDropDownItemNavigationDirective
+    ],
+    imports: [
+        CommonModule,
+        IgxToggleModule
+    ]
 })
 export class IgxDropDownModule { }

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -1,4 +1,4 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseComponent } from '../grid-base.component';
 import { DataUtil } from '../../data-operations/data-util';
@@ -147,10 +147,10 @@ export class IgxDatePipeComponent extends DatePipe implements PipeTransform {
 
     private readonly DEFAULT_DATE_FORMAT = 'mediumDate';
 
-    // constructor(@Inject(LOCALE_ID) locale: string) {
-    //     // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-    //     super(locale);
-    // }
+    constructor(@Inject(LOCALE_ID) locale: string) {
+        // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
+        super(locale);
+    }
     transform(value: any, locale: string): string {
         if (value && value instanceof Date) {
             if (locale) {
@@ -172,10 +172,10 @@ export class IgxDatePipeComponent extends DatePipe implements PipeTransform {
     name: 'igxdecimal'
 })
 export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransform {
-    // constructor(@Inject(LOCALE_ID) locale: string) {
-    //     // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-    //     super(locale);
-    // }
+    constructor(@Inject(LOCALE_ID) locale: string) {
+        // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
+        super(locale);
+    }
     transform(value: any, locale: string): string {
         if (value && typeof value === 'number') {
             if (locale) {

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -25,7 +25,7 @@ import {
     InjectionToken,
     Optional,
     DoCheck,
-    Injectable
+    Directive
 } from '@angular/core';
 import ResizeObserver from 'resize-observer-polyfill';
 import { Subject, combineLatest, pipe } from 'rxjs';
@@ -121,8 +121,10 @@ export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction
 
 
 
-@Injectable()
-export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
+@Directive({
+    selector: '[igxGridBaseComponent]'
+})
+export class IgxGridBaseComponent extends DisplayDensityBase implements
     OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
     private _scrollWidth: number;
     protected _init = true;
@@ -198,7 +200,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @Input()
     public autoGenerate = false;
 
-    public abstract id: string;
+    public id: string;
 
     /**
      * An @Input property that sets a custom template when the `IgxGridComponent` is empty.
@@ -2545,8 +2547,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      */
     public columnWidthSetByUser = false;
 
-    abstract data: any[];
-    abstract filteredData: any[];
+    data: any[];
+    filteredData: any[];
 
     /**
      * @hidden

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 } from './grid-base.component';
+import { IgxGridTransaction, IgxGridBaseComponent } from './grid-base.component';
 import { IgxBaseTransactionService } from '../services/transaction/base-transaction';
 import {
     IgxRowEditTemplateDirective,
@@ -28,11 +28,14 @@ import { IgxColumnPinningModule } from './pinning/pinning.module';
 import { IgxGridColumnModule } from './columns/column.module';
 import { IgxGridHeadersModule } from './headers/headers.module';
 import { IgxGridFilteringModule } from './filtering/base/filtering.module';
+import { IgxRowComponent } from './row.component';
 /**
  * @hidden
  */
 @NgModule({
     declarations: [
+        IgxGridBaseComponent,
+        IgxRowComponent,
         IgxGridCellComponent,
         IgxRowEditTemplateDirective,
         IgxRowEditActionsDirective,

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts

@@ -9,7 +9,8 @@ import {
     Optional,
     Input,
     ViewChild,
-    TemplateRef
+    TemplateRef,
+    Directive
 } from '@angular/core';
 import { IgxGridBaseComponent, IgxGridTransaction } from '../grid-base.component';
 import { GridBaseAPIService } from '../api.service';
@@ -43,8 +44,11 @@ export interface IPathSegment {
     rowIslandKey: string;
 }
 
-export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseComponent {
-    public abstract rootGrid;
+@Directive({
+    selector: '[igxHGridBase]'
+})
+export class IgxHierarchicalGridBaseComponent extends IgxGridBaseComponent {
+    public rootGrid;
 
     @Input()
     public expandChildren: boolean;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts

@@ -7,12 +7,14 @@ 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 { IgxHierarchicalGridBaseComponent } from './hierarchical-grid-base.component';
 
 /**
  * @hidden
  */
 @NgModule({
   declarations: [
+    IgxHierarchicalGridBaseComponent,
     IgxHierarchicalGridComponent,
     IgxHierarchicalRowComponent,
     IgxRowIslandComponent,

projects/igniteui-angular/src/lib/grids/row.component.ts

@@ -9,7 +9,7 @@ import {
     QueryList,
     ViewChild,
     ViewChildren,
-    Injectable
+    Directive
 } from '@angular/core';
 import { IgxCheckboxComponent } from '../checkbox/checkbox.component';
 import { IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
@@ -22,8 +22,10 @@ import { IgxGridSelectionService, IgxGridCRUDService, IgxRow } from './selection
 import { DeprecateProperty } from '../core/deprecateDecorators';
 import { GridType } from './common/grid.interface';
 
-@Injectable()
-export abstract class IgxRowComponent<T extends IgxGridBaseComponent & GridType> implements DoCheck {
+@Directive({
+    selector: '[igxRowBaseComponent]'
+})
+export class IgxRowComponent<T extends IgxGridBaseComponent & GridType> implements DoCheck {
 
     private _rowData: any;
     /**

projects/igniteui-angular/src/lib/list/list.common.ts

@@ -6,7 +6,10 @@ export interface IListChild {
 }
 
 /** @hidden */
-export abstract class IgxListBase extends DisplayDensityBase {
+@Directive({
+    selector: '[igxListBase]'
+})
+export class IgxListBase extends DisplayDensityBase {
     onItemClicked: EventEmitter<any>;
     allowLeftPanning: boolean;
     allowRightPanning: boolean;