From b0df6882fcd87e492e3057b84f7b9ff6a674c0bf Mon Sep 17 00:00:00 2001
From: Venkat Kandagaddala <venky.kandagaddala@gmail.com>
Date: Wed, 31 Jul 2024 20:25:48 +0530
Subject: [PATCH] Karma programs v2 changes

---
 ...karma-programs-microsite-v2.component.html | 13 +++--
 ...karma-programs-microsite-v2.component.scss | 40 ++++++++++++++++
 .../karma-programs-microsite-v2.component.ts  | 48 +++++++++++++++++--
 .../karma-programs/karma-programs.module.ts   |  3 +-
 4 files changed, 97 insertions(+), 7 deletions(-)

diff --git a/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.html b/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.html
index 2eced1a95..8b9ce1e57 100644
--- a/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.html
+++ b/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.html
@@ -86,11 +86,18 @@ <h1 class=" txt-ellipsis-2 break-words">{{data?.title}}</h1>
     </ng-container>
 
     <ng-container *ngIf="data?.versioning">
-        <div class="banner-new" [ngStyle]="{'background-image': 'url(' + data?.backgroundImageV2 + ')'}">
-
+        <!-- <div class="banner-new" [ngStyle]="{'background-image': 'url(' + currentImageUrl + ')'}">
+        </div> -->
+        <div>
+            <img i18n-alt alt="Page Banner"
+                [src]="data.bannerImagesV2"
+                wsUtilsImageResponsive
+                class="banner-image-v2"/>
+            </div>
+        <div class="container-balanced pt-8">
+            <div class="description-v2" [innerHTML]="richTextContent(data?.descriptionV2)"></div>
         </div>
     </ng-container>
-    
 </ng-template>
 <!-- banner end -->
 
diff --git a/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.scss b/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.scss
index 5b00b4697..ea88b2378 100644
--- a/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.scss
+++ b/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.scss
@@ -109,4 +109,44 @@
     background-repeat: no-repeat;
     width: 100%;
     height: 457px;
+  }
+
+  .banner-image-v2 {
+    width: 100%;
+    height: 100%;
+  }
+
+  @media screen and (min-width: 344px) and (max-width: 882px) {
+    .banner-new {
+      height: 250px;
+    }
+    .description-v2 {
+      padding: 0 15px;
+    }
+  }
+
+  @media screen and (min-width: 430px) and (max-width: 932px) {
+    .banner-new {
+      height: 260px;
+    }
+    .description-v2 {
+      padding: 0 15px;
+    }
+  }
+  @media screen and (min-width: 540px) and (max-width: 720px) {
+    .banner-new {
+      height: 325px;
+    }
+    .description-v2 {
+      padding: 0 15px;
+    }
+  }
+
+  @media screen and (min-width: 768px) and (max-width: 1180px) {
+    .banner-new {
+      height: 320px;
+    }
+    .description-v2 {
+      padding: 0 15px;
+    }
   }
\ No newline at end of file
diff --git a/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.ts b/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.ts
index 0435108fe..d00184e51 100644
--- a/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.ts
+++ b/project/ws/app/src/lib/routes/karma-programs/karma-programs-microsite-v2/karma-programs-microsite-v2.component.ts
@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, HostListener, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { CommonMethodsService } from '@sunbird-cb/consumption'
 import { KarmaProgramsService } from '../service/karma-programs.service'
 import { EventService, WsEvents, MultilingualTranslationsService, ConfigurationsService } from '@sunbird-cb/utils-v2'
 import { TranslateService } from '@ngx-translate/core'
+import { DomSanitizer } from '@angular/platform-browser'
 
 @Component({
   selector: 'ws-app-karma-programs-microsite-v2',
@@ -28,13 +29,16 @@ export class KarmaProgramsMicrositeV2Component implements OnInit {
   ]
   loadContentSearch = false
   descriptionMaxLength = 750
+  bannerImages: any
+  currentImageUrl: any
   constructor(private route: ActivatedRoute,
               public contentSvc: KarmaProgramsService,
               private translate: TranslateService,
               private langtranslations: MultilingualTranslationsService,
               public eventSvc: EventService,
               private configSvc: ConfigurationsService,
-              public commonSvc: CommonMethodsService) {
+              public commonSvc: CommonMethodsService,
+              private sanitizer: DomSanitizer) {
                 this.langtranslations.languageSelectedObservable.subscribe(() => {
                   if (localStorage.getItem('websiteLanguage')) {
                     this.translate.setDefaultLang('en')
@@ -61,12 +65,50 @@ export class KarmaProgramsMicrositeV2Component implements OnInit {
       && this.route.snapshot.data.formData.data.result.form.data.sectionList
     ) {
       this.sectionList = this.route.snapshot.data.formData.data.result.form.data.sectionList
-
+      let bannerSection = this.sectionList.find((ele: any) => ele.key === 'bannerSection' && ele.enabled)
+      if (bannerSection && bannerSection.column[0] &&
+        bannerSection.column[0].data && bannerSection.column[0].data.versioning) {
+          this.bannerImages = this.sectionList[0].column[0].data.bannerImagesV2
+          if (this.bannerImages) {
+            this.setBackgroundImage()
+          }
+      }
+      // if (this.sectionList[0] && this.sectionList[0].enabled && this.sectionList[0].column[0] &&
+      //     this.sectionList[0].column[0].data &&
+      //     this.sectionList[0].column[0].data.versioning) {
+      //   this.bannerImages = this.sectionList[0].column[0].data.bannerImagesV2
+      //   if (this.bannerImages) {
+      //     this.setBackgroundImage()
+      //   }
+      // }
       this.getDataFromSearch()
     }
 
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.setBackgroundImage();
+  }
+
+  richTextContent(content: any) {
+    return this.sanitizer.bypassSecurityTrustHtml(content)
+  }
+
+  setBackgroundImage() {
+    const width = window.innerWidth;
+    if (width < 380) {
+      this.currentImageUrl = this.bannerImages.s;
+    } else if (width >= 380 && width < 600) {
+      this.currentImageUrl = this.bannerImages.m;
+    } else if (width >= 600 && width < 900) {
+      this.currentImageUrl = this.bannerImages.l;
+    } else if (width >= 900 && width < 1200) {
+      this.currentImageUrl = this.bannerImages.xl;
+    } else {
+      this.currentImageUrl = this.bannerImages.xxl;
+    }
+  }
   async getDataFromSearch(requestData?: any) {
     const request  = requestData || this.formRequest()
     const sectionData = this.sectionList.filter((ele: any) => ele.key === 'contentSearch')
diff --git a/project/ws/app/src/lib/routes/karma-programs/karma-programs.module.ts b/project/ws/app/src/lib/routes/karma-programs/karma-programs.module.ts
index 2832daef5..9a35a419f 100644
--- a/project/ws/app/src/lib/routes/karma-programs/karma-programs.module.ts
+++ b/project/ws/app/src/lib/routes/karma-programs/karma-programs.module.ts
@@ -6,7 +6,7 @@ import { CardsModule, CommonMethodsService, SlidersLibModule } from '@sunbird-cb
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatProgressSpinnerModule, MatSelectModule, MatSidenavModule } from '@angular/material'
 import { KarmaProgramsService } from './service/karma-programs.service'
-import { PipeFilterV2Module, PipeOrderByModule } from '@sunbird-cb/utils-v2'
+import { ImageResponsiveModule, PipeFilterV2Module, PipeOrderByModule } from '@sunbird-cb/utils-v2'
 import { BtnPageBackModule } from '@sunbird-cb/collection/src/public-api'
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
 import { HttpClient } from '@angular/common/http'
@@ -38,6 +38,7 @@ import { KarmaProgramsMicrositeV2Component } from './karma-programs-microsite-v2
     MatIconModule,
     MatMenuModule,
     MatButtonModule,
+    ImageResponsiveModule,
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,