feat: support typescript 4.0+

package.json

@@ -86,7 +86,7 @@
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "tslib": "^2.0.1",
     "tslint": "^6.1.3",
-    "typescript": "^3.9.7",
+    "typescript": "^4.0.3",
     "yarn-deduplicate": "^3.0.0"
   }
 }

src/autocomplete/autocomplete.directive.ts

@@ -34,12 +34,13 @@ import { SuggestionComponent } from './suggestion/suggestion.component';
 @Directive({
   selector: 'input[auiAutocomplete],textarea[auiAutocomplete]',
   exportAs: 'auiAutocomplete',
+  inputs: ['class:auiAutocompleteClass'],
   host: {
     autocomplete: 'off',
   },
 })
 export class AutoCompleteDirective
-  extends BaseTooltip
+  extends BaseTooltip<AutoCompleteContext>
   implements OnInit, OnDestroy {
   @Input('auiAutocomplete')
   get autocomplete() {
@@ -55,9 +56,6 @@ export class AutoCompleteDirective
     this.content = val.template;
   }
 
-  @Input('auiAutocompleteClass')
-  class: string;
-
   @Input('auiAutocompleteFilterFn')
   @Input()
   get filterFn() {
@@ -83,12 +81,6 @@ export class AutoCompleteDirective
   @Output('auiAutocompleteHide')
   hide: EventEmitter<void>;
 
-  readonly type: TooltipType = TooltipType.Plain;
-  readonly trigger: TooltipTrigger = TooltipTrigger.Focus;
-  readonly position = 'bottom start';
-  readonly hideOnClick = true;
-  context: AutoCompleteContext;
-
   private _autocomplete: AutocompleteComponent;
   private focusedSuggestion: SuggestionComponent;
 
@@ -114,6 +106,10 @@ export class AutoCompleteDirective
     private readonly ngControl: NgControl,
   ) {
     super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone);
+    this.type = TooltipType.Plain;
+    this.trigger = TooltipTrigger.Focus;
+    this.position = 'bottom start';
+    this.hideOnClick = true;
   }
 
   ngOnInit() {

src/dropdown/dropdown.directive.ts

@@ -25,13 +25,19 @@ import { MenuComponent } from './menu/menu.component';
 
 @Directive({
   selector: '[auiDropdown]',
+  exportAs: 'auiDropdown',
+  inputs: [
+    'class:auiDropdownClass',
+    'disabled:auiDropdownDisabled',
+    'position:auiDropdownPosition',
+    'trigger:auiDropdownTrigger',
+  ],
   providers: [
     {
       provide: BaseTooltip,
       useExisting: DropdownDirective,
     },
   ],
-  exportAs: 'auiDropdown',
 })
 export class DropdownDirective extends BaseTooltip implements OnInit {
   @Input('auiDropdown')
@@ -50,18 +56,6 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
   @Input('auiDropdownContext')
   lazyContentContext: any;
 
-  @Input('auiDropdownPosition')
-  position = 'bottom end';
-
-  @Input('auiDropdownClass')
-  class: string;
-
-  @Input('auiDropdownTrigger')
-  trigger = TooltipTrigger.Click;
-
-  @Input('auiDropdownDisabled')
-  disabled: boolean;
-
   @Input('auiDropdownHideOnClick')
   hideOnClick = true;
 
@@ -71,7 +65,6 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
   @Output('auiDropdownHide')
   hide: EventEmitter<void>;
 
-  readonly type: TooltipType = TooltipType.Plain;
   private _menu: MenuComponent;
 
   constructor(
@@ -84,6 +77,9 @@ export class DropdownDirective extends BaseTooltip implements OnInit {
   ) {
     super(overlay, viewContainerRef, elRef, renderer, cdr, ngZone);
     new DropdownActiveDirective(this, elRef, renderer).customClass = 'isActive';
+    this.type = TooltipType.Plain;
+    this.position = 'bottom end';
+    this.trigger = TooltipTrigger.Click;
   }
 
   ngOnInit() {

src/dropdown/menu-item/menu-item.component.ts

@@ -19,8 +19,16 @@ import { MenuItemType } from '../dropdown.types';
 export class MenuItemComponent {
   bem: Bem = buildBem('aui-menu-item');
 
+  protected _disabled = false;
+
   @Input()
-  disabled = false;
+  get disabled() {
+    return this._disabled;
+  }
+
+  set disabled(value) {
+    this._disabled = value;
+  }
 
   @Input()
   divide = false;

src/dropdown/submenu/submenu.component.ts

@@ -34,16 +34,10 @@ export class SubmenuComponent extends MenuItemComponent {
     return this._disabled || !this.hasEnabledItem;
   }
 
-  set disabled(val) {
-    this._disabled = val;
-  }
-
   @ContentChildren(MenuItemComponent, { descendants: true })
   menuItems: QueryList<MenuItemComponent>;
 
   get hasEnabledItem() {
     return this.menuItems?.length > 0;
   }
-
-  private _disabled = false;
 }

src/form/__snapshots__/form.component.spec.ts.snap

@@ -48,7 +48,7 @@ exports[`FormComponent should match snapshot 1`] = `
                 auiformitemaddon=""
                 class="aui-form-item__addon"
               >
-                 addon 
+                addon
               </div>
             </div>
           </div>
@@ -119,7 +119,7 @@ exports[`FormComponent should match snapshot 2`] = `
                 auiformitemaddon=""
                 class="aui-form-item__addon"
               >
-                 addon 
+                addon
               </div>
             </div>
           </div>

src/input/input-group/__snapshots__/input-group.component.spec.ts.snap

@@ -70,11 +70,11 @@ exports[`InputGroupComponent should match snapshot 1`] = `
                   >
                     <stop
                       offset="0"
-                      style="stop-color:#000000"
+                      style="stop-color: #000000"
                     />
                     <stop
                       offset="1"
-                      style="stop-color:#808080"
+                      style="stop-color: #808080"
                     />
                   </lineargradient>
                   <lineargradient
@@ -87,11 +87,11 @@ exports[`InputGroupComponent should match snapshot 1`] = `
                   >
                     <stop
                       offset="0"
-                      style="stop-color:#FFFFFF"
+                      style="stop-color: #ffffff"
                     />
                     <stop
                       offset="1"
-                      style="stop-color:#808080"
+                      style="stop-color: #808080"
                     />
                   </lineargradient>
                   <mask

src/input/number-input/number-input.component.ts

@@ -19,6 +19,7 @@ import { Bem, buildBem } from '../../utils/bem';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  inputs: ['disabled'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -45,9 +46,6 @@ export class NumberInputComponent extends CommonFormControl<number> {
   @Input()
   precision: number;
 
-  @Input()
-  disabled = false;
-
   @Input()
   controls = true;
 

src/table/table-column-def.directive.ts

@@ -13,12 +13,13 @@ import { Directive, Input } from '@angular/core';
       useExisting: TableColumnDefDirective,
     },
   ],
+  inputs: ['sticky'],
 })
 export class TableColumnDefDirective extends CdkColumnDef {
-  /** Unique name for this column. */
-  @Input('auiTableColumnDef')
-  name: string;
-
+  // Unique name for this column
+  // Why it does not work in `inputs` property?
   @Input()
-  sticky: boolean;
+  set auiTableColumnDef(value: string) {
+    this.name = value;
+  }
 }

src/tooltip/base-tooltip.ts

@@ -33,14 +33,20 @@ export interface TooltipInterface {
   hide: EventEmitter<void>;
 }
 
-export class BaseTooltip implements TooltipInterface, AfterViewInit, OnDestroy {
+export class BaseTooltip<T = any>
+  implements TooltipInterface, AfterViewInit, OnDestroy {
   static readonly DELAY_TIMES = 50;
 
   set content(value: string | TemplateRef<any>) {
     this.inputContent$$.next(value);
   }
 
-  set context(value: any) {
+  get context() {
+    return this._context;
+  }
+
+  set context(value: T) {
+    this._context = value;
     this.inputContext$$.next(value);
   }
 
@@ -120,6 +126,7 @@ export class BaseTooltip implements TooltipInterface, AfterViewInit, OnDestroy {
   protected _position = 'top';
   protected _trigger = TooltipTrigger.Hover;
   protected _disabled = false;
+  protected _context: T;
 
   get isCreated() {
     return !!this.overlayRef;

src/tooltip/tooltip-copy.directive.ts

@@ -17,6 +17,7 @@ import { TooltipCopyIntl } from './tooltip-intl';
 
 @Directive({
   selector: '[auiTooltipCopy]',
+  inputs: ['position:auiTooltipPosition', 'disabled:auiTooltipDisabled'],
 })
 export class TooltipCopyDirective extends BaseTooltip implements OnInit {
   @Input()
@@ -55,12 +56,6 @@ export class TooltipCopyDirective extends BaseTooltip implements OnInit {
     this._copyFailTip = value;
   }
 
-  @Input('auiTooltipPosition')
-  position: string;
-
-  @Input('auiTooltipDisabled')
-  disabled: boolean;
-
   private _copyText: string;
   private _copyTip: string;
   private _copySuccessTip: string;

src/tooltip/tooltip.directive.ts

@@ -9,12 +9,10 @@ import {
   NgZone,
   Output,
   Renderer2,
-  TemplateRef,
   ViewContainerRef,
 } from '@angular/core';
 
 import { BaseTooltip } from './base-tooltip';
-import { TooltipTrigger, TooltipType } from './tooltip.types';
 
 @Directive({
   selector: '[auiTooltip]',
@@ -26,29 +24,17 @@ import { TooltipTrigger, TooltipType } from './tooltip.types';
     },
   ],
   exportAs: 'auiTooltip',
+  inputs: [
+    'content:auiTooltip',
+    'context:auiTooltipContext',
+    'class:auiTooltipClass',
+    'type:auiTooltipType',
+    'position:auiTooltipPosition',
+    'trigger:auiTooltipTrigger',
+    'disabled:auiTooltipDisabled',
+  ],
 })
 export class TooltipDirective extends BaseTooltip {
-  @Input('auiTooltip')
-  content: string | TemplateRef<any>;
-
-  @Input('auiTooltipContext')
-  context: any;
-
-  @Input('auiTooltipClass')
-  class: string;
-
-  @Input('auiTooltipType')
-  type: TooltipType;
-
-  @Input('auiTooltipPosition')
-  position: string;
-
-  @Input('auiTooltipTrigger')
-  trigger: TooltipTrigger;
-
-  @Input('auiTooltipDisabled')
-  disabled: boolean;
-
   @Input('auiTooltipHideOnClick')
   hideOnClick: boolean;
 

tslint.json

@@ -8,6 +8,7 @@
     "component-selector": [true, "element", "aui", "kebab-case"],
     "directive-selector": [true, "attribute", "aui", "camelCase"],
     "no-host-metadata-property": false,
+    "no-inputs-metadata-property": false,
     "validate-decorators": [
       true,
       {