From eda093188945f37ef1079d5364441219914a7697 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Sun, 15 Dec 2024 12:58:18 -0800
Subject: [PATCH 01/23] refactor: auth service and firebase auth provider

---
 packages/data-models/deployment.model.ts      | 13 ++--
 .../scripts/src/tasks/providers/appData.ts    |  3 +-
 src/app/deployment-features.module.ts         |  3 +-
 .../instance/template-action.service.ts       |  5 --
 src/app/shared/services/auth/auth.module.ts   | 14 ++++
 src/app/shared/services/auth/auth.service.ts  | 78 ++++++++-----------
 .../services/auth/providers/base.auth.ts      | 16 ++++
 .../services/auth/providers/firebase.auth.ts  | 45 +++++++++++
 .../shared/services/auth/providers/index.ts   | 17 ++++
 src/app/shared/services/auth/types.ts         |  7 ++
 10 files changed, 142 insertions(+), 59 deletions(-)
 create mode 100644 src/app/shared/services/auth/auth.module.ts
 create mode 100644 src/app/shared/services/auth/providers/base.auth.ts
 create mode 100644 src/app/shared/services/auth/providers/firebase.auth.ts
 create mode 100644 src/app/shared/services/auth/providers/index.ts
 create mode 100644 src/app/shared/services/auth/types.ts

diff --git a/packages/data-models/deployment.model.ts b/packages/data-models/deployment.model.ts
index f884873b8b..2e518e0de8 100644
--- a/packages/data-models/deployment.model.ts
+++ b/packages/data-models/deployment.model.ts
@@ -3,7 +3,7 @@ import type { IGdriveEntry } from "../@idemsInternational/gdrive-tools";
 import type { IAppConfig, IAppConfigOverride } from "./appConfig";
 
 /** Update version to force recompile next time deployment set (e.g. after default config update) */
-export const DEPLOYMENT_CONFIG_VERSION = 20241111.0;
+export const DEPLOYMENT_CONFIG_VERSION = 20241215.1;
 
 /** Configuration settings available to runtime application */
 export interface IDeploymentRuntimeConfig {
@@ -36,6 +36,11 @@ export interface IDeploymentRuntimeConfig {
     /** sentry/glitchtip logging dsn */
     dsn: string;
   };
+  /** Enable auth actions by specifying auth provider */
+  auth: {
+    /** provider to use with authentication actions. actions will be disabled if no provider specified */
+    provider?: "firebase" | "supabase";
+  };
   /**
    * Specify if using firebase for auth and crashlytics.
    * Requires firebase config available through encrypted config */
@@ -51,10 +56,6 @@ export interface IDeploymentRuntimeConfig {
       appId: string;
       measurementId: string;
     };
-    auth: {
-      /** Enables `auth` actions to allow user sign-in/out */
-      enabled: boolean;
-    };
     crashlytics: {
       /** Enables app crash reports to firebase crashlytics */
       enabled: boolean;
@@ -200,9 +201,9 @@ export const DEPLOYMENT_RUNTIME_CONFIG_DEFAULTS: IDeploymentRuntimeConfig = {
     endpoint: "https://apps-server.idems.international/analytics",
   },
   app_config: {},
+  auth: {},
   firebase: {
     config: null,
-    auth: { enabled: false },
     crashlytics: { enabled: true },
   },
   supabase: {
diff --git a/packages/scripts/src/tasks/providers/appData.ts b/packages/scripts/src/tasks/providers/appData.ts
index 94e9277c1c..3e4ba0b09c 100644
--- a/packages/scripts/src/tasks/providers/appData.ts
+++ b/packages/scripts/src/tasks/providers/appData.ts
@@ -68,7 +68,7 @@ const copyDeploymentDataToApp = async () => {
 const optimiseBuild = async () => new AppDataOptimiser(WorkflowRunner.config).run();
 
 function generateRuntimeConfig(deploymentConfig: IDeploymentConfigJson): IDeploymentRuntimeConfig {
-  const { analytics, api, app_config, error_logging, firebase, git, name, supabase, web } =
+  const { analytics, api, app_config, auth, error_logging, firebase, git, name, supabase, web } =
     deploymentConfig;
 
   return {
@@ -77,6 +77,7 @@ function generateRuntimeConfig(deploymentConfig: IDeploymentConfigJson): IDeploy
     analytics,
     api,
     app_config,
+    auth,
     error_logging,
     firebase,
     name,
diff --git a/src/app/deployment-features.module.ts b/src/app/deployment-features.module.ts
index e5c44bfdb8..1353224e7b 100644
--- a/src/app/deployment-features.module.ts
+++ b/src/app/deployment-features.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 
 import { AnalyticsModule } from "./shared/services/analytics";
 import { NavStackModule } from "./feature/nav-stack/nav-stack.module";
+import { AuthModule } from "./shared/services/auth/auth.module";
 
 /**
  * Module imports required for specific deployment features
@@ -14,5 +15,5 @@ import { NavStackModule } from "./feature/nav-stack/nav-stack.module";
  *
  * This is a feature marked for future implementation
  */
-@NgModule({ imports: [AnalyticsModule, NavStackModule] })
+@NgModule({ imports: [AnalyticsModule, NavStackModule, AuthModule] })
 export class DeploymentFeaturesModule {}
diff --git a/src/app/shared/components/template/services/instance/template-action.service.ts b/src/app/shared/components/template/services/instance/template-action.service.ts
index 7f8b8231d5..7e7b40f338 100644
--- a/src/app/shared/components/template/services/instance/template-action.service.ts
+++ b/src/app/shared/components/template/services/instance/template-action.service.ts
@@ -12,7 +12,6 @@ import { TemplateService } from "../template.service";
 import { TemplateTranslateService } from "../template-translate.service";
 import { EventService } from "src/app/shared/services/event/event.service";
 import { DBSyncService } from "src/app/shared/services/db/db-sync.service";
-import { AuthService } from "src/app/shared/services/auth/auth.service";
 import { SkinService } from "src/app/shared/services/skin/skin.service";
 import { ThemeService } from "src/app/feature/theme/services/theme.service";
 import { getGlobalService } from "src/app/shared/services/global.service";
@@ -65,9 +64,6 @@ export class TemplateActionService extends SyncServiceBase {
   private get dbSyncService() {
     return getGlobalService(this.injector, DBSyncService);
   }
-  private get authService() {
-    return getGlobalService(this.injector, AuthService);
-  }
   private get skinService() {
     return getGlobalService(this.injector, SkinService);
   }
@@ -93,7 +89,6 @@ export class TemplateActionService extends SyncServiceBase {
       this.analyticsService,
       this.templateService,
       this.eventService,
-      this.authService,
       this.skinService,
     ]);
   }
diff --git a/src/app/shared/services/auth/auth.module.ts b/src/app/shared/services/auth/auth.module.ts
new file mode 100644
index 0000000000..011a4b1f8e
--- /dev/null
+++ b/src/app/shared/services/auth/auth.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from "@angular/core";
+
+import { AuthService } from "./auth.service";
+
+@NgModule({
+  imports: [],
+  exports: [],
+  providers: [],
+})
+export class AuthModule {
+  constructor(private service: AuthService) {
+    // include service to initialise and register handlers
+  }
+}
diff --git a/src/app/shared/services/auth/auth.service.ts b/src/app/shared/services/auth/auth.service.ts
index affb1e16f9..7b63603342 100644
--- a/src/app/shared/services/auth/auth.service.ts
+++ b/src/app/shared/services/auth/auth.service.ts
@@ -1,53 +1,48 @@
-import { Injectable } from "@angular/core";
-import { FirebaseAuthentication, User } from "@capacitor-firebase/authentication";
-import { BehaviorSubject, firstValueFrom } from "rxjs";
-import { filter } from "rxjs/operators";
-import { SyncServiceBase } from "../syncService.base";
+import { effect, Injectable, Injector, signal } from "@angular/core";
 import { TemplateActionRegistry } from "../../components/template/services/instance/template-action.registry";
-import { FirebaseService } from "../firebase/firebase.service";
 import { LocalStorageService } from "../local-storage/local-storage.service";
 import { DeploymentService } from "../deployment/deployment.service";
+import { AuthProviderBase } from "./providers/base.auth";
+import { AsyncServiceBase } from "../asyncService.base";
+import { getAuthProvider } from "./providers";
+import { IAuthUser } from "./types";
+import { toObservable } from "@angular/core/rxjs-interop";
+import { filter, firstValueFrom } from "rxjs";
 
 @Injectable({
   providedIn: "root",
 })
-export class AuthService extends SyncServiceBase {
-  private authUser$ = new BehaviorSubject<User | null>(null);
+export class AuthService extends AsyncServiceBase {
+  public authUser = signal<IAuthUser | null>(null);
+
+  /** Auth provider used */
+  private provider: AuthProviderBase;
 
-  // include auth import to ensure app registered
   constructor(
     private templateActionRegistry: TemplateActionRegistry,
-    private firebaseService: FirebaseService,
     private localStorageService: LocalStorageService,
-    private deploymentService: DeploymentService
+    private deploymentService: DeploymentService,
+    private injector: Injector
   ) {
     super("Auth");
-    this.initialise();
-  }
-  private initialise() {
-    const { firebase } = this.deploymentService.config;
-    if (firebase?.auth?.enabled && this.firebaseService.app) {
-      this.addAuthListeners();
-      this.registerTemplateActionHandlers();
-    }
-  }
-
-  /** Return a promise that resolves after a signed in user defined */
-  public async waitForSignInComplete() {
-    return firstValueFrom(this.authUser$.pipe(filter((value?: User | null) => !!value)));
-  }
-
-  public async signInWithGoogle() {
-    return FirebaseAuthentication.signInWithGoogle();
+    this.provider = getAuthProvider(this.deploymentService.config.auth?.provider);
+    this.registerInitFunction(this.initialise);
+    effect(async () => {
+      const authUser = this.provider.authUser();
+      console.log("[Auth User]", authUser);
+      this.addStorageEntry(authUser);
+    });
   }
 
-  public async signOut() {
-    return FirebaseAuthentication.signOut();
+  /** Return a promise that resolves only after a signed in user defined */
+  public async waitForUserSignedIn() {
+    const authUser$ = toObservable(this.authUser);
+    return firstValueFrom(authUser$.pipe(filter((value: IAuthUser | null) => !!value)));
   }
 
-  public async getCurrentUser() {
-    const { user } = await FirebaseAuthentication.getCurrentUser();
-    return user;
+  private async initialise() {
+    await this.provider.initialise(this.injector);
+    this.registerTemplateActionHandlers();
   }
 
   private registerTemplateActionHandlers() {
@@ -55,8 +50,8 @@ export class AuthService extends SyncServiceBase {
       auth: async ({ args }) => {
         const [actionId] = args;
         const childActions = {
-          sign_in_google: async () => await this.signInWithGoogle(),
-          sign_out: async () => await this.signOut(),
+          sign_in_google: async () => await this.provider.signInWithGoogle(),
+          sign_out: async () => await this.provider.signOut(),
         };
         if (!(actionId in childActions)) {
           console.error(`[AUTH] - No action, "${actionId}"`);
@@ -69,22 +64,13 @@ export class AuthService extends SyncServiceBase {
        * Use `auth: sign_in_google` instead
        * */
       google_auth: async () => {
-        return await this.signInWithGoogle();
+        return await this.provider.signInWithGoogle();
       },
     });
   }
 
-  /** Listen to auth state changes and update local subject accordingly */
-  private addAuthListeners() {
-    FirebaseAuthentication.addListener("authStateChange", ({ user }) => {
-      // console.log("[User] updated", user);
-      this.addStorageEntry(user);
-      this.authUser$.next(user);
-    });
-  }
-
   /** Keep a subset of auth user info in contact fields for db lookup*/
-  private addStorageEntry(user?: User) {
+  private addStorageEntry(user?: IAuthUser) {
     if (user) {
       const { uid } = user;
       this.localStorageService.setProtected("APP_AUTH_USER", JSON.stringify({ uid }));
diff --git a/src/app/shared/services/auth/providers/base.auth.ts b/src/app/shared/services/auth/providers/base.auth.ts
new file mode 100644
index 0000000000..1751c0333f
--- /dev/null
+++ b/src/app/shared/services/auth/providers/base.auth.ts
@@ -0,0 +1,16 @@
+import { Injector, signal } from "@angular/core";
+import { IAuthUser } from "../types";
+
+export class AuthProviderBase {
+  public authUser = signal<IAuthUser | null>(null);
+
+  public async initialise(injector: Injector) {}
+
+  public async signInWithGoogle() {
+    return this.authUser();
+  }
+
+  public async signOut() {
+    return this.authUser();
+  }
+}
diff --git a/src/app/shared/services/auth/providers/firebase.auth.ts b/src/app/shared/services/auth/providers/firebase.auth.ts
new file mode 100644
index 0000000000..b7d67c913f
--- /dev/null
+++ b/src/app/shared/services/auth/providers/firebase.auth.ts
@@ -0,0 +1,45 @@
+import { Injectable, Injector } from "@angular/core";
+import { FirebaseAuthentication, User } from "@capacitor-firebase/authentication";
+import { FirebaseService } from "../../firebase/firebase.service";
+import { AuthProviderBase } from "./base.auth";
+
+@Injectable({
+  providedIn: "root",
+})
+export class FirebaseAuthProvider extends AuthProviderBase {
+  public override async initialise(injector: Injector) {
+    const firebaseService = injector.get(FirebaseService);
+    // TODO - is service required here?
+    if (!firebaseService.app) {
+      throw new Error("[Firebase Auth] app not configured");
+    }
+    this.addAuthListeners();
+    // ensure any previous signed in user is loaded
+    await FirebaseAuthentication.getCurrentUser();
+  }
+
+  public async signInWithGoogle() {
+    await FirebaseAuthentication.signInWithGoogle();
+    return this.authUser();
+  }
+
+  public async signOut() {
+    await FirebaseAuthentication.signOut();
+    return this.authUser();
+  }
+
+  public async getCurrentUser() {
+    const { user } = await FirebaseAuthentication.getCurrentUser();
+    return user;
+  }
+
+  /**
+   * Listen to auth state changes and update authUser signal
+   * This helps to ensure the signal is kept in sync with automated user sign-in/out
+   * */
+  private addAuthListeners() {
+    FirebaseAuthentication.addListener("authStateChange", ({ user }) => {
+      this.authUser.set(user);
+    });
+  }
+}
diff --git a/src/app/shared/services/auth/providers/index.ts b/src/app/shared/services/auth/providers/index.ts
new file mode 100644
index 0000000000..9fe03efa66
--- /dev/null
+++ b/src/app/shared/services/auth/providers/index.ts
@@ -0,0 +1,17 @@
+import { IAuthProvider } from "../types";
+import { AuthProviderBase } from "./base.auth";
+import { FirebaseAuthProvider } from "./firebase.auth";
+import { SupabaseAuthProvider } from "./supabase.auth";
+
+// TODO - optimise for production (only include provider used)
+export const getAuthProvider = (name: IAuthProvider): AuthProviderBase => {
+  switch (name) {
+    case "firebase":
+      return new FirebaseAuthProvider();
+    case "supabase":
+      return new SupabaseAuthProvider();
+    default:
+      console.warn("[Auth Provider] not configured for: ", name);
+      return new AuthProviderBase();
+  }
+};
diff --git a/src/app/shared/services/auth/types.ts b/src/app/shared/services/auth/types.ts
new file mode 100644
index 0000000000..e65c35f5da
--- /dev/null
+++ b/src/app/shared/services/auth/types.ts
@@ -0,0 +1,7 @@
+import type { IDeploymentConfig } from "packages/data-models";
+
+export type IAuthProvider = IDeploymentConfig["auth"]["provider"];
+
+export interface IAuthUser {
+  uid: string;
+}

From 05144aa30752a9a2d46ed2fb042fd907fa20ae88 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 16 Dec 2024 11:45:32 +0000
Subject: [PATCH 02/23] feat: expose additional header and footer configuration
 props to app config

---
 packages/data-models/appConfig.ts             | 13 +++--
 src/app/app.component.html                    |  6 ++-
 src/app/app.component.ts                      |  3 +-
 .../components/header/header.component.html   | 15 +++---
 .../shared/services/skin/skin.service.spec.ts | 51 +++----------------
 5 files changed, 28 insertions(+), 60 deletions(-)

diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts
index 6e3d690c50..29bf68862a 100644
--- a/packages/data-models/appConfig.ts
+++ b/packages/data-models/appConfig.ts
@@ -83,13 +83,15 @@ const APP_ROUTE_DEFAULTS = {
   ],
 };
 
-export type IHeaderColourOptions = "primary" | "secondary" | "none";
+export type IHeaderFooterBackgroundOptions = "primary" | "secondary" | "none";
 export type IHeaderVariantOptions = "default" | "compact";
 
 const APP_HEADER_DEFAULTS = {
-  title: "App",
   collapse: false,
-  colour: "primary" as IHeaderColourOptions,
+  colour: "primary" as IHeaderFooterBackgroundOptions,
+  show: true,
+  template: null as string | null,
+  title: "App",
   // The "compact" variant reduces the header height and removes the title
   variant: "default" as IHeaderVariantOptions,
   // default only show menu button on home screen
@@ -113,8 +115,9 @@ const activeRoute = (location: Location) => {
   return path;
 };
 
-const APP_FOOTER_DEFAULTS: { templateName: string | null } = {
-  templateName: null,
+const APP_FOOTER_DEFAULTS = {
+  templateName: null as string | null,
+  background: "primary" as IHeaderFooterBackgroundOptions,
 };
 
 const APP_SIDEMENU_DEFAULTS = {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 1b16ac041d..e247815129 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -41,13 +41,15 @@
     <!-- Main content: shows in split-pane when sidebar route active -->
     <ion-split-pane when="lg" contentId="main" [disabled]="!sidebarRouter.isActivated">
       <div style="display: flex; flex-direction: column; height: 100%; width: 100%" id="main">
-        <plh-main-header></plh-main-header>
+        @if (headerConfig().show) {
+          <plh-main-header></plh-main-header>
+        }
         <div class="route-container">
           <ion-router-outlet id="main-content"></ion-router-outlet>
         </div>
         @if (footerDefaults().templateName; as footerTemplateName) {
           <ion-footer>
-            <ion-toolbar color="primary">
+            <ion-toolbar [color]="footerDefaults().background">
               <plh-template-container
                 [templatename]="footerTemplateName"
                 [ignoreQueryParamChanges]="true"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 323455791f..4d35bae158 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -51,8 +51,9 @@ import { TemplateMetadataService } from "./shared/components/template/services/t
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  sideMenuDefaults = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
+  headerConfig = computed(() => this.appConfigService.appConfig().APP_HEADER_DEFAULTS);
   footerDefaults = computed(() => this.appConfigService.appConfig().APP_FOOTER_DEFAULTS);
+  sideMenuDefaults = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
   /** Track when app ready to render sidebar and route templates */
   public renderAppTemplates = signal(false);
 
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index a66a230875..992fa936b6 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -14,15 +14,16 @@
         <ion-icon name="chevron-back-outline" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>
-    <ng-container>
-      <ion-title
-        *ngIf="!(headerConfig().variant === 'compact')"
-        style="text-align: center"
-        routerLink="/"
-      >
+    @if (headerConfig().template) {
+      <plh-template-container
+        [templatename]="headerConfig().template"
+        [ignoreQueryParamChanges]="true"
+      ></plh-template-container>
+    } @else if (!(headerConfig().variant === "compact")) {
+      <ion-title style="text-align: center" routerLink="/">
         <span>{{ headerConfig().title }}</span>
       </ion-title>
-    </ng-container>
+    }
     <ion-buttons slot="end"> </ion-buttons>
   </ion-toolbar>
 </ion-header>
diff --git a/src/app/shared/services/skin/skin.service.spec.ts b/src/app/shared/services/skin/skin.service.spec.ts
index 91163628c5..c500ea5387 100644
--- a/src/app/shared/services/skin/skin.service.spec.ts
+++ b/src/app/shared/services/skin/skin.service.spec.ts
@@ -32,6 +32,8 @@ const MOCK_SKIN_2: IAppSkin = {
 
 const MOCK_APP_CONFIG: Partial<IAppConfig> = {
   APP_HEADER_DEFAULTS: {
+    template: null,
+    show: true,
     title: "default",
     collapse: false,
     colour: "none",
@@ -50,6 +52,7 @@ const MOCK_APP_CONFIG: Partial<IAppConfig> = {
   },
   APP_FOOTER_DEFAULTS: {
     templateName: "mock_footer",
+    background: "primary",
   },
 };
 
@@ -86,9 +89,9 @@ describe("SkinService", () => {
   });
 
   it("does not change non-overridden values", () => {
-    expect(service["appConfigService"].appConfig().APP_FOOTER_DEFAULTS).toEqual({
-      templateName: "mock_footer",
-    });
+    expect(service["appConfigService"].appConfig().APP_FOOTER_DEFAULTS.templateName).toEqual(
+      "mock_footer"
+    );
   });
 
   it("loads active skin from local storage on init if available", () => {
@@ -96,37 +99,6 @@ describe("SkinService", () => {
     expect(service.getActiveSkinName()).toEqual("MOCK_SKIN_2");
   });
 
-  it("generates override and revert configs", () => {
-    expect(service["revertOverride"]).toEqual({
-      APP_HEADER_DEFAULTS: { title: "default", colour: "none" },
-    });
-  });
-
-  it("reverts previous override when applying another skin", () => {
-    // MOCK_SKIN_1 will already be applied on load
-    const override = service["generateOverrideConfig"](MOCK_SKIN_2);
-    // creates a deep merge of override properties on top of current
-    expect(override).toEqual({
-      APP_HEADER_DEFAULTS: {
-        // revert changes only available in skin_1
-        colour: "none",
-        // apply changes from skin_2
-        title: "mock 2",
-        variant: "compact",
-      },
-    });
-    const revert = service["generateRevertConfig"](MOCK_SKIN_2);
-
-    // creates config revert to undo just the skin changes
-    expect(revert).toEqual({
-      APP_HEADER_DEFAULTS: {
-        // only revert changes remaining from skin_2
-        title: "default",
-        variant: "default",
-      },
-    });
-  });
-
   it("sets skin: sets active skin name", () => {
     service["setSkin"](MOCK_SKIN_2.name);
     expect(service.getActiveSkinName()).toEqual("MOCK_SKIN_2");
@@ -134,17 +106,6 @@ describe("SkinService", () => {
     expect(service.getActiveSkinName()).toEqual("MOCK_SKIN_1");
   });
 
-  it("sets skin: sets revertOverride correctly", () => {
-    // MOCK_SKIN_1 will already be applied on load
-    service["setSkin"](MOCK_SKIN_2.name);
-    expect(service["revertOverride"]).toEqual({
-      APP_HEADER_DEFAULTS: {
-        title: "default",
-        variant: "default",
-      },
-    });
-  });
-
   it("sets skin: updates AppConfigService.appConfig values", () => {
     // MOCK_SKIN_1 will already be applied on load
     service["setSkin"](MOCK_SKIN_2.name);

From f92595b6d22ea3a7e4b50b02e0285964331841d3 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 16 Dec 2024 16:43:20 +0000
Subject: [PATCH 03/23] chore: tidy test

---
 src/app/shared/services/skin/skin.service.spec.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/services/skin/skin.service.spec.ts b/src/app/shared/services/skin/skin.service.spec.ts
index c500ea5387..4b8b03b0a7 100644
--- a/src/app/shared/services/skin/skin.service.spec.ts
+++ b/src/app/shared/services/skin/skin.service.spec.ts
@@ -89,9 +89,10 @@ describe("SkinService", () => {
   });
 
   it("does not change non-overridden values", () => {
-    expect(service["appConfigService"].appConfig().APP_FOOTER_DEFAULTS.templateName).toEqual(
-      "mock_footer"
-    );
+    expect(service["appConfigService"].appConfig().APP_FOOTER_DEFAULTS).toEqual({
+      templateName: "mock_footer",
+      background: "primary",
+    });
   });
 
   it("loads active skin from local storage on init if available", () => {

From 579b2093a7981ffb8887a31090a0cc1eb14d4537 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 16 Dec 2024 17:43:48 +0000
Subject: [PATCH 04/23] chore: handle function params

---
 .../shared/components/header/header.component.ts    |  5 ++---
 .../services/app-config/app-config.service.ts       | 13 +++++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
index 5ce984e9f1..62bc8a93f1 100644
--- a/src/app/shared/components/header/header.component.ts
+++ b/src/app/shared/components/header/header.component.ts
@@ -69,11 +69,10 @@ export class headerComponent implements OnInit, OnDestroy {
     );
     effect(
       () => {
+        const config = this.headerConfig();
         // when route changes handle side-effects
         const e = this.routeChanges();
-        if (e instanceof NavigationEnd) {
-          this.handleRouteChange();
-        }
+        this.handleRouteChange();
         if (e instanceof NavigationStart) {
           this.hasBackHistory = true;
         }
diff --git a/src/app/shared/services/app-config/app-config.service.ts b/src/app/shared/services/app-config/app-config.service.ts
index a97cd8f01e..334cf151a7 100644
--- a/src/app/shared/services/app-config/app-config.service.ts
+++ b/src/app/shared/services/app-config/app-config.service.ts
@@ -100,12 +100,25 @@ export class AppConfigService extends SyncServiceBase {
       return;
     }
 
+    // some app config properties should be functions, but may be defined as boolean values,
+    // e.g. in template parameter_list to disable a certain property on that template
+    const functionKeys = ["should_show_back_button", "should_show_menu_button"];
+    functionKeys.forEach((key) => {
+      mergedConfig.APP_HEADER_DEFAULTS[key] = this.normaliseToFunction(
+        mergedConfig.APP_HEADER_DEFAULTS[key]
+      );
+    });
+
     // trigger change effects
     this.handleConfigSideEffects(overrides, mergedConfig);
     this.appConfig.set(mergedConfig);
     this.appConfig$.next(mergedConfig);
   }
 
+  private normaliseToFunction(value: any) {
+    return typeof value === "function" ? value : () => !!value;
+  }
+
   private handleConfigSideEffects(overrides: IAppConfigOverride = {}, config: IAppConfig) {
     if (overrides.APP_ROUTE_DEFAULTS) {
       updateRoutingDefaults(config.APP_ROUTE_DEFAULTS, this.router);

From b264af86e4f2eaff49646dc5e4eb35e5f2301bc6 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 16 Dec 2024 17:27:59 -0800
Subject: [PATCH 05/23] refactor: enforce login

---
 packages/data-models/appConfig.ts           |  1 -
 packages/data-models/deployment.model.ts    |  2 ++
 src/app/app.component.ts                    | 26 ---------------------
 src/app/app.module.ts                       |  4 ++--
 src/app/shared/services/auth/auth.module.ts |  1 +
 5 files changed, 5 insertions(+), 29 deletions(-)

diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts
index 6e3d690c50..92741de10a 100644
--- a/packages/data-models/appConfig.ts
+++ b/packages/data-models/appConfig.ts
@@ -129,7 +129,6 @@ const APP_SIDEMENU_DEFAULTS = {
 };
 
 const APP_AUTHENTICATION_DEFAULTS = {
-  enforceLogin: false,
   signInTemplate: "sign_in",
 };
 
diff --git a/packages/data-models/deployment.model.ts b/packages/data-models/deployment.model.ts
index 2e518e0de8..c37eebb9fb 100644
--- a/packages/data-models/deployment.model.ts
+++ b/packages/data-models/deployment.model.ts
@@ -40,6 +40,8 @@ export interface IDeploymentRuntimeConfig {
   auth: {
     /** provider to use with authentication actions. actions will be disabled if no provider specified */
     provider?: "firebase" | "supabase";
+    /** prevent user accessing app pages without being logged in */
+    enforceLogin?: boolean;
   };
   /**
    * Specify if using firebase for auth and crashlytics.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 323455791f..42335bc77b 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -100,7 +100,6 @@ export class AppComponent {
     public templateTranslateService: TemplateTranslateService,
     private crashlyticsService: CrashlyticsService,
     private appDataService: AppDataService,
-    private authService: AuthService,
     private seoService: SeoService,
     private taskService: TaskService,
     private feedbackService: FeedbackService,
@@ -125,7 +124,6 @@ export class AppComponent {
       this.hackSetDeveloperOptions();
       const isDeveloperMode = this.templateFieldService.getField("user_mode") === false;
       const user = this.userMetaService.userMeta;
-      await this.loadAuthConfig();
 
       if (!user.first_app_open) {
         await this.userMetaService.setUserMeta({ first_app_open: new Date().toISOString() });
@@ -164,29 +162,6 @@ export class AppComponent {
     }
   }
 
-  /**
-   * Authentication requires verified domain and app ids populated to firebase console
-   * Currently only run on native where specified (but can comment out for testing locally)
-   */
-  private async loadAuthConfig() {
-    const { firebase } = this.deploymentService.config;
-    const { enforceLogin, signInTemplate } =
-      this.appConfigService.appConfig().APP_AUTHENTICATION_DEFAULTS;
-    const ensureLogin = firebase.config && enforceLogin && Capacitor.isNativePlatform();
-    if (ensureLogin) {
-      this.authService.ready();
-      const authUser = await this.authService.getCurrentUser();
-      if (!authUser) {
-        const { modal } = await this.templateService.runStandaloneTemplate(signInTemplate, {
-          showCloseButton: false,
-          waitForDismiss: false,
-        });
-        await this.authService.waitForSignInComplete();
-        await modal.dismiss();
-      }
-    }
-  }
-
   /**
    * Various services set core app data which may be used in templates such as current app day,
    * user id etc. Make sure these services have run their initialisation logic before proceeding.
@@ -231,7 +206,6 @@ export class AppComponent {
         this.templateService,
         this.templateProcessService,
         this.appDataService,
-        this.authService,
         this.serverService,
         this.seoService,
         this.feedbackService,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 591b129364..aedaf10727 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,16 +38,16 @@ export function lottiePlayerFactory() {
     BrowserAnimationsModule,
     IonicModule.forRoot(),
     AppRoutingModule,
+    TemplateComponentsModule,
+    DeploymentFeaturesModule,
     HttpClientModule,
     SharedModule,
     FormsModule,
     LottieModule.forRoot({ player: lottiePlayerFactory }),
     // NOTE CC 2021-11-04 not sure if cache causes issues or not https://github.com/ngx-lottie/ngx-lottie/issues/115
     // LottieCacheModule.forRoot(),
-    TemplateComponentsModule,
     TourModule,
     ContextMenuModule,
-    DeploymentFeaturesModule,
   ],
   providers: [
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
diff --git a/src/app/shared/services/auth/auth.module.ts b/src/app/shared/services/auth/auth.module.ts
index 011a4b1f8e..d81ad098ee 100644
--- a/src/app/shared/services/auth/auth.module.ts
+++ b/src/app/shared/services/auth/auth.module.ts
@@ -10,5 +10,6 @@ import { AuthService } from "./auth.service";
 export class AuthModule {
   constructor(private service: AuthService) {
     // include service to initialise and register handlers
+    service.ready();
   }
 }

From 49769a5e935bc4ac9539973b39524cd57fbc3a1b Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 16 Dec 2024 17:28:27 -0800
Subject: [PATCH 06/23] chore: update deps

---
 package.json |  6 +++---
 yarn.lock    | 34 +++++++++++++++++-----------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 1d96b4ad74..9aecded662 100644
--- a/package.json
+++ b/package.json
@@ -42,9 +42,9 @@
     "@angular/platform-browser-dynamic": "~17.2.2",
     "@angular/router": "~17.2.2",
     "@capacitor-community/file-opener": "^6.0.0",
-    "@capacitor-firebase/authentication": "^6.1.0",
-    "@capacitor-firebase/crashlytics": "^6.1.0",
-    "@capacitor-firebase/performance": "^6.1.0",
+    "@capacitor-firebase/authentication": "^6.3.1",
+    "@capacitor-firebase/crashlytics": "^6.3.1",
+    "@capacitor-firebase/performance": "^6.3.1",
     "@capacitor/android": "^6.0.0",
     "@capacitor/app": "^6.0.0",
     "@capacitor/clipboard": "^6.0.0",
diff --git a/yarn.lock b/yarn.lock
index 8a043ef189..0e1e475f22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2048,41 +2048,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@capacitor-firebase/authentication@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "@capacitor-firebase/authentication@npm:6.1.0"
+"@capacitor-firebase/authentication@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@capacitor-firebase/authentication@npm:6.3.1"
   peerDependencies:
     "@capacitor/core": ^6.0.0
-    firebase: ^10.9.0
+    firebase: ^10.9.0 || ^11.0.0
   peerDependenciesMeta:
     firebase:
       optional: true
-  checksum: c70c82576c46333d8d56c03dbe51ceab798cddd7974dbc2aa0f6e287059deea245d17be6343302096a09bd91d8e13b0bf8d6e8417b65ecb86e62573674492df0
+  checksum: 148200081ff5100e992205a19d9940e155c32e92a428405eb490e04b009f56ac364fc1c606e0ce1c6aec35003701fbff0022dd6a3057ecb3a8fbe16cacaf4bb6
   languageName: node
   linkType: hard
 
-"@capacitor-firebase/crashlytics@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "@capacitor-firebase/crashlytics@npm:6.1.0"
+"@capacitor-firebase/crashlytics@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@capacitor-firebase/crashlytics@npm:6.3.1"
   peerDependencies:
     "@capacitor/core": ^6.0.0
   peerDependenciesMeta:
     firebase:
       optional: true
-  checksum: 9d20b204545e7bb6fed9b858270342634bd8772c84b516ba467d1a6b13a870edcdc1048def10c50f2edebd7fd0c896a2f7728176594cda670d807ed0b5e0f045
+  checksum: b52dc7a42d2f961aa47b30b8918038fa9ae370308240e52f3b78f2d125b3318a7eed34aa845aa98470daf826878b62c8233d8dac47e33d6fcb7c89ea59201914
   languageName: node
   linkType: hard
 
-"@capacitor-firebase/performance@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "@capacitor-firebase/performance@npm:6.1.0"
+"@capacitor-firebase/performance@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "@capacitor-firebase/performance@npm:6.3.1"
   peerDependencies:
     "@capacitor/core": ^6.0.0
-    firebase: ^10.9.0
+    firebase: ^10.9.0 || ^11.0.0
   peerDependenciesMeta:
     firebase:
       optional: true
-  checksum: 8aa094e6cece67ed8101cc0d78b2c9a0f3aa9f027de765095963ad95604be4bda70155573a8b8ef190ae571c878ae3fe3f63c688a56268f79840faddd16acaac
+  checksum: 25b4da6e44db02520bfa9f0d89b1428c0efa275e1a270f9b567513e469e9f2ce8157c1c9ba70d8c83b21b462aaecadea1dec807f84ec036cb59be66963284a63
   languageName: node
   linkType: hard
 
@@ -15100,9 +15100,9 @@ __metadata:
     "@angular/platform-browser-dynamic": ~17.2.2
     "@angular/router": ~17.2.2
     "@capacitor-community/file-opener": ^6.0.0
-    "@capacitor-firebase/authentication": ^6.1.0
-    "@capacitor-firebase/crashlytics": ^6.1.0
-    "@capacitor-firebase/performance": ^6.1.0
+    "@capacitor-firebase/authentication": ^6.3.1
+    "@capacitor-firebase/crashlytics": ^6.3.1
+    "@capacitor-firebase/performance": ^6.3.1
     "@capacitor/android": ^6.0.0
     "@capacitor/app": ^6.0.0
     "@capacitor/cli": ^6.0.0

From 81c9d9a5264e45cdc69a00c0619ef5c974605469 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 16 Dec 2024 17:30:42 -0800
Subject: [PATCH 07/23] chore: code tidying

---
 src/app/deployment-features.module.ts         |  2 +-
 src/app/shared/services/auth/auth.service.ts  | 43 ++++++++++++++-----
 .../services/auth/providers/base.auth.ts      |  2 +
 .../services/auth/providers/firebase.auth.ts  |  7 +--
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/app/deployment-features.module.ts b/src/app/deployment-features.module.ts
index 1353224e7b..8c12edc419 100644
--- a/src/app/deployment-features.module.ts
+++ b/src/app/deployment-features.module.ts
@@ -15,5 +15,5 @@ import { AuthModule } from "./shared/services/auth/auth.module";
  *
  * This is a feature marked for future implementation
  */
-@NgModule({ imports: [AnalyticsModule, NavStackModule, AuthModule] })
+@NgModule({ imports: [AuthModule, AnalyticsModule, NavStackModule] })
 export class DeploymentFeaturesModule {}
diff --git a/src/app/shared/services/auth/auth.service.ts b/src/app/shared/services/auth/auth.service.ts
index 7b63603342..1a803cc934 100644
--- a/src/app/shared/services/auth/auth.service.ts
+++ b/src/app/shared/services/auth/auth.service.ts
@@ -6,15 +6,14 @@ import { AuthProviderBase } from "./providers/base.auth";
 import { AsyncServiceBase } from "../asyncService.base";
 import { getAuthProvider } from "./providers";
 import { IAuthUser } from "./types";
+import { filter, firstValueFrom, tap } from "rxjs";
+import { TemplateService } from "../../components/template/services/template.service";
 import { toObservable } from "@angular/core/rxjs-interop";
-import { filter, firstValueFrom } from "rxjs";
 
 @Injectable({
   providedIn: "root",
 })
 export class AuthService extends AsyncServiceBase {
-  public authUser = signal<IAuthUser | null>(null);
-
   /** Auth provider used */
   private provider: AuthProviderBase;
 
@@ -22,27 +21,51 @@ export class AuthService extends AsyncServiceBase {
     private templateActionRegistry: TemplateActionRegistry,
     private localStorageService: LocalStorageService,
     private deploymentService: DeploymentService,
-    private injector: Injector
+    private injector: Injector,
+    private templateService: TemplateService
   ) {
     super("Auth");
-    this.provider = getAuthProvider(this.deploymentService.config.auth?.provider);
+    this.provider = getAuthProvider(this.config.provider);
     this.registerInitFunction(this.initialise);
     effect(async () => {
       const authUser = this.provider.authUser();
-      console.log("[Auth User]", authUser);
       this.addStorageEntry(authUser);
     });
   }
 
-  /** Return a promise that resolves only after a signed in user defined */
-  public async waitForUserSignedIn() {
-    const authUser$ = toObservable(this.authUser);
-    return firstValueFrom(authUser$.pipe(filter((value: IAuthUser | null) => !!value)));
+  private get config() {
+    return this.deploymentService.config.auth || {};
   }
 
   private async initialise() {
     await this.provider.initialise(this.injector);
     this.registerTemplateActionHandlers();
+    if (this.config.enforceLogin) {
+      // NOTE - Do not await the enforce login to allow other services to initialise in background
+      this.enforceLogin();
+    }
+  }
+
+  private async enforceLogin() {
+    // If user already logged in simply return. If providers auto-login during then waiting to verify
+    // should be included during the provide init method
+    if (this.provider.authUser()) {
+      return;
+    }
+    const { signInTemplate } = this.deploymentService.config.app_config.APP_AUTHENTICATION_DEFAULTS;
+    const { modal } = await this.templateService.runStandaloneTemplate(signInTemplate, {
+      showCloseButton: false,
+      waitForDismiss: false,
+    });
+    // wait for user signal to update with a signed in user before dismissing modal
+    const authUser$ = toObservable(this.provider.authUser, { injector: this.injector });
+    await firstValueFrom(
+      authUser$.pipe(
+        tap((authUser) => console.log("auth user", authUser)),
+        filter((value: IAuthUser | null) => !!value)
+      )
+    );
+    await modal.dismiss();
   }
 
   private registerTemplateActionHandlers() {
diff --git a/src/app/shared/services/auth/providers/base.auth.ts b/src/app/shared/services/auth/providers/base.auth.ts
index 1751c0333f..2eea05c2d7 100644
--- a/src/app/shared/services/auth/providers/base.auth.ts
+++ b/src/app/shared/services/auth/providers/base.auth.ts
@@ -7,10 +7,12 @@ export class AuthProviderBase {
   public async initialise(injector: Injector) {}
 
   public async signInWithGoogle() {
+    throw new Error("Google sign in not enabled");
     return this.authUser();
   }
 
   public async signOut() {
+    this.authUser.set(undefined);
     return this.authUser();
   }
 }
diff --git a/src/app/shared/services/auth/providers/firebase.auth.ts b/src/app/shared/services/auth/providers/firebase.auth.ts
index b7d67c913f..6001373357 100644
--- a/src/app/shared/services/auth/providers/firebase.auth.ts
+++ b/src/app/shared/services/auth/providers/firebase.auth.ts
@@ -1,5 +1,6 @@
 import { Injectable, Injector } from "@angular/core";
-import { FirebaseAuthentication, User } from "@capacitor-firebase/authentication";
+import { FirebaseAuthentication } from "@capacitor-firebase/authentication";
+import { getAuth } from "firebase/auth";
 import { FirebaseService } from "../../firebase/firebase.service";
 import { AuthProviderBase } from "./base.auth";
 
@@ -14,8 +15,8 @@ export class FirebaseAuthProvider extends AuthProviderBase {
       throw new Error("[Firebase Auth] app not configured");
     }
     this.addAuthListeners();
-    // ensure any previous signed in user is loaded
-    await FirebaseAuthentication.getCurrentUser();
+    // use firebase authStateReady to ensure any previously logged in user is available
+    await getAuth().authStateReady();
   }
 
   public async signInWithGoogle() {

From c87078731251a66f00347074744dbc6489796b1e Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Mon, 16 Dec 2024 18:50:35 -0800
Subject: [PATCH 08/23] chore: add placeholder supabase auth provider

---
 src/app/shared/services/auth/providers/supabase.auth.ts | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/app/shared/services/auth/providers/supabase.auth.ts

diff --git a/src/app/shared/services/auth/providers/supabase.auth.ts b/src/app/shared/services/auth/providers/supabase.auth.ts
new file mode 100644
index 0000000000..cfedac6236
--- /dev/null
+++ b/src/app/shared/services/auth/providers/supabase.auth.ts
@@ -0,0 +1,3 @@
+import { AuthProviderBase } from "./base.auth";
+
+export class SupabaseAuthProvider extends AuthProviderBase {}

From a2674461fbb4c3f8d6a9def812587154db18ae58 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Tue, 17 Dec 2024 22:00:59 -0800
Subject: [PATCH 09/23] fix: data items nested templates

---
 .../data-items/data-items.service.ts          |  2 +-
 .../services/instance/template-row.service.ts |  7 ++--
 .../components/template/template-component.ts | 28 +++++++++----
 .../template-container.component.html         | 42 +++++++++----------
 .../template/template-container.component.ts  |  7 +---
 5 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/src/app/shared/components/template/components/data-items/data-items.service.ts b/src/app/shared/components/template/components/data-items/data-items.service.ts
index ffa7138976..7fc03406ca 100644
--- a/src/app/shared/components/template/components/data-items/data-items.service.ts
+++ b/src/app/shared/components/template/components/data-items/data-items.service.ts
@@ -117,6 +117,6 @@ export class DataItemsService {
     // HACK - still want to be able to use localContext from parent rows so copy to child processor
     processor.templateRowMap = JSON.parse(JSON.stringify(templateRowMap));
     await processor.processContainerTemplateRows();
-    return processor.renderedRows;
+    return processor.renderedRows();
   }
 }
diff --git a/src/app/shared/components/template/services/instance/template-row.service.ts b/src/app/shared/components/template/services/instance/template-row.service.ts
index 460c1ab0ad..b91059efa3 100644
--- a/src/app/shared/components/template/services/instance/template-row.service.ts
+++ b/src/app/shared/components/template/services/instance/template-row.service.ts
@@ -1,4 +1,4 @@
-import { Injector } from "@angular/core";
+import { Injector, signal } from "@angular/core";
 import { FlowTypes } from "src/app/shared/model";
 import { getGlobalService } from "src/app/shared/services/global.service";
 import { SyncServiceBase } from "src/app/shared/services/syncService.base";
@@ -9,6 +9,7 @@ import { mergeTemplateRows } from "../../utils/template-utils";
 import { TemplateFieldService } from "../template-field.service";
 import { TemplateTranslateService } from "../template-translate.service";
 import { TemplateVariablesService } from "../template-variables.service";
+import { isEqual } from "packages/shared/src/utils/object-utils";
 
 /** Logging Toggle - rewrite default functions to enable or disable inline logs */
 let SHOW_DEBUG_LOGS = false;
@@ -34,7 +35,7 @@ export class TemplateRowService extends SyncServiceBase {
   /** List of overrides set by parent templates for access during parent processing */
   /** Hashmap of all rows keyed by nested row name (e.g. contentBox1.row1.title)  */
   public templateRowMap: ITemplateRowMap = {};
-  public renderedRows: FlowTypes.TemplateRow[]; // rows processed and filtered by condition
+  public renderedRows = signal<FlowTypes.TemplateRow[]>([], { equal: isEqual }); // rows processed and filtered by condition
 
   constructor(
     private injector: Injector,
@@ -234,7 +235,7 @@ export class TemplateRowService extends SyncServiceBase {
     const renderedRows = this.filterConditionalTemplateRows(
       JSON.parse(JSON.stringify(processedRows))
     );
-    this.renderedRows = renderedRows;
+    this.renderedRows.set(renderedRows);
     log("[Rows Processed]", logName, { rows, processedRows, renderedRows });
     return processedRows;
   }
diff --git a/src/app/shared/components/template/template-component.ts b/src/app/shared/components/template/template-component.ts
index 821ea072a4..2c0fa6d6e4 100644
--- a/src/app/shared/components/template/template-component.ts
+++ b/src/app/shared/components/template/template-component.ts
@@ -71,7 +71,8 @@ export class TemplateComponent implements OnInit, AfterContentInit, ITemplateRow
     this._row = row;
     if (this.componentRef) {
       log("[Component Update]", row.name, row);
-      this.componentRef.instance.row = row;
+      this.componentRef.setInput("row", row);
+      this.hackForceReprocessNestedTemplate();
     } else {
       log("[Component Create]", row.name, row);
     }
@@ -130,7 +131,7 @@ export class TemplateComponent implements OnInit, AfterContentInit, ITemplateRow
     // Depending on row type, either prepare instantiation of a nested template or a display component
     switch (row.type) {
       case "template":
-        return this.renderTemplateComponent(TemplateContainerComponent, row);
+        return this.renderTemplateComponent(row);
       default:
         const displayComponent = TEMPLATE_COMPONENT_MAPPING[row.type];
         if (displayComponent) {
@@ -145,15 +146,12 @@ export class TemplateComponent implements OnInit, AfterContentInit, ITemplateRow
   }
 
   /** Create and render a nested template component */
-  private renderTemplateComponent(
-    component: typeof TemplateContainerComponent,
-    row: FlowTypes.TemplateRow
-  ) {
+  private renderTemplateComponent(row: FlowTypes.TemplateRow) {
     const viewContainerRef = this.tmplComponentHost.viewContainerRef;
-    const componentRef = viewContainerRef.createComponent(component);
+    const componentRef = viewContainerRef.createComponent(TemplateContainerComponent);
     // assign input variables (note template name taken from the row's value column)
     componentRef.instance.parent = this.parent;
-    componentRef.instance.row = row;
+    componentRef.setInput("row", row);
     componentRef.instance.name = row.name;
     // assign templatename input using signal
     componentRef.setInput("templatename", row.value);
@@ -169,4 +167,18 @@ export class TemplateComponent implements OnInit, AfterContentInit, ITemplateRow
     componentRef.instance.row = row;
     this.componentRef = componentRef;
   }
+
+  /**
+   * If the current template is generated as a child of data_items then updates to
+   * parent variables will not propagate down. Force reprocessing to workaround
+   * See issue https://github.com/IDEMSInternational/open-app-builder/issues/2636
+   */
+  private hackForceReprocessNestedTemplate() {
+    if (this._row.type === "template") {
+      const componentRef = this.componentRef as ComponentRef<TemplateContainerComponent>;
+      if (componentRef.instance.parent) {
+        componentRef.instance.templateRowService.processContainerTemplateRows();
+      }
+    }
+  }
 }
diff --git a/src/app/shared/components/template/template-container.component.html b/src/app/shared/components/template/template-container.component.html
index 8e6f73efc2..c6935cf717 100644
--- a/src/app/shared/components/template/template-container.component.html
+++ b/src/app/shared/components/template/template-container.component.html
@@ -5,31 +5,27 @@
     <div>name: {{ name || "(undefined)" }}</div>
   </div>
   <!-- Template Component-->
-  <plh-template-component
-    *ngFor="
-      let row of templateRowService.renderedRows | filterDisplayComponent;
-      trackBy: trackByRow
-    "
-    class="row"
-    [row]="row"
-    [parent]="this"
-    [attr.data-name]="row.name"
-    [attr.data-type]="row.type"
-    data-debug-mode
-  ></plh-template-component>
+  @for (row of templateRowService.renderedRows() | filterDisplayComponent; track row._nested_name) {
+    <plh-template-component
+      class="row"
+      [row]="row"
+      [parent]="this"
+      [attr.data-name]="row.name"
+      [attr.data-type]="row.type"
+      data-debug-mode
+    ></plh-template-component>
+  }
 </ng-template>
 
 <!-- Normal Mode -->
 <ng-template #noDebugger>
-  <plh-template-component
-    *ngFor="
-      let row of templateRowService.renderedRows | filterDisplayComponent;
-      trackBy: trackByRow
-    "
-    class="row"
-    [row]="row"
-    [parent]="this"
-    [attr.data-name]="row.name"
-    [attr.data-type]="row.type"
-  ></plh-template-component>
+  @for (row of templateRowService.renderedRows() | filterDisplayComponent; track row._nested_name) {
+    <plh-template-component
+      class="row"
+      [row]="row"
+      [parent]="this"
+      [attr.data-name]="row.name"
+      [attr.data-type]="row.type"
+    ></plh-template-component>
+  }
 </ng-template>
diff --git a/src/app/shared/components/template/template-container.component.ts b/src/app/shared/components/template/template-container.component.ts
index 410fe7dc04..809a5b9e91 100644
--- a/src/app/shared/components/template/template-container.component.ts
+++ b/src/app/shared/components/template/template-container.component.ts
@@ -146,15 +146,12 @@ export class TemplateContainerComponent implements OnInit, OnDestroy {
     if (shouldProcess) {
       if (full) {
         console.log("[Force Reload]", this.name);
-        // ensure angular destroys previous row components before rendering new
-        // (note - will cause short content flicker)
-        this.templateRowService.renderedRows = [];
         // allow time for other pending ops to finish
         await _wait(50);
         await this.renderTemplate(this.templatename());
       } else {
         await this.templateRowService.processRowUpdates();
-        console.log("[Force Reprocess]", this.name, this.templateRowService.renderedRows);
+        console.log("[Force Reprocess]", this.name, this.templateRowService.renderedRows());
         for (const child of Object.values(this.children || {})) {
           await child.forceRerender(full, shouldProcess);
         }
@@ -203,7 +200,7 @@ export class TemplateContainerComponent implements OnInit, OnDestroy {
     log("[Template] Rendered", this.name, {
       template,
       ctxt: { ...this },
-      renderedRows: { ...this.templateRowService.renderedRows },
+      renderedRows: { ...this.templateRowService.renderedRows() },
       rowMap: this.templateRowService.templateRowMap,
     });
     // if a parent exists also provide parent reference to this as a child

From ebd74a7630fe6bcb3f79352395dc6ca843938f84 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 18 Dec 2024 10:09:05 +0300
Subject: [PATCH 10/23] feat: handle pop up variant

---
 .../template/components/layout/popup/popup.component.html      | 1 +
 .../template/components/layout/popup/popup.component.ts        | 2 ++
 .../components/template/services/template-nav.service.ts       | 3 +++
 3 files changed, 6 insertions(+)

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 31958a5cfa..35b028640b 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
@@ -2,6 +2,7 @@
   class="popup-backdrop"
   (click)="dismissOnBackdrop($event)"
   [attr.data-fullscreen]="props.fullscreen ? true : null"
+  [attr.data-variant]="props.variant ? props.variant : null"
 >
   <div class="popup-container">
     <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
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 be72440925..aba38cab27 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
@@ -59,4 +59,6 @@ export interface ITemplatePopupComponentProps extends IContainerProps {
   fullscreen?: boolean;
   /** Pass text only to render that text in a popup, bypassing any templates */
   popupText?: string;
+  /** Template Parameter: "variant". Defines style and use of pop up */
+  variant?: string;
 }
diff --git a/src/app/shared/components/template/services/template-nav.service.ts b/src/app/shared/components/template/services/template-nav.service.ts
index 63307406a3..f909c8fb7e 100644
--- a/src/app/shared/components/template/services/template-nav.service.ts
+++ b/src/app/shared/components/template/services/template-nav.service.ts
@@ -212,6 +212,7 @@ export class TemplateNavService extends SyncServiceBase {
     container?: TemplateContainerComponent
   ) {
     const templatename = action.args[0];
+    const variant = action.params.variant;
     // if triggered outside templating system (e.g. via notification action) still enable
     // popup creation and dismiss on nav changes
     if (!container) {
@@ -226,6 +227,7 @@ export class TemplateNavService extends SyncServiceBase {
       popup_child: templatename,
       popup_parent: name,
       popup_parent_triggered_by: action._triggeredBy?.name || null,
+      popup_variant: variant,
     };
     this.router.navigate([], { queryParams, replaceUrl: true, queryParamsHandling: "merge" });
   }
@@ -384,4 +386,5 @@ export interface INavQueryParams {
   popup_child?: string; //
   popup_parent?: string;
   popup_parent_triggered_by?: string; //
+  popup_variant?: string;
 }

From 1a6fcc78b25c66de2c689734525c974f8ece84d5 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 18 Dec 2024 10:09:19 +0300
Subject: [PATCH 11/23] styling: init

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 330df60667..4f444ca537 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -723,4 +723,11 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
+
+  // Pop Up
+  .popup-backdrop {
+    &[data-variant~="plh_completion"] {
+      border: 1px solid red !important;
+    }
+  }
 }

From 127c29f2b39ad15f3610da5cc4af986bb48e4c5b Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Wed, 18 Dec 2024 12:16:08 +0000
Subject: [PATCH 12/23] chore: handle pop-up variant

---
 .../template/services/template-nav.service.ts | 25 ++++++++++++-------
 src/theme/themes/plh_kids_kw/_overrides.scss  |  6 +++++
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/components/template/services/template-nav.service.ts b/src/app/shared/components/template/services/template-nav.service.ts
index f909c8fb7e..0b509786d5 100644
--- a/src/app/shared/components/template/services/template-nav.service.ts
+++ b/src/app/shared/components/template/services/template-nav.service.ts
@@ -212,12 +212,12 @@ export class TemplateNavService extends SyncServiceBase {
     container?: TemplateContainerComponent
   ) {
     const templatename = action.args[0];
-    const variant = action.params.variant;
+    const variant = action.params?.variant;
     // if triggered outside templating system (e.g. via notification action) still enable
     // popup creation and dismiss on nav changes
     if (!container) {
       this.router.events.pipe(first()).subscribe(() => this.dismissPopup(templatename));
-      return this.createPopupAndWaitForDismiss(templatename, null);
+      return this.createPopupAndWaitForDismiss(templatename, null, variant);
     }
 
     const { name } = container;
@@ -236,7 +236,7 @@ export class TemplateNavService extends SyncServiceBase {
     params: INavQueryParams,
     container: TemplateContainerComponent
   ) {
-    const { popup_child, nav_child_emit, popup_parent_triggered_by } = params;
+    const { popup_child, nav_child_emit, popup_parent_triggered_by, popup_variant } = params;
     const { template } = container;
     const existingPopup = this.openPopupsByName[popup_child];
     log("[Popup] - parent", { params, parent: container.name });
@@ -276,15 +276,16 @@ export class TemplateNavService extends SyncServiceBase {
     }
     // If no popup already exists, create, present, and react to dismiss
     else {
-      await this.createPopupAndWaitForDismiss(popup_child, container);
+      await this.createPopupAndWaitForDismiss(popup_child, container, popup_variant);
     }
   }
 
   private async createPopupAndWaitForDismiss(
     popup_child: string,
-    container: TemplateContainerComponent
+    container: TemplateContainerComponent,
+    variant: string
   ) {
-    const childTemplateModal = await this.createChildPopupModal(popup_child, container);
+    const childTemplateModal = await this.createChildPopupModal(popup_child, container, variant);
     if (childTemplateModal) {
       await childTemplateModal.present();
       const { data } = await childTemplateModal.onDidDismiss();
@@ -298,6 +299,7 @@ export class TemplateNavService extends SyncServiceBase {
         popup_child: null,
         popup_parent: null,
         popup_parent_triggered_by: null,
+        popup_variant: null,
       };
       this.router.navigate([], { queryParams, replaceUrl: true, queryParamsHandling: "merge" });
     }
@@ -316,16 +318,20 @@ export class TemplateNavService extends SyncServiceBase {
     container: TemplateContainerComponent
   ) {
     // Hide any open popup that was trigggered on a previous page prior to navigation (unless new popup)
-    const { popup_child } = params;
+    const { popup_child, popup_variant } = params;
     const existingPopup = this.openPopupsByName[popup_child];
     if (existingPopup) {
       existingPopup.modal.classList.add("hide-popup-on-template");
     } else {
-      this.createPopupAndWaitForDismiss(params.popup_child, container);
+      this.createPopupAndWaitForDismiss(params.popup_child, container, popup_variant);
     }
   }
 
-  private async createChildPopupModal(popup_child: string, container: TemplateContainerComponent) {
+  private async createChildPopupModal(
+    popup_child: string,
+    container: TemplateContainerComponent,
+    variant?: string
+  ) {
     const childContainerProps: ITemplatePopupComponentProps = {
       // make the popup share the same name as the container so that nav events return to parent container page
       name: popup_child,
@@ -333,6 +339,7 @@ export class TemplateNavService extends SyncServiceBase {
       parent: container,
       showCloseButton: true,
       dismissOnEmit: true,
+      variant,
     };
     // If trying to recreate a popup that already exists simply mark as visible
     const existingPopup = this.openPopupsByName[popup_child];
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index 4f444ca537..b9d6f25bdc 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -728,6 +728,12 @@ body[data-theme="plh_kids_kw"] {
   .popup-backdrop {
     &[data-variant~="plh_completion"] {
       border: 1px solid red !important;
+
+      .popup-container {
+        .popup-content {
+          background-color: red;
+        }
+      }
     }
   }
 }

From 656080e9f1a62df0f56dfe1e919b3e87de91ab8b Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 19 Dec 2024 12:13:17 +0300
Subject: [PATCH 13/23] styling: completion pop-up

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 41 ++++++++++++++++++--
 1 file changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index b9d6f25bdc..d55684fc3c 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -727,11 +727,46 @@ body[data-theme="plh_kids_kw"] {
   // Pop Up
   .popup-backdrop {
     &[data-variant~="plh_completion"] {
-      border: 1px solid red !important;
-
       .popup-container {
+        min-height: 70vh;
+        padding: 0 1.4rem;
+        margin-top: -28px;
         .popup-content {
-          background-color: red;
+          background: linear-gradient(
+            310deg,
+            var(--color-secondary-blue-50),
+            var(--color-secondary-blue-80)
+          );
+          border-radius: 40px;
+          border: none !important;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          height: 100%;
+        }
+        plh-template-container {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: var(--ion-font-family);
+        }
+        plh-tmpl-text p,
+        plh-tmpl-text h1,
+        plh-tmpl-title p,
+        plh-tmpl-title h1 {
+          text-align: center;
+          color: var(--color-surface-white);
+        }
+        plh-tmpl-title {
+          div.title-wrapper {
+            align-items: center;
+            justify-content: center;
+          }
+        }
+        .close-button {
+          border: 0.8px solid var(--color-secondary-blue-80);
+          color: var(--color-secondary-blue-50);
         }
       }
     }

From d5fe6c086d2ab2eba22220b839662152b25d942f Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Thu, 19 Dec 2024 16:22:35 +0000
Subject: [PATCH 14/23] chore: code tidying etc

---
 packages/data-models/appConfig.ts             | 36 +++++++++++++++----
 src/app/app.component.html                    | 20 +++++------
 src/app/app.component.ts                      |  4 +--
 .../components/header/header.component.html   |  2 +-
 .../components/header/header.component.ts     | 13 ++++---
 .../services/app-config/app-config.service.ts | 13 -------
 6 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts
index 7987cc3b8c..ff0f282dfb 100644
--- a/packages/data-models/appConfig.ts
+++ b/packages/data-models/appConfig.ts
@@ -84,16 +84,40 @@ const APP_ROUTE_DEFAULTS = {
 };
 
 export type IHeaderFooterBackgroundOptions = "primary" | "secondary" | "none";
+/** The "compact" variant reduces the header height and removes the title */
 export type IHeaderVariantOptions = "default" | "compact";
 
-const APP_HEADER_DEFAULTS = {
+interface IAppConfigHeader {
+  back_button: {
+    hidden: boolean;
+  };
+  collapse: boolean;
+  colour: IHeaderFooterBackgroundOptions;
+  hidden: boolean;
+  menu_button: {
+    hidden: boolean;
+  };
+  template: string | null;
+  title: string;
+  variant: IHeaderVariantOptions;
+  should_show_menu_button: (location: Location) => boolean;
+  should_show_back_button: (location: Location) => boolean;
+  should_minimize_app_on_back: (location: Location) => boolean;
+}
+
+const APP_HEADER_DEFAULTS: IAppConfigHeader = {
+  back_button: {
+    hidden: false,
+  },
   collapse: false,
-  colour: "primary" as IHeaderFooterBackgroundOptions,
-  show: true,
-  template: null as string | null,
+  colour: "primary",
+  hidden: false,
+  menu_button: {
+    hidden: false,
+  },
+  template: null,
   title: "App",
-  // The "compact" variant reduces the header height and removes the title
-  variant: "default" as IHeaderVariantOptions,
+  variant: "default",
   // default only show menu button on home screen
   should_show_menu_button: (location: Location) =>
     activeRoute(location) === APP_ROUTE_DEFAULTS.home_route,
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6613d6396d..2ccfeedfb5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,13 +5,13 @@
     [dir]="templateTranslateService.languageDirection()"
   >
     <!-- Left Sidebar -->
-    @if (sideMenuDefaults().enabled) {
+    @if (sideMenuConfig().enabled) {
       <ion-menu #menu side="start" menuId="main-side-menu" contentId="main-content">
         <ion-header>
           <ion-toolbar color="primary">
-            <ion-title>{{ sideMenuDefaults().title }}</ion-title>
+            <ion-title>{{ sideMenuConfig().title }}</ion-title>
             <div class="app-version" slot="end">
-              @if (sideMenuDefaults().should_show_version) {
+              @if (sideMenuConfig().should_show_version) {
                 @if (deploymentConfig._content_version; as CONTENT_VERSION) {
                   <span>
                     <abbr [title]="deploymentConfig._app_builder_version" tabindex="1">
@@ -22,7 +22,7 @@
                   <span>{{ deploymentConfig._app_builder_version }} </span>
                 }
               }
-              @if (sideMenuDefaults().should_show_deployment_name) {
+              @if (sideMenuConfig().should_show_deployment_name) {
                 <span style="margin-left: 16px">({{ deploymentConfig.name }})</span>
               }
             </div>
@@ -30,7 +30,7 @@
         </ion-header>
         <ion-content>
           <plh-template-container
-            [templatename]="sideMenuDefaults().template_name"
+            [templatename]="sideMenuConfig().template_name"
             (click)="menu.close()"
             [ignoreQueryParamChanges]="true"
           ></plh-template-container>
@@ -41,15 +41,15 @@
     <!-- Main content: shows in split-pane when sidebar route active -->
     <ion-split-pane when="lg" contentId="main" [disabled]="!sidebarRouter.isActivated">
       <div style="display: flex; flex-direction: column; height: 100%; width: 100%" id="main">
-        @if (headerConfig().show) {
-          <plh-main-header></plh-main-header>
-        }
+        <plh-main-header
+          [style.display]="headerConfig().hidden ? 'none' : 'block'"
+        ></plh-main-header>
         <div class="route-container" [ngStyle]="routeContainerStyle()">
           <ion-router-outlet id="main-content"></ion-router-outlet>
         </div>
-        @if (footerDefaults().templateName; as footerTemplateName) {
+        @if (footerConfig().templateName; as footerTemplateName) {
           <ion-footer>
-            <ion-toolbar [color]="footerDefaults().background">
+            <ion-toolbar [color]="footerConfig().background">
               <plh-template-container
                 [templatename]="footerTemplateName"
                 [ignoreQueryParamChanges]="true"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 23a08c6937..aa5e801801 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -52,8 +52,8 @@ import { TemplateMetadataService } from "./shared/components/template/services/t
 })
 export class AppComponent {
   headerConfig = computed(() => this.appConfigService.appConfig().APP_HEADER_DEFAULTS);
-  footerDefaults = computed(() => this.appConfigService.appConfig().APP_FOOTER_DEFAULTS);
-  sideMenuDefaults = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
+  footerConfig = computed(() => this.appConfigService.appConfig().APP_FOOTER_DEFAULTS);
+  sideMenuConfig = computed(() => this.appConfigService.appConfig().APP_SIDEMENU_DEFAULTS);
   layoutConfig = computed(() => this.appConfigService.appConfig().LAYOUT);
 
   public routeContainerStyle = computed(() => {
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index 992fa936b6..6c03f2b83a 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -19,7 +19,7 @@
         [templatename]="headerConfig().template"
         [ignoreQueryParamChanges]="true"
       ></plh-template-container>
-    } @else if (!(headerConfig().variant === "compact")) {
+    } @else if (headerConfig().title && headerConfig().variant !== "compact") {
       <ion-title style="text-align: center" routerLink="/">
         <span>{{ headerConfig().title }}</span>
       </ion-title>
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
index 62bc8a93f1..6d2717ca03 100644
--- a/src/app/shared/components/header/header.component.ts
+++ b/src/app/shared/components/header/header.component.ts
@@ -69,7 +69,6 @@ export class headerComponent implements OnInit, OnDestroy {
     );
     effect(
       () => {
-        const config = this.headerConfig();
         // when route changes handle side-effects
         const e = this.routeChanges();
         this.handleRouteChange();
@@ -102,9 +101,15 @@ export class headerComponent implements OnInit, OnDestroy {
 
   /** Determine whether to show back and menu buttons based on location */
   private handleRouteChange() {
-    const { should_show_back_button, should_show_menu_button } = this.headerConfig();
-    this.showBackButton.set(should_show_back_button(location));
-    this.showMenuButton.set(should_show_menu_button(location));
+    const { back_button, menu_button, should_show_back_button, should_show_menu_button } =
+      this.headerConfig();
+
+    // The explicit `hidden` property should override the function of location
+    // TODO: move functions to component code and out of app config, no use case for overriding them
+    const showBackButton = !back_button.hidden && should_show_back_button(location);
+    const showMenuButton = !menu_button.hidden && should_show_menu_button(location);
+    this.showBackButton.set(showBackButton);
+    this.showMenuButton.set(showMenuButton);
     this.marginTop.set(0);
   }
 
diff --git a/src/app/shared/services/app-config/app-config.service.ts b/src/app/shared/services/app-config/app-config.service.ts
index 334cf151a7..a97cd8f01e 100644
--- a/src/app/shared/services/app-config/app-config.service.ts
+++ b/src/app/shared/services/app-config/app-config.service.ts
@@ -100,25 +100,12 @@ export class AppConfigService extends SyncServiceBase {
       return;
     }
 
-    // some app config properties should be functions, but may be defined as boolean values,
-    // e.g. in template parameter_list to disable a certain property on that template
-    const functionKeys = ["should_show_back_button", "should_show_menu_button"];
-    functionKeys.forEach((key) => {
-      mergedConfig.APP_HEADER_DEFAULTS[key] = this.normaliseToFunction(
-        mergedConfig.APP_HEADER_DEFAULTS[key]
-      );
-    });
-
     // trigger change effects
     this.handleConfigSideEffects(overrides, mergedConfig);
     this.appConfig.set(mergedConfig);
     this.appConfig$.next(mergedConfig);
   }
 
-  private normaliseToFunction(value: any) {
-    return typeof value === "function" ? value : () => !!value;
-  }
-
   private handleConfigSideEffects(overrides: IAppConfigOverride = {}, config: IAppConfig) {
     if (overrides.APP_ROUTE_DEFAULTS) {
       updateRoutingDefaults(config.APP_ROUTE_DEFAULTS, this.router);

From 6ff0da832cee1518f9d4c2c6b5a90d2b1b7d9dcc Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Thu, 19 Dec 2024 13:20:37 -0800
Subject: [PATCH 15/23] fix: container recreate on template name change

Fix issue where changing the template name would not correctly process child template rows if deep nested
---
 .../components/data-items/data-items.utils.ts         |  2 +-
 .../shared/components/template/template-component.ts  | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/components/template/components/data-items/data-items.utils.ts b/src/app/shared/components/template/components/data-items/data-items.utils.ts
index 50dd55081c..d6c9d176f5 100644
--- a/src/app/shared/components/template/components/data-items/data-items.utils.ts
+++ b/src/app/shared/components/template/components/data-items/data-items.utils.ts
@@ -58,7 +58,7 @@ export function updateItemMeta(
     }
 
     // Apply recursively to ensure item children with nested rows (e.g. display groups) also inherit item context
-    if (r.rows) {
+    if (r.rows && r.type !== "data_items" && r.type !== "items") {
       r.rows = updateItemMeta(r.rows, itemData, dataListName);
     }
 
diff --git a/src/app/shared/components/template/template-component.ts b/src/app/shared/components/template/template-component.ts
index 2c0fa6d6e4..8ec4961ded 100644
--- a/src/app/shared/components/template/template-component.ts
+++ b/src/app/shared/components/template/template-component.ts
@@ -173,11 +173,18 @@ export class TemplateComponent implements OnInit, AfterContentInit, ITemplateRow
    * parent variables will not propagate down. Force reprocessing to workaround
    * See issue https://github.com/IDEMSInternational/open-app-builder/issues/2636
    */
-  private hackForceReprocessNestedTemplate() {
+  private async hackForceReprocessNestedTemplate() {
     if (this._row.type === "template") {
       const componentRef = this.componentRef as ComponentRef<TemplateContainerComponent>;
       if (componentRef.instance.parent) {
-        componentRef.instance.templateRowService.processContainerTemplateRows();
+        // HACK - if parent template changes name of nested child template instance fully
+        // recreate the template container
+        if ((componentRef.instance.templatename(), this._row.value)) {
+          this.componentRef.destroy();
+          this.renderTemplateComponent(this._row);
+          // TODO - test better ways to manage from container, confirming test cases from
+          // https://github.com/IDEMSInternational/open-app-builder/issues/2636
+        }
       }
     }
   }

From 2853297be0009f0c2d52726286de303bf6b62728 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Thu, 19 Dec 2024 16:31:09 -0800
Subject: [PATCH 16/23] refactor: signInTemplate

---
 packages/data-models/appConfig.ts        | 5 -----
 packages/data-models/deployment.model.ts | 2 ++
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts
index 3f3541c4ac..c49107f00a 100644
--- a/packages/data-models/appConfig.ts
+++ b/packages/data-models/appConfig.ts
@@ -132,10 +132,6 @@ const APP_SIDEMENU_DEFAULTS = {
   should_show_deployment_name: false,
 };
 
-const APP_AUTHENTICATION_DEFAULTS = {
-  signInTemplate: "sign_in",
-};
-
 type IAppLaunchAction = {
   type: "template_popup" | "tour_start";
   value: string;
@@ -196,7 +192,6 @@ const TASKS = {
 const APP_CONFIG = {
   APP_HEADER_DEFAULTS,
   APP_INITIALISATION_DEFAULTS,
-  APP_AUTHENTICATION_DEFAULTS,
   APP_LANGUAGES,
   APP_LANGUAGES_META,
   APP_ROUTE_DEFAULTS,
diff --git a/packages/data-models/deployment.model.ts b/packages/data-models/deployment.model.ts
index c37eebb9fb..566b81f3ed 100644
--- a/packages/data-models/deployment.model.ts
+++ b/packages/data-models/deployment.model.ts
@@ -42,6 +42,8 @@ export interface IDeploymentRuntimeConfig {
     provider?: "firebase" | "supabase";
     /** prevent user accessing app pages without being logged in */
     enforceLogin?: boolean;
+    /** template to display when enforceLogin enabled */
+    signInTemplate?: string;
   };
   /**
    * Specify if using firebase for auth and crashlytics.

From 71d66909bdc2f92d0b376f8a3a68063a3f9337b2 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Thu, 19 Dec 2024 16:41:52 -0800
Subject: [PATCH 17/23] refactor: enforce login config

---
 packages/data-models/appConfig.ts            | 7 +++++++
 packages/data-models/deployment.model.ts     | 6 ++----
 src/app/shared/services/auth/auth.service.ts | 9 ++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts
index c49107f00a..8601def177 100644
--- a/packages/data-models/appConfig.ts
+++ b/packages/data-models/appConfig.ts
@@ -132,6 +132,12 @@ const APP_SIDEMENU_DEFAULTS = {
   should_show_deployment_name: false,
 };
 
+/**
+ * @deprecated 0.18.0
+ * Use `deployment.auth` to configure auth
+ */
+const APP_AUTHENTICATION_DEFAULTS = {};
+
 type IAppLaunchAction = {
   type: "template_popup" | "tour_start";
   value: string;
@@ -192,6 +198,7 @@ const TASKS = {
 const APP_CONFIG = {
   APP_HEADER_DEFAULTS,
   APP_INITIALISATION_DEFAULTS,
+  APP_AUTHENTICATION_DEFAULTS,
   APP_LANGUAGES,
   APP_LANGUAGES_META,
   APP_ROUTE_DEFAULTS,
diff --git a/packages/data-models/deployment.model.ts b/packages/data-models/deployment.model.ts
index 566b81f3ed..776b3771ee 100644
--- a/packages/data-models/deployment.model.ts
+++ b/packages/data-models/deployment.model.ts
@@ -40,10 +40,8 @@ export interface IDeploymentRuntimeConfig {
   auth: {
     /** provider to use with authentication actions. actions will be disabled if no provider specified */
     provider?: "firebase" | "supabase";
-    /** prevent user accessing app pages without being logged in */
-    enforceLogin?: boolean;
-    /** template to display when enforceLogin enabled */
-    signInTemplate?: string;
+    /** prevent user accessing app pages without being logged in. Specified template will be shown until logged in */
+    enforceLoginTemplate?: string;
   };
   /**
    * Specify if using firebase for auth and crashlytics.
diff --git a/src/app/shared/services/auth/auth.service.ts b/src/app/shared/services/auth/auth.service.ts
index 1a803cc934..e76d98c529 100644
--- a/src/app/shared/services/auth/auth.service.ts
+++ b/src/app/shared/services/auth/auth.service.ts
@@ -40,20 +40,19 @@ export class AuthService extends AsyncServiceBase {
   private async initialise() {
     await this.provider.initialise(this.injector);
     this.registerTemplateActionHandlers();
-    if (this.config.enforceLogin) {
+    if (this.config.enforceLoginTemplate) {
       // NOTE - Do not await the enforce login to allow other services to initialise in background
-      this.enforceLogin();
+      this.enforceLogin(this.config.enforceLoginTemplate);
     }
   }
 
-  private async enforceLogin() {
+  private async enforceLogin(templateName: string) {
     // If user already logged in simply return. If providers auto-login during then waiting to verify
     // should be included during the provide init method
     if (this.provider.authUser()) {
       return;
     }
-    const { signInTemplate } = this.deploymentService.config.app_config.APP_AUTHENTICATION_DEFAULTS;
-    const { modal } = await this.templateService.runStandaloneTemplate(signInTemplate, {
+    const { modal } = await this.templateService.runStandaloneTemplate(templateName, {
       showCloseButton: false,
       waitForDismiss: false,
     });

From 6d29c12f6830712ee678021da50cb1d107e1915e Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Thu, 19 Dec 2024 17:47:35 -0800
Subject: [PATCH 18/23] feat: add support for combo_box child data_items

---
 .../combo-box-modal.component.html            |  2 +-
 .../combo-box-modal.component.ts              | 11 ++--
 .../combo-box/combo-box.component.ts          | 54 ++++++++++++-------
 .../data-items/data-items.service.ts          |  5 ++
 src/app/shared/utils/utils.ts                 |  1 -
 5 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.html b/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.html
index 397245aca7..6c6084e384 100644
--- a/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.html
+++ b/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.html
@@ -8,7 +8,7 @@
         <div
           class="container-radio"
           [class.checked-radio]="form.get('answer').value === radio.name"
-          *ngFor="let radio of valuesFromListAnswers"
+          *ngFor="let radio of answerOptions()"
         >
           <label>
             <input
diff --git a/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.ts b/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.ts
index ba1158cb2f..16b68c1bf3 100644
--- a/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.ts
+++ b/src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.ts
@@ -1,7 +1,6 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, input, Input, OnInit } from "@angular/core";
 import { FlowTypes } from "src/app/shared/model";
 import {
-  getAnswerListParamFromTemplateRow,
   getBooleanParamFromTemplateRow,
   getNumberParamFromTemplateRow,
   getStringParamFromTemplateRow,
@@ -16,8 +15,8 @@ import { ModalController } from "@ionic/angular";
   styleUrls: ["./combo-box-modal.component.scss"],
 })
 export class ComboBoxModalComponent implements OnInit {
+  public answerOptions = input.required<IAnswerListItem[]>();
   @Input() row: FlowTypes.TemplateRow;
-  @Input() template: FlowTypes.Template;
   @Input() selectedValue: string;
   @Input() customAnswerSelected: boolean;
   @Input() style: string;
@@ -29,7 +28,10 @@ export class ComboBoxModalComponent implements OnInit {
   inputPosition: boolean = false;
   maxLength: number = 30;
   placeholder: string = "";
-  constructor(private fb: FormBuilder, private modalController: ModalController) {}
+  constructor(
+    private fb: FormBuilder,
+    private modalController: ModalController
+  ) {}
 
   ngOnInit() {
     this.getParams();
@@ -37,7 +39,6 @@ export class ComboBoxModalComponent implements OnInit {
   }
 
   getParams() {
-    this.valuesFromListAnswers = getAnswerListParamFromTemplateRow(this.row, "answer_list", null);
     this.textTitle = getStringParamFromTemplateRow(this.row, "text", null);
     this.inputAllowed = getBooleanParamFromTemplateRow(this.row, "input_allowed", false);
     this.inputPosition =
diff --git a/src/app/shared/components/template/components/combo-box/combo-box.component.ts b/src/app/shared/components/template/components/combo-box/combo-box.component.ts
index 1054119771..48dbb5d97b 100644
--- a/src/app/shared/components/template/components/combo-box/combo-box.component.ts
+++ b/src/app/shared/components/template/components/combo-box/combo-box.component.ts
@@ -1,5 +1,4 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
-import { FlowTypes } from "../../../../model";
+import { Component, computed, OnDestroy, OnInit } from "@angular/core";
 import { ModalController } from "@ionic/angular";
 import { ComboBoxModalComponent } from "./combo-box-modal/combo-box-modal.component";
 import {
@@ -10,8 +9,9 @@ import {
 } from "src/app/shared/utils";
 import { TemplateBaseComponent } from "../base";
 import { ITemplateRowProps } from "../../models";
-import { TemplateService } from "../../services/template.service";
-import { ReplaySubject } from "rxjs";
+import { ReplaySubject, map, filter, switchMap } from "rxjs";
+import { DataItemsService } from "../data-items/data-items.service";
+import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 
 @Component({
   selector: "plh-combo-box",
@@ -22,17 +22,35 @@ export class TmplComboBoxComponent
   extends TemplateBaseComponent
   implements ITemplateRowProps, OnInit, OnDestroy
 {
-  @Input() template: FlowTypes.Template;
-  placeholder: string;
-  prioritisePlaceholder: boolean;
-  style: string;
-  text = "";
-  customAnswerSelected: boolean = false;
-  customAnswerText: string;
-  answerList: IAnswerListItem[];
+  public placeholder: string;
+  public prioritisePlaceholder: boolean;
+  private style: string;
+  public text = "";
+  private customAnswerSelected: boolean = false;
+  private customAnswerText: string;
   private componentDestroyed$ = new ReplaySubject(1);
 
-  constructor(private modalController: ModalController, private templateService: TemplateService) {
+  // HACK - allow combo_box to include data_items child row to define answer list
+  private dataItemRows = toSignal(
+    toObservable(this.rows).pipe(
+      map((rows) => rows.find((r) => r.type === "data_items")),
+      filter((row) => row !== undefined),
+      switchMap((row) => this.dataItemsService.getItemsObservable(row, this.parent.templateRowMap))
+    )
+  );
+
+  private answerOptions = computed(() => {
+    const dataItemRows = this.dataItemRows();
+    if (dataItemRows !== undefined) {
+      return (dataItemRows as IAnswerListItem[]) || [];
+    }
+    return getAnswerListParamFromTemplateRow(this.rowSignal(), "answer_list", []);
+  });
+
+  constructor(
+    private modalController: ModalController,
+    private dataItemsService: DataItemsService
+  ) {
     super();
   }
 
@@ -40,15 +58,16 @@ export class TmplComboBoxComponent
     this.getParams();
 
     this.customAnswerSelected =
-      this.answerList.length > 0 && this._row.value
-        ? !this.answerList.find((x) => x.name === this._row.value)
+      this.answerOptions().length > 0 && this._row.value
+        ? !this.answerOptions().find((x) => x.name === this._row.value)
         : false;
 
     this.text = "";
     if (this._row.value) {
       this.text = this.customAnswerSelected
         ? this.customAnswerText
-        : this.answerList.find((answerListItem) => answerListItem.name === this._row.value)?.text;
+        : this.answerOptions().find((answerListItem) => answerListItem.name === this._row.value)
+            ?.text;
     }
   }
 
@@ -60,7 +79,6 @@ export class TmplComboBoxComponent
       false
     );
     this.style = getStringParamFromTemplateRow(this._row, "style", "");
-    this.answerList = getAnswerListParamFromTemplateRow(this._row, "answer_list", []);
   }
 
   async openModal() {
@@ -68,8 +86,8 @@ export class TmplComboBoxComponent
       component: ComboBoxModalComponent,
       cssClass: "combo-box-modal",
       componentProps: {
+        answerOptions: this.answerOptions,
         row: this._row,
-        template: this.template,
         selectedValue: this.customAnswerSelected ? this.text : this._row.value,
         customAnswerSelected: this.customAnswerSelected,
         style: this.style,
diff --git a/src/app/shared/components/template/components/data-items/data-items.service.ts b/src/app/shared/components/template/components/data-items/data-items.service.ts
index ffa7138976..50b57b7e7e 100644
--- a/src/app/shared/components/template/components/data-items/data-items.service.ts
+++ b/src/app/shared/components/template/components/data-items/data-items.service.ts
@@ -45,6 +45,11 @@ export class DataItemsService {
                   const parsedItemList = await this.hackParseDataList(data);
                   const itemProcessor = new ItemProcessor(parsedItemList, parameter_list);
                   const { itemTemplateRows, itemData } = itemProcessor.process(rows);
+                  // if no child rows for data_items loop assume want back raw items
+                  if (rows.length === 0) {
+                    return itemData;
+                  }
+                  // otherwise process generated template rows
                   const itemRowsWithMeta = updateItemMeta(itemTemplateRows, itemData, dataListName);
                   const parsedItemRows = await this.hackProcessRows(
                     itemRowsWithMeta,
diff --git a/src/app/shared/utils/utils.ts b/src/app/shared/utils/utils.ts
index 2b2c9daf1c..cf854f96c0 100644
--- a/src/app/shared/utils/utils.ts
+++ b/src/app/shared/utils/utils.ts
@@ -223,7 +223,6 @@ export function getAnswerListParamFromTemplateRow(
   _default: IAnswerListItem[]
 ): IAnswerListItem[] {
   const params = row.parameter_list || {};
-  console.log(params[name]);
   return params.hasOwnProperty(name) ? parseAnswerList(params[name]) : _default;
 }
 

From 542673f4a41429a63f243a4e6af15b25c8c0b9c9 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Fri, 20 Dec 2024 12:42:47 +0000
Subject: [PATCH 19/23] fix: rtl language config is applied to app launch
 templates

---
 .../template/components/layout/popup/popup.component.html | 1 +
 .../template/components/layout/popup/popup.component.ts   | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

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 31958a5cfa..25858da930 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
@@ -2,6 +2,7 @@
   class="popup-backdrop"
   (click)="dismissOnBackdrop($event)"
   [attr.data-fullscreen]="props.fullscreen ? true : null"
+  [dir]="templateTranslateService.languageDirection()"
 >
   <div class="popup-container">
     <div (click)="dismiss()" class="close-button" fill="clear" *ngIf="props.showCloseButton">
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 be72440925..e1d1c807ef 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
@@ -2,6 +2,7 @@ import { Component, Input } from "@angular/core";
 import { ModalController } from "@ionic/angular";
 import { FlowTypes } from "../../../models";
 import { TemplateContainerComponent } from "../../../template-container.component";
+import { TemplateTranslateService } from "../../../services/template-translate.service";
 
 @Component({
   templateUrl: "./popup.component.html",
@@ -14,7 +15,12 @@ import { TemplateContainerComponent } from "../../../template-container.componen
 export class TemplatePopupComponent {
   @Input() props: ITemplatePopupComponentProps;
 
-  constructor(private modalCtrl: ModalController) {}
+  constructor(
+    private modalCtrl: ModalController,
+    // HACK: Since pop-ups can be launched outside of main app container (e.g. as part of launch actions),
+    // handle RTL language support directly in this component
+    public templateTranslateService: TemplateTranslateService
+  ) {}
 
   /**
    * When templates emit completed/uncompleted value from standalone popup close the popup

From 706ec320c2e79a5fd598ac4286fc9a01af8b89d4 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Fri, 20 Dec 2024 09:37:41 -0800
Subject: [PATCH 20/23] chore: review tidying

---
 .../template/components/data-items/data-items.utils.ts    | 1 +
 src/app/shared/components/template/template-component.ts  | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/components/template/components/data-items/data-items.utils.ts b/src/app/shared/components/template/components/data-items/data-items.utils.ts
index a8edeb05c9..d915d8f706 100644
--- a/src/app/shared/components/template/components/data-items/data-items.utils.ts
+++ b/src/app/shared/components/template/components/data-items/data-items.utils.ts
@@ -69,6 +69,7 @@ export function updateItemMeta(
     }
 
     // Apply recursively to ensure item children with nested rows (e.g. display groups) also inherit item context
+    // Do not override the item context for rows that create their own item lists (i.e. data_items and items)
     if (r.rows && r.type !== "data_items" && r.type !== "items") {
       r.rows = updateItemMeta(r.rows, itemData, dataListName);
     }
diff --git a/src/app/shared/components/template/template-component.ts b/src/app/shared/components/template/template-component.ts
index 8ec4961ded..50d6971cda 100644
--- a/src/app/shared/components/template/template-component.ts
+++ b/src/app/shared/components/template/template-component.ts
@@ -177,9 +177,11 @@ export class TemplateComponent implements OnInit, AfterContentInit, ITemplateRow
     if (this._row.type === "template") {
       const componentRef = this.componentRef as ComponentRef<TemplateContainerComponent>;
       if (componentRef.instance.parent) {
-        // HACK - if parent template changes name of nested child template instance fully
-        // recreate the template container
-        if ((componentRef.instance.templatename(), this._row.value)) {
+        // HACK - when a parent updates there may be cases when the updated variables need to be
+        // reflected in the child template (e.g. set_nested_variable contains parent local variable)
+        // As it is not currently easy to isolate this case, fully recreate any child template when
+        // the parent template updates
+        if (componentRef.instance.templatename() !== this._row.value) {
           this.componentRef.destroy();
           this.renderTemplateComponent(this._row);
           // TODO - test better ways to manage from container, confirming test cases from

From 9026a2ab58d8538c815ab73babbaeaa85781245b Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Fri, 20 Dec 2024 09:39:24 -0800
Subject: [PATCH 21/23] fix: revert condition

---
 src/app/shared/components/template/template-component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/shared/components/template/template-component.ts b/src/app/shared/components/template/template-component.ts
index 50d6971cda..41ae163e01 100644
--- a/src/app/shared/components/template/template-component.ts
+++ b/src/app/shared/components/template/template-component.ts
@@ -181,7 +181,7 @@ export class TemplateComponent implements OnInit, AfterContentInit, ITemplateRow
         // reflected in the child template (e.g. set_nested_variable contains parent local variable)
         // As it is not currently easy to isolate this case, fully recreate any child template when
         // the parent template updates
-        if (componentRef.instance.templatename() !== this._row.value) {
+        if (componentRef.instance.templatename()) {
           this.componentRef.destroy();
           this.renderTemplateComponent(this._row);
           // TODO - test better ways to manage from container, confirming test cases from

From 5d603f6d99f0391888708b96456daf72ecbb5a80 Mon Sep 17 00:00:00 2001
From: chrismclarke <chris.m.clarke@live.co.uk>
Date: Fri, 20 Dec 2024 11:22:58 -0800
Subject: [PATCH 22/23] refactor: header defaults and functions

---
 packages/data-models/appConfig.ts             | 27 ++++---------------
 .../components/header/header.component.ts     | 20 +++++++++-----
 .../shared/services/skin/skin.service.spec.ts |  6 ++---
 src/app/shared/utils/angular.utils.ts         | 10 +++++++
 4 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/packages/data-models/appConfig.ts b/packages/data-models/appConfig.ts
index a1996869f3..d34c6cb1e3 100644
--- a/packages/data-models/appConfig.ts
+++ b/packages/data-models/appConfig.ts
@@ -89,44 +89,27 @@ export type IHeaderVariantOptions = "default" | "compact";
 
 interface IAppConfigHeader {
   back_button: {
-    hidden: boolean;
+    hidden?: boolean;
   };
   collapse: boolean;
   colour: IHeaderFooterBackgroundOptions;
-  hidden: boolean;
+  hidden?: boolean;
   menu_button: {
-    hidden: boolean;
+    hidden?: boolean;
   };
   template: string | null;
   title: string;
   variant: IHeaderVariantOptions;
-  should_show_menu_button: (location: Location) => boolean;
-  should_show_back_button: (location: Location) => boolean;
-  should_minimize_app_on_back: (location: Location) => boolean;
 }
 
 const APP_HEADER_DEFAULTS: IAppConfigHeader = {
-  back_button: {
-    hidden: false,
-  },
+  back_button: {},
   collapse: false,
   colour: "primary",
-  hidden: false,
-  menu_button: {
-    hidden: false,
-  },
+  menu_button: {},
   template: null,
   title: "App",
   variant: "default",
-  // default only show menu button on home screen
-  should_show_menu_button: (location: Location) =>
-    activeRoute(location) === APP_ROUTE_DEFAULTS.home_route,
-  // default show back button on all screens except home screen
-  should_show_back_button: (location: Location) =>
-    activeRoute(location) !== APP_ROUTE_DEFAULTS.home_route,
-  // on device minimize app when back button pressed from home screen
-  should_minimize_app_on_back: (location: Location) =>
-    activeRoute(location) === APP_ROUTE_DEFAULTS.home_route,
 };
 
 /**
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
index 6d2717ca03..ca6e197975 100644
--- a/src/app/shared/components/header/header.component.ts
+++ b/src/app/shared/components/header/header.component.ts
@@ -2,7 +2,7 @@ import { Location } from "@angular/common";
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { computed, effect, signal } from "@angular/core";
 import { toSignal } from "@angular/core/rxjs-interop";
-import { NavigationEnd, NavigationStart, Router } from "@angular/router";
+import { NavigationStart, Router } from "@angular/router";
 import { App } from "@capacitor/app";
 import { Capacitor, PluginListenerHandle } from "@capacitor/core";
 import { Subscription, fromEvent, map } from "rxjs";
@@ -10,6 +10,7 @@ import type { IHeaderVariantOptions } from "data-models/appConfig";
 import { AppConfigService } from "../../services/app-config/app-config.service";
 import { IonHeader, ScrollBaseCustomEvent, ScrollDetail } from "@ionic/angular";
 import { _wait } from "packages/shared/src/utils/async-utils";
+import { activeRoute } from "../../utils/angular.utils";
 
 interface ScrollCustomEvent extends ScrollBaseCustomEvent {
   detail: ScrollDetail;
@@ -51,6 +52,9 @@ export class headerComponent implements OnInit, OnDestroy {
   /** Track scroll events when using header collapse mode */
   private scrollEvents$: Subscription;
 
+  /** Track whether on home route for back button and menu button side-effects */
+  private isHomeRoute = true;
+
   constructor(
     private router: Router,
     private location: Location,
@@ -101,13 +105,16 @@ export class headerComponent implements OnInit, OnDestroy {
 
   /** Determine whether to show back and menu buttons based on location */
   private handleRouteChange() {
-    const { back_button, menu_button, should_show_back_button, should_show_menu_button } =
-      this.headerConfig();
+    // update whether home route or not
+    const { APP_ROUTE_DEFAULTS } = this.appConfigService.appConfig();
+    this.isHomeRoute = activeRoute(location) === APP_ROUTE_DEFAULTS.home_route;
+
+    const { back_button, menu_button } = this.headerConfig();
 
     // The explicit `hidden` property should override the function of location
     // TODO: move functions to component code and out of app config, no use case for overriding them
-    const showBackButton = !back_button.hidden && should_show_back_button(location);
-    const showMenuButton = !menu_button.hidden && should_show_menu_button(location);
+    const showBackButton = !back_button.hidden && !this.isHomeRoute;
+    const showMenuButton = !menu_button.hidden && this.isHomeRoute;
     this.showBackButton.set(showBackButton);
     this.showMenuButton.set(showMenuButton);
     this.marginTop.set(0);
@@ -115,8 +122,7 @@ export class headerComponent implements OnInit, OnDestroy {
 
   /** When device back button evaluate conditions to handle app minimise */
   private handleHardwareBackPress() {
-    const { should_minimize_app_on_back } = this.headerConfig();
-    if (should_minimize_app_on_back(location)) {
+    if (this.isHomeRoute) {
       App.minimizeApp();
     }
   }
diff --git a/src/app/shared/services/skin/skin.service.spec.ts b/src/app/shared/services/skin/skin.service.spec.ts
index 4b8b03b0a7..2c86f90693 100644
--- a/src/app/shared/services/skin/skin.service.spec.ts
+++ b/src/app/shared/services/skin/skin.service.spec.ts
@@ -32,14 +32,12 @@ const MOCK_SKIN_2: IAppSkin = {
 
 const MOCK_APP_CONFIG: Partial<IAppConfig> = {
   APP_HEADER_DEFAULTS: {
+    back_button: {},
+    menu_button: {},
     template: null,
-    show: true,
     title: "default",
     collapse: false,
     colour: "none",
-    should_minimize_app_on_back: () => true,
-    should_show_back_button: () => true,
-    should_show_menu_button: () => true,
     variant: "default",
   },
   APP_SKINS: {
diff --git a/src/app/shared/utils/angular.utils.ts b/src/app/shared/utils/angular.utils.ts
index 9746020e05..8f42ef36b2 100644
--- a/src/app/shared/utils/angular.utils.ts
+++ b/src/app/shared/utils/angular.utils.ts
@@ -35,3 +35,13 @@ export function ngRouterMergedSnapshot$(router: Router) {
     startWith(mergeRouterSnapshots(router))
   );
 }
+
+/**
+ * Utility function to return the active pathname without any sidebar routing e.g. /home(sidebar:alt)
+ * or basename when deployed to subfolder path, e.g. /my-repo/template/home (provided by <base href='' /> in head)
+ * */
+export const activeRoute = (location: Location) => {
+  const baseHref = document.querySelector("base")?.getAttribute("href");
+  const path = location.pathname.replace(baseHref, "/").replace(/\(.+\)/, "");
+  return path;
+};

From 294c8d02881186c459bdd171fb0eb646de62978c Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Mon, 23 Dec 2024 16:39:53 +0000
Subject: [PATCH 23/23] chore: update comment

---
 packages/data-models/skin.model.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/data-models/skin.model.ts b/packages/data-models/skin.model.ts
index d6c627b925..163c7b4886 100644
--- a/packages/data-models/skin.model.ts
+++ b/packages/data-models/skin.model.ts
@@ -12,7 +12,9 @@ import { IAppConfigOverride } from "./appConfig";
  *       enabled: false
  *     }
  *     APP_HEADER_DEFAULTS: {
- *       should_show_menu_button: false
+ *       menu_button: {
+ *         hidden: true
+ *       }
  *     }
  *   }
  * }