feat: typescript 4 support (#66)

* fix(typescript): support typescript 4

* fix(comparison-table): fix inherited properties

* fix(progress-indicator): fix inherited properties

* fix(link): fix inherited properties

* fix(number-stepper): fix inherited properties

* fix(circle-toggle): fix inherited properties

* fix(card): fix inherited properties

* fix(card): remove unneeded selectable-card base class

* fix(dropdown): fix inherited properties from NxDropdownControl

* fix(progress-indicator): call ngOnChanges of CDKStep

* fix: add any type conversion in docs-cli

* fix: input and output not recognized correctly in docs-generation

* fix(dropdown): remove unneeded super() call

* docs: add comment about ngOnChanges(changes)

package.json

@@ -123,6 +123,6 @@
     "ts-node": "~8.3.0",
     "tslint": "~6.1.0",
     "tslint-jasmine-rules": "^1.6.1",
-    "typescript": "3.9.6"
+    "typescript": "^4.0.3"
   }
 }

projects/ng-aquila/src/card/selectable-card.component.ts

@@ -24,7 +24,6 @@ import {
   NgControl,
   NgForm
 } from '@angular/forms';
-import { SelectableCard } from './selectable-card';
 import { NxSelectableCardChangeEvent } from './selectable-card-change-event';
 import { NxErrorComponent } from '@aposin/ng-aquila/base';
 
@@ -35,7 +34,6 @@ let nextId = 0;
   templateUrl: './selectable-card.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./selectable-card.component.scss'],
-  providers: [{provide: SelectableCard, useExisting: forwardRef(() => NxSelectableCardComponent)}],
   host: {
     '[class.is-checked]': 'checked',
     '[class.is-disabled]': 'disabled',
@@ -46,7 +44,7 @@ let nextId = 0;
   }
 })
 
-export class NxSelectableCardComponent extends SelectableCard implements ControlValueAccessor, DoCheck, AfterContentInit {
+export class NxSelectableCardComponent implements ControlValueAccessor, DoCheck, AfterContentInit {
   private _id: string = (nextId++).toString();
   private _checked = false;
   private _disabled: boolean = false;
@@ -187,8 +185,6 @@ export class NxSelectableCardComponent extends SelectableCard implements Control
               @Optional() private _parentForm: NgForm,
               @Optional() private _parentFormGroup: FormGroupDirective
   ) {
-    super();
-
     if (this.ngControl) {
       // Note: we provide the value accessor through here, instead of
       // the `providers` to avoid running into a circular import.

projects/ng-aquila/src/circle-toggle/circle-toggle/toggle-button.ts

@@ -1,16 +1,14 @@
 /** @docs-private */
 export abstract class ToggleButton {
-  id;
-  value;
-  checked;
-  name;
-  negative;
-  disabled;
-  tabIndex;
-  checkedChange;
-  selectionChange;
-  toggleButton;
+  abstract id;
+  abstract value;
+  abstract checked;
+  abstract name;
+  abstract negative;
+  abstract disabled;
+  abstract checkedChange;
+  abstract selectionChange;
+  abstract toggleButton;
   abstract toggle(event);
   abstract setGroupSelection();
-
 }

projects/ng-aquila/src/comparison-table/comparison-table-base.ts

@@ -15,7 +15,7 @@ export abstract class NxComparisonTableBase implements OnDestroy {
 
   selectedIndexChange: EventEmitter<number>;
   _disabledIndexes: number[] = [];
-  selectedIndex: number;
+  abstract selectedIndex: number;
   _destroyed: Subject<void> = new Subject();
 
   _stickyPlaceholder = false;

projects/ng-aquila/src/comparison-table/comparison-table-row-base.ts

@@ -12,7 +12,7 @@ export abstract class NxComparisonTableRowBase {
   cells: QueryList<NxComparisonTableCell>;
   descriptionCell: NxComparisonTableDescriptionCell;
   popularCell?: NxComparisonTablePopularCell;
-  type: NxComparisonTableRowType;
+  abstract type: NxComparisonTableRowType;
   abstract _isPartOfToggleSection(): boolean;
   abstract _isPartOfRowGroup(): boolean;
   abstract _isIntersectionRow(): boolean;

projects/ng-aquila/src/comparison-table/toggle-section/toggle-section-base.ts

@@ -6,7 +6,7 @@ import { NxToggleSectionHeaderComponent } from './toggle-section-header.componen
 export abstract class NxToggleSectionBase {
 
   /** Whether the toggle section is expanded. */
-  isExpanded: boolean;
+  abstract isExpanded: boolean;
 
   toggleSectionHeader: NxToggleSectionHeaderComponent;
   /** @docs-private */

projects/ng-aquila/src/dropdown/dropdown.control.ts

@@ -1,13 +1,11 @@
 import { NxFormfieldControl } from '@aposin/ng-aquila/formfield';
-import { Input, Directive } from '@angular/core';
 
-@Directive()
 export abstract class NxDropdownControl extends NxFormfieldControl<any> {
   /**
    * Whether the dropdown should allow multi selection and additional checkboxes are shown.
    *
    * Note: Please make sure the value you bind is an array. If not an error is thrown! */
-  @Input('nxIsMultiselect') isMultiSelect: boolean = false;
+  isMultiSelect: boolean = false;
 
   /** @docs-private */
   abstract formatValue?(value): string;

projects/ng-aquila/src/dropdown/dropdown.ts

@@ -96,7 +96,7 @@ function getPositions(): ConnectionPositionPair[] {
     '(click)': 'openPanel()'
   }
 })
-export class NxDropdownComponent extends NxDropdownControl implements ControlValueAccessor,
+export class NxDropdownComponent implements NxDropdownControl, ControlValueAccessor,
   OnInit, AfterContentInit, OnDestroy, DoCheck {
 
   // The dropdown currently doesn't support readonly of the NxFormfieldControl so we hardcode it here
@@ -184,6 +184,17 @@ export class NxDropdownComponent extends NxDropdownControl implements ControlVal
     this._disabled = coerceBooleanProperty(value);
   }
 
+  /**
+   * Whether the dropdown should allow multi selection and additional checkboxes are shown.
+   *
+   * Note: Please make sure the value you bind is an array. If not an error is thrown! */
+  @Input('nxIsMultiselect') isMultiSelect: boolean = false;
+
+  /** The id of the input. */
+  get id() {
+    return this.renderedValueId;
+  }
+
   /** Whether the component is required. This adds an aria-required label to the component. */
   @Input('nxRequired') required: boolean;
 
@@ -430,7 +441,6 @@ export class NxDropdownComponent extends NxDropdownControl implements ControlVal
     @Optional() private _parentForm: NgForm,
     @Optional() private _parentFormGroup: FormGroupDirective,
     @Optional() private _dir: Directionality) {
-    super();
 
     if (this.ngControl) {
       // Note: we provide the value accessor through here, instead of

projects/ng-aquila/src/link/link.component.ts

@@ -25,6 +25,10 @@ const MAPPING = {
 
 const DEFAULT_CLASSES = [ 'nx-link' ];
 
+/**
+ * `Input('nxStyle') classNames` sets the style of the link, thereby altering the visual appearance.
+ * You can use any combination of 'black', 'icon-right', 'icon-only', 'negative' or 'text'.
+ */
 @Component({
   selector: 'nx-link',
   styleUrls: [ './link.component.scss' ],
@@ -43,13 +47,6 @@ export class NxLinkComponent extends MappedStyles implements AfterContentInit {
   /** @docs-private */
   @ContentChild(NxIconComponent) icon: NxIconComponent;
 
-  /**
-   * Sets the style of the link, thereby altering the visual appearance.
-   *
-   * You can use any combination of 'black', 'icon-right', 'icon-only', 'negative' or 'text'
-   */
-  classNames;
-
   /** Sets the size of the link. Default: 'small'. */
   @Input()
   set size(value: NxLinkSize) {

projects/ng-aquila/src/number-stepper/number-stepper.component.ts

@@ -43,6 +43,10 @@ const CUSTOM_VALIDATOR = {
 
 let nextUniqueId = 0;
 
+/**
+ * `Input('nxSize') classNames` defines the size of the number stepper.
+ * Values: big | normal. Default: normal
+ */
 @Component({
   selector: 'nx-number-stepper',
   templateUrl: 'number-stepper.component.html',
@@ -74,13 +78,6 @@ export class NxNumberStepperComponent extends MappedStyles
   /** @docs-private */
   numberInputValue: string;
 
-  /**
-   * Defines the size of the number stepper.
-   *
-   * Values: big | normal. Default: normal
-   */
-  classNames: string;
-
   /** @docs-private */
   public inputClassNames: string = mapClassNames(
     'regular',

projects/ng-aquila/src/progress-stepper/progress-stepper.component.ts

@@ -13,7 +13,7 @@ import {
   SkipSelf,
   OnDestroy,
   ElementRef,
-  ChangeDetectorRef
+  ChangeDetectorRef, OnChanges
 } from '@angular/core';
 import { takeUntil, takeWhile } from 'rxjs/operators';
 import { ErrorStateMatcher } from '@aposin/ng-aquila/utils';
@@ -35,49 +35,23 @@ import { Directionality } from '@angular/cdk/bidi';
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NxStepComponent extends CdkStep implements ErrorStateMatcher, OnDestroy {
+export class NxStepComponent extends CdkStep implements ErrorStateMatcher, OnChanges, OnDestroy {
   _destroyed: Subject<boolean> = new Subject();
 
   constructor(
       @Inject(forwardRef(() => NxProgressStepperDirective)) public stepper: NxProgressStepperDirective,
       @SkipSelf() private _errorStateMatcher: ErrorStateMatcher) {
     super(stepper);
-  }
-
-  set stepControl(value: any) {
-    this._stepControl = value;
 
-    // If a step control changes its state, the stepper needs to update.
-    if (this._stepControl) {
-      this._stepControl.statusChanges
-        .pipe(
-          takeUntil(this._destroyed),
-          takeWhile(() => this._stepControl === value)
-        )
-        .subscribe(() => {
-          this.stepper._stateChanged();
-        });
-    }
-  }
-  /** The top level abstract control of the step. */
-  get stepControl() {
-    return this._stepControl;
+    this.interacted = false;
   }
-  private _stepControl: any;
 
-  set interacted(value: boolean) {
-    this._interacted = value;
+  private _stepControl: any;
 
-    if (this.stepper) {
-      this.stepper._stateChanged();
-    }
-  }
+  /** The top level abstract control of the step. */
+  stepControl: any;
 
-  /** Whether the user has seen the expanded step content or not. */
-  get interacted(): boolean {
-    return this._interacted;
-  }
-  private _interacted: boolean = false;
+  private _interacted: boolean;
 
   /** Custom error state matcher that checks for validity of the step form. */
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
@@ -89,6 +63,35 @@ export class NxStepComponent extends CdkStep implements ErrorStateMatcher, OnDes
     return originalErrorState || customErrorState;
   }
 
+  ngOnChanges() {
+    // We can't use the `changes: SimpleChanges` as a parameter here
+    // because CdkStep only defines the ngOnChanges() method.
+    super.ngOnChanges();
+
+    if (this.stepControl !== this._stepControl) {
+      this._stepControl = this.stepControl;
+
+      // If a step control changes its state, the stepper needs to update.
+      if (this._stepControl) {
+        this._stepControl.statusChanges
+          .pipe(
+            takeUntil(this._destroyed),
+            takeWhile(() => this._stepControl === this.stepControl)
+          )
+          .subscribe(() => {
+            this.stepper._stateChanged();
+          });
+      }
+    }
+
+    if (this.interacted !== this._interacted) {
+      this._interacted = this.interacted;
+      if (this.stepper) {
+        this.stepper._stateChanged();
+      }
+    }
+  }
+
   ngOnDestroy() {
     this._destroyed.next(true);
     this._destroyed.complete();

projects/ngx-docs-cli/src/dgeni/docs-dgeni-package/common/directive-metadata.ts

@@ -1,12 +1,11 @@
 import {
   ArrayLiteralExpression,
   CallExpression,
-  isCallExpression,
   NodeArray,
   ObjectLiteralExpression,
   PropertyAssignment,
   StringLiteral,
-  SyntaxKind,
+  SyntaxKind
 } from 'typescript';
 
 import { CategorizedClassDoc } from './dgeni-definitions';
@@ -34,8 +33,8 @@ export function getDirectiveMetadata(classDoc: CategorizedClassDoc): Map<string,
   }
 
   const expression = declaration.decorators
-    .filter(decorator => decorator.expression && isCallExpression(decorator.expression))
-    .map(decorator => decorator.expression as CallExpression)
+    .filter(decorator => decorator.expression)
+    .map(decorator => decorator.expression as any as CallExpression)
     .find(callExpression => callExpression.expression.getText() === 'Component' ||
                             callExpression.expression.getText() === 'Directive');