@sunbird-cb/consumption 0.0.11 → 0.0.12

package/fesm2015/sunbird-cb-consumption.js

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { RouterModule, Router } from '@angular/router';
 import { fromEvent, timer, BehaviorSubject, of, EMPTY, ReplaySubject, Subject, throwError, interval } from 'rxjs';
 import { debounceTime, throttleTime, shareReplay, retry, map, catchError, filter, distinctUntilChanged } from 'rxjs/operators';
+import { ValueService, ConfigurationsService as ConfigurationsService$1, WsEvents, LoggerService, EventService, UtilityService } from '@sunbird-cb/utils-v2';
 import { MatButtonModule, MatIconModule, MatProgressSpinnerModule, MatToolbarModule, MatTooltipModule, MatListModule, MatSidenavModule, MatCardModule, MatExpansionModule, MatRadioModule, MatChipsModule, MatInputModule, MatFormFieldModule, MatDialogModule, MatSnackBarModule, MatSelectModule, MatDatepickerModule, MatNativeDateModule, MatTableModule, MatCheckboxModule, MatButtonToggleModule, MatTabsModule, MatAutocompleteModule, MatSnackBar } from '@angular/material';
 import { __awaiter } from 'tslib';
 import { WidgetBaseComponent, SbUiResolverModule } from '@sunbird-cb/resolver-v2';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { ConfigurationsService as ConfigurationsService$1, WsEvents, LoggerService, EventService, UtilityService, ValueService } from '@sunbird-cb/utils-v2';
 import { get, uniqBy, orderBy, camelCase } from 'lodash';
 import * as moment$1 from 'moment';
 import { duration, utc } from 'moment';
@@ -65,8 +65,13 @@ ConsumptionComponent.ctorParameters = () => [];
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class HorizontalScrollerV2Component {
-    constructor() {
+    /**
+     * @param {?} valueSvc
+     */
+    constructor(valueSvc) {
+        this.valueSvc = valueSvc;
         this.loadStatus = 'fetching';
+        this.id = '';
         this.onHover = false;
         this.sliderConfig = {
             showNavs: true,
@@ -81,6 +86,9 @@ class HorizontalScrollerV2Component {
         this.cardSubType = 'standard';
         this.bottomDotsArray = [];
         this.scrollObserver = null;
+        this.isMobile = false;
+        this.defaultMenuSubscribe = null;
+        this.isLtMedium$ = this.valueSvc.isLtMedium$;
     }
     /**
      * @return {?}
@@ -100,8 +108,20 @@ class HorizontalScrollerV2Component {
                 this.updateNavigationBtnStatus((/** @type {?} */ (horizontalScrollElem
                     .nativeElement)));
             }));
-            this.getBottomDotsArray();
+            setTimeout((/**
+             * @return {?}
+             */
+            () => {
+                this.getBottomDotsArray();
+            }), 700);
         }
+        this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
+         * @param {?} isLtMedium
+         * @return {?}
+         */
+        (isLtMedium) => {
+            this.isMobile = isLtMedium;
+        }));
     }
     /**
      * @return {?}
@@ -116,7 +136,12 @@ class HorizontalScrollerV2Component {
                     .nativeElement)));
             }
         }));
-        this.getBottomDotsArray();
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            this.getBottomDotsArray();
+        }), 700);
     }
     /**
      * @return {?}
@@ -125,6 +150,9 @@ class HorizontalScrollerV2Component {
         if (this.scrollObserver) {
             this.scrollObserver.unsubscribe();
         }
+        if (this.defaultMenuSubscribe) {
+            this.defaultMenuSubscribe.unsubscribe();
+        }
     }
     /**
      * @return {?}
@@ -169,7 +197,9 @@ class HorizontalScrollerV2Component {
         this.enablePrev = true;
         this.enableNext = true;
         if (elem.scrollLeft === 0) {
-            this.enablePrev = false;
+            if (!this.sliderConfig.arrowsAlwaysOn) {
+                this.enablePrev = false;
+            }
             this.activeNav = 0;
         }
         if (elem.scrollWidth === Math.round(elem.clientWidth + elem.scrollLeft)) {
@@ -177,7 +207,9 @@ class HorizontalScrollerV2Component {
                 this.loadNext.emit();
             }
             else {
-                this.enableNext = false;
+                if (!this.sliderConfig.arrowsAlwaysOn) {
+                    this.enableNext = false;
+                }
                 if (this.bottomDotsArray.length) {
                     this.activeNav = this.bottomDotsArray.length - 1;
                 }
@@ -238,10 +270,9 @@ class HorizontalScrollerV2Component {
                     ((document.getElementsByClassName(this.cardSubType) &&
                         document.getElementsByClassName(this.cardSubType)[0] !== undefined)
                         ? document.getElementsByClassName(this.cardSubType)[0].clientWidth : 245);
-                if (document.getElementsByClassName('horizontal-scroll-container') &&
-                    document.getElementsByClassName('horizontal-scroll-container')[0]) {
+                if (document.getElementById(`${this.id}`)) {
                     /** @type {?} */
-                    const scrollerWidth = document.getElementsByClassName('horizontal-scroll-container')[0].clientWidth;
+                    const scrollerWidth = document.getElementById(`${this.id}`).clientWidth;
                     /** @type {?} */
                     const totalCardsLength = cardWidth * this.widgetsLength;
                     if (totalCardsLength > scrollerWidth) {
@@ -274,14 +305,17 @@ class HorizontalScrollerV2Component {
 HorizontalScrollerV2Component.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-horizontal-scroller-v2',
-                template: "\n<section class=\"horizontal-scroll-container h-full\" [ngClass]=\"{'px-4': sliderConfig.showNavs, 'mt-5':sliderConfig.cerificateCardMargin}\">\n    <ng-container *ngIf=\"sliderConfig?.showNavs\">\n        <button i18n-aria-label aria-label=\"back\" name=\"content-backward-button\" mat-mini-fab color=\"\" \n            (click)=\"showPrev()\" class=\"prevBtn  mat-elevation-z\" [hidden]=\"!enablePrev\"\n            [ngClass]=\"{'prevBtnHover': onHover}\">\n            <mat-icon>navigate_before</mat-icon>\n        </button>\n    </ng-container>\n    <div name=\"horizontal-scroll-content-strip\" class=\"horizontal-scroll-content\" #horizontalScrollElem>\n        <ng-content></ng-content>\n    </div>\n    <ng-container *ngIf=\"sliderConfig?.showNavs\">\n        <button i18n-aria-label aria-label=\"next\" name=\"content-forward-button\" mat-mini-fab (click)=\"showNext()\"\n            color=\"\" class=\"nextBtn  mat-elevation-z\" [ngClass]=\"{'nextBtnHover': onHover}\"\n            [hidden]=\"!enableNext || loadStatus === 'fetching'\">\n            <mat-icon>navigate_next</mat-icon>\n        </button>\n    </ng-container>\n    <!-- <div class=\"nextLoading\" *ngIf=\"loadStatus === 'fetching'\">\n        <mat-spinner></mat-spinner>\n    </div> -->    \n</section>\n\n<div class=\"dots-container\" *ngIf=\"sliderConfig?.showDots\">\n    <!-- <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" -->\n    <span class=\"dot\" [ngClass]=\"{ active: j === activeNav }\" *ngFor=\"let slide of bottomDotsArray; let j = index\" (click)=\"slideTo(j)\"></span>\n</div>",
-                styles: [".horizontal-scroll-container{position:relative;width:100%;width:inherit}.nextBtn,.nextLoading,.prevBtn{position:absolute;top:50%;transform:translateY(-50%);z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;justify-content:center}.nextBtn,.prevBtn{border-radius:50%;background-color:#1b2133!important;color:#fff!important}.border-radius-xs{border-radius:8px!important}.prevBtn{left:0}.nextBtn{right:0}.nextLoading{padding:0;right:0}.horizontal-scroll-content{overflow-y:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;height:100%;flex-wrap:nowrap;display:flex;align-items:stretch;-ms-overflow-style:none;scrollbar-width:none}.horizontal-scroll-content::-webkit-scrollbar{width:0;height:0}.dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.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}.dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}"]
+                template: "\n<section class=\"horizontal-scroll-container h-full\" [id]=\"id\"\n[ngClass]=\"{'px-4': sliderConfig.showNavs && sliderConfig.showNavsSpacing, 'mt-5':sliderConfig.cerificateCardMargin}\">\n    <div name=\"horizontal-scroll-content-strip\" class=\"horizontal-scroll-content\" #horizontalScrollElem>\n        <ng-content></ng-content>\n    </div>\n    <div class=\"navigation {{isMobile? sliderConfig?.responsive?.arrowsPlacement : sliderConfig?.arrowsPlacement}}\">\n        <ng-container *ngIf=\"sliderConfig?.showNavs\">\n            <button i18n-aria-label aria-label=\"back\" name=\"content-backward-button\" mat-mini-fab color=\"\" \n                (click)=\"showPrev()\" class=\"prevBtn  mat-elevation-z\" [hidden]=\"!enablePrev\"\n                [ngClass]=\"{'prevBtnHover': onHover}\">\n                <mat-icon>navigate_before</mat-icon>\n            </button>\n        </ng-container>\n        <ng-container *ngIf=\"sliderConfig?.showNavs\">\n            <button i18n-aria-label aria-label=\"next\" name=\"content-forward-button\" mat-mini-fab (click)=\"showNext()\"\n                color=\"\" class=\"nextBtn  mat-elevation-z\" [ngClass]=\"{'nextBtnHover': onHover}\"\n                [hidden]=\"!enableNext || loadStatus === 'fetching'\">\n                <mat-icon>navigate_next</mat-icon>\n            </button>\n        </ng-container>\n    </div>\n    <!-- <div class=\"nextLoading\" *ngIf=\"loadStatus === 'fetching'\">\n        <mat-spinner></mat-spinner>\n    </div> -->    \n</section>\n\n<div class=\"dots-container {{isMobile? sliderConfig?.responsive?.dotsAlign : sliderConfig?.dotsAlign}}\" \n*ngIf=\"(isMobile && sliderConfig?.responsive?.showDots) || (!isMobile && sliderConfig?.showDots)\">\n    <!-- <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" -->\n    <span class=\"dot\" [ngClass]=\"{ active: j === activeNav }\" *ngFor=\"let slide of bottomDotsArray; let j = index\" (click)=\"slideTo(j)\"></span>\n</div>",
+                styles: [".horizontal-scroll-container{position:relative;width:100%;width:inherit}.nextBtn,.nextLoading,.prevBtn{position:absolute;top:50%;transform:translateY(-50%);z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;justify-content:center}.nextBtn,.prevBtn{border-radius:50%;background-color:#1b2133!important;color:#fff!important}.border-radius-xs{border-radius:8px!important}.prevBtn{left:0}.nextBtn{right:0}.nextLoading{padding:0;right:0}.navigation.bottom-right .prevBtn{left:unset;right:56px;bottom:-44px;top:unset}.navigation.bottom-right .nextBtn{left:unset;right:8px;bottom:-44px;top:unset}.navigation.bottom-center .prevBtn{left:calc(50% - 24px);right:unset;bottom:-44px;top:unset}.navigation.bottom-center .nextBtn{left:calc(50% + 24px);right:unset;bottom:-44px;top:unset}.navigation.bottom-left .prevBtn{left:8px;right:unset;bottom:-44px;top:unset}.navigation.bottom-left .nextBtn{left:62px;right:unset;bottom:-44px;top:unset}.navigation.middle-inline .prevBtn{left:30px}.navigation.middle-inline .nextBtn{right:30px}.horizontal-scroll-content{overflow-y:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;height:100%;flex-wrap:nowrap;display:flex;align-items:stretch;-ms-overflow-style:none;scrollbar-width:none}.horizontal-scroll-content::-webkit-scrollbar{width:0;height:0}.dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.dots-container.left{align-items:start;justify-content:start}.dots-container.right{align-items:end;justify-content:end}.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}.dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}"]
             }] }
 ];
 /** @nocollapse */
-HorizontalScrollerV2Component.ctorParameters = () => [];
+HorizontalScrollerV2Component.ctorParameters = () => [
+    { type: ValueService }
+];
 HorizontalScrollerV2Component.propDecorators = {
     loadStatus: [{ type: Input }],
+    id: [{ type: Input }],
     onHover: [{ type: Input }],
     sliderConfig: [{ type: Input }],
     loadNext: [{ type: Output }],
@@ -294,6 +328,8 @@ if (false) {
     /** @type {?} */
     HorizontalScrollerV2Component.prototype.loadStatus;
     /** @type {?} */
+    HorizontalScrollerV2Component.prototype.id;
+    /** @type {?} */
     HorizontalScrollerV2Component.prototype.onHover;
     /** @type {?} */
     HorizontalScrollerV2Component.prototype.sliderConfig;
@@ -322,6 +358,20 @@ if (false) {
      * @private
      */
     HorizontalScrollerV2Component.prototype.scrollObserver;
+    /** @type {?} */
+    HorizontalScrollerV2Component.prototype.isMobile;
+    /**
+     * @type {?}
+     * @private
+     */
+    HorizontalScrollerV2Component.prototype.defaultMenuSubscribe;
+    /** @type {?} */
+    HorizontalScrollerV2Component.prototype.isLtMedium$;
+    /**
+     * @type {?}
+     * @private
+     */
+    HorizontalScrollerV2Component.prototype.valueSvc;
 }
 
 /**
@@ -4662,12 +4712,11 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                     strip.request.featureContent.request &&
                     strip.request.featureContent.request.filters) {
                     originalFilters = strip.request.featureContent.request.filters;
-                    strip.request.featureContent.request.filters = this.checkForDateFilters(strip.request.featureContent.request.filters);
-                    strip.request.featureContent.request.filters = this.getFiltersFromArray(strip.request.featureContent.request.filters);
+                    strip.request.featureContent.request.filters = this.postMethodFilters(strip.request.featureContent.request.filters);
                 }
                 try {
                     /** @type {?} */
-                    const response = yield this.postRequestMethod(strip, strip.request.featureContent.request, strip.request.featureContent.path, calculateParentStatus);
+                    const response = yield this.postRequestMethod(strip, strip.request.featureContent, strip.request.apiUrl, calculateParentStatus);
                     // console.log('calling  after - response, ', response)
                     if (response && response.results) {
                         // console.log('calling  after-- ')
@@ -4676,13 +4725,16 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                         }
                         else {
                             this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                            this.emptyResponse.emit(true);
                         }
                     }
                     else {
                         this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                        this.emptyResponse.emit(true);
                     }
                 }
                 catch (error) {
+                    this.emptyResponse.emit(true);
                     // Handle errors
                     // console.error('Error:', error);
                 }
@@ -4758,7 +4810,7 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
 ContentStripWithTabsLibComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-content-strip-with-tabs',
-                template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? margin-bottom-custom : margin-bottom-xs\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\"\n                  class=\"ml-4 view-more ws-mat-default-text\">\n                  <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1\" [routerLink]=\"stripsResultDataMap[key]?.viewMoreUrl?.path\"\n                    [queryParams]=\"stripsResultDataMap[key]?.viewMoreUrl?.queryParams\">\n                    <span i18n class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0].viewMoreUrl.viewMoreText,'home')  || 'See all'}}</span>\n                    <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\" color=\"accent\">navigate_next</mat-icon>\n                  </a>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                class=\"mat-tab-labels w-full strips-tabgroup\" dynamicHeight\n                  (selectedTabChange)=\"tabClicked($event, stripsResultDataMap[key], key)\">\n                  <mat-tab label=\"{{tab?.label}}\" *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;\">\n                    <ng-template mat-tab-label>\n                      <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                      <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                    </ng-template>\n                    <div>\n                      <!-- <ng-container [ngTemplateOutlet]=\"loader\" *ngIf=\"stripsResultDataMap[key]?.showOnLoader\">\n                      </ng-container> -->\n                      <div *ngIf=\"stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                      !tab.fetchTabStatus\"\n                      class=\"text-center my-2\">\n                            <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\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 [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 [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 [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\" [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>",
                 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}"]
             }] }
 ];
@@ -5052,8 +5104,8 @@ class SlidersLibComponent extends WidgetBaseComponent {
 SlidersLibComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-sliders',
-                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  <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" 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 : './'\" 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  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.bannerMetaAlign}}\" \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<!-- <div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length\">\n  <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [queryParams]=\"widgetData[currentIndex].queryParams || {}\"\n    [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n    [ngClass]=\"{ 'cursor-auto': !widgetData[currentIndex].redirectUrl }\"></a>\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  <div class=\"banner-meta\">\n    <a [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" 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  <button *ngIf=\"widgetData?.length > 1\" class=\"prev\" aria-label=\"Previous slide\" (click)=\"slideTo(currentIndex - 1)\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\">&#10094;</a>\n  </button>\n  <button *ngIf=\"widgetData?.length > 1\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\" aria-label=\"Next slide\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\">&#10095;</a>\n  </button>\n\n</div> -->\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\">\n            <p>{{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;width:-moz-fit-content;width:fit-content;padding:16px;gap:8px;border-radius:40px}.default-slider .default-title p{margin:0!important}"]
+                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  <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  <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<!-- <div class=\"banner-container\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length\">\n  <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [queryParams]=\"widgetData[currentIndex].queryParams || {}\"\n    [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" class=\"banner-overlay\"\n    [ngClass]=\"{ 'cursor-auto': !widgetData[currentIndex].redirectUrl }\"></a>\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  <div class=\"banner-meta\">\n    <a [routerLink]=\"!isOpenInNewTab ? widgetData[currentIndex].redirectUrl : './'\" 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  <button *ngIf=\"widgetData?.length > 1\" class=\"prev\" aria-label=\"Previous slide\" (click)=\"slideTo(currentIndex - 1)\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\">&#10094;</a>\n  </button>\n  <button *ngIf=\"widgetData?.length > 1\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\" aria-label=\"Next slide\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\">&#10095;</a>\n  </button>\n\n</div> -->\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 */
@@ -5469,7 +5521,7 @@ class DataPointsComponent {
 DataPointsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-data-points',
-                template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak}\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" >{{obj?.value | number: '1.1-2'}}</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\" 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}}"]
             }] }
 ];
@@ -5584,139 +5636,929 @@ DataPointsModule.decorators = [
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class ConsumptionModule {
+class CalenderComponent {
+    constructor() {
+        this.toDay = new Date();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        console.log("data ===== ", this.objectData);
+        console.log("toDay ", this.toDay);
+    }
 }
-ConsumptionModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ConsumptionComponent],
-                imports: [
-                    ContentStripWithTabsLibModule,
-                    SlidersLibModule
-                ],
-                exports: [ConsumptionComponent,
-                    ContentStripWithTabsLibModule,
-                    SlidersLibModule,
-                    DataPointsModule
-                ],
-            },] }
+CalenderComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-calender',
+                template: "<div class=\"w-full p-3 event-day my-3\" \n    *ngFor=\"let obj of objectData?.training\"\n    [style.backgroundColor]=\"obj?.backgroundColor\" \n    [style.borderColor]=\"objectData?.activeColor\">\n    <div class=\"flex item-top gap-8 {{ obj.events.length ? '' : 'aliginCenter'}}\">\n        <div class=\"event-date\">\n            <div class=\"currentDay\">{{obj.eventDate}}</div>\n        </div>\n        <div class=\"details w-full\" *ngIf=\"obj.events.length\">\n            <div class=\"flex p-4 item-center events-list mb-{{obj.events.length === (i+1) ? '0' : '2'}} gap-20\" [style.backgroundColor]=\"event?.backgroundColor\"\n                 *ngFor=\"let event of obj.events; let i = index\" >\n                <div>\n                    <div class=\"flex flex-row item-center gap-10 pb-2\">\n                        <div class=\"flex item-center gap-2 row1 col1\">\n                            <div><mat-icon class=\"icon-tour\">schedule</mat-icon> </div>\n                            <div>{{event.startTime}} to {{event.endTime}}</div>\n                        </div>\n                        <div class=\"flex item-center col1\">{{event.title}}</div>\n                    </div>\n                    <div class=\"flex flex-row item-center gap-10\">\n                        <div class=\"flex item-center gap-2 row1 col1\" *ngIf=\"event.startDate && event.endDate\">\n                            <div><mat-icon class=\"icon-tour\">date_range</mat-icon> </div>\n                            <div>{{event.startDate}} - {{event.endDate}}</div>\n                        </div>\n                        <div class=\"flex item-center gap-2 col1\">\n                            <div><mat-icon class=\"icon-tour\">location_on</mat-icon> </div>\n                            <div class=\"flex item-center\">{{event.location}}</div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"visit-link\">\n                    Visit\n                </div>\n            </div>\n        </div>\n        <div class=\"details w-full\" *ngIf=\"!obj.events.length\">\n            No trainings.\n        </div>\n    </div>\n</div>",
+                styles: [".event-day{border:1px solid #c3c3c3;border-radius:15px}.event-date{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;width:10%}.events-list{border:1px solid #c3c3c3;border-radius:15px;justify-content:space-between;align-items:center;font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px}.row1{width:235px}.aliginCenter,.col1{align-items:center}.visit-link{opacity:.7;cursor:pointer}.currentDay{padding:5px;background:#1d8923;border-radius:20px;color:#fff}"]
+            }] }
 ];
+CalenderComponent.propDecorators = {
+    objectData: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    CalenderComponent.prototype.objectData;
+    /** @type {?} */
+    CalenderComponent.prototype.toDay;
+}
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-const ROOT_WIDGET_CONFIG = {
-    card: {
-        _type: 'cardLib',
-        cardResource: 'cardContentLib'
-    },
-};
+class CalenderModule {
+}
+CalenderModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    MatIconModule,
+                ],
+                declarations: [CalenderComponent],
+                exports: [CalenderComponent],
+            },] }
+];
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var NsCardContent$1;
-(function (NsCardContent) {
+class CommonMethodsService {
+    constructor() { }
     /**
-     * @record
+     * @param {?} contents
+     * @param {?} strip
+     * @return {?}
      */
-    function ICard() { }
-    NsCardContent.ICard = ICard;
-    if (false) {
-        /** @type {?} */
-        ICard.prototype.content;
-        /** @type {?} */
-        ICard.prototype.cardSubType;
-        /** @type {?} */
-        ICard.prototype.context;
-        /** @type {?|undefined} */
-        ICard.prototype.intranetMode;
-        /** @type {?|undefined} */
-        ICard.prototype.deletedMode;
-        /** @type {?|undefined} */
-        ICard.prototype.likes;
-        /** @type {?|undefined} */
-        ICard.prototype.contentTags;
-        /** @type {?} */
-        ICard.prototype.stateData;
-        /** @type {?|undefined} */
-        ICard.prototype.cardCustomeClass;
+    transformContentsToWidgets(contents, strip) {
+        return (contents || []).map((/**
+         * @param {?} content
+         * @param {?} idx
+         * @return {?}
+         */
+        (content, idx) => (content ? {
+            widgetType: 'cardLib',
+            widgetSubType: 'cardContentLib',
+            widgetHostClass: 'mb-2',
+            widgetData: Object.assign({ content }, (content.batch && { batch: content.batch }), { cardSubType: strip.stripConfig && strip.stripConfig.cardSubType, cardCustomeClass: strip.customeClass ? strip.customeClass : '', context: { pageSection: strip.key, position: idx }, intranetMode: strip.stripConfig && strip.stripConfig.intranetMode, deletedMode: strip.stripConfig && strip.stripConfig.deletedMode, contentTags: strip.stripConfig && strip.stripConfig.contentTags }),
+        } : {
+            widgetType: 'card',
+            widgetSubType: 'cardContent',
+            widgetHostClass: 'mb-2',
+            widgetData: {},
+        })));
     }
     /**
-     * @record
+     * @param {?} strip
+     * @return {?}
      */
-    function IContentTags() { }
-    NsCardContent.IContentTags = IContentTags;
-    if (false) {
-        /** @type {?|undefined} */
-        IContentTags.prototype.daysSpan;
-        /** @type {?|undefined} */
-        IContentTags.prototype.excludeContentType;
-        /** @type {?|undefined} */
-        IContentTags.prototype.excludeMimeType;
-        /** @type {?} */
-        IContentTags.prototype.tag;
-        /** @type {?|undefined} */
-        IContentTags.prototype.criteriaField;
+    transformSkeletonToWidgets(strip) {
+        return [1, 2, 3, 4, 5, 6, 7, 7, 8, 9, 10].map((/**
+         * @param {?} _content
+         * @return {?}
+         */
+        _content => ({
+            widgetType: 'cardLib',
+            widgetSubType: 'cardContentLib',
+            widgetHostClass: 'mb-2',
+            widgetData: {
+                cardSubType: strip.loaderConfig && strip.loaderConfig.cardSubType || 'card-standard-skeleton',
+                cardCustomeClass: strip.customeClass ? strip.customeClass : '',
+            },
+        })));
     }
-    let EContentStatus;
-    (function (EContentStatus) {
-        EContentStatus["LIVE"] = "Live";
-        EContentStatus["EXPIRED"] = "Expired";
-        EContentStatus["DELETED"] = "Deleted";
-        EContentStatus["MARK_FOR_DELETION"] = "MarkedForDeletion";
-    })(EContentStatus = NsCardContent.EContentStatus || (NsCardContent.EContentStatus = {}));
-    let ACBPConst;
-    (function (ACBPConst) {
-        ACBPConst["UPCOMING"] = "upcoming";
-        ACBPConst["ALL"] = "All";
-        ACBPConst["OVERDUE"] = "overdue";
-        ACBPConst["SUCCESS"] = "success";
-    })(ACBPConst = NsCardContent.ACBPConst || (NsCardContent.ACBPConst = {}));
-    let IGOTConst;
-    (function (IGOTConst) {
-        IGOTConst["COMPETENCIES"] = "competencies_v5";
-        IGOTConst["RETIRED"] = "Retired";
-    })(IGOTConst = NsCardContent.IGOTConst || (NsCardContent.IGOTConst = {}));
-})(NsCardContent$1 || (NsCardContent$1 = {}));
+}
+CommonMethodsService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: 'root'
+            },] }
+];
+/** @nocollapse */
+CommonMethodsService.ctorParameters = () => [];
+/** @nocollapse */ CommonMethodsService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CommonMethodsService_Factory() { return new CommonMethodsService(); }, token: CommonMethodsService, providedIn: "root" });
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class CardsComponent extends WidgetBaseComponent {
+/**
+ * @record
+ */
+function IStripUnitCommonData() { }
+if (false) {
+    /** @type {?} */
+    IStripUnitCommonData.prototype.key;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.canHideStrip;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.mode;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.showStrip;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.disableTranslate;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.widgets;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.stripTitle;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.stripTitleLink;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.sliderConfig;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.stripConfig;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.tabs;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.stripName;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.stripLogo;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.description;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.stripInfo;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.noDataWidget;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.errorWidget;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.showOnNoData;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.showOnLoader;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.showOnError;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.loaderWidgets;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.stripBackground;
+    /** @type {?|undefined} */
+    IStripUnitCommonData.prototype.secondaryHeading;
+    /** @type {?} */
+    IStripUnitCommonData.prototype.viewMoreUrl;
+}
+class CommonStripComponent extends WidgetBaseComponent {
     /**
-     * @param {?} utilitySvc
+     * @param {?} environment
+     * @param {?} contentSvc
+     * @param {?} loggerSvc
+     * @param {?} eventSvc
      * @param {?} configSvc
-     * @param {?} contSvc
-     * @param {?} router
+     * @param {?} utilitySvc
+     * @param {?} userSvc
+     * @param {?} translate
+     * @param {?} langtranslations
+     * @param {?} commonMethodsSvc
      */
-    constructor(utilitySvc, configSvc, contSvc, router) {
+    constructor(environment, contentSvc, loggerSvc, eventSvc, configSvc, utilitySvc, userSvc, translate, langtranslations, commonMethodsSvc) {
         super();
-        this.utilitySvc = utilitySvc;
+        this.contentSvc = contentSvc;
+        this.loggerSvc = loggerSvc;
+        this.eventSvc = eventSvc;
         this.configSvc = configSvc;
-        this.contSvc = contSvc;
-        this.router = router;
-        this.isIntranetAllowedSettings = false;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-    /**
-     * @return {?}
-     */
-    get isLiveOrMarkForDeletion() {
-        if (!this.widgetData.content.status ||
-            this.widgetData.content.status === 'Live' ||
-            this.widgetData.content.status === 'MarkedForDeletion') {
-            return true;
-        }
-        return false;
-    }
+        this.utilitySvc = utilitySvc;
+        this.userSvc = userSvc;
+        this.translate = translate;
+        this.langtranslations = langtranslations;
+        this.commonMethodsSvc = commonMethodsSvc;
+        this.id = `ws-strip-miltiple_${Math.random()}`;
+        this.stripsResultDataMap = {};
+        this.stripsKeyOrder = [];
+        this.showAccordionData = true;
+        this.showParentLoader = false;
+        this.showParentError = false;
+        this.showParentNoData = false;
+        this.errorDataCount = 0;
+        this.noDataCount = 0;
+        this.successDataCount = 0;
+        this.contentAvailable = true;
+        this.baseUrl = this.configSvc.sitePath || '';
+        this.veifiedKarmayogi = false;
+        this.changeEventSubscription = null;
+        this.defaultMaxWidgets = 12;
+        this.todaysEvents = [];
+        this.environment = environment;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        // const url = window.location.href
+        this.initData();
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        if (this.changeEventSubscription) {
+            this.changeEventSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @param {?} key
+     * @return {?}
+     */
+    showAccordion(key) {
+        if (this.utilitySvc.isMobile && this.stripsResultDataMap[key].mode === 'accordion') {
+            return this.showAccordionData;
+        }
+        return true;
+    }
+    /**
+     * @param {?} key
+     * @return {?}
+     */
+    setHiddenForStrip(key) {
+        this.stripsResultDataMap[key].showStrip = false;
+        sessionStorage.setItem(`cstrip_${key}`, '1');
+    }
+    /**
+     * @private
+     * @param {?} key
+     * @return {?}
+     */
+    getIfStripHidden(key) {
+        /** @type {?} */
+        const storageItem = sessionStorage.getItem(`cstrip_${key}`);
+        return Boolean(storageItem !== '1');
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    initData() {
+        this.stripsKeyOrder = this.widgetData && this.widgetData.strips && this.widgetData.strips.map((/**
+         * @param {?} strip
+         * @return {?}
+         */
+        strip => strip.key)) || [];
+        if (this.widgetData.loader && this.widgetData.strips.length) {
+            this.showParentLoader = true;
+        }
+        // Fetch the data
+        for (const strip of this.widgetData.strips) {
+            this.processStrip(strip, [], 'fetching', false, null);
+            if (strip.dataType === 'in-hand' && this.widgetData[strip.dataKey]) {
+                this.processStrip(strip, this.commonMethodsSvc.transformContentsToWidgets(this.widgetData[strip.dataKey], strip), 'done', true, strip.viewMoreUrl || '');
+            }
+            else {
+                if (this.checkForEmptyWidget(strip)) {
+                    // this.fetchStripFromRequestData(strip, false);
+                }
+                else {
+                    this.processStrip(strip, [], 'done', true, null);
+                }
+            }
+        }
+        // Subscription for changes
+        /** @type {?} */
+        const keyAndEvent = this.widgetData.strips
+            .map((/**
+         * @param {?} strip
+         * @return {?}
+         */
+        strip => ({
+            key: strip.key,
+            type: (strip.refreshEvent && strip.refreshEvent.eventType) || '',
+            from: (strip.refreshEvent && strip.refreshEvent.from.toString()) || '',
+        })))
+            .filter((/**
+         * @param {?} __0
+         * @return {?}
+         */
+        ({ key, type, from }) => key && type && from));
+        /** @type {?} */
+        const eventTypeSet = new Set(keyAndEvent.map((/**
+         * @param {?} e
+         * @return {?}
+         */
+        e => e.type)));
+        this.changeEventSubscription = this.eventSvc.events$
+            .pipe(filter((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => eventTypeSet.has(event.eventType))))
+            .subscribe((/**
+         * @param {?} event
+         * @return {?}
+         */
+        event => {
+            keyAndEvent
+                .filter((/**
+             * @param {?} e
+             * @return {?}
+             */
+            e => e.type === event.eventType && e.from === event.from))
+                .map((/**
+             * @param {?} e
+             * @return {?}
+             */
+            e => e.key))
+                .forEach((/**
+             * @param {?} k
+             * @return {?}
+             */
+            k => this.fetchStripFromKey(k, false)));
+        }));
+    }
+    /**
+     * @private
+     * @param {?} key
+     * @param {?=} calculateParentStatus
+     * @return {?}
+     */
+    fetchStripFromKey(key, calculateParentStatus = true) {
+        /** @type {?} */
+        const stripData = this.widgetData.strips.find((/**
+         * @param {?} strip
+         * @return {?}
+         */
+        strip => strip.key === key));
+        if (stripData) {
+            // this.fetchStripFromRequestData(stripData, calculateParentStatus);
+        }
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    isStripShowing(data) {
+        /** @type {?} */
+        let count = 0;
+        if (data && data.key === this.environment.programStripKey && (!data.tabs || !data.tabs.length) &&
+            data.stripTitle === this.environment.programStripName && data.widgets.length > 0) {
+            data.widgets.forEach((/**
+             * @param {?} key
+             * @return {?}
+             */
+            (key) => {
+                if (key && key.widgetData.content.primaryCategory === this.environment.programStripPrimaryCategory) {
+                    count = count + 1;
+                }
+            }));
+            if (count > 0) {
+                data.showStrip = true;
+            }
+            else {
+                data.showStrip = false;
+            }
+        }
+        return data.showStrip;
+    }
+    /**
+     * @return {?}
+     */
+    get isMobile() {
+        return this.utilitySvc.isMobile || false;
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    getdata(data) {
+        if (data.stripInfo) {
+            return data.stripInfo.widget;
+        }
+        return {};
+    }
+    /**
+     * @param {?} wData
+     * @param {?} data
+     * @return {?}
+     */
+    checkCondition(wData, data) {
+        if (wData.strips[0].stripConfig && wData.strips[0].stripConfig.hideShowAll) {
+            return !wData.strips[0].stripConfig.hideShowAll;
+        }
+        return wData.strips[0].viewMoreUrl && data.widgets && data.widgets.length >= 4;
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    checkVisible(data) {
+        return data.stripInfo && data.stripInfo.visibilityMode === 'visible';
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    getContineuLearningLenth(data) {
+        return data.widgets ? data.widgets.length : 0;
+    }
+    /**
+     * @param {?} data
+     * @return {?}
+     */
+    getLength(data) {
+        if (!data.tabs || !data.tabs.length) {
+            return data.widgets ? data.widgets.length : 0;
+        }
+        {
+            // if tabs are there check if each tab has widgets and get the tab with max widgets
+            /** @type {?} */
+            const tabWithMaxWidgets = data.tabs.reduce((/**
+             * @param {?} prev
+             * @param {?} current
+             * @return {?}
+             */
+            (prev, current) => {
+                if (!prev.widgets && !current.widgets) {
+                    return current;
+                }
+                if (prev.widgets && current.widgets) {
+                    return (prev.widgets.length > current.widgets.length) ? prev : current;
+                }
+                if (current.widgets && !prev.widgets) {
+                    return current;
+                }
+                if (!current.widgets && prev.widgets) {
+                    return prev;
+                }
+                return current;
+                // return (prev.widgets && current.widgets && (prev.widgets.length > current.widgets.length) ) ? prev : current
+                // tslint:disable-next-line: align
+            }), data.tabs[0]);
+            // if tabs has atleast 1 widgets then strip will show or else not
+            return tabWithMaxWidgets.widgets ? tabWithMaxWidgets.widgets.length : 0;
+        }
+    }
+    /**
+     * @private
+     * @param {?} strip
+     * @param {?=} results
+     * @param {?=} fetchStatus
+     * @param {?=} calculateParentStatus
+     * @param {?=} _viewMoreUrl
+     * @param {?=} tabsResults
+     * @return {?}
+     */
+    processStrip(strip, results = [], fetchStatus, calculateParentStatus = true, _viewMoreUrl, tabsResults) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            const stripData = {
+                viewMoreUrl: strip.viewMoreUrl,
+                key: strip.key,
+                canHideStrip: Boolean(strip.canHideStrip),
+                showStrip: this.getIfStripHidden(strip.key),
+                noDataWidget: strip.noDataWidget,
+                errorWidget: strip.errorWidget,
+                stripInfo: strip.info,
+                stripTitle: strip.title,
+                stripTitleLink: strip.stripTitleLink,
+                dataType: strip.dataType,
+                dataKey: strip.dataKey,
+                disableTranslate: strip.disableTranslate,
+                sliderConfig: strip.sliderConfig,
+                tabs: tabsResults ? tabsResults : strip.tabs,
+                stripName: strip.name,
+                mode: strip.mode,
+                stripConfig: strip.stripConfig,
+                stripBackground: strip.stripBackground,
+                secondaryHeading: strip.secondaryHeading,
+                loaderWidgets: strip.loaderWidgets || [],
+                widgets: fetchStatus === 'done'
+                    ? [
+                        ...(strip.preWidgets || []).map((/**
+                         * @param {?} w
+                         * @return {?}
+                         */
+                        w => (Object.assign({}, w, { widgetHostClass: `mb-2 ${w.widgetHostClass}` })))),
+                        ...results,
+                        ...(strip.postWidgets || []).map((/**
+                         * @param {?} w
+                         * @return {?}
+                         */
+                        w => (Object.assign({}, w, { widgetHostClass: `mb-2 ${w.widgetHostClass}` })))),
+                    ]
+                    : [],
+                showOnNoData: Boolean(strip.noDataWidget &&
+                    !((strip.preWidgets || []).length + results.length + (strip.postWidgets || []).length) &&
+                    fetchStatus === 'done'),
+                showOnLoader: Boolean(strip.loader && fetchStatus === 'fetching'),
+                showOnError: Boolean(strip.errorWidget && fetchStatus === 'error'),
+            };
+            // const stripData = this.stripsResultDataMap[strip.key]
+            this.stripsResultDataMap = Object.assign({}, this.stripsResultDataMap, { [strip.key]: stripData });
+            if (!tabsResults) {
+                if (calculateParentStatus &&
+                    (fetchStatus === 'done' || fetchStatus === 'error') &&
+                    stripData.widgets) {
+                    this.checkParentStatus(fetchStatus, stripData.widgets.length);
+                }
+                if (calculateParentStatus && !(results && results.length > 0)) {
+                    this.contentAvailable = false;
+                }
+                else if (results && results.length > 0) {
+                    this.contentAvailable = true;
+                }
+            }
+            else {
+                this.contentAvailable = true;
+            }
+        });
+    }
+    /**
+     * @param {?} stripsResultDataMap
+     * @param {?} key
+     * @return {?}
+     */
+    getSelectedIndex(stripsResultDataMap, key) {
+        /** @type {?} */
+        let returnValue = 0;
+        if (key === 'cbpPlan') {
+            if (stripsResultDataMap.tabs.length) {
+                /** @type {?} */
+                const data = stripsResultDataMap.tabs.filter((/**
+                 * @param {?} ele
+                 * @return {?}
+                 */
+                (ele) => ele.value === 'upcoming'));
+                returnValue = data[0].widgets && data[0].widgets.length > 0 ? 1 : 0;
+            }
+        }
+        return returnValue;
+    }
+    /**
+     * @private
+     * @param {?} fetchStatus
+     * @param {?} stripWidgetsCount
+     * @return {?}
+     */
+    checkParentStatus(fetchStatus, stripWidgetsCount) {
+        if (fetchStatus === 'done' && !stripWidgetsCount) {
+            this.noDataCount += 1;
+        }
+        else if (fetchStatus === 'done' && stripWidgetsCount) {
+            this.successDataCount += 1;
+        }
+        else if (fetchStatus === 'error') {
+            this.errorDataCount += 1;
+        }
+        /** @type {?} */
+        const settledCount = this.noDataCount + this.successDataCount + this.errorDataCount;
+        /** @type {?} */
+        const totalCount = this.widgetData.strips.length;
+        if (this.successDataCount > 0 && settledCount < totalCount) {
+            return;
+        }
+        this.showParentLoader = settledCount !== totalCount;
+        this.showParentNoData =
+            this.noDataCount > 0 && this.noDataCount + this.errorDataCount === totalCount;
+        this.showParentError = this.errorDataCount === totalCount;
+    }
+    /**
+     * @param {?} strip
+     * @return {?}
+     */
+    checkForEmptyWidget(strip) {
+        if (strip.request &&
+            ((strip.request.api && Object.keys(strip.request.api).length) ||
+                (strip.request.search && Object.keys(strip.request.search).length) ||
+                (strip.request.searchRegionRecommendation &&
+                    Object.keys(strip.request.searchRegionRecommendation).length) ||
+                (strip.request.searchV6 && Object.keys(strip.request.searchV6).length) ||
+                (strip.request.enrollmentList && Object.keys(strip.request.enrollmentList).length) ||
+                (strip.request.cbpList && Object.keys(strip.request.cbpList).length) ||
+                (strip.request.trendingSearch && Object.keys(strip.request.trendingSearch).length))) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * @param {?} tabEvent
+     * @param {?} stripMap
+     * @param {?} stripKey
+     * @return {?}
+     */
+    tabClicked(tabEvent, stripMap, stripKey) {
+    }
+    /**
+     * @param {?} label
+     * @param {?} type
+     * @return {?}
+     */
+    translateLabels(label, type) {
+        return this.langtranslations.translateLabel(label, type, '');
+    }
+    /**
+     * @param {?} index
+     * @param {?} item
+     * @return {?}
+     */
+    identify(index, item) {
+        if (index >= 0) { }
+        return item;
+    }
+    /**
+     * @param {?} index
+     * @param {?} item
+     * @return {?}
+     */
+    tracker(index, item) {
+        if (index >= 0) { }
+        return get(item, 'widgetData.content.identifier');
+    }
+}
+CommonStripComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'sb-uic-common-strip',
+                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                <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\"\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 [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 [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 class=\"\">\n                    <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\" [id]=\"key+'-scroller'\"\n                     [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}"]
+            }] }
+];
+/** @nocollapse */
+CommonStripComponent.ctorParameters = () => [
+    { type: undefined, decorators: [{ type: Inject, args: ['environment',] }] },
+    { type: WidgetContentService },
+    { type: LoggerService },
+    { type: EventService },
+    { type: ConfigurationsService$1 },
+    { type: UtilityService },
+    { type: WidgetUserService },
+    { type: TranslateService },
+    { type: MultilingualTranslationsService },
+    { type: CommonMethodsService }
+];
+CommonStripComponent.propDecorators = {
+    widgetData: [{ type: Input }],
+    id: [{ type: HostBinding, args: ['id',] }]
+};
+if (false) {
+    /** @type {?} */
+    CommonStripComponent.prototype.widgetData;
+    /** @type {?} */
+    CommonStripComponent.prototype.id;
+    /** @type {?} */
+    CommonStripComponent.prototype.stripsResultDataMap;
+    /** @type {?} */
+    CommonStripComponent.prototype.stripsKeyOrder;
+    /** @type {?} */
+    CommonStripComponent.prototype.showAccordionData;
+    /** @type {?} */
+    CommonStripComponent.prototype.showParentLoader;
+    /** @type {?} */
+    CommonStripComponent.prototype.showParentError;
+    /** @type {?} */
+    CommonStripComponent.prototype.showParentNoData;
+    /** @type {?} */
+    CommonStripComponent.prototype.errorDataCount;
+    /** @type {?} */
+    CommonStripComponent.prototype.noDataCount;
+    /** @type {?} */
+    CommonStripComponent.prototype.successDataCount;
+    /** @type {?} */
+    CommonStripComponent.prototype.contentAvailable;
+    /** @type {?} */
+    CommonStripComponent.prototype.baseUrl;
+    /** @type {?} */
+    CommonStripComponent.prototype.veifiedKarmayogi;
+    /** @type {?} */
+    CommonStripComponent.prototype.environment;
+    /** @type {?} */
+    CommonStripComponent.prototype.changeEventSubscription;
+    /** @type {?} */
+    CommonStripComponent.prototype.defaultMaxWidgets;
+    /** @type {?} */
+    CommonStripComponent.prototype.enrollInterval;
+    /** @type {?} */
+    CommonStripComponent.prototype.todaysEvents;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.contentSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.loggerSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.eventSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.configSvc;
+    /** @type {?} */
+    CommonStripComponent.prototype.utilitySvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.userSvc;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.translate;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.langtranslations;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommonStripComponent.prototype.commonMethodsSvc;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+const ɵ0$2 = HttpLoaderFactory;
+class CommonStripModule {
+}
+CommonStripModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [CommonStripComponent],
+                imports: [
+                    SbUiResolverModule,
+                    CommonModule,
+                    RouterModule,
+                    HorizontalScrollerV2Module,
+                    MatProgressSpinnerModule,
+                    MatToolbarModule,
+                    MatIconModule,
+                    MatButtonModule,
+                    MatTooltipModule,
+                    MatListModule,
+                    MatSidenavModule,
+                    MatCardModule,
+                    MatExpansionModule,
+                    MatRadioModule,
+                    MatChipsModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    MatDialogModule,
+                    MatSnackBarModule,
+                    MatSelectModule,
+                    MatDatepickerModule,
+                    MatNativeDateModule,
+                    MatTableModule,
+                    MatCheckboxModule,
+                    MatProgressSpinnerModule,
+                    MatButtonToggleModule,
+                    MatTabsModule,
+                    MatAutocompleteModule,
+                    TranslateModule.forRoot({
+                        loader: {
+                            provide: TranslateLoader,
+                            useFactory: ɵ0$2,
+                            deps: [HttpClient],
+                        },
+                    }),
+                ],
+                exports: [CommonStripComponent]
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class ConsumptionModule {
+}
+ConsumptionModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ConsumptionComponent],
+                imports: [
+                    ContentStripWithTabsLibModule,
+                    SlidersLibModule
+                ],
+                exports: [ConsumptionComponent,
+                    ContentStripWithTabsLibModule,
+                    SlidersLibModule,
+                    DataPointsModule,
+                    CalenderModule,
+                    CommonStripModule
+                ],
+            },] }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const ROOT_WIDGET_CONFIG = {
+    card: {
+        _type: 'cardLib',
+        cardResource: 'cardContentLib'
+    },
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NsCardContent$1;
+(function (NsCardContent) {
+    /**
+     * @record
+     */
+    function ICard() { }
+    NsCardContent.ICard = ICard;
+    if (false) {
+        /** @type {?} */
+        ICard.prototype.content;
+        /** @type {?} */
+        ICard.prototype.cardSubType;
+        /** @type {?} */
+        ICard.prototype.context;
+        /** @type {?|undefined} */
+        ICard.prototype.intranetMode;
+        /** @type {?|undefined} */
+        ICard.prototype.deletedMode;
+        /** @type {?|undefined} */
+        ICard.prototype.likes;
+        /** @type {?|undefined} */
+        ICard.prototype.contentTags;
+        /** @type {?} */
+        ICard.prototype.stateData;
+        /** @type {?|undefined} */
+        ICard.prototype.cardCustomeClass;
+    }
+    /**
+     * @record
+     */
+    function IContentTags() { }
+    NsCardContent.IContentTags = IContentTags;
+    if (false) {
+        /** @type {?|undefined} */
+        IContentTags.prototype.daysSpan;
+        /** @type {?|undefined} */
+        IContentTags.prototype.excludeContentType;
+        /** @type {?|undefined} */
+        IContentTags.prototype.excludeMimeType;
+        /** @type {?} */
+        IContentTags.prototype.tag;
+        /** @type {?|undefined} */
+        IContentTags.prototype.criteriaField;
+    }
+    let EContentStatus;
+    (function (EContentStatus) {
+        EContentStatus["LIVE"] = "Live";
+        EContentStatus["EXPIRED"] = "Expired";
+        EContentStatus["DELETED"] = "Deleted";
+        EContentStatus["MARK_FOR_DELETION"] = "MarkedForDeletion";
+    })(EContentStatus = NsCardContent.EContentStatus || (NsCardContent.EContentStatus = {}));
+    let ACBPConst;
+    (function (ACBPConst) {
+        ACBPConst["UPCOMING"] = "upcoming";
+        ACBPConst["ALL"] = "All";
+        ACBPConst["OVERDUE"] = "overdue";
+        ACBPConst["SUCCESS"] = "success";
+    })(ACBPConst = NsCardContent.ACBPConst || (NsCardContent.ACBPConst = {}));
+    let IGOTConst;
+    (function (IGOTConst) {
+        IGOTConst["COMPETENCIES"] = "competencies_v5";
+        IGOTConst["RETIRED"] = "Retired";
+    })(IGOTConst = NsCardContent.IGOTConst || (NsCardContent.IGOTConst = {}));
+})(NsCardContent$1 || (NsCardContent$1 = {}));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CardsComponent extends WidgetBaseComponent {
+    /**
+     * @param {?} utilitySvc
+     * @param {?} configSvc
+     * @param {?} contSvc
+     * @param {?} router
+     */
+    constructor(utilitySvc, configSvc, contSvc, router) {
+        super();
+        this.utilitySvc = utilitySvc;
+        this.configSvc = configSvc;
+        this.contSvc = contSvc;
+        this.router = router;
+        this.isIntranetAllowedSettings = false;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+    /**
+     * @return {?}
+     */
+    get isLiveOrMarkForDeletion() {
+        if (!this.widgetData.content.status ||
+            this.widgetData.content.status === 'Live' ||
+            this.widgetData.content.status === 'MarkedForDeletion') {
+            return true;
+        }
+        return false;
+    }
     /**
      * @return {?}
      */
@@ -6361,9 +7203,9 @@ class CardUserComponent {
         this.events.raiseInteractTelemetry({
             type: 'click',
             subType: `${this.widgetType}-${this.widgetSubType}`,
-            id: `${camelCase(this.widgetData.user.userId)}-card`,
+            id: `${camelCase(this.widgetData.content.userId)}-card`,
         }, {
-            id: this.widgetData.user.userId,
+            id: this.widgetData.content.userId,
             // type: this.widgetData.user.primaryCategory,
             //context: this.widgetData.context,
             rollup: {},
@@ -6376,8 +7218,8 @@ class CardUserComponent {
 CardUserComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-card-user',
-                template: "<mat-card class=\"card-users-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.user\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div style=\"position: relative; z-index: 1;\">\n                            <ng-container *ngIf=\"widgetData.user.profileImage\">\n                                <img mat-card-image [src]=\"widgetData.user.profileImage\"\n                                    loading=\"lazy\" class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                    [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" [alt]=\"widgetData.user.firstName\" />\n                            </ng-container>\n                            <ng-container *ngIf=\"!widgetData.user.profileImage\">\n                                <ng-template #defaultImg>\n                                    <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                        class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                        [alt]=\"widgetData.user.firstName\" />\n                                </ng-template>\n                            </ng-container>\n                        </div>\n                        <div class=\"padding-m\">\n                            <div class=\"user_widget flex margin-remove\">\n                            </div>\n                            <div [id]=\"'m-c-'+ widgetData.user?.userId\"\n                                class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                                {{ widgetData?.user?.firstName }}\n                            </div>\n                            <div class=\"flex w-full flex-wrap flex-middle\">\n                                <p>\n                                    {{ widgetData?.user?.description }}\n                                </p>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
-                styles: [".card-users-container{position:relative;width:268px;min-height:346px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:346px;margin:20px 8px}.card-users-container .progress-bar{width:101%;margin-left:-15px;display:flex;margin-top:0;background:bisque;position:absolute;bottom:0}.card-users-container ::ng-deep .mat-progress-bar{height:8px!important}.card-users-container .icon_text{font-size:12px;line-height:16px;text-transform:uppercase}.card-users-container .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-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .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}.card-users-container .source-div{position:relative;top:100px;background:#fff;z-index:3;border:1px solid #dedfe0;min-width:72px;min-height:72px;max-width:72px;max-height:72px;display:flex;border-radius:8px}.card-users-container .source-div .source-icon{border-radius:8px;display:block;margin:auto;max-width:58px;max-height:-webkit-fill-available}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:48px}.card-users-container .description-text{position:relative;overflow:hidden;height:42px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
+                template: "<mat-card class=\"user-card card-users-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div style=\"position: relative; z-index: 1;\">\n                            <ng-container *ngIf=\"widgetData.content.image\">\n                                <img mat-card-image [src]=\"widgetData.content.image\"\n                                    loading=\"lazy\" class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                    [wsUtilsDefaultThumbnail]=\"defaultThumbnail\" [alt]=\"widgetData.content.name\" />\n                            </ng-container>\n                            <ng-container *ngIf=\"!widgetData.content.image\">\n                                <ng-template #defaultImg>\n                                    <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                                        class=\"card-img ws-mat-primary-lite-background margin-remove\"\n                                        [alt]=\"widgetData.content.name\" />\n                                </ng-template>\n                            </ng-container>\n                        </div>\n                        <div class=\"padding-m\">\n                            <div class=\"user_widget flex margin-remove\">\n                            </div>\n                            <div [id]=\"'m-c-'+ widgetData.content?.userId\"\n                                class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                                {{ widgetData?.content?.name }}\n                            </div>\n                            <div class=\"flex w-full flex-wrap flex-middle\">\n                                <p class=\"whitespace-normal description-text\">\n                                    {{ widgetData?.content?.description }}\n                                </p>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                styles: [".card-users-container{position:relative;width:282px;min-height:281px;border-radius:8px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;height:281px;margin:16px 8px}.card-users-container .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-users-container .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-users-container .course_logo_box p{display:inline-block;vertical-align:top}.card-users-container .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}.card-users-container mat-card-content{background:#fff}.card-users-container .card-img{min-width:245px;max-height:140px;min-height:140px;display:block;-o-object-fit:fill;object-fit:fill;border-top-left-radius:8px;border-top-right-radius:8px;width:100%}.card-users-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-users-container .complexity{padding-top:70px;display:flex;font-size:14px;line-height:21px;padding-bottom:10px}.card-users-container .complexity .mode-tag{border-radius:5px;order:2;margin-left:auto;color:#fff;font-size:10px}.card-users-container .complexity .duration{display:flex;margin-left:auto;order:3;font-weight:700}.card-users-container .complexity .time-text{margin:0 5px 0 6px;font-weight:700}.card-users-container .basic{margin:auto 0}.card-users-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}.card-users-container .description-text{position:relative;overflow:hidden;height:63px;white-space:normal;text-overflow:ellipsis}.duration-box{background:#000;position:absolute;border:none;display:flex;align-items:center;padding:4px;border-radius:4px}.duration-box.right-corner{right:4px;bottom:4px}.duration-box .mat-icon{vertical-align:middle;color:#fff!important;height:14px!important;width:14px!important;font-size:14px}.duration-box .duration{font:700 12px/16px Lato;display:inline-block;margin:0;padding:0}"]
             }] }
 ];
 /** @nocollapse */
@@ -6994,8 +7836,8 @@ class CompetencyPassbookComponent {
 CompetencyPassbookComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-competency-passbook',
-                template: " <div class=\"competency-title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" \n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                        {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n                                {{ child.name }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
-                styles: [".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}"]
+                template: " <div class=\"competency-title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" \n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                        {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\">{{obj.count}} Contents</div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n                                {{ child.name }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-3 w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
+                styles: [".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]
             }] }
 ];
 /** @nocollapse */
@@ -7072,7 +7914,7 @@ class PillsComponent {
 PillsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-pills',
-                template: "<ng-container *ngIf=\"!isLoading\">\n    <mat-chip-list >\n        <ng-container *ngFor=\"let pill of pillsData\">\n            <mat-chip class=\"competency-chip\" (click)=\"selectedPill(pill)\" \n            [ngClass]=\"{'active': selectedValue === pill?.name}\">\n                <span class=\"pill-name\">{{pill?.name | titlecase}} <span>{{pill?.count}}</span></span>\n            </mat-chip>\n        </ng-container>\n    </mat-chip-list>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n    <div class=\"flex gap-4\">\n        <ng-container *ngFor=\"let pill of [0,1,2]\">\n            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'100px'\"\n            [height]=\"'24px'\"></sb-uic-skeleton-loader>\n        </ng-container>\n    </div>\n</ng-container>\n",
+                template: "<ng-container *ngIf=\"!isLoading\">\n    <mat-chip-list >\n        <ng-container *ngFor=\"let pill of pillsData\">\n            <mat-chip class=\"competency-chip\" (click)=\"selectedPill(pill)\" \n            [ngClass]=\"{'active': selectedValue === pill?.name}\">\n                <span class=\"pill-name\">{{pill?.name | titlecase}} <span *ngIf=\"pill?.count\">({{pill?.count}})</span></span>\n            </mat-chip>\n        </ng-container>\n    </mat-chip-list>\n</ng-container>\n<ng-container *ngIf=\"isLoading\">\n    <div class=\"flex gap-4\">\n        <ng-container *ngFor=\"let pill of [0,1,2]\">\n            <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'100px'\"\n            [height]=\"'24px'\"></sb-uic-skeleton-loader>\n        </ng-container>\n    </div>\n</ng-container>\n",
                 styles: [".competency-chip{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent!important;cursor:pointer}.competency-chip .pill-name{color:#fff!important}.active{background-color:#1b4ca1!important}"]
             }] }
 ];
@@ -7134,64 +7976,6 @@ CompetencyPassbookModule.decorators = [
             },] }
 ];
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class CommonMethodsService {
-    constructor() { }
-    /**
-     * @param {?} contents
-     * @param {?} strip
-     * @return {?}
-     */
-    transformContentsToWidgets(contents, strip) {
-        return (contents || []).map((/**
-         * @param {?} content
-         * @param {?} idx
-         * @return {?}
-         */
-        (content, idx) => (content ? {
-            widgetType: 'cardLib',
-            widgetSubType: 'cardContentLib',
-            widgetHostClass: 'mb-2',
-            widgetData: Object.assign({ content }, (content.batch && { batch: content.batch }), { cardSubType: strip.stripConfig && strip.stripConfig.cardSubType, cardCustomeClass: strip.customeClass ? strip.customeClass : '', context: { pageSection: strip.key, position: idx }, intranetMode: strip.stripConfig && strip.stripConfig.intranetMode, deletedMode: strip.stripConfig && strip.stripConfig.deletedMode, contentTags: strip.stripConfig && strip.stripConfig.contentTags }),
-        } : {
-            widgetType: 'card',
-            widgetSubType: 'cardContent',
-            widgetHostClass: 'mb-2',
-            widgetData: {},
-        })));
-    }
-    /**
-     * @param {?} strip
-     * @return {?}
-     */
-    transformSkeletonToWidgets(strip) {
-        return [1, 2, 3, 4, 5, 6, 7, 7, 8, 9, 10].map((/**
-         * @param {?} _content
-         * @return {?}
-         */
-        _content => ({
-            widgetType: 'cardLib',
-            widgetSubType: 'cardContentLib',
-            widgetHostClass: 'mb-2',
-            widgetData: {
-                cardSubType: strip.loaderConfig && strip.loaderConfig.cardSubType || 'card-standard-skeleton',
-                cardCustomeClass: strip.customeClass ? strip.customeClass : '',
-            },
-        })));
-    }
-}
-CommonMethodsService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-CommonMethodsService.ctorParameters = () => [];
-/** @nocollapse */ CommonMethodsService.ngInjectableDef = ɵɵdefineInjectable({ factory: function CommonMethodsService_Factory() { return new CommonMethodsService(); }, token: CommonMethodsService, providedIn: "root" });
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7202,5 +7986,5 @@ CommonMethodsService.ctorParameters = () => [];
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { CardsModule, CommonMethodsService, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, DefaultThumbnailDirective as ɵba, PipeDurationTransformModule as ɵbb, PipeDurationTransformPipe as ɵbc, CompetencyPassbookComponent as ɵbd, CompetencyPassbookService as ɵbe, PillsModule as ɵbf, PillsComponent as ɵbg, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CardResourceComponent as ɵq, CardsComponent as ɵr, CardPortraitComponent as ɵs, CardUserComponent as ɵt, CardLandscapeComponent as ɵu, PipePublicURLModule as ɵv, PipePublicURL as ɵw, DisplayContentTypeLibModule as ɵx, DisplayContentTypeLibComponent as ɵy, DefaultThumbnailModule as ɵz };
+export { CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, DisplayContentTypeLibComponent as ɵba, DefaultThumbnailModule as ɵbb, DefaultThumbnailDirective as ɵbc, PipeDurationTransformModule as ɵbd, PipeDurationTransformPipe as ɵbe, CompetencyPassbookComponent as ɵbf, CompetencyPassbookService as ɵbg, PillsModule as ɵbh, PillsComponent as ɵbi, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CommonStripComponent as ɵr, CardResourceComponent as ɵs, CardsComponent as ɵt, CardPortraitComponent as ɵu, CardUserComponent as ɵv, CardLandscapeComponent as ɵw, PipePublicURLModule as ɵx, PipePublicURL as ɵy, DisplayContentTypeLibModule as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map