@sunbird-cb/consumption 0.0.13 → 0.0.14

package/fesm5/sunbird-cb-consumption.js

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