@sunbird-cb/consumption 0.0.13 → 0.0.15

package/fesm5/sunbird-cb-consumption.js

@@ -1,4 +1,4 @@
-import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, Pipe } from '@angular/core';
+import { Injectable, ɵɵdefineInjectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, ɵɵinject, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, Pipe, ElementRef, ViewChildren } from '@angular/core';
 import { CommonModule, DatePipe } from '@angular/common';
 import { Router, RouterModule } from '@angular/router';
 import { fromEvent, timer, BehaviorSubject, of, EMPTY, ReplaySubject, Subject, throwError, interval } from 'rxjs';
@@ -182,7 +182,11 @@ var HorizontalScrollerV2Component = /** @class */ (function () {
                 left: this.horizontalScrollElem.nativeElement.scrollLeft - clientWidth,
                 behavior: 'smooth',
             });
-            this.activeNav -= 1;
+            /** @type {?} */
+            var elem = this.horizontalScrollElem.nativeElement;
+            if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
+                this.activeNav -= 1;
+            }
         }
     };
     /**
@@ -202,7 +206,11 @@ var HorizontalScrollerV2Component = /** @class */ (function () {
                 left: this.horizontalScrollElem.nativeElement.scrollLeft + clientWidth,
                 behavior: 'smooth',
             });
-            this.activeNav += 1;
+            /** @type {?} */
+            var elem = this.horizontalScrollElem.nativeElement;
+            if (elem.scrollLeft !== 0 && (elem.scrollWidth !== elem.clientWidth + elem.scrollLeft)) {
+                this.activeNav += 1;
+            }
         }
     };
     /**
@@ -5852,7 +5860,7 @@ var SlidersLibComponent = /** @class */ (function (_super) {
     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? 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",
+                    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    class=\"banner-overlay {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n    <div class=\"banner WidgetInstanceId\" \n    *ngFor=\"let slide of widgetData; let i = index\" \n    [hidden]=\"i !== currentIndex\" \n    [ngStyle]=\"{\n        'border-width': isMobile?  styleData?.responsive?.imageBorderWidth : styleData?.imageBorderWidth,\n        'border-color': isMobile? styleData?.responsive?.imageBorderColor : styleData?.imageBorderColor,\n        'border-style': isMobile? styleData?.responsive?.imageBorderStyle: styleData?.imageBorderStyle}\">\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\"\n      class=\"banner-title text-truncate {{widgetData[currentIndex] && widgetData[currentIndex].redirectUrl ? '' : 'pointer-events-none'}}\"\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}}"]
                 }] }
     ];
@@ -6328,8 +6336,8 @@ var DataPointsComponent = /** @class */ (function () {
     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; let last = last\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak }\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" >{{obj?.value | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                    </div>\n                    <div [style.color]=\"obj?.labelColor\" class=\"objDescription\">{{obj?.label}}</div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'singleRow'\">\n    <div class=\"flex gap-4\">\n        <div *ngFor=\"let obj of objectData\" class=\"flex-container\">\n            <div class=\"melement-div {{obj?.background}} flex-item\">\n                <div class=\"flex flex-row gap-3\">\n                    <div>\n                        <img [style.color]=\"obj?.iconColor\"  class=\"mobjIcon\" [src]=\"obj.icon\">\n                    </div>\n                    <div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\">{{obj?.value  | number: '1.1-2'}}</div>\n                        <div [style.color]=\"obj?.labelColor\" class=\"mobjDescription\">{{obj?.label}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>    \n</div>\n\n<div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n    <div class=\"w-full\" *ngIf=\"layoutType === 'gridLayout'\">\n        <div class=\"top-container\">\n            <div class=\"flex-container\" *ngFor=\"let chunk of customArray\">\n                <div *ngFor=\"let item of chunk\">\n                    <div class=\"flex-item\">\n                        <div class=\"flex flex-row gap-5 infra-element-div\">\n                            <div>\n                               <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\">{{item?.value}}</div>\n                                <div [style.color]=\"item?.labelColor\" class=\"custom-opacity infra-objDescription padding-top-s\">{{item?.label}}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n    </div>   \n</div>\n\n\n<!-- skeleton  loaders -->\n\n<ng-container>\n    <div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && isDataLoading\">\n        <div *ngFor=\"let obj of [0,1,2,3]\" class=\"\">\n            <div class=\"element-div linebreak\" >\n                <div class=\"flex flex-row gap-3 items-top\">\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-1'\" [width]=\"'150px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>",
-                    styles: [".white{color:#fff}.custom-opacity{opacity:.7}.black{color:#000}.objIcon{width:32px;height:32px}.mobjIcon{width:24px;height:24px}.objHeader{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left}.mobjHeader{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.mobjDescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}.metrics-web{height:inherit;overflow-y:auto}.element-div{padding:25px 0;margin:0 25px}.linebreak{border-bottom:1px solid rgba(0,0,0,.16)}.melement-div{padding:16px;border-radius:15px;width:249px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-element-div{min-width:325px;padding:25px 0;align-items:baseline}.infra-objIcon{width:32px;height:32px}.infra-objHeader{font-family:Montserrat;font-size:36px;font-weight:600;line-height:29.26px;text-align:left}.infra-objDescription{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:left}.flex-container{display:flex}.top-container{overflow-x:auto;width:100%}.flex-item{flex:0 0 auto;white-space:nowrap;min-width:200px}@media screen and (max-width:768px){.infra-objIcon{width:24px;height:24px}.infra-objHeader{font-size:24px}.infra-element-div{min-width:250px;padding:15px 0 25px}}"]
+                    template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; let last = last\" class=\"\">\n        <div class=\"element-div\" [ngClass]=\"{'linebreak': obj?.linebreak }\">\n            <div class=\"flex flex-row gap-3 items-top\">\n                <div>\n                    <img class=\"objIcon\" [src]=\"obj.icon\"  [style.color]=\"obj?.iconColor\">\n                </div>\n                <div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"!(obj && obj.value)\">0</div>\n                    <div [style.color]=\"obj?.valueColor\" class=\"objHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                        {{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\" *ngIf=\"!(obj && obj.value)\">0</div>\n                        <div [style.color]=\"obj?.valueColor\" class=\"mobjHeader pb-1\" *ngIf=\"(obj && obj.value)\">\n                            {{obj?.value  | number: obj.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                        </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\" *ngIf=\"!(item && item.value)\">0</div>\n                                <div [style.color]=\"item?.valueColor\" class=\"infra-objHeader\"  *ngIf=\"(item && item.value)\">\n                                    {{item?.value  | number: item.value % 1 === 0 ? '1.0-0' : '1.1-2'}}\n                                </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>\n",
+                    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%}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}.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}}"]
                 }] }
     ];
     /** @nocollapse */
@@ -7774,6 +7782,73 @@ var CommonStripModule = /** @class */ (function () {
     return CommonStripModule;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var AnnouncementsComponent = /** @class */ (function () {
+    function AnnouncementsComponent() {
+    }
+    /**
+     * @return {?}
+     */
+    AnnouncementsComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    /**
+     * @param {?} item
+     * @return {?}
+     */
+    AnnouncementsComponent.prototype.viewMoreOrLess = /**
+     * @param {?} item
+     * @return {?}
+     */
+    function (item) {
+        if (item.value.length > 152) {
+            item.expanded = !item.expanded;
+        }
+    };
+    AnnouncementsComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'sb-uic-announcements',
+                    template: "<p>announcements works!</p>\n<div class=\"w-full\">\n    <div class=\"flex item-center key-logo\">\n        <img class=\"\" [src]=\"objectData?.logoUrl\">\n    </div>\n    <div class=\"flex item-center key-logo \">\n        <div class=\"key-heading\"\n            [style.backgroundColor]=\"objectData?.header?.background\"\n            [style.color]=\"objectData?.header?.color\">\n            {{objectData?.title}}\n        </div>\n    </div>\n    <div class=\"key-list-container\"\n        [style.borderColor]=\"objectData?.panelborder\"\n        [style.backgroundColor]=\"objectData?.panelBackground\">\n        <div class=\"key-list\">\n            <div *ngFor=\"let item of objectData?.list; let i = index\">\n                <div class=\"key-list-item mb-{{ objectData?.list?.length === (i+1) ? '' : '4'}}\" \n                    [style.borderColor]=\"objectData?.listItem?.border\"\n                    [style.backgroundColor]=\"objectData?.listItem?.background\">\n                    <div class=\"key-list-item-content {{item?.value?.length > 152 && !item?.expanded ? 'expand' : 'un-expand'}}\" [innerHTML]=\"item?.value\"></div>\n                    <div class=\"more-or-less\" *ngIf=\"item?.value?.length > 152\" [style.color]=\"objectData?.panelborder\">\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"!item?.expanded\">View more</div>\n                        <div class=\"cursor-pointer\" (click)=\"viewMoreOrLess(item)\" *ngIf=\"item?.expanded\">View less</div>\n                    </div>\n                </div>\n            </div>                        \n        </div>        \n    </div>\n</div>",
+                    styles: [".key-logo{align-items:center;justify-content:center}.key-list-container{border:1px solid #ccc;padding:45px 15px 15px;border-radius:12px;margin-top:-20px}.key-list{max-height:600px;overflow:auto}.key-list::-webkit-scrollbar{display:none}.key-list-item{padding:16px;border:1px solid #ccc;border-radius:12px;min-height:56px}::ng-deep .key-list-item-content a{color:#1b4ca1!important}.key-list-item-content{font-family:Lato;font-size:14px;font-weight:400;line-height:20px;text-align:left;white-space:initial;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}.expand{-webkit-line-clamp:3}.un-expand{-webkit-line-clamp:0}.more-or-less{font-family:Lato;font-size:14px;line-height:20px;font-weight:600}.key-heading{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:10px 50px;border-radius:20px;margin-top:-3px;animation:.9s infinite paddingAnimation}@keyframes paddingAnimation{0%,100%{padding:10px 50px}25%,75%{padding:10px 55px}50%{padding:10px 60px}}"]
+                }] }
+    ];
+    /** @nocollapse */
+    AnnouncementsComponent.ctorParameters = function () { return []; };
+    AnnouncementsComponent.propDecorators = {
+        objectData: [{ type: Input }]
+    };
+    return AnnouncementsComponent;
+}());
+if (false) {
+    /** @type {?} */
+    AnnouncementsComponent.prototype.objectData;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var AnnouncementsModule = /** @class */ (function () {
+    function AnnouncementsModule() {
+    }
+    AnnouncementsModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [AnnouncementsComponent],
+                    imports: [
+                        CommonModule,
+                        SkeletonLoaderLibModule
+                    ],
+                    exports: [AnnouncementsComponent],
+                },] }
+    ];
+    return AnnouncementsModule;
+}());
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7793,7 +7868,8 @@ var ConsumptionModule = /** @class */ (function () {
                         SlidersLibModule,
                         DataPointsModule,
                         CalenderModule,
-                        CommonStripModule
+                        CommonStripModule,
+                        AnnouncementsModule
                     ],
                 },] }
     ];
@@ -7959,7 +8035,7 @@ var CardsComponent = /** @class */ (function (_super) {
     CardsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-cards',
-                    template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n  <ng-template #cardUser>\n    <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n  </ng-template>\n",
+                    template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n    </ng-container>\n</div>\n\n<ng-template #cardPortraitLibSkeleton>\n  <sb-uic-card-portrait [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardPortraitLib>\n  <sb-uic-card-portrait (contentData)=\"getRedirectUrlData($event)\" [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-portrait>\n</ng-template>\n<ng-template #cardLandscapeLibSkeleton>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"true\"></sb-uic-card-landscape>\n</ng-template>\n<ng-template #cardLandscapeLib>\n  <sb-uic-card-landscape [widgetData]=\"widgetData\" [isCardLoading]=\"false\"></sb-uic-card-landscape>\n</ng-template>\n\n<ng-template #cardWideLib>\n  <sb-uic-card-wide (contentData)=\"getRedirectUrlData($event)\"  [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n<ng-template #cardWideLibSkeleton>\n  <sb-uic-card-wide [widgetData]=\"widgetData\"></sb-uic-card-wide>\n</ng-template>\n\n  <ng-template #cardUser>\n    <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n  </ng-template>\n",
                     styles: [""]
                 }] }
     ];
@@ -8663,7 +8739,7 @@ var CardUserComponent = /** @class */ (function () {
     CardUserComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-card-user',
-                    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>",
+                    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 mat-body-2\">\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}"]
                 }] }
     ];
@@ -9026,7 +9102,7 @@ var CardWideComponent = /** @class */ (function () {
         { type: Component, args: [{
                     selector: 'sb-uic-card-wide',
                     template: "<mat-card class=\"card-wide-lib\">\n    <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n    role=\"link\" i18n-aria-label>\n    <div class=\"flex\">\n        <div>\n            <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n                <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                [alt]=\"widgetData?.content?.name\" />\n              </ng-container>\n              <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n                <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n                  <img mat-card-image [src]=\"widgetData?.content?.appIcon | pipePublicURL\" loading=\"lazy\"\n                  class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                  [alt]=\"widgetData?.content?.name\" />\n                </ng-container>\n                <ng-template #defaultImg>\n                  <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                  class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"\n                  [alt]=\"widgetData?.content?.name\" />\n                </ng-template>\n              </ng-container>\n        </div>\n        <div>\n            <div class=\"pl-4 pr-4 w-full\">\n                <div class=\"course_widget flex margin-remove\">\n                  <div class=\"flex flex-end course_v2\">\n                    <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                    <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData?.content?.primaryCategory\"\n                      class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n                      ?'Module'\n                      :widgetData?.content?.primaryCategory\">\n                    </sb-uic-display-content-type>\n                  </div>\n                </div>\n                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                  class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                  {{ widgetData?.content?.name }}\n                </div>\n\n            <div class=\"flex w-full flex-wrap flex-middle\">\n                <div class=\"course_logo_box\">\n                  <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                  [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n                </div>\n                <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n                  <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n              </div>\n            </div>\n        </div>\n    </div>\n    </a>\n</mat-card>\n",
-                    styles: [".card-wide-lib{width:inherit;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16)}.card-wide-lib .card-wide-img{width:190px;height:107px;border-radius:12px}.card-wide-lib .course_widget{margin-top:10px}.card-wide-lib .course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.card-wide-lib .course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.card-wide-lib .course_widget .main_icon{font-size:16px;width:16px;height:16px}.card-wide-lib .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-wide-lib .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-wide-lib .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-lib .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}"]
+                    styles: [".card-wide-lib{width:inherit;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16)}.card-wide-lib .card-wide-img{width:190px;height:107px;border-radius:12px}.card-wide-lib .course_widget{margin-top:10px}.card-wide-lib .course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.card-wide-lib .course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.card-wide-lib .course_widget .main_icon{font-size:16px;width:16px;height:16px}.card-wide-lib .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-wide-lib .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-wide-lib .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-lib .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}@media screen and (max-width:768px){.card-wide-img{width:167px;height:117px;border-radius:12px}}"]
                 }] }
     ];
     /** @nocollapse */
@@ -9923,664 +9999,155 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var UserContentRatingComponent = /** @class */ (function () {
-    function UserContentRatingComponent(ratingService) {
+var ScrollableItemDirective = /** @class */ (function () {
+    function ScrollableItemDirective(el) {
+        this.el = el;
+    }
+    /**
+     * @param {?} blockValue
+     * @return {?}
+     */
+    ScrollableItemDirective.prototype.scrollIntoView = /**
+     * @param {?} blockValue
+     * @return {?}
+     */
+    function (blockValue) {
+        this.el.nativeElement.scrollIntoView({ behavior: 'smooth', block: blockValue });
+    };
+    ScrollableItemDirective.decorators = [
+        { type: Directive, args: [{
+                    selector: '[sbUicScrollableItem]'
+                },] }
+    ];
+    /** @nocollapse */
+    ScrollableItemDirective.ctorParameters = function () { return [
+        { type: ElementRef }
+    ]; };
+    ScrollableItemDirective.propDecorators = {
+        key: [{ type: Input, args: ['sbUicScrollableItem',] }]
+    };
+    return ScrollableItemDirective;
+}());
+if (false) {
+    /** @type {?} */
+    ScrollableItemDirective.prototype.key;
+    /**
+     * @type {?}
+     * @private
+     */
+    ScrollableItemDirective.prototype.el;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var API_END_POINTS$4 = {
+    TOP_REVIEWS: "/apis/proxies/v8/ratings/v1/topReviews"
+};
+var UserContentRatingLibService = /** @class */ (function () {
+    function UserContentRatingLibService(http) {
+        this.http = http;
+    }
+    /**
+     * @param {?} doId
+     * @return {?}
+     */
+    UserContentRatingLibService.prototype.fetchTopReviews = /**
+     * @param {?} doId
+     * @return {?}
+     */
+    function (doId) {
+        return this.http.get(API_END_POINTS$4.TOP_REVIEWS + "/" + doId);
+    };
+    UserContentRatingLibService.decorators = [
+        { type: Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    /** @nocollapse */
+    UserContentRatingLibService.ctorParameters = function () { return [
+        { type: HttpClient }
+    ]; };
+    /** @nocollapse */ UserContentRatingLibService.ngInjectableDef = ɵɵdefineInjectable({ factory: function UserContentRatingLibService_Factory() { return new UserContentRatingLibService(ɵɵinject(HttpClient)); }, token: UserContentRatingLibService, providedIn: "root" });
+    return UserContentRatingLibService;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    UserContentRatingLibService.prototype.http;
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var UserContentRatingLibComponent = /** @class */ (function () {
+    function UserContentRatingLibComponent(ratingService, userRatingSvc) {
         this.ratingService = ratingService;
+        this.userRatingSvc = userRatingSvc;
         this.currentIndex = 0;
-        this.styleData = {
-            "bannerMetaClass": "inline-meta",
-            "bannerMeta": "visible",
-            "bannerMetaAlign": "right",
-            "navigationArrows": "visible",
-            "borderRadius": "0",
-            "customHeight": "424px",
-            "arrowsPlacement": "middle-inline",
-            "responsive": {
-                "bannerMetaClass": "inline-meta",
-                "customHeight": "232px",
-                "bannerMetaAlign": "right",
-                "navigationArrows": "visible",
-                "dots": "hidden",
-                "arrowsPlacement": "middle-inline"
-            }
-        };
-        this.sliders = [
-            {
-                "active": true,
-                "banners": {
-                    "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png"
-                },
-                "redirectUrl": "",
-                "queryParams": {},
-                "title": ""
-            },
-            {
-                "active": true,
-                "banners": {
-                    "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
-                    "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
-                    "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
-                    "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
-                    "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png",
-                    "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051312372424704125/artifact/do_114051312372424704125_1715248147439_l.png"
-                },
-                "redirectUrl": "",
-                "queryParams": {},
-                "title": ""
-            },
-            {
-                "active": true,
-                "banners": {
-                    "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
-                    "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
-                    "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
-                    "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
-                    "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png",
-                    "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051314864234496126/artifact/do_114051314864234496126_1715248438443_l.png"
-                },
-                "redirectUrl": "",
-                "queryParams": {},
-                "title": ""
-            },
-            {
-                "active": true,
-                "banners": {
-                    "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png"
-                },
-                "redirectUrl": "",
-                "queryParams": {},
-                "title": ""
-            },
-            {
-                "active": true,
-                "banners": {
-                    "l": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "m": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "s": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xs": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png",
-                    "xxl": "https://portal.karmayogi.nic.in/content-store/content/do_114051307572264960124/artifact/do_114051307572264960124_1715247613335_l.png"
-                },
-                "redirectUrl": "",
-                "queryParams": {},
-                "title": ""
-            }
-        ];
-        this.contentCard = {
-            "content": {
-                "identifier": "do_113990515935854592111",
-                "competencies_v5": [
-                    {
-                        "competencyArea": "Behavioural",
-                        "competencyAreaId": 1,
-                        "competencyAreaDescription": "Behavioural Competency Area",
-                        "competencyTheme": "Collaboration",
-                        "competencyThemeId": 25,
-                        "competecnyThemeDescription": "Collaboration competency Theme",
-                        "competencyThemeType": "Core",
-                        "competencySubTheme": "Diversity & Inclusion",
-                        "competencySubThemeId": 27,
-                        "competecnySubThemeDescription": "Diversity & Inclusion Competency Sub-Theme"
-                    }
-                ],
-                "description": "Invite only program",
-                "organisation": [
-                    "Ministry of Finance"
-                ],
-                "creatorLogo": null,
-                "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139430185765847041226/artifact/do_1139430185765847041226_1702028635111_maxresdefault.jpg",
-                "duration": "2280",
-                "additionalTags": null,
-                "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113990515935854592111/artifact/do_1139430185765847041226_1702028635111_maxresdefault.thumb.jpg",
-                "primaryCategory": "Program",
-                "name": "Invite only program",
-                "avgRating": null,
-                "contentType": "Course"
-            },
-            "cardSubType": "card-wide-lib",
-            "cardCustomeClass": "",
-            "context": {
-                "pageSection": "featuredContents",
-                "position": 3
-            },
-            "review": "Credit",
-            "rating": 5.0,
-            "userDetails": {
-                "firstName": "Agri usertwo",
-                "userId": "f00473e1-54e8-40b7-b541-461250f298d1",
-                "profileImageUrl": null
-            }
-        };
-        this.widgetData = {
-            cardSubType: ''
-        };
-        this.responseData = [
-            {
-                "review": "Credit",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Agri usertwo",
-                    "userId": "f00473e1-54e8-40b7-b541-461250f298d1",
-                    "profileImageUrl": null
-                },
-                "content": {
-                    "identifier": "do_113990515935854592111",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Behavioural",
-                            "competencyAreaId": 1,
-                            "competencyAreaDescription": "Behavioural Competency Area",
-                            "competencyTheme": "Collaboration",
-                            "competencyThemeId": 25,
-                            "competecnyThemeDescription": "Collaboration competency Theme",
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Diversity & Inclusion",
-                            "competencySubThemeId": 27,
-                            "competecnySubThemeDescription": "Diversity & Inclusion Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "Invite only program",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139430185765847041226/artifact/do_1139430185765847041226_1702028635111_maxresdefault.jpg",
-                    "duration": "2280",
-                    "additionalTags": null,
-                    "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113990515935854592111/artifact/do_1139430185765847041226_1702028635111_maxresdefault.thumb.jpg",
-                    "primaryCategory": "Program",
-                    "name": "Invite only program",
-                    "avgRating": null,
-                    "contentType": "Course"
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                }
-            },
-            {
-                "review": "Abc xyz1",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Qa test user one @#$ 123",
-                    "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_113987549775609856182_rc",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaId": 145,
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyTheme": "Account Management",
-                            "competencyThemeId": 148,
-                            "competecnyThemeDescription": "Account Management competency Theme",
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Account Management",
-                            "competencySubThemeId": 149,
-                            "competecnySubThemeDescription": "Account Management Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "Course Check for MDO Specific All Users 09 Feb",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_11395704427130060819/artifact/do_11395704427130060819_1703740756028_capture71703740758098.png",
-                    "duration": "606",
-                    "additionalTags": null,
-                    "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113987549775609856182_rc/artifact/do_11395704427130060819_1703740756028_capture71703740758098.thumb.png",
-                    "primaryCategory": "Course",
-                    "name": "Course Check for MDO Specific All Users 09 Feb",
-                    "avgRating": 5.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "Testing ratings - Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eum, assumenda quasi accusamus perferendis voluptas saepe, ducimus architecto animi iste numquam vitae minima sed explica",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Agri usertwo",
-                    "userId": "f00473e1-54e8-40b7-b541-461250f298d1",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_114006606955921408144",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Behavioural",
-                            "competencyAreaId": 1,
-                            "competencyAreaDescription": "Behavioural Competency Area",
-                            "competencyTheme": "Collaborative Leadership",
-                            "competencyThemeId": 46,
-                            "competecnyThemeDescription": "Collaborative Leadership competency Theme",
-                            "competencyThemeType": "Leadership",
-                            "competencySubTheme": "Influencing and Negotiation",
-                            "competencySubThemeId": 47,
-                            "competecnySubThemeDescription": "Influencing and Negotiation Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "test Scrom",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139430185765847041226/artifact/do_1139430185765847041226_1702028635111_maxresdefault.jpg",
-                    "duration": "180",
-                    "additionalTags": null,
-                    "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_114006606955921408144/artifact/do_1139430185765847041226_1702028635111_maxresdefault.thumb.jpg",
-                    "primaryCategory": "Course",
-                    "name": "Large PDF test Cases",
-                    "avgRating": 4.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "Good courseQA",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Public User QA env",
-                    "userId": "0517056e-b57b-49ca-a44c-cdc3a251dd3e",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_113902049969004544112",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Backbone System Maintenance",
-                            "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
-                            "competencyThemeId": 186,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Backbone System Maintenance",
-                            "competencySubThemeId": 187,
-                            "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
-                        },
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
-                            "competencyThemeId": 184,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencySubThemeId": 185,
-                            "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "QATestCourse2",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "duration": "540",
-                    "additionalTags": null,
-                    "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "primaryCategory": "Course",
-                    "name": "QATestCourse2",
-                    "avgRating": 5.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "ok",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "qatestcreator",
-                    "userId": "54548483-0708-417c-ac9f-9b2260e13962",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_113902049969004544112",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Backbone System Maintenance",
-                            "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
-                            "competencyThemeId": 186,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Backbone System Maintenance",
-                            "competencySubThemeId": 187,
-                            "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
-                        },
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
-                            "competencyThemeId": 184,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencySubThemeId": 185,
-                            "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "QATestCourse2",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "duration": "540",
-                    "additionalTags": null,
-                    "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "primaryCategory": "Course",
-                    "name": "QATestCourse2",
-                    "avgRating": 5.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "nic onenic onenic onenic onenic onenic onenic onenic onenic onenic onenic onenic onenic one",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Qa test user one @#$ 123",
-                    "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_113902049969004544112",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Backbone System Maintenance",
-                            "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
-                            "competencyThemeId": 186,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Backbone System Maintenance",
-                            "competencySubThemeId": 187,
-                            "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
-                        },
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
-                            "competencyThemeId": 184,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencySubThemeId": 185,
-                            "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "QATestCourse2",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "duration": "540",
-                    "additionalTags": null,
-                    "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "primaryCategory": "Course",
-                    "name": "QATestCourse2",
-                    "avgRating": 5.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "Checking Ratings and alignment under Overview",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Get Started User Five",
-                    "userId": "e6a9d4b6-b30a-405f-9bcb-166038600218",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_113902049969004544112",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Backbone System Maintenance",
-                            "competencyThemeDescription": "Communication Backbone System Maintenance competency Theme",
-                            "competencyThemeId": 186,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Backbone System Maintenance",
-                            "competencySubThemeId": 187,
-                            "competencySubThemeDescription": "Communication Backbone System Maintenance Competency Sub-Theme"
-                        },
-                        {
-                            "competencyArea": "Domain",
-                            "competencyAreaDescription": "Domain Competency Area",
-                            "competencyAreaId": 145,
-                            "competencyTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencyThemeDescription": "Communication Auxiliary Systems Maintenance competency Theme",
-                            "competencyThemeId": 184,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Communication Auxiliary Systems Maintenance",
-                            "competencySubThemeId": 185,
-                            "competencySubThemeDescription": "Communication Auxiliary Systems Maintenance Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "QATestCourse2",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "duration": "540",
-                    "additionalTags": null,
-                    "appIcon": "https://portal.karmayogiqa.nic.in/content-store/content/do_113902071254761472117/artifact/do_113902071254761472117_1697030308090_screenshotfrom202310101224021697030170978.png",
-                    "primaryCategory": "Course",
-                    "name": "QATestCourse2",
-                    "avgRating": 5.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "Testing rating 123",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Qa test user one @#$ 123",
-                    "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_1139400923254046721119",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Functional",
-                            "competencyAreaDescription": "Functional Competency Area",
-                            "competencyAreaId": 56,
-                            "competencyTheme": "Administration Matters",
-                            "competencyThemeDescription": "Administration Matters competency Theme",
-                            "competencyThemeId": 140,
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Handling Miscellaneous Matters (Car, Residence, Personal Staff etc.)",
-                            "competencySubThemeId": 143,
-                            "competencySubThemeDescription": "Handling Miscellaneous Matters (Car, Residence, Personal Staff etc.) Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "Youtube Links",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139400694644490241113/artifact/do_1139400694644490241113_1701668637063_effective-communication.png",
-                    "duration": "420",
-                    "additionalTags": null,
-                    "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_1139400923254046721119/artifact/do_1139400694644490241113_1701668637063_effective-communication.thumb.png",
-                    "primaryCategory": "Course",
-                    "name": "Course New 04 Dec",
-                    "avgRating": 5.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "nice1",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "Qa test user one @#$ 123",
-                    "userId": "7fd686b6-d5b2-4e0a-a43f-d6e57cd2ea09",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_1139967854457651201519_rc",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Behavioural",
-                            "competencyAreaId": 1,
-                            "competencyAreaDescription": "Behavioural Competency Area",
-                            "competencyTheme": "Personal Effectiveness",
-                            "competencyThemeId": 7,
-                            "competecnyThemeDescription": "Personal Effectiveness competency Theme",
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Resilience",
-                            "competencySubThemeId": 9,
-                            "competecnySubThemeDescription": "Resilience Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "Sub:- Vikas- New Program '22/02/24'     ",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_1139946848192430081395/artifact/do_1139946848192430081395_1708335549501_digitalindiaandegovernance1708335549950.jpg",
-                    "duration": "12761",
-                    "additionalTags": null,
-                    "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_1139967854457651201519_rc/artifact/do_1139946848192430081395_1708335549501_digitalindiaandegovernance1708335549950.thumb.jpg",
-                    "primaryCategory": "Program",
-                    "name": "Vikas- New Program '22/02/24'",
-                    "avgRating": 2.0,
-                    "contentType": "Course"
-                }
-            },
-            {
-                "review": "bv",
-                "rating": 5.0,
-                "userDetails": {
-                    "firstName": "qa dstuserone",
-                    "userId": "31c81730-bf33-437a-a53e-0bd8ac2fc3d6",
-                    "profileImageUrl": null
-                },
-                "cardSubType": "card-wide-lib",
-                "cardCustomeClass": "",
-                "context": {
-                    "pageSection": "featuredContents",
-                    "position": 3
-                },
-                "content": {
-                    "identifier": "do_113965740548784128178",
-                    "competencies_v5": [
-                        {
-                            "competencyArea": "Functional",
-                            "competencyAreaId": 56,
-                            "competencyAreaDescription": "Functional Competency Area",
-                            "competencyTheme": "Establishment & HR",
-                            "competencyThemeId": 101,
-                            "competecnyThemeDescription": "Establishment & HR competency Theme",
-                            "competencyThemeType": "Core",
-                            "competencySubTheme": "Handling Fundamental Rules /Supplementary Rules",
-                            "competencySubThemeId": 104,
-                            "competecnySubThemeDescription": "Handling Fundamental Rules /Supplementary Rules Competency Sub-Theme"
-                        }
-                    ],
-                    "description": "Course with more subthemes",
-                    "organisation": [
-                        "Ministry of Finance"
-                    ],
-                    "creatorLogo": null,
-                    "posterImage": "https://portal.karmayogiqa.nic.in/content-store/content/do_113921119628378112168/artifact/do_113921119628378112168_1699355423624_capture121699355424283.png",
-                    "duration": "540",
-                    "additionalTags": [
-                        "mostEnrolled"
-                    ],
-                    "appIcon": "https://static.karmayogiprod.nic.in/igotqa/collection/do_113965740548784128178/artifact/do_113921119628378112168_1699355423624_capture121699355424283.thumb.png",
-                    "primaryCategory": "Course",
-                    "name": "Course with more subthemes",
-                    "avgRating": 5.0,
-                    "contentType": "Course"
-                }
-            }
-        ];
+        this.providerId = '';
+        this.formData = '';
+        this.emptyResponse = new EventEmitter();
+        this.styleData = {};
+        this.contentdata = [];
     }
     /**
      * @return {?}
      */
-    UserContentRatingComponent.prototype.ngOnInit = /**
+    UserContentRatingLibComponent.prototype.ngOnInit = /**
      * @return {?}
      */
     function () {
+        this.styleData = this.formData && this.formData.sliderData && this.formData.sliderData.styleData;
+        this.getTopReviews();
+    };
+    /**
+     * @return {?}
+     */
+    UserContentRatingLibComponent.prototype.getTopReviews = /**
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        this.contentdata = [];
+        this.userRatingSvc.fetchTopReviews(this.providerId).subscribe((/**
+         * @param {?} response
+         * @return {?}
+         */
+        function (response) {
+            if (response && response.result && response.result.content.length) {
+                response.result.content.forEach((/**
+                 * @param {?} contentEle
+                 * @return {?}
+                 */
+                function (contentEle) {
+                    /** @type {?} */
+                    var localData = {};
+                    localData['content'] = contentEle.contentInfo;
+                    localData['rating'] = contentEle.rating;
+                    localData['review'] = contentEle.review;
+                    localData['userDetails'] = contentEle.userDetails;
+                    localData['cardSubType'] = "card-wide-lib";
+                    localData['cardCustomeClass'] = "";
+                    _this.contentdata.push(localData);
+                }));
+            }
+            else {
+                _this.emptyResponse.emit(true);
+            }
+        }));
     };
     /**
      * @param {?} ratingIndex
      * @param {?} avg
      * @return {?}
      */
-    UserContentRatingComponent.prototype.getRatingIcon = /**
+    UserContentRatingLibComponent.prototype.getRatingIcon = /**
      * @param {?} ratingIndex
      * @param {?} avg
      * @return {?}
@@ -10593,7 +10160,7 @@ var UserContentRatingComponent = /** @class */ (function () {
      * @param {?} avg
      * @return {?}
      */
-    UserContentRatingComponent.prototype.getRatingIconClass = /**
+    UserContentRatingLibComponent.prototype.getRatingIconClass = /**
      * @param {?} ratingIndex
      * @param {?} avg
      * @return {?}
@@ -10605,41 +10172,70 @@ var UserContentRatingComponent = /** @class */ (function () {
      * @param {?} indexValue
      * @return {?}
      */
-    UserContentRatingComponent.prototype.getCurrentIndex = /**
+    UserContentRatingLibComponent.prototype.getCurrentIndex = /**
      * @param {?} indexValue
      * @return {?}
      */
     function (indexValue) {
         this.currentIndex = indexValue;
+        this.handleScrollClick(indexValue);
     };
-    UserContentRatingComponent.decorators = [
+    /**
+     * @param {?} dataValue
+     * @return {?}
+     */
+    UserContentRatingLibComponent.prototype.handleScrollClick = /**
+     * @param {?} dataValue
+     * @return {?}
+     */
+    function (dataValue) {
+        /** @type {?} */
+        var item = this.scrollableItems.find((/**
+         * @param {?} x
+         * @return {?}
+         */
+        function (x) { return x.key === dataValue; }));
+        item.scrollIntoView("nearest");
+    };
+    UserContentRatingLibComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-user-content-rating',
-                    template: "<!-- <sb-uic-sliders [title]=\"'providerName'\" [widgetData]=\"[]\" [styleData]=\"styleData\">\n    <div sliderbody>\n        <div class=\"flex justify-center\">\n            <div class=\"avatar-block mr-3\">\n                <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                </sb-uic-avatar-photo>\n            </div>\n            <div class=\"avatar-block mr-3\">\n                <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                </sb-uic-avatar-photo>\n            </div>\n        </div>\n        <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n            <p class=\"userName w-full\">Harshit Rao</p>\n\n            <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                    [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, 3.3)}\"\n                    *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                    {{ getRatingIcon(rating, 3.3) }}\n                </mat-icon>\n            </div>\n            <p class=\"content-feedback w-full\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud.</p>\n            <div class=\"w-full m-8\">\n                <sb-uic-cards [widgetData]=\"contentCard\"></sb-uic-cards>\n            </div>\n        </div>\n    </div>\n</sb-uic-sliders> -->\n\n<sb-uic-sliders-ng-content [title]=\"'providerName'\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"responseData\" [styleData]=\"styleData\">\n    <div sliderbody>\n        <div *ngFor=\"let data of responseData; let i = index\" [hidden]=\"i !== currentIndex\">\n            <div class=\"flex justify-center\">\n                <div class=\"avatar-block mr-3\">\n                    <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                    </sb-uic-avatar-photo>\n                </div>\n                <div class=\"avatar-block mr-3\">\n                    <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                    </sb-uic-avatar-photo>\n                </div>\n            </div>\n            <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                <p class=\"userName w-full\">Harshit Rao</p>\n    \n                <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                    <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                        [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, 3.3)}\"\n                        *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                        {{ getRatingIcon(rating, 3.3) }}\n                    </mat-icon>\n                </div>\n                <p class=\"content-feedback w-full\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud.</p>\n                <div class=\"w-full m-8\">\n                    <sb-uic-cards [widgetData]=\"contentCard\"></sb-uic-cards>\n                </div>\n            </div>\n        </div>\n    </div>\n</sb-uic-sliders-ng-content>\n\n",
-                    styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.avatar-block::before{content:\"\";border:4px solid #f3972e;border-radius:50%;width:41px;height:41px;display:flex;justify-content:center;align-items:center;position:absolute}"]
+                    template: "<ng-container *ngIf=\"contentdata.length\">\n    <sb-uic-sliders-ng-content [title]=\"'providerName'\"  [currentIndex]=\"currentIndex\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"contentdata\" [styleData]=\"styleData\">\n        <div sliderbody>\n            <div class=\"flex justify-start md:justify-center users-block mb-4 \">\n                <ng-container *ngFor=\"let userData of contentdata; let j = index\">\n                    <div class=\"avatar-block mr-1\" [sbUicScrollableItem]=\"j\"\n                    [ngClass]=\"{'user-active': j === currentIndex}\" (click)=\"handleScrollClick(currentIndex);currentIndex = j\">\n                        <sb-uic-avatar-photo [defaulfColor]=\"'#1B2133'\" [datalen]=\"1\" [randomColor]=\"true\" [name]=\"userData?.userDetails?.firstName\" [photoUrl]=\"userData?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                        </sb-uic-avatar-photo>\n                    </div>\n                </ng-container>\n            </div>\n            <div *ngFor=\"let ratingData of contentdata; let i = index\" [hidden]=\"i !== currentIndex\">\n                <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                    <p class=\"userName w-full mb-4\">{{ratingData?.userDetails?.firstName}}</p>\n        \n                    <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                        <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                            [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingData?.rating)}\"\n                            *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                            {{ getRatingIcon(rating, ratingData?.rating) }}\n                        </mat-icon>\n                    </div>\n                    <p class=\"content-feedback w-full mb-4 pl-0 pr-0 md:pl-12 md:pr-12 \">{{ratingData?.review}}</p>\n    \n                    <hr class=\"divider mb-4\">\n                    <p class=\"content-info w-full mb-4\">For The Content</p>\n                    <div class=\"w-full mr-0 md:mr-8 ml-0 md:ml-8\">\n                        <sb-uic-cards [widgetData]=\"ratingData\"></sb-uic-cards>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </sb-uic-sliders-ng-content>\n</ng-container>\n\n",
+                    styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.user-ratting-wrapper .content-info{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#666}.avatar-block{border:8px solid transparent;position:relative;cursor:pointer;width:48px;height:48px}.user-active{content:\"\";border:5px solid #f3972e;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:0;width:48px;height:48px}.user-active::after{content:\" \";position:absolute;top:106%;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:18px solid #f3972e}.users-block{overflow-x:auto;padding:16px;padding-bottom:24px!important;width:100%}hr.divider{border:1px solid #f3972e;width:185px}"]
                 }] }
     ];
     /** @nocollapse */
-    UserContentRatingComponent.ctorParameters = function () { return [
-        { type: RatingService }
+    UserContentRatingLibComponent.ctorParameters = function () { return [
+        { type: RatingService },
+        { type: UserContentRatingLibService }
     ]; };
-    return UserContentRatingComponent;
+    UserContentRatingLibComponent.propDecorators = {
+        providerId: [{ type: Input }],
+        formData: [{ type: Input }],
+        emptyResponse: [{ type: Output }],
+        scrollableItems: [{ type: ViewChildren, args: [ScrollableItemDirective,] }]
+    };
+    return UserContentRatingLibComponent;
 }());
 if (false) {
     /** @type {?} */
-    UserContentRatingComponent.prototype.currentIndex;
+    UserContentRatingLibComponent.prototype.currentIndex;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.providerId;
     /** @type {?} */
-    UserContentRatingComponent.prototype.styleData;
+    UserContentRatingLibComponent.prototype.formData;
     /** @type {?} */
-    UserContentRatingComponent.prototype.sliders;
+    UserContentRatingLibComponent.prototype.emptyResponse;
     /** @type {?} */
-    UserContentRatingComponent.prototype.contentCard;
+    UserContentRatingLibComponent.prototype.styleData;
     /** @type {?} */
-    UserContentRatingComponent.prototype.widgetData;
+    UserContentRatingLibComponent.prototype.contentdata;
     /** @type {?} */
-    UserContentRatingComponent.prototype.responseData;
+    UserContentRatingLibComponent.prototype.scrollableItems;
     /** @type {?} */
-    UserContentRatingComponent.prototype.ratingService;
+    UserContentRatingLibComponent.prototype.ratingService;
+    /** @type {?} */
+    UserContentRatingLibComponent.prototype.userRatingSvc;
 }
 
 /**
@@ -10649,6 +10245,7 @@ if (false) {
 var AvatarPhotoLibComponent = /** @class */ (function () {
     function AvatarPhotoLibComponent() {
         this.size = '';
+        this.defaulfColor = '';
         this.randomColor = false;
         this.showBadge = false;
         this.showInitials = false;
@@ -10684,9 +10281,16 @@ var AvatarPhotoLibComponent = /** @class */ (function () {
                 this.createInititals();
             }
             if (this.datalen === 1) {
-                this.randomcolors = [
-                    '#006400',
-                ];
+                if (this.defaulfColor) {
+                    this.randomcolors = [
+                        this.defaulfColor
+                    ];
+                }
+                else {
+                    this.randomcolors = [
+                        '#006400',
+                    ];
+                }
             }
             /** @type {?} */
             var randomIndex = Math.floor(Math.random() * Math.floor(this.colors.length));
@@ -10765,6 +10369,7 @@ var AvatarPhotoLibComponent = /** @class */ (function () {
         photoUrl: [{ type: Input }],
         name: [{ type: Input }],
         size: [{ type: Input }],
+        defaulfColor: [{ type: Input }],
         randomColor: [{ type: Input }],
         initials: [{ type: Input }],
         showBadge: [{ type: Input }]
@@ -10781,6 +10386,8 @@ if (false) {
     /** @type {?} */
     AvatarPhotoLibComponent.prototype.size;
     /** @type {?} */
+    AvatarPhotoLibComponent.prototype.defaulfColor;
+    /** @type {?} */
     AvatarPhotoLibComponent.prototype.randomColor;
     /** @type {?} */
     AvatarPhotoLibComponent.prototype.initials;
@@ -10842,6 +10449,7 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
         _this.valueSvc = valueSvc;
         _this.title = '';
         _this.loadNgContentData = false;
+        _this.autoScroll = false;
         _this.currentIndexValue = new EventEmitter();
         _this.id = "banner_" + Math.random();
         _this.defaultMenuSubscribe = null;
@@ -10859,7 +10467,9 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
      */
     function () {
         var _this = this;
-        this.reInitiateSlideInterval();
+        if (this.autoScroll) {
+            this.reInitiateSlideInterval();
+        }
         this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
          * @param {?} isLtMedium
          * @return {?}
@@ -10922,7 +10532,9 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
             this.currentIndex = this.widgetData.length + index;
             this.currentIndexValue.emit(this.currentIndex);
         }
-        this.reInitiateSlideInterval();
+        if (this.autoScroll) {
+            this.reInitiateSlideInterval();
+        }
     };
     Object.defineProperty(SlidersNgContentLibComponent.prototype, "isOpenInNewTab", {
         get: /**
@@ -10991,8 +10603,8 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
     SlidersNgContentLibComponent.decorators = [
         { type: Component, args: [{
                     selector: 'sb-uic-sliders-ng-content',
-                    template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n  [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n  <ng-container *ngIf=\"!loadNgContentData\">\n    <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"loadNgContentData\">\n    <!-- <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n      <ng-content select=\"[sliderbody]\"></ng-content>\n    <!-- </div> -->\n    \n  </ng-container>\n  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n  *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </div>\n</div>\n<div class=\"banner-container-solo margin-top-s\" *ngIf=\"widgetData?.length == 1\">\n  <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n\n<!-- <ng-container *ngIf=\"!widgetData?.length\">\n  <div class=\"slider default-slider h-full\">\n    <div class=\"relative h-full\">\n        <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n        <div class=\"default-title rounded-full\">\n            <p class=\"mat-h1\">{{title}}</p>\n        </div>\n    </div>\n  </div>\n</ng-container> -->\n",
-                    styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
+                    template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n  [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n  <ng-container *ngIf=\"!loadNgContentData\">\n    <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"loadNgContentData\">\n    <!-- <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n      <ng-content select=\"[sliderbody]\"></ng-content>\n    <!-- </div> -->\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n            <ng-content select=\"[sliderMeta]\"></ng-content>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n  *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </div>\n</div>\n<div class=\"banner-container-solo margin-top-s\" *ngIf=\"widgetData?.length == 1\">\n  <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n\n<!-- <ng-container *ngIf=\"!widgetData?.length\">\n  <div class=\"slider default-slider h-full\">\n    <div class=\"relative h-full\">\n        <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n        <div class=\"default-title rounded-full\">\n            <p class=\"mat-h1\">{{title}}</p>\n        </div>\n    </div>\n  </div>\n</ng-container> -->\n",
+                    styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta.top-center{left:0;bottom:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
                 }] }
     ];
     /** @nocollapse */
@@ -11005,8 +10617,10 @@ var SlidersNgContentLibComponent = /** @class */ (function (_super) {
         styleData: [{ type: Input }],
         title: [{ type: Input }],
         loadNgContentData: [{ type: Input }],
+        autoScroll: [{ type: Input }],
         currentIndexValue: [{ type: Output }],
-        id: [{ type: HostBinding, args: ['id',] }]
+        id: [{ type: HostBinding, args: ['id',] }],
+        currentIndex: [{ type: Input }]
     };
     return SlidersNgContentLibComponent;
 }(WidgetBaseComponent));
@@ -11020,6 +10634,8 @@ if (false) {
     /** @type {?} */
     SlidersNgContentLibComponent.prototype.loadNgContentData;
     /** @type {?} */
+    SlidersNgContentLibComponent.prototype.autoScroll;
+    /** @type {?} */
     SlidersNgContentLibComponent.prototype.currentIndexValue;
     /** @type {?} */
     SlidersNgContentLibComponent.prototype.id;
@@ -11106,12 +10722,31 @@ var SlidersNgContentLibModule = /** @class */ (function () {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-var UserContentRatingModule = /** @class */ (function () {
-    function UserContentRatingModule() {
+var ScrollableItemModule = /** @class */ (function () {
+    function ScrollableItemModule() {
+    }
+    ScrollableItemModule.decorators = [
+        { type: NgModule, args: [{
+                    declarations: [ScrollableItemDirective],
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [ScrollableItemDirective],
+                },] }
+    ];
+    return ScrollableItemModule;
+}());
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var UserContentRatingLibModule = /** @class */ (function () {
+    function UserContentRatingLibModule() {
     }
-    UserContentRatingModule.decorators = [
+    UserContentRatingLibModule.decorators = [
         { type: NgModule, args: [{
-                    declarations: [UserContentRatingComponent],
+                    declarations: [UserContentRatingLibComponent],
                     imports: [
                         CommonModule,
                         MatIconModule,
@@ -11120,14 +10755,15 @@ var UserContentRatingModule = /** @class */ (function () {
                         SlidersLibModule,
                         CardsModule,
                         AvatarPhotoLibModule,
-                        SlidersNgContentLibModule
+                        SlidersNgContentLibModule,
+                        ScrollableItemModule
                     ],
-                    exports: [UserContentRatingComponent],
-                    providers: [RatingService],
+                    exports: [UserContentRatingLibComponent],
+                    providers: [RatingService, UserContentRatingLibService],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 },] }
     ];
-    return UserContentRatingModule;
+    return UserContentRatingLibModule;
 }());
 
 /**
@@ -11140,5 +10776,5 @@ var UserContentRatingModule = /** @class */ (function () {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, PipePublicURL as ɵba, DisplayContentTypeLibModule as ɵbb, DisplayContentTypeLibComponent as ɵbc, DefaultThumbnailModule as ɵbd, DefaultThumbnailDirective as ɵbe, PipeDurationTransformModule as ɵbf, PipeDurationTransformPipe as ɵbg, CompetencyPassbookComponent as ɵbh, CompetencyPassbookService as ɵbi, PillsModule as ɵbj, PillsComponent as ɵbk, UserContentRatingComponent as ɵbl, RatingService as ɵbm, AvatarPhotoLibModule as ɵbn, AvatarPhotoLibComponent as ɵbo, MyHammerConfig$1 as ɵbp, SlidersNgContentLibModule as ɵbq, SlidersNgContentLibComponent as ɵbr, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CalenderDayComponent as ɵr, CommonStripComponent as ɵs, CardResourceComponent as ɵt, CardsComponent as ɵu, CardPortraitComponent as ɵv, CardUserComponent as ɵw, CardLandscapeComponent as ɵx, CardWideComponent as ɵy, PipePublicURLModule as ɵz };
+export { AnnouncementsModule, CalenderModule, CardsModule, CommonMethodsService, CommonStripModule, CompetencyPassbookModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentStripWithTabsLibModule, DataPointsModule, HttpLoaderFactory, MyHammerConfig, ROOT_WIDGET_CONFIG, SlidersLibModule, UserContentRatingLibModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, ContentStripWithTabsLibComponent as ɵa, WidgetContentService as ɵb, PipePublicURLModule as ɵba, PipePublicURL as ɵbb, DisplayContentTypeLibModule as ɵbc, DisplayContentTypeLibComponent as ɵbd, DefaultThumbnailModule as ɵbe, DefaultThumbnailDirective as ɵbf, PipeDurationTransformModule as ɵbg, PipeDurationTransformPipe as ɵbh, CompetencyPassbookComponent as ɵbi, CompetencyPassbookService as ɵbj, PillsModule as ɵbk, PillsComponent as ɵbl, UserContentRatingLibComponent as ɵbm, ScrollableItemDirective as ɵbn, RatingService as ɵbo, UserContentRatingLibService as ɵbp, AvatarPhotoLibModule as ɵbq, AvatarPhotoLibComponent as ɵbr, MyHammerConfig$1 as ɵbs, SlidersNgContentLibModule as ɵbt, SlidersNgContentLibComponent as ɵbu, ScrollableItemModule as ɵbv, WidgetUserService as ɵc, MultilingualTranslationsService as ɵd, ConfigurationsService as ɵe, HorizontalScrollerV2Module as ɵf, HorizontalScrollerV2Component as ɵg, SlidersLibComponent as ɵh, NavigationModule as ɵi, NavigationDirective as ɵj, ImageResponsiveModule as ɵk, ImageResponsiveDirective as ɵl, DataPointsComponent as ɵm, InsiteDataService as ɵn, SkeletonLoaderLibModule as ɵo, SkeletonLoaderLibComponent as ɵp, CalenderComponent as ɵq, CalenderDayComponent as ɵr, CommonStripComponent as ɵs, AnnouncementsComponent as ɵt, CardResourceComponent as ɵu, CardsComponent as ɵv, CardPortraitComponent as ɵw, CardUserComponent as ɵx, CardLandscapeComponent as ɵy, CardWideComponent as ɵz };
 //# sourceMappingURL=sunbird-cb-consumption.js.map