From 533633c4fea96db522c0bb1fb81749313d073a02 Mon Sep 17 00:00:00 2001
From: saurabh balke <20bcs201@iiitdmj.ac.in>
Date: Thu, 3 Aug 2023 11:47:39 +0530
Subject: [PATCH 1/3] added distinction between optional materials and regular
 content within the common consumption package.

---
 .../src/lib/card/toc-card/toc-card.component.html               | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html b/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
index ec1b6d77..2803b57b 100644
--- a/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
+++ b/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
@@ -62,7 +62,9 @@ <h4 *ngIf="bestScoreLabel" class="sbchapter__item__score pr-8 ml-auto" title="{{
       class="sb_success_check" alt="Complated Icon" mat-list-icon>
     <img width="32" height="32" [src]="content?.appIcon || fallbackImg" (error)="img.src = fallbackImg"
       alt="{{content?.name}} Image" #img mat-list-icon />
+      <div *ngIf="content?.relationalMetadata?.optional">Optional</div>
     <div mat-line>{{content?.name}}</div>
+    <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress</div>
     <div mat-line *ngIf="bestScoreLabel">{{bestScoreLabel}}</div>
     <button class="sbchapter__play__btn" *ngIf="!isTrackable(content) && playBtnConfig.show"
       (click)="$event.stopImmediatePropagation(); $event.preventDefault(); onPlayButtonClick($event)" tabindex="0">

From e7195f78ce34afb750a1c72c07e87f08d2b2bf73 Mon Sep 17 00:00:00 2001
From: saurabh balke <20bcs201@iiitdmj.ac.in>
Date: Wed, 6 Sep 2023 22:01:12 +0530
Subject: [PATCH 2/3] added changes as per review

---
 .../src/lib/card/toc-card/toc-card.component.html  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html b/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
index 2803b57b..344819c5 100644
--- a/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
+++ b/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
@@ -17,7 +17,8 @@ <h4 class="sbchapter__item__title sbchapter__item__title text-left sb__ellipsis
     attr.aria-pressed="{{activeContent?.sbUniqueIdentifier === content?.sbUniqueIdentifier}}" tabindex="0"
     [ngClass]="{'active': activeContent?.sbUniqueIdentifier === content?.sbUniqueIdentifier}">
 
-    <div mat-line>{{content?.name}}</div>
+    <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+    <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <img width="32" height="32" [src]="content?.appIcon || fallbackImg" (error)="img.src = fallbackImg" alt="" #img />
 
   </mat-list-item>
@@ -62,9 +63,8 @@ <h4 *ngIf="bestScoreLabel" class="sbchapter__item__score pr-8 ml-auto" title="{{
       class="sb_success_check" alt="Complated Icon" mat-list-icon>
     <img width="32" height="32" [src]="content?.appIcon || fallbackImg" (error)="img.src = fallbackImg"
       alt="{{content?.name}} Image" #img mat-list-icon />
-      <div *ngIf="content?.relationalMetadata?.optional">Optional</div>
-    <div mat-line>{{content?.name}}</div>
-    <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress</div>
+      <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+      <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <div mat-line *ngIf="bestScoreLabel">{{bestScoreLabel}}</div>
     <button class="sbchapter__play__btn" *ngIf="!isTrackable(content) && playBtnConfig.show"
       (click)="$event.stopImmediatePropagation(); $event.preventDefault(); onPlayButtonClick($event)" tabindex="0">
@@ -113,7 +113,8 @@ <h4 *ngIf="bestScoreLabel" class="sbchapter__item__score pr-8 ml-auto" title="{{
       </i>
       <img [src]="fallbackImg" width="32" height="32" *ngIf="!content?.appIcon" alt="image" #img />
     </div>
-    <div mat-line>{{content?.name}}</div>
+    <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+    <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <div mat-line *ngIf="bestScoreLabel && displayScore">{{bestScoreLabel}}</div>
 
   </mat-list-item>
@@ -165,7 +166,8 @@ <h4 *ngIf="bestScoreLabel" class="sbchapter__item__score pr-8 ml-auto" title="{{
       </i>
       <img [src]="fallbackImg" width="32" height="32" *ngIf="!content?.appIcon" alt="image" #img />
     </div>
-    <div >{{content?.name}}</div>
+    <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+    <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <div mat-line *ngIf="bestScoreLabel && displayScore">{{bestScoreLabel}}</div>
     <button class="sbchapter__play__btn"
       *ngIf="!(content?.contentData?.trackable?.enabled === 'Yes') && playBtnConfig.show"

From 0253bc5c6d5433dd0a62311118b9e7fdf8b5af04 Mon Sep 17 00:00:00 2001
From: saurabh balke <20bcs201@iiitdmj.ac.in>
Date: Thu, 7 Sep 2023 00:27:40 +0530
Subject: [PATCH 3/3] added changes as per review

---
 .../src/lib/card/toc-card/toc-card.component.html         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html b/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
index 344819c5..28ce72be 100644
--- a/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
+++ b/projects/common-consumption/src/lib/card/toc-card/toc-card.component.html
@@ -17,7 +17,7 @@ <h4 class="sbchapter__item__title sbchapter__item__title text-left sb__ellipsis
     attr.aria-pressed="{{activeContent?.sbUniqueIdentifier === content?.sbUniqueIdentifier}}" tabindex="0"
     [ngClass]="{'active': activeContent?.sbUniqueIdentifier === content?.sbUniqueIdentifier}">
 
-    <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+    <div mat-line>{{ content?.relationalMetadata?.optional ? "Addition Material: " + content?.name : content?.name }}</div>
     <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <img width="32" height="32" [src]="content?.appIcon || fallbackImg" (error)="img.src = fallbackImg" alt="" #img />
 
@@ -63,7 +63,7 @@ <h4 *ngIf="bestScoreLabel" class="sbchapter__item__score pr-8 ml-auto" title="{{
       class="sb_success_check" alt="Complated Icon" mat-list-icon>
     <img width="32" height="32" [src]="content?.appIcon || fallbackImg" (error)="img.src = fallbackImg"
       alt="{{content?.name}} Image" #img mat-list-icon />
-      <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+      <div mat-line>{{ content?.relationalMetadata?.optional ? "Addition Material: " + content?.name : content?.name }}</div>
       <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <div mat-line *ngIf="bestScoreLabel">{{bestScoreLabel}}</div>
     <button class="sbchapter__play__btn" *ngIf="!isTrackable(content) && playBtnConfig.show"
@@ -113,7 +113,7 @@ <h4 *ngIf="bestScoreLabel" class="sbchapter__item__score pr-8 ml-auto" title="{{
       </i>
       <img [src]="fallbackImg" width="32" height="32" *ngIf="!content?.appIcon" alt="image" #img />
     </div>
-    <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+    <div mat-line>{{ content?.relationalMetadata?.optional ? "Addition Material: " + content?.name : content?.name }}</div>
     <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <div mat-line *ngIf="bestScoreLabel && displayScore">{{bestScoreLabel}}</div>
 
@@ -166,7 +166,7 @@ <h4 *ngIf="bestScoreLabel" class="sbchapter__item__score pr-8 ml-auto" title="{{
       </i>
       <img [src]="fallbackImg" width="32" height="32" *ngIf="!content?.appIcon" alt="image" #img />
     </div>
-    <div mat-line>{{content?.relationalMetadata?.optional? "Addition Material: ":""}}{{content?.name}}</div>
+    <div mat-line>{{ content?.relationalMetadata?.optional ? "Addition Material: " + content?.name : content?.name }}</div>
     <div mat-line *ngIf="content?.relationalMetadata?.optional" style="color: gray; font-size: smaller;"> This material is optional and will not impact your course progress% or final score</div>
     <div mat-line *ngIf="bestScoreLabel && displayScore">{{bestScoreLabel}}</div>
     <button class="sbchapter__play__btn"