npm - @sunbird-cb/consumption - Versions diffs - 0.0.13 → 0.0.15 - Mend

@sunbird-cb/consumption 0.0.13 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

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

@@ -388,7 +388,11 @@
                     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;
+                }
             }
         };
         /**
@@ -408,7 +412,11 @@
                     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;
+                }
             }
         };
         /**
@@ -6058,7 +6066,7 @@
         SlidersLibComponent.decorators = [
             { type: core.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}}"]
                     }] }
         ];
@@ -6534,8 +6542,8 @@
         DataPointsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-data-points',
-                        template: "<div class=\"w-full metrics-web\" *ngIf=\"layoutType === 'multipleRows' && !isDataLoading\">\n    <div *ngFor=\"let obj of objectData; 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 */
@@ -7980,6 +7988,73 @@
         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: core.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: core.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: core.NgModule, args: [{
+                        declarations: [AnnouncementsComponent],
+                        imports: [
+                            common.CommonModule,
+                            SkeletonLoaderLibModule
+                        ],
+                        exports: [AnnouncementsComponent],
+                    },] }
+        ];
+        return AnnouncementsModule;
+    }());
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -7999,7 +8074,8 @@
                             SlidersLibModule,
                             DataPointsModule,
                             CalenderModule,
-                            CommonStripModule
+                            CommonStripModule,
+                            AnnouncementsModule
                         ],
                     },] }
         ];
@@ -8165,7 +8241,7 @@
         CardsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-cards',
-                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib-skeleton'\" [ngTemplateOutlet]=\"cardWideLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-lib'\" [ngTemplateOutlet]=\"cardWideLib\"></ng-container>\n    </ng-container>\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: [""]
                     }] }
         ];
@@ -8869,7 +8945,7 @@
         CardUserComponent.decorators = [
             { type: core.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}"]
                     }] }
         ];
@@ -9232,7 +9308,7 @@
             { type: core.Component, args: [{
                         selector: 'sb-uic-card-wide',
                         template: "<mat-card class=\"card-wide-lib\">\n    <a (click)=\"raiseTelemetry();getRedirectUrlData(widgetData?.content); $event.stopPropagation()\" \n    role=\"link\" i18n-aria-label>\n    <div class=\"flex\">\n        <div>\n            <ng-container *ngIf=\"widgetData?.content?.posterImage\">\n                <img mat-card-image [src]=\"widgetData?.content?.posterImage | pipePublicURL\" loading=\"lazy\"\n                class=\"card-wide-img ws-mat-primary-lite-background margin-remove\" [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                [alt]=\"widgetData?.content?.name\" />\n              </ng-container>\n              <ng-container *ngIf=\"!widgetData?.content?.posterImage\">\n                <ng-container *ngIf=\"widgetData?.content?.appIcon; else defaultImg\">\n                  <img mat-card-image [src]=\"widgetData?.content?.appIcon | pipePublicURL\" loading=\"lazy\"\n                  class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"  [wsUtilsDefaultThumbnail]=\"defaultThumbnail\"\n                  [alt]=\"widgetData?.content?.name\" />\n                </ng-container>\n                <ng-template #defaultImg>\n                  <img mat-card-image [src]=\"defaultThumbnail\" loading=\"lazy\"\n                  class=\"card-wide-img ws-mat-primary-lite-background margin-remove\"\n                  [alt]=\"widgetData?.content?.name\" />\n                </ng-template>\n              </ng-container>\n        </div>\n        <div>\n            <div class=\"pl-4 pr-4 w-full\">\n                <div class=\"course_widget flex margin-remove\">\n                  <div class=\"flex flex-end course_v2\">\n                    <mat-icon class=\"mat-icon main_icon ws-mat-default-text margin-right-xs\">video_library</mat-icon>\n                    <sb-uic-display-content-type i18n-title title=\"Content Type\" *ngIf=\"widgetData?.content?.primaryCategory\"\n                      class=\"ws-mat-black60-text font-normal mat-caption \" [displayContentType]=\"widgetData?.content?.primaryCategory==='Course Unit'\n                      ?'Module'\n                      :widgetData?.content?.primaryCategory\">\n                    </sb-uic-display-content-type>\n                  </div>\n                </div>\n                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                  class=\"mat-subheading-1 title-text ws-mat-text-block-fade-gradient\">\n                  {{ widgetData?.content?.name }}\n                </div>\n\n            <div class=\"flex w-full flex-wrap flex-middle\">\n                <div class=\"course_logo_box\">\n                  <img [src]=\"widgetData?.content?.creatorLogo | pipePublicURL \" class=\"source-icon\" [wsUtilsDefaultThumbnail]=\"defaultSLogo\"\n                  [alt]=\"(widgetData?.content?.sourceName + '_' + widgetData?.content?.identifier)\" />\n                </div>\n                <!-- <span class=\"org-text\">{{'cardcontentv2.by' | translate}} -->\n                  <span class=\"org-text\">By&nbsp; {{ (widgetData?.content?.organisation && widgetData?.content?.organisation[0]) ? widgetData?.content?.organisation[0] : 'Karmayogi Bharat' }}</span>\n              </div>\n            </div>\n        </div>\n    </div>\n    </a>\n</mat-card>\n",
-                        styles: [".card-wide-lib{width:inherit;padding:16px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.16)}.card-wide-lib .card-wide-img{width:190px;height:107px;border-radius:12px}.card-wide-lib .course_widget{margin-top:10px}.card-wide-lib .course_widget .mat-icon{vertical-align:middle;color:#ef951e!important}.card-wide-lib .course_widget .course_v2{border:1px solid #ef951e;padding:4px 8px;align-items:end;border-radius:16px}.card-wide-lib .course_widget .main_icon{font-size:16px;width:16px;height:16px}.card-wide-lib .course_logo_box{width:38px;height:38px;background:#fff;border-radius:8px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.card-wide-lib .course_logo_box img{height:28px;width:28px;padding:5px;display:inline-block}.card-wide-lib .course_logo_box p{display:inline-block;vertical-align:top}.card-wide-lib .org-text{font-size:12px;font-weight:400;width:75%;padding-left:10px;word-break:break-all;white-space:initial;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}"]
+                        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 */
@@ -10129,664 +10205,155 @@
      * @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: core.Directive, args: [{
+                        selector: '[sbUicScrollableItem]'
+                    },] }
+        ];
+        /** @nocollapse */
+        ScrollableItemDirective.ctorParameters = function () { return [
+            { type: core.ElementRef }
+        ]; };
+        ScrollableItemDirective.propDecorators = {
+            key: [{ type: core.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: core.Injectable, args: [{
+                        providedIn: 'root'
+                    },] }
+        ];
+        /** @nocollapse */
+        UserContentRatingLibService.ctorParameters = function () { return [
+            { type: http.HttpClient }
+        ]; };
+        /** @nocollapse */ UserContentRatingLibService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function UserContentRatingLibService_Factory() { return new UserContentRatingLibService(core.ɵɵinject(http.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 core.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 {?}
@@ -10799,7 +10366,7 @@
          * @param {?} avg
          * @return {?}
          */
-        UserContentRatingComponent.prototype.getRatingIconClass = /**
+        UserContentRatingLibComponent.prototype.getRatingIconClass = /**
          * @param {?} ratingIndex
          * @param {?} avg
          * @return {?}
@@ -10811,41 +10378,70 @@
          * @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: core.Component, args: [{
                         selector: 'sb-uic-user-content-rating',
-                        template: "<!-- <sb-uic-sliders [title]=\"'providerName'\" [widgetData]=\"[]\" [styleData]=\"styleData\">\n    <div sliderbody>\n        <div class=\"flex justify-center\">\n            <div class=\"avatar-block mr-3\">\n                <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                </sb-uic-avatar-photo>\n            </div>\n            <div class=\"avatar-block mr-3\">\n                <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                </sb-uic-avatar-photo>\n            </div>\n        </div>\n        <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n            <p class=\"userName w-full\">Harshit Rao</p>\n\n            <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                    [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, 3.3)}\"\n                    *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                    {{ getRatingIcon(rating, 3.3) }}\n                </mat-icon>\n            </div>\n            <p class=\"content-feedback w-full\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud.</p>\n            <div class=\"w-full m-8\">\n                <sb-uic-cards [widgetData]=\"contentCard\"></sb-uic-cards>\n            </div>\n        </div>\n    </div>\n</sb-uic-sliders> -->\n\n<sb-uic-sliders-ng-content [title]=\"'providerName'\" (currentIndexValue)=\"getCurrentIndex($event)\" [loadNgContentData]=\"true\" [widgetData]=\"responseData\" [styleData]=\"styleData\">\n    <div sliderbody>\n        <div *ngFor=\"let data of responseData; let i = index\" [hidden]=\"i !== currentIndex\">\n            <div class=\"flex justify-center\">\n                <div class=\"avatar-block mr-3\">\n                    <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                    </sb-uic-avatar-photo>\n                </div>\n                <div class=\"avatar-block mr-3\">\n                    <sb-uic-avatar-photo [name]=\"contentCard?.userDetails?.firstName\" [photoUrl]=\"contentCard?.userDetails?.profileImageUrl\" size=\"m-side-rating\">\n                    </sb-uic-avatar-photo>\n                </div>\n            </div>\n            <div class=\"user-ratting-wrapper flex flex-wrap justify-center\">\n                <p class=\"userName w-full\">Harshit Rao</p>\n    \n                <div class=\"flex w-full flex-row justify-center gap-2 mb-4\">\n                    <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text\"\n                        [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, 3.3)}\"\n                        *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                        {{ getRatingIcon(rating, 3.3) }}\n                    </mat-icon>\n                </div>\n                <p class=\"content-feedback w-full\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam, quis nostrud.</p>\n                <div class=\"w-full m-8\">\n                    <sb-uic-cards [widgetData]=\"contentCard\"></sb-uic-cards>\n                </div>\n            </div>\n        </div>\n    </div>\n</sb-uic-sliders-ng-content>\n\n",
-                        styles: [".user-ratting-wrapper .userName{font-family:Montserrat;font-size:20px;font-weight:600;line-height:24.38px;text-align:center}.user-ratting-wrapper .content-feedback{font-family:Lato;font-size:16px;font-weight:400;line-height:19.2px;text-align:center;color:rgba(0,0,0,.87)}.avatar-block::before{content:\"\";border:4px solid #f3972e;border-radius:50%;width:41px;height:41px;display:flex;justify-content:center;align-items:center;position:absolute}"]
+                        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: core.Input }],
+            formData: [{ type: core.Input }],
+            emptyResponse: [{ type: core.Output }],
+            scrollableItems: [{ type: core.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;
     }
     /**
@@ -10855,6 +10451,7 @@
     var AvatarPhotoLibComponent = /** @class */ (function () {
         function AvatarPhotoLibComponent() {
             this.size = '';
+            this.defaulfColor = '';
             this.randomColor = false;
             this.showBadge = false;
             this.showInitials = false;
@@ -10890,9 +10487,16 @@
                     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));
@@ -10971,6 +10575,7 @@
             photoUrl: [{ type: core.Input }],
             name: [{ type: core.Input }],
             size: [{ type: core.Input }],
+            defaulfColor: [{ type: core.Input }],
             randomColor: [{ type: core.Input }],
             initials: [{ type: core.Input }],
             showBadge: [{ type: core.Input }]
@@ -10987,6 +10592,8 @@
         /** @type {?} */
         AvatarPhotoLibComponent.prototype.size;
         /** @type {?} */
+        AvatarPhotoLibComponent.prototype.defaulfColor;
+        /** @type {?} */
         AvatarPhotoLibComponent.prototype.randomColor;
         /** @type {?} */
         AvatarPhotoLibComponent.prototype.initials;
@@ -11048,6 +10655,7 @@
             _this.valueSvc = valueSvc;
             _this.title = '';
             _this.loadNgContentData = false;
+            _this.autoScroll = false;
             _this.currentIndexValue = new core.EventEmitter();
             _this.id = "banner_" + Math.random();
             _this.defaultMenuSubscribe = null;
@@ -11065,7 +10673,9 @@
          */
         function () {
             var _this = this;
-            this.reInitiateSlideInterval();
+            if (this.autoScroll) {
+                this.reInitiateSlideInterval();
+            }
             this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
              * @param {?} isLtMedium
              * @return {?}
@@ -11128,7 +10738,9 @@
                 this.currentIndex = this.widgetData.length + index;
                 this.currentIndexValue.emit(this.currentIndex);
             }
-            this.reInitiateSlideInterval();
+            if (this.autoScroll) {
+                this.reInitiateSlideInterval();
+            }
         };
         Object.defineProperty(SlidersNgContentLibComponent.prototype, "isOpenInNewTab", {
             get: /**
@@ -11197,8 +10809,8 @@
         SlidersNgContentLibComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-sliders-ng-content',
-                        template: "<div class=\"banner-container {{isMobile? styleData?.responsive?.bannerMetaClass : styleData?.bannerMetaClass}}\" (swipeleft)=\"slideTo(currentIndex + 1)\" (swiperight)=\"slideTo(currentIndex - 1)\"\n  *ngIf=\"widgetData?.length > 1\" [style.height]=\"isMobile? styleData?.responsive?.customHeight : styleData?.customHeight\"\n  [ngStyle]=\"{'border-radius': styleData?.borderRadius || '12px'}\">\n  <ng-container *ngIf=\"!loadNgContentData\">\n    <a (click)=\"raiseTelemetry(widgetData[currentIndex].redirectUrl)\"\n    [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-overlay\"\n    [ngClass]=\"{'cursor-auto': !widgetData[currentIndex].redirectUrl}\">\n      <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\">\n        <img i18n-alt alt=\"Page Banner\" [src]=\"slide.banners\" wsUtilsImageResponsive class=\"banner-image\" />\n      </div>\n    </a>\n    <ng-container *ngIf=\"isMobile && styleData?.responsive?.dots !== 'hidden' || !isMobile && styleData?.dots !== 'hidden'\">\n      <div class=\"banner-meta {{isMobile? styleData?.responsive?.bannerMetaAlign : styleData?.bannerMetaAlign}}\">\n        <a [routerLink]=\" !isOpenInNewTab && widgetData[currentIndex].redirectUrl? widgetData[currentIndex].redirectUrl : null\" class=\"banner-title text-truncate\"\n          *ngIf=\"widgetData[currentIndex].title\" [title]=\"widgetData[currentIndex].title\">\n          {{ widgetData[currentIndex].title }}\n        </a>\n        <div class=\"dots-container\" *ngIf=\"widgetData?.length > 1\">\n          <span class=\"dot\" [ngClass]=\"{ active: j === currentIndex }\" *ngFor=\"let slide of widgetData; let j = index\"\n            (click)=\"slideTo(j)\"></span>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"loadNgContentData\">\n    <!-- <div class=\"banner WidgetInstanceId\" *ngFor=\"let slide of widgetData; let i = index\" [hidden]=\"i !== currentIndex\"> -->\n      <ng-content select=\"[sliderbody]\"></ng-content>\n    <!-- </div> -->\n    \n  </ng-container>\n  <div class=\"navigation {{isMobile? styleData?.responsive?.arrowsPlacement : styleData?.arrowsPlacement}}\" \n  *ngIf=\"isMobile && styleData?.responsive?.navigationArrows !== 'hidden' || !isMobile && styleData?.navigationArrows !== 'hidden'\">\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"prev\" (click)=\"slideTo(currentIndex - 1)\">&#10094;</a>\n    <a *ngIf=\"widgetData?.length > 1\" role=\"button\" class=\"next\" (click)=\"slideTo(currentIndex + 1)\">&#10095;</a>\n  </div>\n</div>\n<div class=\"banner-container-solo margin-top-s\" *ngIf=\"widgetData?.length == 1\">\n  <img i18n-alt alt=\"Page Banner\" width=\"100%\" height=\"100%\" [src]=\"widgetData[0].banners\" wsUtilsImageResponsive class=\"banner-image-solo\" />\n</div>\n\n<!-- <ng-container *ngIf=\"!widgetData?.length\">\n  <div class=\"slider default-slider h-full\">\n    <div class=\"relative h-full\">\n        <img class=\"h-full\" src=\"assets/icons/home/default-slider-image.svg\" alt=\"\">\n        <div class=\"default-title rounded-full\">\n            <p class=\"mat-h1\">{{title}}</p>\n        </div>\n    </div>\n  </div>\n</ng-container> -->\n",
-                        styles: [".banner-container{min-height:243px;position:relative;margin:auto;padding-bottom:40px}.banner-container.inline-meta{padding-bottom:0!important}.banner-container.flat .banner .banner-image{border-radius:0!important}.banner-overlay{z-index:1;top:0;left:0;width:100%;height:100%;background:linear-gradient(to left,rgba(0,0,0,.25) 0,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,.25) 100%);border-radius:inherit}.banner{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;border-radius:inherit;height:inherit}.banner .banner-image{width:100%;min-height:243px;display:block;border-radius:inherit;height:inherit}.banner-meta{text-align:center;z-index:2;padding:8px 12px;position:absolute;bottom:0;left:50%;border-radius:12px;transform:translateX(-50%);box-sizing:border-box}.banner-meta.left{left:0;transform:translateX(0)}.banner-meta.right{left:100%;transform:translateX(-100%)}.banner-meta .banner-title{color:#f2f2f2;margin-bottom:8px;font-size:1.1rem}@media only screen and (max-width:599px){.banner-meta .banner-title{display:none}}.banner-meta .dots-container{padding:8px;display:flex;align-items:center;justify-content:center}.banner-meta .dots-container .dot{cursor:pointer;height:6px;width:6px;margin:0 4px;background-color:rgba(0,0,0,.4);border-radius:50%;display:inline-block;transition:background-color .5s!important}@media only screen and (max-width:599px){.banner-meta .dots-container .dot{height:8px;width:8px;margin:0 4px}}.banner-meta .dots-container .dot.active{border-radius:4px;background-color:#f3962f;width:16px}@keyframes fade{from{opacity:.25}to{opacity:1}}.next,.prev{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-weight:700;background-color:#1b2133!important;border-radius:50%;z-index:999;height:32px!important;width:32px!important;display:flex;align-items:center;margin-top:-16px;justify-content:center}.prev{left:0;margin-left:-16px}.next{right:0;margin-right:-16px}.navigation.bottom-right .prev{left:unset;right:45px;bottom:-15px;top:unset}.navigation.bottom-right .next{left:unset;right:15px;bottom:-15px;top:unset}.navigation.bottom-center .prev{left:calc(50% - 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-center .next{left:calc(50% + 20px);right:unset;bottom:-15px;top:unset}.navigation.bottom-left .prev{left:15px;right:unset;bottom:-15px;top:unset}.navigation.bottom-left .next{left:60px;right:unset;bottom:-15px;top:unset}.navigation.middle-inline .prev{left:30px}.navigation.middle-inline .next{right:30px}.banner-container-solo{overflow:hidden;margin:auto;border-radius:12px}.banner-image-solo{width:100%;display:block;border-radius:12px}.default-slider{height:100%;background:#d4e2fb}.default-slider .default-title{text-align:center;position:absolute;top:50%;left:0;right:0;margin:auto;transform:translateY(-50%);z-index:999;background:#e6efff;padding:32px;width:500px}.default-slider .default-title p{word-break:break-word;margin:0!important;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-transform:uppercase}@media screen and (max-width:768px){.default-slider{height:384px;width:100%}.default-slider .default-title{width:unset!important}}"]
+                        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 */
@@ -11211,8 +10823,10 @@
             styleData: [{ type: core.Input }],
             title: [{ type: core.Input }],
             loadNgContentData: [{ type: core.Input }],
+            autoScroll: [{ type: core.Input }],
             currentIndexValue: [{ type: core.Output }],
-            id: [{ type: core.HostBinding, args: ['id',] }]
+            id: [{ type: core.HostBinding, args: ['id',] }],
+            currentIndex: [{ type: core.Input }]
         };
         return SlidersNgContentLibComponent;
     }(resolverV2.WidgetBaseComponent));
@@ -11226,6 +10840,8 @@
         /** @type {?} */
         SlidersNgContentLibComponent.prototype.loadNgContentData;
         /** @type {?} */
+        SlidersNgContentLibComponent.prototype.autoScroll;
+        /** @type {?} */
         SlidersNgContentLibComponent.prototype.currentIndexValue;
         /** @type {?} */
         SlidersNgContentLibComponent.prototype.id;
@@ -11312,12 +10928,31 @@
      * @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: core.NgModule, args: [{
+                        declarations: [ScrollableItemDirective],
+                        imports: [
+                            common.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: core.NgModule, args: [{
-                        declarations: [UserContentRatingComponent],
+                        declarations: [UserContentRatingLibComponent],
                         imports: [
                             common.CommonModule,
                             material.MatIconModule,
@@ -11326,16 +10961,18 @@
                             SlidersLibModule,
                             CardsModule,
                             AvatarPhotoLibModule,
-                            SlidersNgContentLibModule
+                            SlidersNgContentLibModule,
+                            ScrollableItemModule
                         ],
-                        exports: [UserContentRatingComponent],
-                        providers: [RatingService],
+                        exports: [UserContentRatingLibComponent],
+                        providers: [RatingService, UserContentRatingLibService],
                         schemas: [core.CUSTOM_ELEMENTS_SCHEMA]
                     },] }
         ];
-        return UserContentRatingModule;
+        return UserContentRatingLibModule;
     }());
+    exports.AnnouncementsModule = AnnouncementsModule;
     exports.CalenderModule = CalenderModule;
     exports.CardsModule = CardsModule;
     exports.CommonMethodsService = CommonMethodsService;
@@ -11350,29 +10987,33 @@
     exports.MyHammerConfig = MyHammerConfig;
     exports.ROOT_WIDGET_CONFIG = ROOT_WIDGET_CONFIG;
     exports.SlidersLibModule = SlidersLibModule;
-    exports.UserContentRatingModule = UserContentRatingModule;
+    exports.UserContentRatingLibModule = UserContentRatingLibModule;
     exports.WIDGET_REGISTERED_LIB_MODULES = WIDGET_REGISTERED_LIB_MODULES;
     exports.WIDGET_REGISTRATION_LIB_CONFIG = WIDGET_REGISTRATION_LIB_CONFIG;
     exports.ɵa = ContentStripWithTabsLibComponent;
     exports.ɵb = WidgetContentService;
-    exports.ɵba = PipePublicURL;
-    exports.ɵbb = DisplayContentTypeLibModule;
-    exports.ɵbc = DisplayContentTypeLibComponent;
-    exports.ɵbd = DefaultThumbnailModule;
-    exports.ɵbe = DefaultThumbnailDirective;
-    exports.ɵbf = PipeDurationTransformModule;
-    exports.ɵbg = PipeDurationTransformPipe;
-    exports.ɵbh = CompetencyPassbookComponent;
-    exports.ɵbi = CompetencyPassbookService;
-    exports.ɵbj = PillsModule;
-    exports.ɵbk = PillsComponent;
-    exports.ɵbl = UserContentRatingComponent;
-    exports.ɵbm = RatingService;
-    exports.ɵbn = AvatarPhotoLibModule;
-    exports.ɵbo = AvatarPhotoLibComponent;
-    exports.ɵbp = MyHammerConfig$1;
-    exports.ɵbq = SlidersNgContentLibModule;
-    exports.ɵbr = SlidersNgContentLibComponent;
+    exports.ɵba = PipePublicURLModule;
+    exports.ɵbb = PipePublicURL;
+    exports.ɵbc = DisplayContentTypeLibModule;
+    exports.ɵbd = DisplayContentTypeLibComponent;
+    exports.ɵbe = DefaultThumbnailModule;
+    exports.ɵbf = DefaultThumbnailDirective;
+    exports.ɵbg = PipeDurationTransformModule;
+    exports.ɵbh = PipeDurationTransformPipe;
+    exports.ɵbi = CompetencyPassbookComponent;
+    exports.ɵbj = CompetencyPassbookService;
+    exports.ɵbk = PillsModule;
+    exports.ɵbl = PillsComponent;
+    exports.ɵbm = UserContentRatingLibComponent;
+    exports.ɵbn = ScrollableItemDirective;
+    exports.ɵbo = RatingService;
+    exports.ɵbp = UserContentRatingLibService;
+    exports.ɵbq = AvatarPhotoLibModule;
+    exports.ɵbr = AvatarPhotoLibComponent;
+    exports.ɵbs = MyHammerConfig$1;
+    exports.ɵbt = SlidersNgContentLibModule;
+    exports.ɵbu = SlidersNgContentLibComponent;
+    exports.ɵbv = ScrollableItemModule;
     exports.ɵc = WidgetUserService;
     exports.ɵd = MultilingualTranslationsService;
     exports.ɵe = ConfigurationsService;
@@ -11390,13 +11031,13 @@
     exports.ɵq = CalenderComponent;
     exports.ɵr = CalenderDayComponent;
     exports.ɵs = CommonStripComponent;
-    exports.ɵt = CardResourceComponent;
-    exports.ɵu = CardsComponent;
-    exports.ɵv = CardPortraitComponent;
-    exports.ɵw = CardUserComponent;
-    exports.ɵx = CardLandscapeComponent;
-    exports.ɵy = CardWideComponent;
-    exports.ɵz = PipePublicURLModule;
+    exports.ɵt = AnnouncementsComponent;
+    exports.ɵu = CardResourceComponent;
+    exports.ɵv = CardsComponent;
+    exports.ɵw = CardPortraitComponent;
+    exports.ɵx = CardUserComponent;
+    exports.ɵy = CardLandscapeComponent;
+    exports.ɵz = CardWideComponent;
     Object.defineProperty(exports, '__esModule', { value: true });