From 9030b8448c4bafdfcfdc280b4631f9ae3fa9bd38 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Tue, 8 Oct 2024 16:54:12 +0100
Subject: [PATCH 1/6] feat: audio component can be passed transcript text and
 launch own popup

---
 .../components/audio/audio.component.html     | 20 ++++++--
 .../components/audio/audio.component.ts       | 49 ++++++++++++++++---
 .../layout/popup/popup.component.html         | 20 +++++---
 .../layout/popup/popup.component.ts           |  3 ++
 4 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/src/app/shared/components/template/components/audio/audio.component.html b/src/app/shared/components/template/components/audio/audio.component.html
index aa59abb06..daffbb57e 100644
--- a/src/app/shared/components/template/components/audio/audio.component.html
+++ b/src/app/shared/components/template/components/audio/audio.component.html
@@ -5,9 +5,15 @@ <h3>{{ params.title }}</h3>
       @if (params.variant.includes("large") && params.showInfoButton) {
         <div class="info-icon-container">
           @if (params.infoIconAsset) {
-            <ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
+            <ion-icon
+              [src]="params.infoIconAsset | plhAsset"
+              (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
+            ></ion-icon>
           } @else {
-            <ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
+            <ion-icon
+              name="document-text-outline"
+              (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
+            ></ion-icon>
           }
         </div>
       }
@@ -17,9 +23,15 @@ <h3>{{ params.title }}</h3>
     @if (params.variant.includes("compact") && params.showInfoButton) {
       <div class="info-icon-container">
         @if (params.infoIconAsset) {
-          <ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
+          <ion-icon
+            [src]="params.infoIconAsset | plhAsset"
+            (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
+          ></ion-icon>
         } @else {
-          <ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
+          <ion-icon
+            name="document-text-outline"
+            (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
+          ></ion-icon>
         }
       </div>
     }
diff --git a/src/app/shared/components/template/components/audio/audio.component.ts b/src/app/shared/components/template/components/audio/audio.component.ts
index d536ac66e..e7a4d852a 100644
--- a/src/app/shared/components/template/components/audio/audio.component.ts
+++ b/src/app/shared/components/template/components/audio/audio.component.ts
@@ -9,6 +9,8 @@ import { Howl } from "howler";
 import { ITemplateRowProps } from "../../models";
 import { TemplateBaseComponent } from "../base";
 import { PLHAssetPipe } from "../../pipes/plh-asset.pipe";
+import { ModalController } from "@ionic/angular";
+import { TemplatePopupComponent } from "../layout/popup/popup.component";
 
 // Names of ion-icons to be used by default in the player.
 // Will be overridden if user provides values for play_icon_asset, pause_icon_asset or forward_icon_asset
@@ -27,7 +29,8 @@ interface IAudioParams {
   playIconAsset: string;
   /** TEMPLATE PARAMETER: "pause_icon_asset". The path to an svg to override the default pause icon. Default icon is ion's "pause-outline" */
   pauseIconAsset: string;
-  /** TEMPLATE PARAMETER: "forward_icon_asset". The path to an svg to override the default forward icon.
+  /**
+   * TEMPLATE PARAMETER: "forward_icon_asset". The path to an svg to override the default forward icon.
    * Will be mirrored to be used as the reqind icon. Default icon is ion's "play-forward"
    * */
   forwardIconAsset: string;
@@ -35,11 +38,18 @@ interface IAudioParams {
   showInfoButton: boolean;
   /** TEMPLATE PARAMETER: "info_icon_asset". The path to an svg to override the default info icon. The default is an icon indicating a transcript */
   infoIconAsset: string;
-  /** TEMPLATE PARAMETER: "range_bar_disabled". If true, the use cannot scrub through the audio using the range bar.
+  /**
+   * TEMPLATE PARAMETER: "transcript_text". A string representing the transcript of the audio.
+   * If provided, the transcript button will be shown and will launch a popup containing the this text
+   */
+  transcriptText: string;
+  /**
+   * TEMPLATE PARAMETER: "range_bar_disabled". If true, the use cannot scrub through the audio using the range bar.
    * Default false.
    */
   rangeBarDisabled: boolean;
-  /** TEMPLATE PARAMETER: "time_to_skip". The increment of time, in seconds, that will be applied when clicking the forward or backward buttons.
+  /**
+   * TEMPLATE PARAMETER: "time_to_skip". The increment of time, in seconds, that will be applied when clicking the forward or backward buttons.
    * Default 15.
    */
   timeToSkip: number;
@@ -83,7 +93,10 @@ export class TmplAudioComponent
   /** @ignore */
   trackerInterval: NodeJS.Timeout;
 
-  constructor(private plhAssetPipe: PLHAssetPipe) {
+  constructor(
+    private plhAssetPipe: PLHAssetPipe,
+    private modalCtrl: ModalController
+  ) {
     super();
   }
 
@@ -92,6 +105,25 @@ export class TmplAudioComponent
     this.initPlayer();
   }
 
+  async openTranscriptPopup() {
+    const modal = await this.modalCtrl.create({
+      component: TemplatePopupComponent,
+      componentProps: {
+        props: {
+          textOnly: true,
+          text: "My string",
+          fullscreen: false,
+          showCloseButton: true,
+        },
+      },
+      id: "popup-audio-transcript",
+      // update to this styling must be done in global theme scss as the modal is injected dynamically into the dom
+      cssClass: "template-popup-modal",
+      showBackdrop: false,
+    });
+    modal.present();
+  }
+
   private getParams() {
     this.params.variant = getStringParamFromTemplateRow(this._row, "variant", "compact")
       .split(",")
@@ -115,6 +147,7 @@ export class TmplAudioComponent
     this.params.infoIconAsset = getStringParamFromTemplateRow(this._row, "info_icon_asset", null);
     this.params.showInfoButton =
       !!this.params.infoIconAsset ||
+      !!this.params.transcriptText ||
       getBooleanParamFromTemplateRow(this._row, "show_info_button", false);
     this.params.rangeBarDisabled = getBooleanParamFromTemplateRow(
       this._row,
@@ -235,7 +268,11 @@ export class TmplAudioComponent
     }
   }
 
-  ngOnDestroy() {
-    this.player.stop();
+  async ngOnDestroy() {
+    this.player?.stop();
+    const activeModal = await this.modalCtrl.getTop();
+    if (activeModal) {
+      await activeModal.dismiss();
+    }
   }
 }
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
index 6fc3e6592..a9794d8df 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.html
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -8,14 +8,18 @@
       <ion-icon slot="icon-only" name="close"></ion-icon>
     </div>
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
-      <plh-template-container
-        class="template-container"
-        [name]="props.name"
-        [templatename]="props.templatename"
-        [parent]="props.parent"
-        [row]="props.row"
-        (emittedValue)="handleEmittedValue($event)"
-      ></plh-template-container>
+      @if (props.textOnly) {
+        <div class="large standard normal" [innerHTML]="props.text | markdown"></div>
+      } @else {
+        <plh-template-container
+          class="template-container"
+          [name]="props.name"
+          [templatename]="props.templatename"
+          [parent]="props.parent"
+          [row]="props.row"
+          (emittedValue)="handleEmittedValue($event)"
+        ></plh-template-container>
+      }
     </div>
   </div>
 </div>
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.ts b/src/app/shared/components/template/components/layout/popup/popup.component.ts
index 460e85a1a..1384e2456 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.ts
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.ts
@@ -53,4 +53,7 @@ export interface ITemplatePopupComponentProps extends ITemplateContainerProps {
   waitForDismiss?: boolean;
   /** Display fullscreen overlayed on top of all other app content */
   fullscreen?: boolean;
+  /** Pass text only to render that text in a popup, bypassing any templates */
+  textOnly?: boolean;
+  text?: string;
 }

From 2e07f82a1d9008b85ba53cd6708fab4a19e9a9f1 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Tue, 8 Oct 2024 17:11:35 +0100
Subject: [PATCH 2/6] fix: handle transcript_text param

---
 .../components/template/components/audio/audio.component.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/components/template/components/audio/audio.component.ts b/src/app/shared/components/template/components/audio/audio.component.ts
index e7a4d852a..8667d9667 100644
--- a/src/app/shared/components/template/components/audio/audio.component.ts
+++ b/src/app/shared/components/template/components/audio/audio.component.ts
@@ -111,7 +111,7 @@ export class TmplAudioComponent
       componentProps: {
         props: {
           textOnly: true,
-          text: "My string",
+          text: this.params.transcriptText,
           fullscreen: false,
           showCloseButton: true,
         },
@@ -145,6 +145,7 @@ export class TmplAudioComponent
     );
     this.params.title = getStringParamFromTemplateRow(this._row, "title", "");
     this.params.infoIconAsset = getStringParamFromTemplateRow(this._row, "info_icon_asset", null);
+    this.params.transcriptText = getStringParamFromTemplateRow(this._row, "transcript_text", null);
     this.params.showInfoButton =
       !!this.params.infoIconAsset ||
       !!this.params.transcriptText ||

From 5ecc580258108370b5f327586b41c0531fa134c2 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Wed, 9 Oct 2024 15:58:50 +0100
Subject: [PATCH 3/6] chore(audio): use ion-button component around
 action-button icon

---
 .../components/audio/audio.component.html     | 32 +++++--------
 .../components/audio/audio.component.scss     | 22 ++++-----
 .../components/audio/audio.component.ts       | 46 ++++++++++---------
 3 files changed, 44 insertions(+), 56 deletions(-)

diff --git a/src/app/shared/components/template/components/audio/audio.component.html b/src/app/shared/components/template/components/audio/audio.component.html
index daffbb57e..08a096046 100644
--- a/src/app/shared/components/template/components/audio/audio.component.html
+++ b/src/app/shared/components/template/components/audio/audio.component.html
@@ -4,36 +4,26 @@
       <h3>{{ params.title }}</h3>
       @if (params.variant.includes("large") && params.showInfoButton) {
         <div class="info-icon-container">
-          @if (params.infoIconAsset) {
-            <ion-icon
-              [src]="params.infoIconAsset | plhAsset"
-              (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
-            ></ion-icon>
-          } @else {
-            <ion-icon
-              name="document-text-outline"
-              (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
-            ></ion-icon>
-          }
+          <ion-button fill="clear" class="action-button" (click)="handleActionButtonClick()">
+            @if (params.infoIconAsset) {
+              <ion-icon slot="icon-only" [src]="params.infoIconAsset | plhAsset"></ion-icon>
+            } @else {
+              <ion-icon slot="icon-only" name="document-text-outline"></ion-icon>
+            }
+          </ion-button>
         </div>
       }
     </div>
   }
   <div class="second-row">
     @if (params.variant.includes("compact") && params.showInfoButton) {
-      <div class="info-icon-container">
+      <ion-button fill="clear" class="action-button" (click)="handleActionButtonClick()">
         @if (params.infoIconAsset) {
-          <ion-icon
-            [src]="params.infoIconAsset | plhAsset"
-            (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
-          ></ion-icon>
+          <ion-icon slot="icon-only" [src]="params.infoIconAsset | plhAsset"></ion-icon>
         } @else {
-          <ion-icon
-            name="document-text-outline"
-            (click)="params.transcriptText ? openTranscriptPopup() : clickInfo()"
-          ></ion-icon>
+          <ion-icon slot="icon-only" name="document-text-outline"></ion-icon>
         }
-      </div>
+      </ion-button>
     }
     <div class="progress-block" [class.disabled]="params.rangeBarDisabled || !player">
       <ion-range
diff --git a/src/app/shared/components/template/components/audio/audio.component.scss b/src/app/shared/components/template/components/audio/audio.component.scss
index 2308cb153..e5df75a00 100644
--- a/src/app/shared/components/template/components/audio/audio.component.scss
+++ b/src/app/shared/components/template/components/audio/audio.component.scss
@@ -30,6 +30,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
   .second-row {
     display: flex;
     flex-direction: row-reverse;
+    align-items: center;
 
     .controls {
       @include mixins.flex-space-between;
@@ -58,7 +59,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
     .progress-block {
       width: 100%;
       display: flex;
-      margin-left: var(--small-margin);
+      margin: 0 var(--tiny-margin);
       ion-range {
         width: 100%;
         --bar-background: var(--ion-color-gray-200);
@@ -77,13 +78,9 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
         }
       }
     }
-    .info-icon-container {
-      @include mixins.flex-centered;
-      margin-left: var(--small-margin);
-      ion-icon {
-        color: var(--ion-color-primary);
-        font-size: var(--icon-size-tiny);
-      }
+    ion-button.action-button {
+      --padding-start: 2px;
+      --padding-end: 2px;
     }
   }
 }
@@ -113,12 +110,9 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
       font-weight: var(--font-weight-bold);
       font-size: var(--audio-title-size);
     }
-    .info-icon-container {
-      @include mixins.flex-centered;
-      ion-icon {
-        color: var(--ion-color-primary);
-        font-size: var(--icon-size-small);
-      }
+    ion-button.action-button {
+      --padding-start: 2px;
+      --padding-end: 2px;
     }
   }
 
diff --git a/src/app/shared/components/template/components/audio/audio.component.ts b/src/app/shared/components/template/components/audio/audio.component.ts
index 8667d9667..bee446961 100644
--- a/src/app/shared/components/template/components/audio/audio.component.ts
+++ b/src/app/shared/components/template/components/audio/audio.component.ts
@@ -105,23 +105,12 @@ export class TmplAudioComponent
     this.initPlayer();
   }
 
-  async openTranscriptPopup() {
-    const modal = await this.modalCtrl.create({
-      component: TemplatePopupComponent,
-      componentProps: {
-        props: {
-          textOnly: true,
-          text: this.params.transcriptText,
-          fullscreen: false,
-          showCloseButton: true,
-        },
-      },
-      id: "popup-audio-transcript",
-      // update to this styling must be done in global theme scss as the modal is injected dynamically into the dom
-      cssClass: "template-popup-modal",
-      showBackdrop: false,
-    });
-    modal.present();
+  public async handleActionButtonClick() {
+    if (this.params.transcriptText) {
+      await this.openTranscriptPopup();
+    } else {
+      await this.triggerActions("info_click");
+    }
   }
 
   private getParams() {
@@ -202,10 +191,6 @@ export class TmplAudioComponent
     this.isPlaying = !this.isPlaying;
   }
 
-  public async clickInfo() {
-    await this.triggerActions("info_click");
-  }
-
   /**
    * Handle dragging of the range bar. Does not seek within the actual audio file,
    * this should only be triggered when the handle is released (on ionChange)
@@ -269,6 +254,25 @@ export class TmplAudioComponent
     }
   }
 
+  private async openTranscriptPopup() {
+    const modal = await this.modalCtrl.create({
+      component: TemplatePopupComponent,
+      componentProps: {
+        props: {
+          textOnly: true,
+          text: this.params.transcriptText,
+          fullscreen: false,
+          showCloseButton: true,
+        },
+      },
+      id: "popup-audio-transcript",
+      // update to this styling must be done in global theme scss as the modal is injected dynamically into the dom
+      cssClass: "template-popup-modal",
+      showBackdrop: false,
+    });
+    modal.present();
+  }
+
   async ngOnDestroy() {
     this.player?.stop();
     const activeModal = await this.modalCtrl.getTop();

From 46ce7e62e0e2a1c65fd3a72248597fb8b49c9792 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Wed, 9 Oct 2024 16:01:17 +0100
Subject: [PATCH 4/6] chore: refactor popup component params

---
 .../components/template/components/audio/audio.component.ts   | 3 +--
 .../template/components/layout/popup/popup.component.html     | 4 ++--
 .../template/components/layout/popup/popup.component.ts       | 3 +--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/shared/components/template/components/audio/audio.component.ts b/src/app/shared/components/template/components/audio/audio.component.ts
index bee446961..34921bee4 100644
--- a/src/app/shared/components/template/components/audio/audio.component.ts
+++ b/src/app/shared/components/template/components/audio/audio.component.ts
@@ -259,8 +259,7 @@ export class TmplAudioComponent
       component: TemplatePopupComponent,
       componentProps: {
         props: {
-          textOnly: true,
-          text: this.params.transcriptText,
+          popupText: this.params.transcriptText,
           fullscreen: false,
           showCloseButton: true,
         },
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
index a9794d8df..386e659e4 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.html
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -8,8 +8,8 @@
       <ion-icon slot="icon-only" name="close"></ion-icon>
     </div>
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
-      @if (props.textOnly) {
-        <div class="large standard normal" [innerHTML]="props.text | markdown"></div>
+      @if (props.popupText) {
+        <div class="large standard normal" [innerHTML]="props.popupText | markdown"></div>
       } @else {
         <plh-template-container
           class="template-container"
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.ts b/src/app/shared/components/template/components/layout/popup/popup.component.ts
index 1384e2456..11c14fa21 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.ts
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.ts
@@ -54,6 +54,5 @@ export interface ITemplatePopupComponentProps extends ITemplateContainerProps {
   /** Display fullscreen overlayed on top of all other app content */
   fullscreen?: boolean;
   /** Pass text only to render that text in a popup, bypassing any templates */
-  textOnly?: boolean;
-  text?: string;
+  popupText?: boolean;
 }

From 50cc535af47fcd90f96199d1a09b1012b9dff006 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Wed, 9 Oct 2024 16:35:09 +0100
Subject: [PATCH 5/6] chore: pop-up used for text only now renders text inside
 a text component instance

---
 .../layout/popup/popup.component.html         |  2 +-
 .../layout/popup/popup.component.ts           |  2 +-
 .../components/template/components/text.ts    | 50 +++++++++++++------
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
index 386e659e4..4ce6d4150 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.html
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -9,7 +9,7 @@
     </div>
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
       @if (props.popupText) {
-        <div class="large standard normal" [innerHTML]="props.popupText | markdown"></div>
+        <plh-tmpl-text [textInputParams]="{ text: props.popupText }"></plh-tmpl-text>
       } @else {
         <plh-template-container
           class="template-container"
diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.ts b/src/app/shared/components/template/components/layout/popup/popup.component.ts
index 11c14fa21..e7c097dda 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.ts
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.ts
@@ -54,5 +54,5 @@ export interface ITemplatePopupComponentProps extends ITemplateContainerProps {
   /** Display fullscreen overlayed on top of all other app content */
   fullscreen?: boolean;
   /** Pass text only to render that text in a popup, bypassing any templates */
-  popupText?: boolean;
+  popupText?: string;
 }
diff --git a/src/app/shared/components/template/components/text.ts b/src/app/shared/components/template/components/text.ts
index dbc57a7cd..b29ed738c 100644
--- a/src/app/shared/components/template/components/text.ts
+++ b/src/app/shared/components/template/components/text.ts
@@ -1,37 +1,55 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { TemplateBaseComponent } from "./base";
 import { getStringParamFromTemplateRow } from "../../../utils";
 
+interface ITextParams {
+  text: string;
+  textAlign: string | null;
+  style: string | null;
+  type: string;
+  isFalsy: boolean;
+}
 @Component({
   selector: "plh-tmpl-text",
   template: `<div
-    *ngIf="_row && _row.value"
+    *ngIf="params.text"
     class="large standard normal margin-t-large"
-    [class]="style"
-    [ngStyle]="isFalsy ? { display: 'none' } : { display: 'block' }"
-    [innerHTML]="type === 'numbered' ? (_row.value | number) : (_row.value?.toString() | markdown)"
-    [style]="_row.style_list | styleList"
-    [style.textAlign]="textAlign"
+    [class]="params.style"
+    [ngStyle]="params.isFalsy ? { display: 'none' } : { display: 'block' }"
+    [innerHTML]="
+      params.type === 'numbered' ? (params.text | number) : (params.text?.toString() | markdown)
+    "
+    [style]="_row?.style_list | styleList"
+    [style.textAlign]="params.textAlign"
   ></div> `,
   styleUrls: ["./tmpl-components-common.scss"],
 })
 export class TmplTextComponent extends TemplateBaseComponent implements OnInit {
-  textAlign: string | null;
-  style: string | null;
-  type: string;
-  isFalsy: boolean;
+  @Input() textInputParams: Partial<ITextParams>;
+  params: Partial<ITextParams> = {};
+
   constructor() {
     super();
   }
 
   ngOnInit() {
-    this.getParams();
+    // If instantiated from a template, get params from template row
+    if (this._row) {
+      this.getParams();
+    }
+    // Else if instantiated from a parent component, get params from Input()
+    else if (this.textInputParams) {
+      this.params = this.textInputParams;
+    }
   }
 
   getParams() {
-    this.isFalsy = ["undefined", "NaN", "null", '""'].includes(this._row.value);
-    this.textAlign = getStringParamFromTemplateRow(this._row, "text_align", null);
-    this.type = this._row.parameter_list?.style?.includes("numbered") ? "numbered" : "marked";
-    this.style = getStringParamFromTemplateRow(this._row, "style", null);
+    this.params.text = this._row.value;
+    this.params.isFalsy = ["undefined", "NaN", "null", '""'].includes(this.params.text);
+    this.params.textAlign = getStringParamFromTemplateRow(this._row, "text_align", null);
+    this.params.type = this._row.parameter_list?.style?.includes("numbered")
+      ? "numbered"
+      : "marked";
+    this.params.style = getStringParamFromTemplateRow(this._row, "style", null);
   }
 }

From 66587023bdae1b0ec3fe6c99bc46b79b8e1b2a39 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Wed, 9 Oct 2024 17:35:11 +0100
Subject: [PATCH 6/6] chore: revert changes to text component, instantiate in
 popup using ad-hoc row values instead

---
 .../layout/popup/popup.component.html         |  5 +-
 .../components/template/components/text.ts    | 50 ++++++-------------
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/src/app/shared/components/template/components/layout/popup/popup.component.html b/src/app/shared/components/template/components/layout/popup/popup.component.html
index 4ce6d4150..31958a5cf 100644
--- a/src/app/shared/components/template/components/layout/popup/popup.component.html
+++ b/src/app/shared/components/template/components/layout/popup/popup.component.html
@@ -9,7 +9,10 @@
     </div>
     <div class="popup-content" [attr.data-fullscreen]="props.fullscreen ? true : null">
       @if (props.popupText) {
-        <plh-tmpl-text [textInputParams]="{ text: props.popupText }"></plh-tmpl-text>
+        <!-- Use a text component row to display popup text -->
+        <plh-tmpl-text
+          [row]="{ _nested_name: '', name: '', type: 'text', value: props.popupText }"
+        ></plh-tmpl-text>
       } @else {
         <plh-template-container
           class="template-container"
diff --git a/src/app/shared/components/template/components/text.ts b/src/app/shared/components/template/components/text.ts
index b29ed738c..dbc57a7cd 100644
--- a/src/app/shared/components/template/components/text.ts
+++ b/src/app/shared/components/template/components/text.ts
@@ -1,55 +1,37 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { TemplateBaseComponent } from "./base";
 import { getStringParamFromTemplateRow } from "../../../utils";
 
-interface ITextParams {
-  text: string;
-  textAlign: string | null;
-  style: string | null;
-  type: string;
-  isFalsy: boolean;
-}
 @Component({
   selector: "plh-tmpl-text",
   template: `<div
-    *ngIf="params.text"
+    *ngIf="_row && _row.value"
     class="large standard normal margin-t-large"
-    [class]="params.style"
-    [ngStyle]="params.isFalsy ? { display: 'none' } : { display: 'block' }"
-    [innerHTML]="
-      params.type === 'numbered' ? (params.text | number) : (params.text?.toString() | markdown)
-    "
-    [style]="_row?.style_list | styleList"
-    [style.textAlign]="params.textAlign"
+    [class]="style"
+    [ngStyle]="isFalsy ? { display: 'none' } : { display: 'block' }"
+    [innerHTML]="type === 'numbered' ? (_row.value | number) : (_row.value?.toString() | markdown)"
+    [style]="_row.style_list | styleList"
+    [style.textAlign]="textAlign"
   ></div> `,
   styleUrls: ["./tmpl-components-common.scss"],
 })
 export class TmplTextComponent extends TemplateBaseComponent implements OnInit {
-  @Input() textInputParams: Partial<ITextParams>;
-  params: Partial<ITextParams> = {};
-
+  textAlign: string | null;
+  style: string | null;
+  type: string;
+  isFalsy: boolean;
   constructor() {
     super();
   }
 
   ngOnInit() {
-    // If instantiated from a template, get params from template row
-    if (this._row) {
-      this.getParams();
-    }
-    // Else if instantiated from a parent component, get params from Input()
-    else if (this.textInputParams) {
-      this.params = this.textInputParams;
-    }
+    this.getParams();
   }
 
   getParams() {
-    this.params.text = this._row.value;
-    this.params.isFalsy = ["undefined", "NaN", "null", '""'].includes(this.params.text);
-    this.params.textAlign = getStringParamFromTemplateRow(this._row, "text_align", null);
-    this.params.type = this._row.parameter_list?.style?.includes("numbered")
-      ? "numbered"
-      : "marked";
-    this.params.style = getStringParamFromTemplateRow(this._row, "style", null);
+    this.isFalsy = ["undefined", "NaN", "null", '""'].includes(this._row.value);
+    this.textAlign = getStringParamFromTemplateRow(this._row, "text_align", null);
+    this.type = this._row.parameter_list?.style?.includes("numbered") ? "numbered" : "marked";
+    this.style = getStringParamFromTemplateRow(this._row, "style", null);
   }
 }