Kuwait Theme: Module Details Header

packages/components/plh/index.ts

@@ -9,14 +9,21 @@ import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-po
 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";
+import { PlhModuleDetailsHeaderComponent } from "./plh-kids-kw/components/module-details-header/module-details-header.component";
 
 @NgModule({
   imports: [CommonModule, IonicModule, TemplatePipesModule, LottieModule, RouterModule],
-  exports: [PlhParentPointCounterComponent, PlhParentPointBoxComponent, PlhModuleListItemComponent],
+  exports: [
+    PlhParentPointCounterComponent,
+    PlhParentPointBoxComponent,
+    PlhModuleListItemComponent,
+    PlhModuleDetailsHeaderComponent,
+  ],
   declarations: [
     PlhParentPointCounterComponent,
     PlhParentPointBoxComponent,
     PlhModuleListItemComponent,
+    PlhModuleDetailsHeaderComponent,
   ],
   providers: [],
 })
@@ -25,5 +32,6 @@ export class PlhComponentsModule {}
 export const PLH_COMPONENT_MAPPING: Record<string, Type<ITemplateRowProps>> = {
   parent_point_counter: PlhParentPointCounterComponent,
   parent_point_box: PlhParentPointBoxComponent,
+  plh_module_details_header: PlhModuleDetailsHeaderComponent,
   plh_module_list_item: PlhModuleListItemComponent,
 };

packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.html

@@ -0,0 +1,22 @@
+<div class="module-header">
+  <div
+    class="wrapper"
+    [attr.data-language-direction]="templateTranslateService.languageDirection()"
+  >
+    <div class="image">
+      @if (params.moduleImageAsset) {
+        <div
+          class="module-illustration"
+          [style.backgroundImage]="'url(' + (params.bgImage | plhAsset) + ')'"
+        >
+          <img [src]="params.moduleImageAsset | plhAsset" class="module-image" />
+        </div>
+      }
+    </div>
+    @if (_row.value) {
+      <div class="module-title">
+        <h2>{{ _row.value }}</h2>
+      </div>
+    }
+  </div>
+</div>

packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { PlhModuleDetailsHeaderComponent } from "./module-details-header.component";
+
+describe("ModuleDetailsHeaderComponent", () => {
+  let component: PlhModuleDetailsHeaderComponent;
+  let fixture: ComponentFixture<PlhModuleDetailsHeaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PlhModuleDetailsHeaderComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlhModuleDetailsHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/components/plh/plh-kids-kw/components/module-details-header/module-details-header.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from "@angular/core";
+import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
+import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service";
+import { getParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils";
+
+interface IModuleHeaderParams {
+  bgImage?: string;
+  moduleImageAsset?: string;
+}
+@Component({
+  selector: "plh-module-details-header",
+  templateUrl: "./module-details-header.component.html",
+  styleUrls: ["./module-details-header.component.scss"],
+})
+export class PlhModuleDetailsHeaderComponent extends TemplateBaseComponent implements OnInit {
+  params: Partial<IModuleHeaderParams> = {};
+
+  constructor(public templateTranslateService: TemplateTranslateService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.getParams();
+  }
+
+  private getParams() {
+    this.params.bgImage = getStringParamFromTemplateRow(this._row, "background_illustration", null);
+    this.params.moduleImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "module_image_asset",
+      null
+    );
+  }
+}

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -249,6 +249,46 @@ body[data-theme="plh_kids_kw"] {
     }
   }
 
+  // module header
+  plh-module-details-header {
+    .module-header {
+      border-bottom-left-radius: 40px;
+      border-bottom-right-radius: 40px;
+      background-color: #9ecbf5;
+    }
+    .image {
+      .module-illustration {
+        height: 480px;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 380px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      img.module-image {
+        max-width: 220px;
+        min-width: 220px;
+        margin-top: -40px;
+      }
+    }
+    .module-title {
+      margin-top: -70px;
+      padding-bottom: 30px;
+      padding-left: 16px;
+      h2 {
+        font-weight: var(--font-weight-bold);
+        font-size: 28px;
+      }
+    }
+    .wrapper[data-language-direction~="rtl"] {
+      .module-title {
+        padding-right: 16px;
+      }
+    }
+  }
+
   // module-list-item
   plh-module-list-item {
     .module-item {