update to angular 12

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
-  }
 }