update to angular 12

ui/src/app/app.component.html

@@ -48,7 +48,7 @@
   </ion-split-pane>
   <section id="preload" style="display: none;">
     <!-- 3rd party components -->
-    <qrcode qrdata="hello"></qrcode>
+    <qr-code value="hello"></qr-code>
 
     <img src="assets/img/success-bulb.png"/>
     <img src="assets/img/danger-bulb.png"/>

ui/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { Storage } from '@ionic/storage'
+import { Storage } from '@ionic/storage-angular'
 import { AuthService, AuthState } from './services/auth.service'
 import { ApiService } from './services/api/embassy/embassy-api.service'
 import { Router, RoutesRecognized } from '@angular/router'

ui/src/app/app.module.ts

@@ -12,7 +12,7 @@ import { ApiServiceFactory, MarketplaceApiServiceFactory } from './services/api/
 import { PatchDbServiceFactory } from './services/patch-db/patch-db.factory'
 import { HttpService } from './services/http.service'
 import { ConfigService } from './services/config.service'
-import { QRCodeModule } from 'angularx-qrcode'
+import { QrCodeModule } from 'ng-qrcode'
 import { OSWelcomePageModule } from './modals/os-welcome/os-welcome.module'
 import { MarkdownPageModule } from './modals/markdown/markdown.module'
 import { PatchDbService } from './services/patch-db/patch-db.service'
@@ -35,7 +35,7 @@ import { FormBuilder } from '@angular/forms'
       name: '_embassystorage',
       driverOrder: [Drivers.LocalStorage, Drivers.IndexedDB],
     }),
-    QRCodeModule,
+    QrCodeModule,
     OSWelcomePageModule,
     MarkdownPageModule,
     SharingModule,

ui/src/app/components/form-object/form-label.component.html

@@ -4,6 +4,6 @@
 <ion-text color="success" *ngIf="data.isNew">&nbsp;(New)</ion-text>
 <ion-text color="warning" *ngIf="data.isEdited">&nbsp;(Edited)</ion-text>
 
-<span *ngIf="(['string', 'number'] | includes : data.spec.type) && !data.spec.nullable">&nbsp;*</span>
+<span *ngIf="(['string', 'number'] | includes : data.spec.type) && !$any(data.spec).nullable">&nbsp;*</span>
 
 <span *ngIf="data.spec.type === 'list' && Range.from(data.spec.range).min">&nbsp;*</span>

ui/src/app/components/form-object/form-object.component.ts

@@ -5,7 +5,7 @@ import { ConfigSpec, ListValueSpecOf, ValueSpec, ValueSpecList, ValueSpecListOf,
 import { FormService } from 'src/app/services/form.service'
 import { Range } from 'src/app/pkg-config/config-utilities'
 import { EnumListPage } from 'src/app/modals/enum-list/enum-list.page'
-import * as handlebars from 'handlebars'
+const Mustache = require('mustache')
 import { pauseFor } from 'src/app/util/misc.util'
 
 @Component({
@@ -54,7 +54,7 @@ export class FormObjectComponent {
           this.objectListInfo[key][index] = {
             expanded: false,
             height: '0px',
-            displayAs: displayAs ? handlebars.compile(displayAs)(obj) : '',
+            displayAs: displayAs ? (Mustache as any).render(displayAs, obj) : '',
           }
         })
       }
@@ -93,7 +93,7 @@ export class FormObjectComponent {
       this.objectListInfo[key].push({
         height: '0px',
         expanded: true,
-        displayAs: displayAs ? handlebars.compile(displayAs)(newItem.value) : '',
+        displayAs: displayAs ? Mustache.render(displayAs, newItem.value) : '',
       })
 
       pauseFor(200).then(() => {

ui/src/app/components/qr/qr.component.html

@@ -1 +1 @@
-<qrcode [qrdata]="text" [width]="width" errorCorrectionLevel="L"></qrcode>
+<qr-code [value]="text"></qr-code>

ui/src/app/components/qr/qr.component.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { QRComponent } from './qr.component'
 import { IonicModule } from '@ionic/angular'
-import { QRCodeModule } from 'angularx-qrcode'
+import { QrCodeModule } from 'ng-qrcode'
 
 @NgModule({
   declarations: [
@@ -11,7 +11,7 @@ import { QRCodeModule } from 'angularx-qrcode'
   imports: [
     CommonModule,
     IonicModule,
-    QRCodeModule,
+    QrCodeModule,
   ],
   exports: [QRComponent],
 })

ui/src/app/components/qr/qr.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core'
-import { isPlatform } from '@ionic/angular'
 
 @Component({
   selector: 'qr',
@@ -8,9 +7,4 @@ import { isPlatform } from '@ionic/angular'
 })
 export class QRComponent {
   @Input() text: string
-  width: number
-
-  ngOnInit () {
-    this.width = isPlatform('ios') || isPlatform('android') ? 320 : 420
-  }
 }

ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts

@@ -18,7 +18,7 @@ interface LocalInterface {
 export class AppInterfacesPage {
   @ViewChild(IonContent) content: IonContent
   ui: LocalInterface | null
-  other: LocalInterface[]
+  other: LocalInterface[] = []
 
   constructor (
     private readonly route: ActivatedRoute,

ui/src/app/pages/login/login.module.ts

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms'
 import { IonicModule } from '@ionic/angular'
 import { LoginPage } from './login.page'
 import { SharingModule } from 'src/app/modules/sharing.module'
+// import { MarketplaceLibModule } from 'marketplace-lib'
 
 const routes: Routes = [
   {
@@ -20,6 +21,7 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes),
     SharingModule,
+    // MarketplaceLibModule,
   ],
   declarations: [LoginPage],
 })

ui/src/app/pages/login/login.page.html

@@ -1,4 +1,5 @@
 <ion-content>
+  <!-- <start9-marketplace-lib></start9-marketplace-lib> -->
   <ion-grid style="height: 100%; max-width: 540px;">
     <ion-row class="ion-align-items-center" style="height: 100%;">
       <ion-col class="ion-text-center">

ui/src/app/services/api/embassy/embassy-mock-api.service.ts

@@ -7,7 +7,7 @@ import { RR, WithRevision } from '../api.types'
 import { parsePropertiesPermissive } from 'src/app/util/properties.util'
 import { Mock } from '../api.fixures'
 import { HttpService } from '../../http.service'
-import markdown from 'raw-loader!src/assets/markdown/md-sample.md'
+import markdown from '!!raw-loader!src/assets/markdown/md-sample.md'
 import { ConfigService } from '../../config.service'
 
 @Injectable()

ui/src/app/services/auth.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'
 import { BehaviorSubject, Observable } from 'rxjs'
 import { distinctUntilChanged } from 'rxjs/operators'
 import { ApiService } from './api/embassy/embassy-api.service'
-import { Storage } from '@ionic/storage'
+import { Storage } from '@ionic/storage-angular'
 import { getPlatforms, isPlatform } from '@ionic/angular'
 
 export enum AuthState {

ui/src/app/services/emver.service.ts

@@ -12,7 +12,10 @@ export class Emver {
   }
 
   compare (lhs: string, rhs: string): number {
-    return this.e.compare(lhs, rhs)
+    console.log('EMVER', this.e)
+    const compare = this.e.compare(lhs, rhs)
+    console.log('COMPARE', compare)
+    return compare
   }
 
   satisfies (version: string, range: string): boolean {

ui/src/app/services/patch-db/local-storage-bootstrap.ts

@@ -1,7 +1,7 @@
 import { Bootstrapper, DBCache } from 'patch-db-client'
 import { DataModel } from './data-model'
 import { Injectable } from '@angular/core'
-import { Storage } from '@ionic/storage'
+import { Storage } from '@ionic/storage-angular'
 
 @Injectable({
   providedIn: 'root',