feat: inline header or footer, via 'sticky' display group param

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

@@ -1,18 +1,20 @@
-<ion-toolbar>
-  @if (config.title) {
-    <!-- use mode="ios" to centre title within toolbar -->
-    <ion-title mode="ios">
-      {{ config.title }}
-    </ion-title>
-  }
-  @if (config.showCloseButton) {
-    <ion-buttons slot="end">
-      <ion-button (click)="close()">
-        <ion-icon name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  }
-</ion-toolbar>
+@if (config.header) {
+  <ion-toolbar>
+    @if (config.title) {
+      <!-- use mode="ios" to centre title within toolbar -->
+      <ion-title mode="ios">
+        {{ config.title }}
+      </ion-title>
+    }
+    @if (config.showCloseButton) {
+      <ion-buttons slot="end">
+        <ion-button (click)="close()">
+          <ion-icon name="close"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    }
+  </ion-toolbar>
+}
 <ion-content>
   <plh-template-container
     class="template-container"

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;
+  // Show default nav-stack header
+  header?: boolean;
 }
 
 /** The logic for nav-stack open/dismiss exists in the nav-stack service */

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

@@ -1,10 +1,12 @@
 import type { IActionHandler } from "src/app/shared/components/template/services/instance/template-action.registry";
 import { NavStackService } from "./nav-stack.service";
+import { INavStackConfig } from "./components/nav-stack/nav-stack.component";
 
 interface INavStackActionParams {
   template: string;
   title: string;
   show_close_button: boolean;
+  header: boolean;
 }
 
 export class NavStackActionFactory {
@@ -14,12 +16,13 @@ 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, header = true } = params;
         const navStackConfig = {
           templateName: template,
           title,
           showCloseButton: show_close_button,
-        };
+          header,
+        } as INavStackConfig;
         this.service.pushNavStack(navStackConfig);
       },
       close_top: async () => {

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";
+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.html

@@ -1,9 +1,11 @@
 <div
+  #displayGroupWrapper
   (click)="clickDisplayGroup()"
   class="display-group-wrapper"
   [attr.data-param-style]="params.style"
   [attr.data-rowname]="_row.name"
   [attr.data-variant]="params.variant"
+  [attr.data-sticky]="params.sticky"
   [style.marginBottom.px]="params.offset"
   [ngSwitch]="type"
   [style]="_row.style_list | styleList"
@@ -28,3 +30,10 @@
   <!-- Form layout -->
   <plh-tmpl-form *ngSwitchCase="'form'" [inputRow]="_row" [parent]="parent"></plh-tmpl-form>
 </div>
+<!-- If sticky, add inline element so that rest of content doesn't shift behind -->
+@if (params.sticky === "top") {
+  <div class="sticky-top-placeholder" [style.height.px]="stickyHeight()"></div>
+}
+@if (params.sticky === "bottom") {
+  <div class="sticky-bottom-placeholder" [style.height.px]="stickyHeight()"></div>
+}

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

@@ -5,6 +5,27 @@
   display: flex;
   align-items: center;
 }
+
+// When the display group is "sticky", style it as an inline header/footer
+.display-group-wrapper {
+  &[data-sticky="top"],
+  &[data-sticky="bottom"] {
+    background-color: var(--ion-background-color);
+    position: fixed;
+    left: 0;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+  }
+
+  &[data-sticky="top"] {
+    top: 0;
+  }
+
+  &[data-sticky="bottom"] {
+    bottom: 0;
+  }
+}
 /// In flex box components should try to fill height, but not width (leave to flex property)
 .display-group-wrapper > plh-template-component {
   height: 100%;

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

@@ -1,4 +1,12 @@
-import { Component, OnInit } from "@angular/core";
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  signal,
+  ViewChild,
+} from "@angular/core";
 import { TemplateBaseComponent } from "../../base";
 import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "../../../../../utils";
 
@@ -9,33 +17,53 @@ interface IDisplayGroupParams {
   style: "form" | "default" | string | null;
   /** TEMPLATE PARAMETER: "offset". Add a custom bottom margin */
   offset: number;
+  /** TEMPLATE PARAMETER: "sticky". Set to "top" or "bottom" to make the display group a sticky inline header/footer */
+  sticky: "top" | "bottom" | null;
 }
 
 @Component({
   selector: "plh-tmpl-display-group",
   templateUrl: "./display-group.component.html",
   styleUrls: ["../../tmpl-components-common.scss", "./display-group.component.scss"],
 })
-export class TmplDisplayGroupComponent extends TemplateBaseComponent implements OnInit {
+export class TmplDisplayGroupComponent
+  extends TemplateBaseComponent
+  implements OnInit, AfterViewInit, OnDestroy
+{
   params: Partial<IDisplayGroupParams> = {};
   bgColor: string;
   type: "form" | "dashed_box" | "default";
 
+  @ViewChild("displayGroupWrapper") displayGroupWrapper: ElementRef;
+  private resizeObserver: ResizeObserver;
+  stickyHeight = signal<number>(0);
+
   ngOnInit() {
     this.getParams();
   }
 
-  clickDisplayGroup() {
+  ngAfterViewInit() {
+    if (this.params.sticky) {
+      this.initResizeObserver();
+    }
+  }
+
+  public clickDisplayGroup() {
     this.triggerActions("click");
   }
 
-  getParams() {
+  private getParams() {
     this.params.style = getStringParamFromTemplateRow(this._row, "style", "row");
     this.params.offset = getNumberParamFromTemplateRow(this._row, "offset", 0);
     this.params.variant = getStringParamFromTemplateRow(this._row, "variant", "")
       .split(",")
       .join(" ")
       .concat(" " + this.params.style) as IDisplayGroupParams["variant"];
+    this.params.sticky = getStringParamFromTemplateRow(
+      this._row,
+      "sticky",
+      null
+    ) as IDisplayGroupParams["sticky"];
     this.type = this.getTypeFromStyles();
   }
 
@@ -45,4 +73,38 @@ export class TmplDisplayGroupComponent extends TemplateBaseComponent implements
       return "dashed_box";
     return "default";
   }
+
+  /** Observe the height of the display group wrapper element and update the height of the placeholder accordingly */
+  private initResizeObserver() {
+    if (this.displayGroupWrapper) {
+      this.resizeObserver = new ResizeObserver((entries) => {
+        let containerPadding = 0;
+        // In the case of a sticky header, the top padding/margin of the main app content and template container need to be accounted for,
+        // now that the display group sits at the very top of the content window outside of the main content and template container
+        if (this.params.sticky === "top") {
+          containerPadding = this.getTotalContainerTopPadding();
+        }
+        const entry = entries[0];
+        this.stickyHeight.set(entry.contentRect.height - containerPadding);
+      });
+
+      this.resizeObserver.observe(this.displayGroupWrapper.nativeElement);
+    }
+  }
+
+  private getTotalContainerTopPadding() {
+    const computedStyles = getComputedStyle(this.displayGroupWrapper.nativeElement);
+    const ionContentPaddingStart =
+      parseFloat(computedStyles.getPropertyValue("--padding-start")) || 0;
+    const templateContainerMarginEm = computedStyles.getPropertyValue("--row-margin-top").trim();
+    const fontSize = parseFloat(computedStyles.fontSize) || 0;
+    const templateContainerMarginPx = parseFloat(templateContainerMarginEm) * fontSize || 0;
+    return ionContentPaddingStart + templateContainerMarginPx;
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
 }

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

@@ -0,0 +1,15 @@
+<div class="title-wrapper" [class]="params.style" [attr.data-variant]="params.variant">
+  <h1
+    [style.textAlign]="params.textAlign"
+    [class]="'tiny standard' + ' ' + params.style"
+    [innerHTML]="_row.value | markdown"
+  ></h1>
+  <ion-icon
+    *ngIf="params.help"
+    name="help-circle-outline"
+    class="title-help"
+    [pTooltip]="params.help"
+    [tooltipPosition]="params.tooltipPosition"
+    tooltipEvent="click"
+  ></ion-icon>
+</div>

src/app/shared/components/template/components/title.scss → src/app/shared/components/template/components/title/title.component.scss

@@ -45,4 +45,12 @@
     color: var(--ion-color-primary);
     @include mixins.small-square;
   }
+
+  &[data-variant~="header"] {
+    padding: var(--regular-padding);
+    h1 {
+      width: 100%;
+      text-align: center !important;
+    }
+  }
 }

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

@@ -0,0 +1,48 @@
+import { Component, OnInit } from "@angular/core";
+import { TemplateBaseComponent } from ".././base";
+import { ITemplateRowProps } from "../../models";
+import { getStringParamFromTemplateRow } from "../../../../utils";
+
+interface ITitleParams {
+  /** TEMPLATE PARAMETER: "help". Tooltip text */
+  help: string | null;
+  /** TEMPLATE PARAMETER: "tooltip_position". Default "right". */
+  tooltipPosition: string;
+  /** TEMPLATE PARAMETER: "text_align". Default "left"". */
+  textAlign: "left" | "right" | "center";
+  /** TEMPLATE PARAMETER: "style". */
+  style: string | null;
+  /** TEMPLATE PARAMETER: "variant". */
+  variant: "" | "header";
+}
+
+@Component({
+  selector: "plh-tmpl-title",
+  templateUrl: "./title.component.html",
+  styleUrls: ["./title.component.scss"],
+})
+export class TmplTitleComponent extends TemplateBaseComponent implements ITemplateRowProps, OnInit {
+  params: Partial<ITitleParams> = {};
+
+  ngOnInit() {
+    this.getParams();
+  }
+
+  getParams() {
+    this.params.help = getStringParamFromTemplateRow(this._row, "help", null);
+    this.params.tooltipPosition = getStringParamFromTemplateRow(
+      this._row,
+      "tooltip_position",
+      "right"
+    );
+    this.params.style = getStringParamFromTemplateRow(this._row, "style", "tiny standard");
+    this.params.textAlign = getStringParamFromTemplateRow(
+      this._row,
+      "text_align",
+      "left"
+    ) as ITitleParams["textAlign"];
+    this.params.variant = getStringParamFromTemplateRow(this._row, "variant", "")
+      .split(",")
+      .join(" ") as ITitleParams["variant"];
+  }
+}

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

@@ -30,7 +30,7 @@ plh-template-container > plh-template-component:not([data-hidden="true"]) {
 plh-template-container
   > plh-template-component:not([data-hidden="true"])
   ~ plh-template-component:not([data-hidden="true"]) {
-  margin-top: 1em;
+  margin-top: var(--row-margin-top);
 }
 
 /// Ensure standalone containers and components fill all available space

src/theme/variables.scss

@@ -22,6 +22,7 @@
   --safe-area-height: calc(100vh - var(--ion-safe-area-top, 0) - var(--ion-safe-area-bottom, 0));
 
   // Margins //
+  --row-margin-top: 1em; // used in downstream calculations, e.g. sticky display-group
   --tiny-margin: 5px;
   --small-margin: 10px;
   --regular-margin: 15px;