Merge pull request #2602 from IDEMSInternational/feature-kw-category-…

…button-grid

Kuwait Theme: Radio Button Grid Styling

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.html

@@ -1,13 +1,24 @@
-<div class="radio-grid" [ngStyle]="gridStyle">
-  <div
-    *ngFor="let item of radioItems"
-    class="item"
-    (click)="handleItemClick(item)"
-    [attr.data-selected]="item.name === _row.value"
-  >
-    <div class="item-image-container" *ngIf="item.image">
-      <img class="item-image" [src]="item.image | plhAsset" />
+<div class="radio-grid" [ngStyle]="gridStyle" [attr.data-variant]="parameter_list.variant">
+  @for (item of radioItems; track $index) {
+    <div
+      class="item"
+      (click)="handleItemClick(item)"
+      [attr.data-selected]="item.name === _row.value"
+    >
+      @if (item.image) {
+        <div class="item-image-container">
+          <img
+            class="item-image"
+            [src]="
+              (item.name === _row.value && item.image_checked ? item.image_checked : item.image)
+                | plhAsset
+            "
+          />
+        </div>
+      }
+      @if (item.text) {
+        <div class="item-text">{{ item.text }}</div>
+      }
     </div>
-    <div class="item-text">{{ item.text }}</div>
-  </div>
+  }
 </div>

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.scss

@@ -28,3 +28,52 @@ $text-color: var(--radio-button-font-color, var(--ion-color-primary));
   font-size: $text-size;
   color: $text-color;
 }
+
+.radio-grid[data-variant="circle-icon"] {
+  display: grid;
+
+  .item {
+    border: none;
+    padding: 0px;
+    box-shadow: none;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    background: transparent;
+  }
+  .item-image-container {
+    background: var(--ion-color-primary-50);
+    border: 1px solid var(--ion-color-primary-200);
+    border-radius: 50%;
+
+    width: 86px;
+    height: 86px;
+
+    padding: 16px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      width: 48px;
+    }
+  }
+  .item-text {
+    font-size: large;
+    color: var(--ion-color-gray-800);
+    margin-top: 6px;
+  }
+
+  .item[data-selected="true"] {
+    background: unset;
+    .item-image-container {
+      border: 2px solid var(--ion-color-primary-300);
+      background: var(--ion-color-primary-200);
+    }
+    .item-text {
+      font-weight: bold;
+    }
+  }
+}

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.ts

@@ -1,7 +1,11 @@
 import { Component, Input } from "@angular/core";
 import { TemplateBaseComponent } from "../base";
 import { FlowTypes, ITemplateRowProps } from "../../models";
-import { getAnswerListParamFromTemplateRow, IAnswerListItem } from "src/app/shared/utils";
+import {
+  getAnswerListParamFromTemplateRow,
+  getStringParamFromTemplateRow,
+  IAnswerListItem,
+} from "src/app/shared/utils";
 
 interface IRadioButtonGridParams {
   /** List of options presented as radio items */
@@ -21,6 +25,8 @@ interface IRadioButtonGridParams {
    * Default '16px'
    **/
   grid_gap: string;
+  /* TEMPLATE PARAMETER: "variant". The style variant of the button_grid */
+  variant?: "default" | "circle-icon";
 }
 
 @Component({
@@ -67,6 +73,9 @@ export class TmplRadioButtonGridComponent
     this.parameter_list = this._row.parameter_list || ({} as any);
     this.radioItems = getAnswerListParamFromTemplateRow(this._row, "answer_list", []);
     this.gridStyle = this.generateGridStyle();
+    this.parameter_list.variant = getStringParamFromTemplateRow(this._row, "variant", "default")
+      .split(",")
+      .join(" ") as IRadioButtonGridParams["variant"];
   }
 
   /**

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -727,6 +727,18 @@ body[data-theme="plh_kids_kw"] {
     }
   }
 
+  // Radio Button Grid
+  .radio-grid {
+    .item {
+      border: 1px solid var(--ion-color-gray-100);
+      box-shadow: none !important;
+      border-radius: var(--ion-border-radius-small);
+      .item-image-container {
+        padding: 16px;
+      }
+    }
+  }
+
   // Completion Modal
   plh-completion-modal {
     .completion-modal {