Merge branch 'master' into spencer/pwa

# Conflicts:
#	package-lock.json
#	src/app/shared/shared.module.ts
#	src/styles.scss

src/app/shared/_directives/menu-selection.directive.ts

@@ -18,15 +18,15 @@ export class MenuSelectionDirective {
   }
 
   onMenuSelect(): void {
-    const sidebar = document.getElementById('sidebar');
+    const sidebar: HTMLElement = document.getElementById('sidebar');
     if (!sidebar?.classList.contains('active')) {
       sidebar?.classList.add('active');
     }
-    const content = document.getElementById('content');
+    const content: HTMLElement = document.getElementById('content');
     if (!content?.classList.contains('active')) {
       content?.classList.add('active');
     }
-    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
     if (sidebarCollapse?.classList.contains('active')) {
       sidebarCollapse?.classList.remove('active');
     }

src/app/shared/_directives/menu-toggle.directive.ts

@@ -16,11 +16,11 @@ export class MenuToggleDirective {
 
   // Menu Trigger
   onMenuToggle(): void {
-    const sidebar = document.getElementById('sidebar');
+    const sidebar: HTMLElement = document.getElementById('sidebar');
     sidebar?.classList.toggle('active');
-    const content = document.getElementById('content');
+    const content: HTMLElement = document.getElementById('content');
     content?.classList.toggle('active');
-    const sidebarCollapse = document.getElementById('sidebarCollapse');
+    const sidebarCollapse: HTMLElement = document.getElementById('sidebarCollapse');
     sidebarCollapse?.classList.toggle('active');
   }
 }

src/app/shared/_pipes/safe.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SafePipe } from './safe.pipe';
+
+describe('SafePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/shared/_pipes/safe.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(url: string, ...args: unknown[]): unknown {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+}

src/app/shared/shared.module.ts

@@ -8,8 +8,9 @@ import { MenuToggleDirective } from '@app/shared/_directives/menu-toggle.directi
 import {RouterModule} from '@angular/router';
 import {MatIconModule} from '@angular/material/icon';
 import {TokenRatioPipe} from '@app/shared/_pipes/token-ratio.pipe';
-import { ErrorDialogComponent } from './error-dialog/error-dialog.component';
+import { ErrorDialogComponent } from '@app/shared/error-dialog/error-dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
+import { SafePipe } from '@app/shared/_pipes/safe.pipe';
 import { NetworkStatusComponent } from './network-status/network-status.component';
 
 
@@ -23,16 +24,18 @@ import { NetworkStatusComponent } from './network-status/network-status.componen
     MenuToggleDirective,
     TokenRatioPipe,
     ErrorDialogComponent,
+    SafePipe,
+    NetworkStatusComponent
+  ],
+  exports: [
+    TopbarComponent,
+    FooterComponent,
+    SidebarComponent,
+    MenuSelectionDirective,
+    TokenRatioPipe,
+    SafePipe,
     NetworkStatusComponent
   ],
-    exports: [
-        TopbarComponent,
-        FooterComponent,
-        SidebarComponent,
-        MenuSelectionDirective,
-        TokenRatioPipe,
-        NetworkStatusComponent
-    ],
   imports: [
     CommonModule,
     RouterModule,