feat(admin-ui): Update to Angular v13

packages/admin-ui/.gitignore

@@ -27,6 +27,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

packages/admin-ui/angular.json

@@ -119,18 +119,6 @@
               ]
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -149,15 +137,6 @@
               "devServerTarget": "vendure-admin:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },

packages/admin-ui/package.json

@@ -20,15 +20,15 @@
     "directory": "package"
   },
   "dependencies": {
-    "@angular/animations": "12.2.16",
-    "@angular/cdk": "12.2.13",
-    "@angular/common": "12.2.16",
-    "@angular/core": "12.2.16",
-    "@angular/forms": "12.2.16",
-    "@angular/language-service": "12.2.16",
-    "@angular/platform-browser": "12.2.16",
-    "@angular/platform-browser-dynamic": "12.2.16",
-    "@angular/router": "12.2.16",
+    "@angular/animations": "13.2.3",
+    "@angular/cdk": "13.2.3",
+    "@angular/common": "13.2.3",
+    "@angular/core": "13.2.3",
+    "@angular/forms": "13.2.3",
+    "@angular/language-service": "13.2.3",
+    "@angular/platform-browser": "13.2.3",
+    "@angular/platform-browser-dynamic": "13.2.3",
+    "@angular/router": "13.2.3",
     "@apollo/client": "^3.5.5",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
     "@cds/core": "^5.5.2",
@@ -65,10 +65,10 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.16",
-    "@angular/cli": "12.2.16",
-    "@angular/compiler": "12.2.16",
-    "@angular/compiler-cli": "12.2.16",
+    "@angular-devkit/build-angular": "~13.2.4",
+    "@angular/cli": "13.2.4",
+    "@angular/compiler": "13.2.3",
+    "@angular/compiler-cli": "13.2.3",
     "@biesbjerg/ngx-translate-extract": "^7.0.3",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.6",
@@ -88,11 +88,11 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "12.2.7",
+    "ng-packagr": "13.2.1",
     "protractor": "~7.0.0",
     "puppeteer": "^8.0.0",
     "rimraf": "^3.0.2",
     "tslint": "~6.1.3",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   }
 }

packages/admin-ui/src/lib/catalog/src/components/collection-list/collection-list.component.ts

@@ -23,7 +23,7 @@ import {
     tap,
 } from 'rxjs/operators';
 
-import { RearrangeEvent } from '../collection-tree/collection-tree.component';
+import { RearrangeEvent } from '../collection-tree/collection-tree.types';
 
 @Component({
     selector: 'vdr-collection-list',

packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree-node.component.ts

@@ -14,7 +14,8 @@ import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 
 import { RootNode, TreeNode } from './array-to-tree';
-import { CollectionPartial, CollectionTreeComponent } from './collection-tree.component';
+import { CollectionTreeService } from './collection-tree.service';
+import { CollectionPartial } from './collection-tree.types';
 
 @Component({
     selector: 'vdr-collection-tree-node',
@@ -34,8 +35,8 @@ export class CollectionTreeNodeComponent implements OnInit, OnChanges {
 
     constructor(
         @SkipSelf() @Optional() private parent: CollectionTreeNodeComponent,
-        private root: CollectionTreeComponent,
         private dataService: DataService,
+        private collectionTreeService: CollectionTreeService,
     ) {
         if (parent) {
             this.depth = parent.depth + 1;
@@ -76,11 +77,11 @@ export class CollectionTreeNodeComponent implements OnInit, OnChanges {
     }
 
     getMoveListItems(collection: CollectionPartial) {
-        this.moveListItems = this.root.getMoveListItems(collection);
+        this.moveListItems = this.collectionTreeService.getMoveListItems(collection);
     }
 
     move(collection: CollectionPartial, parentId: string) {
-        this.root.onMove({
+        this.collectionTreeService.onMove({
             index: 0,
             parentId,
             collectionId: collection.id,
@@ -91,7 +92,7 @@ export class CollectionTreeNodeComponent implements OnInit, OnChanges {
         if (!collection.parent) {
             return;
         }
-        this.root.onMove({
+        this.collectionTreeService.onMove({
             index: currentIndex - 1,
             parentId: collection.parent.id,
             collectionId: collection.id,
@@ -102,7 +103,7 @@ export class CollectionTreeNodeComponent implements OnInit, OnChanges {
         if (!collection.parent) {
             return;
         }
-        this.root.onMove({
+        this.collectionTreeService.onMove({
             index: currentIndex + 1,
             parentId: collection.parent.id,
             collectionId: collection.id,
@@ -111,10 +112,10 @@ export class CollectionTreeNodeComponent implements OnInit, OnChanges {
 
     drop(event: CdkDragDrop<CollectionPartial | RootNode<CollectionPartial>>) {
         moveItemInArray(this.collectionTree.children, event.previousIndex, event.currentIndex);
-        this.root.onDrop(event);
+        this.collectionTreeService.onDrop(event);
     }
 
     delete(id: string) {
-        this.root.onDelete(id);
+        this.collectionTreeService.onDelete(id);
     }
 }

packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree.component.ts

@@ -1,94 +1,45 @@
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import {
     ChangeDetectionStrategy,
     Component,
     EventEmitter,
     Input,
     OnChanges,
+    OnInit,
     Output,
     SimpleChanges,
 } from '@angular/core';
-import { Collection } from '@vendure/admin-ui/core';
 
-import { arrayToTree, HasParent, RootNode, TreeNode } from './array-to-tree';
-
-export type RearrangeEvent = { collectionId: string; parentId: string; index: number };
-export type CollectionPartial = Pick<Collection.Fragment, 'id' | 'parent' | 'name'>;
+import { arrayToTree, RootNode } from './array-to-tree';
+import { CollectionTreeService } from './collection-tree.service';
+import { CollectionPartial, RearrangeEvent } from './collection-tree.types';
 
 @Component({
     selector: 'vdr-collection-tree',
     templateUrl: 'collection-tree.component.html',
     styleUrls: ['./collection-tree.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [CollectionTreeService],
 })
-export class CollectionTreeComponent implements OnChanges {
+export class CollectionTreeComponent implements OnInit, OnChanges {
     @Input() collections: CollectionPartial[];
     @Input() activeCollectionId: string;
     @Input() expandAll = false;
     @Output() rearrange = new EventEmitter<RearrangeEvent>();
     @Output() deleteCollection = new EventEmitter<string>();
     collectionTree: RootNode<CollectionPartial>;
-    private allMoveListItems: Array<{ path: string; id: string; ancestorIdPath: Set<string> }> = [];
+
+    constructor(private collectionTreeService: CollectionTreeService) {}
 
     ngOnChanges(changes: SimpleChanges) {
         if ('collections' in changes && this.collections) {
             this.collectionTree = arrayToTree(this.collections, this.collectionTree);
-            this.allMoveListItems = [];
-        }
-    }
-
-    onDrop(event: CdkDragDrop<CollectionPartial | RootNode<CollectionPartial>>) {
-        const item = event.item.data as CollectionPartial;
-        const newParent = event.container.data;
-        const newParentId = newParent.id;
-        if (newParentId == null) {
-            throw new Error(`Could not determine the ID of the root Collection`);
-        }
-        this.rearrange.emit({
-            collectionId: item.id,
-            parentId: newParentId,
-            index: event.currentIndex,
-        });
-    }
-
-    onMove(event: RearrangeEvent) {
-        this.rearrange.emit(event);
-    }
-
-    onDelete(id: string) {
-        this.deleteCollection.emit(id);
-    }
-
-    getMoveListItems(collection: CollectionPartial) {
-        if (this.allMoveListItems.length === 0) {
-            this.allMoveListItems = this.calculateAllMoveListItems();
+            this.collectionTreeService.setCollectionTree(this.collectionTree);
+            this.collectionTreeService.resetMoveList();
         }
-        return this.allMoveListItems.filter(
-            item =>
-                item.id !== collection.id &&
-                !item.ancestorIdPath.has(collection.id) &&
-                item.id !== collection.parent?.id,
-        );
-    }
-
-    calculateAllMoveListItems() {
-        const visit = (
-            node: TreeNode<any>,
-            parentPath: string[],
-            ancestorIdPath: Set<string>,
-            output: Array<{ path: string; id: string; ancestorIdPath: Set<string> }>,
-        ) => {
-            const path = parentPath.concat(node.name);
-            output.push({ path: path.slice(1).join(' / ') || 'root', id: node.id, ancestorIdPath });
-            node.children.forEach(child =>
-                visit(child, path, new Set<string>([...ancestorIdPath, node.id]), output),
-            );
-            return output;
-        };
-        return visit(this.collectionTree, [], new Set<string>(), []);
     }
 
-    private isRootNode<T extends HasParent>(node: T | RootNode<T>): node is RootNode<T> {
-        return !node.hasOwnProperty('parent');
+    ngOnInit() {
+        this.collectionTreeService.rearrange$.subscribe(event => this.rearrange.emit(event));
+        this.collectionTreeService.delete$.subscribe(id => this.deleteCollection.emit(id));
     }
 }

packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree.service.ts

@@ -0,0 +1,90 @@
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { Injectable, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+
+import { RootNode, TreeNode } from './array-to-tree';
+import { CollectionPartial, RearrangeEvent } from './collection-tree.types';
+
+/**
+ * Facilitates communication between the CollectionTreeComponent and child CollectionTreeNodeComponents
+ * without introducing a cyclic dependency.
+ */
+@Injectable()
+export class CollectionTreeService implements OnDestroy {
+    private allMoveListItems: Array<{ path: string; id: string; ancestorIdPath: Set<string> }> = [];
+    private collectionTree: RootNode<CollectionPartial>;
+    private _rearrange$ = new Subject<RearrangeEvent>();
+    private _delete$ = new Subject<string>();
+
+    public rearrange$: Observable<RearrangeEvent>;
+    public delete$: Observable<string>;
+
+    constructor() {
+        this.rearrange$ = this._rearrange$.asObservable();
+        this.delete$ = this._delete$.asObservable();
+    }
+
+    ngOnDestroy() {
+        this._rearrange$.complete();
+        this._delete$.complete();
+    }
+
+    setCollectionTree(tree: RootNode<CollectionPartial>) {
+        this.collectionTree = tree;
+    }
+
+    resetMoveList() {
+        this.allMoveListItems = [];
+    }
+
+    getMoveListItems(collection: CollectionPartial) {
+        if (this.allMoveListItems.length === 0) {
+            this.allMoveListItems = this.calculateAllMoveListItems();
+        }
+        return this.allMoveListItems.filter(
+            item =>
+                item.id !== collection.id &&
+                !item.ancestorIdPath.has(collection.id) &&
+                item.id !== collection.parent?.id,
+        );
+    }
+
+    onDrop(event: CdkDragDrop<CollectionPartial | RootNode<CollectionPartial>>) {
+        const item = event.item.data as CollectionPartial;
+        const newParent = event.container.data;
+        const newParentId = newParent.id;
+        if (newParentId == null) {
+            throw new Error(`Could not determine the ID of the root Collection`);
+        }
+        this._rearrange$.next({
+            collectionId: item.id,
+            parentId: newParentId,
+            index: event.currentIndex,
+        });
+    }
+
+    onMove(event: RearrangeEvent) {
+        this._rearrange$.next(event);
+    }
+
+    onDelete(id: string) {
+        this._delete$.next(id);
+    }
+
+    private calculateAllMoveListItems() {
+        const visit = (
+            node: TreeNode<any>,
+            parentPath: string[],
+            ancestorIdPath: Set<string>,
+            output: Array<{ path: string; id: string; ancestorIdPath: Set<string> }>,
+        ) => {
+            const path = parentPath.concat(node.name);
+            output.push({ path: path.slice(1).join(' / ') || 'root', id: node.id, ancestorIdPath });
+            node.children.forEach(child =>
+                visit(child, path, new Set<string>([...ancestorIdPath, node.id]), output),
+            );
+            return output;
+        };
+        return visit(this.collectionTree, [], new Set<string>(), []);
+    }
+}

packages/admin-ui/src/lib/catalog/src/components/collection-tree/collection-tree.types.ts

@@ -0,0 +1,4 @@
+import { Collection } from '@vendure/admin-ui/core';
+
+export type RearrangeEvent = { collectionId: string; parentId: string; index: number };
+export type CollectionPartial = Pick<Collection.Fragment, 'id' | 'parent' | 'name'>;

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.component.ts

@@ -4,7 +4,6 @@ import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@ang
 import { ActivatedRoute, Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import {
-    Asset,
     BaseDetailComponent,
     CreateProductInput,
     createUpdatedTranslatable,
@@ -14,7 +13,6 @@ import {
     findTranslation,
     flattenFacetValues,
     GetProductWithVariants,
-    GlobalFlag,
     LanguageCode,
     LogicalOperator,
     ModalService,
@@ -58,34 +56,7 @@ import { AssignProductsToChannelDialogComponent } from '../assign-products-to-ch
 import { CreateProductVariantsConfig } from '../generate-product-variants/generate-product-variants.component';
 import { VariantAssetChange } from '../product-variants-list/product-variants-list.component';
 
-export type TabName = 'details' | 'variants';
-
-export interface VariantFormValue {
-    id: string;
-    enabled: boolean;
-    sku: string;
-    name: string;
-    price: number;
-    priceWithTax: number;
-    taxCategoryId: string;
-    stockOnHand: number;
-    useGlobalOutOfStockThreshold: boolean;
-    outOfStockThreshold: number;
-    trackInventory: GlobalFlag;
-    facetValueIds: string[];
-    customFields?: any;
-}
-
-export interface SelectedAssets {
-    assets?: Asset[];
-    featuredAsset?: Asset;
-}
-
-export interface PaginationConfig {
-    totalItems: number;
-    currentPage: number;
-    itemsPerPage: number;
-}
+import { PaginationConfig, SelectedAssets, TabName, VariantFormValue } from './product-detail.types';
 
 @Component({
     selector: 'vdr-product-detail',

packages/admin-ui/src/lib/catalog/src/components/product-detail/product-detail.types.ts

@@ -0,0 +1,30 @@
+import { Asset, GlobalFlag } from '@vendure/admin-ui/core';
+
+export type TabName = 'details' | 'variants';
+
+export interface VariantFormValue {
+    id: string;
+    enabled: boolean;
+    sku: string;
+    name: string;
+    price: number;
+    priceWithTax: number;
+    taxCategoryId: string;
+    stockOnHand: number;
+    useGlobalOutOfStockThreshold: boolean;
+    outOfStockThreshold: number;
+    trackInventory: GlobalFlag;
+    facetValueIds: string[];
+    customFields?: any;
+}
+
+export interface SelectedAssets {
+    assets?: Asset[];
+    featuredAsset?: Asset;
+}
+
+export interface PaginationConfig {
+    totalItems: number;
+    currentPage: number;
+    itemsPerPage: number;
+}

packages/admin-ui/src/lib/catalog/src/components/product-variants-list/product-variants-list.component.ts

@@ -34,11 +34,7 @@ import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
 import { AssetChange } from '../assets/assets.component';
-import {
-    PaginationConfig,
-    SelectedAssets,
-    VariantFormValue,
-} from '../product-detail/product-detail.component';
+import { PaginationConfig, SelectedAssets, VariantFormValue } from '../product-detail/product-detail.types';
 import { UpdateProductOptionDialogComponent } from '../update-product-option-dialog/update-product-option-dialog.component';
 
 export interface VariantAssetChange extends AssetChange {

packages/admin-ui/src/lib/catalog/src/components/product-variants-table/product-variants-table.component.ts

@@ -11,7 +11,7 @@ import { Permission, ProductDetail, ProductVariant } from '@vendure/admin-ui/cor
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 
-import { PaginationConfig, SelectedAssets } from '../product-detail/product-detail.component';
+import { PaginationConfig, SelectedAssets } from '../product-detail/product-detail.types';
 
 @Component({
     selector: 'vdr-product-variants-table',

packages/admin-ui/src/lib/catalog/src/public_api.ts

@@ -12,12 +12,15 @@ export * from './components/collection-list/collection-list.component';
 export * from './components/collection-tree/array-to-tree';
 export * from './components/collection-tree/collection-tree-node.component';
 export * from './components/collection-tree/collection-tree.component';
+export * from './components/collection-tree/collection-tree.service';
+export * from './components/collection-tree/collection-tree.types';
 export * from './components/confirm-variant-deletion-dialog/confirm-variant-deletion-dialog.component';
 export * from './components/facet-detail/facet-detail.component';
 export * from './components/facet-list/facet-list.component';
 export * from './components/generate-product-variants/generate-product-variants.component';
 export * from './components/option-value-input/option-value-input.component';
 export * from './components/product-detail/product-detail.component';
+export * from './components/product-detail/product-detail.types';
 export * from './components/product-list/product-list.component';
 export * from './components/product-options-editor/product-options-editor.component';
 export * from './components/product-search-input/product-search-input.component';

packages/admin-ui/src/lib/core/src/common/utilities/configurable-operation-utils.ts

@@ -16,7 +16,7 @@ import {
 export function getConfigArgValue(value: any) {
     try {
         return value ? JSON.parse(value) : undefined;
-    } catch (e) {
+    } catch (e: any) {
         return value;
     }
 }

packages/admin-ui/src/lib/core/src/components/ui-language-switcher-dialog/ui-language-switcher-dialog.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
 import { CurrencyCode, LanguageCode } from '../../common/generated-types';
-import { Dialog } from '../../providers/modal/modal.service';
+import { Dialog } from '../../providers/modal/modal.types';
 
 @Component({
     selector: 'vdr-ui-language-switcher',

packages/admin-ui/src/lib/core/src/providers/i18n/custom-message-format-compiler.ts

@@ -18,7 +18,7 @@ export class InjectableTranslateMessageFormatCompiler extends TranslateMessageFo
     compileTranslations(value: any, lang: string): any {
         try {
             return super.compileTranslations(value, lang);
-        } catch (e) {
+        } catch (e: any) {
             console.error(`There was an error with the ${lang} translations:`);
             console.log(e);
             console.log(

packages/admin-ui/src/lib/core/src/providers/local-storage/local-storage.service.ts

@@ -66,7 +66,7 @@ export class LocalStorageService {
         let result: any;
         try {
             result = JSON.parse(item || 'null');
-        } catch (e) {
+        } catch (e: any) {
             // tslint:disable-next-line:no-console
             console.error(`Could not parse the localStorage value for "${key}" (${item})`);
         }

packages/admin-ui/src/lib/core/src/providers/modal/modal.service.ts

@@ -7,74 +7,7 @@ import { ModalDialogComponent } from '../../shared/components/modal-dialog/modal
 import { SimpleDialogComponent } from '../../shared/components/simple-dialog/simple-dialog.component';
 import { OverlayHostService } from '../overlay-host/overlay-host.service';
 
-/**
- * @description
- * Any component intended to be used with the ModalService.fromComponent() method must implement
- * this interface.
- *
- * @docsCategory providers
- * @docsPage ModalService
- */
-export interface Dialog<R = any> {
-    /**
-     * @description
-     * Function to be invoked in order to close the dialog when the action is complete.
-     * The Observable returned from the .fromComponent() method will emit the value passed
-     * to this method and then complete.
-     */
-    resolveWith: (result?: R) => void;
-}
-
-export interface DialogButtonConfig<T> {
-    label: string;
-    type: 'secondary' | 'primary' | 'danger';
-    returnValue?: T;
-}
-
-/**
- * @description
- * Configures a generic modal dialog.
- *
- * @docsCategory providers
- * @docsPage ModalService
- */
-export interface DialogConfig<T> {
-    title: string;
-    body?: string;
-    translationVars?: { [key: string]: string | number };
-    buttons: Array<DialogButtonConfig<T>>;
-}
-
-/**
- * @description
- * Options to configure the behaviour of the modal.
- *
- * @docsCategory providers
- * @docsPage ModalService
- */
-export interface ModalOptions<T> {
-    /**
-     * @description
-     * Sets the width of the dialog
-     */
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    /**
-     * @description
-     * Sets the vertical alignment of the dialog
-     */
-    verticalAlign?: 'top' | 'center' | 'bottom';
-    /**
-     * @description
-     * When true, the "x" icon is shown
-     * and clicking it or the mask will close the dialog
-     */
-    closable?: boolean;
-    /**
-     * @description
-     * Values to be passed directly to the component being instantiated inside the dialog.
-     */
-    locals?: Partial<T>;
-}
+import { Dialog, DialogConfig, ModalOptions } from './modal.types';
 
 /**
  * @description

packages/admin-ui/src/lib/core/src/providers/modal/modal.types.ts

@@ -0,0 +1,68 @@
+/**
+ * @description
+ * Any component intended to be used with the ModalService.fromComponent() method must implement
+ * this interface.
+ *
+ * @docsCategory providers
+ * @docsPage ModalService
+ */
+export interface Dialog<R = any> {
+    /**
+     * @description
+     * Function to be invoked in order to close the dialog when the action is complete.
+     * The Observable returned from the .fromComponent() method will emit the value passed
+     * to this method and then complete.
+     */
+    resolveWith: (result?: R) => void;
+}
+
+export interface DialogButtonConfig<T> {
+    label: string;
+    type: 'secondary' | 'primary' | 'danger';
+    returnValue?: T;
+}
+
+/**
+ * @description
+ * Configures a generic modal dialog.
+ *
+ * @docsCategory providers
+ * @docsPage ModalService
+ */
+export interface DialogConfig<T> {
+    title: string;
+    body?: string;
+    translationVars?: { [key: string]: string | number };
+    buttons: Array<DialogButtonConfig<T>>;
+}
+
+/**
+ * @description
+ * Options to configure the behaviour of the modal.
+ *
+ * @docsCategory providers
+ * @docsPage ModalService
+ */
+export interface ModalOptions<T> {
+    /**
+     * @description
+     * Sets the width of the dialog
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * @description
+     * Sets the vertical alignment of the dialog
+     */
+    verticalAlign?: 'top' | 'center' | 'bottom';
+    /**
+     * @description
+     * When true, the "x" icon is shown
+     * and clicking it or the mask will close the dialog
+     */
+    closable?: boolean;
+    /**
+     * @description
+     * Values to be passed directly to the component being instantiated inside the dialog.
+     */
+    locals?: Partial<T>;
+}

packages/admin-ui/src/lib/core/src/public_api.ts

@@ -84,6 +84,7 @@ export * from './providers/i18n/i18n.service';
 export * from './providers/job-queue/job-queue.service';
 export * from './providers/local-storage/local-storage.service';
 export * from './providers/modal/modal.service';
+export * from './providers/modal/modal.types';
 export * from './providers/nav-builder/nav-builder-types';
 export * from './providers/nav-builder/nav-builder.service';
 export * from './providers/notification/notification.service';
@@ -95,9 +96,11 @@ export * from './shared/components/affixed-input/affixed-input.component';
 export * from './shared/components/affixed-input/percentage-suffix-input.component';
 export * from './shared/components/asset-file-input/asset-file-input.component';
 export * from './shared/components/asset-gallery/asset-gallery.component';
+export * from './shared/components/asset-gallery/asset-gallery.types';
 export * from './shared/components/asset-picker-dialog/asset-picker-dialog.component';
 export * from './shared/components/asset-preview/asset-preview.component';
 export * from './shared/components/asset-preview-dialog/asset-preview-dialog.component';
+export * from './shared/components/asset-preview-links/asset-preview-links.component';
 export * from './shared/components/asset-search-input/asset-search-input.component';
 export * from './shared/components/channel-assignment-control/channel-assignment-control.component';
 export * from './shared/components/channel-badge/channel-badge.component';

packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.ts

@@ -1,10 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-
-import { Asset, GetAssetList } from '../../../common/generated-types';
 import { ModalService } from '../../../providers/modal/modal.service';
 import { AssetPreviewDialogComponent } from '../asset-preview-dialog/asset-preview-dialog.component';
-
-export type AssetLike = GetAssetList.Items;
+import { AssetLike } from './asset-gallery.types';
 
 @Component({
     selector: 'vdr-asset-gallery',

packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.types.ts

@@ -0,0 +1,3 @@
+import { GetAssetList } from '../../../common/generated-types';
+
+export type AssetLike = GetAssetList.Items;

packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts

@@ -21,7 +21,7 @@ import {
 } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
 import { QueryResult } from '../../../data/query-result';
-import { Dialog } from '../../../providers/modal/modal.service';
+import { Dialog } from '../../../providers/modal/modal.types';
 import { NotificationService } from '../../../providers/notification/notification.service';
 import { AssetGalleryComponent } from '../asset-gallery/asset-gallery.component';
 import { AssetSearchInputComponent } from '../asset-search-input/asset-search-input.component';

packages/admin-ui/src/lib/core/src/shared/components/asset-preview-dialog/asset-preview-dialog.component.ts

@@ -4,7 +4,7 @@ import { mergeMap } from 'rxjs/operators';
 
 import { AssetFragment, GetAsset, GetAssetList, UpdateAssetInput } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
-import { Dialog } from '../../../providers/modal/modal.service';
+import { Dialog } from '../../../providers/modal/modal.types';
 
 type AssetLike = GetAssetList.Items | AssetFragment;
 

packages/admin-ui/src/lib/core/src/shared/components/asset-preview-links/asset-preview-links.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
-import { AssetLike } from '../asset-gallery/asset-gallery.component';
+import { AssetLike } from '../asset-gallery/asset-gallery.types';
 
 @Component({
     selector: 'vdr-asset-preview-links',

packages/admin-ui/src/lib/core/src/shared/components/edit-note-dialog/edit-note-dialog.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
-import { Dialog } from '../../../providers/modal/modal.service';
+import { Dialog } from '../../../providers/modal/modal.types';
 
 @Component({
     selector: 'vdr-edit-note-dialog',

packages/admin-ui/src/lib/core/src/shared/components/facet-value-selector/facet-value-selector.component.ts

@@ -105,7 +105,7 @@ export class FacetValueSelectorComponent implements OnInit, ControlValueAccessor
             try {
                 const facetIds = JSON.parse(obj) as string[];
                 this.value = facetIds;
-            } catch (err) {
+            } catch (err: any) {
                 // TODO: log error
                 throw err;
             }

packages/admin-ui/src/lib/core/src/shared/components/manage-tags-dialog/manage-tags-dialog.component.ts

@@ -3,7 +3,7 @@ import { forkJoin, Observable } from 'rxjs';
 
 import { GetTagList } from '../../../common/generated-types';
 import { DataService } from '../../../data/providers/data.service';
-import { Dialog } from '../../../providers/modal/modal.service';
+import { Dialog } from '../../../providers/modal/modal.types';
 
 @Component({
     selector: 'vdr-manage-tags-dialog',

packages/admin-ui/src/lib/core/src/shared/components/modal-dialog/modal-dialog.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 
-import { Dialog, ModalOptions } from '../../../providers/modal/modal.service';
+import { Dialog, ModalOptions } from '../../../providers/modal/modal.types';
 
 import { DialogButtonsDirective } from './dialog-buttons.directive';
 

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/external-image-dialog/external-image-dialog.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { Dialog } from '../../../../providers/modal/modal.service';
+import { Dialog } from '../../../../providers/modal/modal.types';
 
 export interface ExternalImageAttrs {
     src: string;

packages/admin-ui/src/lib/core/src/shared/components/rich-text-editor/link-dialog/link-dialog.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 
-import { Dialog } from '../../../../providers/modal/modal.service';
+import { Dialog } from '../../../../providers/modal/modal.types';
 
 export interface LinkAttrs {
     href: string;

packages/admin-ui/src/lib/core/src/shared/components/simple-dialog/simple-dialog.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 
-import { Dialog, DialogButtonConfig } from '../../../providers/modal/modal.service';
+import { Dialog, DialogButtonConfig } from '../../../providers/modal/modal.types';
 
 /**
  * Used by ModalService.dialog() to host a generic configurable modal dialog.

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/code-editor-form-input/json-editor-form-input.component.ts

@@ -19,7 +19,7 @@ export function jsonValidator(): ValidatorFn {
 
         try {
             JSON.parse(control.value);
-        } catch (e) {
+        } catch (e: any) {
             control.setErrors(error);
             return error;
         }
@@ -91,7 +91,7 @@ export class JsonEditorFormInputComponent implements FormInputComponent, AfterVi
     private getJsonError(json: string): string | undefined {
         try {
             JSON.parse(json);
-        } catch (e) {
+        } catch (e: any) {
             return e.message;
         }
         return;

packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/relation-form-input/relation-selector-dialog/relation-selector-dialog.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, TemplateRef } from '@angular/core';
 
-import { Dialog } from '../../../../providers/modal/modal.service';
+import { Dialog } from '../../../../providers/modal/modal.types';
 
 @Component({
     selector: 'vdr-relation-selector-dialog',

packages/admin-ui/src/lib/core/src/shared/pipes/locale-language-name.pipe.ts

@@ -39,7 +39,7 @@ export class LocaleLanguageNamePipe extends LocaleBasePipe implements PipeTransf
             return new DisplayNames([activeLocale.replace('_', '-')], { type: 'language' }).of(
                 value.replace('_', '-'),
             );
-        } catch (e) {
+        } catch (e: any) {
             return value;
         }
     }

packages/admin-ui/src/lib/core/src/shared/pipes/locale-region-name.pipe.ts

@@ -39,7 +39,7 @@ export class LocaleRegionNamePipe extends LocaleBasePipe implements PipeTransfor
             return new DisplayNames([activeLocale.replace('_', '-')], { type: 'region' }).of(
                 value.replace('_', '-'),
             );
-        } catch (e) {
+        } catch (e: any) {
             return value;
         }
     }

packages/admin-ui/src/lib/login/src/components/login/login.component.ts

@@ -47,7 +47,7 @@ export class LoginComponent {
             if (redirectToParam && 1 < redirectToParam.length) {
                 redirectTo = atob(decodeURIComponent(redirectToParam[1]));
             }
-        } catch (e) {
+        } catch (e: any) {
             // ignore
         }
         return redirectTo;

packages/admin-ui/src/lib/ng-package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../package",
-  "whitelistedNonPeerDependencies": ["."],
+  "allowedNonPeerDependencies": ["."],
   "assets": [
     "./static/favicon.ico",
     "./static/index.html",

packages/admin-ui/src/lib/static/polyfills.ts

@@ -34,9 +34,6 @@
 // import 'core-js/es6/weak-map';
 // import 'core-js/es6/set';
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
 /** IE10 and IE11 requires the following for the Reflect API. */
 // import 'core-js/es6/reflect';
 
@@ -44,13 +41,6 @@
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 import 'core-js/es/reflect';
 
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

packages/admin-ui/src/lib/static/styles/styles.scss

@@ -1,7 +1,7 @@
 @import "~@clr/icons/clr-icons.min.css";
 @import "~@clr/ui/src/utils/components.clarity";
 @import "~@ng-select/ng-select/themes/default.theme.css";
-@import '~@angular/cdk/overlay-prebuilt.css';
+@import '@angular/cdk/overlay-prebuilt.css';
 @import "global/forms";
 @import "global/overrides";
 @import "global/utilities";

packages/admin-ui/src/test.ts

@@ -10,7 +10,9 @@ import {
 declare const require: any;
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

packages/admin-ui/tsconfig.lib.prod.json

@@ -4,7 +4,7 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false,
+    "compilationMode": "partial",
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,