npm - @sunbird-cb/consumption - Versions diffs - 0.0.37 → 0.0.38 - Mend

@sunbird-cb/consumption 0.0.37 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/fesm2015/sunbird-cb-consumption.js CHANGED Viewed

@@ -6190,9 +6190,9 @@ class CalenderComponent {
                         let prevData = this.trainings[resp.startDate];
                         /** @type {?} */
                         let location = resp.eventType;
-                        if (resp.venue && location !== "Online") {
+                        if (resp.location && location !== "Online") {
                             /** @type {?} */
-                            const jsonResp = JSON.parse(resp.venue);
+                            const jsonResp = JSON.parse(resp.location);
                             location = jsonResp['address'];
                         }
                         /** @type {?} */
@@ -6248,7 +6248,7 @@ class CalenderComponent {
         const strHours = hours < 10 ? '0' + hours : hours.toString();
         /** @type {?} */
         const strMinutes = minutes < 10 ? '0' + minutes : minutes.toString();
-        return `${strHours}:${strMinutes}: ${ampm}`;
+        return `${strHours}:${strMinutes} ${ampm}`;
     }
     /**
      * @param {?} cDate
@@ -6328,7 +6328,7 @@ CalenderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-calender',
                 template: "<div class=\"calendar-header flex flex-row c-padding center gap-2\" *ngIf=\"showHeader\">\n    <div class=\"pt-3\">{{ objectData?.title }}:</div>\n    <div class=\"choose-month\">\n        <mat-form-field class=\"custom-month\">\n            <mat-select matNativeControl panelClass=\"custom-select\" [ngModel]=\"selectedMonth\" (ngModelChange)=\"selectMonth($event)\" class=\"month-select\">\n                <span *ngFor=\"let month of monthsDropdown\">\n                    <mat-option [value]=\"month\">{{month}}</mat-option>\n                </span>\n            </mat-select>\n        </mat-form-field>\n    </div>\n</div>\n<div *ngIf=\"layoutType==='grid'\">\n    <div *ngFor=\"let obj of getKeys(trainings);  let i = index\">\n        <sb-uic-calender-day [day]=\"trainings[obj]\"\n            [layoutType]=\"layoutType\"\n            [objectData]=\"objectData\"\n            [dataLoading]=\"isDataLoading\"\n            [eventDate]=\"obj\"\n            [rowId]=\"i\">\n        </sb-uic-calender-day>\n    </div>    \n</div>\n<div *ngIf=\"layoutType==='row'\">\n    <div *ngFor=\"let obj of getKeys(trainings); let j = index\">\n        <sb-uic-calender-day [day]=\"trainings[obj]\"\n            [layoutType]=\"layoutType\"\n            [objectData]=\"objectData\"\n            [dataLoading]=\"isDataLoading\"\n            [eventDate]=\"obj\"\n            [rowId]=\"j\">\n        </sb-uic-calender-day>\n    </div>\n</div>",
-                styles: [".calendar-header{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.c-padding{padding:0}.center{align-items:center}::ng-deep .custom-month .mat-form-field-wrapper{padding-bottom:0!important;width:110px}::ng-deep .custom-month .mat-form-field.mat-focused.mat-primary .mat-select-arrow{color:#000!important}::ng-deep .custom-month .mat-select-value{width:89%}::ng-deep .custom-month .mat-select-value-text{font-weight:600}@media screen and (max-width:768px){.c-padding{padding:0 1.25rem 1rem}.calendar-header{font-size:15px}}"]
+                styles: [".calendar-header{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.c-padding{padding:0}.center{align-items:center}::ng-deep .custom-month .mat-form-field-wrapper{padding-bottom:0!important;width:145px}::ng-deep .custom-month .mat-form-field.mat-focused.mat-primary .mat-select-arrow{color:#000!important}::ng-deep .custom-month .mat-select-value{width:89%}::ng-deep .mat-select-arrow{color:#000!important}::ng-deep .custom-month .mat-select-value-text{font-weight:600}@media screen and (max-width:768px){.c-padding{padding:0 1.25rem 1rem}.calendar-header{font-size:15px}}"]
             }] }
 ];
 /** @nocollapse */
@@ -6435,8 +6435,8 @@ class CalenderDayComponent {
 CalenderDayComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-calender-day',
-                template: "<div *ngIf=\"layoutType==='grid' && !dataLoading\">\n    <div class=\"p-3 event-day my-3\"\n        [style.backgroundColor]=\"objectData?.webBackgroundColor\"\n        [style.borderColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\">\n    \n        <div class=\"flex item-top gap-8 {{ day.length ? '' : 'aliginCenter'}}\">\n            <div class=\"event-date\">\n                <div class=\"currentDay\"\n                    [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                    [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                    {{formatDate(eventDate, 'web')}}\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex p-4 item-center events-list mb-{{day.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\"\n                    *ngFor=\"let event of day; let i = index\" >\n                    <div>\n                        <div class=\"flex flex-row item-center gap-10 pb-2\">\n                            <div class=\"flex item-center gap-1 row1 col1\">\n                                <div><mat-icon class=\"icon-web\">schedule</mat-icon> </div>\n                                <div>{{event.startTime}} to {{event.endTime}}</div>\n                            </div>\n                            <div class=\"flex item-center col1\">{{event.title}}</div>\n                        </div>\n                        <div class=\"flex flex-row item-center gap-10\">\n                            <div class=\"flex item-center gap-1 row1 col1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                                <div><mat-icon class=\"icon-web\">date_range</mat-icon> </div>\n                                <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                            </div>\n                            <div class=\"flex item-center col1\">\n                                <div><mat-icon class=\"icon-web\">location_on</mat-icon> </div>\n                                <div class=\"flex item-center\">{{event.location}}</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"visit-link flex gap-2\"\n                        *ngIf=\"event?.registrationLink\">\n                        <div (click)=\"openLink(event?.registrationLink)\">Visit</div>\n                        <div (click)=\"openLink(event?.registrationLink)\"><mat-icon class=\"visit-icon\">open_in_new</mat-icon> </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"!day.length\">\n                No trainings.\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"layoutType==='row' && !dataLoading\">\n    <div class=\"p-5 mb-{{day?.length === (rowId+1) ? '0' : '3'}}\"\n        [style.backgroundColor]=\"objectData?.mobileBackground\">\n        <div class=\"flex item-center gap-4\">\n            <div class=\"event-date\">\n                <div class=\"flex flex-col\">\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[0]}}</div>\n                    <div class=\"mob-currentDay\"\n                        [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                        [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                        {{formatDate(eventDate, 'mob').split(' ')[1]}}\n                    </div>\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[2]}}</div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex flex-col mob-events-list p-3 mb-{{day.length === (i+1) ? '0' : '2'}}\"\n                    *ngFor=\"let event of day; let i = index\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\">\n                    <div>\n                        <div class=\"flex pb-2\">{{event.title}}</div>\n                        <div class=\"flex pb-1\">\n                            <div><mat-icon class=\"mob-icon\">schedule</mat-icon> </div>\n                            <div>{{event.startTime}} to {{event.endTime}}</div>\n                        </div>\n                        <div class=\"flex pb-1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                            <div><mat-icon class=\"mob-icon\">date_range</mat-icon> </div>\n                            <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                        </div>\n                        <div class=\"flex\">\n                            <div><mat-icon class=\"mob-icon\">location_on</mat-icon> </div>\n                            <div class=\"flex item-center\">{{event.location}}</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full flex no-data\" *ngIf=\"!day.length\">\n                No trainings.\n            </div>\n        </div>        \n    </div>    \n</div>\n\n<!-- skeleton  loaders -->\n<div *ngIf=\"dataLoading\">\n    <div *ngIf=\"layoutType==='grid'\">\n        <div class=\"hidden md:block\">\n            <div class=\"p-3 event-day my-3\"\n                [style.backgroundColor]=\"'#FFF'\">\n                <div class=\"flex item-top gap-8\">\n                    <div class=\"event-date\">\n                        <div class=\"currentDay\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'90px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>    \n                        </div>\n                    </div>\n                    <div class=\"details w-full\">\n                        <div class=\"flex p-4 item-center events-list mb-2 gap-20\">\n                            <div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                            </div>\n                            <div class=\"visit-link flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"layoutType==='row'\">\n        <div class=\"block md:hidden\">\n            <div class=\"p-5\" \n            [style.backgroundColor]=\"'#FFFFFF'\">\n            <div class=\"flex item-center gap-4\">\n                <div class=\"event-date\">\n                    <div class=\"flex flex-col\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                [height]=\"'90px'\"></sb-uic-skeleton-loader> \n                    </div>\n                </div>\n                <div class=\"details w-full\">\n                    <div class=\"flex flex-col mob-events-list p-3 mb-2\">\n                        <div>\n                            <div class=\"flex pb-2\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'265px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex item-center\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>",
-                styles: [".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%;text-transform:uppercase}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.icon-web{font-size:17px;height:17px}.upcase{text-transform:uppercase}.aliginCenter,.col1{align-items:center}.visit-link{cursor:pointer;align-items:center;justify-content:center}.visit-icon{font-size:17px;height:17px;color:#1b4ca1}.currentDay{padding:5px;border-radius:20px}.mob-currentDay{padding:8px;border-radius:20px}.mob-events-list{border:1px solid #e8e6e5;border-radius:10px;justify-content:space-between;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.mob-icon{font-size:17px;height:17px}.no-data{display:flex;align-items:center}"]
+                template: "<div *ngIf=\"layoutType==='grid' && !dataLoading\">\n    <div class=\"p-3 event-day my-3\"\n        [style.backgroundColor]=\"objectData?.webBackgroundColor\"\n        [style.borderColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\">\n    \n        <div class=\"flex item-top gap-8 {{ day.length ? '' : 'aliginCenter'}}\">\n            <div class=\"event-date\">\n                <div class=\"currentDay\"\n                    [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                    [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                    {{formatDate(eventDate, 'web')}}\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex p-4 item-center events-list mb-{{day.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\"\n                    *ngFor=\"let event of day; let i = index\" >\n                    <div>\n                        <div class=\"flex flex-row item-center gap-10 pb-2\">\n                            <div class=\"flex item-center gap-1 row1 col1 range-width\">\n                                <div><mat-icon class=\"icon-web\">schedule</mat-icon> </div>\n                                <div>{{event.startTime}} to {{event.endTime}}</div>\n                            </div>\n                            <div class=\"flex item-center col1 \">{{event.title}}</div>\n                        </div>\n                        <div class=\"flex flex-row item-center gap-10\">\n                            <div class=\"flex item-center gap-1 row1 col1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                                <div><mat-icon class=\"icon-web\">date_range</mat-icon> </div>\n                                <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                            </div>\n                            <div class=\"flex item-center col1\">\n                                <div><mat-icon class=\"icon-web\">location_on</mat-icon> </div>\n                                <div class=\"flex item-center\">{{event.location}}</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"visit-link flex gap-2\"\n                        *ngIf=\"event?.registrationLink\">\n                        <div (click)=\"openLink(event?.registrationLink)\">Visit</div>\n                        <div (click)=\"openLink(event?.registrationLink)\"><mat-icon class=\"visit-icon\">open_in_new</mat-icon> </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"!day.length\">\n                No trainings.\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"layoutType==='row' && !dataLoading\">\n    <div class=\"pl-5 pr-5 mb-{{day?.length === (rowId+1) ? '0' : '3'}}\"\n        >\n        <div class=\"flex item-center gap-4\">\n            <div class=\"event-date\">\n                <div class=\"flex flex-col\">\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[0]}}</div>\n                    <div class=\"mob-currentDay\"\n                        [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                        [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                        {{formatDate(eventDate, 'mob').split(' ')[1]}}\n                    </div>\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[2]}}</div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex flex-col mob-events-list p-3 mb-{{day.length === (i+1) ? '0' : '2'}}\"\n                    *ngFor=\"let event of day; let i = index\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\">\n                    <div>\n                        <div class=\"flex pb-2\">{{event.title}}</div>\n                        <div class=\"flex pb-1\">\n                            <div><mat-icon class=\"mob-icon\">schedule</mat-icon> </div>\n                            <div>{{event.startTime}} to {{event.endTime}}</div>\n                        </div>\n                        <div class=\"flex pb-1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                            <div><mat-icon class=\"mob-icon\">date_range</mat-icon> </div>\n                            <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                        </div>\n                        <div class=\"flex\">\n                            <div><mat-icon class=\"mob-icon\">location_on</mat-icon> </div>\n                            <div class=\"flex item-center\">{{event.location}}</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full p-3 flex no-data\" *ngIf=\"!day.length\" \n                [style.backgroundColor]=\"objectData?.mobileBackground\">\n                No trainings.\n            </div>\n        </div>        \n    </div>    \n</div>\n\n<!-- skeleton  loaders -->\n<div *ngIf=\"dataLoading\">\n    <div *ngIf=\"layoutType==='grid'\">\n        <div class=\"hidden md:block\">\n            <div class=\"p-3 event-day my-3\"\n                [style.backgroundColor]=\"'#FFF'\">\n                <div class=\"flex item-top gap-8\">\n                    <div class=\"event-date\">\n                        <div class=\"currentDay\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'90px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>    \n                        </div>\n                    </div>\n                    <div class=\"details w-full\">\n                        <div class=\"flex p-4 item-center events-list mb-2 gap-20\">\n                            <div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                            </div>\n                            <div class=\"visit-link flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"layoutType==='row'\">\n        <div class=\"block md:hidden\">\n            <div class=\"p-5\" \n            [style.backgroundColor]=\"'#FFFFFF'\">\n            <div class=\"flex item-center gap-4\">\n                <div class=\"event-date\">\n                    <div class=\"flex flex-col\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                [height]=\"'90px'\"></sb-uic-skeleton-loader> \n                    </div>\n                </div>\n                <div class=\"details w-full\">\n                    <div class=\"flex flex-col mob-events-list p-3 mb-2\">\n                        <div>\n                            <div class=\"flex pb-2\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'265px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex item-center\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>",
+                styles: [".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%;text-transform:uppercase}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.icon-web{font-size:17px;height:17px}.upcase{text-transform:uppercase}.aliginCenter,.col1{align-items:center}.range-width{min-width:234px}.visit-link{cursor:pointer;align-items:center;justify-content:center}.visit-icon{font-size:17px;height:17px;color:#1b4ca1}.currentDay{padding:5px;border-radius:20px}.mob-currentDay{padding:8px;border-radius:20px}.mob-events-list{border:1px solid #e8e6e5;border-radius:10px;justify-content:space-between;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.mob-icon{font-size:17px;height:17px}.no-data{display:flex;align-items:center;border-radius:10px}"]
             }] }
 ];
 /** @nocollapse */
@@ -7637,7 +7637,7 @@ class CardsComponent extends WidgetBaseComponent {
 CardsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-cards',
-                template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" \n  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\">\n  </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>",
+                template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-home-lib'\" [ngTemplateOutlet]=\"cardMdoHome\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-v2-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgramV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitExtLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-ext-lib'\" [ngTemplateOutlet]=\"cardPortraitExtLib\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" \n  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [widgetData]=\"widgetData\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\">\n  </sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n<ng-template #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2\n    (contentData)=\"getRedirectUrlData($event)\"\n    (triggerTelemetry)=\"raiseCardClick($event)\"\n    [cbPlanMapData]=\"cbPlanMapData\"\n    [isCardLoading]=\"false\"\n    [widgetData]=\"widgetData\">\n  </sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdoHome>\n  <sb-uic-card-mdo-channel-v1 [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel-v1>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgramSkeleton>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" \n  [isCardLoading]=\"false\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>\n<ng-template #cardKarmaProgramV2>\n  <!-- <sb-uic-card-karma-programs-v2 [widgetData]=\"widgetData\"><sb-uic-card-karma-programs-v2> -->\n</ng-template>\n\n<!-- cios card -->\n<ng-template #cardPortraitExtLibSkeleton>\n  <sb-uic-card-portrait-ext [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait-ext>\n</ng-template>\n<ng-template #cardPortraitExtLib>\n  <sb-uic-card-portrait-ext \n  [cbPlanMapData]=\"cbPlanMapData\"\n  (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait-ext>\n</ng-template>",
                 styles: [""]
             }] }
 ];
@@ -8769,7 +8769,7 @@ class CardMDOChannelComponent {
 CardMDOChannelComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-mdo-channel',
-                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData?.content\">\n            <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData?.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData?.content?.orgName\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n                                    <ng-container *ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData?.content?.imgUrl | pipePublicURL\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                    class=\"flex-1 text-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                    {{ widgetData?.content?.orgName }}\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData?.content\">\n            <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData?.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData?.content?.orgName\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n                                    <ng-container *ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                    class=\"flex-1 text-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                    {{ widgetData?.content?.orgName }}\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
                 styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}@media screen and (max-width:768px){.card-channels-container{width:100%;margin:0}}"]
             }] }
 ];
@@ -8916,8 +8916,8 @@ class CardWideV2Component {
 CardWideV2Component.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-wide-v2',
-                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-wide-v2 padding-remove position-relative flex {{widgetData?.cardCustomeClass}}\">\n      <div class=\"imageholder \">\n        <img mat-card-image class=\"margin-remove\"\n        [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon  | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n        [alt]=\"widgetData?.content?.name\">\n        <div class=\"source-div\" [hidden]=\"true\">\n          <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n            [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n        </div>\n        <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n          <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n          <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n        </div>\n        <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n          <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n            cbpData: cbPlanMapData[widgetData?.content?.identifier]\n          }}\"></ng-container>\n        </ng-container>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex flex-between margin-remove\">\n          <div class=\"flex flex-end course_v2\">\n            <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <span class=\"ws-mat-black60-text font-normal mat-caption \">\n                {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n                <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n              </span>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"flex main_title_box\">\n          <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n            <a (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n              {{widgetData?.content?.name}}\n            </a>\n        </p>\n        </div>\n\n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle provider\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n            </div>\n            <span class=\"org-text\">By&nbsp;\n              <!-- {{'cardcontentv2.by' | translate}}  -->\n              {{widgetData?.content?.organisation[0] }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon>star</mat-icon>\n              <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n  </mat-card>\n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n</ng-container>\n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"\">\n        <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex margin-remove\">\n          <div class=\"flex flex-end \">\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n  \n        <div class=\"flex main_title_box\">\n          <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n            <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        <!-- </p> -->\n        </div>\n  \n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>",
-                styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-all;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:30px;height:30px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.min-width-763{min-width:763px;background-color:#fff}"]
+                template: "<ng-container *ngIf=\"!isCardLoading\">\n  <mat-card class=\"card-wide-v2 padding-remove position-relative flex {{widgetData?.cardCustomeClass}}\">\n      <div class=\"imageholder \">\n        <img mat-card-image class=\"margin-remove\"\n        [src]=\"widgetData?.content?.posterImage || widgetData?.content?.appIcon  | pipePublicURL\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n        [alt]=\"widgetData?.content?.name\">\n        <div class=\"source-div\" [hidden]=\"true\">\n          <img [src]=\"widgetData?.content?.creatorLogo\" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n            [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n        </div>\n        <div class=\"duration-box right-corner\" *ngIf=\"widgetData?.content?.duration > 0\">\n          <mat-icon class=\"mat-icon main_icon mr-1\">access_time</mat-icon>\n          <span class=\" ws-mat-white-text duration\"> {{ (widgetData?.content?.duration || 120)| pipeDurationTransform: 'hms' }}</span>\n        </div>\n        <ng-container *ngIf=\"cbPlanMapData && cbPlanMapData[widgetData?.content?.identifier]\">\n          <ng-container [ngTemplateOutlet]=\"cbpPlan\" [ngTemplateOutletContext]=\"{data: {\n            cbpData: cbPlanMapData[widgetData?.content?.identifier]\n          }}\"></ng-container>\n        </ng-container>\n      </div>\n      <mat-card-content class=\"mat-text-box mb-0\">\n        <div class=\"course_widget flex flex-between margin-remove\">\n          <div class=\"flex flex-end course_v2\">\n            <ng-container *ngIf=\"widgetData?.content?.contentType === 'Resource' || widgetData?.content?.contentType === 'Course' || widgetData?.content?.contentType === 'Module'\">\n              <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n              <span class=\"ws-mat-black60-text font-normal mat-caption \">\n                {{widgetData?.content?.primaryCategory || widgetData?.content?.contentType}}\n                <!-- {{ translateLabel(widgetData.content.primaryCategory || widgetData.content.contentType, 'searchfilters') }} -->\n              </span>\n            </ng-container>\n          </div>\n        </div>\n\n        <div class=\"flex main_title_box\">\n          <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\">\n            <a (click)=\"raiseTelemetry(widgetData?.content);getRedirectUrlData(widgetData?.content); $event.stopPropagation()\">\n              {{widgetData?.content?.name}}\n            </a>\n        </p>\n        </div>\n\n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle provider\">\n            <div class=\"course_logo_box\">\n              <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n              [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n            </div>\n            <span class=\"org-text\">By&nbsp;\n              <!-- {{'cardcontentv2.by' | translate}}  -->\n              {{widgetData?.content?.organisation[0] }}</span>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle\" *ngIf=\"widgetData?.content?.avgRating\">\n              <mat-icon>star</mat-icon>\n              <span class=\"rating-number\">{{widgetData?.content?.avgRating}}</span>\n            </div>\n            <!-- <span class=\"most-enrolled-text margin-left-m\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostEnrolled')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostEnrolled' | translate }}</span> -->\n            </ng-container>\n            <ng-container *ngIf=\"widgetData?.content?.additionalTags && widgetData?.content?.additionalTags.includes('mostTrending')\">\n              <!-- <span class=\"most-enrolled-text margin-left-xs\">{{ 'cardcontentv2.mostTrending' | translate }}</span> -->\n            </ng-container>\n          </div>\n        </div>\n      </mat-card-content>\n  </mat-card>\n  <ng-template #cbpPlan  let-data=\"data\">\n    <div class=\"cbp-mark left-0 border-top-radius\">\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.UPCOMING\"  class=\"cbp-warning\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.SUCCESS\"  class=\"cbp-success\">{{data?.cbpData?.endDate | date: 'd MMM, y'}}</p>\n      <p *ngIf=\"data?.cbpData?.planDuration === acbpConstants?.OVERDUE\" class=\"cbp-danger\">{{'OverDue' }}</p>\n    </div>\n  </ng-template>\n</ng-container>\n  <ng-container *ngIf=\"isCardLoading\">\n    <mat-card class=\"card-wide-v2 padding-remove position-relative flex\">\n      <div class=\"\">\n        <sb-uic-skeleton-loader [width]=\"'300px'\" [height]=\"'100%'\" class=\"h-full\" [bindingClass]=\"'flex rounded h-full min-height-width'\"></sb-uic-skeleton-loader>\n      </div>\n      <mat-card-content class=\"mat-text-box\">\n        <div class=\"course_widget flex margin-remove\">\n          <div class=\"flex flex-end \">\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'21px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n  \n        <div class=\"flex main_title_box\">\n          <!-- <p class=\"mat-subheading-1 title-text font-bold-imp cursor-pointer content-title\"> -->\n            <sb-uic-skeleton-loader [width]=\"'100%'\" [height]=\"'21px'\" class=\"w-full h-full mt-2\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n        <!-- </p> -->\n        </div>\n  \n        <div class=\"bottomsection\">\n          <div class=\"flex w-full flex-wrap flex-middle\">\n            <div class=\"course_logo_box mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'28px'\" [height]=\"'28px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'100px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n          <div class=\"flex flex-middle rating-session margin-top-xs\">\n            <div class=\"flex flex-middle mr-2\">\n              <sb-uic-skeleton-loader [width]=\"'50px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n            </div>\n            <sb-uic-skeleton-loader [width]=\"'80px'\" [height]=\"'16px'\" [bindingClass]=\"'flex rounded'\"></sb-uic-skeleton-loader>\n          </div>\n        </div>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>",
+                styles: [".course_widget{margin-top:10px}.course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.course_widget .main_icon{font-size:16px;width:16px;height:16px}.rating-session mat-icon{font-size:16px;height:16px;width:12px;padding-right:3px;color:#ef951e}.rating-session span{font-size:11px}.rating-session .most-enrolled-text{padding:0 8px;background:#ffea9e;border-radius:4px}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}.card-wide-v2{border-radius:12px;max-width:100%;min-width:784px;display:flex;background-color:#fff}.card-wide-v2 .title-text{word-break:break-all;white-space:initial;margin:8px 0 4px;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:40px}.card-wide-v2 .course_logo_box{width:30px;height:30px;background:#fff;border-radius:4px;box-sizing:border-box;border:1px solid rgba(0,0,0,.16)}.card-wide-v2 .course_logo_box img{height:28px;width:28px;display:inline-block;-o-object-fit:cover;object-fit:cover}.card-wide-v2 .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-v2 .org-text{font-size:14px;font-weight:400;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.card-wide-v2 .rating-session mat-icon{font-size:20px;height:20px;width:20px;color:#ef951e}.card-wide-v2 .rating-session .rating-number{font-size:14px}.card-wide-v2 .rating-session .most-enrolled-text{font-size:12px;padding:0 10px;background:#ffea9e;border-radius:4px}.card-wide-v2 .highlight_point_text{margin-top:15px}.card-wide-v2 ul.highlighting_list li{display:inline-block;padding-right:10px}.card-wide-v2 ul.highlighting_list li .rating-number{letter-spacing:0;color:#f69953}.card-wide-v2 ul.highlighting_list li.rating .mat-icon{width:16px;height:16px;display:inline-table;color:#f69953;font-size:18px;vertical-align:text-bottom}.card-wide-v2 img.text_seperator{vertical-align:middle}.card-wide-v2 .mat-text-box{padding:12px 12px 11px;box-sizing:border-box;width:calc(100% - 315px)}@media (max-width:992px){.card-wide-v2 .mat-text-box{width:66%;padding:8px;position:relative;height:auto}}.card-wide-v2 .mat-text-box p.mat-caption .mat-icon{vertical-align:middle;height:18px!important;width:16px!important;font-size:16px!important;line-height:1.2}.card-wide-v2 .mat-text-box p.mat-caption .title_icon{vertical-align:middle}.card-wide-v2 .imageholder{width:310px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card-wide-v2 .imageholder img{width:100%;display:block;border-radius:10px 0 0 10px;height:100%;max-height:172px;-o-object-fit:cover;object-fit:cover;vertical-align:middle}@media (max-width:992px){.card-wide-v2 .imageholder{width:34%;height:auto}.card-wide-v2 .imageholder img{height:auto}}.card-wide-v2 .imageholder .source-div{position:absolute;top:12px;right:12px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:98px;min-height:32px;max-width:98px;max-height:32px;display:flex;border-radius:16px;display:inline-flex}.card-wide-v2 .imageholder .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-wide-v2 .main_title_box{height:60px}.card-wide-v2 p.actionbtns{margin-bottom:0}.card-wide-v2 .contenticon{vertical-align:middle;margin-right:6px;width:16px;max-height:16px}@media only screen and (min-width:600px) and (max-width:959px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}@media only screen and (max-width:599px){.card-wide-v2{min-width:auto;display:flex;flex-direction:column;min-width:calc(100vw - 32px)}.card-wide-v2 .imageholder,.card-wide-v2 .mat-text-box{width:100%}.card-wide-v2 .provider{flex-wrap:nowrap}}.cbp-mark{border-radius:12px 0;opacity:1;background-image:linear-gradient(90deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 100%);position:absolute;top:0;padding:8px}.cbp-mark p{opacity:1;background-color:#fff;padding:4px;opacity:1;color:#1b2133;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:Regular;letter-spacing:.5px;text-align:left;line-height:12px;margin-bottom:0}.cbpwidth{width:340px}.cbp-plan{border-radius:4px;opacity:1;background-color:#1b4ca1;top:4px;left:4px;opacity:1;color:rgba(255,255,255,.95);font-family:Lato-Bold;font-size:12px;font-weight:700;font-style:normal;letter-spacing:.25px;text-align:center;line-height:16px;padding:4px}.cbp-info{opacity:1;color:#fff;font-family:Lato-Regular;font-size:10px;font-weight:400;font-style:normal;letter-spacing:.5px;text-align:left;line-height:12px;padding:2px}.cbp-danger{border-radius:2px;border:1px solid rgba(0,0,0,.08);background-color:#d13924!important;color:#fff!important;opacity:1}.cbp-success{border-radius:2px;border:1px solid #1d8922;background-color:#1d8922!important;color:#fff!important;opacity:1}.cbp-warning{border-radius:2px;border:1px solid #ef951e;background-color:#ef951e!important;color:#fff!important;opacity:1}.min-width-763{min-width:763px;background-color:#fff}.mb-0{margin-bottom:0!important}"]
             }] }
 ];
 /** @nocollapse */
@@ -9493,6 +9493,151 @@ if (false) {
     CardPortraitExtComponent.prototype.contSvc;
 }
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CardMdoChannelV1Component {
+    /**
+     * @param {?} events
+     * @param {?} translate
+     * @param {?} langtranslations
+     * @param {?} configSvc
+     * @param {?} contSvc
+     * @param {?} router
+     */
+    constructor(events, translate, langtranslations, configSvc, contSvc, router) {
+        this.events = events;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.configSvc = configSvc;
+        this.contSvc = contSvc;
+        this.router = router;
+        this.channelData = new EventEmitter();
+        this.emitTelemetry = new EventEmitter();
+        this.widgetType = '';
+        this.widgetSubType = '';
+        this.langtranslations.languageSelectedObservable.subscribe((/**
+         * @return {?}
+         */
+        () => {
+            if (localStorage.getItem('websiteLanguage')) {
+                this.translate.setDefaultLang('en');
+                /** @type {?} */
+                const lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                this.translate.use(lang);
+            }
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        /** @type {?} */
+        const instanceConfig = this.configSvc.instanceConfig;
+        if (instanceConfig) {
+            this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
+            this.sourceLogos = instanceConfig.sources;
+            this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '';
+        }
+        else {
+            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
+    }
+    /**
+     * @param {?} contentData
+     * @return {?}
+     */
+    raiseTelemetry(contentData) {
+        this.emitTelemetry.emit(contentData);
+        if (this.widgetData) {
+            contentData['typeOfTelemetry'] = 'mdo-channel';
+        }
+        this.contSvc.changeTelemetryData(contentData);
+    }
+    /**
+     * @param {?} channeldata
+     * @return {?}
+     */
+    channelClick(channeldata) {
+        this.channelData.emit(channeldata);
+    }
+    /**
+     * @param {?} content
+     * @return {?}
+     */
+    redirectTo(content) {
+        this.router.navigate([`/app/learn/mdo-channels/${content.orgName}/${content.identifier}/micro-sites`]);
+    }
+}
+CardMdoChannelV1Component.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-card-mdo-channel-v1',
+                template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData?.content\">\n            <a (click)=\"raiseTelemetry(widgetData?.content); redirectTo(widgetData?.content); $event.stopPropagation()\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData?.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                    [alt]=\"widgetData?.content?.orgName\" />\n                                  </ng-container>\n                                  <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n                                    <ng-container *ngIf=\"widgetData?.content?.imgUrl; else defaultImg\">\n                                      <img mat-card-image [src]=\"widgetData?.content?.imgUrl\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                                      [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-container>\n                                    <ng-template #defaultImg>\n                                      <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                      class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData?.content?.orgName\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                    class=\"flex-1 text-center  mat-subheading-2 title-text ws-mat-black-text\">\n                                    {{ widgetData?.content?.orgName }}\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                styles: [".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:156px;height:156px;max-height:156px;margin:20px 8px;background:#7faeff!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:86px;max-height:86px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}"]
+            }] }
+];
+/** @nocollapse */
+CardMdoChannelV1Component.ctorParameters = () => [
+    { type: EventService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService$1 },
+    { type: ConfigurationsService$1 },
+    { type: WidgetContentService },
+    { type: Router }
+];
+CardMdoChannelV1Component.propDecorators = {
+    widgetData: [{ type: Input }],
+    channelData: [{ type: Output }],
+    emitTelemetry: [{ type: Output }]
+};
+if (false) {
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.widgetData;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.channelData;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.emitTelemetry;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.defaultThumbnail;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.sourceLogos;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.defaultSLogo;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.widgetType;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.widgetSubType;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardMdoChannelV1Component.prototype.events;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardMdoChannelV1Component.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardMdoChannelV1Component.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardMdoChannelV1Component.prototype.configSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardMdoChannelV1Component.prototype.contSvc;
+    /** @type {?} */
+    CardMdoChannelV1Component.prototype.router;
+}
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -9511,7 +9656,8 @@ CardsModule.decorators = [
                     CardWideV2Component,
                     CardKarmaProgramsComponent,
                     CardKarmaProgramsV2Component,
-                    CardPortraitExtComponent
+                    CardPortraitExtComponent,
+                    CardMdoChannelV1Component
                 ],
                 imports: [
                     CommonModule,
@@ -10947,5 +11093,5 @@ UserContentRatingLibModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, CardKarmaProgramsComponent as ɵbb, CardKarmaProgramsV2Component as ɵbc, CardPortraitExtComponent as ɵbd, PipePublicURLModule as ɵbe, PipePublicURL as ɵbf, DisplayContentTypeLibModule as ɵbg, DisplayContentTypeLibComponent as ɵbh, DefaultThumbnailModule as ɵbi, DefaultThumbnailDirective as ɵbj, PipeDurationTransformModule as ɵbk, PipeDurationTransformPipe as ɵbl, CompetencyPassbookComponent as ɵbm, CompetencyPassbookService as ɵbn, PillsModule as ɵbo, PillsComponent as ɵbp, UserContentRatingLibComponent as ɵbq, ScrollableItemDirective as ɵbr, RatingService as ɵbs, UserContentRatingLibService as ɵbt, AvatarPhotoLibModule as ɵbu, AvatarPhotoLibComponent as ɵbv, MyHammerConfig$1 as ɵbw, SlidersNgContentLibModule as ɵbx, SlidersNgContentLibComponent as ɵby, ScrollableItemModule as ɵbz, MultilingualTranslationsService as ɵc, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
+export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentService, ContentStripWithTabsLibComponent as ɵa, WidgetUserService as ɵb, CardWideV2Component as ɵba, CardKarmaProgramsComponent as ɵbb, CardKarmaProgramsV2Component as ɵbc, CardPortraitExtComponent as ɵbd, CardMdoChannelV1Component as ɵbe, PipePublicURLModule as ɵbf, PipePublicURL as ɵbg, DisplayContentTypeLibModule as ɵbh, DisplayContentTypeLibComponent as ɵbi, DefaultThumbnailModule as ɵbj, DefaultThumbnailDirective as ɵbk, PipeDurationTransformModule as ɵbl, PipeDurationTransformPipe as ɵbm, CompetencyPassbookComponent as ɵbn, CompetencyPassbookService as ɵbo, PillsModule as ɵbp, PillsComponent as ɵbq, UserContentRatingLibComponent as ɵbr, ScrollableItemDirective as ɵbs, RatingService as ɵbt, UserContentRatingLibService as ɵbu, AvatarPhotoLibModule as ɵbv, AvatarPhotoLibComponent as ɵbw, MyHammerConfig$1 as ɵbx, SlidersNgContentLibModule as ɵby, SlidersNgContentLibComponent as ɵbz, MultilingualTranslationsService as ɵc, ScrollableItemModule as ɵca, ConfigurationsService as ɵd, HorizontalScrollerV2Module as ɵe, HorizontalScrollerV2Component as ɵf, SlidersLibComponent as ɵg, NavigationModule as ɵh, NavigationDirective as ɵi, ImageResponsiveModule as ɵj, ImageResponsiveDirective as ɵk, DataPointsComponent as ɵl, InsiteDataService as ɵm, SkeletonLoaderLibModule as ɵn, SkeletonLoaderLibComponent as ɵo, CalenderComponent as ɵp, CalenderDayComponent as ɵq, CommonStripComponent as ɵr, AnnouncementsComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, CardMDOChannelComponent as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map