fix(): support for Angular 8

Currently there is only support for Angular 9

package.json

@@ -38,37 +38,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.1.0",
-    "@angular/cdk": "^9.2.4",
-    "@angular/common": "^9.1.0",
-    "@angular/compiler": "^9.1.0",
-    "@angular/core": "^9.1.0",
-    "@angular/elements": "^9.1.0",
-    "@angular/forms": "^9.1.0",
-    "@angular/platform-browser": "^9.1.0",
-    "@angular/platform-browser-dynamic": "^9.1.0",
-    "@angular/platform-server": "^9.1.0",
-    "@angular/router": "^9.1.0",
-    "@angular/service-worker": "^9.1.0",
-    "@nguniversal/express-engine": "^9.0.2",
+    "@angular/animations": "~8.2.14",
+    "@angular/cdk": "~8.2.3",
+    "@angular/common": "~8.2.14",
+    "@angular/compiler": "~8.2.14",
+    "@angular/core": "~8.2.14",
+    "@angular/elements": "~8.2.14",
+    "@angular/forms": "~8.2.14",
+    "@angular/platform-browser": "~8.2.14",
+    "@angular/platform-browser-dynamic": "~8.2.14",
+    "@angular/platform-server": "~8.2.14",
+    "@angular/router": "~8.2.14",
+    "@angular/service-worker": "~8.2.14",
+    "@nguniversal/express-engine": "~8.2.6",
     "chroma-js": "^2.0.2",
     "core-js": "^2.6.1",
     "document-register-element": "^1.7.2",
     "express": "^4.16.3",
     "hammerjs": "^2.0.8",
     "moment": "^2.22.2",
     "prismjs": "^1.19.0",
-    "rxjs": "^6.5.4",
+    "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.0",
-    "@angular-devkit/build-ng-packagr": "^0.901.0",
-    "@angular-devkit/schematics": "^9.1.0",
-    "@angular/cli": "^9.1.0",
-    "@angular/compiler-cli": "^9.1.0",
-    "@nguniversal/builders": "^9.0.2",
+    "@angular-devkit/build-angular": "^0.803.29",
+    "@angular-devkit/build-ng-packagr": "^0.803.29",
+    "@angular-devkit/schematics": "~8.3.29",
+    "@angular/cli": "~8.3.29",
+    "@angular/compiler-cli": "~8.2.14",
+    "@nguniversal/builders": "~9.0.2",
     "@octokit/request": "^5.3.1",
     "@types/chroma-js": "^1.4.1",
     "@types/express": "^4.16.1",
@@ -86,7 +86,7 @@
     "camelcase": "^5.0.0",
     "chalk": "^2.4.1",
     "chokidar": "^3.3.1",
-    "codelyzer": "^5.1.2",
+    "codelyzer": "^5.0.0",
     "conventional-changelog-cli": "^2.0.5",
     "firebase-tools": "^7.6.1",
     "fs-extra": "^6.0.0",
@@ -101,15 +101,15 @@
     "karma-mocha-reporter": "^2.2.5",
     "ng-packagr": "^9.0.3",
     "parse5": "^5.1.1",
-    "protractor": "~5.4.0",
+    "protractor": "~7.0.0",
     "replace-in-file": "^5.0.2",
     "semver": "^6.3.0",
     "showdown": "^1.9.0",
-    "ts-node": "~8.5.4",
+    "ts-node": "~7.0.0",
     "tsconfig-paths": "^3.9.0",
     "tslint": "~6.1.0",
     "typedoc": "^0.17.3",
-    "typescript": "~3.8.3",
+    "typescript": "~3.5.3",
     "yargs": "^13.2.2"
   },
   "schematics": "./dist/@alyle/ui/schematics/collection.json",

src/app/api/api.component.ts

@@ -72,7 +72,7 @@ export class ApiComponent implements OnInit, OnDestroy {
   private void$ = of<void>(undefined);
   routeParamsSubscription = Subscription.EMPTY;
   private onDestroy$ = new EventEmitter<void>();
-  @ViewChild('code') code: ElementRef<HTMLDivElement>;
+  @ViewChild('code', { static: false}) code: ElementRef<HTMLDivElement>;
 
   constructor(
     readonly sRenderer: StyleRenderer,

src/app/app.component.ts

@@ -317,9 +317,9 @@ export class AppComponent {
   routes = AUIRoutes.slice(1);
   currentRoutePath: string;
 
-  @ViewChild(DocViewer) docViewer?: DocViewer;
+  @ViewChild(DocViewer, { static: false}) docViewer?: DocViewer;
   @ViewChild(LyDrawer, { static: true }) drawer: LyDrawer;
-  @ViewChild(LySnackBar) sb: LySnackBar;
+  @ViewChild(LySnackBar, { static: false}) sb: LySnackBar;
   @ViewChild(PageContentComponent, { static: true }) page: PageContentComponent;
 
   constructor(

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
+import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -136,7 +136,6 @@ export function themeNameProviderFactory() {
   ],
   imports: [
     BrowserModule.withServerTransition({appId: 'serverApp'}),
-    HammerModule,
     CommonModule,
     FormsModule,
     HttpClientModule,

src/app/docs/components/image-cropper-demo/image-cropper-example-01/image-cropper-example-01.component.ts

@@ -29,7 +29,7 @@ export class ImageCropperExample01Component implements WithStyles, AfterViewInit
   scale: number;
   ready: boolean;
   minScale: number;
-  @ViewChild(LyImageCropper) cropper: LyImageCropper;
+  @ViewChild(LyImageCropper, { static: false}) cropper: LyImageCropper;
   myConfig: ImgCropperConfig = {
     // autoCrop: true,
     width: 150, // Default `250`

src/app/docs/components/snack-bar-demo/passing-data-to-a-snack-bar/passing-data-to-a-snack-bar.component.ts

@@ -8,7 +8,7 @@ import { LySnackBar } from '@alyle/ui/snack-bar';
 })
 export class PassingDataToASnackBarComponent {
 
-  @ViewChild('sb') sb: LySnackBar;
+  @ViewChild('sb', { static: false}) sb: LySnackBar;
 
   open() {
     this.sb.open({

src/lib/button/button.ts

@@ -210,7 +210,7 @@ export class LyButton extends LyButtonMixinBase implements OnChanges, OnInit, Af
   private _appearanceClass: string;
   private _onFocusByKeyboardState: boolean;
 
-  @ViewChild('rippleContainer') _rippleContainer: ElementRef;
+  @ViewChild('rippleContainer', { static: false }) _rippleContainer: ElementRef;
 
   /** @docs-private */
   @Input('sensitive')

src/lib/carousel/carousel.ts

@@ -226,9 +226,9 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
   /** @docs-private */
   readonly classes = this.sRenderer.renderSheet(STYLES, true);
   private _intervalFn: number | null = null;
-  @ViewChild('slideContainer') slideContainer: ElementRef;
-  @ViewChild('_slide') _slide: ElementRef;
-  @ViewChild('_progressBar') _progressBar: ElementRef<HTMLDivElement>;
+  @ViewChild('slideContainer', { static: false }) slideContainer: ElementRef;
+  @ViewChild('_slide', { static: false }) _slide: ElementRef;
+  @ViewChild('_progressBar', { static: false }) _progressBar: ElementRef<HTMLDivElement>;
   @ContentChildren(forwardRef(() => LyCarouselItem)) lyItems: QueryList<LyCarouselItem>;
   /** @docs-private */
   @Input() mode: CarouselMode = CarouselMode.default;

src/lib/checkbox/checkbox.ts

@@ -224,7 +224,7 @@ export class LyCheckbox extends LyCheckboxMixinBase implements WithStyles, Contr
   protected _disabled;
   private _onFocusByKeyboardState: boolean;
 
-  @ViewChild('innerContainer') _innerContainer: ElementRef<HTMLDivElement>;
+  @ViewChild('innerContainer', { static: false}) _innerContainer: ElementRef<HTMLDivElement>;
 
   /** The value attribute of the native input element */
   @Input() value: string;
@@ -293,7 +293,7 @@ export class LyCheckbox extends LyCheckboxMixinBase implements WithStyles, Contr
       new EventEmitter<LyCheckboxChange>();
 
   /** The native `<input type="checkbox">` element */
-  @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
+  @ViewChild('input', { static: false}) _inputElement: ElementRef<HTMLInputElement>;
 
   _onTouched: () => any = () => {};
   private _controlValueAccessorChangeFn: (value: any) => void = () => {};

src/lib/drawer/drawer.ts

@@ -174,7 +174,7 @@ export class LyDrawer implements OnChanges, AfterViewInit, OnDestroy {
   private _tabResizeSub: Subscription;
   private _isOpen: boolean;
 
-  @ViewChild(TemplateRef) _backdrop: TemplateRef<any>;
+  @ViewChild(TemplateRef, { static: false }) _backdrop: TemplateRef<any>;
 
   @Input()
   set width(_val: string) {

src/lib/expansion/expansion-panel.ts

@@ -85,7 +85,7 @@ export class LyExpansionPanel extends LyButtonMixinBase implements OnChanges, On
   _lazyContentRef: TemplateRef<any>;
 
   /** Content that will be rendered lazily. */
-  @ContentChild(LyExpansionPanelContent) readonly _lazyContent: LyExpansionPanelContent;
+  @ContentChild(LyExpansionPanelContent, { static: false }) readonly _lazyContent: LyExpansionPanelContent;
 
   /** Event emitted every time the LyExpansionPanel is closed. */
   @Output() closed: EventEmitter<void> = new EventEmitter<void>();

src/lib/field/field.ts

@@ -395,15 +395,15 @@ export class LyField implements WithStyles, OnInit, AfterContentInit, AfterViewI
   private _marginEndClass: string;
   private _fullWidth: boolean;
   private _fullWidthClass?: string;
-  @ViewChild('_labelContainer') _labelContainer: ElementRef<HTMLDivElement>;
-  @ViewChild('_labelContainer2') _labelContainer2: ElementRef<HTMLDivElement>;
-  @ViewChild('_labelSpan') _labelSpan: ElementRef<HTMLDivElement>;
-  @ViewChild('_prefixContainer') _prefixContainer: ElementRef<HTMLDivElement>;
-  @ViewChild('_suffixContainer') _suffixContainer: ElementRef<HTMLDivElement>;
-  @ViewChild('_fieldsetLegend') _fieldsetLegend: ElementRef<HTMLDivElement>;
-  @ContentChild(forwardRef(() => LyFieldControlBase)) _control?: LyFieldControlBase;
-  @ContentChild(LyPlaceholder) _placeholderChild: LyPlaceholder;
-  @ContentChild(LyLabel) _labelChild: LyLabel;
+  @ViewChild('_labelContainer', { static: false }) _labelContainer: ElementRef<HTMLDivElement>;
+  @ViewChild('_labelContainer2', { static: false }) _labelContainer2: ElementRef<HTMLDivElement>;
+  @ViewChild('_labelSpan', { static: false }) _labelSpan: ElementRef<HTMLDivElement>;
+  @ViewChild('_prefixContainer', { static: false }) _prefixContainer: ElementRef<HTMLDivElement>;
+  @ViewChild('_suffixContainer', { static: false }) _suffixContainer: ElementRef<HTMLDivElement>;
+  @ViewChild('_fieldsetLegend', { static: false }) _fieldsetLegend: ElementRef<HTMLDivElement>;
+  @ContentChild(forwardRef(() => LyFieldControlBase), { static: false }) _control?: LyFieldControlBase;
+  @ContentChild(LyPlaceholder, { static: false }) _placeholderChild: LyPlaceholder;
+  @ContentChild(LyLabel, { static: false }) _labelChild: LyLabel;
   @ContentChildren(LyHint) _hintChildren: QueryList<LyHint>;
   @ContentChildren(LyPrefix) _prefixChildren: QueryList<LyPrefix>;
   @ContentChildren(LySuffix) _suffixChildren: QueryList<LySuffix>;

src/lib/image-cropper/image-cropper-area.ts

@@ -38,7 +38,7 @@ export class LyCropperArea implements WithStyles, OnDestroy {
   /** Used to subscribe to global move and end events */
   protected _document: Document;
 
-  @ViewChild('resizer') readonly _resizer?: ElementRef;
+  @ViewChild('resizer', { static: false }) readonly _resizer?: ElementRef;
 
   @Input()
   set resizableArea(val: boolean) {
@@ -94,7 +94,10 @@ export class LyCropperArea implements WithStyles, OnDestroy {
   }
 
   private _removeResizableArea() {
-    const element = this._resizer?.nativeElement;
+    // const element = this._resizer?.nativeElement;
+    let _a: any;
+    const element = (_a = this._resizer) === null || _a === void 0 ? void 0 : _a.nativeElement;
+
     if (element) {
       this._lastPointerEvent = null;
       this._removeGlobalEvents();

src/lib/image-cropper/image-cropper.ts

@@ -333,7 +333,8 @@ export class LyImageCropper implements OnDestroy {
 
   @ViewChild('_imgContainer', { static: true }) _imgContainer: ElementRef;
   @ViewChild('_area', {
-    read: ElementRef
+    read: ElementRef,
+    static: false
   }) _areaRef: ElementRef;
   @ViewChild('_imgCanvas', { static: true }) _imgCanvas: ElementRef<HTMLCanvasElement>;
   @Input()
@@ -1056,7 +1057,7 @@ export class LyImageCropper implements OnDestroy {
   }
 
   _canvaRect(): DOMRect {
-    return this._imgCanvas.nativeElement.getBoundingClientRect();
+    return this._imgCanvas.nativeElement.getBoundingClientRect() as DOMRect;
   }
 
 

src/lib/list/list.ts

@@ -217,10 +217,10 @@ export class LyListItem extends LyListItemMixinBase implements OnInit, AfterCont
   private _isActionListItem: boolean;
   private _onFocusByKeyboardState: boolean;
 
-  @ViewChild('rippleContainer') _rippleContainer: ElementRef;
+  @ViewChild('rippleContainer', { static: false }) _rippleContainer: ElementRef;
   @ContentChildren(forwardRef(() => LyLine)) _lines: QueryList<LyLine>;
-  @ContentChild(forwardRef(() => LyListIcon)) _icon: LyListIcon & { };
-  @ContentChild(LyAvatar) _avatar: LyAvatar;
+  @ContentChild(forwardRef(() => LyListIcon), { static: false }) _icon: LyListIcon & { };
+  @ContentChild(LyAvatar, { static: false }) _avatar: LyAvatar;
   get _listItemClasses() {
     const { listItemContent, twoLine, oneLine, listItemWithIcon, twoLineWithIcon } = this.classes;
     const classes = [listItemContent];

src/lib/menu/menu.ts

@@ -45,7 +45,7 @@ import {
   AnimationEvent,
   group
 } from '@angular/animations';
-import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import { Subject, asapScheduler } from 'rxjs';
 import { take, delay, debounceTime } from 'rxjs/operators';
@@ -69,7 +69,7 @@ export const STYLES = (theme: ThemeVariables & LyMenuVariables, ref: ThemeRef) =
     $name: LyMenu.и,
     $priority: STYLE_PRIORITY,
     root: () => (
-      theme.menu?.root
+      (theme.menu && theme.menu.root)
         && (theme.menu.root instanceof StyleCollection
           ? theme.menu.root.setTransformer(fn => fn(menu)).css
           : theme.menu.root(menu))
@@ -172,7 +172,7 @@ export class LyMenu implements OnChanges, OnInit, AfterViewInit, OnDestroy {
    * @docs-private
    */
   destroy: () => void;
-  @ViewChild('container') _container?: ElementRef<HTMLDivElement>;
+  @ViewChild('container', { static: false }) _container?: ElementRef<HTMLDivElement>;
   @ContentChildren(forwardRef(() => LyMenuItem)) readonly menuItems?: QueryList<LyMenuItem>;
 
   /** Menu Trigger */
@@ -236,7 +236,10 @@ export class LyMenu implements OnChanges, OnInit, AfterViewInit, OnDestroy {
   ) { }
 
   ngOnChanges() {
-    if (this.ref?._menuRef && this._container) {
+    if (
+      // this.ref?._menuRef
+      this.ref && this.ref._menuRef
+      && this._container) {
       // Update backdrop
       this.ref._menuRef.updateBackdrop(this.ref._isItemSubMenuTrigger() ? false : this.hasBackdrop);
       this._updatePlacement();
@@ -274,15 +277,20 @@ export class LyMenu implements OnChanges, OnInit, AfterViewInit, OnDestroy {
 
   private _checkBackdropAndOpenOnHover() {
     const hostTrigger = this._getHostMenuTrigger();
-    if (this.hasBackdrop && hostTrigger._menuOpenOnHoverRef?.openOnHover) {
+    if (
+      this.hasBackdrop
+      // && hostTrigger._menuOpenOnHoverRef?.openOnHover
+      && (hostTrigger._menuOpenOnHoverRef && hostTrigger._menuOpenOnHoverRef.openOnHover)
+    ) {
       throw new Error(`${LyMenu.и}: Can't use [hasBackdrop] with [openOnHover] at the same time, set [hasBackdrop] to false to use [openOnHover]`);
     }
   }
 
   private _getHostMenuTrigger() {
     let menuTrigger = this.ref;
 
-    while (menuTrigger._menu?.ref) {
+    // while (menuTrigger._menu?.ref) {
+    while (menuTrigger._menu && menuTrigger._menu.ref) {
       menuTrigger = menuTrigger._menu.ref;
     }
 
@@ -291,7 +299,11 @@ export class LyMenu implements OnChanges, OnInit, AfterViewInit, OnDestroy {
 
   private _addOpenOnHover() {
     const hostTrigger = this._getHostMenuTrigger();
-    if (hostTrigger._menuOpenOnHoverRef?.openOnHover && !this._mouseenterListen && !this._mouseleaveListen) {
+    if (
+      // hostTrigger._menuOpenOnHoverRef?.openOnHover
+      hostTrigger._menuOpenOnHoverRef && hostTrigger._menuOpenOnHoverRef.openOnHover
+      && !this._mouseenterListen && !this._mouseleaveListen
+    ) {
       hostTrigger._menuOpenOnHoverRef!._handleMouseEnterOrLeave(true);
       this._mouseenterListen = this._renderer
         .listen(
@@ -323,8 +335,11 @@ export class LyMenu implements OnChanges, OnInit, AfterViewInit, OnDestroy {
 
   /** Update Menu Position */
   private _updatePlacement () {
-    const el = this.ref._menuRef?.containerElement;
-    const container = this._container?.nativeElement;
+    // const el = this.ref._menuRef?.containerElement;
+    // const container = this._container?.nativeElement;
+    let _a: any, _b: any;
+    const el = (_a = this.ref._menuRef) === null || _a === void 0 ? void 0 : _a.containerElement;
+    const container = (_b = this._container) === null || _b === void 0 ? void 0 : _b.nativeElement;
 
     // Do not update when not available
     if (!el || !container) {
@@ -385,8 +400,6 @@ export class LyMenu implements OnChanges, OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-
-  static ngAcceptInputType_hasBackdrop: BooleanInput;
 }
 
 @Directive({
@@ -412,7 +425,9 @@ export class LyMenuItem {
         let currentTrigger = this._menu.ref;
         while (currentTrigger) {
           currentTrigger.closeMenu();
-          currentTrigger = currentTrigger._menu?.ref;
+          // currentTrigger = currentTrigger._menu?.ref;
+          let _a: any;
+          currentTrigger = (_a = currentTrigger._menu) === null || _a === void 0 ? void 0 : _a.ref;
         }
       }
     }
@@ -441,7 +456,10 @@ export class LyMenuItem {
   private _closeOtherMenus() {
     this._menu.menuItems!.forEach(menuItem => {
       if (menuItem !== this) {
-        menuItem._getItemSubMenuTrigger()?.closeMenu();
+        // menuItem._getItemSubMenuTrigger()?.closeMenu();
+        let _a: any;
+        // tslint:disable-next-line: no-unused-expression
+        (_a = menuItem._getItemSubMenuTrigger()) === null || _a === void 0 ? void 0 : _a.closeMenu();
       }
     });
   }