@sunbird-cb/consumption 0.0.12 → 0.0.13

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

@@ -3822,18 +3822,21 @@
         __extends(ContentStripWithTabsLibComponent, _super);
         function ContentStripWithTabsLibComponent(
         // private contentStripSvc: ContentStripNewMultipleService,
-        environment, contentSvc, loggerSvc, eventSvc, configSvc, utilitySvc, userSvc, translate, langtranslations) {
+        environment, contentSvc, loggerSvc, eventSvc, configSvc, utilitySvc, router, userSvc, translate, langtranslations) {
             var _this = _super.call(this) || this;
             _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 core.EventEmitter();
+            _this.viewAllResponse = new core.EventEmitter();
             _this.providerId = '';
+            _this.emitViewAll = false;
             _this.id = "ws-strip-miltiple_" + Math.random();
             _this.stripsResultDataMap = {};
             _this.stripsKeyOrder = [];
@@ -5701,10 +5704,30 @@
             }
             return filters;
         };
+        /**
+         * @param {?} stripData
+         * @param {?} path
+         * @param {?} queryParamsData
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.redirectViewAll = /**
+         * @param {?} stripData
+         * @param {?} path
+         * @param {?} queryParamsData
+         * @return {?}
+         */
+        function (stripData, path, queryParamsData) {
+            if (this.emitViewAll) {
+                this.viewAllResponse.emit(stripData);
+            }
+            else {
+                this.router.navigate([path], { queryParams: queryParamsData });
+            }
+        };
         ContentStripWithTabsLibComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -5716,6 +5739,7 @@
             { type: utilsV2.EventService },
             { type: utilsV2.ConfigurationsService },
             { type: utilsV2.UtilityService },
+            { type: router.Router },
             { type: WidgetUserService },
             { type: core$1.TranslateService },
             { type: MultilingualTranslationsService }
@@ -5723,7 +5747,9 @@
         ContentStripWithTabsLibComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
             emptyResponse: [{ type: core.Output }],
+            viewAllResponse: [{ type: core.Output }],
             providerId: [{ type: core.Input }],
+            emitViewAll: [{ type: core.Input }],
             id: [{ type: core.HostBinding, args: ['id',] }]
         };
         return ContentStripWithTabsLibComponent;
@@ -5734,8 +5760,12 @@
         /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.emptyResponse;
         /** @type {?} */
+        ContentStripWithTabsLibComponent.prototype.viewAllResponse;
+        /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.providerId;
         /** @type {?} */
+        ContentStripWithTabsLibComponent.prototype.emitViewAll;
+        /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.id;
         /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.stripsResultDataMap;
@@ -5793,6 +5823,8 @@
         ContentStripWithTabsLibComponent.prototype.configSvc;
         /** @type {?} */
         ContentStripWithTabsLibComponent.prototype.utilitySvc;
+        /** @type {?} */
+        ContentStripWithTabsLibComponent.prototype.router;
         /**
          * @type {?}
          * @private
@@ -6369,7 +6401,8 @@
      */
     /** @type {?} */
     var 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"
     };
     var InsiteDataService = /** @class */ (function () {
         function InsiteDataService(http) {
@@ -6386,6 +6419,17 @@
         function (request) {
             return this.http.post(API_END_POINTS$2.PROVIDER_INSIGHTS, request);
         };
+        /**
+         * @param {?} request
+         * @return {?}
+         */
+        InsiteDataService.prototype.fetchTrainingDetails = /**
+         * @param {?} request
+         * @return {?}
+         */
+        function (request) {
+            return this.http.post(API_END_POINTS$2.TRAINING_DETAILS, request);
+        };
         InsiteDataService.decorators = [
             { type: core.Injectable, args: [{
                         providedIn: 'root'
@@ -6490,7 +6534,7 @@
         DataPointsComponent.decorators = [
             { type: core.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}}"]
                     }] }
         ];
@@ -6618,8 +6662,23 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var CalenderComponent = /** @class */ (function () {
-        function CalenderComponent() {
-            this.toDay = new Date();
+        function CalenderComponent(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 {?}
@@ -6628,18 +6687,260 @@
          * @return {?}
          */
         function () {
-            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 {?}
+         */
+        CalenderComponent.prototype.getInsiteData = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            /** @type {?} */
+            var 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 {?}
+             */
+            function (res) {
+                if (res && res.result && res.result.Event) {
+                    res.result.Event.forEach((/**
+                     * @param {?} resp
+                     * @return {?}
+                     */
+                    function (resp) {
+                        if (_this.trainings[resp.startDate]) {
+                            /** @type {?} */
+                            var prevData = _this.trainings[resp.startDate];
+                            /** @type {?} */
+                            var location_1 = resp.eventType;
+                            if (resp.venue && location_1 !== "Online") {
+                                /** @type {?} */
+                                var jsonResp = JSON.parse(resp.venue);
+                                location_1 = jsonResp['address'];
+                            }
+                            /** @type {?} */
+                            var formatObject = {
+                                location: location_1,
+                                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 {?}
+         */
+        CalenderComponent.prototype.getKeys = /**
+         * @param {?} obj
+         * @return {?}
+         */
+        function (obj) {
+            return Object.keys(obj);
+        };
+        /**
+         * @param {?} date
+         * @return {?}
+         */
+        CalenderComponent.prototype.formatDate = /**
+         * @param {?} date
+         * @return {?}
+         */
+        function (date) {
+            /** @type {?} */
+            var formatDate = new Date(date);
+            return this.datePipe.transform(formatDate, 'E, dd LLL');
+        };
+        /**
+         * @param {?} timeString
+         * @return {?}
+         */
+        CalenderComponent.prototype.convertTo12HourFormat = /**
+         * @param {?} timeString
+         * @return {?}
+         */
+        function (timeString) {
+            /** @type {?} */
+            var time = timeString.split(":");
+            /** @type {?} */
+            var hours = +time[0];
+            /** @type {?} */
+            var minutes = +time[1];
+            /** @type {?} */
+            var ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12;
+            hours = hours ? hours : 12;
+            /** @type {?} */
+            var strHours = hours < 10 ? '0' + hours : hours.toString();
+            /** @type {?} */
+            var strMinutes = minutes < 10 ? '0' + minutes : minutes.toString();
+            return strHours + ":" + strMinutes + ": " + ampm;
+        };
+        /**
+         * @param {?} cDate
+         * @param {?} counter
+         * @return {?}
+         */
+        CalenderComponent.prototype.getDays = /**
+         * @param {?} cDate
+         * @param {?} counter
+         * @return {?}
+         */
+        function (cDate, counter) {
+            /** @type {?} */
+            var days = [];
+            /** @type {?} */
+            var initDate = new Date(cDate);
+            initDate = this.datePipe.transform(initDate, 'y-MM-dd');
+            days.push(initDate);
+            this.trainings[initDate] = [];
+            while (counter > 0) {
+                /** @type {?} */
+                var 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 {?}
+         */
+        CalenderComponent.prototype.getDaysInMonth = /**
+         * @param {?} year
+         * @param {?} month
+         * @return {?}
+         */
+        function (year, month) {
+            /** @type {?} */
+            var date = new Date(year, month, 1);
+            /** @type {?} */
+            var days = [];
+            this.trainings = {};
+            while (date.getMonth() === month) {
+                /** @type {?} */
+                var 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 {?}
+         */
+        CalenderComponent.prototype.getMonthsDropdownData = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.allMonths.forEach((/**
+             * @param {?} month
+             * @return {?}
+             */
+            function (month) {
+                _this.monthsDropdown.push(month + " " + _this.currentDate.getFullYear());
+            }));
+        };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        CalenderComponent.prototype.selectMonth = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            /** @type {?} */
+            var 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: core.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 = function () { return [
+            { type: common.DatePipe },
+            { type: InsiteDataService }
+        ]; };
         CalenderComponent.propDecorators = {
-            objectData: [{ type: core.Input }]
+            objectData: [{ type: core.Input }],
+            layoutType: [{ type: core.Input }],
+            fetchDataFromApi: [{ type: core.Input }],
+            showHeader: [{ type: core.Input }],
+            defaultDays: [{ type: core.Input }],
+            providerId: [{ type: core.Input }],
+            fullCalendor: [{ type: core.Input }]
         };
         return CalenderComponent;
     }());
@@ -6647,7 +6948,142 @@
         /** @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
+     */
+    var CalenderDayComponent = /** @class */ (function () {
+        function CalenderDayComponent(datePipe) {
+            this.datePipe = datePipe;
+            this.webDisplayDate = "";
+            this.mobileDisplayDate = "";
+            this.currentDate = new Date();
+        }
+        /**
+         * @return {?}
+         */
+        CalenderDayComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            this.currentDate = this.datePipe.transform(this.currentDate, 'y-MM-dd');
+        };
+        /**
+         * @param {?} link
+         * @return {?}
+         */
+        CalenderDayComponent.prototype.openLink = /**
+         * @param {?} link
+         * @return {?}
+         */
+        function (link) {
+            window.open(link, "_blank");
+        };
+        /**
+         * @param {?} date
+         * @param {?} type
+         * @return {?}
+         */
+        CalenderDayComponent.prototype.formatDate = /**
+         * @param {?} date
+         * @param {?} type
+         * @return {?}
+         */
+        function (date, type) {
+            /** @type {?} */
+            var 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: core.Component, args: [{
+                        selector: 'sb-uic-calender-day',
+                        template: "<div *ngIf=\"layoutType==='grid' && !dataLoading\">\n    <div class=\"p-3 event-day my-3\"\n        [style.backgroundColor]=\"objectData?.webBackgroundColor\"\n        [style.borderColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\">\n    \n        <div class=\"flex item-top gap-8 {{ day.length ? '' : 'aliginCenter'}}\">\n            <div class=\"event-date\">\n                <div class=\"currentDay\"\n                    [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                    [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                    {{formatDate(eventDate, 'web')}}\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex p-4 item-center events-list mb-{{day.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\"\n                    *ngFor=\"let event of day; let i = index\" >\n                    <div>\n                        <div class=\"flex flex-row item-center gap-10 pb-2\">\n                            <div class=\"flex item-center gap-1 row1 col1\">\n                                <div><mat-icon class=\"icon-web\">schedule</mat-icon> </div>\n                                <div>{{event.startTime}} to {{event.endTime}}</div>\n                            </div>\n                            <div class=\"flex item-center col1\">{{event.title}}</div>\n                        </div>\n                        <div class=\"flex flex-row item-center gap-10\">\n                            <div class=\"flex item-center gap-1 row1 col1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                                <div><mat-icon class=\"icon-web\">date_range</mat-icon> </div>\n                                <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                            </div>\n                            <div class=\"flex item-center col1\">\n                                <div><mat-icon class=\"icon-web\">location_on</mat-icon> </div>\n                                <div class=\"flex item-center\">{{event.location}}</div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"visit-link flex gap-2\"\n                        *ngIf=\"event?.registrationLink\">\n                        <div (click)=\"openLink(event?.registrationLink)\">Visit</div>\n                        <div (click)=\"openLink(event?.registrationLink)\"><mat-icon class=\"visit-icon\">open_in_new</mat-icon> </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"!day.length\">\n                No trainings.\n            </div>\n        </div>\n    </div>\n</div>\n\n<div *ngIf=\"layoutType==='row' && !dataLoading\">\n    <div class=\"p-5 mb-{{day?.length === (rowId+1) ? '0' : '3'}}\"\n        [style.backgroundColor]=\"objectData?.mobileBackground\">\n        <div class=\"flex item-center gap-4\">\n            <div class=\"event-date\">\n                <div class=\"flex flex-col\">\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[0]}}</div>\n                    <div class=\"mob-currentDay\"\n                        [style.backgroundColor]=\"currentDate === eventDate ? objectData?.activeBackgroudColor: ''\"\n                        [style.color]=\"currentDate === eventDate ? objectData?.activeColor: ''\">\n                        {{formatDate(eventDate, 'mob').split(' ')[1]}}\n                    </div>\n                    <div> {{formatDate(eventDate, 'mob').split(' ')[2]}}</div>\n                </div>\n            </div>\n            <div class=\"details w-full\" *ngIf=\"day.length\">\n                <div class=\"flex flex-col mob-events-list p-3 mb-{{day.length === (i+1) ? '0' : '2'}}\"\n                    *ngFor=\"let event of day; let i = index\" [style.backgroundColor]=\"objectData?.eventBackgroundColor\">\n                    <div>\n                        <div class=\"flex pb-2\">{{event.title}}</div>\n                        <div class=\"flex pb-1\">\n                            <div><mat-icon class=\"mob-icon\">schedule</mat-icon> </div>\n                            <div>{{event.startTime}} to {{event.endTime}}</div>\n                        </div>\n                        <div class=\"flex pb-1\" *ngIf=\"event.startDate && event.endDate && event.startDate !== event.endDate\">\n                            <div><mat-icon class=\"mob-icon\">date_range</mat-icon> </div>\n                            <div class=\"upcase\">{{event.startDate}} - {{event.endDate}}</div>\n                        </div>\n                        <div class=\"flex\">\n                            <div><mat-icon class=\"mob-icon\">location_on</mat-icon> </div>\n                            <div class=\"flex item-center\">{{event.location}}</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"details w-full flex no-data\" *ngIf=\"!day.length\">\n                No trainings.\n            </div>\n        </div>        \n    </div>    \n</div>\n\n<!-- skeleton  loaders -->\n<div *ngIf=\"dataLoading\">\n    <div *ngIf=\"layoutType==='grid'\">\n        <div class=\"hidden md:block\">\n            <div class=\"p-3 event-day my-3\"\n                [style.backgroundColor]=\"'#FFF'\">\n                <div class=\"flex item-top gap-8\">\n                    <div class=\"event-date\">\n                        <div class=\"currentDay\">\n                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'90px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>    \n                        </div>\n                    </div>\n                    <div class=\"details w-full\">\n                        <div class=\"flex p-4 item-center events-list mb-2 gap-20\">\n                            <div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                                <div class=\"flex flex-row item-center gap-20 pb-2\">\n                                    <div class=\"flex item-center gap-2 row1 col1\">\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'50px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                        <div>\n                                            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                            [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex item-center col1\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'250px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                                </div>\n                            </div>\n                            <div class=\"visit-link flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader> </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div *ngIf=\"layoutType==='row'\">\n        <div class=\"block md:hidden\">\n            <div class=\"p-5\" \n            [style.backgroundColor]=\"'#FFFFFF'\">\n            <div class=\"flex item-center gap-4\">\n                <div class=\"event-date\">\n                    <div class=\"flex flex-col\">\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                [height]=\"'90px'\"></sb-uic-skeleton-loader> \n                    </div>\n                </div>\n                <div class=\"details w-full\">\n                    <div class=\"flex flex-col mob-events-list p-3 mb-2\">\n                        <div>\n                            <div class=\"flex pb-2\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'265px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex pb-1 gap-2\">\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div>\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-2\">\n                                <div><sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'30px'\"\n                                    [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex item-center\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'230px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader> \n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>",
+                        styles: [".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%;text-transform:uppercase}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.icon-web{font-size:17px;height:17px}.upcase{text-transform:uppercase}.aliginCenter,.col1{align-items:center}.visit-link{cursor:pointer;align-items:center;justify-content:center}.visit-icon{font-size:17px;height:17px;color:#1b4ca1}.currentDay{padding:5px;border-radius:20px}.mob-currentDay{padding:8px;border-radius:20px}.mob-events-list{border:1px solid #e8e6e5;border-radius:10px;justify-content:space-between;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.mob-icon{font-size:17px;height:17px}.no-data{display:flex;align-items:center}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        CalenderDayComponent.ctorParameters = function () { return [
+            { type: common.DatePipe }
+        ]; };
+        CalenderDayComponent.propDecorators = {
+            objectData: [{ type: core.Input }],
+            layoutType: [{ type: core.Input }],
+            day: [{ type: core.Input }],
+            dataLoading: [{ type: core.Input }],
+            rowId: [{ type: core.Input }],
+            eventDate: [{ type: core.Input }]
+        };
+        return CalenderDayComponent;
+    }());
+    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;
     }
 
     /**
@@ -6662,9 +7098,15 @@
                         imports: [
                             common.CommonModule,
                             material.MatIconModule,
+                            forms.FormsModule,
+                            forms.ReactiveFormsModule,
+                            material.MatSelectModule,
+                            SkeletonLoaderLibModule
                         ],
-                        declarations: [CalenderComponent],
+                        declarations: [CalenderComponent, CalenderDayComponent],
                         exports: [CalenderComponent],
+                        schemas: [core.CUSTOM_ELEMENTS_SCHEMA],
+                        providers: [common.DatePipe, InsiteDataService],
                     },] }
         ];
         return CalenderModule;
@@ -6910,30 +7352,33 @@
             if (this.widgetData.loader && this.widgetData.strips.length) {
                 this.showParentLoader = true;
             }
-            try {
-                // Fetch the data
-                for (var _b = __values(this.widgetData.strips), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var strip = _c.value;
-                    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) {
+                try {
+                    // Fetch the data
+                    for (var _b = __values(this.widgetData.strips), _c = _b.next(); !_c.done; _c = _b.next()) {
+                        var strip = _c.value;
+                        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);
+                            }
                         }
                     }
                 }
-            }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    }
+                    finally { if (e_1) throw e_1.error; }
                 }
-                finally { if (e_1) throw e_1.error; }
             }
             // Subscription for changes
             /** @type {?} */
@@ -7720,7 +8165,7 @@
         CardsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-cards',
-                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n    </ng-container>\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 [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: [""]
                     }] }
         ];
@@ -7840,6 +8285,10 @@
                 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 {?}
@@ -8698,24 +9147,188 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    var CardsModule = /** @class */ (function () {
-        function CardsModule() {
-        }
-        CardsModule.decorators = [
-            { type: core.NgModule, args: [{
-                        declarations: [CardResourceComponent, CardsComponent, CardPortraitComponent, CardUserComponent, CardLandscapeComponent],
-                        imports: [
-                            common.CommonModule,
-                            material.MatCardModule,
-                            material.MatButtonModule,
-                            material.MatIconModule,
-                            material.MatTooltipModule,
-                            router.RouterModule,
-                            PipePublicURLModule,
-                            DisplayContentTypeLibModule,
-                            DefaultThumbnailModule,
-                            PipeDurationTransformModule,
-                            SkeletonLoaderLibModule
+    var CardWideComponent = /** @class */ (function () {
+        function CardWideComponent(snackBar, events, translate, langtranslations, configSvc) {
+            var _this = this;
+            this.snackBar = snackBar;
+            this.events = events;
+            this.translate = translate;
+            this.langtranslations = langtranslations;
+            this.configSvc = configSvc;
+            this.isCardLoading = false;
+            this.contentData = new core.EventEmitter();
+            this.isCardFlipped = false;
+            this.showFlip = false;
+            this.widgetType = 'df';
+            this.widgetSubType = 'sdf';
+            this.langtranslations.languageSelectedObservable.subscribe((/**
+             * @return {?}
+             */
+            function () {
+                if (localStorage.getItem('websiteLanguage')) {
+                    _this.translate.setDefaultLang('en');
+                    /** @type {?} */
+                    var lang = (/** @type {?} */ (localStorage.getItem('websiteLanguage')));
+                    _this.translate.use(lang);
+                }
+            }));
+        }
+        /**
+         * @return {?}
+         */
+        CardWideComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var instanceConfig = this.configSvc.instanceConfig;
+            if (instanceConfig) {
+                this.defaultThumbnail = instanceConfig.logos.defaultContent || '';
+                this.sourceLogos = instanceConfig.sources;
+                this.defaultSLogo = instanceConfig.logos.defaultSourceLogo || '/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 {?}
+         */
+        CardWideComponent.prototype.getRedirectUrlData = /**
+         * @param {?} contentData
+         * @return {?}
+         */
+        function (contentData) {
+            this.contentData.emit(contentData);
+        };
+        /**
+         * @return {?}
+         */
+        CardWideComponent.prototype.raiseTelemetry = /**
+         * @return {?}
+         */
+        function () {
+            // if(this.forPreview){
+            //   return
+            // }
+            this.events.raiseInteractTelemetry({
+                type: 'click',
+                subType: this.widgetType + "-" + this.widgetSubType,
+                id: lodash.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: lodash.camelCase(this.widgetData.content.primaryCategory) + "-card",
+                module: lodash.camelCase(this.widgetData.content.primaryCategory),
+            });
+        };
+        CardWideComponent.decorators = [
+            { type: core.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}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        CardWideComponent.ctorParameters = function () { return [
+            { type: material.MatSnackBar },
+            { type: utilsV2.EventService },
+            { type: core$1.TranslateService },
+            { type: MultilingualTranslationsService },
+            { type: utilsV2.ConfigurationsService }
+        ]; };
+        CardWideComponent.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            isLiveOrMarkForDeletion: [{ type: core.Input }],
+            showIntranetContent: [{ type: core.Input }],
+            isIntranetAllowedSettings: [{ type: core.Input }],
+            isCardLoading: [{ type: core.Input }],
+            contentData: [{ type: core.Output }]
+        };
+        return CardWideComponent;
+    }());
+    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
+     */
+    var CardsModule = /** @class */ (function () {
+        function CardsModule() {
+        }
+        CardsModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [CardResourceComponent, CardsComponent, CardPortraitComponent, CardUserComponent, CardLandscapeComponent, CardWideComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatCardModule,
+                            material.MatButtonModule,
+                            material.MatIconModule,
+                            material.MatTooltipModule,
+                            router.RouterModule,
+                            PipePublicURLModule,
+                            DisplayContentTypeLibModule,
+                            DefaultThumbnailModule,
+                            PipeDurationTransformModule,
+                            SkeletonLoaderLibModule
                         ],
                         entryComponents: [CardsComponent],
                         exports: [
@@ -8723,7 +9336,8 @@
                             CardResourceComponent,
                             CardPortraitComponent,
                             CardLandscapeComponent,
-                            CardUserComponent
+                            CardUserComponent,
+                            CardWideComponent
                         ],
                     },] }
         ];
@@ -8871,7 +9485,7 @@
          */
         function () {
             return __awaiter(this, void 0, void 0, function () {
-                var addfilter, request, response, error_1;
+                var addfilter, request, response, addFilter, error_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -8917,7 +9531,12 @@
                                      */
                                     function (partialSum, data) { return partialSum + data.count; }), 0);
                                     this.selectedValue = this.competencyArea[0].name.toLowerCase();
-                                    this.getcompetencyTheme(this.competencyArea[0].name);
+                                    addFilter = {
+                                        "channel": [
+                                            this.providerId
+                                        ]
+                                    };
+                                    this.getcompetencyTheme(this.competencyArea[0].name, addFilter);
                                     this.loadCompetencyArea = false;
                                 }
                             }
@@ -9075,6 +9694,7 @@
                             if (response && response.results) {
                                 if (response.results.result.facets) {
                                     this.competencyTheme = response.results.result.facets[0].values;
+                                    this.resetViewMore();
                                 }
                                 this.loadCometency = false;
                             }
@@ -9087,6 +9707,22 @@
                 });
             });
         };
+        /**
+         * @return {?}
+         */
+        CompetencyPassbookComponent.prototype.resetViewMore = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            Object.keys(this.allcompetencyTheme).forEach((/**
+             * @param {?} comp
+             * @return {?}
+             */
+            function (comp) {
+                _this.allcompetencyTheme[comp]['viewMore'] = false;
+            }));
+        };
         /**
          * @param {?} data
          * @return {?}
@@ -9097,6 +9733,7 @@
          */
         function (data) {
             data.viewMore = !data.viewMore;
+            this.allcompetencyTheme[data.name.toLowerCase()].viewMore = data.viewMore;
         };
         /**
          * @param {?} event
@@ -9281,6 +9918,1424 @@
         return CompetencyPassbookModule;
     }());
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    /** @type {?} */
+    var PROXY_SLAG_V8 = '/apis/proxies/v8';
+    var ɵ0$3 = /**
+     * @param {?} contentId
+     * @param {?} contentType
+     * @param {?} userId
+     * @return {?}
+     */
+    function (contentId, contentType, userId) {
+        return PROXY_SLAG_V8 + "/ratings/v1/read/" + contentId + "/" + contentType + "/" + userId;
+    }, ɵ1$2 = /**
+     * @param {?} contentId
+     * @param {?} contentType
+     * @return {?}
+     */
+    function (contentId, contentType) {
+        return PROXY_SLAG_V8 + "/ratings/v1/summary/" + contentId + "/" + contentType;
+    }, ɵ2$2 = /**
+     * @param {?} contentId
+     * @param {?} userID
+     * @return {?}
+     */
+    function (contentId, userID) {
+        return PROXY_SLAG_V8 + "/ratings/v1/read/" + contentId + "/Course/" + userID;
+    };
+    /** @type {?} */
+    var 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",
+    };
+    var RatingService = /** @class */ (function () {
+        function RatingService(http) {
+            this.http = http;
+        }
+        /**
+         * @param {?} contentId
+         * @param {?} contentType
+         * @param {?} userId
+         * @return {?}
+         */
+        RatingService.prototype.getRating = /**
+         * @param {?} contentId
+         * @param {?} contentType
+         * @param {?} userId
+         * @return {?}
+         */
+        function (contentId, contentType, userId) {
+            /** @type {?} */
+            var 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 rxjs.of({});
+        };
+        /**
+         * @param {?} req
+         * @return {?}
+         */
+        RatingService.prototype.addOrUpdateRating = /**
+         * @param {?} req
+         * @return {?}
+         */
+        function (req) {
+            return this.http.post(API_END_POINTS$3.ADD_OR_UPDATE, req);
+        };
+        /**
+         * @param {?} contentId
+         * @param {?} contentType
+         * @return {?}
+         */
+        RatingService.prototype.getRatingSummary = /**
+         * @param {?} contentId
+         * @param {?} contentType
+         * @return {?}
+         */
+        function (contentId, contentType) {
+            /** @type {?} */
+            var 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 rxjs.of({});
+        };
+        /**
+         * @param {?} req
+         * @return {?}
+         */
+        RatingService.prototype.getRatingLookup = /**
+         * @param {?} req
+         * @return {?}
+         */
+        function (req) {
+            return this.http.post(API_END_POINTS$3.GET_RATING_LOOKUP, req);
+        };
+        /**
+         * @param {?} req
+         * @return {?}
+         */
+        RatingService.prototype.getRatingReply = /**
+         * @param {?} req
+         * @return {?}
+         */
+        function (req) {
+            /** @type {?} */
+            var 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 rxjs.of({});
+        };
+        /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        RatingService.prototype.getRatingIcon = /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        function (ratingIndex, avg) {
+            if (avg) {
+                /** @type {?} */
+                var avgRating = avg;
+                /** @type {?} */
+                var 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 {?}
+         */
+        RatingService.prototype.getRatingIconClass = /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        function (ratingIndex, avg) {
+            if (avg) {
+                /** @type {?} */
+                var avgRating = avg;
+                /** @type {?} */
+                var 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 {?}
+         */
+        RatingService.prototype.getAuthorReply = /**
+         * @param {?} contentId
+         * @param {?} userID
+         * @return {?}
+         */
+        function (contentId, userID) {
+            return this.http.get(API_END_POINTS$3.GET_AUTHOR_REPLY(contentId, userID));
+        };
+        RatingService.decorators = [
+            { type: core.Injectable, args: [{
+                        providedIn: 'root',
+                    },] }
+        ];
+        /** @nocollapse */
+        RatingService.ctorParameters = function () { return [
+            { type: http.HttpClient }
+        ]; };
+        /** @nocollapse */ RatingService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function RatingService_Factory() { return new RatingService(core.ɵɵinject(http.HttpClient)); }, token: RatingService, providedIn: "root" });
+        return RatingService;
+    }());
+    if (false) {
+        /** @type {?} */
+        RatingService.prototype.http;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var UserContentRatingComponent = /** @class */ (function () {
+        function UserContentRatingComponent(ratingService) {
+            this.ratingService = ratingService;
+            this.currentIndex = 0;
+            this.styleData = {
+                "bannerMetaClass": "inline-meta",
+                "bannerMeta": "visible",
+                "bannerMetaAlign": "right",
+                "navigationArrows": "visible",
+                "borderRadius": "0",
+                "customHeight": "424px",
+                "arrowsPlacement": "middle-inline",
+                "responsive": {
+                    "bannerMetaClass": "inline-meta",
+                    "customHeight": "232px",
+                    "bannerMetaAlign": "right",
+                    "navigationArrows": "visible",
+                    "dots": "hidden",
+                    "arrowsPlacement": "middle-inline"
+                }
+            };
+            this.sliders = [
+                {
+                    "active": true,
+                    "banners": {
+                        "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png"
+                    },
+                    "redirectUrl": "",
+                    "queryParams": {},
+                    "title": ""
+                },
+                {
+                    "active": true,
+                    "banners": {
+                        "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
+                        "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
+                        "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
+                        "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
+                        "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
+                        "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png"
+                    },
+                    "redirectUrl": "",
+                    "queryParams": {},
+                    "title": ""
+                },
+                {
+                    "active": true,
+                    "banners": {
+                        "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
+                        "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
+                        "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
+                        "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
+                        "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
+                        "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png"
+                    },
+                    "redirectUrl": "",
+                    "queryParams": {},
+                    "title": ""
+                },
+                {
+                    "active": true,
+                    "banners": {
+                        "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png"
+                    },
+                    "redirectUrl": "",
+                    "queryParams": {},
+                    "title": ""
+                },
+                {
+                    "active": true,
+                    "banners": {
+                        "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
+                        "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png"
+                    },
+                    "redirectUrl": "",
+                    "queryParams": {},
+                    "title": ""
+                }
+            ];
+            this.contentCard = {
+                "content": {
+                    "identifier": "do_113990515935854592111",
+                    "competencies_v5": [
+                        {
+                            "competencyArea": "Behavioural",
+                            "competencyAreaId": 1,
+                            "competencyAreaDescription": "Behavioural Competency Area",
+                            "competencyTheme": "Collaboration",
+                            "competencyThemeId": 25,
+                            "competecnyThemeDescription": "Collaboration competency Theme",
+                            "competencyThemeType": "Core",
+                            "competencySubTheme": "Diversity & Inclusion",
+                            "competencySubThemeId": 27,
+                            "competecnySubThemeDescription": "Diversity & Inclusion Competency Sub-Theme"
+                        }
+                    ],
+                    "description": "Invite only program",
+                    "organisation": [
+                        "Ministry of Finance"
+                    ],
+                    "creatorLogo": null,
+                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139430185765847041226/artifact/do_1139430185765847041226_1702028635111_maxresdefault.jpg",
+                    "duration": "2280",
+                    "additionalTags": null,
+                    "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113990515935854592111/artifact/do_1139430185765847041226_1702028635111_maxresdefault.thumb.jpg",
+                    "primaryCategory": "Program",
+                    "name": "Invite only program",
+                    "avgRating": null,
+                    "contentType": "Course"
+                },
+                "cardSubType": "card-wide-lib",
+                "cardCustomeClass": "",
+                "context": {
+                    "pageSection": "featuredContents",
+                    "position": 3
+                },
+                "review": "Credit",
+                "rating": 5.0,
+                "userDetails": {
+                    "firstName": "Agri usertwo",
+                    "userId": "f00473e1-54e8-40b7-b541-461250f298d1",
+                    "profileImageUrl": null
+                }
+            };
+            this.widgetData = {
+                cardSubType: ''
+            };
+            this.responseData = [
+                {
+                    "review": "Credit",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Agri usertwo",
+                        "userId": "f00473e1-54e8-40b7-b541-461250f298d1",
+                        "profileImageUrl": null
+                    },
+                    "content": {
+                        "identifier": "do_113990515935854592111",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Behavioural",
+                                "competencyAreaId": 1,
+                                "competencyAreaDescription": "Behavioural Competency Area",
+                                "competencyTheme": "Collaboration",
+                                "competencyThemeId": 25,
+                                "competecnyThemeDescription": "Collaboration competency Theme",
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Diversity & Inclusion",
+                                "competencySubThemeId": 27,
+                                "competecnySubThemeDescription": "Diversity & Inclusion Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "Invite only program",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139430185765847041226/artifact/do_1139430185765847041226_1702028635111_maxresdefault.jpg",
+                        "duration": "2280",
+                        "additionalTags": null,
+                        "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113990515935854592111/artifact/do_1139430185765847041226_1702028635111_maxresdefault.thumb.jpg",
+                        "primaryCategory": "Program",
+                        "name": "Invite only program",
+                        "avgRating": null,
+                        "contentType": "Course"
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    }
+                },
+                {
+                    "review": "Abc xyz1",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Qa test user one @#$ 123",
+                        "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_113987549775609856182_rc",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaId": 145,
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyTheme": "Account Management",
+                                "competencyThemeId": 148,
+                                "competecnyThemeDescription": "Account Management competency Theme",
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Account Management",
+                                "competencySubThemeId": 149,
+                                "competecnySubThemeDescription": "Account Management Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "Course Check for MDO Specific All Users 09 Feb",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_11395704427130060819/artifact/do_11395704427130060819_1703740756028_capture71703740758098.png",
+                        "duration": "606",
+                        "additionalTags": null,
+                        "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113987549775609856182_rc/artifact/do_11395704427130060819_1703740756028_capture71703740758098.thumb.png",
+                        "primaryCategory": "Course",
+                        "name": "Course Check for MDO Specific All Users 09 Feb",
+                        "avgRating": 5.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "Testing ratings - Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eum, assumenda quasi accusamus perferendis voluptas saepe, ducimus architecto animi iste numquam vitae minima sed explica",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Agri usertwo",
+                        "userId": "f00473e1-54e8-40b7-b541-461250f298d1",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_114006606955921408144",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Behavioural",
+                                "competencyAreaId": 1,
+                                "competencyAreaDescription": "Behavioural Competency Area",
+                                "competencyTheme": "Collaborative Leadership",
+                                "competencyThemeId": 46,
+                                "competecnyThemeDescription": "Collaborative Leadership competency Theme",
+                                "competencyThemeType": "Leadership",
+                                "competencySubTheme": "Influencing and Negotiation",
+                                "competencySubThemeId": 47,
+                                "competecnySubThemeDescription": "Influencing and Negotiation Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "test Scrom",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139430185765847041226/artifact/do_1139430185765847041226_1702028635111_maxresdefault.jpg",
+                        "duration": "180",
+                        "additionalTags": null,
+                        "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_114006606955921408144/artifact/do_1139430185765847041226_1702028635111_maxresdefault.thumb.jpg",
+                        "primaryCategory": "Course",
+                        "name": "Large PDF test Cases",
+                        "avgRating": 4.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "Good courseQA",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Public User QA env",
+                        "userId": "0517056e-b57b-49ca-a44c-cdc3a251dd3e",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_113902049969004544112",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Backbone System Maintenance",
+                                "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
+                                "competencyThemeId": 186,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Backbone System Maintenance",
+                                "competencySubThemeId": 187,
+                                "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
+                            },
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
+                                "competencyThemeId": 184,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencySubThemeId": 185,
+                                "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "QATestCourse2",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "duration": "540",
+                        "additionalTags": null,
+                        "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "primaryCategory": "Course",
+                        "name": "QATestCourse2",
+                        "avgRating": 5.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "ok",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "qatestcreator",
+                        "userId": "54548483-0708-417c-ac9f-9b2260e13962",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_113902049969004544112",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Backbone System Maintenance",
+                                "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
+                                "competencyThemeId": 186,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Backbone System Maintenance",
+                                "competencySubThemeId": 187,
+                                "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
+                            },
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
+                                "competencyThemeId": 184,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencySubThemeId": 185,
+                                "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "QATestCourse2",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "duration": "540",
+                        "additionalTags": null,
+                        "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "primaryCategory": "Course",
+                        "name": "QATestCourse2",
+                        "avgRating": 5.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "nic onenic onenic onenic onenic onenic onenic onenic onenic onenic onenic onenic onenic one",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Qa test user one @#$ 123",
+                        "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_113902049969004544112",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Backbone System Maintenance",
+                                "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
+                                "competencyThemeId": 186,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Backbone System Maintenance",
+                                "competencySubThemeId": 187,
+                                "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
+                            },
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
+                                "competencyThemeId": 184,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencySubThemeId": 185,
+                                "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "QATestCourse2",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "duration": "540",
+                        "additionalTags": null,
+                        "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "primaryCategory": "Course",
+                        "name": "QATestCourse2",
+                        "avgRating": 5.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "Checking Ratings and alignment under Overview",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Get Started User Five",
+                        "userId": "e6a9d4b6-b30a-405f-9bcb-166038600218",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_113902049969004544112",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Backbone System Maintenance",
+                                "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
+                                "competencyThemeId": 186,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Backbone System Maintenance",
+                                "competencySubThemeId": 187,
+                                "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
+                            },
+                            {
+                                "competencyArea": "Domain",
+                                "competencyAreaDescription": "Domain Competency Area",
+                                "competencyAreaId": 145,
+                                "competencyTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
+                                "competencyThemeId": 184,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Communication Auxiliary Systems Maintenance",
+                                "competencySubThemeId": 185,
+                                "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "QATestCourse2",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "duration": "540",
+                        "additionalTags": null,
+                        "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
+                        "primaryCategory": "Course",
+                        "name": "QATestCourse2",
+                        "avgRating": 5.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "Testing rating 123",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Qa test user one @#$ 123",
+                        "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_1139400923254046721119",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Functional",
+                                "competencyAreaDescription": "Functional Competency Area",
+                                "competencyAreaId": 56,
+                                "competencyTheme": "Administration Matters",
+                                "competencyThemeDescription": "Administration Matters competency Theme",
+                                "competencyThemeId": 140,
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Handling Miscellaneous Matters (Car, Residence, Personal Staff etc.)",
+                                "competencySubThemeId": 143,
+                                "competencySubThemeDescription": "Handling Miscellaneous Matters (Car, Residence, Personal Staff etc.) Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "Youtube Links",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139400694644490241113/artifact/do_1139400694644490241113_1701668637063_effective-communication.png",
+                        "duration": "420",
+                        "additionalTags": null,
+                        "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_1139400923254046721119/artifact/do_1139400694644490241113_1701668637063_effective-communication.thumb.png",
+                        "primaryCategory": "Course",
+                        "name": "Course New 04 Dec",
+                        "avgRating": 5.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "nice1",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "Qa test user one @#$ 123",
+                        "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_1139967854457651201519_rc",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Behavioural",
+                                "competencyAreaId": 1,
+                                "competencyAreaDescription": "Behavioural Competency Area",
+                                "competencyTheme": "Personal Effectiveness",
+                                "competencyThemeId": 7,
+                                "competecnyThemeDescription": "Personal Effectiveness competency Theme",
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Resilience",
+                                "competencySubThemeId": 9,
+                                "competecnySubThemeDescription": "Resilience Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "Sub:- Vikas- New Program '22/02/24'     ",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139946848192430081395/artifact/do_1139946848192430081395_1708335549501_digitalindiaandegovernance1708335549950.jpg",
+                        "duration": "12761",
+                        "additionalTags": null,
+                        "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_1139967854457651201519_rc/artifact/do_1139946848192430081395_1708335549501_digitalindiaandegovernance1708335549950.thumb.jpg",
+                        "primaryCategory": "Program",
+                        "name": "Vikas- New Program '22/02/24'",
+                        "avgRating": 2.0,
+                        "contentType": "Course"
+                    }
+                },
+                {
+                    "review": "bv",
+                    "rating": 5.0,
+                    "userDetails": {
+                        "firstName": "qa dstuserone",
+                        "userId": "31c81730-bf33-437a-a53e-0bd8ac2fc3d6",
+                        "profileImageUrl": null
+                    },
+                    "cardSubType": "card-wide-lib",
+                    "cardCustomeClass": "",
+                    "context": {
+                        "pageSection": "featuredContents",
+                        "position": 3
+                    },
+                    "content": {
+                        "identifier": "do_113965740548784128178",
+                        "competencies_v5": [
+                            {
+                                "competencyArea": "Functional",
+                                "competencyAreaId": 56,
+                                "competencyAreaDescription": "Functional Competency Area",
+                                "competencyTheme": "Establishment & HR",
+                                "competencyThemeId": 101,
+                                "competecnyThemeDescription": "Establishment & HR competency Theme",
+                                "competencyThemeType": "Core",
+                                "competencySubTheme": "Handling Fundamental Rules /Supplementary Rules",
+                                "competencySubThemeId": 104,
+                                "competecnySubThemeDescription": "Handling Fundamental Rules /Supplementary Rules Competency Sub-Theme"
+                            }
+                        ],
+                        "description": "Course with more subthemes",
+                        "organisation": [
+                            "Ministry of Finance"
+                        ],
+                        "creatorLogo": null,
+                        "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113921119628378112168/artifact/do_113921119628378112168_1699355423624_capture121699355424283.png",
+                        "duration": "540",
+                        "additionalTags": [
+                            "mostEnrolled"
+                        ],
+                        "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113965740548784128178/artifact/do_113921119628378112168_1699355423624_capture121699355424283.thumb.png",
+                        "primaryCategory": "Course",
+                        "name": "Course with more subthemes",
+                        "avgRating": 5.0,
+                        "contentType": "Course"
+                    }
+                }
+            ];
+        }
+        /**
+         * @return {?}
+         */
+        UserContentRatingComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        UserContentRatingComponent.prototype.getRatingIcon = /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        function (ratingIndex, avg) {
+            return this.ratingService.getRatingIcon(ratingIndex, avg);
+        };
+        /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        UserContentRatingComponent.prototype.getRatingIconClass = /**
+         * @param {?} ratingIndex
+         * @param {?} avg
+         * @return {?}
+         */
+        function (ratingIndex, avg) {
+            return this.ratingService.getRatingIconClass(ratingIndex, avg);
+        };
+        /**
+         * @param {?} indexValue
+         * @return {?}
+         */
+        UserContentRatingComponent.prototype.getCurrentIndex = /**
+         * @param {?} indexValue
+         * @return {?}
+         */
+        function (indexValue) {
+            this.currentIndex = indexValue;
+        };
+        UserContentRatingComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-user-content-rating',
+                        template: "<!-- <sb-uic-sliders [title]=\"'providerName'\" [widgetData]=\"[]\" [styleData]=\"styleData\">\n    <div sliderbody>\n        <div class=\"flex justify-center\">\n            <div class=\"avatar-block mr-3\">\n                <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                </sb-uic-avatar-photo>\n            </div>\n            <div class=\"avatar-block mr-3\">\n                <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                </sb-uic-avatar-photo>\n            </div>\n        </div>\n        <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n            <p class=\"userName w-full\">Harshit Rao</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, 3.3)}\"\n                    *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                    {{ getRatingIcon(rating, 3.3) }}\n                </mat-icon>\n            </div>\n            <p class=\"content-feedback w-full\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud.</p>\n            <div class=\"w-full m-8\">\n                <sb-uic-cards [widgetData]=\"contentCard\"></sb-uic-cards>\n            </div>\n        </div>\n    </div>\n</sb-uic-sliders> -->\n\n<sb-uic-sliders-ng-content [title]=\"'providerName'\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"responseData\" [styleData]=\"styleData\">\n    <div sliderbody>\n        <div *ngFor=\"let data of responseData; let i = index\" [hidden]=\"i !== currentIndex\">\n            <div class=\"flex justify-center\">\n                <div class=\"avatar-block mr-3\">\n                    <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                    </sb-uic-avatar-photo>\n                </div>\n                <div class=\"avatar-block mr-3\">\n                    <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                    </sb-uic-avatar-photo>\n                </div>\n            </div>\n            <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                <p class=\"userName w-full\">Harshit Rao</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, 3.3)}\"\n                        *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                        {{ getRatingIcon(rating, 3.3) }}\n                    </mat-icon>\n                </div>\n                <p class=\"content-feedback w-full\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud.</p>\n                <div class=\"w-full m-8\">\n                    <sb-uic-cards [widgetData]=\"contentCard\"></sb-uic-cards>\n                </div>\n            </div>\n        </div>\n    </div>\n</sb-uic-sliders-ng-content>\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)}.avatar-block::before{content:\"\";border:4px solid #f3972e;border-radius:50%;width:41px;height:41px;display:flex;justify-content:center;align-items:center;position:absolute}"]
+                    }] }
+        ];
+        /** @nocollapse */
+        UserContentRatingComponent.ctorParameters = function () { return [
+            { type: RatingService }
+        ]; };
+        return UserContentRatingComponent;
+    }());
+    if (false) {
+        /** @type {?} */
+        UserContentRatingComponent.prototype.currentIndex;
+        /** @type {?} */
+        UserContentRatingComponent.prototype.styleData;
+        /** @type {?} */
+        UserContentRatingComponent.prototype.sliders;
+        /** @type {?} */
+        UserContentRatingComponent.prototype.contentCard;
+        /** @type {?} */
+        UserContentRatingComponent.prototype.widgetData;
+        /** @type {?} */
+        UserContentRatingComponent.prototype.responseData;
+        /** @type {?} */
+        UserContentRatingComponent.prototype.ratingService;
+    }
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var AvatarPhotoLibComponent = /** @class */ (function () {
+        function AvatarPhotoLibComponent() {
+            this.size = '';
+            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 {?}
+         */
+        AvatarPhotoLibComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            if (!this.photoUrl) {
+                this.showInitials = true;
+                if (!this.initials) {
+                    this.createInititals();
+                }
+                if (this.datalen === 1) {
+                    this.randomcolors = [
+                        '#006400',
+                    ];
+                }
+                /** @type {?} */
+                var randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
+                this.circleColor = this.colors[randomIndex];
+                if (this.randomColor) {
+                    /** @type {?} */
+                    var randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomcolors.length));
+                    this.circleColor = this.randomcolors[randomIndex1];
+                }
+            }
+        };
+        /**
+         * @param {?} change
+         * @return {?}
+         */
+        AvatarPhotoLibComponent.prototype.ngOnChanges = /**
+         * @param {?} change
+         * @return {?}
+         */
+        function (change) {
+            if (change.name.currentValue !== change.name.previousValue && !change.name.firstChange) {
+                this.createInititals();
+            }
+        };
+        Object.defineProperty(AvatarPhotoLibComponent.prototype, "userInitials", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.initials;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @private
+         * @return {?}
+         */
+        AvatarPhotoLibComponent.prototype.createInititals = /**
+         * @private
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var initials = '';
+            /** @type {?} */
+            var 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 (var 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: core.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: core.Input }],
+            photoUrl: [{ type: core.Input }],
+            name: [{ type: core.Input }],
+            size: [{ type: core.Input }],
+            randomColor: [{ type: core.Input }],
+            initials: [{ type: core.Input }],
+            showBadge: [{ type: core.Input }]
+        };
+        return AvatarPhotoLibComponent;
+    }());
+    if (false) {
+        /** @type {?} */
+        AvatarPhotoLibComponent.prototype.datalen;
+        /** @type {?} */
+        AvatarPhotoLibComponent.prototype.photoUrl;
+        /** @type {?} */
+        AvatarPhotoLibComponent.prototype.name;
+        /** @type {?} */
+        AvatarPhotoLibComponent.prototype.size;
+        /** @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
+     */
+    var AvatarPhotoLibModule = /** @class */ (function () {
+        function AvatarPhotoLibModule() {
+        }
+        AvatarPhotoLibModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [AvatarPhotoLibComponent],
+                        imports: [
+                            common.CommonModule,
+                            router.RouterModule,
+                            material.MatButtonModule,
+                            material.MatIconModule,
+                            material.MatMenuModule,
+                            material.MatRippleModule,
+                            resolverV2.SbUiResolverModule,
+                        ],
+                        exports: [AvatarPhotoLibComponent],
+                        entryComponents: [AvatarPhotoLibComponent],
+                    },] }
+        ];
+        return AvatarPhotoLibModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var SlidersNgContentLibComponent = /** @class */ (function (_super) {
+        __extends(SlidersNgContentLibComponent, _super);
+        function SlidersNgContentLibComponent(events, valueSvc) {
+            var _this = _super.call(this) || this;
+            _this.events = events;
+            _this.valueSvc = valueSvc;
+            _this.title = '';
+            _this.loadNgContentData = false;
+            _this.currentIndexValue = new core.EventEmitter();
+            _this.id = "banner_" + Math.random();
+            _this.defaultMenuSubscribe = null;
+            _this.isLtMedium$ = _this.valueSvc.isLtMedium$;
+            _this.currentIndex = 0;
+            _this.slideInterval = null;
+            _this.isMobile = false;
+            return _this;
+        }
+        /**
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            this.reInitiateSlideInterval();
+            this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
+             * @param {?} isLtMedium
+             * @return {?}
+             */
+            function (isLtMedium) {
+                _this.isMobile = isLtMedium;
+            }));
+        };
+        /**
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.reInitiateSlideInterval = /**
+         * @return {?}
+         */
+        function () {
+            var _this = this;
+            if (this.widgetData && this.widgetData.length > 1) {
+                try {
+                    if (this.slideInterval) {
+                        this.slideInterval.unsubscribe();
+                    }
+                }
+                catch (e) {
+                }
+                finally {
+                    this.slideInterval = rxjs.interval(8000).subscribe((/**
+                     * @return {?}
+                     */
+                    function () {
+                        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 {?}
+         */
+        SlidersNgContentLibComponent.prototype.slideTo = /**
+         * @param {?} index
+         * @return {?}
+         */
+        function (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);
+            }
+            this.reInitiateSlideInterval();
+        };
+        Object.defineProperty(SlidersNgContentLibComponent.prototype, "isOpenInNewTab", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var currentData = this.widgetData[this.currentIndex];
+                if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+                    return true;
+                }
+                return false;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        /**
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.openInNewTab = /**
+         * @return {?}
+         */
+        function () {
+            /** @type {?} */
+            var currentData = this.widgetData[this.currentIndex];
+            if (currentData.redirectUrl && currentData.redirectUrl.includes('mailto') || this.widgetData[this.currentIndex].openInNewTab) {
+                window.open(currentData.redirectUrl);
+            }
+        };
+        /**
+         * @param {?} bannerUrl
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.raiseTelemetry = /**
+         * @param {?} bannerUrl
+         * @return {?}
+         */
+        function (bannerUrl) {
+            this.openInNewTab();
+            /** @type {?} */
+            var path = window.location.pathname.replace('/', '');
+            /** @type {?} */
+            var url = path + window.location.search;
+            this.events.raiseInteractTelemetry({
+                type: 'click',
+                subType: 'banner',
+            }, {
+                pageUrl: url,
+                bannerRedirectUrl: bannerUrl,
+            }, {
+                pageIdExt: 'banner',
+                module: utilsV2.WsEvents.EnumTelemetrymodules.CONTENT,
+            });
+        };
+        /**
+         * @return {?}
+         */
+        SlidersNgContentLibComponent.prototype.ngOnDestroy = /**
+         * @return {?}
+         */
+        function () {
+            if (this.defaultMenuSubscribe) {
+                this.defaultMenuSubscribe.unsubscribe();
+            }
+        };
+        SlidersNgContentLibComponent.decorators = [
+            { type: core.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    \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 .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 = function () { return [
+            { type: utilsV2.EventService },
+            { type: utilsV2.ValueService }
+        ]; };
+        SlidersNgContentLibComponent.propDecorators = {
+            widgetData: [{ type: core.Input }],
+            styleData: [{ type: core.Input }],
+            title: [{ type: core.Input }],
+            loadNgContentData: [{ type: core.Input }],
+            currentIndexValue: [{ type: core.Output }],
+            id: [{ type: core.HostBinding, args: ['id',] }]
+        };
+        return SlidersNgContentLibComponent;
+    }(resolverV2.WidgetBaseComponent));
+    if (false) {
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.widgetData;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.styleData;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.title;
+        /** @type {?} */
+        SlidersNgContentLibComponent.prototype.loadNgContentData;
+        /** @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 */
+    var   /* tslint:enable */
+    MyHammerConfig$1 = /** @class */ (function (_super) {
+        __extends(MyHammerConfig, _super);
+        function MyHammerConfig() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        /**
+         * @param {?} element
+         * @return {?}
+         */
+        MyHammerConfig.prototype.buildHammer = /**
+         * @param {?} element
+         * @return {?}
+         */
+        function (element) {
+            /** @type {?} */
+            var mc = new Hammer(element, {
+                touchAction: 'pan-y',
+            });
+            return mc;
+        };
+        return MyHammerConfig;
+    }(platformBrowser.HammerGestureConfig));
+    // tslint:disable-next-line: max-classes-per-file
+    var SlidersNgContentLibModule = /** @class */ (function () {
+        function SlidersNgContentLibModule() {
+        }
+        SlidersNgContentLibModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [SlidersNgContentLibComponent],
+                        imports: [
+                            common.CommonModule,
+                            router.RouterModule,
+                            NavigationModule,
+                            ImageResponsiveModule,
+                        ],
+                        exports: [SlidersNgContentLibComponent],
+                        entryComponents: [SlidersNgContentLibComponent],
+                        providers: [
+                            {
+                                provide: platformBrowser.HAMMER_GESTURE_CONFIG,
+                                useClass: MyHammerConfig$1,
+                            },
+                        ],
+                    },] }
+        ];
+        return SlidersNgContentLibModule;
+    }());
+
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var UserContentRatingModule = /** @class */ (function () {
+        function UserContentRatingModule() {
+        }
+        UserContentRatingModule.decorators = [
+            { type: core.NgModule, args: [{
+                        declarations: [UserContentRatingComponent],
+                        imports: [
+                            common.CommonModule,
+                            material.MatIconModule,
+                            material.MatChipsModule,
+                            SkeletonLoaderLibModule,
+                            SlidersLibModule,
+                            CardsModule,
+                            AvatarPhotoLibModule,
+                            SlidersNgContentLibModule
+                        ],
+                        exports: [UserContentRatingComponent],
+                        providers: [RatingService],
+                        schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
+                    },] }
+        ];
+        return UserContentRatingModule;
+    }());
+
     exports.CalenderModule = CalenderModule;
     exports.CardsModule = CardsModule;
     exports.CommonMethodsService = CommonMethodsService;
@@ -9295,19 +11350,29 @@
     exports.MyHammerConfig = MyHammerConfig;
     exports.ROOT_WIDGET_CONFIG = ROOT_WIDGET_CONFIG;
     exports.SlidersLibModule = SlidersLibModule;
+    exports.UserContentRatingModule = UserContentRatingModule;
     exports.WIDGET_REGISTERED_LIB_MODULES = WIDGET_REGISTERED_LIB_MODULES;
     exports.WIDGET_REGISTRATION_LIB_CONFIG = WIDGET_REGISTRATION_LIB_CONFIG;
     exports.ɵa = ContentStripWithTabsLibComponent;
     exports.ɵb = WidgetContentService;
-    exports.ɵba = DisplayContentTypeLibComponent;
-    exports.ɵbb = DefaultThumbnailModule;
-    exports.ɵbc = DefaultThumbnailDirective;
-    exports.ɵbd = PipeDurationTransformModule;
-    exports.ɵbe = PipeDurationTransformPipe;
-    exports.ɵbf = CompetencyPassbookComponent;
-    exports.ɵbg = CompetencyPassbookService;
-    exports.ɵbh = PillsModule;
-    exports.ɵbi = PillsComponent;
+    exports.ɵba = PipePublicURL;
+    exports.ɵbb = DisplayContentTypeLibModule;
+    exports.ɵbc = DisplayContentTypeLibComponent;
+    exports.ɵbd = DefaultThumbnailModule;
+    exports.ɵbe = DefaultThumbnailDirective;
+    exports.ɵbf = PipeDurationTransformModule;
+    exports.ɵbg = PipeDurationTransformPipe;
+    exports.ɵbh = CompetencyPassbookComponent;
+    exports.ɵbi = CompetencyPassbookService;
+    exports.ɵbj = PillsModule;
+    exports.ɵbk = PillsComponent;
+    exports.ɵbl = UserContentRatingComponent;
+    exports.ɵbm = RatingService;
+    exports.ɵbn = AvatarPhotoLibModule;
+    exports.ɵbo = AvatarPhotoLibComponent;
+    exports.ɵbp = MyHammerConfig$1;
+    exports.ɵbq = SlidersNgContentLibModule;
+    exports.ɵbr = SlidersNgContentLibComponent;
     exports.ɵc = WidgetUserService;
     exports.ɵd = MultilingualTranslationsService;
     exports.ɵe = ConfigurationsService;
@@ -9323,15 +11388,15 @@
     exports.ɵo = SkeletonLoaderLibModule;
     exports.ɵp = SkeletonLoaderLibComponent;
     exports.ɵq = CalenderComponent;
-    exports.ɵr = CommonStripComponent;
-    exports.ɵs = CardResourceComponent;
-    exports.ɵt = CardsComponent;
-    exports.ɵu = CardPortraitComponent;
-    exports.ɵv = CardUserComponent;
-    exports.ɵw = CardLandscapeComponent;
-    exports.ɵx = PipePublicURLModule;
-    exports.ɵy = PipePublicURL;
-    exports.ɵz = DisplayContentTypeLibModule;
+    exports.ɵr = CalenderDayComponent;
+    exports.ɵs = CommonStripComponent;
+    exports.ɵt = CardResourceComponent;
+    exports.ɵu = CardsComponent;
+    exports.ɵv = CardPortraitComponent;
+    exports.ɵw = CardUserComponent;
+    exports.ɵx = CardLandscapeComponent;
+    exports.ɵy = CardWideComponent;
+    exports.ɵz = PipePublicURLModule;
 
     Object.defineProperty(exports, '__esModule', { value: true });