@sunbird-cb/consumption 0.0.12 → 0.0.14

package/fesm2015/sunbird-cb-consumption.js

@@ -1,10 +1,10 @@
-import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, Pipe } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule, Router } from '@angular/router';
+import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, Pipe, ElementRef, ViewChildren } from '@angular/core';
+import { CommonModule, DatePipe } from '@angular/common';
+import { Router, RouterModule } from '@angular/router';
 import { fromEvent, timer, BehaviorSubject, of, EMPTY, ReplaySubject, Subject, throwError, interval } from 'rxjs';
 import { debounceTime, throttleTime, shareReplay, retry, map, catchError, filter, distinctUntilChanged } from 'rxjs/operators';
 import { ValueService, ConfigurationsService as ConfigurationsService$1, WsEvents, LoggerService, EventService, UtilityService } from '@sunbird-cb/utils-v2';
-import { MatButtonModule, MatIconModule, MatProgressSpinnerModule, MatToolbarModule, MatTooltipModule, MatListModule, MatSidenavModule, MatCardModule, MatExpansionModule, MatRadioModule, MatChipsModule, MatInputModule, MatFormFieldModule, MatDialogModule, MatSnackBarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatTableModule, MatCheckboxModule, MatButtonToggleModule, MatTabsModule, MatAutocompleteModule, MatSnackBar } from '@angular/material';
+import { MatButtonModule, MatIconModule, MatProgressSpinnerModule, MatToolbarModule, MatTooltipModule, MatListModule, MatSidenavModule, MatCardModule, MatExpansionModule, MatRadioModule, MatChipsModule, MatInputModule, MatFormFieldModule, MatDialogModule, MatSnackBarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatTableModule, MatCheckboxModule, MatButtonToggleModule, MatTabsModule, MatAutocompleteModule, MatSnackBar, MatMenuModule, MatRippleModule } from '@angular/material';
 import { __awaiter } from 'tslib';
 import { WidgetBaseComponent, SbUiResolverModule } from '@sunbird-cb/resolver-v2';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
@@ -3236,24 +3236,28 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
      * @param {?} eventSvc
      * @param {?} configSvc
      * @param {?} utilitySvc
+     * @param {?} router
      * @param {?} userSvc
      * @param {?} translate
      * @param {?} langtranslations
      */
     constructor(
     // private contentStripSvc: ContentStripNewMultipleService,
-    environment, contentSvc, loggerSvc, eventSvc, configSvc, utilitySvc, userSvc, translate, langtranslations) {
+    environment, contentSvc, loggerSvc, eventSvc, configSvc, utilitySvc, router, userSvc, translate, langtranslations) {
         super();
         this.contentSvc = contentSvc;
         this.loggerSvc = loggerSvc;
         this.eventSvc = eventSvc;
         this.configSvc = configSvc;
         this.utilitySvc = utilitySvc;
+        this.router = router;
         this.userSvc = userSvc;
         this.translate = translate;
         this.langtranslations = langtranslations;
         this.emptyResponse = new EventEmitter();
+        this.viewAllResponse = new EventEmitter();
         this.providerId = '';
+        this.emitViewAll = false;
         this.id = `ws-strip-miltiple_${Math.random()}`;
         this.stripsResultDataMap = {};
         this.stripsKeyOrder = [];
@@ -4806,11 +4810,25 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
         }
         return filters;
     }
+    /**
+     * @param {?} stripData
+     * @param {?} path
+     * @param {?} queryParamsData
+     * @return {?}
+     */
+    redirectViewAll(stripData, path, queryParamsData) {
+        if (this.emitViewAll) {
+            this.viewAllResponse.emit(stripData);
+        }
+        else {
+            this.router.navigate([path], { queryParams: queryParamsData });
+        }
+    }
 }
 ContentStripWithTabsLibComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-content-strip-with-tabs',
-                template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                  class=\"ml-4 view-more ws-mat-default-text\">\n                  <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1\" [routerLink]=\"stripsResultDataMap[key]?.viewMoreUrl?.path\"\n                    [queryParams]=\"stripsResultDataMap[key]?.viewMoreUrl?.queryParams\">\n                    <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                    <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                  </a>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n                    <ng-template mat-tab-label>\n                      <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n                    <div>\n                      <!-- <ng-container [ngTemplateOutlet]=\"loader\" *ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n                      </ng-container> -->\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                              <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                      <div *ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n                      (!tab?.widgets || !tab?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                      <ng-container *ngIf=\"(tab?.fetchTabStatus === 'done' || tab?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.tabLoading\">\n\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n                            *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.widgets| slice:0:(tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n              <ng-container *ngIf=\"!stripsResultDataMap[key].tabs || !stripsResultDataMap[key].tabs.length\">\n                <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n                      <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                              [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                        <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                          <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                        </ng-container>\n                      </sb-uic-horizontal-scroller-v2>\n                </div>\n                <div class=\"\">\n                    <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                    *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\" [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                      <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.widgets| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                      <!-- <ng-container *ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n                      <!-- <ng-container *ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n                        [sbUiResolverWidget]=\"widget\"></ng-container> -->\n                        <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                      <!-- </ng-container> -->\n                      </ng-container>\n                  </sb-uic-horizontal-scroller-v2>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
+                template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                  class=\"ml-4 view-more ws-mat-default-text\">\n                  <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1\" (click)=\"redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                    <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                    <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                  </a>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n                    <ng-template mat-tab-label>\n                      <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n                    <div>\n                      <!-- <ng-container [ngTemplateOutlet]=\"loader\" *ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n                      </ng-container> -->\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                                    [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                              <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n                            </sb-uic-horizontal-scroller-v2>\n                      </div>\n                      <div *ngIf=\"((tab?.fetchTabStatus && tab?.fetchTabStatus === 'done') &&\n                      (!tab?.widgets || !tab?.widgets?.length))\">\n                      <ng-container *ngIf=\"tab?.value === 'inprogress'; else msgTemp\">\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                          <div class=\"mat-subheading-1 text-center info-content\">{{ 'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                            <a class=\"click-here\" [routerLink]=\"'/page/learn'\">{{ 'contentstripmultiple.clickHere' | translate }}</a> {{ 'contentstripmultiple.toEnrollNextCourse' | translate }}</div>\n                        </div>\n                      </ng-container>\n                      <ng-template #msgTemp>\n                        <div class=\"w-full flex flex-col items-center justify-center\">\n                          <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                          <div class=\"mat-subheading-1 text-center\">{{ translateLabels(tab.nodataMsg, 'home') }}</div>\n                        </div>\n                      </ng-template>\n                      </div>\n                      <ng-container *ngIf=\"(tab?.fetchTabStatus === 'done' || tab?.widgets?.length)\">\n                        <ng-container  *ngIf=\"!tab?.tabLoading\">\n\n                          <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [widgetsLength]=\"tab?.widgets?.length\"\n                            *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n                            [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container *ngFor=\"let widget of tab?.widgets| slice:0:(tab?.maxWidgets ||\n                            stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </ng-container>\n                      </ng-container>\n                    </div>\n                  </mat-tab>\n                </mat-tab-group>\n              </ng-container>\n              <ng-container *ngIf=\"!stripsResultDataMap[key].tabs || !stripsResultDataMap[key].tabs.length\">\n                <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader\" class=\"text-center my-2\">\n                      <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                              [loadStatus]=\"'fetching'\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                        <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                          <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                        </ng-container>\n                      </sb-uic-horizontal-scroller-v2>\n                </div>\n                <div class=\"\">\n                    <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\" [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                    *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\" [widgetsLength]=\"stripsResultDataMap[key]?.widgets?.length\" [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets\" [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                      <ng-container *ngFor=\"let widget of stripsResultDataMap[key]?.widgets| slice:0:(stripsResultDataMap[key].sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                      <!-- <ng-container *ngIf=\"widget.widgetData.context.pageSection === 'continueLearning' \"> -->\n                      <!-- <ng-container *ngIf=\"widget.widgetData.content.completionPercentage !== 100\"\n                        [sbUiResolverWidget]=\"widget\"></ng-container> -->\n                        <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                      <!-- </ng-container> -->\n                      </ng-container>\n                  </sb-uic-horizontal-scroller-v2>\n                </div>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>",
                 styles: [".view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.view-more .icon{font-size:24px;width:24px;height:24px;border:1px solid;border-radius:50%;padding:8px;margin-bottom:8px}.margin-bottom-custom{margin-bottom:60px}.view-more:hover{background-color:#dcdfe5}::ng-deep.strips-tabgroup .mat-tab-header{border-bottom:2px solid rgba(0,0,0,.12)}::ng-deep.strips-tabgroup .mat-tab-body{padding:20px 0!important;box-sizing:border-box;overflow-y:initial!important}::ng-deep.strips-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep.strips-tabgroup .mat-tab-label{border-bottom:0 solid rgba(0,0,0,.1);margin-right:0;opacity:1}::ng-deep.strips-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:inherit;font:400 14px/20px Lato}::ng-deep.strips-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}.click-here{color:#1b4ca1}.info-content{opacity:1;color:rgba(0,0,0,.87);font:700 14px/20px Lato-Bold;text-align:center}"]
             }] }
 ];
@@ -4822,6 +4840,7 @@ ContentStripWithTabsLibComponent.ctorParameters = () => [
     { type: EventService },
     { type: ConfigurationsService$1 },
     { type: UtilityService },
+    { type: Router },
     { type: WidgetUserService },
     { type: TranslateService },
     { type: MultilingualTranslationsService }
@@ -4829,7 +4848,9 @@ ContentStripWithTabsLibComponent.ctorParameters = () => [
 ContentStripWithTabsLibComponent.propDecorators = {
     widgetData: [{ type: Input }],
     emptyResponse: [{ type: Output }],
+    viewAllResponse: [{ type: Output }],
     providerId: [{ type: Input }],
+    emitViewAll: [{ type: Input }],
     id: [{ type: HostBinding, args: ['id',] }]
 };
 if (false) {
@@ -4838,8 +4859,12 @@ if (false) {
     /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.emptyResponse;
     /** @type {?} */
+    ContentStripWithTabsLibComponent.prototype.viewAllResponse;
+    /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.providerId;
     /** @type {?} */
+    ContentStripWithTabsLibComponent.prototype.emitViewAll;
+    /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.id;
     /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.stripsResultDataMap;
@@ -4897,6 +4922,8 @@ if (false) {
     ContentStripWithTabsLibComponent.prototype.configSvc;
     /** @type {?} */
     ContentStripWithTabsLibComponent.prototype.utilitySvc;
+    /** @type {?} */
+    ContentStripWithTabsLibComponent.prototype.router;
     /**
      * @type {?}
      * @private
@@ -5409,7 +5436,8 @@ SlidersLibModule.decorators = [
  */
 /** @type {?} */
 const API_END_POINTS$2 = {
-    PROVIDER_INSIGHTS: `/apis/proxies/v8/microsite/read/insights`
+    PROVIDER_INSIGHTS: `/apis/proxies/v8/microsite/read/insights`,
+    TRAINING_DETAILS: `apis/proxies/v8/sunbirdigot/search`
 };
 class InsiteDataService {
     /**
@@ -5425,6 +5453,13 @@ class InsiteDataService {
     fetchSearchData(request) {
         return this.http.post(API_END_POINTS$2.PROVIDER_INSIGHTS, request);
     }
+    /**
+     * @param {?} request
+     * @return {?}
+     */
+    fetchTrainingDetails(request) {
+        return this.http.post(API_END_POINTS$2.TRAINING_DETAILS, request);
+    }
 }
 InsiteDataService.decorators = [
     { type: Injectable, args: [{
@@ -5521,7 +5556,7 @@ class DataPointsComponent {
 DataPointsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-data-points',
-                template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak}\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" >{{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow'\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div {{obj?.background}} flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\">{{obj?.value  | number: '1.1-2'}}</div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                               <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\">{{item?.value}}</div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n        <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n            <div class=\"element-div linebreak\" >\n                <div class=\"flex flex-row gap-3 items-top\">\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>",
+                template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak }\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" >{{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow'\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div {{obj?.background}} flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\">{{obj?.value  | number: '1.1-2'}}</div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                               <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\">{{item?.value}}</div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n        <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n            <div class=\"element-div linebreak\" >\n                <div class=\"flex flex-row gap-3 items-top\">\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>",
                 styles: [".white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}"]
             }] }
 ];
@@ -5637,32 +5672,384 @@ DataPointsModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class CalenderComponent {
-    constructor() {
-        this.toDay = new Date();
+    /**
+     * @param {?} datePipe
+     * @param {?} insightSvc
+     */
+    constructor(datePipe, insightSvc) {
+        this.datePipe = datePipe;
+        this.insightSvc = insightSvc;
+        this.fetchDataFromApi = false;
+        this.showHeader = false;
+        this.defaultDays = 3;
+        this.fullCalendor = false;
+        this.days = [];
+        this.trainings = {};
+        this.isDataLoading = false;
+        this.currentDate = new Date();
+        this.allMonths = ["January", "February", "March",
+            "April", "May", "June", "July",
+            "August", "September", "October",
+            "November", "December"
+        ];
+        this.monthsDropdown = [];
     }
     /**
      * @return {?}
      */
     ngOnInit() {
-        console.log("data ===== ", this.objectData);
-        console.log("toDay ", this.toDay);
+        this.currentMonthAndYear = this.datePipe.transform(this.currentDate, 'MMMM y');
+        this.selectedMonth = this.datePipe.transform(this.currentDate, 'LLLL yyyy');
+        if (this.fullCalendor) {
+            console.log("this.currentDate ", this.currentDate);
+            this.days = this.getDaysInMonth(this.currentDate.getFullYear(), this.currentDate.getMonth());
+            this.getMonthsDropdownData();
+        }
+        if (!this.fullCalendor) {
+            this.days = this.getDays(this.currentDate, +this.defaultDays);
+        }
+        this.startDate = this.days[0];
+        this.endDate = this.days[this.days.length - 1];
+        if (this.fetchDataFromApi) {
+            this.isDataLoading = true;
+            this.getInsiteData();
+        }
+    }
+    /**
+     * @return {?}
+     */
+    getInsiteData() {
+        /** @type {?} */
+        let request = {
+            "locale": [
+                "en"
+            ],
+            "query": "",
+            "request": {
+                "query": "",
+                "filters": {
+                    "category": [
+                        "Calendar"
+                    ],
+                    "status": [
+                        "Live",
+                        "Retired"
+                    ],
+                    "contentType": "Event",
+                    "startDate": {
+                        ">=": this.startDate,
+                        "<=": this.endDate
+                        // ">=": "2024-01-15",
+                        // "<": "2024-05-31"
+                    },
+                    "channel": [this.providerId]
+                },
+                "sort_by": {
+                    "lastUpdatedOn": "desc"
+                }
+            }
+        };
+        this.insightSvc.fetchTrainingDetails(request).subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => {
+            if (res && res.result && res.result.Event) {
+                res.result.Event.forEach((/**
+                 * @param {?} resp
+                 * @return {?}
+                 */
+                (resp) => {
+                    if (this.trainings[resp.startDate]) {
+                        /** @type {?} */
+                        let prevData = this.trainings[resp.startDate];
+                        /** @type {?} */
+                        let location = resp.eventType;
+                        if (resp.venue && location !== "Online") {
+                            /** @type {?} */
+                            const jsonResp = JSON.parse(resp.venue);
+                            location = jsonResp['address'];
+                        }
+                        /** @type {?} */
+                        const formatObject = {
+                            location: location,
+                            startTime: this.convertTo12HourFormat(resp.startTime),
+                            endTime: this.convertTo12HourFormat(resp.endTime),
+                            title: resp.name,
+                            startDate: this.formatDate(resp.startDate),
+                            endDate: this.formatDate(resp.endDate),
+                            registrationLink: resp.registrationLink,
+                        };
+                        prevData.push(formatObject);
+                        this.trainings[resp.startDate] = prevData;
+                    }
+                }));
+            }
+            this.isDataLoading = false;
+        }));
+    }
+    /**
+     * @param {?} obj
+     * @return {?}
+     */
+    getKeys(obj) {
+        return Object.keys(obj);
+    }
+    /**
+     * @param {?} date
+     * @return {?}
+     */
+    formatDate(date) {
+        /** @type {?} */
+        let formatDate = new Date(date);
+        return this.datePipe.transform(formatDate, 'E, dd LLL');
+    }
+    /**
+     * @param {?} timeString
+     * @return {?}
+     */
+    convertTo12HourFormat(timeString) {
+        /** @type {?} */
+        const time = timeString.split(":");
+        /** @type {?} */
+        let hours = +time[0];
+        /** @type {?} */
+        const minutes = +time[1];
+        /** @type {?} */
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12;
+        hours = hours ? hours : 12;
+        /** @type {?} */
+        const strHours = hours < 10 ? '0' + hours : hours.toString();
+        /** @type {?} */
+        const strMinutes = minutes < 10 ? '0' + minutes : minutes.toString();
+        return `${strHours}:${strMinutes}: ${ampm}`;
+    }
+    /**
+     * @param {?} cDate
+     * @param {?} counter
+     * @return {?}
+     */
+    getDays(cDate, counter) {
+        /** @type {?} */
+        const days = [];
+        /** @type {?} */
+        let initDate = new Date(cDate);
+        initDate = this.datePipe.transform(initDate, 'y-MM-dd');
+        days.push(initDate);
+        this.trainings[initDate] = [];
+        while (counter > 0) {
+            /** @type {?} */
+            let myDate = new Date(cDate);
+            myDate = myDate.setDate(myDate.getDate() + 1);
+            cDate = myDate;
+            myDate = this.datePipe.transform(myDate, 'y-MM-dd');
+            days.push(myDate);
+            this.trainings[myDate] = [];
+            counter = counter - 1;
+        }
+        return days;
+    }
+    /**
+     * @param {?} year
+     * @param {?} month
+     * @return {?}
+     */
+    getDaysInMonth(year, month) {
+        /** @type {?} */
+        const date = new Date(year, month, 1);
+        /** @type {?} */
+        const days = [];
+        this.trainings = {};
+        while (date.getMonth() === month) {
+            /** @type {?} */
+            let myDate = new Date(date);
+            myDate = this.datePipe.transform(myDate, 'y-MM-dd');
+            days.push(myDate);
+            this.trainings[myDate] = [];
+            date.setDate(date.getDate() + 1);
+        }
+        return days;
+    }
+    /**
+     * @return {?}
+     */
+    getMonthsDropdownData() {
+        this.allMonths.forEach((/**
+         * @param {?} month
+         * @return {?}
+         */
+        (month) => {
+            this.monthsDropdown.push(`${month} ${this.currentDate.getFullYear()}`);
+        }));
+    }
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    selectMonth(event) {
+        /** @type {?} */
+        const selectedMonth = new Date(event);
+        this.currentDate = selectedMonth;
+        this.days = [];
+        this.days = this.getDaysInMonth(this.currentDate.getFullYear(), this.currentDate.getMonth());
+        this.startDate = this.days[0];
+        this.endDate = this.days[this.days.length - 1];
+        this.isDataLoading = true;
+        this.getInsiteData();
     }
 }
 CalenderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-calender',
-                template: "<div class=\"w-full p-3 event-day my-3\" \n    *ngFor=\"let obj of objectData?.training\"\n    [style.backgroundColor]=\"obj?.backgroundColor\" \n    [style.borderColor]=\"objectData?.activeColor\">\n    <div class=\"flex item-top gap-8 {{ obj.events.length ? '' : 'aliginCenter'}}\">\n        <div class=\"event-date\">\n            <div class=\"currentDay\">{{obj.eventDate}}</div>\n        </div>\n        <div class=\"details w-full\" *ngIf=\"obj.events.length\">\n            <div class=\"flex p-4 item-center events-list mb-{{obj.events.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"event?.backgroundColor\"\n                 *ngFor=\"let event of obj.events; let i = index\" >\n                <div>\n                    <div class=\"flex flex-row item-center gap-10 pb-2\">\n                        <div class=\"flex item-center gap-2 row1 col1\">\n                            <div><mat-icon class=\"icon-tour\">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-2 row1 col1\" *ngIf=\"event.startDate && event.endDate\">\n                            <div><mat-icon class=\"icon-tour\">date_range</mat-icon> </div>\n                            <div>{{event.startDate}} - {{event.endDate}}</div>\n                        </div>\n                        <div class=\"flex item-center gap-2 col1\">\n                            <div><mat-icon class=\"icon-tour\">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\">\n                    Visit\n                </div>\n            </div>\n        </div>\n        <div class=\"details w-full\" *ngIf=\"!obj.events.length\">\n            No trainings.\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%}.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}.aliginCenter,.col1{align-items:center}.visit-link{opacity:.7;cursor:pointer}.currentDay{padding:5px;background:#1d8923;border-radius:20px;color:#fff}"]
+                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}}"]
             }] }
 ];
+/** @nocollapse */
+CalenderComponent.ctorParameters = () => [
+    { type: DatePipe },
+    { type: InsiteDataService }
+];
 CalenderComponent.propDecorators = {
-    objectData: [{ type: Input }]
+    objectData: [{ type: Input }],
+    layoutType: [{ type: Input }],
+    fetchDataFromApi: [{ type: Input }],
+    showHeader: [{ type: Input }],
+    defaultDays: [{ type: Input }],
+    providerId: [{ type: Input }],
+    fullCalendor: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
     CalenderComponent.prototype.objectData;
     /** @type {?} */
-    CalenderComponent.prototype.toDay;
+    CalenderComponent.prototype.layoutType;
+    /** @type {?} */
+    CalenderComponent.prototype.fetchDataFromApi;
+    /** @type {?} */
+    CalenderComponent.prototype.showHeader;
+    /** @type {?} */
+    CalenderComponent.prototype.defaultDays;
+    /** @type {?} */
+    CalenderComponent.prototype.providerId;
+    /** @type {?} */
+    CalenderComponent.prototype.fullCalendor;
+    /** @type {?} */
+    CalenderComponent.prototype.days;
+    /** @type {?} */
+    CalenderComponent.prototype.trainings;
+    /** @type {?} */
+    CalenderComponent.prototype.currentMonthAndYear;
+    /** @type {?} */
+    CalenderComponent.prototype.isDataLoading;
+    /** @type {?} */
+    CalenderComponent.prototype.currentDate;
+    /** @type {?} */
+    CalenderComponent.prototype.endDate;
+    /** @type {?} */
+    CalenderComponent.prototype.startDate;
+    /** @type {?} */
+    CalenderComponent.prototype.allMonths;
+    /** @type {?} */
+    CalenderComponent.prototype.monthsDropdown;
+    /** @type {?} */
+    CalenderComponent.prototype.selectedMonth;
+    /**
+     * @type {?}
+     * @private
+     */
+    CalenderComponent.prototype.datePipe;
+    /** @type {?} */
+    CalenderComponent.prototype.insightSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CalenderDayComponent {
+    /**
+     * @param {?} datePipe
+     */
+    constructor(datePipe) {
+        this.datePipe = datePipe;
+        this.webDisplayDate = "";
+        this.mobileDisplayDate = "";
+        this.currentDate = new Date();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.currentDate = this.datePipe.transform(this.currentDate, 'y-MM-dd');
+    }
+    /**
+     * @param {?} link
+     * @return {?}
+     */
+    openLink(link) {
+        window.open(link, "_blank");
+    }
+    /**
+     * @param {?} date
+     * @param {?} type
+     * @return {?}
+     */
+    formatDate(date, type) {
+        /** @type {?} */
+        let fDate = new Date(date);
+        if (type === 'web') {
+            return this.datePipe.transform(fDate, 'E, dd LLL');
+        }
+        if (type === 'mob') {
+            return this.datePipe.transform(fDate, 'E dd LLL');
+        }
+    }
+}
+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}"]
+            }] }
+];
+/** @nocollapse */
+CalenderDayComponent.ctorParameters = () => [
+    { type: DatePipe }
+];
+CalenderDayComponent.propDecorators = {
+    objectData: [{ type: Input }],
+    layoutType: [{ type: Input }],
+    day: [{ type: Input }],
+    dataLoading: [{ type: Input }],
+    rowId: [{ type: Input }],
+    eventDate: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    CalenderDayComponent.prototype.objectData;
+    /** @type {?} */
+    CalenderDayComponent.prototype.layoutType;
+    /** @type {?} */
+    CalenderDayComponent.prototype.day;
+    /** @type {?} */
+    CalenderDayComponent.prototype.dataLoading;
+    /** @type {?} */
+    CalenderDayComponent.prototype.rowId;
+    /** @type {?} */
+    CalenderDayComponent.prototype.eventDate;
+    /** @type {?} */
+    CalenderDayComponent.prototype.webDisplayDate;
+    /** @type {?} */
+    CalenderDayComponent.prototype.mobileDisplayDate;
+    /** @type {?} */
+    CalenderDayComponent.prototype.currentDate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CalenderDayComponent.prototype.datePipe;
 }
 
 /**
@@ -5676,9 +6063,15 @@ CalenderModule.decorators = [
                 imports: [
                     CommonModule,
                     MatIconModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    MatSelectModule,
+                    SkeletonLoaderLibModule
                 ],
-                declarations: [CalenderComponent],
+                declarations: [CalenderComponent, CalenderDayComponent],
                 exports: [CalenderComponent],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                providers: [DatePipe, InsiteDataService],
             },] }
 ];
 
@@ -5896,18 +6289,21 @@ class CommonStripComponent extends WidgetBaseComponent {
         if (this.widgetData.loader && this.widgetData.strips.length) {
             this.showParentLoader = true;
         }
-        // Fetch the data
-        for (const strip of this.widgetData.strips) {
-            this.processStrip(strip, [], 'fetching', false, null);
-            if (strip.dataType === 'in-hand' && this.widgetData[strip.dataKey]) {
-                this.processStrip(strip, this.commonMethodsSvc.transformContentsToWidgets(this.widgetData[strip.dataKey], strip), 'done', true, strip.viewMoreUrl || '');
-            }
-            else {
-                if (this.checkForEmptyWidget(strip)) {
-                    // this.fetchStripFromRequestData(strip, false);
+        // null check if in case no strips key in config
+        if (this.widgetData && this.widgetData.strips) {
+            // Fetch the data
+            for (const strip of this.widgetData.strips) {
+                this.processStrip(strip, [], 'fetching', false, null);
+                if (strip.dataType === 'in-hand' && this.widgetData[strip.dataKey]) {
+                    this.processStrip(strip, this.commonMethodsSvc.transformContentsToWidgets(this.widgetData[strip.dataKey], strip), 'done', true, strip.viewMoreUrl || '');
                 }
                 else {
-                    this.processStrip(strip, [], 'done', true, null);
+                    if (this.checkForEmptyWidget(strip)) {
+                        // this.fetchStripFromRequestData(strip, false);
+                    }
+                    else {
+                        this.processStrip(strip, [], 'done', true, null);
+                    }
                 }
             }
         }
@@ -6585,7 +6981,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>\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 [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-landscape>\n</ng-template>\n\n\n  <ng-template #cardUser>\n    <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n  </ng-template>\n",
+                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>\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 (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\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></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 #cardUser>\n    <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n  </ng-template>\n",
                 styles: [""]
             }] }
 ];
@@ -6701,6 +7097,10 @@ class CardPortraitComponent {
             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';
+        }
     }
     /**
      * @return {?}
@@ -7482,65 +7882,225 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class CardsModule {
-}
-CardsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [CardResourceComponent, CardsComponent, CardPortraitComponent, CardUserComponent, CardLandscapeComponent],
-                imports: [
-                    CommonModule,
-                    MatCardModule,
-                    MatButtonModule,
-                    MatIconModule,
-                    MatTooltipModule,
-                    RouterModule,
-                    PipePublicURLModule,
-                    DisplayContentTypeLibModule,
-                    DefaultThumbnailModule,
-                    PipeDurationTransformModule,
-                    SkeletonLoaderLibModule
-                ],
-                entryComponents: [CardsComponent],
-                exports: [
-                    CardsComponent,
-                    CardResourceComponent,
-                    CardPortraitComponent,
-                    CardLandscapeComponent,
-                    CardUserComponent
-                ],
-            },] }
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const WIDGET_REGISTERED_LIB_MODULES = [
-    CardsModule
-];
-/** @type {?} */
-const WIDGET_REGISTRATION_LIB_CONFIG = [
-    {
-        widgetType: ROOT_WIDGET_CONFIG.card._type,
-        widgetSubType: ROOT_WIDGET_CONFIG.card.cardResource,
-        component: CardsComponent,
-    }
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const API_POINTS = {
-    COMPETENCY_LIST: `apis/proxies/v8/competency/v4/search`,
-    CERTIFICATE_URL: `apis/protected/v8/cohorts/course/batch/cert/download/`,
-};
-class CompetencyPassbookService {
-    // tslint: disable-next-line: whitespace
+class CardWideComponent {
     /**
-     * @param {?} http
+     * @param {?} snackBar
+     * @param {?} events
+     * @param {?} translate
+     * @param {?} langtranslations
+     * @param {?} configSvc
+     */
+    constructor(snackBar, events, translate, langtranslations, configSvc) {
+        this.snackBar = snackBar;
+        this.events = events;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.configSvc = configSvc;
+        this.isCardLoading = false;
+        this.contentData = new EventEmitter();
+        this.isCardFlipped = false;
+        this.showFlip = false;
+        this.widgetType = 'df';
+        this.widgetSubType = 'sdf';
+        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 || '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
+        else {
+            this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
+            this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
+        }
+    }
+    /**
+     * @param {?} contentData
+     * @return {?}
+     */
+    getRedirectUrlData(contentData) {
+        this.contentData.emit(contentData);
+    }
+    /**
+     * @return {?}
+     */
+    raiseTelemetry() {
+        // if(this.forPreview){
+        //   return
+        // }
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: `${this.widgetType}-${this.widgetSubType}`,
+            id: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
+        }, {
+            id: this.widgetData.content.identifier,
+            type: this.widgetData.content.primaryCategory,
+            //context: this.widgetData.context,
+            rollup: {},
+            ver: `${this.widgetData.content.version}${''}`,
+        }, {
+            pageIdExt: `${camelCase(this.widgetData.content.primaryCategory)}-card`,
+            module: camelCase(this.widgetData.content.primaryCategory),
+        });
+    }
+}
+CardWideComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-card-wide',
+                template: "<mat-card class=\"card-wide-lib\">\n    <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n    role=\"link\" i18n-aria-label>\n    <div class=\"flex\">\n        <div>\n            <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n                <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                [alt]=\"widgetData?.content?.name\" />\n              </ng-container>\n              <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n                <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n                  <img mat-card-image [src]=\"widgetData?.content?.appIcon | pipePublicURL\" loading=\"lazy\"\n                  class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                  [alt]=\"widgetData?.content?.name\" />\n                </ng-container>\n                <ng-template #defaultImg>\n                  <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                  class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"\n                  [alt]=\"widgetData?.content?.name\" />\n                </ng-template>\n              </ng-container>\n        </div>\n        <div>\n            <div class=\"pl-4 pr-4 w-full\">\n                <div class=\"course_widget flex margin-remove\">\n                  <div class=\"flex flex-end course_v2\">\n                    <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                    <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData?.content?.primaryCategory\"\n                      class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n                      ?'Module'\n                      :widgetData?.content?.primaryCategory\">\n                    </sb-uic-display-content-type>\n                  </div>\n                </div>\n                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                  class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                  {{ widgetData?.content?.name }}\n                </div>\n\n            <div class=\"flex w-full flex-wrap flex-middle\">\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\">{{'cardcontentv2.by' | translate}} -->\n                  <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n              </div>\n            </div>\n        </div>\n    </div>\n    </a>\n</mat-card>\n",
+                styles: [".card-wide-lib{width:inherit;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16)}.card-wide-lib .card-wide-img{width:190px;height:107px;border-radius:12px}.card-wide-lib .course_widget{margin-top:10px}.card-wide-lib .course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.card-wide-lib .course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.card-wide-lib .course_widget .main_icon{font-size:16px;width:16px;height:16px}.card-wide-lib .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-wide-lib .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-wide-lib .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-lib .org-text{font-size:12px;font-weight:400;width:75%;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}@media screen and (max-width:768px){.card-wide-img{width:167px;height:117px;border-radius:12px}}"]
+            }] }
+];
+/** @nocollapse */
+CardWideComponent.ctorParameters = () => [
+    { type: MatSnackBar },
+    { type: EventService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService },
+    { type: ConfigurationsService$1 }
+];
+CardWideComponent.propDecorators = {
+    widgetData: [{ type: Input }],
+    isLiveOrMarkForDeletion: [{ type: Input }],
+    showIntranetContent: [{ type: Input }],
+    isIntranetAllowedSettings: [{ type: Input }],
+    isCardLoading: [{ type: Input }],
+    contentData: [{ type: Output }]
+};
+if (false) {
+    /** @type {?} */
+    CardWideComponent.prototype.widgetData;
+    /** @type {?} */
+    CardWideComponent.prototype.isLiveOrMarkForDeletion;
+    /** @type {?} */
+    CardWideComponent.prototype.showIntranetContent;
+    /** @type {?} */
+    CardWideComponent.prototype.isIntranetAllowedSettings;
+    /** @type {?} */
+    CardWideComponent.prototype.isCardLoading;
+    /** @type {?} */
+    CardWideComponent.prototype.contentData;
+    /** @type {?} */
+    CardWideComponent.prototype.isCardFlipped;
+    /** @type {?} */
+    CardWideComponent.prototype.defaultThumbnail;
+    /** @type {?} */
+    CardWideComponent.prototype.sourceLogos;
+    /** @type {?} */
+    CardWideComponent.prototype.defaultSLogo;
+    /** @type {?} */
+    CardWideComponent.prototype.showFlip;
+    /** @type {?} */
+    CardWideComponent.prototype.widgetType;
+    /** @type {?} */
+    CardWideComponent.prototype.widgetSubType;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideComponent.prototype.snackBar;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideComponent.prototype.events;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideComponent.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideComponent.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    CardWideComponent.prototype.configSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CardsModule {
+}
+CardsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [CardResourceComponent, CardsComponent, CardPortraitComponent, CardUserComponent, CardLandscapeComponent, CardWideComponent],
+                imports: [
+                    CommonModule,
+                    MatCardModule,
+                    MatButtonModule,
+                    MatIconModule,
+                    MatTooltipModule,
+                    RouterModule,
+                    PipePublicURLModule,
+                    DisplayContentTypeLibModule,
+                    DefaultThumbnailModule,
+                    PipeDurationTransformModule,
+                    SkeletonLoaderLibModule
+                ],
+                entryComponents: [CardsComponent],
+                exports: [
+                    CardsComponent,
+                    CardResourceComponent,
+                    CardPortraitComponent,
+                    CardLandscapeComponent,
+                    CardUserComponent,
+                    CardWideComponent
+                ],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const WIDGET_REGISTERED_LIB_MODULES = [
+    CardsModule
+];
+/** @type {?} */
+const WIDGET_REGISTRATION_LIB_CONFIG = [
+    {
+        widgetType: ROOT_WIDGET_CONFIG.card._type,
+        widgetSubType: ROOT_WIDGET_CONFIG.card.cardResource,
+        component: CardsComponent,
+    }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const API_POINTS = {
+    COMPETENCY_LIST: `apis/proxies/v8/competency/v4/search`,
+    CERTIFICATE_URL: `apis/protected/v8/cohorts/course/batch/cert/download/`,
+};
+class CompetencyPassbookService {
+    // tslint: disable-next-line: whitespace
+    /**
+     * @param {?} http
      */
     constructor(http) {
         this.http = http;
@@ -7672,7 +8232,13 @@ class CompetencyPassbookComponent {
                          */
                         (partialSum, data) => partialSum + data.count), 0);
                         this.selectedValue = this.competencyArea[0].name.toLowerCase();
-                        this.getcompetencyTheme(this.competencyArea[0].name);
+                        /** @type {?} */
+                        let addFilter = {
+                            "channel": [
+                                this.providerId
+                            ]
+                        };
+                        this.getcompetencyTheme(this.competencyArea[0].name, addFilter);
                         this.loadCompetencyArea = false;
                     }
                 }
@@ -7799,6 +8365,7 @@ class CompetencyPassbookComponent {
                 if (response && response.results) {
                     if (response.results.result.facets) {
                         this.competencyTheme = response.results.result.facets[0].values;
+                        this.resetViewMore();
                     }
                     this.loadCometency = false;
                 }
@@ -7809,12 +8376,25 @@ class CompetencyPassbookComponent {
             }
         });
     }
+    /**
+     * @return {?}
+     */
+    resetViewMore() {
+        Object.keys(this.allcompetencyTheme).forEach((/**
+         * @param {?} comp
+         * @return {?}
+         */
+        (comp) => {
+            this.allcompetencyTheme[comp]['viewMore'] = false;
+        }));
+    }
     /**
      * @param {?} data
      * @return {?}
      */
     viewMoreChildren(data) {
         data.viewMore = !data.viewMore;
+        this.allcompetencyTheme[data.name.toLowerCase()].viewMore = data.viewMore;
     }
     /**
      * @param {?} event
@@ -7976,6 +8556,853 @@ CompetencyPassbookModule.decorators = [
             },] }
 ];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const PROXY_SLAG_V8 = '/apis/proxies/v8';
+const ɵ0$3 = /**
+ * @param {?} contentId
+ * @param {?} contentType
+ * @param {?} userId
+ * @return {?}
+ */
+(contentId, contentType, userId) => `${PROXY_SLAG_V8}/ratings/v1/read/${contentId}/${contentType}/${userId}`, ɵ1$2 = /**
+ * @param {?} contentId
+ * @param {?} contentType
+ * @return {?}
+ */
+(contentId, contentType) => `${PROXY_SLAG_V8}/ratings/v1/summary/${contentId}/${contentType}`, ɵ2$2 = /**
+ * @param {?} contentId
+ * @param {?} userID
+ * @return {?}
+ */
+(contentId, userID) => `${PROXY_SLAG_V8}/ratings/v1/read/${contentId}/Course/${userID}`;
+/** @type {?} */
+const API_END_POINTS$3 = {
+    GET_RATING: (ɵ0$3),
+    ADD_OR_UPDATE: `${PROXY_SLAG_V8}/ratings/v1/upsert`,
+    GET_RATING_SUMMARY: (ɵ1$2),
+    GET_RATING_LOOKUP: `${PROXY_SLAG_V8}/ratings/v1/ratingLookUp`,
+    GET_AUTHOR_REPLY: (ɵ2$2),
+    POST_AUTHOR_REPLY: `${PROXY_SLAG_V8}/ratings/v2/read`,
+};
+class RatingService {
+    /**
+     * @param {?} http
+     */
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * @param {?} contentId
+     * @param {?} contentType
+     * @param {?} userId
+     * @return {?}
+     */
+    getRating(contentId, contentType, userId) {
+        /** @type {?} */
+        const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
+        if (!forPreview) {
+            return this.http.get(API_END_POINTS$3.GET_RATING(contentId, contentType, userId));
+        }
+        return of({});
+    }
+    /**
+     * @param {?} req
+     * @return {?}
+     */
+    addOrUpdateRating(req) {
+        return this.http.post(API_END_POINTS$3.ADD_OR_UPDATE, req);
+    }
+    /**
+     * @param {?} contentId
+     * @param {?} contentType
+     * @return {?}
+     */
+    getRatingSummary(contentId, contentType) {
+        /** @type {?} */
+        const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
+        if (!forPreview) {
+            return this.http.get(API_END_POINTS$3.GET_RATING_SUMMARY(contentId, contentType));
+        }
+        return of({});
+    }
+    /**
+     * @param {?} req
+     * @return {?}
+     */
+    getRatingLookup(req) {
+        return this.http.post(API_END_POINTS$3.GET_RATING_LOOKUP, req);
+    }
+    /**
+     * @param {?} req
+     * @return {?}
+     */
+    getRatingReply(req) {
+        /** @type {?} */
+        const forPreview = window.location.href.includes('/public/') || window.location.href.includes('&preview=true');
+        if (!forPreview) {
+            return this.http.post(API_END_POINTS$3.POST_AUTHOR_REPLY, req);
+        }
+        return of({});
+    }
+    /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    getRatingIcon(ratingIndex, avg) {
+        if (avg) {
+            /** @type {?} */
+            const avgRating = avg;
+            /** @type {?} */
+            const ratingFloor = Math.floor(avgRating)
+            // const difference =  avgRating - ratingIndex
+            ;
+            // const difference =  avgRating - ratingIndex
+            if (ratingIndex <= ratingFloor) {
+                return 'star';
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
+                return 'star_half';
+            }
+        }
+        return 'star';
+    }
+    /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    getRatingIconClass(ratingIndex, avg) {
+        if (avg) {
+            /** @type {?} */
+            const avgRating = avg;
+            /** @type {?} */
+            const ratingFloor = Math.floor(avgRating);
+            if (ratingIndex <= ratingFloor) {
+                return true;
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 >= 0.29 && avgRating % 1 < 0.71) {
+                return true;
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 > 0.71) {
+                return true;
+            }
+            if (ratingFloor === ratingIndex - 1 && avgRating % 1 < 0.29) {
+                return false;
+            }
+        }
+        return false;
+    }
+    /**
+     * @param {?} contentId
+     * @param {?} userID
+     * @return {?}
+     */
+    getAuthorReply(contentId, userID) {
+        return this.http.get(API_END_POINTS$3.GET_AUTHOR_REPLY(contentId, userID));
+    }
+}
+RatingService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root',
+            },] }
+];
+/** @nocollapse */
+RatingService.ctorParameters = () => [
+    { type: HttpClient }
+];
+/** @nocollapse */ RatingService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RatingService_Factory() { return new RatingService(ɵɵinject(HttpClient)); }, token: RatingService, providedIn: "root" });
+if (false) {
+    /** @type {?} */
+    RatingService.prototype.http;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ScrollableItemDirective {
+    /**
+     * @param {?} el
+     */
+    constructor(el) {
+        this.el = el;
+    }
+    /**
+     * @param {?} blockValue
+     * @return {?}
+     */
+    scrollIntoView(blockValue) {
+        this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
+    }
+}
+ScrollableItemDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[sbUicScrollableItem]'
+            },] }
+];
+/** @nocollapse */
+ScrollableItemDirective.ctorParameters = () => [
+    { type: ElementRef }
+];
+ScrollableItemDirective.propDecorators = {
+    key: [{ type: Input, args: ['sbUicScrollableItem',] }]
+};
+if (false) {
+    /** @type {?} */
+    ScrollableItemDirective.prototype.key;
+    /**
+     * @type {?}
+     * @private
+     */
+    ScrollableItemDirective.prototype.el;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const API_END_POINTS$4 = {
+    TOP_REVIEWS: `/apis/proxies/v8/ratings/v1/topReviews`
+};
+class UserContentRatingLibService {
+    /**
+     * @param {?} http
+     */
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * @param {?} doId
+     * @return {?}
+     */
+    fetchTopReviews(doId) {
+        return this.http.get(`${API_END_POINTS$4.TOP_REVIEWS}/${doId}`);
+    }
+}
+UserContentRatingLibService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+UserContentRatingLibService.ctorParameters = () => [
+    { type: HttpClient }
+];
+/** @nocollapse */ UserContentRatingLibService.ngInjectableDef = ɵɵdefineInjectable({ factory: function UserContentRatingLibService_Factory() { return new UserContentRatingLibService(ɵɵinject(HttpClient)); }, token: UserContentRatingLibService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    UserContentRatingLibService.prototype.http;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class UserContentRatingLibComponent {
+    /**
+     * @param {?} ratingService
+     * @param {?} userRatingSvc
+     */
+    constructor(ratingService, userRatingSvc) {
+        this.ratingService = ratingService;
+        this.userRatingSvc = userRatingSvc;
+        this.currentIndex = 0;
+        this.providerId = '';
+        this.formData = '';
+        this.emptyResponse = new EventEmitter();
+        this.styleData = {};
+        this.contentdata = [];
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
+        this.getTopReviews();
+    }
+    /**
+     * @return {?}
+     */
+    getTopReviews() {
+        this.contentdata = [];
+        this.userRatingSvc.fetchTopReviews(this.providerId).subscribe((/**
+         * @param {?} response
+         * @return {?}
+         */
+        (response) => {
+            if (response && response.result && response.result.content.length) {
+                response.result.content.forEach((/**
+                 * @param {?} contentEle
+                 * @return {?}
+                 */
+                (contentEle) => {
+                    /** @type {?} */
+                    let localData = {};
+                    localData['content'] = contentEle.contentInfo;
+                    localData['rating'] = contentEle.rating;
+                    localData['review'] = contentEle.review;
+                    localData['userDetails'] = contentEle.userDetails;
+                    localData['cardSubType'] = "card-wide-lib";
+                    localData['cardCustomeClass'] = "";
+                    this.contentdata.push(localData);
+                }));
+            }
+            else {
+                this.emptyResponse.emit(true);
+            }
+        }));
+    }
+    /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    getRatingIcon(ratingIndex, avg) {
+        return this.ratingService.getRatingIcon(ratingIndex, avg);
+    }
+    /**
+     * @param {?} ratingIndex
+     * @param {?} avg
+     * @return {?}
+     */
+    getRatingIconClass(ratingIndex, avg) {
+        return this.ratingService.getRatingIconClass(ratingIndex, avg);
+    }
+    /**
+     * @param {?} indexValue
+     * @return {?}
+     */
+    getCurrentIndex(indexValue) {
+        this.currentIndex = indexValue;
+        this.handleScrollClick(indexValue);
+    }
+    /**
+     * @param {?} dataValue
+     * @return {?}
+     */
+    handleScrollClick(dataValue) {
+        /** @type {?} */
+        const item = this.scrollableItems.find((/**
+         * @param {?} x
+         * @return {?}
+         */
+        x => x.key === dataValue));
+        item.scrollIntoView("nearest");
+    }
+}
+UserContentRatingLibComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-user-content-rating',
+                template: "<ng-container *ngIf=\"contentdata.length\">\n    <sb-uic-sliders-ng-content [title]=\"'providerName'\"  [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n        <div sliderbody>\n            <div class=\"flex justify-start md:justify-center users-block mb-4 \">\n                <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n                    <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n                    [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n                        <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                        </sb-uic-avatar-photo>\n                    </div>\n                </ng-container>\n            </div>\n            <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                    <p class=\"userName w-full mb-4\">{{ratingData?.userDetails?.firstName}}</p>\n        \n                    <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                        <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                            [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n                            *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                            {{ getRatingIcon(rating, ratingData?.rating) }}\n                        </mat-icon>\n                    </div>\n                    <p class=\"content-feedback w-full mb-4 pl-0 pr-0 md:pl-12 md:pr-12 \">{{ratingData?.review}}</p>\n    \n                    <hr class=\"divider mb-4\">\n                    <p class=\"content-info w-full mb-4\">For The Content</p>\n                    <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8\">\n                        <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </sb-uic-sliders-ng-content>\n</ng-container>\n\n",
+                styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:24px!important;width:100%}hr.divider{border:1px solid #f3972e;width:185px}"]
+            }] }
+];
+/** @nocollapse */
+UserContentRatingLibComponent.ctorParameters = () => [
+    { type: RatingService },
+    { type: UserContentRatingLibService }
+];
+UserContentRatingLibComponent.propDecorators = {
+    providerId: [{ type: Input }],
+    formData: [{ type: Input }],
+    emptyResponse: [{ type: Output }],
+    scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+};
+if (false) {
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.currentIndex;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.providerId;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.formData;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.emptyResponse;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.styleData;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.contentdata;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.scrollableItems;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.ratingService;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.userRatingSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class AvatarPhotoLibComponent {
+    constructor() {
+        this.size = '';
+        this.defaulfColor = '';
+        this.randomColor = false;
+        this.showBadge = false;
+        this.showInitials = false;
+        this.random = Math.random().toString(36).slice(2);
+        // public initials!: string
+        this.colors = [
+            '#EB7181',
+            '#306933',
+            '#000000',
+            '#3670B2',
+            '#4E9E87',
+            '#7E4C8D',
+        ];
+        this.randomcolors = [
+            '#EB7181',
+            '#006400',
+            '#000000',
+            '#3670B2',
+            '#4E9E87',
+            '#7E4C8D',
+        ];
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        if (!this.photoUrl) {
+            this.showInitials = true;
+            if (!this.initials) {
+                this.createInititals();
+            }
+            if (this.datalen === 1) {
+                if (this.defaulfColor) {
+                    this.randomcolors = [
+                        this.defaulfColor
+                    ];
+                }
+                else {
+                    this.randomcolors = [
+                        '#006400',
+                    ];
+                }
+            }
+            /** @type {?} */
+            const randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
+            this.circleColor = this.colors[randomIndex];
+            if (this.randomColor) {
+                /** @type {?} */
+                const randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomcolors.length));
+                this.circleColor = this.randomcolors[randomIndex1];
+            }
+        }
+    }
+    /**
+     * @param {?} change
+     * @return {?}
+     */
+    ngOnChanges(change) {
+        if (change.name.currentValue !== change.name.previousValue && !change.name.firstChange) {
+            this.createInititals();
+        }
+    }
+    /**
+     * @return {?}
+     */
+    get userInitials() {
+        return this.initials;
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    createInititals() {
+        /** @type {?} */
+        let initials = '';
+        /** @type {?} */
+        const array = `${this.name} `.toString().split(' ');
+        if (array[0] !== 'undefined' && typeof array[1] !== 'undefined') {
+            initials += array[0].charAt(0);
+            initials += array[1].charAt(0);
+        }
+        else {
+            for (let i = 0; i < this.name.length; i += 1) {
+                if (this.name.charAt(i) === ' ') {
+                    continue;
+                }
+                if (this.name.charAt(i) === this.name.charAt(i)) {
+                    initials += this.name.charAt(i);
+                    if (initials.length === 2) {
+                        break;
+                    }
+                }
+            }
+        }
+        this.initials = initials.toUpperCase();
+    }
+}
+AvatarPhotoLibComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-avatar-photo',
+                template: "<div id=\"user_icon\" [ngClass]=\"{'circle-s' : size=== 's',\n'circle-m' : size=== 'm',\n'circle-l' : size=== 'l',\n'circle-xl' : size=== 'xl',\n'circle-xxl' : size=== 'xxl',\n'circle-l-xs' : size=== 'l-xs',\n'circle-l-s' : size=== 'l-s',\n'circle-xl-s' : size=== 'xl-s',\n'circle-r-m': size=== 'round-m',\n'circle-r-p-m': size=== 'profile-round-m',\n'circle-m-side': size=== 'm-side',\n'circle-r-m-48': size=== 'm-side-rating',\n'circle-m-recommended': size==='m-recommended',\n'circle-xxl-s': size=== 'xxl-s'}\" [ngStyle]=\"{'background-color':  circleColor }\">\n  <img *ngIf=\"!showInitials\" loading=\"lazy\" src=\"{{photoUrl}}\" [alt]=\"photoUrl? '' :(name || userInitials || size || random)\">\n\n  <div *ngIf=\"showInitials\" class=\"initials\" i18n-aria-label>\n    {{ userInitials }} \n  </div>\n  <div *ngIf=\"showBadge\"><span class=\"profile-badge\">  \n    <img src=\"fusion-assets/images/profile-badge.png\">\n  </span></div>\n\n  <!-- <div *ngIf=\"imageType === 'user-photo'\">\n    <img *ngIf=\"imageUrl\" [src]=\"imageUrl\" alt=\"user-image\" class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n    <div class=\"user-image\" [ngClass]=\"{'user-image-small': imageSize === 'small'}\">\n      <span class=\"name-initials-image font-normal ws-mat-primary-default-text ws-mat-accent-background\"\n      *ngIf=\"!imageUrl\">{{ shortName }}</span>\n    </div>\n  </div> -->\n</div>",
+                styles: ["@charset \"UTF-8\";.success-checkmark::after{content:\"\u2714\";position:absolute;left:25px;top:20px;width:11px;height:11px;border:1px solid #1d8923;background:#1d8923;border-radius:50%;color:#fff;line-height:11px;text-align:center;font-size:9px}.profile-badge{position:absolute;top:10px;right:0}.profile-badge img{height:15px!important;width:15px!important}.circle-s{border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;align-items:center}.circle-s img{border-radius:50%;width:100%;height:100%}.circle-s .initials{color:#fff;font-size:10px;line-height:12px;letter-spacing:.2625px}.circle-m{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-36px}.circle-m img{border-radius:10%;width:40px;height:40px}.circle-m .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l img{border-radius:10%;width:80px;height:80px}.circle-l .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xl{border-radius:50%;width:105px;height:105px;display:flex;justify-content:center;align-items:center}.circle-xl img{border-radius:10%;width:105px;height:105px}.circle-xl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-xxl{border-radius:50%;width:145px;height:145px;display:flex;justify-content:center;align-items:center}.circle-xxl img{border-radius:10%;width:145px;height:145px}.circle-xxl .initials{color:#fff;font-size:20px;line-height:19px;letter-spacing:.2625px}.circle-l-xs{border-radius:50%;width:29px;height:29px;display:flex;justify-content:center;align-items:center}.circle-l-xs img{border-radius:50%;width:100%;height:100%}.circle-l-xs .initials{color:#fff;font-size:12px;line-height:12px;letter-spacing:.2625px}.circle-l-s{border-radius:50%;width:80px;height:80px;display:flex;justify-content:center;align-items:center}.circle-l-s img{border-radius:4px;width:80px;height:80px}.circle-l-s .initials{color:#fff;font-size:24px;line-height:24px;letter-spacing:.2625px}.circle-xl-s{border-radius:50%;width:125px;height:125px;display:flex;justify-content:center;align-items:center}.circle-xl-s img{border-radius:4px;width:152px;height:125px}.circle-xl-s .initials{color:#fff;font-size:32px;line-height:32px;letter-spacing:.2625px}.circle-xxl-s{border-radius:50%;width:208px;height:208px;display:flex;justify-content:center;align-items:center}.circle-xxl-s img{border-radius:50%;width:100%;height:100%}.circle-xxl-s .initials{color:#fff;font-size:40px;line-height:40px;letter-spacing:.2625px}.circle-r-m{border-radius:50%;width:50px;height:50px;display:flex;justify-content:center;align-items:center}.circle-r-m img{border-radius:50%;width:100%;height:100%}.circle-r-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-m-48{border-radius:50%;width:48px;height:48px;display:flex;justify-content:center;align-items:center}.circle-r-m-48 img{border-radius:50%;width:100%;height:100%}.circle-r-m-48 .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-r-p-m{border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center}.circle-r-p-m img{border-radius:50%;width:100%;height:100%}.circle-r-p-m .initials{color:#fff;font-size:16px;line-height:40px;letter-spacing:.2625px}.circle-m-side{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center}.circle-m-side img{border-radius:10%;width:40px;height:40px}.circle-m-side .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}@media only screen and (max-width:960px){.circle-xxl-s{width:100px;height:100px}.circle-xxl-s .initials{font-size:24px;line-height:24px}}.circle-m-recommended{border-radius:50%;width:72px!important;height:72px!important;display:flex;justify-content:center;align-items:center;margin-top:-49px}.circle-m-recommended img{border-radius:10%;width:40px;height:40px}.circle-m-recommended .initials{color:#fff;font-size:14px;line-height:19px;letter-spacing:.2625px}.circle-l-s::before{content:\"\";border:1px solid red}"]
+            }] }
+];
+AvatarPhotoLibComponent.propDecorators = {
+    datalen: [{ type: Input }],
+    photoUrl: [{ type: Input }],
+    name: [{ type: Input }],
+    size: [{ type: Input }],
+    defaulfColor: [{ type: Input }],
+    randomColor: [{ type: Input }],
+    initials: [{ type: Input }],
+    showBadge: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.datalen;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.photoUrl;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.name;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.size;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.defaulfColor;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.randomColor;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.initials;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.showBadge;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.showInitials;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.circleColor;
+    /** @type {?} */
+    AvatarPhotoLibComponent.prototype.random;
+    /**
+     * @type {?}
+     * @private
+     */
+    AvatarPhotoLibComponent.prototype.colors;
+    /**
+     * @type {?}
+     * @private
+     */
+    AvatarPhotoLibComponent.prototype.randomcolors;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class AvatarPhotoLibModule {
+}
+AvatarPhotoLibModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [AvatarPhotoLibComponent],
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    MatButtonModule,
+                    MatIconModule,
+                    MatMenuModule,
+                    MatRippleModule,
+                    SbUiResolverModule,
+                ],
+                exports: [AvatarPhotoLibComponent],
+                entryComponents: [AvatarPhotoLibComponent],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class SlidersNgContentLibComponent extends WidgetBaseComponent {
+    /**
+     * @param {?} events
+     * @param {?} valueSvc
+     */
+    constructor(events, valueSvc) {
+        super();
+        this.events = events;
+        this.valueSvc = valueSvc;
+        this.title = '';
+        this.loadNgContentData = false;
+        this.autoScroll = false;
+        this.currentIndexValue = new EventEmitter();
+        this.id = `banner_${Math.random()}`;
+        this.defaultMenuSubscribe = null;
+        this.isLtMedium$ = this.valueSvc.isLtMedium$;
+        this.currentIndex = 0;
+        this.slideInterval = null;
+        this.isMobile = false;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        if (this.autoScroll) {
+            this.reInitiateSlideInterval();
+        }
+        this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
+         * @param {?} isLtMedium
+         * @return {?}
+         */
+        (isLtMedium) => {
+            this.isMobile = isLtMedium;
+        }));
+    }
+    /**
+     * @return {?}
+     */
+    reInitiateSlideInterval() {
+        if (this.widgetData && this.widgetData.length > 1) {
+            try {
+                if (this.slideInterval) {
+                    this.slideInterval.unsubscribe();
+                }
+            }
+            catch (e) {
+            }
+            finally {
+                this.slideInterval = interval(8000).subscribe((/**
+                 * @return {?}
+                 */
+                () => {
+                    if (this.currentIndex === this.widgetData.length - 1) {
+                        this.currentIndex = 0;
+                        this.currentIndexValue.emit(this.currentIndex);
+                    }
+                    else {
+                        this.currentIndex += 1;
+                        this.currentIndexValue.emit(this.currentIndex);
+                    }
+                }));
+            }
+        }
+    }
+    /**
+     * @param {?} index
+     * @return {?}
+     */
+    slideTo(index) {
+        if (index >= 0 && index < this.widgetData.length) {
+            this.currentIndex = index;
+            this.currentIndexValue.emit(this.currentIndex);
+        }
+        else if (index === this.widgetData.length) {
+            this.currentIndex = 0;
+            this.currentIndexValue.emit(this.currentIndex);
+        }
+        else {
+            this.currentIndex = this.widgetData.length + index;
+            this.currentIndexValue.emit(this.currentIndex);
+        }
+        if (this.autoScroll) {
+            this.reInitiateSlideInterval();
+        }
+    }
+    /**
+     * @return {?}
+     */
+    get isOpenInNewTab() {
+        /** @type {?} */
+        const currentData = this.widgetData[this.currentIndex];
+        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * @return {?}
+     */
+    openInNewTab() {
+        /** @type {?} */
+        const currentData = this.widgetData[this.currentIndex];
+        if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+            window.open(currentData.redirectUrl);
+        }
+    }
+    /**
+     * @param {?} bannerUrl
+     * @return {?}
+     */
+    raiseTelemetry(bannerUrl) {
+        this.openInNewTab();
+        /** @type {?} */
+        const path = window.location.pathname.replace('/', '');
+        /** @type {?} */
+        const url = path + window.location.search;
+        this.events.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'banner',
+        }, {
+            pageUrl: url,
+            bannerRedirectUrl: bannerUrl,
+        }, {
+            pageIdExt: 'banner',
+            module: WsEvents.EnumTelemetrymodules.CONTENT,
+        });
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        if (this.defaultMenuSubscribe) {
+            this.defaultMenuSubscribe.unsubscribe();
+        }
+    }
+}
+SlidersNgContentLibComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-sliders-ng-content',
+                template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n  [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n  <ng-container *ngIf=\"!loadNgContentData\">\n    <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"loadNgContentData\">\n    <!-- <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n      <ng-content select=\"[sliderbody]\"></ng-content>\n    <!-- </div> -->\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n            <ng-content select=\"[sliderMeta]\"></ng-content>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n  *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </div>\n</div>\n<div class=\"banner-container-solo margin-top-s\" *ngIf=\"widgetData?.length == 1\">\n  <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n\n<!-- <ng-container *ngIf=\"!widgetData?.length\">\n  <div class=\"slider default-slider h-full\">\n    <div class=\"relative h-full\">\n        <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n        <div class=\"default-title rounded-full\">\n            <p class=\"mat-h1\">{{title}}</p>\n        </div>\n    </div>\n  </div>\n</ng-container> -->\n",
+                styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta.top-center{left:0;bottom:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
+            }] }
+];
+/** @nocollapse */
+SlidersNgContentLibComponent.ctorParameters = () => [
+    { type: EventService },
+    { type: ValueService }
+];
+SlidersNgContentLibComponent.propDecorators = {
+    widgetData: [{ type: Input }],
+    styleData: [{ type: Input }],
+    title: [{ type: Input }],
+    loadNgContentData: [{ type: Input }],
+    autoScroll: [{ type: Input }],
+    currentIndexValue: [{ type: Output }],
+    id: [{ type: HostBinding, args: ['id',] }],
+    currentIndex: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.widgetData;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.styleData;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.title;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.loadNgContentData;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.autoScroll;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.currentIndexValue;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.id;
+    /**
+     * @type {?}
+     * @private
+     */
+    SlidersNgContentLibComponent.prototype.defaultMenuSubscribe;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.isLtMedium$;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.currentIndex;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.slideInterval;
+    /** @type {?} */
+    SlidersNgContentLibComponent.prototype.isMobile;
+    /**
+     * @type {?}
+     * @private
+     */
+    SlidersNgContentLibComponent.prototype.events;
+    /**
+     * @type {?}
+     * @private
+     */
+    SlidersNgContentLibComponent.prototype.valueSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/* tslint:enable */
+class MyHammerConfig$1 extends HammerGestureConfig {
+    /**
+     * @param {?} element
+     * @return {?}
+     */
+    buildHammer(element) {
+        /** @type {?} */
+        const mc = new Hammer(element, {
+            touchAction: 'pan-y',
+        });
+        return mc;
+    }
+}
+// tslint:disable-next-line: max-classes-per-file
+class SlidersNgContentLibModule {
+}
+SlidersNgContentLibModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [SlidersNgContentLibComponent],
+                imports: [
+                    CommonModule,
+                    RouterModule,
+                    NavigationModule,
+                    ImageResponsiveModule,
+                ],
+                exports: [SlidersNgContentLibComponent],
+                entryComponents: [SlidersNgContentLibComponent],
+                providers: [
+                    {
+                        provide: HAMMER_GESTURE_CONFIG,
+                        useClass: MyHammerConfig$1,
+                    },
+                ],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ScrollableItemModule {
+}
+ScrollableItemModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ScrollableItemDirective],
+                imports: [
+                    CommonModule,
+                ],
+                exports: [ScrollableItemDirective],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class UserContentRatingLibModule {
+}
+UserContentRatingLibModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [UserContentRatingLibComponent],
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                    MatChipsModule,
+                    SkeletonLoaderLibModule,
+                    SlidersLibModule,
+                    CardsModule,
+                    AvatarPhotoLibModule,
+                    SlidersNgContentLibModule,
+                    ScrollableItemModule
+                ],
+                exports: [UserContentRatingLibComponent],
+                providers: [RatingService, UserContentRatingLibService],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA]
+            },] }
+];
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7986,5 +9413,5 @@ CompetencyPassbookModule.decorators = [
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, DisplayContentTypeLibComponent as ɵba, DefaultThumbnailModule as ɵbb, DefaultThumbnailDirective as ɵbc, PipeDurationTransformModule as ɵbd, PipeDurationTransformPipe as ɵbe, CompetencyPassbookComponent as ɵbf, CompetencyPassbookService as ɵbg, PillsModule as ɵbh, PillsComponent as ɵbi, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CommonStripComponent as ɵr, CardResourceComponent as ɵs, CardsComponent as ɵt, CardPortraitComponent as ɵu, CardUserComponent as ɵv, CardLandscapeComponent as ɵw, PipePublicURLModule as ɵx, PipePublicURL as ɵy, DisplayContentTypeLibModule as ɵz };
+export { 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, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, PipePublicURL as ɵba, DisplayContentTypeLibModule as ɵbb, DisplayContentTypeLibComponent as ɵbc, DefaultThumbnailModule as ɵbd, DefaultThumbnailDirective as ɵbe, PipeDurationTransformModule as ɵbf, PipeDurationTransformPipe as ɵbg, CompetencyPassbookComponent as ɵbh, CompetencyPassbookService as ɵbi, PillsModule as ɵbj, PillsComponent as ɵbk, UserContentRatingLibComponent as ɵbl, ScrollableItemDirective as ɵbm, RatingService as ɵbn, UserContentRatingLibService as ɵbo, AvatarPhotoLibModule as ɵbp, AvatarPhotoLibComponent as ɵbq, MyHammerConfig$1 as ɵbr, SlidersNgContentLibModule as ɵbs, SlidersNgContentLibComponent as ɵbt, ScrollableItemModule as ɵbu, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CalenderDayComponent as ɵr, CommonStripComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, PipePublicURLModule as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map