feat(app): refine phoenix-ui and fix test

.travis.yml

@@ -20,7 +20,6 @@ install:
 script:
   - cd ./packages/phoenix-app
   - npm run test:coverage -- --no-watch --no-progress --browsers=ChromeHeadlessCI
-  - npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
   # Bug with Angular 10 (https://github.com/angular/protractor/issues/5460)
   #- npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js
 

packages/phoenix-app/angular.json

@@ -155,8 +155,7 @@
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
             "tsConfig": "src/phoenix-ui/tsconfig.lib.json",
-            "project": "src/phoenix-ui/ng-package.json",
-            "styles": "src/styles.scss"
+            "project": "src/phoenix-ui/ng-package.json"
           },
           "configurations": {
             "production": {

packages/phoenix-app/package.json

@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1000.6",
-    "@angular-devkit/build-ng-packagr": "~0.1000.8",
+    "@angular-devkit/build-ng-packagr": "^0.1002.0",
     "@angular/cli": "^10.0.8",
     "@angular/compiler-cli": "^10.0.14",
     "@angular/language-service": "^10.0.14",
@@ -61,7 +61,7 @@
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.4",
-    "ng-packagr": "^10.0.0",
+    "ng-packagr": "^10.1.2",
     "protractor": "^7.0.0",
     "ts-node": "~9.0.0",
     "tslint": "~6.1.3",

packages/phoenix-app/src/phoenix-ui/components/phoenix-menu/pheonix-menu-item/phoenix-menu-item.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { PhoenixMenuNode } from 'phoenix-event-display';
+import type { PhoenixMenuNode } from 'phoenix-event-display';
 
 @Component({
   selector: 'app-phoenix-menu-item',

packages/phoenix-app/src/phoenix-ui/components/phoenix-menu/phoenix-menu.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { PhoenixMenuNode } from 'phoenix-event-display';
+import type { PhoenixMenuNode } from 'phoenix-event-display';
 
 @Component({
   selector: 'app-phoenix-menu',

packages/phoenix-app/src/phoenix-ui/components/ui-menu/animate-camera/animate-camera.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AnimateCameraComponent } from './animate-camera.component';
 import { EventDisplayService } from '../../../services/event-display.service';
+import { PhoenixUIModule } from '../../phoenix-ui.module';
 
 describe('AnimateCameraComponent', () => {
   let component: AnimateCameraComponent;
@@ -11,6 +12,7 @@ describe('AnimateCameraComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [PhoenixUIModule],
       declarations: [AnimateCameraComponent],
       providers: [{
         provide: EventDisplayService,

packages/phoenix-app/src/phoenix-ui/components/ui-menu/animate-event/animate-event.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { AnimateEventComponent } from './animate-event.component';
 import { EventDisplayService } from '../../../services/event-display.service';
+import { PhoenixUIModule } from '../../phoenix-ui.module';
 
 describe('AnimateEventComponent', () => {
   let component: AnimateEventComponent;
@@ -12,6 +13,7 @@ describe('AnimateEventComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [PhoenixUIModule],
       providers: [{
         provide: EventDisplayService,
         useValue: mockEventDisplay

packages/phoenix-app/src/phoenix-ui/components/ui-menu/io-options/io-options-dialog/io-options-dialog.component.spec.ts

@@ -70,7 +70,7 @@ describe('IoOptionsDialogComponent', () => {
         component.handleJiveXMLDataInput(files);
         expect(component.handleFileInput).toHaveBeenCalled();
       });
-    });
+    }, 30000);
 
     describe('handleEventDataInput sync', () => {
       afterEach(() => {

packages/phoenix-app/src/phoenix-ui/components/ui-menu/menu-toggle/menu-toggle.component.spec.ts

@@ -1,15 +1,14 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MenuToggleComponent } from './menu-toggle.component';
-import { PhoenixUIModule } from '../../phoenix-ui.module';
 
 describe('MenuToggleComponent', () => {
   let component: MenuToggleComponent;
   let fixture: ComponentFixture<MenuToggleComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [PhoenixUIModule]
+      declarations: [MenuToggleComponent]
     })
       .compileComponents();
   }));

packages/phoenix-app/src/phoenix-ui/components/ui-menu/overlay-view/overlay-view-window/overlay-view-window.component.ts

@@ -1,4 +1,5 @@
-import { Component, ViewChild, ElementRef, AfterViewInit, Input } from '@angular/core';
+import { Component, ViewChild, AfterViewInit, Input } from '@angular/core';
+import type { ElementRef } from '@angular/core';
 import { EventDisplayService } from '../../../../services/event-display.service';
 
 @Component({

packages/phoenix-app/src/phoenix-ui/components/ui-menu/overlay/overlay.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { Component, Input, ViewChild, AfterViewInit } from '@angular/core';
+import type { ElementRef } from '@angular/core';
 import { ResizeSensor } from "css-element-queries";
 
 /**

packages/phoenix-app/src/phoenix-ui/components/ui-menu/tree-menu/tree-menu-item/tree-menu-item.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, ViewChildren, QueryList } from '@angular/core';
+import { Component, Input, ViewChildren } from '@angular/core';
+import type { QueryList } from '@angular/core';
 import { EventDisplayService } from '../../../../services/event-display.service';
 
 @Component({

packages/phoenix-app/src/phoenix-ui/components/ui-menu/vr-toggle/vr-toggle.component.spec.ts

@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { VrToggleComponent } from './vr-toggle.component';
 import { EventDisplayService } from '../../../services/event-display.service';
+import { PhoenixUIModule } from '../../phoenix-ui.module';
 
 describe('VrToggleComponent', () => {
   let component: VrToggleComponent;
@@ -11,6 +12,7 @@ describe('VrToggleComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [PhoenixUIModule],
       providers: [{
         provide: EventDisplayService,
         useValue: mockEventDisplay

packages/phoenix-app/src/phoenix-ui/ng-package.json

@@ -4,8 +4,10 @@
   "lib": {
     "entryFile": "./index.ts",
     "umdModuleIds": {
-      "phoenix-ui": "phoenix-ui"
+      "phoenix-event-display": "phoenixEventDisplay",
+      "css-element-queries": "cssElementQueries",
+      "ng5-slider": "ng5Slider"
     }
-
-  }
+  },
+  "whitelistedNonPeerDependencies": ["."]
 }

packages/phoenix-app/src/phoenix-ui/package.json

@@ -1,9 +1,20 @@
 {
   "name": "phoenix-ui",
-  "version": "0.0.1",
+  "version": "1.0.2",
+  "files": [
+    "../../dist/phoenix-ui"
+  ],
   "peerDependencies": {
+    "@angular/cdk": "^10.1.3",
     "@angular/common": "^10.0.14",
-    "@angular/core": "^10.0.14"
+    "@angular/compiler": "^10.0.14",
+    "@angular/core": "^10.0.14",
+    "@angular/material": "^10.1.3",
+    "@angular/platform-browser-dynamic": "^10.0.14",
+    "css-element-queries": "^1.2.3",
+    "ng5-slider": "^1.2.4",
+    "phoenix-event-display": "^1.0.2",
+    "three": "^0.120.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

packages/phoenix-app/src/phoenix-ui/tsconfig.lib.json

@@ -15,7 +15,8 @@
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "enableIvy": false
   },
   "exclude": [
     "./test.ts",