From 987fc762c5cdb4c0ff6e5c8062e895bb7ed840e6 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 13 Nov 2024 13:27:26 +0300
Subject: [PATCH 1/9] feat: module list item

---
 .../module-list-item.component.html           | 27 ++++++++
 .../module-list-item.component.scss           |  0
 .../module-list-item.component.spec.ts        | 24 ++++++++
 .../module-list-item.component.ts             | 61 +++++++++++++++++++
 4 files changed, 112 insertions(+)
 create mode 100644 packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
 create mode 100644 packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.scss
 create mode 100644 packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.spec.ts
 create mode 100644 packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts

diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
new file mode 100644
index 0000000000..ccddcef5cd
--- /dev/null
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
@@ -0,0 +1,27 @@
+<div class="module-item" [attr.data-lock]="params.isLocked">
+  <div class="container" [attr.data-position]="params.moduleAlignment">
+    <div class="module-image">
+      <img [src]="params.moduleImageAsset | plhAsset" />
+    </div>
+    @if (_row.value) {
+      <div class="module-title">
+        <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
+      </div>
+    }
+    @if (params.isLocked) {
+      <div class="locked">
+        <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
+      </div>
+    } @else {
+      <div class="unlocked">
+        @if (params.targetTemplate !== null) {
+          <a class="nav-icon" [routerLink]="'template/' + params.targetTemplate">
+            <img class="icon" [src]="params.navImageAsset | plhAsset" />
+          </a>
+        } @else {
+          <div class="no-nav"></div>
+        }
+      </div>
+    }
+  </div>
+</div>
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.scss b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.spec.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.spec.ts
new file mode 100644
index 0000000000..fe26eb2927
--- /dev/null
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { PlhModuleListItemComponent } from "./module-list-item.component";
+
+describe("ModuleListItemComponent", () => {
+  let component: PlhModuleListItemComponent;
+  let fixture: ComponentFixture<PlhModuleListItemComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PlhModuleListItemComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlhModuleListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
new file mode 100644
index 0000000000..f7932315b7
--- /dev/null
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
@@ -0,0 +1,61 @@
+import { Component, OnInit } from "@angular/core";
+import { FlowTypes } from "packages/data-models";
+import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
+import {
+  getBooleanParamFromTemplateRow,
+  getStringParamFromTemplateRow,
+} from "src/app/shared/utils";
+
+interface IModuleListItemParams {
+  /* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
+  moduleImageAsset: string | null;
+  /* TEMPLATE PARAMETER: "module_alignment". The alignment of elements within the module item. Default "large" */
+  moduleAlignment: "left" | "right";
+  /* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
+  textTransform: "capitalise" | "uppercase" | null;
+  /* TEMPLATE PARAMETER: "target_template". Points toward the page to be navigated to */
+  targetTemplate: string | null;
+  /* TEMPLATE PARAMETER: "is_locked". The boolean that marks the module as locked or unlocked */
+  isLocked: boolean;
+  /* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
+  navImageAsset: string | null;
+  /* TEMPLATE PARAMETER: "locked_image_asset". The locked icon*/
+  lockedImageAsset: string | null;
+}
+
+@Component({
+  selector: "plh-module-list-item",
+  templateUrl: "./module-list-item.component.html",
+  styleUrls: ["./module-list-item.component.scss"],
+})
+export class PlhModuleListItemComponent extends TemplateBaseComponent implements OnInit {
+  params: Partial<IModuleListItemParams> = {};
+
+  ngOnInit() {
+    this.getParams();
+  }
+
+  private getParams() {
+    this.params.moduleImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "module_image_asset",
+      ""
+    );
+    this.params.moduleAlignment = getStringParamFromTemplateRow(
+      this._row,
+      "module_alignment",
+      "left"
+    ) as "left" | "right";
+    this.params.textTransform = getStringParamFromTemplateRow(this._row, "text_transform", null) as
+      | "capitalise"
+      | "uppercase";
+    this.params.targetTemplate = getStringParamFromTemplateRow(this._row, "target_template", null);
+    this.params.isLocked = getBooleanParamFromTemplateRow(this._row, "is_locked", false);
+    this.params.navImageAsset = getStringParamFromTemplateRow(this._row, "nav_image_asset", null);
+    this.params.lockedImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "locked_image_asset",
+      null
+    );
+  }
+}

From 4430325a8af0bfe1ade1a6ee69e211381e13af0e Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 13 Nov 2024 13:27:59 +0300
Subject: [PATCH 2/9] feat: component config

---
 packages/components/plh/index.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/components/plh/index.ts b/packages/components/plh/index.ts
index f77c8020b5..1f28fe7a3a 100644
--- a/packages/components/plh/index.ts
+++ b/packages/components/plh/index.ts
@@ -7,11 +7,17 @@ import { TemplatePipesModule } from "src/app/shared/components/template/pipes";
 import { LottieModule } from "ngx-lottie";
 import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-point-counter.component";
 import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.component";
+import { PlhModuleListItemComponent } from "./plh-kids-kw/components/module-list-item/module-list-item.component";
+import { RouterModule } from "@angular/router";
 
 @NgModule({
-  imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule],
-  exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent],
-  declarations: [PlhParentPointCounterComponent, PlhParentPointBoxComponent],
+  imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule, RouterModule],
+  exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent, PlhModuleListItemComponent],
+  declarations: [
+    PlhParentPointCounterComponent,
+    PlhParentPointBoxComponent,
+    PlhModuleListItemComponent,
+  ],
   providers: [],
 })
 export class PlhComponentsModule {}
@@ -19,4 +25,5 @@ export class PlhComponentsModule {}
 export const PLH_COMPONENT_MAPPING: Record<string, Type<ITemplateRowProps>> = {
   parent_point_counter: PlhParentPointCounterComponent,
   parent_point_box: PlhParentPointBoxComponent,
+  plh_module_list_item: PlhModuleListItemComponent,
 };

From 2c048eab7baf75c4e3fe57bb7454870a6fee85ab Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 13 Nov 2024 13:29:12 +0300
Subject: [PATCH 3/9] feat: list item styling

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 70 +++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index d3286f84e0..a7cfb084cd 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -248,4 +248,72 @@ body[data-theme="plh_kids_kw"] {
       }
     }
   }
-}
\ No newline at end of file
+
+  // module-list-item
+  plh-module-list-item {
+    .module-item {
+      width: 100%;
+      // TODO: switch to global secondary variable
+      border: 2px solid #2e98d8;
+      border-radius: var(--ion-border-radius-secondary);
+      padding: 16px;
+      box-shadow: 2px 2px 12px #83b1db;
+      .container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .module-image {
+        img {
+          width: 100px;
+          height: 100px;
+          max-width: unset;
+        }
+      }
+      .module-title {
+        margin: 0 12px;
+        margin-right: 18px;
+        p {
+          font-size: var(--font-size-text-medium);
+          color: var(--ion-color-primary-700);
+          font-weight: var(--font-weight-bold);
+          line-height: var(--line-height-text-small);
+          text-align: left;
+          text-transform: none;
+          &[data-variant~="capitalise"] {
+            text-transform: capitalize;
+          }
+          &[data-variant~="uppercase"] {
+            text-transform: uppercase;
+          }
+        }
+      }
+      .icon {
+        width: 28px;
+        max-width: unset;
+      }
+      .container[data-position~="right"] {
+        display: flex;
+        flex-direction: row-reverse;
+        .module-title {
+          p {
+            text-align: right;
+          }
+        }
+      }
+    }
+    .module-item[data-lock~="true"] {
+      box-shadow: none;
+      opacity: 0.5;
+      border: 2px solid #dbe3f2;
+      .module-image {
+        img {
+          width: 60px;
+          height: 60px;
+          max-width: unset;
+        }
+      }
+    }
+  }
+}

From ac62d462a93d705c9a99d91b76f47df468cee262 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 13 Nov 2024 13:48:38 +0300
Subject: [PATCH 4/9] fix: correct comment

---
 .../components/module-list-item/module-list-item.component.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
index f7932315b7..7f55e223df 100644
--- a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
@@ -9,7 +9,7 @@ import {
 interface IModuleListItemParams {
   /* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
   moduleImageAsset: string | null;
-  /* TEMPLATE PARAMETER: "module_alignment". The alignment of elements within the module item. Default "large" */
+  /* TEMPLATE PARAMETER: "module_alignment". The alignment of elements within the module item. Default "left" */
   moduleAlignment: "left" | "right";
   /* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
   textTransform: "capitalise" | "uppercase" | null;

From 6b9fa4f4572c28d84f3c02229e7f6c93b9b363be Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 13 Nov 2024 13:50:03 +0300
Subject: [PATCH 5/9] styling changes

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index a7cfb084cd..e526cc4272 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -257,7 +257,8 @@ body[data-theme="plh_kids_kw"] {
       border: 2px solid #2e98d8;
       border-radius: var(--ion-border-radius-secondary);
       padding: 16px;
-      box-shadow: 2px 2px 12px #83b1db;
+      box-shadow: 1px 1px 10px #92b7da;
+      background-color: #f6fafe;
       .container {
         display: flex;
         flex-direction: row;
@@ -307,6 +308,7 @@ body[data-theme="plh_kids_kw"] {
       box-shadow: none;
       opacity: 0.5;
       border: 2px solid #dbe3f2;
+      background-color: #ffffff;
       .module-image {
         img {
           width: 60px;

From e65bc0de21149cd1d6e919655bbd808eb2d52318 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 14 Nov 2024 09:38:35 +0300
Subject: [PATCH 6/9] refactor: update variables and html structure

---
 .../module-list-item.component.html           | 79 +++++++++++++------
 .../module-list-item.component.ts             | 18 ++---
 2 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
index ccddcef5cd..5eb55f9e32 100644
--- a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
@@ -1,27 +1,58 @@
 <div class="module-item" [attr.data-lock]="params.isLocked">
-  <div class="container" [attr.data-position]="params.moduleAlignment">
-    <div class="module-image">
-      <img [src]="params.moduleImageAsset | plhAsset" />
-    </div>
-    @if (_row.value) {
-      <div class="module-title">
-        <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
-      </div>
-    }
-    @if (params.isLocked) {
-      <div class="locked">
-        <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
-      </div>
-    } @else {
-      <div class="unlocked">
-        @if (params.targetTemplate !== null) {
-          <a class="nav-icon" [routerLink]="'template/' + params.targetTemplate">
-            <img class="icon" [src]="params.navImageAsset | plhAsset" />
+  @if (params.navItem && !params.isLocked) {
+    <div
+      class="container"
+      [attr.data-language-direction]="templateTranslateService.languageDirection()"
+      (click)="triggerActions('click')"
+    >
+      @if (params.moduleImageAsset) {
+        <div class="module-image">
+          <img [src]="params.moduleImageAsset | plhAsset" />
+        </div>
+      }
+      @if (_row.value) {
+        <div class="module-title">
+          <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
+        </div>
+      }
+      @if (params.isLocked) {
+        <div class="locked">
+          <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
+        </div>
+      } @else {
+        <div class="unlocked">
+          <a class="nav-icon">
+            <img
+              class="icon"
+              [attr.data-language-direction]="templateTranslateService.languageDirection()"
+              [src]="params.navImageAsset | plhAsset"
+            />
           </a>
-        } @else {
-          <div class="no-nav"></div>
-        }
-      </div>
-    }
-  </div>
+        </div>
+      }
+    </div>
+  } @else {
+    <div
+      class="container"
+      [attr.data-language-direction]="templateTranslateService.languageDirection()"
+    >
+      @if (params.moduleImageAsset) {
+        <div class="module-image">
+          <img [src]="params.moduleImageAsset | plhAsset" />
+        </div>
+      }
+      @if (_row.value) {
+        <div class="module-title">
+          <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
+        </div>
+      }
+      @if (params.isLocked) {
+        <div class="locked">
+          <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
+        </div>
+      } @else {
+        <div class="no-nav"></div>
+      }
+    </div>
+  }
 </div>
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
index 7f55e223df..e617e73de0 100644
--- a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { FlowTypes } from "packages/data-models";
 import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
+import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service";
 import {
   getBooleanParamFromTemplateRow,
   getStringParamFromTemplateRow,
@@ -9,12 +10,10 @@ import {
 interface IModuleListItemParams {
   /* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
   moduleImageAsset: string | null;
-  /* TEMPLATE PARAMETER: "module_alignment". The alignment of elements within the module item. Default "left" */
-  moduleAlignment: "left" | "right";
   /* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
   textTransform: "capitalise" | "uppercase" | null;
-  /* TEMPLATE PARAMETER: "target_template". Points toward the page to be navigated to */
-  targetTemplate: string | null;
+  /* TEMPLATE PARAMETER: "is_nav_item". Marks an item as navigable  in order to show the navigation image asset. Default "true"  */
+  navItem: boolean;
   /* TEMPLATE PARAMETER: "is_locked". The boolean that marks the module as locked or unlocked */
   isLocked: boolean;
   /* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
@@ -31,6 +30,10 @@ interface IModuleListItemParams {
 export class PlhModuleListItemComponent extends TemplateBaseComponent implements OnInit {
   params: Partial<IModuleListItemParams> = {};
 
+  constructor(public templateTranslateService: TemplateTranslateService) {
+    super();
+  }
+
   ngOnInit() {
     this.getParams();
   }
@@ -41,15 +44,10 @@ export class PlhModuleListItemComponent extends TemplateBaseComponent implements
       "module_image_asset",
       ""
     );
-    this.params.moduleAlignment = getStringParamFromTemplateRow(
-      this._row,
-      "module_alignment",
-      "left"
-    ) as "left" | "right";
     this.params.textTransform = getStringParamFromTemplateRow(this._row, "text_transform", null) as
       | "capitalise"
       | "uppercase";
-    this.params.targetTemplate = getStringParamFromTemplateRow(this._row, "target_template", null);
+    this.params.navItem = getBooleanParamFromTemplateRow(this._row, "is_nav_item", true);
     this.params.isLocked = getBooleanParamFromTemplateRow(this._row, "is_locked", false);
     this.params.navImageAsset = getStringParamFromTemplateRow(this._row, "nav_image_asset", null);
     this.params.lockedImageAsset = getStringParamFromTemplateRow(

From b5ce193de8109d2eca29409eca66809779a56bd4 Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Thu, 14 Nov 2024 09:39:09 +0300
Subject: [PATCH 7/9] use rtl language direction service

---
 src/theme/themes/plh_kids_kw/_overrides.scss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss
index e526cc4272..bc43f62bbb 100644
--- a/src/theme/themes/plh_kids_kw/_overrides.scss
+++ b/src/theme/themes/plh_kids_kw/_overrides.scss
@@ -293,15 +293,23 @@ body[data-theme="plh_kids_kw"] {
       .icon {
         width: 28px;
         max-width: unset;
+        &[data-language-direction~="rtl"] {
+          -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+        }
       }
-      .container[data-position~="right"] {
-        display: flex;
-        flex-direction: row-reverse;
+      .container[data-language-direction~="rtl"] {
         .module-title {
           p {
             text-align: right;
           }
         }
+        .module-image {
+          img {
+            -webkit-transform: scaleX(-1);
+            transform: scaleX(-1);
+          }
+        }
       }
     }
     .module-item[data-lock~="true"] {

From 574d050d351b2225808576462ffcef691f94585e Mon Sep 17 00:00:00 2001
From: FaithDaka <faithbusigu8@gmail.com>
Date: Wed, 20 Nov 2024 19:47:32 +0300
Subject: [PATCH 8/9] remove navItem property

---
 .../module-list-item.component.html           | 20 ++++++-------------
 .../module-list-item.component.ts             |  3 ---
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
index 5eb55f9e32..3629a2125d 100644
--- a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.html
@@ -1,5 +1,5 @@
 <div class="module-item" [attr.data-lock]="params.isLocked">
-  @if (params.navItem && !params.isLocked) {
+  @if (!params.isLocked) {
     <div
       class="container"
       [attr.data-language-direction]="templateTranslateService.languageDirection()"
@@ -15,20 +15,12 @@
           <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
         </div>
       }
-      @if (params.isLocked) {
-        <div class="locked">
-          <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
+      @if (params.navImageAsset !== null) {
+        <div class="nav-icon">
+          <img class="icon" [src]="params.navImageAsset | plhAsset" />
         </div>
       } @else {
-        <div class="unlocked">
-          <a class="nav-icon">
-            <img
-              class="icon"
-              [attr.data-language-direction]="templateTranslateService.languageDirection()"
-              [src]="params.navImageAsset | plhAsset"
-            />
-          </a>
-        </div>
+        <div class="no-nav"></div>
       }
     </div>
   } @else {
@@ -46,7 +38,7 @@
           <p [attr.data-variant]="params.textTransform">{{ _row.value }}</p>
         </div>
       }
-      @if (params.isLocked) {
+      @if (params.lockedImageAsset !== null) {
         <div class="locked">
           <img class="icon" [src]="params.lockedImageAsset | plhAsset" />
         </div>
diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
index e617e73de0..3a63973b97 100644
--- a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
@@ -12,8 +12,6 @@ interface IModuleListItemParams {
   moduleImageAsset: string | null;
   /* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
   textTransform: "capitalise" | "uppercase" | null;
-  /* TEMPLATE PARAMETER: "is_nav_item". Marks an item as navigable  in order to show the navigation image asset. Default "true"  */
-  navItem: boolean;
   /* TEMPLATE PARAMETER: "is_locked". The boolean that marks the module as locked or unlocked */
   isLocked: boolean;
   /* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
@@ -47,7 +45,6 @@ export class PlhModuleListItemComponent extends TemplateBaseComponent implements
     this.params.textTransform = getStringParamFromTemplateRow(this._row, "text_transform", null) as
       | "capitalise"
       | "uppercase";
-    this.params.navItem = getBooleanParamFromTemplateRow(this._row, "is_nav_item", true);
     this.params.isLocked = getBooleanParamFromTemplateRow(this._row, "is_locked", false);
     this.params.navImageAsset = getStringParamFromTemplateRow(this._row, "nav_image_asset", null);
     this.params.lockedImageAsset = getStringParamFromTemplateRow(

From 417a9f23e55968dc5fef8f7f69e768416f6b5ca2 Mon Sep 17 00:00:00 2001
From: Johnny McQuade <jfmcquade@hotmail.com>
Date: Fri, 22 Nov 2024 14:10:16 +0000
Subject: [PATCH 9/9] chore: module-list-item component, make params optional

---
 .../module-list-item/module-list-item.component.ts     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
index 3a63973b97..1c0b6c52a4 100644
--- a/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
+++ b/packages/components/plh/plh-kids-kw/components/module-list-item/module-list-item.component.ts
@@ -9,15 +9,15 @@ import {
 
 interface IModuleListItemParams {
   /* TEMPLATE PARAMETER: "module_image_asset". The image attached to the module */
-  moduleImageAsset: string | null;
+  moduleImageAsset?: string;
   /* TEMPLATE PARAMETER: "text_transform". The format of the text on the module item. Default null */
-  textTransform: "capitalise" | "uppercase" | null;
+  textTransform?: "capitalise" | "uppercase";
   /* TEMPLATE PARAMETER: "is_locked". The boolean that marks the module as locked or unlocked */
-  isLocked: boolean;
+  isLocked?: boolean;
   /* TEMPLATE PARAMETER: "nav_image_asset". The navigation icon*/
-  navImageAsset: string | null;
+  navImageAsset?: string;
   /* TEMPLATE PARAMETER: "locked_image_asset". The locked icon*/
-  lockedImageAsset: string | null;
+  lockedImageAsset?: string;
 }
 
 @Component({