Kuwait Theme: Add Background Image to Display Group

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

@@ -24,7 +24,7 @@ ion-modal.nav-stack-modal {
   }
 
   ion-toolbar {
-    --background: var(--ion-color-background);
+    --background: var(--ion-background-color);
     --color: var(--ion-color-primary);
   }
 }

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

@@ -26,6 +26,7 @@
     [style.marginBottom.px]="params.offset"
     [ngSwitch]="type"
     [style]="_row.style_list | styleList"
+    [ngStyle]="backgroundImageStyles"
   >
     <!-- Default Layout -->
     <ng-container *ngSwitchDefault>

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

@@ -4,6 +4,8 @@
 .display-group-wrapper {
   display: flex;
   align-items: center;
+  background-repeat: no-repeat;
+  height: auto;
 }
 /// In flex box components should try to fill height, but not width (leave to flex property)
 .display-group-wrapper > plh-template-component {
@@ -21,6 +23,10 @@
 .display-group-wrapper[data-param-style~="wrap"] {
   flex-wrap: wrap;
 }
+// assign default background colour to the display group wrapper (useful in sticky group)
+.display-group-wrapper[data-param-style~="background_solid"] {
+  background-color: var(--ion-background-color);
+}
 
 // Default spacing within display groups. Adapted from `template-component.scss`
 .display-group-wrapper[data-param-style~="row"] > plh-template-component:not([data-hidden="true"]) {
@@ -42,6 +48,12 @@
   margin: 1em 0 0 0;
 }
 
+.display-group-wrapper[data-variant~="inline_padding"] {
+  width: 100%;
+  padding-left: var(--padding-start);
+  padding-right: var(--padding-end);
+}
+
 .display-group-wrapper {
   &[data-variant~="box_gray"],
   &[data-variant~="box_primary"],

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

@@ -1,14 +1,26 @@
 import { Component, OnInit } from "@angular/core";
 import { TemplateBaseComponent } from "../../base";
 import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "../../../../../utils";
+import { NgStyle } from "@angular/common";
+import { TemplateAssetService } from "../../../services/template-asset.service";
 
 interface IDisplayGroupParams {
   /** TEMPLATE PARAMETER: "variant" */
-  variant: "box_gray" | "box_primary" | "box_secondary" | "box_white" | "dashed_box";
+  variant:
+    | "box_gray"
+    | "box_primary"
+    | "box_secondary"
+    | "box_white"
+    | "dashed_box"
+    | "inline_padding";
   /** TEMPLATE PARAMETER: "style". TODO: Various additional legacy styles, review and convert some to variants */
   style: "form" | "default" | string | null;
   /** TEMPLATE PARAMETER: "offset". Add a custom bottom margin */
   offset: number;
+  /** TEMPLATE PARAMETER: "background_image_asset". Add a background to the display group */
+  backgroundImageAsset: string;
+  /** TEMPLATE PARAMETER: "background_image_position". Add a position to the background image */
+  backgroundImagePosition: string;
   /** TEMPLATE PARAMETER: "sticky". Set to "top" or "bottom" to make the display group a sticky inline header/footer */
   sticky: "top" | "bottom" | null;
 }
@@ -23,6 +35,12 @@ export class TmplDisplayGroupComponent extends TemplateBaseComponent implements
   bgColor: string;
   type: "form" | "dashed_box" | "default";
 
+  public backgroundImageStyles: NgStyle["ngStyle"] = {};
+
+  constructor(private templateAssetService: TemplateAssetService) {
+    super();
+  }
+
   ngOnInit() {
     this.getParams();
   }
@@ -40,6 +58,7 @@ export class TmplDisplayGroupComponent extends TemplateBaseComponent implements
       .concat(" " + this.params.style) as IDisplayGroupParams["variant"];
     this.params.sticky = getStringParamFromTemplateRow(this._row, "sticky", null) as any;
     this.type = this.getTypeFromStyles();
+    this.backgroundImageStyles = this.getBackgroundImageStyles();
   }
 
   private getTypeFromStyles() {
@@ -48,4 +67,21 @@ export class TmplDisplayGroupComponent extends TemplateBaseComponent implements
       return "dashed_box";
     return "default";
   }
+
+  private getBackgroundImageStyles() {
+    // only generate background image styles if asset included
+    const backgroundImageAsset = getStringParamFromTemplateRow(this._row, "background_image_asset");
+    if (!backgroundImageAsset) return {};
+    // retrieve the image asset url in the same way plh_asset pipe does
+    // assign background position and size styles and return
+    const url = this.templateAssetService.getTranslatedAssetPath(backgroundImageAsset);
+    const backgroundImage = `url(${url})`;
+    const backgroundPosition = getStringParamFromTemplateRow(
+      this._row,
+      "background_image_position",
+      "top"
+    );
+    const backgroundSize = "contain";
+    return { backgroundImage, backgroundPosition, backgroundSize };
+  }
 }

src/app/shared/utils/utils.ts

@@ -186,7 +186,7 @@ export function getParamFromTemplateRow(
 export function getStringParamFromTemplateRow(
   row: FlowTypes.TemplateRow,
   name: string,
-  _default: string
+  _default: string = ""
 ): string {
   const paramValue = getParamFromTemplateRow(row, name, _default) as string;
   return paramValue ? `${paramValue}` : paramValue;