refactor: extract sci-dimension-module into a separate NPM library

This will be used for the upcoming micro frontend integration to allow micro frontends to use `sci-dimension-module` without having to manifest a dependency to `@scion/workbench`.

Closes #44

BREAKING CHANGE:

Workbench requires `@scion/dimension` as its peer-dependency which you can install as following:
`npm install --save @scion/dimension`.
Why not use ResizeObserver: Web Performance Working Group is working on a W3C recommendation for natively observing changes to Element’s size. The Web API draft is still work in progress and support limited to Google Chrome and Opera. See https://wicg.github.io/ResizeObserver/

angular.json

@@ -80,6 +80,44 @@
           }
         }
       }
+    },
+    "@scion/dimension": {
+      "root": "projects/scion/dimension",
+      "sourceRoot": "projects/scion/dimension/src",
+      "projectType": "library",
+      "prefix": "sci",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/scion/dimension/tsconfig.lib.json",
+            "project": "projects/scion/dimension/ng-package.json"
+          },
+          "configurations": {
+            "production": {}
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/scion/dimension/src/test.ts",
+            "tsConfig": "projects/scion/dimension/tsconfig.spec.json",
+            "karmaConfig": "projects/scion/dimension/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/scion/dimension/tsconfig.lib.json",
+              "projects/scion/dimension/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
     }
   },
   "defaultProject": "@scion/workbench"

package.json

@@ -13,14 +13,16 @@
   },
   "scripts": {
     "ng": "ng",
-    "build": "npm run build-mouse-dispatcher && npm run build-workbench",
+    "build": "npm run build-mouse-dispatcher && npm run build-dimension && npm run build-workbench",
     "build-workbench": "ng build --prod @scion/workbench && cp -r projects/scion/workbench/src/theme/** dist/scion/workbench",
     "build-mouse-dispatcher": "ng build --prod @scion/mouse-dispatcher",
+    "build-dimension": "ng build --prod @scion/dimension",
     "test": "npm run test-workbench",
     "test-workbench": "ng test @scion/workbench --watch=false",
-    "lint": "npm run lint-workbench & npm run lint-mouse-dispatcher",
+    "lint": "npm run lint-workbench & npm run lint-mouse-dispatcher & npm run lint-dimension",
     "lint-workbench": "ng lint @scion/workbench",
     "lint-mouse-dispatcher": "ng lint @scion/mouse-dispatcher",
+    "lint-dimension": "ng lint @scion/dimension",
     "e2e": "ng e2e"
   },
   "private": true,

projects/scion/dimension/karma.conf.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

projects/scion/dimension/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/scion/dimension",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "whitelistedNonPeerDependencies": ["@scion"]
+}

projects/scion/dimension/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@scion/dimension",
+  "version": "0.0.0-beta.11",
+  "description": "Allows observing changes to host element's size.",
+  "license": "EPL-2.0",
+  "homepage": "https://github.com/SchweizerischeBundesbahnen/scion-workbench",
+  "bugs": {
+    "url": "https://github.com/SchweizerischeBundesbahnen/scion-workbench/issues"
+  },
+  "author": {
+    "name": "SCION Workbench contributors",
+    "url": "https://github.com/SchweizerischeBundesbahnen/scion-workbench"
+  },
+  "dependencies": {
+  },
+  "peerDependencies": {
+    "@angular/common": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0",
+    "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0",
+    "rxjs": "^6.0.0"
+  },
+  "keywords": [
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SchweizerischeBundesbahnen/scion-workbench.git"
+  }
+}

projects/scion/workbench/src/lib/ui/dimension/dimension.directive.ts → projects/scion/dimension/src/lib/dimension.directive.ts

@@ -15,7 +15,11 @@ import { takeUntil } from 'rxjs/operators';
 export const NULL_DIMENSION: SciDimension = {offsetWidth: 0, offsetHeight: 0, clientWidth: 0, clientHeight: 0};
 
 /**
- * Notifies upon dimension change of the host element.
+ * Allows observing changes to host element's size.
+ *
+ * ---
+ * Usage:
+ * <div sciDimension (sciDimensionChange)="onDimensionChange($event)"></div>
  */
 @Directive({
   selector: '[sciDimension]'
@@ -89,6 +93,9 @@ export class SciDimensionDirective implements OnInit, DoCheck, OnDestroy {
   }
 }
 
+/**
+ * Emitted upon a host element size change.
+ */
 export interface SciDimension {
   offsetWidth: number;
   offsetHeight: number;

projects/scion/workbench/src/lib/ui/dimension/dimension.module.ts → projects/scion/dimension/src/lib/dimension.module.ts

@@ -13,7 +13,14 @@ import { CommonModule } from '@angular/common';
 import { SciDimensionDirective } from './dimension.directive';
 
 /**
- * {SciDimensionDirective} notifies upon a component dimension change.
+ * Provides a directive for observing changes to host element's size.
+ *
+ * Note:
+ * Web Performance Working Group is working on a W3C recommendation for natively observing changes to Element’s size.
+ * The Web API draft is still work in progress and support limited to Google Chrome and Opera.
+ *
+ * @see https://wicg.github.io/ResizeObserver/
+ * @see https://caniuse.com/#feat=resizeobserver
  */
 @NgModule({
   imports: [

projects/scion/dimension/src/public_api.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+/**
+ * Entry point for all public APIs of this package.
+ */
+export { SciDimensionModule } from './lib/dimension.module';
+export * from './lib/dimension.directive';

projects/scion/dimension/src/test.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

projects/scion/dimension/tsconfig.lib.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "target": "es2015",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

projects/scion/dimension/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

projects/scion/dimension/tslint.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      [
+        "sci"
+      ],
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      [
+        "sci"
+      ],
+      "kebab-case"
+    ]
+  }
+}

projects/scion/workbench/package.json

@@ -21,6 +21,7 @@
     "@angular/animations": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0",
     "@angular/forms": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0",
     "@angular/router": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0",
+    "@scion/dimension": "0.0.0-beta.11",
     "rxjs": "^6.0.0"
   },
   "keywords": [

projects/scion/workbench/src/lib/ui/viewport/viewport.component.ts

@@ -9,7 +9,7 @@
  */
 
 import { Component, DoCheck, ElementRef, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, Output, ViewChild } from '@angular/core';
-import { NULL_DIMENSION, SciDimension } from '../dimension/dimension.directive';
+import { NULL_DIMENSION, SciDimension } from '@scion/dimension';
 import { DomUtil } from '../../dom.util';
 
 /**

projects/scion/workbench/src/lib/ui/viewport/viewport.module.ts

@@ -14,7 +14,7 @@ import { SciViewportComponent } from './viewport.component';
 import { SciScrollbarComponent } from './scrollbar/scrollbar.component';
 import { SciScrollableDirective } from './scrollable.directive';
 import { ScrollDispatchModule } from '@angular/cdk/scrolling';
-import { SciDimensionModule } from '../dimension/dimension.module';
+import { SciDimensionModule } from '@scion/dimension';
 
 /**
  * Provides a viewport with its `<ng-content>` as its native scrollable viewport client

projects/scion/workbench/src/lib/view-part/view-list/view-list.component.ts

@@ -14,7 +14,7 @@ import { OverlayRef } from '@angular/cdk/overlay';
 import { animate, AnimationBuilder, style } from '@angular/animations';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { SciDimension } from '../../ui/dimension/dimension.directive';
+import { SciDimension } from '@scion/dimension';
 
 @Component({
   selector: 'wb-view-list',

projects/scion/workbench/src/lib/workbench.module.ts

@@ -58,7 +58,7 @@ import { ViewRegistrySynchronizer } from './routing/view-registry-synchronizer.s
 import { WbActivityRouteReuseProvider } from './routing/wb-activity-route-reuse-provider.service';
 import { WbRouteReuseStrategy } from './routing/wb-route-reuse-strategy.service';
 import { SciViewportModule } from './ui/viewport/viewport.module';
-import { SciDimensionModule } from './ui/dimension/dimension.module';
+import { SciDimensionModule } from '@scion/dimension';
 import { ActivityResolver } from './routing/activity.resolver';
 import { ContentHostRef } from './content-projection/content-host-ref.service';
 import { WorkbenchAuxiliaryRoutesRegistrator } from './routing/workbench-auxiliary-routes-registrator.service';

projects/scion/workbench/src/public_api.ts

@@ -20,8 +20,6 @@ export { WorkbenchAuxiliaryRoutesRegistrator } from './lib/routing/workbench-aux
 export { WorkbenchComponent } from './lib/workbench.component';
 export { SciViewportModule } from './lib/ui/viewport/viewport.module';
 export { SciViewportComponent } from './lib/ui/viewport/viewport.component';
-export { SciDimensionModule } from './lib/ui/dimension/dimension.module';
-export { SciDimensionDirective, SciDimension } from './lib/ui/dimension/dimension.directive';
 export { RemoteSiteComponent } from './lib/remote-site/remote-site.component';
 export { OverlayHostRef } from './lib/overlay-host-ref.service';
 export { WbActivityDirective } from './lib/activity-part/wb-activity.directive';

resources/site/getting-started.md

@@ -28,7 +28,7 @@ This 'Getting Started' tutorial explains how to install SCION workbench, configu
 
 Use npm command-line tool to install SCION Workbench and Angular CDK packages.
 ```
-npm install --save @scion/workbench @angular/cdk
+npm install --save @scion/workbench @scion/dimension @angular/cdk
 ```
 
 > SCION Workbench requires Angular CDK to be installed. By using the above commands, Angular CDK is installed as well.

resources/site/how-to.md

@@ -191,7 +191,11 @@ export class PersonComponent implements WbBeforeDestroy {
     return this.messageBoxService.open({
       content: 'Do you want to save changes?',
       severity: 'info',
-      actions: ['yes', 'no', 'cancel']
+      actions: {
+        yes: 'Yes',
+        no: 'No',
+        cancel: 'Cancel'
+      }      
     }).then(action => {
       switch (action) {
         case 'yes':

tsconfig.json

@@ -28,6 +28,12 @@
       ],
       "@scion/mouse-dispatcher/*": [
         "dist/scion/mouse-dispatcher/*"
+      ],
+      "@scion/dimension": [
+        "dist/scion/dimension"
+      ],
+      "@scion/dimension/*": [
+        "dist/scion/dimension/*"
       ]
     }
   }