@sunbird-cb/consumption 0.0.37 → 0.0.38

package/bundles/sunbird-cb-consumption.umd.js

@@ -7268,9 +7268,9 @@
                             var prevData = _this.trainings[resp.startDate];
                             /** @type {?} */
                             var location_1 = resp.eventType;
-                            if (resp.venue && location_1 !== "Online") {
+                            if (resp.location && location_1 !== "Online") {
                                 /** @type {?} */
-                                var jsonResp = JSON.parse(resp.venue);
+                                var jsonResp = JSON.parse(resp.location);
                                 location_1 = jsonResp['address'];
                             }
                             /** @type {?} */
@@ -7338,7 +7338,7 @@
             var strHours = hours < 10 ? '0' + hours : hours.toString();
             /** @type {?} */
             var strMinutes = minutes < 10 ? '0' + minutes : minutes.toString();
-            return strHours + ":" + strMinutes + ": " + ampm;
+            return strHours + ":" + strMinutes + " " + ampm;
         };
         /**
          * @param {?} cDate
@@ -7435,7 +7435,7 @@
             { type: core.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 */
@@ -7552,8 +7552,8 @@
         CalenderDayComponent.decorators = [
             { type: core.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 */
@@ -8926,7 +8926,7 @@
         CardsComponent.decorators = [
             { type: core.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: [""]
                     }] }
         ];
@@ -10149,7 +10149,7 @@
         CardMDOChannelComponent.decorators = [
             { type: core.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}}"]
                     }] }
         ];
@@ -10305,8 +10305,8 @@
         CardWideV2Component.decorators = [
             { type: core.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 */
@@ -10906,6 +10906,160 @@
         CardPortraitExtComponent.prototype.contSvc;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CardMdoChannelV1Component = /** @class */ (function () {
+        function CardMdoChannelV1Component(events, translate, langtranslations, configSvc, contSvc, router) {
+            var _this = this;
+            this.events = events;
+            this.translate = translate;
+            this.langtranslations = langtranslations;
+            this.configSvc = configSvc;
+            this.contSvc = contSvc;
+            this.router = router;
+            this.channelData = new core.EventEmitter();
+            this.emitTelemetry = new core.EventEmitter();
+            this.widgetType = '';
+            this.widgetSubType = '';
+            this.langtranslations.languageSelectedObservable.subscribe((/**
+             * @return {?}
+             */
+            function () {
+                if (localStorage.getItem('websiteLanguage')) {
+                    _this.translate.setDefaultLang('en');
+                    /** @type {?} */
+                    var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                    _this.translate.use(lang);
+                }
+            }));
+        }
+        /**
+         * @return {?}
+         */
+        CardMdoChannelV1Component.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var 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 {?}
+         */
+        CardMdoChannelV1Component.prototype.raiseTelemetry = /**
+         * @param {?} contentData
+         * @return {?}
+         */
+        function (contentData) {
+            this.emitTelemetry.emit(contentData);
+            if (this.widgetData) {
+                contentData['typeOfTelemetry'] = 'mdo-channel';
+            }
+            this.contSvc.changeTelemetryData(contentData);
+        };
+        /**
+         * @param {?} channeldata
+         * @return {?}
+         */
+        CardMdoChannelV1Component.prototype.channelClick = /**
+         * @param {?} channeldata
+         * @return {?}
+         */
+        function (channeldata) {
+            this.channelData.emit(channeldata);
+        };
+        /**
+         * @param {?} content
+         * @return {?}
+         */
+        CardMdoChannelV1Component.prototype.redirectTo = /**
+         * @param {?} content
+         * @return {?}
+         */
+        function (content) {
+            this.router.navigate(["/app/learn/mdo-channels/" + content.orgName + "/" + content.identifier + "/micro-sites"]);
+        };
+        CardMdoChannelV1Component.decorators = [
+            { type: core.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 = function () { return [
+            { type: utilsV2.EventService },
+            { type: core$1.TranslateService },
+            { type: utilsV2.MultilingualTranslationsService },
+            { type: utilsV2.ConfigurationsService },
+            { type: WidgetContentService },
+            { type: router.Router }
+        ]; };
+        CardMdoChannelV1Component.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            channelData: [{ type: core.Output }],
+            emitTelemetry: [{ type: core.Output }]
+        };
+        return CardMdoChannelV1Component;
+    }());
+    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
@@ -10925,7 +11079,8 @@
                             CardWideV2Component,
                             CardKarmaProgramsComponent,
                             CardKarmaProgramsV2Component,
-                            CardPortraitExtComponent
+                            CardPortraitExtComponent,
+                            CardMdoChannelV1Component
                         ],
                         imports: [
                             common.CommonModule,
@@ -12598,29 +12753,30 @@
     exports.ɵbb = CardKarmaProgramsComponent;
     exports.ɵbc = CardKarmaProgramsV2Component;
     exports.ɵbd = CardPortraitExtComponent;
-    exports.ɵbe = PipePublicURLModule;
-    exports.ɵbf = PipePublicURL;
-    exports.ɵbg = DisplayContentTypeLibModule;
-    exports.ɵbh = DisplayContentTypeLibComponent;
-    exports.ɵbi = DefaultThumbnailModule;
-    exports.ɵbj = DefaultThumbnailDirective;
-    exports.ɵbk = PipeDurationTransformModule;
-    exports.ɵbl = PipeDurationTransformPipe;
-    exports.ɵbm = CompetencyPassbookComponent;
-    exports.ɵbn = CompetencyPassbookService;
-    exports.ɵbo = PillsModule;
-    exports.ɵbp = PillsComponent;
-    exports.ɵbq = UserContentRatingLibComponent;
-    exports.ɵbr = ScrollableItemDirective;
-    exports.ɵbs = RatingService;
-    exports.ɵbt = UserContentRatingLibService;
-    exports.ɵbu = AvatarPhotoLibModule;
-    exports.ɵbv = AvatarPhotoLibComponent;
-    exports.ɵbw = MyHammerConfig$1;
-    exports.ɵbx = SlidersNgContentLibModule;
-    exports.ɵby = SlidersNgContentLibComponent;
-    exports.ɵbz = ScrollableItemModule;
+    exports.ɵbe = CardMdoChannelV1Component;
+    exports.ɵbf = PipePublicURLModule;
+    exports.ɵbg = PipePublicURL;
+    exports.ɵbh = DisplayContentTypeLibModule;
+    exports.ɵbi = DisplayContentTypeLibComponent;
+    exports.ɵbj = DefaultThumbnailModule;
+    exports.ɵbk = DefaultThumbnailDirective;
+    exports.ɵbl = PipeDurationTransformModule;
+    exports.ɵbm = PipeDurationTransformPipe;
+    exports.ɵbn = CompetencyPassbookComponent;
+    exports.ɵbo = CompetencyPassbookService;
+    exports.ɵbp = PillsModule;
+    exports.ɵbq = PillsComponent;
+    exports.ɵbr = UserContentRatingLibComponent;
+    exports.ɵbs = ScrollableItemDirective;
+    exports.ɵbt = RatingService;
+    exports.ɵbu = UserContentRatingLibService;
+    exports.ɵbv = AvatarPhotoLibModule;
+    exports.ɵbw = AvatarPhotoLibComponent;
+    exports.ɵbx = MyHammerConfig$1;
+    exports.ɵby = SlidersNgContentLibModule;
+    exports.ɵbz = SlidersNgContentLibComponent;
     exports.ɵc = MultilingualTranslationsService;
+    exports.ɵca = ScrollableItemModule;
     exports.ɵd = ConfigurationsService;
     exports.ɵe = HorizontalScrollerV2Module;
     exports.ɵf = HorizontalScrollerV2Component;