feat(admin-ui): Update to Angular 8

admin-ui/package.json

@@ -12,24 +12,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^7.2.2",
-    "@angular/cdk": "^7.2.2",
-    "@angular/common": "^7.2.2",
-    "@angular/compiler": "^7.2.2",
-    "@angular/core": "^7.2.2",
-    "@angular/forms": "^7.2.2",
-    "@angular/http": "^7.2.2",
-    "@angular/platform-browser": "^7.2.2",
-    "@angular/platform-browser-dynamic": "^7.2.2",
-    "@angular/router": "^7.2.2",
-    "@clr/angular": "^1.1.3",
-    "@clr/icons": "^1.1.3",
-    "@clr/ui": "^1.1.3",
+    "@angular/animations": "^8.0.0",
+    "@angular/cdk": "^8.0.0",
+    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/forms": "^8.0.0",
+    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/router": "^8.0.0",
+    "@clr/angular": "^2.0.0-rc.2",
+    "@clr/icons": "^2.0.0-rc.2",
+    "@clr/ui": "^2.0.0-rc.2",
     "@ng-select/ng-select": "^2.19.0",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "@webcomponents/custom-elements": "^1.2.1",
-    "apollo-angular": "^1.5.0",
+    "apollo-angular": "^1.6.0",
     "apollo-cache-inmemory": "^1.5.1",
     "apollo-client": "^2.5.1",
     "apollo-link": "^1.2.11",
@@ -41,16 +40,16 @@
     "messageformat": "^2.0.5",
     "ngx-pagination": "^3.2.1",
     "ngx-translate-messageformat-compiler": "^4.4.0",
-    "rxjs": "^6.5.1",
+    "rxjs": "^6.5.2",
     "trix": "^1.1.1",
     "tslib": "^1.9.0",
-    "zone.js": "^0.8.29"
+    "zone.js": "^0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.12.3",
-    "@angular/cli": "^7.2.3",
-    "@angular/compiler-cli": "^7.2.2",
-    "@angular/language-service": "^7.2.2",
+    "@angular-devkit/build-angular": "^0.800.1",
+    "@angular/cli": "^8.0.1",
+    "@angular/compiler-cli": "^8.0.0",
+    "@angular/language-service": "^8.0.0",
     "@biesbjerg/ngx-translate-extract": "^2.3.4",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.6",
@@ -68,6 +67,6 @@
     "puppeteer": "^1.15.0",
     "rimraf": "^2.6.3",
     "tslint": "^5.12.1",
-    "typescript": "~3.2.4"
+    "typescript": "~3.4.5"
   }
 }

admin-ui/src/app/catalog/components/asset-preview/asset-preview.component.ts

@@ -16,8 +16,8 @@ export class AssetPreviewComponent implements Dialog<void> {
     width = 0;
     height = 0;
     centered = true;
-    @ViewChild('imageElement') private imageElementRef: ElementRef<HTMLImageElement>;
-    @ViewChild('previewDiv') private previewDivRef: ElementRef<HTMLDivElement>;
+    @ViewChild('imageElement', { static: true }) private imageElementRef: ElementRef<HTMLImageElement>;
+    @ViewChild('previewDiv', { static: true }) private previewDivRef: ElementRef<HTMLDivElement>;
 
     getDimensions() {
         const img = this.imageElementRef.nativeElement;

admin-ui/src/app/catalog/components/collection-contents/collection-contents.component.ts

@@ -33,7 +33,7 @@ import { DataService } from '../../../data/providers/data.service';
 })
 export class CollectionContentsComponent implements OnInit, OnChanges, OnDestroy {
     @Input() collectionId: string;
-    @ContentChild(TemplateRef) headerTemplate: TemplateRef<any>;
+    @ContentChild(TemplateRef, { static: true }) headerTemplate: TemplateRef<any>;
 
     contents$: Observable<GetCollectionContents.Items[]>;
     contentsTotalItems$: Observable<number>;

admin-ui/src/app/catalog/components/collection-detail/collection-detail.component.ts

@@ -46,7 +46,7 @@ export class CollectionDetailComponent extends BaseDetailComponent<Collection.Fr
     allFilters: ConfigurableOperation[] = [];
     facets$: Observable<FacetWithValues.Fragment[]>;
     activeChannel$: Observable<GetActiveChannel.ActiveChannel>;
-    @ViewChild('collectionContents') contentsComponent: CollectionContentsComponent;
+    @ViewChild('collectionContents', { static: false }) contentsComponent: CollectionContentsComponent;
 
     constructor(
         router: Router,

admin-ui/src/app/catalog/components/create-option-group-dialog/create-option-group-dialog.component.ts

@@ -13,7 +13,8 @@ import { CreateOptionGroupFormComponent } from '../create-option-group-form/crea
 export class CreateOptionGroupDialogComponent implements Dialog<CreateProductOptionGroup.Mutation> {
     productId: string;
     productName: string;
-    @ViewChild('createOptionGroupForm') createOptionGroupForm: CreateOptionGroupFormComponent;
+    @ViewChild('createOptionGroupForm', { static: true })
+    createOptionGroupForm: CreateOptionGroupFormComponent;
     resolveWith: (result?: CreateProductOptionGroup.Mutation) => void;
 
     createOptionGroup() {

admin-ui/src/app/catalog/components/generate-product-variants/generate-product-variants.component.ts

@@ -11,7 +11,8 @@ import { ProductVariantsWizardComponent } from '../product-variants-wizard/produ
 })
 export class GenerateProductVariantsComponent {
     @Input() product: ProductWithVariants.Fragment;
-    @ViewChild('productVariantsWizard') productVariantsWizard: ProductVariantsWizardComponent;
+    @ViewChild('productVariantsWizard', { static: true })
+    productVariantsWizard: ProductVariantsWizardComponent;
     constructor(private dataService: DataService) {}
 
     startProductVariantsWizard() {

admin-ui/src/app/catalog/components/product-list/product-list.component.ts

@@ -24,7 +24,8 @@ export class ProductListComponent
     facetValueIds: string[] = [];
     groupByProduct = true;
     facetValues$: Observable<SearchProducts.FacetValues[]>;
-    @ViewChild('productSearchInputComponent') private productSearchInput: ProductSearchInputComponent;
+    @ViewChild('productSearchInputComponent', { static: true })
+    private productSearchInput: ProductSearchInputComponent;
     constructor(
         private dataService: DataService,
         private modalService: ModalService,

admin-ui/src/app/catalog/components/product-search-input/product-search-input.component.ts

@@ -17,7 +17,7 @@ export class ProductSearchInputComponent {
     @Input() facetValueResults: SearchProducts.FacetValues[];
     @Output() searchTermChange = new EventEmitter<string>();
     @Output() facetValueChange = new EventEmitter<string[]>();
-    @ViewChild('selectComponent') private selectComponent: NgSelectComponent;
+    @ViewChild('selectComponent', { static: true }) private selectComponent: NgSelectComponent;
     private lastTerm = '';
     private lastFacetValueIds: string[] = [];
 

admin-ui/src/app/catalog/components/product-variants-wizard/product-variants-wizard.component.ts

@@ -18,9 +18,10 @@ import { SelectOptionGroupComponent } from '../select-option-group/select-option
 })
 export class ProductVariantsWizardComponent implements OnChanges {
     @Input() product: ProductWithVariants.Fragment;
-    @ViewChild('wizard') wizard: ClrWizard;
-    @ViewChild('createOptionGroupForm') createOptionGroupForm: CreateOptionGroupFormComponent;
-    @ViewChild('selectOptionGroup') selectOptionGroup: SelectOptionGroupComponent;
+    @ViewChild('wizard', { static: true }) wizard: ClrWizard;
+    @ViewChild('createOptionGroupForm', { static: true })
+    createOptionGroupForm: CreateOptionGroupFormComponent;
+    @ViewChild('selectOptionGroup', { static: true }) selectOptionGroup: SelectOptionGroupComponent;
     selectedOptionGroups: Array<Partial<ProductOptionGroup.Fragment>> = [];
     productVariantPreviewList: string[] = [];
     defaultPrice = 0;

admin-ui/src/app/core/components/notification/notification.component.ts

@@ -8,7 +8,7 @@ import { NotificationType } from '../../providers/notification/notification.serv
     styleUrls: ['./notification.component.scss'],
 })
 export class NotificationComponent {
-    @ViewChild('wrapper') wrapper: ElementRef;
+    @ViewChild('wrapper', { static: true }) wrapper: ElementRef;
     offsetTop = 0;
     message = '';
     translationVars: { [key: string]: string | number } = {};

admin-ui/src/app/shared/components/action-bar/action-bar.component.ts

@@ -26,6 +26,6 @@ export class ActionBarRightComponent {
     styleUrls: ['./action-bar.component.scss'],
 })
 export class ActionBarComponent {
-    @ContentChild(ActionBarLeftComponent) left: ActionBarLeftComponent;
-    @ContentChild(ActionBarRightComponent) right: ActionBarRightComponent;
+    @ContentChild(ActionBarLeftComponent, { static: true }) left: ActionBarLeftComponent;
+    @ContentChild(ActionBarRightComponent, { static: true }) right: ActionBarRightComponent;
 }

admin-ui/src/app/shared/components/data-table/data-table-column.component.ts

@@ -11,5 +11,5 @@ export class DataTableColumnComponent {
      * When set to true, this column will expand to use avaiable width
      */
     @Input() expand = false;
-    @ViewChild(TemplateRef) template: TemplateRef<any>;
+    @ViewChild(TemplateRef, { static: true }) template: TemplateRef<any>;
 }

admin-ui/src/app/shared/components/dropdown/dropdown-menu.component.ts

@@ -52,7 +52,7 @@ export type DropdownPosition = 'top-left' | 'top-right' | 'bottom-left' | 'botto
 })
 export class DropdownMenuComponent implements AfterViewInit, OnInit, OnDestroy {
     @Input('vdrPosition') private position: DropdownPosition = 'bottom-left';
-    @ViewChild('menu') private menuTemplate: TemplateRef<any>;
+    @ViewChild('menu', { static: true }) private menuTemplate: TemplateRef<any>;
     private menuPortal: TemplatePortal<any>;
     private overlayRef: OverlayRef;
     private backdropClickSub: Subscription;

admin-ui/src/app/shared/components/form-field/form-field.component.ts

@@ -32,7 +32,7 @@ export class FormFieldComponent implements OnInit {
      * will be displayed which allows the field to be edited.
      */
     @Input() readOnlyToggle = false;
-    @ContentChild(FormFieldControlDirective) formFieldControl: FormFieldControlDirective;
+    @ContentChild(FormFieldControlDirective, { static: true }) formFieldControl: FormFieldControlDirective;
     isReadOnly = false;
 
     ngOnInit() {

admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.ts

@@ -41,7 +41,7 @@ export class RichTextEditorComponent implements ControlValueAccessor, AfterViewI
     disabled = false;
     private initialized = false;
 
-    @ViewChild('trixEditor') private trixEditor: ElementRef;
+    @ViewChild('trixEditor', { static: true }) private trixEditor: ElementRef;
 
     constructor(private changeDetector: ChangeDetectorRef) {}
 

admin-ui/src/app/shared/providers/modal/modal.service.ts

@@ -1,7 +1,7 @@
 import { ComponentFactoryResolver, Injectable, ViewContainerRef } from '@angular/core';
-import { Type } from '@angular/core/src/type';
 import { from, Observable, of } from 'rxjs';
 import { map, mergeMap } from 'rxjs/operators';
+import { Type } from 'shared/shared-types';
 
 import { OverlayHostService } from '../../../core/providers/overlay-host/overlay-host.service';
 import { ModalDialogComponent } from '../../components/modal-dialog/modal-dialog.component';

admin-ui/src/styles/_variables.scss

@@ -1,6 +1,3 @@
-@import "../../node_modules/@clr/ui/src/color/utils/colors.clarity";
-@import "../../node_modules/@clr/ui/src/color/utils/contrast-cache.clarity";
-@import "../../node_modules/@clr/ui/src/color/utils/helpers.clarity";
 @import "../../node_modules/@clr/ui/src/color/variables.color";
 
 // colors

admin-ui/src/styles/styles.scss

@@ -1,6 +1,3 @@
-// Clarity Dependency SCSS
-@import "~@clr/ui/src/utils/dependencies.clarity"; // Includes light theme
-
 // Clarity Component SCSS
 @import "~@clr/ui/src/utils/components.clarity";