Merge pull request #2564 from IDEMSInternational/feat/sticky-display-…

…group

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

@@ -30,6 +30,7 @@ import { TmplDashedBoxComponent } from "./dashed-box/dashed-box.component";
 import { TmplDataItemsComponent } from "./data-items/data-items.component";
 import { TmplDisplayGridComponent } from "./layout/display-grid/display-grid.component";
 import { TmplDisplayGroupComponent } from "./layout/display-group/display-group.component";
+import { TmplDisplayGroupStickyComponent } from "./layout/display-group/sticky/display-group-sticky.component";
 import { TmplDrawerComponent } from "./drawer/drawer.component";
 import { TmplHelpIconComponent } from "./help-icon";
 import { TmplIconBannerComponent } from "./icon-banner/icon-banner.component";
@@ -54,7 +55,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";
@@ -92,6 +93,7 @@ export const TEMPLATE_COMPONENTS = [
   TmplDataItemsComponent,
   TmplDisplayGridComponent,
   TmplDisplayGroupComponent,
+  TmplDisplayGroupStickyComponent,
   TmplDrawerComponent,
   TmplHelpIconComponent,
   TmplIconBannerComponent,
@@ -156,6 +158,7 @@ const COMMON_COMPONENT_MAPPING = {
   debug_toggle: PLHDebugToggleComponent,
   display_grid: TmplDisplayGridComponent,
   display_group: TmplDisplayGroupComponent,
+  display_group_sticky: TmplDisplayGroupStickyComponent,
   drawer: TmplDrawerComponent,
   form: FormComponent,
   help_icon: TmplHelpIconComponent,

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

@@ -1,30 +1,50 @@
-<div
-  (click)="clickDisplayGroup()"
-  class="display-group-wrapper"
-  [attr.data-param-style]="params.style"
-  [attr.data-rowname]="_row.name"
-  [attr.data-variant]="params.variant"
-  [style.marginBottom.px]="params.offset"
-  [ngSwitch]="type"
-  [style]="_row.style_list | styleList"
->
-  <!-- Default Layout -->
-  <ng-container *ngSwitchDefault>
-    <plh-template-component
-      *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
-      [row]="childRow"
+@if (params.sticky) {
+  <!-- Sticky display group - includes placeholder padding elements above/below main content -->
+  @if (params.sticky === "top") {
+    <div [style.height.px]="sticky.height()"></div>
+  }
+  <tmpl-display-group-sticky [position]="params.sticky" #sticky>
+    <ng-container *ngTemplateOutlet="content"></ng-container>
+  </tmpl-display-group-sticky>
+  @if (params.sticky === "bottom") {
+    <div [style.height.px]="sticky.height()"></div>
+  }
+} @else {
+  <!-- Regular display group - render templated content -->
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+}
+
+<!-- Main Content - shown either within sticky or standard versions -->
+<ng-template #content>
+  <!--  -->
+  <div
+    (click)="clickDisplayGroup()"
+    class="display-group-wrapper"
+    [attr.data-param-style]="params.style"
+    [attr.data-rowname]="_row.name"
+    [attr.data-variant]="params.variant"
+    [style.marginBottom.px]="params.offset"
+    [ngSwitch]="type"
+    [style]="_row.style_list | styleList"
+  >
+    <!-- Default Layout -->
+    <ng-container *ngSwitchDefault>
+      <plh-template-component
+        *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
+        [row]="childRow"
+        [parent]="parent"
+        [attr.data-rowname]="_row.name"
+      >
+      </plh-template-component>
+    </ng-container>
+    <!-- Dashed-box -->
+    <plh-advanced-dashed-box
+      *ngSwitchCase="'dashed_box'"
+      [inputRow]="_row"
       [parent]="parent"
-      [attr.data-rowname]="_row.name"
-    >
-    </plh-template-component>
-  </ng-container>
-  <!-- Dashed-box -->
-  <plh-advanced-dashed-box
-    *ngSwitchCase="'dashed_box'"
-    [inputRow]="_row"
-    [parent]="parent"
-    style="flex: 1"
-  ></plh-advanced-dashed-box>
-  <!-- Form layout -->
-  <plh-tmpl-form *ngSwitchCase="'form'" [inputRow]="_row" [parent]="parent"></plh-tmpl-form>
-</div>
+      style="flex: 1"
+    ></plh-advanced-dashed-box>
+    <!-- Form layout -->
+    <plh-tmpl-form *ngSwitchCase="'form'" [inputRow]="_row" [parent]="parent"></plh-tmpl-form>
+  </div>
+</ng-template>

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

@@ -9,6 +9,8 @@ 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({
@@ -25,17 +27,18 @@ export class TmplDisplayGroupComponent extends TemplateBaseComponent implements
     this.getParams();
   }
 
-  clickDisplayGroup() {
+  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 any;
     this.type = this.getTypeFromStyles();
   }
 

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,19 @@
+// When the display group is "sticky", style it as an inline header/footer
+:host {
+  display: flex;
+  position: fixed;
+  left: 0;
+  width: 100vw;
+  justify-content: center;
+  background-color: var(--ion-background-color);
+  z-index: 10;
+
+  // use provided inputs to specify host top/bottom as signals do not nicely
+  // map to hostAttribute https://github.com/angular/angular/issues/53888
+  &[ng-reflect-position="top"] {
+    top: 0;
+  }
+  &[ng-reflect-position="bottom"] {
+    bottom: 0;
+  }
+}

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

@@ -0,0 +1,55 @@
+import {
+  AfterViewInit,
+  Component,
+  input,
+  OnDestroy,
+  signal,
+  ViewContainerRef,
+} from "@angular/core";
+
+@Component({
+  selector: "tmpl-display-group-sticky",
+  templateUrl: "display-group-sticky.component.html",
+  styleUrl: "display-group-sticky.component.scss",
+})
+/**
+ *
+ */
+export class TmplDisplayGroupStickyComponent implements AfterViewInit, OnDestroy {
+  position = input.required<"top" | "bottom">();
+  height = signal(0);
+
+  private resizeObserver = new ResizeObserver((entries) => this.handleSizeChange(entries));
+
+  constructor(private readonly viewRef: ViewContainerRef) {}
+
+  ngAfterViewInit() {
+    // Observe own component height and update signal so that parent display-group
+    // can adjust padding as required
+    this.resizeObserver.observe(this.viewRef.element.nativeElement);
+  }
+
+  ngOnDestroy(): void {
+    this.resizeObserver.disconnect();
+  }
+
+  private handleSizeChange(entries: ResizeObserverEntry[]) {
+    const [{ contentRect }] = entries;
+
+    let topPadding = 0;
+    if (this.position() === "top") {
+      // As the display group now sits at the top of the content window ignoring the app-wide padding applied to ion-content,
+      // the height of the inline display group placeholder should account for this padding
+      topPadding = this.getContentContainerTopPadding();
+    }
+
+    this.height.set(contentRect.height - topPadding);
+  }
+
+  private getContentContainerTopPadding() {
+    const computedStyles = getComputedStyle(this.viewRef.element.nativeElement);
+    const ionContentPaddingStart =
+      parseFloat(computedStyles.getPropertyValue("--padding-start")) || 0;
+    return ionContentPaddingStart;
+  }
+}

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

@@ -6,7 +6,7 @@ import { PLH_COMPONENT_MANIFEST } from "components/plh/manifest";
 const COMMON_COMPONENT_MANIFEST: IComponentManifest<ICommonComponentName> = {
   carousel: { module: "SwiperModule" },
   display_group: {
-    implicit: ["form", "advanced_dashed_box"],
+    implicit: ["advanced_dashed_box", "display_group_sticky", "form"],
   },
   lottie_animation: { module: "LottieModule" },
   pdf: { assets: "/assets/comp-pdf", module: "NgxExtendedPdfViewerModule" },

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;
+    }
+  }
 }