fix(): support for Angular 8

package.json

@@ -7,8 +7,8 @@
   },
   "scripts": {
     "start": "ng serve --port 1111",
-    "build": "yarn prerender && ngsw-config dist/alyle-ui src/ngsw-config.json",
-    "build:ci": "yarn tools:docs-api && ./ci/scripts/build-style-compiler.sh && node dist/@alyle/ui/style-compiler/main src && yarn prerender && ngsw-config dist/alyle-ui src/ngsw-config.json",
+    "build": "ng build alyle-ui --prod",
+    "build:ci": "yarn tools:docs-api && ./ci/scripts/build-style-compiler.sh && node dist/@alyle/ui/style-compiler/main src && yarn build",
     "build:browser": "ng build alyle-ui --prod",
     "build:server": "ng run alyle-ui:server",
     "serve": "yarn build && firebase serve only hosting",
@@ -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",
+    "typedoc": "^0.15.0",
+    "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/demo-view/view/view.component.ts

@@ -155,7 +155,7 @@ export class ViewComponent implements OnInit {
     );
     data.subscribe(([res1, res2, res3, ...others]) => {
       const otherModules = `/** Angular */
-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 { HttpClientModule } from '@angular/common/http';
 
@@ -201,7 +201,6 @@ export class GlobalVariables {
         return str + `BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    HammerModule,
     `;
       }).replace(DECLARATIONS_REGEXP, (str, token) => {
         return `bootstrap: [${token}],

src/app/docs/components/image-cropper-demo/cropper-with-dialog/cropper-with-dialog.module.ts

@@ -26,6 +26,7 @@ import { CropperDialog } from './cropper-dialog';
     LyIconModule,
     LyDialogModule
   ],
-  exports: [CropperWithDialogComponent]
+  exports: [CropperWithDialogComponent],
+  entryComponents: [CropperDialog]
 })
 export class CropperWithDialogModule { }

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];