refactor(es6): resolve es6+ compile errors and most circular deps #3011

Use base class or a token/interface combo for DI child components to avoid Circular dependency warnings and compilation errors in targets es2015 and newer. Added explicit constructors in extending classes as DI metadata doesn't get added otherwise (subject to fixes in ng compiler) Also resolved some general circular refs and updated tests that wouldn't work with es6. Affected: list, calendar, combo, input-group, drop-down, expansion-panel, grids, tabs, time-picker
IgniteUI · Nov 26, 2018 · f5f025b · f5f025b
1 parent 7e57898
commit f5f025b
Show file tree

Hide file tree

Showing 50 changed files with 1,188 additions and 985 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -15,7 +15,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
 import { fadeIn, scaleInCenter, slideInLeft, slideInRight } from '../animations/main';
-import { Calendar, ICalendarDate, range, WEEKDAYS } from './calendar';
+import { Calendar, ICalendarDate, range, WEEKDAYS, IGX_CALENDAR_COMPONENT } from './calendar';
 import {
     IgxCalendarDateDirective,
     IgxCalendarHeaderTemplateDirective,
@@ -89,6 +89,10 @@ export class CalendarHammerConfig extends HammerGestureConfig {
         {
             provide: HAMMER_GESTURE_CONFIG,
             useClass: CalendarHammerConfig
+        },
+        {
+            provide: IGX_CALENDAR_COMPONENT,
+            useExisting: IgxCalendarComponent
         }
     ],
     selector: 'igx-calendar',

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts b/projects/igniteui-angular/src/lib/calendar/calendar.directives.ts
@@ -13,10 +13,10 @@ import {
     HostListener,
     Input,
     Output,
-    TemplateRef
+    TemplateRef,
+    Inject
 } from '@angular/core';
-import { ICalendarDate } from './calendar';
-import { IgxCalendarComponent } from './calendar.component';
+import { ICalendarDate, IGX_CALENDAR_COMPONENT, IgxCalendarBase } from './calendar';
 
 /**
  * @hidden
@@ -46,7 +46,7 @@ export class IgxCalendarYearDirective {
         return this.calendar.isCurrentYear(this.value);
     }
 
-    constructor(@Host() public calendar: IgxCalendarComponent) {}
+    constructor(@Inject(IGX_CALENDAR_COMPONENT) public calendar: IgxCalendarBase) {}
 
     @HostListener('click')
     public onClick() {
@@ -82,7 +82,7 @@ export class IgxCalendarMonthDirective {
         return this.calendar.isCurrentMonth(this.value);
     }
 
-    constructor(@Host() public calendar: IgxCalendarComponent) {}
+    constructor(@Inject(IGX_CALENDAR_COMPONENT) public calendar: IgxCalendarBase) {}
 
     @HostListener('click')
     public onClick() {
@@ -203,7 +203,7 @@ export class IgxCalendarDateDirective {
 
     private _selected = false;
 
-    constructor(@Host() public calendar: IgxCalendarComponent, private elementRef: ElementRef) { }
+    constructor(@Inject(IGX_CALENDAR_COMPONENT) public calendar: IgxCalendarBase, private elementRef: ElementRef) { }
 
     @HostListener('click')
     @HostListener('keydown.enter')

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.ts b/projects/igniteui-angular/src/lib/calendar/calendar.ts
@@ -270,3 +270,14 @@ export class Calendar {
         return date.getFullYear() > year;
     }
 }
+
+export const IGX_CALENDAR_COMPONENT = 'IgxCalendarComponentToken';
+
+export interface IgxCalendarBase {
+    value: Date | Date[];
+    selection: string;
+    isCurrentYear(value: Date): boolean;
+    isCurrentMonth(value: Date): boolean;
+    isDateDisabled(value: Date): boolean;
+    isDateSpecial(value: Date): boolean;
+}
diff --git a/projects/igniteui-angular/src/lib/calendar/index.ts b/projects/igniteui-angular/src/lib/calendar/index.ts
@@ -1,4 +1,4 @@
 export * from './calendar';
-export * from './calendar.directives';
 export * from './calendar.component';
+export * from './calendar.directives';
 export * from './calendar.module';
diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts
@@ -3,19 +3,20 @@ import {
     ElementRef, forwardRef, Inject, QueryList, EventEmitter, OnDestroy
 } from '@angular/core';
 import { takeUntil, take } from 'rxjs/operators';
-import { IgxDropDownBase, Navigate } from '../drop-down/drop-down.component';
-import { IgxDropDownItemBase } from '../drop-down/drop-down-item.component';
-import { IgxComboComponent } from './combo.component';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { Subject } from 'rxjs';
 import { CancelableEventArgs } from '../core/utils';
+import { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common';
+import { IgxDropDownBase, IgxDropDownItemBase } from '../drop-down/drop-down.base';
+import { Navigate } from '../drop-down/drop-down.common';
 
 /** @hidden */
 @Component({
     selector: 'igx-combo-drop-down',
-    templateUrl: '../drop-down/drop-down.component.html'
+    templateUrl: '../drop-down/drop-down.component.html',
+    providers: [{ provide: IgxDropDownBase, useExisting: IgxComboDropDownComponent }]
 })
 export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDestroy {
     private _children: QueryList<IgxDropDownItemBase>;
@@ -25,8 +26,7 @@ export class IgxComboDropDownComponent extends IgxDropDownBase implements OnDest
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
         protected selection: IgxSelectionAPIService,
-        @Inject(forwardRef(() => IgxComboComponent))
-        public combo: IgxComboComponent) {
+        @Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) {
         super(elementRef, cdr, selection);
     }
 

diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts
@@ -8,18 +8,15 @@ import {
     Input
 } from '@angular/core';
 import { IgxSelectionAPIService } from '../core/selection';
-import { IgxDropDownItemBase } from '../drop-down/drop-down-item.component';
-import { IgxComboDropDownComponent } from './combo-dropdown.component';
+import { IgxDropDownBase, IgxDropDownItemBase } from '../drop-down/drop-down.base';
+import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
 
 /** @hidden */
 @Component({
     selector: 'igx-combo-item',
     templateUrl: 'combo-item.component.html'
 })
 export class IgxComboItemComponent extends IgxDropDownItemBase {
-    private get combo() {
-        return this.dropDown.combo;
-    }
 
     /**
      * Gets the height of a list item
@@ -37,7 +34,8 @@ export class IgxComboItemComponent extends IgxDropDownItemBase {
     }
 
     constructor(
-        @Inject(forwardRef(() => IgxComboDropDownComponent)) public dropDown: IgxComboDropDownComponent,
+        @Inject(IGX_COMBO_COMPONENT) private combo: IgxComboBase,
+        public dropDown: IgxDropDownBase,
         protected elementRef: ElementRef,
         protected selection: IgxSelectionAPIService
     ) {

diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts
@@ -0,0 +1,35 @@
+import { ElementRef, EventEmitter, QueryList } from '@angular/core';
+import { CancelableEventArgs } from '../core/utils';
+import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
+import { IgxDropDownItemBase } from '../drop-down/drop-down.base';
+
+export const IGX_COMBO_COMPONENT = 'IgxComboComponentToken';
+
+/** @hidden @internal TODO: Evaluate */
+export interface IgxComboBase {
+    id: string;
+    children: QueryList<IgxDropDownItemBase>;
+    data: any[];
+    valueKey: string;
+    groupKey: string;
+    isRemote: boolean;
+    filteredData: any[];
+    filteringExpressions: IFilteringExpression[];
+    totalItemCount: number;
+    itemsMaxHeight: number;
+    itemHeight: number;
+    searchValue: string;
+    searchInput: ElementRef<HTMLInputElement>;
+    comboInput: ElementRef<HTMLInputElement>;
+    onOpened: EventEmitter<void>;
+    onOpening: EventEmitter<CancelableEventArgs>;
+    onClosing: EventEmitter<CancelableEventArgs>;
+    onClosed: EventEmitter<void>;
+
+    triggerCheck();
+    setSelectedItem(itemID: any, select?: boolean);
+    isItemSelected(item: any): boolean;
+    addItemToCollection();
+    isAddButtonVisible(): boolean;
+    handleInputChange(event?);
+}
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -4,7 +4,6 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
-import { IgxDropDownBase, Navigate } from '../drop-down/drop-down.component';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboComponent, IgxComboModule, IgxComboState } from './combo.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
@@ -15,6 +14,8 @@ import { take } from 'rxjs/operators';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
 import { configureTestSuite } from '../test-utils/configure-suite';
+import { IgxDropDownBase } from '../drop-down/drop-down.base';
+import { Navigate } from '../drop-down/drop-down.common';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -382,7 +383,6 @@ describe('igxCombo', () => {
             spyOn(combo.dropdown, 'onToggleOpened').and.callThrough();
             spyOn(combo.dropdown, 'onToggleClosing').and.callThrough();
             spyOn(combo.dropdown, 'onToggleClosed').and.callThrough();
-            spyOn<any>(combo, 'cdr').and.callThrough();
             expect(combo.dropdown.collapsed).toEqual(true);
             combo.dropdown.toggle();
             tick();

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -25,7 +25,6 @@ import { IgxForOfModule, IForOfState } from '../directives/for-of/for_of.directi
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { IgxButtonModule } from '../directives/button/button.directive';
-import { IgxDropDownItemBase } from '../drop-down/drop-down-item.component';
 import { IgxDropDownModule } from '../drop-down/drop-down.component';
 import { IgxIconModule } from '../icon/index';
 import { IgxInputGroupModule } from '../input-group/input-group.component';
@@ -37,6 +36,8 @@ import { Subscription } from 'rxjs';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
+import { IGX_COMBO_COMPONENT } from './combo.common';
+import { IgxDropDownItemBase } from '../drop-down/drop-down.base';
 
 /** Custom strategy to provide the combo with callback on initial positioning */
 class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
@@ -96,7 +97,8 @@ const noop = () => { };
 
 @Component({
     selector: 'igx-combo',
-    templateUrl: 'combo.component.html'
+    templateUrl: 'combo.component.html',
+    providers: [{ provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent }]
 })
 export class IgxComboComponent extends DisplayDensityBase implements AfterViewInit, ControlValueAccessor, OnInit, OnDestroy {
     /**
@@ -1238,7 +1240,7 @@ export class IgxComboComponent extends DisplayDensityBase implements AfterViewIn
      */
     public addItemToCollection() {
         if (!this.searchValue) {
-            return false;
+            return;
         }
         const newValue = this.searchValue.trim();
         const addedItem = this.displayKey ? {

diff --git a/projects/igniteui-angular/src/lib/combo/combo.pipes.ts b/projects/igniteui-angular/src/lib/combo/combo.pipes.ts
@@ -1,12 +1,12 @@
-import { forwardRef, Inject, Pipe, PipeTransform } from '@angular/core';
+import { Inject, Pipe, PipeTransform } from '@angular/core';
 import { cloneArray } from '../core/utils';
 import { DataUtil } from '../data-operations/data-util';
 import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { ISortingExpression } from '../data-operations/sorting-expression.interface';
-import { IgxComboComponent } from './combo.component';
 import { IFilteringState } from '../data-operations/filtering-state.interface';
 import { FilteringStrategy } from '../data-operations/filtering-strategy';
 import { FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
+import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
 
 
 /**
@@ -17,10 +17,7 @@ import { FilteringExpressionsTree } from '../data-operations/filtering-expressio
 })
 export class IgxComboFilteringPipe implements PipeTransform {
 
-    constructor(
-        @Inject(forwardRef(() => IgxComboComponent))
-        public combo: IgxComboComponent
-    ) { }
+    constructor(@Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) { }
 
     public transform(collection: any[], expressions: IFilteringExpression[],
                      logic: FilteringLogic) {
@@ -74,10 +71,7 @@ export class IgxComboSortingPipe implements PipeTransform {
 })
 export class IgxComboGroupingPipe implements PipeTransform {
 
-    constructor(
-        @Inject(forwardRef(() => IgxComboComponent))
-        public combo: IgxComboComponent
-    ) { }
+    constructor(@Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) { }
 
     public transform(collection: any[], groupKey: any) {
         this.combo.filteredData = collection;

diff --git a/projects/igniteui-angular/src/lib/data-operations/data-util.ts b/projects/igniteui-angular/src/lib/data-operations/data-util.ts
@@ -11,8 +11,8 @@ import { IGroupingState } from './groupby-state.interface';
 import { ISortingExpression } from './sorting-expression.interface';
 import { FilteringStrategy } from './filtering-strategy';
 import { ITreeGridRecord } from '../grids/tree-grid';
-import { Transaction, TransactionType, HierarchicalTransaction } from '../services';
 import { cloneValue, mergeObjects } from '../core/utils';
+import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction';
 
 /**
  * @hidden