chore(workbench): compile with TypeScript strict checks enabled

closes #246

package.json

@@ -68,9 +68,9 @@
     "@angular/platform-browser": "11.0.0",
     "@angular/platform-browser-dynamic": "11.0.0",
     "@angular/router": "11.0.0",
-    "@scion/microfrontend-platform": "1.0.0-beta.13",
-    "@scion/toolkit": "11.0.0-beta.10",
-    "@scion/toolkit.internal": "11.0.0-beta.10",
+    "@scion/microfrontend-platform": "1.0.0-beta.15",
+    "@scion/toolkit": "11.0.0-beta.11",
+    "@scion/toolkit.internal": "11.0.0-beta.11",
     "rxjs": "6.6.0",
     "tslib": "2.0.0",
     "zone.js": "0.10.3"

projects/scion/workbench/src/lib/activity-part/activity-part.component.ts

@@ -52,11 +52,8 @@ export class ActivityPartComponent {
   private _panelWidth = PANEL_INITIAL_WIDTH;
   private _panelWidth$ = new Subject<number>();
 
-  @ViewChild('viewport')
-  public viewport: ElementRef;
-
   @ViewChild('panel', {read: ElementRef})
-  private _panelElementRef: ElementRef;
+  private _panelElementRef!: ElementRef;
 
   constructor(public host: ElementRef<HTMLElement>,
               public activityPartService: WorkbenchActivityPartService,
@@ -69,7 +66,7 @@ export class ActivityPartComponent {
     return this.activityPartService.activities.filter(it => it.visible);
   }
 
-  public get activeActivity(): Activity {
+  public get activeActivity(): Activity | null {
     const activeActivity = this.activityPartService.activeActivity;
     return activeActivity && activeActivity.visible ? activeActivity : null;
   }

projects/scion/workbench/src/lib/activity-part/activity.ts

@@ -14,43 +14,43 @@ export abstract class Activity {
   /**
    * Specifies the title of the activity.
    */
-  public title: string;
+  public abstract title: string | null;
 
   /**
    * Specifies CSS class(es) added to the activity item and activity panel, e.g. used for e2e testing.
    */
-  public cssClass: string | string[];
+  public abstract cssClass: string | string[] | undefined;
 
   /**
    * Specifies the text for the activity item.
    *
    * You can use it in combination with `itemCssClass`, e.g. to render an icon glyph by using its textual name.
    */
-  public itemText: string;
+  public abstract itemText: string | null;
 
   /**
    * Specifies CSS class(es) added to the activity item, e.g. used for e2e testing or to set an icon font class.
    */
-  public itemCssClass: string | string[];
+  public abstract itemCssClass: string | string[] | undefined;
   /**
    * Controls whether to open this activity in the activity panel or to open it in a separate view.
    */
-  public target: 'activity-panel' | 'view';
+  public abstract target: 'activity-panel' | 'view';
 
   /**
    * Controls whether to show or hide this activity. By default, this activity is showing.
    */
-  public visible: boolean;
+  public abstract visible: boolean;
 
   /**
    * Specifies where to insert this activity in the list of activities.
    */
-  public position: number;
+  public abstract position: number | undefined;
 
   /**
    * Specifies the number of pixels added to the activity panel width if this is the active activity.
    */
-  public panelWidthDelta: number;
+  public abstract panelWidthDelta: number;
 
   /**
    * Specifies the routing commands used by Angular router to navigate when this activity is activated.
@@ -61,27 +61,27 @@ export abstract class Activity {
   /**
    * Returns the routing commands of this activity.
    */
-  public abstract get commands(): any[];
+  public abstract readonly commands: any[];
 
   /**
    * Returns the routing path of this activity.
    */
-  public abstract get path(): string;
+  public abstract readonly path: string | undefined;
 
   /**
    * Emits upon activation change of this activity.
    */
-  public abstract get active$(): Observable<boolean>;
+  public abstract readonly active$: Observable<boolean>;
 
   /**
    * Indicates if this activity is currently active.
    */
-  public abstract get active(): boolean;
+  public abstract readonly active: boolean;
 
   /**
    * Returns the actions associated with this activity.
    */
-  public abstract get actions(): ActivityAction[];
+  public abstract readonly actions: ActivityAction[];
 
   /**
    * Associates an action with this activity. When this activity is active, it is displayed in the activity panel header.
@@ -95,19 +95,19 @@ export class InternalActivity implements Activity {
 
   private _commands: any[] = [];
   private _actions: ActivityAction[] = [];
-  private _path: string;
+  private _path: string | undefined;
   private _active$ = new BehaviorSubject<boolean>(false);
 
   public panelWidthDelta = 0;
-  public title: string;
-  public cssClass: string | string[];
+  public title: string | null = null;
+  public cssClass: string | string[] | undefined;
 
-  public itemText: string;
-  public itemCssClass: string | string[];
+  public itemText: string | null = null;
+  public itemCssClass: string | string[] | undefined;
 
   public target: 'activity-panel' | 'view' = 'activity-panel';
   public visible = true;
-  public position: number;
+  public position: number | undefined;
 
   constructor(private _wbRouter: WorkbenchRouter, private _injector: Injector) {
   }
@@ -125,7 +125,7 @@ export class InternalActivity implements Activity {
     return this._commands;
   }
 
-  public get path(): string {
+  public get path(): string | undefined {
     return this._path;
   }
 

projects/scion/workbench/src/lib/activity-part/wb-activity-action.directive.ts

@@ -10,7 +10,6 @@
 
 import { Directive, OnDestroy, TemplateRef } from '@angular/core';
 import { WorkbenchActivityPartService } from './workbench-activity-part.service';
-import { Activity } from './activity';
 import { ActivatedRoute } from '@angular/router';
 import { Disposable } from '../disposable';
 
@@ -34,18 +33,17 @@ import { Disposable } from '../disposable';
 })
 export class WbActivityActionDirective implements OnDestroy {
 
-  private readonly _activity: Activity;
   private readonly _action: Disposable;
 
   constructor(private _template: TemplateRef<void>,
               activityService: WorkbenchActivityPartService,
               route: ActivatedRoute) {
-    this._activity = activityService.getActivityFromRoutingContext(route.snapshot);
-    if (!this._activity) {
+    const activity = activityService.getActivityFromRoutingContext(route.snapshot);
+    if (!activity) {
       throw Error('[RoutingContextError] Route not in the context of an activity');
     }
 
-    this._action = this._activity.registerAction(this._template);
+    this._action = activity.registerAction(this._template);
   }
 
   public ngOnDestroy(): void {

projects/scion/workbench/src/lib/activity-part/wb-activity.directive.ts

@@ -37,7 +37,7 @@ export class WbActivityDirective implements OnInit, OnDestroy {
    * Specifies the title of the activity.
    */
   @Input()
-  public set title(title: string) {
+  public set title(title: string | null) {
     this.activity.title = title;
   }
 
@@ -47,23 +47,23 @@ export class WbActivityDirective implements OnInit, OnDestroy {
    * You can use it in combination with `itemCssClass`, e.g. to render an icon glyph by using its textual name.
    */
   @Input()
-  public set itemText(itemText: string) {
+  public set itemText(itemText: string | null) {
     this.activity.itemText = itemText;
   }
 
   /**
    * Specifies CSS class(es) added to the activity item, e.g. used for e2e testing or to set an icon font class.
    */
   @Input()
-  public set itemCssClass(itemCssClass: string | string[]) {
+  public set itemCssClass(itemCssClass: string | string[] | undefined) {
     this.activity.itemCssClass = itemCssClass;
   }
 
   /**
    * Specifies CSS class(es) added to the activity item and activity panel, e.g. used for e2e testing.
    */
   @Input()
-  public set cssClass(cssClass: string | string[]) {
+  public set cssClass(cssClass: string | string[] | undefined) {
     this.activity.cssClass = cssClass;
   }
 

projects/scion/workbench/src/lib/activity-part/workbench-activity-part.service.ts

@@ -89,8 +89,8 @@ export class WorkbenchActivityPartService {
   /**
    * Returns the activity of the current routing context, or `null` if not in the routing context of an activity.
    */
-  public getActivityFromRoutingContext(route: ActivatedRouteSnapshot): Activity {
-    for (let testee = route; testee !== null; testee = testee.parent) {
+  public getActivityFromRoutingContext(route: ActivatedRouteSnapshot): Activity | null {
+    for (let testee: ActivatedRouteSnapshot | null = route; testee !== null; testee = testee.parent) {
       const activity = testee.data[ACTIVITY_DATA_KEY];
       if (activity) {
         return activity;

projects/scion/workbench/src/lib/broadcast-channel.service.ts

@@ -33,7 +33,7 @@ export class BroadcastChannelService {
         filter(event => event.storageArea === localStorage),
         filter(event => event.key === BROADCAST_CHANNEL_ITEM_KEY),
         filter(event => event.newValue !== null), // skip item remove events
-        map(event => JSON.parse(event.newValue)),
+        map(event => JSON.parse(event.newValue!)),
       );
   }
 

projects/scion/workbench/src/lib/content-projection/content-as-overlay.component.ts

@@ -54,5 +54,5 @@ export class ContentAsOverlayComponent {
    * Reference to the view container where to insert the overlay.
    */
   @Input()
-  public overlayHost: ViewContainerRef | Promise<ViewContainerRef>;
+  public overlayHost!: ViewContainerRef | Promise<ViewContainerRef>;
 }

projects/scion/workbench/src/lib/content-projection/content-projection.directive.ts

@@ -24,19 +24,19 @@ export class ContentProjectionDirective implements OnInit, OnDestroy {
   private _destroy$ = new Subject<void>();
 
   private _boundingBoxElement: HTMLElement;
-  private _contentViewRef: EmbeddedViewRef<any>;
+  private _contentViewRef!: EmbeddedViewRef<any>;
 
   /**
    * Reference to the view container where to insert the overlay.
    */
   @Input('wbContentProjectionOverlayHost') // tslint:disable-line:no-input-rename
-  public overlayHost: ViewContainerRef | Promise<ViewContainerRef>;
+  public overlayHost!: ViewContainerRef | Promise<ViewContainerRef>;
 
   /**
    * Template which to render as overlay. The template will stick to the bounding box of the host element of this directive.
    */
   @Input('wbContentProjectionContent') // tslint:disable-line:no-input-rename
-  public contentTemplateRef: TemplateRef<void>;
+  public contentTemplateRef!: TemplateRef<void>;
 
   constructor(host: ElementRef<HTMLElement>, @Optional() private _view: WorkbenchView) {
     this._boundingBoxElement = host.nativeElement;

projects/scion/workbench/src/lib/content-projection/view-container.reference.ts

@@ -16,7 +16,7 @@ import { Injectable, InjectionToken, ViewContainerRef } from '@angular/core';
 @Injectable()
 export class ViewContainerReference {
 
-  private _resolve: (host: ViewContainerRef) => void;
+  private _resolve: ((host: ViewContainerRef) => void) | null = null;
   private _promise = new Promise<ViewContainerRef>(resolve => this._resolve = resolve);
 
   /**

projects/scion/workbench/src/lib/dom.util.ts

@@ -17,11 +17,12 @@ export function createElement(tag: string, options: ElementCreateOptions): HTMLE
 /**
  * Applies the given style(s) to the given element.
  *
- * To unset a style property provide `null` as its value.
+ * Specify styles to be modified by passing a dictionary containing CSS property names (hyphen case).
+ * To remove a style, set its value to `null`.
  */
 export function setStyle(element: HTMLElement | ElementRef<HTMLElement>, style: { [style: string]: any | null }): void {
   const target = coerceElement(element);
-  Object.keys(style).forEach(key => target.style[key] = style[key]);
+  Object.keys(style).forEach(key => target.style.setProperty(key, style[key]));
 }
 
 /**