chore: expose 'use_template_header' property on nav-stack for use wit…

…h inline sticky display group header

src/app/feature/nav-stack/components/nav-stack/nav-stack.component.global.scss

@@ -26,5 +26,9 @@ ion-modal.nav-stack-modal {
   ion-toolbar {
     --background: var(--ion-color-background);
     --color: var(--ion-color-primary);
+
+    &.fixed {
+      position: fixed;
+    }
   }
 }

src/app/feature/nav-stack/components/nav-stack/nav-stack.component.html

@@ -1,4 +1,4 @@
-<ion-toolbar>
+<ion-toolbar [class.fixed]="config.useTemplateHeader">
   @if (config.title) {
     <!-- use mode="ios" to centre title within toolbar -->
     <ion-title mode="ios">

src/app/feature/nav-stack/components/nav-stack/nav-stack.component.ts

@@ -5,6 +5,8 @@ export interface INavStackConfig {
   templateName: string;
   title?: string;
   showCloseButton?: boolean;
+  // If true, the default nav-stack header will be ignored by content
+  useTemplateHeader?: boolean;
 }
 
 /** The logic for nav-stack open/dismiss exists in the nav-stack service */

src/app/feature/nav-stack/nav-stack.actions.ts

@@ -5,6 +5,7 @@ interface INavStackActionParams {
   template: string;
   title: string;
   show_close_button: boolean;
+  use_template_header: boolean;
 }
 
 export class NavStackActionFactory {
@@ -14,11 +15,12 @@ export class NavStackActionFactory {
     const [actionId] = args;
     const childActions = {
       open: async () => {
-        const { template, title, show_close_button = true } = params;
+        const { template, title, show_close_button = true, use_template_header } = params;
         const navStackConfig = {
           templateName: template,
           title,
           showCloseButton: show_close_button,
+          useTemplateHeader: use_template_header,
         };
         this.service.pushNavStack(navStackConfig);
       },

src/app/shared/components/template/components/index.ts

@@ -54,7 +54,7 @@ import { TmplTextBoxComponent } from "./text-box/text-box.component";
 import { TmplTextComponent } from "./text/text.component";
 import { TmplTextBubbleComponent } from "./text-bubble/text-bubble.component";
 import { TmplTileComponent } from "./tile-component/tile-component.component";
-import { TmplTitleComponent } from ".//title/title.component";
+import { TmplTitleComponent } from "./title/title.component";
 import { TmplTimerComponent } from "./timer/timer.component";
 import { TmplToggleBarComponent } from "./toggle-bar/toggle-bar";
 import { TmplVideoComponent } from "./video";

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

@@ -26,13 +26,6 @@
     bottom: 0;
   }
 }
-// When displaying a sticky header inside a nav-stack modal, remove the inline placeholder
-// as the nav-stack has an in-built header
-:host-context(.nav-stack-modal) {
-  .sticky-top-placeholder {
-    display: none;
-  }
-}
 /// In flex box components should try to fill height, but not width (leave to flex property)
 .display-group-wrapper > plh-template-component {
   height: 100%;