Merge branch 'master' of https://github.com/IDEMSInternational/open-a…

…pp-builder into feat/bottom-nav

.husky/pre-push

@@ -1,3 +1,3 @@
 #!/bin/sh
-command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting .git/hooks/pre-push.\n"; exit 2; }
+command -v git-lfs >/dev/null 2>&1 || { echo >&2 "\nThis repository is configured for Git LFS but 'git-lfs' was not found on your path. If you no longer wish to use Git LFS, remove this hook by deleting the 'pre-push' file in the hooks directory (set by 'core.hookspath'; usually '.git/hooks').\n"; exit 2; }
 git lfs pre-push "$@"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.16.37",
+  "version": "0.16.38",
   "author": "IDEMS International",
   "license": "See LICENSE",
   "homepage": "https://idems.international/",

packages/data-models/flowTypes.ts

@@ -1,7 +1,6 @@
 /* eslint @typescript-eslint/sort-type-constituents: "warn"  */
 
 import type { IDataPipeOperation } from "shared";
-import type { IAppConfig } from "./appConfig";
 import type { IAssetEntry } from "./assets.model";
 
 /*********************************************************************************************

src/app/app.component.ts

@@ -43,6 +43,7 @@ import { ShareService } from "./shared/services/share/share.service";
 import { LocalStorageService } from "./shared/services/local-storage/local-storage.service";
 import { DeploymentService } from "./shared/services/deployment/deployment.service";
 import { ScreenOrientationService } from "./shared/services/screen-orientation/screen-orientation.service";
+import { TemplateMetadataService } from "./shared/components/template/services/template-metadata.service";
 
 @Component({
   selector: "app-root",
@@ -90,6 +91,7 @@ export class AppComponent {
     private tourService: TourService,
     private templateService: TemplateService,
     private templateFieldService: TemplateFieldService,
+    private templateMetadataService: TemplateMetadataService,
     private templateProcessService: TemplateProcessService,
     private appEventService: AppEventService,
     private campaignService: CampaignService,
@@ -251,6 +253,7 @@ export class AppComponent {
         this.feedbackService,
         this.shareService,
         this.fileManagerService,
+        this.templateMetadataService,
         this.screenOrientationService,
       ],
       deferred: [this.analyticsService],

src/app/feature/template/template.page.html

@@ -1,17 +1,15 @@
 <ion-content [scrollEvents]="shouldEmitScrollEvents">
-  <plh-template-container
-    *ngIf="templateName"
-    [templatename]="templateName"
-  ></plh-template-container>
-  <div *ngIf="!templateName" class="ion-padding">
+  @if (templateName) {
+  <plh-template-container [templatename]="templateName"></plh-template-container>
+  } @else {
+  <div class="ion-padding">
     <h3>Select a Template</h3>
     <ion-searchbar [(ngModel)]="filterTerm" (ionInput)="search()"></ion-searchbar>
     <ion-list>
-      <ion-item
-        *ngFor="let template of filteredTemplates; trackBy: trackByFn"
-        [routerLink]="template.flow_name"
-        >{{template.flow_name}}</ion-item
-      >
+      @for(template of filteredTemplates; track $index) {
+      <ion-item [routerLink]="template.flow_name">{{template.flow_name}}</ion-item>
+      }
     </ion-list>
   </div>
+  }
 </ion-content>

src/app/feature/template/template.page.ts

@@ -18,6 +18,7 @@ export class TemplatePage implements OnInit, OnDestroy {
   filteredTemplates: FlowTypes.FlowTypeBase[] = [];
   appConfigChanges$: Subscription;
   shouldEmitScrollEvents: boolean = false;
+
   constructor(
     private route: ActivatedRoute,
     private appDataService: AppDataService,
@@ -26,21 +27,23 @@ export class TemplatePage implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.templateName = this.route.snapshot.params.templateName;
-    const allTemplates = this.appDataService.listSheetsByType("template");
-    this.allTemplates = allTemplates.sort((a, b) => (a.flow_name > b.flow_name ? 1 : -1));
-    this.filteredTemplates = allTemplates;
+    if (!this.templateName) {
+      this.listTemplates();
+    }
     this.subscribeToAppConfigChanges();
   }
 
-  search() {
-    this.allTemplates = this.allTemplates;
+  public search() {
     this.filteredTemplates = this.allTemplates.filter(
       (i) => i.flow_name.toLocaleLowerCase().indexOf(this.filterTerm.toLowerCase()) > -1
     );
   }
 
-  trackByFn(index) {
-    return index;
+  /** Create a list of all templates to display when no specific template loaded */
+  private listTemplates() {
+    const allTemplates = this.appDataService.listSheetsByType("template");
+    this.allTemplates = allTemplates.sort((a, b) => (a.flow_name > b.flow_name ? 1 : -1));
+    this.filteredTemplates = allTemplates;
   }
 
   private subscribeToAppConfigChanges() {

src/app/shared/components/template/components/accordion/accordion.component.scss

@@ -1,7 +1,7 @@
 // Create overlapping effect
 ion-accordion {
   background: white;
-  border: 1px solid var(--ion-color-primary);
+  border: var(--border-standard);
   border-radius: 10px;
   margin-top: -12px;
   padding-top: 8px;

src/app/shared/components/template/components/audio/audio.component.scss

@@ -4,7 +4,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
 
 .container-player[data-variant~="compact"] {
   background: white;
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-standard);
@@ -87,7 +87,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
 
 .container-player[data-variant~="large"] {
   background: var(--ion-color-primary-contrast);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-standard);
@@ -134,7 +134,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
       }
 
       ion-range::part(bar) {
-        border: var(--ion-border-thin-standard);
+        border: var(--border-thin-standard);
         height: var(--audio-bar-height);
       }
 
@@ -187,4 +187,4 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
 }
 .disabled {
   pointer-events: none;
-}
+}

src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.scss

@@ -13,7 +13,7 @@ $background-with-value: var(
   padding: 0;
   .text-box-input {
     background: var(--ion-color-primary-contrast);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     border-radius: var(--ion-border-radius-secondary);
     width: 100%;
     min-height: 55px;
@@ -55,7 +55,7 @@ $background-with-value: var(
       min-height: 55px;
       width: 100%;
       background: var(--ion-color-primary-contrast);
-      border: var(--ion-border-standard);
+      border: var(--border-standard);
       border-radius: var(--ion-border-radius-secondary);
       box-shadow: var(--ion-default-box-shadow);
       @include mixins.flex-centered;

src/app/shared/components/template/components/combo-box/combo-box.component.scss

@@ -8,7 +8,7 @@ $background-with-value: var(
 .open-combobox {
   outline: none;
   width: 100%;
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   filter: drop-shadow(var(--ion-default-box-shadow));
   border-radius: var(--ion-border-radius-secondary);

src/app/shared/components/template/components/layout/accordion-section/accordion-section.component.scss

@@ -14,7 +14,7 @@ $background-highlight: var(
   .accordion-status {
     @include mixins.medium-square;
     border-radius: var(--ion-border-radius-rounded);
-    border: var(--ion-border-thin-standard);
+    border: var(--border-thin-standard);
     padding: var(--tiny-padding);
     background: var(--ion-color-primary-contrast);
     display: flex;
@@ -43,7 +43,7 @@ $background-highlight: var(
     border-radius: var(--ion-border-radius-standard);
     overflow: hidden;
     padding: var(--small-padding);
-    border: var(--ion-border-thin-standard);
+    border: var(--border-thin-standard);
     transition: max-height 0.4s;
     overflow-y: hidden;
     &.completed {

src/app/shared/components/template/components/layout/display-grid/display-grid.component.scss

@@ -1,4 +1,4 @@
-$border: var(--ion-border-standard);
+$border: var(--border-standard);
 $border-radius: var(--ion-border-radius-standard, 15px);
 
 .display-grid {

src/app/shared/components/template/components/layout/display-group/display-group.component.scss

@@ -45,13 +45,15 @@
 .display-group-wrapper {
   &[data-variant~="box_gray"],
   &[data-variant~="box_primary"],
-  &[data-variant~="box_secondary"] {
+  &[data-variant~="box_secondary"],
+  &[data-variant~="box_white"] {
     margin-top: var(--regular-margin);
     padding: var(--regular-padding);
     border-radius: var(--ion-border-radius-secondary);
     flex: 1;
     background-color: var(--background-color, transparent);
-    border: 2px solid var(--border-color, transparent);
+    border: var(--border-standard);
+    border-color: var(--border-color);
   }
 
   &[data-variant~="box_gray"] {
@@ -68,4 +70,9 @@
     --background-color: var(--ion-color-secondary-200);
     --border-color: var(--ion-color-secondary-500);
   }
+
+  &[data-variant~="box_white"] {
+    --background-color: white;
+    --border-color: var(--border-color-default, var(--ion-color-primary));
+  }
 }

src/app/shared/components/template/components/layout/display-group/display-group.component.ts

@@ -4,7 +4,7 @@ import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "..
 
 interface IDisplayGroupParams {
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "box_gray" | "box_primary" | "box_secondary" | "dashed_box";
+  variant: "box_gray" | "box_primary" | "box_secondary" | "box_white" | "dashed_box";
   /** TEMPLATE PARAMETER: "style". TODO: Various additional legacy styles, review and convert some to variants */
   style: "form" | "default" | string | null;
   /** TEMPLATE PARAMETER: "offset". Add a custom bottom margin */

src/app/shared/components/template/components/number-selector/number-selector.component.scss

@@ -2,7 +2,7 @@
 .container {
   width: calc(100% - 10px);
   background: var(--ion-color-primary-contrast);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-secondary);
   @include mixins.flex-space-between;
@@ -24,7 +24,7 @@
     --background: transparent;
     --box-shadow: none;
     border-radius: var(--ion-border-radius-rounded);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     @include mixins.tiny-square;
     @include mixins.flex-centered;
     .line {

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.scss

@@ -4,7 +4,7 @@ $background-selected: var(
   --radio-group-background-selected,
   var(--gradient-primary-light-vertical)
 );
-$border: var(--ion-border-standard);
+$border: var(--border-standard);
 $border-radius: var(--ion-border-radius-standard);
 $text-size: var(--radio-button-font-size, 1.25rem);
 $text-color: var(--radio-button-font-color, var(--ion-color-primary));

src/app/shared/components/template/components/radio-group/radio-group.component.scss

@@ -96,7 +96,7 @@ img {
         }
         .checked {
           transition: 0.3s linear;
-          border: var(--ion-border-standard);
+          border: var(--border-standard);
           box-shadow: var(--ion-default-box-shadow);
         }
       }
@@ -110,7 +110,7 @@ img {
   max-width: fit-content;
   min-width: 100%;
   box-shadow: var(--ion-default-box-shadow);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   color: var(--ion-color-primary);
   background: var(--ion-color-primary-contrast);
 }

src/app/shared/components/template/components/slider/slider.component.scss

@@ -6,7 +6,7 @@ $ui-color: var(--slider-ui-color, var(--ion-color-primary-700));
   min-width: 100%;
   padding: var(--regular-padding) 0 var(--regular-padding) var(--regular-padding);
   background: var(--ion-color-primary-contrast);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-secondary);

src/app/shared/components/template/components/text-area/text-area.component.scss

@@ -1,7 +1,7 @@
 .wrapper {
   .text_area {
     background: var(--ion-color-primary-contrast);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     font-size: var(--text-box-font-size);
     color: var(--ion-color-primary);
     font-weight: var(--font-weight-bold);

src/app/shared/components/template/components/text-box/text-box.component.scss

@@ -1,7 +1,7 @@
 .wrapper {
   .text-box-input {
     background: var(--ion-color-primary-contrast);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     width: 100%;
     height: var(--text-box-height);
     font-size: var(--text-box-font-size);

src/app/shared/components/template/components/text-bubble/text-bubble.component.html

@@ -5,9 +5,9 @@
 >
   <div class="text-bubble" [attr.data-position]="params.speakerPosition">
     @if (_row.value) {
-      <p class="text">
-        {{ _row.value }}
-      </p>
+      <plh-tmpl-text
+        [row]="{ _nested_name: '', name: '', type: 'text', value: value() }"
+      ></plh-tmpl-text>
     }
     @for (childRow of _row.rows | filterDisplayComponent; track trackByRow($index, childRow)) {
       <plh-template-component

src/app/shared/components/template/components/text-bubble/text-bubble.component.scss

@@ -49,11 +49,11 @@ $imageSize: 64px;
 
 .text-bubble {
   padding: var(--large-padding);
-  p {
-    line-height: inherit;
-    margin: 0;
-    font-size: var(--font-size-text-large);
-    color: var(--ion-color-primary);
+
+  // Override default margins of child text component:
+  // handle with padding on this parent element instead
+  plh-tmpl-text {
+    --margin-text: 0;
   }
 }
 

src/app/shared/components/template/components/text/text.component.html

@@ -1,6 +1,6 @@
 @if (this._row.value) {
   <div
-    class="large standard normal margin-t-large"
+    class="large standard normal"
     [class]="params.style"
     [ngStyle]="!hasTextValue ? { display: 'none' } : { display: 'block' }"
     [innerHTML]="

src/app/shared/components/template/components/text/text.component.scss

@@ -0,0 +1,5 @@
+:host {
+  // Default value for top and bottom margins. Can be overridden in parent component
+  // styles if calling the text component as a child of another component
+  --margin-text: 0.75em;
+}

src/app/shared/components/template/components/text/text.component.ts

@@ -11,7 +11,7 @@ interface ITextParams {
 @Component({
   selector: "plh-tmpl-text",
   templateUrl: "./text.component.html",
-  styleUrls: ["../tmpl-components-common.scss"],
+  styleUrls: ["../tmpl-components-common.scss", "./text.component.scss"],
 })
 export class TmplTextComponent extends TemplateBaseComponent implements OnInit {
   params: Partial<ITextParams> = {};

src/app/shared/components/template/components/tile-component/tile-component.component.scss

@@ -50,7 +50,7 @@ $background-secondary-light: var(
     // Note - CC 2021-12-21 - Currently not in use in any templates, but keeping in case we want
     // to expose as a parameter option in the future
     .circle-border {
-      border: var(--ion-border-light-thicker);
+      border: var(--border-standard);
       --border-radius: var(--ion-border-radius-rounded);
       border-radius: var(--ion-border-radius-rounded);
     }
@@ -75,7 +75,7 @@ $background-secondary-light: var(
   width: 8rem;
   min-height: 7rem;
   border-radius: var(--ion-border-radius-standard);
-  border: var(--ion-border-thin-standard);
+  border: var(--border-thin-standard);
   background: var(--ion-color-primary-contrast);
   text-align: center;
   padding: var(--tiny-padding);

src/app/shared/components/template/components/timer/timer.component.scss

@@ -62,7 +62,7 @@ $button-background: var(--timer-button-background, var(--ion-color-primary-500))
   width: 100%;
   background-color: var(--ion-color-primary-contrast);
   box-sizing: border-box;
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-secondary);