@sunbird-cb/consumption 0.0.13 → 0.0.14

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

@@ -8165,7 +8165,7 @@
         CardsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-cards',
-                        template: "<div class=\"widget-card-content-new\">\n    <ng-container *ngIf=\"widgetData && (((widgetData?.deletedMode || 'none') === 'hide' && !!!isLiveOrMarkForDeletion)\n    ? false\n    : !((widgetData?.intranetMode || 'none') === 'hide' && !!showIntranetContent))\"\n      [ngSwitch]=\"( (widgetData && widgetData?.cardSubType) || 'cardPortraitLib')\">\n      <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'user-card'\" [ngTemplateOutlet]=\"cardUser\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib-skeleton'\" [ngTemplateOutlet]=\"cardPortraitLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-portrait-lib'\" [ngTemplateOutlet]=\"cardPortraitLib\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib-skeleton'\" [ngTemplateOutlet]=\"cardLandscapeLibSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-landscape-lib'\" [ngTemplateOutlet]=\"cardLandscapeLib\"></ng-container>\n      <ng-container *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: [""]
                     }] }
         ];
@@ -9232,7 +9232,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 +10129,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 +10290,7 @@
          * @param {?} avg
          * @return {?}
          */
-        UserContentRatingComponent.prototype.getRatingIconClass = /**
+        UserContentRatingLibComponent.prototype.getRatingIconClass = /**
          * @param {?} ratingIndex
          * @param {?} avg
          * @return {?}
@@ -10811,41 +10302,70 @@
          * @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: 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 {?} */
+        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;
     }
 
     /**
@@ -10855,6 +10375,7 @@
     var AvatarPhotoLibComponent = /** @class */ (function () {
         function AvatarPhotoLibComponent() {
             this.size = '';
+            this.defaulfColor = '';
             this.randomColor = false;
             this.showBadge = false;
             this.showInitials = false;
@@ -10890,9 +10411,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 +10499,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 +10516,8 @@
         /** @type {?} */
         AvatarPhotoLibComponent.prototype.size;
         /** @type {?} */
+        AvatarPhotoLibComponent.prototype.defaulfColor;
+        /** @type {?} */
         AvatarPhotoLibComponent.prototype.randomColor;
         /** @type {?} */
         AvatarPhotoLibComponent.prototype.initials;
@@ -11048,6 +10579,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 +10597,9 @@
          */
         function () {
             var _this = this;
-            this.reInitiateSlideInterval();
+            if (this.autoScroll) {
+                this.reInitiateSlideInterval();
+            }
             this.defaultMenuSubscribe = this.isLtMedium$.subscribe((/**
              * @param {?} isLtMedium
              * @return {?}
@@ -11128,7 +10662,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 +10733,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 +10747,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 +10764,8 @@
         /** @type {?} */
         SlidersNgContentLibComponent.prototype.loadNgContentData;
         /** @type {?} */
+        SlidersNgContentLibComponent.prototype.autoScroll;
+        /** @type {?} */
         SlidersNgContentLibComponent.prototype.currentIndexValue;
         /** @type {?} */
         SlidersNgContentLibComponent.prototype.id;
@@ -11312,12 +10852,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,14 +10885,15 @@
                             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.CalenderModule = CalenderModule;
@@ -11350,7 +10910,7 @@
     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;
@@ -11366,13 +10926,16 @@
     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.ɵbl = UserContentRatingLibComponent;
+    exports.ɵbm = ScrollableItemDirective;
+    exports.ɵbn = RatingService;
+    exports.ɵbo = UserContentRatingLibService;
+    exports.ɵbp = AvatarPhotoLibModule;
+    exports.ɵbq = AvatarPhotoLibComponent;
+    exports.ɵbr = MyHammerConfig$1;
+    exports.ɵbs = SlidersNgContentLibModule;
+    exports.ɵbt = SlidersNgContentLibComponent;
+    exports.ɵbu = ScrollableItemModule;
     exports.ɵc = WidgetUserService;
     exports.ɵd = MultilingualTranslationsService;
     exports.ɵe = ConfigurationsService;