@sunbird-cb/consumption 0.0.23 → 0.0.25

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

@@ -4358,6 +4358,7 @@
             this.fetchAllCbpPlans(strip, calculateParentStatus);
             this.fetchAllTopContent(strip, calculateParentStatus);
             this.fetchAllFeaturedContent(strip, calculateParentStatus);
+            this.fetchAllChannela(strip, calculateParentStatus);
             // this.enrollInterval = setInterval(() => {
             //   this.fetchAllCbpPlans(strip, calculateParentStatus)
             // },                                1000)
@@ -5086,7 +5087,8 @@
                     (strip.request.cbpList && Object.keys(strip.request.cbpList).length) ||
                     (strip.request.trendingSearch && Object.keys(strip.request.trendingSearch).length) ||
                     (strip.request.topContent && Object.keys(strip.request.topContent).length) ||
-                    (strip.request.featureContent && Object.keys(strip.request.featureContent).length))) {
+                    (strip.request.featureContent && Object.keys(strip.request.featureContent).length) ||
+                    (strip.request.channels && Object.keys(strip.request.channels).length))) {
                 return true;
             }
             return false;
@@ -5786,6 +5788,132 @@
                 this.router.navigate([path], { queryParams: queryParamsData });
             }
         };
+        /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.fetchAllChannela = /**
+         * @param {?} strip
+         * @param {?=} calculateParentStatus
+         * @return {?}
+         */
+        function (strip, calculateParentStatus) {
+            if (calculateParentStatus === void 0) { calculateParentStatus = true; }
+            return __awaiter(this, void 0, void 0, function () {
+                var originalFilters, data, response, error_7;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(strip.request && strip.request.channels && Object.keys(strip.request.channels).length)) return [3 /*break*/, 4];
+                            originalFilters = [];
+                            if (strip.request &&
+                                strip.request.channels &&
+                                strip.request.channels.request &&
+                                strip.request.channels.request.filters) {
+                                originalFilters = strip.request.channels.request.filters;
+                                strip.request.channels.request.filters = this.postMethodFilters(strip.request.channels.request.filters);
+                            }
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            data = [
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Ministry of Consumer Affairs, Food and Public Distribution',
+                                    programCount: '10',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Ministry of Railways',
+                                    programCount: '10',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Department of Post',
+                                    programCount: '10',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'NLC India Limited',
+                                    programCount: '30',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Mission Karmayogi',
+                                    programCount: '24',
+                                },
+                                {
+                                    // tslint:disable-next-line: max-line-length
+                                    posterImage: 'https://portal.karmayogi.nic.in/content-store/content/do_114051411119235072127/artifact/do_114051411119235072127_1715260168985_default-provider.svg',
+                                    appIcon: '',
+                                    name: 'Mission Karmayogi',
+                                    programCount: '50',
+                                },
+                            ];
+                            return [4 /*yield*/, data
+                                // console.log('calling  after - response, ', response)
+                            ];
+                        case 2:
+                            response = _a.sent();
+                            // console.log('calling  after - response, ', response)
+                            if (response) {
+                                this.processStrip(strip, this.transformAllContentsToWidgets(response, strip), 'done', calculateParentStatus, response);
+                            }
+                            else {
+                                this.processStrip(strip, [], 'error', calculateParentStatus, null);
+                                this.emptyResponse.emit(true);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_7 = _a.sent();
+                            this.emptyResponse.emit(true);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        /**
+         * @private
+         * @param {?} contents
+         * @param {?} strip
+         * @return {?}
+         */
+        ContentStripWithTabsLibComponent.prototype.transformAllContentsToWidgets = /**
+         * @private
+         * @param {?} contents
+         * @param {?} strip
+         * @return {?}
+         */
+        function (contents, strip) {
+            return (contents || []).map((/**
+             * @param {?} content
+             * @param {?} idx
+             * @return {?}
+             */
+            function (content, idx) { return (content ? {
+                widgetType: 'cardLib',
+                widgetSubType: 'cardContentLib',
+                widgetHostClass: 'mb-2',
+                widgetData: __assign({ content: content }, (content.batch && { batch: content.batch }), { cardSubType: strip.stripConfig && strip.stripConfig.cardSubType, cardCustomeClass: strip.customeClass ? strip.customeClass : '', context: { pageSection: strip.key, position: idx }, intranetMode: strip.stripConfig && strip.stripConfig.intranetMode, deletedMode: strip.stripConfig && strip.stripConfig.deletedMode, contentTags: strip.stripConfig && strip.stripConfig.contentTags }),
+            } : {
+                widgetType: 'card',
+                widgetSubType: 'cardContent',
+                widgetHostClass: 'mb-2',
+                widgetData: {},
+            }); }));
+        };
         /**
          * @param {?} event
          * @return {?}
@@ -8391,7 +8519,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 *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></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 #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2 [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"false\" [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>",
+                        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 *ngSwitchCase=\"'card-wide-v2'\" [ngTemplateOutlet]=\"cardWideV2\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-wide-v2-skeleton'\" [ngTemplateOutlet]=\"cardWideV2Skeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib'\" [ngTemplateOutlet]=\"cardMdo\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-mdo-lib-skeleton'\" [ngTemplateOutlet]=\"cardMdoSkeleton\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></ng-container>\n      <ng-container *ngSwitchCase=\"'card-karma-program-lib-skeleton'\" [ngTemplateOutlet]=\"cardKarmaProgram\"></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 (contentData)=\"getRedirectUrlData($event)\"  [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 #cardWideV2Skeleton>\n  <sb-uic-card-wide-v2 [widgetData]=\"widgetData\" [isCardLoading]=\"true\" ></sb-uic-card-wide-v2>\n</ng-template>\n<ng-template #cardWideV2>\n  <sb-uic-card-wide-v2 (contentData)=\"getRedirectUrlData($event)\"  [cbPlanMapData]=\"cbPlanMapData\" [isCardLoading]=\"false\" [widgetData]=\"widgetData\" ></sb-uic-card-wide-v2>\n</ng-template>\n\n<ng-template #cardUser>\n  <sb-uic-card-user [widgetData]=\"widgetData\"></sb-uic-card-user>\n</ng-template>\n<ng-template #cardMdo>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardMdoSkeleton>\n  <sb-uic-card-mdo-channel [widgetData]=\"widgetData\"></sb-uic-card-mdo-channel>\n</ng-template>\n<ng-template #cardKarmaProgram>\n  <sb-uic-card-karma-programs [randomColorApply]=\"true\" [widgetData]=\"widgetData\"></sb-uic-card-karma-programs>\n</ng-template>",
                         styles: [""]
                     }] }
         ];
@@ -9838,9 +9966,19 @@
             this.translate = translate;
             this.langtranslations = langtranslations;
             this.configSvc = configSvc;
+            this.randomColorApply = false;
             this.userData = new core.EventEmitter();
             this.widgetType = '';
             this.widgetSubType = '';
+            this.randomColors = [
+                '#EF941D',
+                '#F97440',
+                '#35B5B0',
+                '#9988FF',
+                '#254092',
+                '#926525',
+                '#4F72DF'
+            ];
             this.langtranslations.languageSelectedObservable.subscribe((/**
              * @return {?}
              */
@@ -9871,6 +10009,26 @@
                 this.defaultThumbnail = '/assets/instances/eagle/app_logos/default.png';
                 this.defaultSLogo = '/assets/instances/eagle/app_logos/KarmayogiBharat_Logo.svg';
             }
+            this.setRandomColor();
+        };
+        /**
+         * @return {?}
+         */
+        CardKarmaProgramsComponent.prototype.setRandomColor = /**
+         * @return {?}
+         */
+        function () {
+            if (this.widgetData && this.widgetData.content) {
+                if (this.randomColorApply) {
+                    /** @type {?} */
+                    var randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomColors.length));
+                    this.widgetData.content['bgColor'] = this.randomColors[randomIndex1];
+                }
+                else {
+                    this.widgetData.content['bgColor'] = '#1a4ca1';
+                }
+            }
+            console.log(this.widgetData.content, this.randomColorApply);
         };
         /**
          * @return {?}
@@ -9896,11 +10054,23 @@
                 module: lodash.camelCase('user'),
             });
         };
+        Object.defineProperty(CardKarmaProgramsComponent.prototype, "getRandomColors", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                /** @type {?} */
+                var randomIndex1 = Math.floor(Math.random() * Math.floor(this.randomColors.length));
+                return this.randomColors[randomIndex1];
+            },
+            enumerable: true,
+            configurable: true
+        });
         CardKarmaProgramsComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'sb-uic-card-karma-programs',
-                        template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" \n                [routerLink]=\"['/app/learn/karma-programs/asdfghj/123456/micro-sites']\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-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-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-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                    class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                    {{ widgetData?.content?.name }}\n                                </div>\n                            </div>\n                            <div class=\"flex  title-container px-2\">\n                                <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                    class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                    {{ widgetData?.content?.programCount}} Programs\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
-                        styles: [".card-channels-container{position:relative;width:282px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:208px;height:208px;max-height:208px;margin:0 8px;background:#1a4ca1!important;border-radius:12px;padding:4px!important}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:124px;max-height:124px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}.card-channels-container .card-img{max-height:62px;min-height:62px;display:block;-o-object-fit:fill;object-fit:contain}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}"]
+                        template: "<mat-card class=\"channels-card card-channels-container mr-5 padding-remove cursor-pointer\" [ngStyle]=\"{'background': widgetData?.content?.bgColor}\">\n    <div class=\"display-contents\">\n        <ng-container *ngIf=\"widgetData.content\">\n            <a (click)=\"raiseTelemetry();$event.stopPropagation()\" \n                [routerLink]=\"['/app/learn/karma-programs/asdfghj/123456/micro-sites']\" role=\"link\"\n                i18n-aria-label>\n                <ng-container>\n                    <mat-card-content class=\"min-top\">\n                        <div class=\"flex flex-col h-full\">\n                            <div class=\"image-container\">\n                                <ng-container *ngIf=\"widgetData.content.posterImage\">\n                                    <img mat-card-image [src]=\"widgetData.content.posterImage | pipePublicURL\" loading=\"lazy\"\n                                    class=\"card-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-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-img ws-mat-primary-lite-background margin-remove\"\n                                      [alt]=\"widgetData.content.name\" />\n                                    </ng-template>\n                                  </ng-container>\n                            </div>\n                            <div class=\"title-container\">\n                                <div class=\"flex   px-2\">\n                                    <div [id]=\"'m-c-'+ widgetData.content?.identifier\"\n                                        class=\"flex-1 text-start  mat-subheading-2 title-text ws-mat-white-text\">\n                                        {{ widgetData?.content?.name }}\n                                    </div>\n                                </div>\n                                <div class=\"flex  px-2\">\n                                    <div [id]=\"'m-c-'+ widgetData?.content?.identifier\"\n                                        class=\"flex-1 text-start margin-remove  margin-top-xxs mat-subheading-2 title-text ws-mat-white-text\">\n                                        {{ widgetData?.content?.programCount}} Programs\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </mat-card-content>\n                </ng-container>\n            </a>\n        </ng-container>\n    </div>\n</mat-card>",
+                        styles: [".card-channels-container{position:relative;width:245px;box-sizing:border-box;box-shadow:0 10px 30px rgba(153,153,153,.2);overflow:hidden;min-height:217px;height:217px;max-height:217px;margin:0 8px;background:#1a4ca1;border-radius:12px}.card-channels-container .min-top{background:inherit;margin-bottom:0;height:inherit}.card-channels-container .image-container{background-color:#fff;width:inherit;height:139px;max-height:139px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-top-left-radius:12px;border-top-right-radius:12px}.card-channels-container .card-img{max-height:100%;min-height:100%;display:block;-o-object-fit:fill;object-fit:fill}.card-channels-container .mat-subheading-1{font:600 14px/24px Montserrat}.card-channels-container .title-container{background:inherit}.card-channels-container .description-text{position:relative;overflow:hidden;height:51px}.card-channels-container .title-text{word-break:break-all;white-space:initial;margin:8px 0;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;min-height:24px}"]
                     }] }
         ];
         /** @nocollapse */
@@ -9912,6 +10082,7 @@
         ]; };
         CardKarmaProgramsComponent.propDecorators = {
             widgetData: [{ type: core.Input }],
+            randomColorApply: [{ type: core.Input }],
             userData: [{ type: core.Output }]
         };
         return CardKarmaProgramsComponent;
@@ -9920,6 +10091,8 @@
         /** @type {?} */
         CardKarmaProgramsComponent.prototype.widgetData;
         /** @type {?} */
+        CardKarmaProgramsComponent.prototype.randomColorApply;
+        /** @type {?} */
         CardKarmaProgramsComponent.prototype.userData;
         /** @type {?} */
         CardKarmaProgramsComponent.prototype.defaultThumbnail;
@@ -9931,6 +10104,8 @@
         CardKarmaProgramsComponent.prototype.widgetType;
         /** @type {?} */
         CardKarmaProgramsComponent.prototype.widgetSubType;
+        /** @type {?} */
+        CardKarmaProgramsComponent.prototype.randomColors;
         /**
          * @type {?}
          * @private
@@ -9953,6 +10128,33 @@
         CardKarmaProgramsComponent.prototype.configSvc;
     }
 
+    /**
+     * @fileoverview added by tsickle
+     * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+     */
+    var CardKarmaProgramV2Component = /** @class */ (function () {
+        function CardKarmaProgramV2Component() {
+        }
+        /**
+         * @return {?}
+         */
+        CardKarmaProgramV2Component.prototype.ngOnInit = /**
+         * @return {?}
+         */
+        function () {
+        };
+        CardKarmaProgramV2Component.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'sb-uic-card-karma-program-v2',
+                        template: "<p>card-karma-program-v2 works!</p>\n",
+                        styles: [""]
+                    }] }
+        ];
+        /** @nocollapse */
+        CardKarmaProgramV2Component.ctorParameters = function () { return []; };
+        return CardKarmaProgramV2Component;
+    }());
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -9970,7 +10172,8 @@
                             CardWideComponent,
                             CardMDOChannelComponent,
                             CardWideV2Component,
-                            CardKarmaProgramsComponent
+                            CardKarmaProgramsComponent,
+                            CardKarmaProgramV2Component
                         ],
                         imports: [
                             common.CommonModule,
@@ -11634,28 +11837,29 @@
     exports.ɵb = WidgetUserService;
     exports.ɵba = CardWideV2Component;
     exports.ɵbb = CardKarmaProgramsComponent;
-    exports.ɵbc = PipePublicURLModule;
-    exports.ɵbd = PipePublicURL;
-    exports.ɵbe = DisplayContentTypeLibModule;
-    exports.ɵbf = DisplayContentTypeLibComponent;
-    exports.ɵbg = DefaultThumbnailModule;
-    exports.ɵbh = DefaultThumbnailDirective;
-    exports.ɵbi = PipeDurationTransformModule;
-    exports.ɵbj = PipeDurationTransformPipe;
-    exports.ɵbk = CompetencyPassbookComponent;
-    exports.ɵbl = CompetencyPassbookService;
-    exports.ɵbm = PillsModule;
-    exports.ɵbn = PillsComponent;
-    exports.ɵbo = UserContentRatingLibComponent;
-    exports.ɵbp = ScrollableItemDirective;
-    exports.ɵbq = RatingService;
-    exports.ɵbr = UserContentRatingLibService;
-    exports.ɵbs = AvatarPhotoLibModule;
-    exports.ɵbt = AvatarPhotoLibComponent;
-    exports.ɵbu = MyHammerConfig$1;
-    exports.ɵbv = SlidersNgContentLibModule;
-    exports.ɵbw = SlidersNgContentLibComponent;
-    exports.ɵbx = ScrollableItemModule;
+    exports.ɵbc = CardKarmaProgramV2Component;
+    exports.ɵbd = PipePublicURLModule;
+    exports.ɵbe = PipePublicURL;
+    exports.ɵbf = DisplayContentTypeLibModule;
+    exports.ɵbg = DisplayContentTypeLibComponent;
+    exports.ɵbh = DefaultThumbnailModule;
+    exports.ɵbi = DefaultThumbnailDirective;
+    exports.ɵbj = PipeDurationTransformModule;
+    exports.ɵbk = PipeDurationTransformPipe;
+    exports.ɵbl = CompetencyPassbookComponent;
+    exports.ɵbm = CompetencyPassbookService;
+    exports.ɵbn = PillsModule;
+    exports.ɵbo = PillsComponent;
+    exports.ɵbp = UserContentRatingLibComponent;
+    exports.ɵbq = ScrollableItemDirective;
+    exports.ɵbr = RatingService;
+    exports.ɵbs = UserContentRatingLibService;
+    exports.ɵbt = AvatarPhotoLibModule;
+    exports.ɵbu = AvatarPhotoLibComponent;
+    exports.ɵbv = MyHammerConfig$1;
+    exports.ɵbw = SlidersNgContentLibModule;
+    exports.ɵbx = SlidersNgContentLibComponent;
+    exports.ɵby = ScrollableItemModule;
     exports.ɵc = MultilingualTranslationsService;
     exports.ɵd = ConfigurationsService;
     exports.ɵe = HorizontalScrollerV2Module;